@charset "UTF-8";

/* WHMCS Bootstrap 4, RTL and existing JavaScript widgets. */

/* styes.css */
.intl-tel-input {
  position: relative;
  display: inline-block;
}
.intl-tel-input * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.intl-tel-input .hide {
  display: none;
}
.intl-tel-input .v-hide {
  visibility: hidden;
}
.intl-tel-input input,
.intl-tel-input input[type="tel"],
.intl-tel-input input[type="text"] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 36px;
  margin-left: 0;
}
.intl-tel-input .flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  padding: 1px;
}
.intl-tel-input .selected-flag {
  z-index: 1;
  position: relative;
  width: 36px;
  height: 100%;
}
.intl-tel-input .selected-flag .iti-flag {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 45px;
}
.intl-tel-input .selected-flag .iti-arrow {
  position: absolute;
  top: 50%;
  margin-top: -2px;
  left: 12px;
  width: 0;
  height: 0;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  border-top: 4px solid #555;
}
.intl-tel-input .selected-flag .iti-arrow.up {
  border-top: none;
  border-bottom: 4px solid #555;
}
.intl-tel-input .country-list {
  position: absolute;
  z-index: 9999;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #e8f0fe;
  border-top: 0;
  white-space: nowrap;
  max-height: 300px;
  overflow-y: scroll;
  left: 3px;
  margin-top: 4px;
  text-align: left;
  max-width: 322px;
  direction: ltr;
  border-radius: 0 0 10px 10px;
}
.intl-tel-input .country-list.dropup {
  bottom: 100%;
  margin-bottom: -1px;
}
.intl-tel-input .country-list .flag-box {
  display: inline-block;
  width: 20px;
}
@media (max-width: 500px) {
  .intl-tel-input .country-list {
    white-space: normal;
  }
}
.intl-tel-input .country-list .divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}
.intl-tel-input .country-list .country {
  padding: 5px 10px;
}
.intl-tel-input .country-list .country .dial-code {
  color: #999;
}
.intl-tel-input .country-list .country.highlight {
  background-color: rgba(0, 0, 0, 0.05);
}
.intl-tel-input .country-list .country-name,
.intl-tel-input .country-list .dial-code,
.intl-tel-input .country-list .flag-box {
  vertical-align: middle;
}
.intl-tel-input .country-list .country-name,
.intl-tel-input .country-list .flag-box {
  margin-left: 6px;
}
.intl-tel-input.allow-dropdown input,
.intl-tel-input.allow-dropdown input[type="tel"],
.intl-tel-input.allow-dropdown input[type="text"],
.intl-tel-input.separate-dial-code input,
.intl-tel-input.separate-dial-code input[type="tel"],
.intl-tel-input.separate-dial-code input[type="text"] {
  padding-right: 15px;
  padding-left: 52px;
  margin-right: 0;
}
.intl-tel-input.allow-dropdown .flag-container,
.intl-tel-input.separate-dial-code .flag-container {
  left: 0;
  right: auto;
}
.intl-tel-input.allow-dropdown .selected-flag,
.intl-tel-input.separate-dial-code .selected-flag {
  width: 46px;
}
.intl-tel-input.allow-dropdown .flag-container:hover {
  cursor: pointer;
}
.intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}
.intl-tel-input.allow-dropdown input[disabled] + .flag-container:hover,
.intl-tel-input.allow-dropdown input[readonly] + .flag-container:hover {
  cursor: default;
}
.intl-tel-input.allow-dropdown
  input[disabled]
  + .flag-container:hover
  .selected-flag,
.intl-tel-input.allow-dropdown
  input[readonly]
  + .flag-container:hover
  .selected-flag {
  background-color: transparent;
}
.intl-tel-input.separate-dial-code .selected-flag {
  background-color: rgb(232 240 254);
  display: table;
}
.intl-tel-input.separate-dial-code .selected-dial-code {
  display: table-cell;
  vertical-align: middle;
  border-radius: 25px;
}
.intl-tel-input.separate-dial-code.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.iti-sdc-2 input[type="tel"],
.intl-tel-input.separate-dial-code.iti-sdc-2 input[type="text"] {
  padding-right: 66px;
}
.intl-tel-input.separate-dial-code.iti-sdc-2 .selected-flag {
  width: 60px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type="tel"],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type="text"] {
  padding-right: 76px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
  width: 70px;
}
.intl-tel-input.separate-dial-code.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.iti-sdc-3 input[type="tel"],
.intl-tel-input.separate-dial-code.iti-sdc-3 input[type="text"] {
  padding-left: 74px;
}
.intl-tel-input.separate-dial-code.iti-sdc-3 .selected-flag {
  width: 68px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type="tel"],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type="text"] {
  padding-left: 130px;
  direction: ltr;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag {
  width: 110px;
  border-radius: 6px 0 0 6px;
  padding: 5px 10px;
}
.intl-tel-input.separate-dial-code.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.iti-sdc-4 input[type="tel"],
.intl-tel-input.separate-dial-code.iti-sdc-4 input[type="text"] {
  padding-right: 82px;
}
.intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag {
  width: 76px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type="tel"],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type="text"] {
  padding-right: 92px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
  width: 86px;
}
.intl-tel-input.separate-dial-code.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.iti-sdc-5 input[type="tel"],
.intl-tel-input.separate-dial-code.iti-sdc-5 input[type="text"] {
  padding-right: 90px;
}
.intl-tel-input.separate-dial-code.iti-sdc-5 .selected-flag {
  width: 84px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type="tel"],
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type="text"] {
  padding-right: 100px;
}
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag {
  width: 94px;
}
.intl-tel-input.iti-container {
  position: absolute;
  top: -1000px;
  right: -1000px;
  z-index: 1060;
  padding: 1px;
}
.intl-tel-input.iti-container:hover {
  cursor: pointer;
}
.iti-mobile .intl-tel-input.iti-container {
  top: 70px;
  /* bottom: 30px; */
  right: -35px;
  left: 0;
  position: fixed;
  height: 100%;
}
.iti-mobile .intl-tel-input .country-list {
  max-height: 100%;
  width: 100%;
}
.iti-mobile .intl-tel-input .country-list .country {
  padding: 10px 10px;
  line-height: 1.5em;
}
.iti-flag {
  width: 20px;
}
.iti-flag.be {
  width: 18px;
}
.iti-flag.ch {
  width: 15px;
}
.iti-flag.mc {
  width: 19px;
}
.iti-flag.ne {
  width: 18px;
}
.iti-flag.np {
  width: 13px;
}
.iti-flag.va {
  width: 15px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2 / 1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  .iti-flag {
    background-size: 5630px 15px;
  }
}
.iti-flag.ac {
  height: 10px;
  background-position: 0 0;
}
.iti-flag.ad {
  height: 14px;
  background-position: -22px 0;
}
.iti-flag.ae {
  height: 10px;
  background-position: -44px 0;
}
.iti-flag.af {
  height: 14px;
  background-position: -66px 0;
}
.iti-flag.ag {
  height: 14px;
  background-position: -88px 0;
}
.iti-flag.ai {
  height: 10px;
  background-position: -110px 0;
}
.iti-flag.al {
  height: 15px;
  background-position: -132px 0;
}
.iti-flag.am {
  height: 10px;
  background-position: -154px 0;
}
.iti-flag.ao {
  height: 14px;
  background-position: -176px 0;
}
.iti-flag.aq {
  height: 14px;
  background-position: -198px 0;
}
.iti-flag.ar {
  height: 13px;
  background-position: -220px 0;
}
.iti-flag.as {
  height: 10px;
  background-position: -242px 0;
}
.iti-flag.at {
  height: 14px;
  background-position: -264px 0;
}
.iti-flag.au {
  height: 10px;
  background-position: -286px 0;
}
.iti-flag.aw {
  height: 14px;
  background-position: -308px 0;
}
.iti-flag.ax {
  height: 13px;
  background-position: -330px 0;
}
.iti-flag.az {
  height: 10px;
  background-position: -352px 0;
}
.iti-flag.ba {
  height: 10px;
  background-position: -374px 0;
}
.iti-flag.bb {
  height: 14px;
  background-position: -396px 0;
}
.iti-flag.bd {
  height: 12px;
  background-position: -418px 0;
}
.iti-flag.be {
  height: 15px;
  background-position: -440px 0;
}
.iti-flag.bf {
  height: 14px;
  background-position: -460px 0;
}
.iti-flag.bg {
  height: 12px;
  background-position: -482px 0;
}
.iti-flag.bh {
  height: 12px;
  background-position: -504px 0;
}
.iti-flag.bi {
  height: 12px;
  background-position: -526px 0;
}
.iti-flag.bj {
  height: 14px;
  background-position: -548px 0;
}
.iti-flag.bl {
  height: 14px;
  background-position: -570px 0;
}
.iti-flag.bm {
  height: 10px;
  background-position: -592px 0;
}
.iti-flag.bn {
  height: 10px;
  background-position: -614px 0;
}
.iti-flag.bo {
  height: 14px;
  background-position: -636px 0;
}
.iti-flag.bq {
  height: 14px;
  background-position: -658px 0;
}
.iti-flag.br {
  height: 14px;
  background-position: -680px 0;
}
.iti-flag.bs {
  height: 10px;
  background-position: -702px 0;
}
.iti-flag.bt {
  height: 14px;
  background-position: -724px 0;
}
.iti-flag.bv {
  height: 15px;
  background-position: -746px 0;
}
.iti-flag.bw {
  height: 14px;
  background-position: -768px 0;
}
.iti-flag.by {
  height: 10px;
  background-position: -790px 0;
}
.iti-flag.bz {
  height: 14px;
  background-position: -812px 0;
}
.iti-flag.ca {
  height: 10px;
  background-position: -834px 0;
}
.iti-flag.cc {
  height: 10px;
  background-position: -856px 0;
}
.iti-flag.cd {
  height: 15px;
  background-position: -878px 0;
}
.iti-flag.cf {
  height: 14px;
  background-position: -900px 0;
}
.iti-flag.cg {
  height: 14px;
  background-position: -922px 0;
}
.iti-flag.ch {
  height: 15px;
  background-position: -944px 0;
}
.iti-flag.ci {
  height: 14px;
  background-position: -961px 0;
}
.iti-flag.ck {
  height: 10px;
  background-position: -983px 0;
}
.iti-flag.cl {
  height: 14px;
  background-position: -1005px 0;
}
.iti-flag.cm {
  height: 14px;
  background-position: -1027px 0;
}
.iti-flag.cn {
  height: 14px;
  background-position: -1049px 0;
}
.iti-flag.co {
  height: 14px;
  background-position: -1071px 0;
}
.iti-flag.cp {
  height: 14px;
  background-position: -1093px 0;
}
.iti-flag.cr {
  height: 12px;
  background-position: -1115px 0;
}
.iti-flag.cu {
  height: 10px;
  background-position: -1137px 0;
}
.iti-flag.cv {
  height: 12px;
  background-position: -1159px 0;
}
.iti-flag.cw {
  height: 14px;
  background-position: -1181px 0;
}
.iti-flag.cx {
  height: 10px;
  background-position: -1203px 0;
}
.iti-flag.cy {
  height: 13px;
  background-position: -1225px 0;
}
.iti-flag.cz {
  height: 14px;
  background-position: -1247px 0;
}
.iti-flag.de {
  height: 12px;
  background-position: -1269px 0;
}
.iti-flag.dg {
  height: 10px;
  background-position: -1291px 0;
}
.iti-flag.dj {
  height: 14px;
  background-position: -1313px 0;
}
.iti-flag.dk {
  height: 15px;
  background-position: -1335px 0;
}
.iti-flag.dm {
  height: 10px;
  background-position: -1357px 0;
}
.iti-flag.do {
  height: 13px;
  background-position: -1379px 0;
}
.iti-flag.dz {
  height: 14px;
  background-position: -1401px 0;
}
.iti-flag.ea {
  height: 14px;
  background-position: -1423px 0;
}
.iti-flag.ec {
  height: 14px;
  background-position: -1445px 0;
}
.iti-flag.ee {
  height: 13px;
  background-position: -1467px 0;
}
.iti-flag.eg {
  height: 14px;
  background-position: -1489px 0;
}
.iti-flag.eh {
  height: 10px;
  background-position: -1511px 0;
}
.iti-flag.er {
  height: 10px;
  background-position: -1533px 0;
}
.iti-flag.es {
  height: 14px;
  background-position: -1555px 0;
}
.iti-flag.et {
  height: 10px;
  background-position: -1577px 0;
}
.iti-flag.eu {
  height: 14px;
  background-position: -1599px 0;
}
.iti-flag.fi {
  height: 12px;
  background-position: -1621px 0;
}
.iti-flag.fj {
  height: 10px;
  background-position: -1643px 0;
}
.iti-flag.fk {
  height: 10px;
  background-position: -1665px 0;
}
.iti-flag.fm {
  height: 11px;
  background-position: -1687px 0;
}
.iti-flag.fo {
  height: 15px;
  background-position: -1709px 0;
}
.iti-flag.fr {
  height: 14px;
  background-position: -1731px 0;
}
.iti-flag.ga {
  height: 15px;
  background-position: -1753px 0;
}
.iti-flag.gb {
  height: 10px;
  background-position: -1775px 0;
}
.iti-flag.gd {
  height: 12px;
  background-position: -1797px 0;
}
.iti-flag.ge {
  height: 14px;
  background-position: -1819px 0;
}
.iti-flag.gf {
  height: 14px;
  background-position: -1841px 0;
}
.iti-flag.gg {
  height: 14px;
  background-position: -1863px 0;
}
.iti-flag.gh {
  height: 14px;
  background-position: -1885px 0;
}
.iti-flag.gi {
  height: 10px;
  background-position: -1907px 0;
}
.iti-flag.gl {
  height: 14px;
  background-position: -1929px 0;
}
.iti-flag.gm {
  height: 14px;
  background-position: -1951px 0;
}
.iti-flag.gn {
  height: 14px;
  background-position: -1973px 0;
}
.iti-flag.gp {
  height: 14px;
  background-position: -1995px 0;
}
.iti-flag.gq {
  height: 14px;
  background-position: -2017px 0;
}
.iti-flag.gr {
  height: 14px;
  background-position: -2039px 0;
}
.iti-flag.gs {
  height: 10px;
  background-position: -2061px 0;
}
.iti-flag.gt {
  height: 13px;
  background-position: -2083px 0;
}
.iti-flag.gu {
  height: 11px;
  background-position: -2105px 0;
}
.iti-flag.gw {
  height: 10px;
  background-position: -2127px 0;
}
.iti-flag.gy {
  height: 12px;
  background-position: -2149px 0;
}
.iti-flag.hk {
  height: 14px;
  background-position: -2171px 0;
}
.iti-flag.hm {
  height: 10px;
  background-position: -2193px 0;
}
.iti-flag.hn {
  height: 10px;
  background-position: -2215px 0;
}
.iti-flag.hr {
  height: 10px;
  background-position: -2237px 0;
}
.iti-flag.ht {
  height: 12px;
  background-position: -2259px 0;
}
.iti-flag.hu {
  height: 10px;
  background-position: -2281px 0;
}
.iti-flag.ic {
  height: 14px;
  background-position: -2303px 0;
}
.iti-flag.id {
  height: 14px;
  background-position: -2325px 0;
}
.iti-flag.ie {
  height: 10px;
  background-position: -2347px 0;
}
.iti-flag.il {
  height: 15px;
  background-position: -2369px 0;
}
.iti-flag.im {
  height: 10px;
  background-position: -2391px 0;
}
.iti-flag.in {
  height: 14px;
  background-position: -2413px 0;
}
.iti-flag.io {
  height: 10px;
  background-position: -2435px 0;
}
.iti-flag.iq {
  height: 14px;
  background-position: -2457px 0;
}
.iti-flag.ir {
  height: 12px;
  background-position: -2479px 0;
}
.iti-flag.is {
  height: 15px;
  background-position: -2501px 0;
}
.iti-flag.it {
  height: 14px;
  background-position: -2523px 0;
}
.iti-flag.je {
  height: 12px;
  background-position: -2545px 0;
}
.iti-flag.jm {
  height: 10px;
  background-position: -2567px 0;
}
.iti-flag.jo {
  height: 10px;
  background-position: -2589px 0;
}
.iti-flag.jp {
  height: 14px;
  background-position: -2611px 0;
}
.iti-flag.ke {
  height: 14px;
  background-position: -2633px 0;
}
.iti-flag.kg {
  height: 12px;
  background-position: -2655px 0;
}
.iti-flag.kh {
  height: 13px;
  background-position: -2677px 0;
}
.iti-flag.ki {
  height: 10px;
  background-position: -2699px 0;
}
.iti-flag.km {
  height: 12px;
  background-position: -2721px 0;
}
.iti-flag.kn {
  height: 14px;
  background-position: -2743px 0;
}
.iti-flag.kp {
  height: 10px;
  background-position: -2765px 0;
}
.iti-flag.kr {
  height: 14px;
  background-position: -2787px 0;
}
.iti-flag.kw {
  height: 10px;
  background-position: -2809px 0;
}
.iti-flag.ky {
  height: 10px;
  background-position: -2831px 0;
}
.iti-flag.kz {
  height: 10px;
  background-position: -2853px 0;
}
.iti-flag.la {
  height: 14px;
  background-position: -2875px 0;
}
.iti-flag.lb {
  height: 14px;
  background-position: -2897px 0;
}
.iti-flag.lc {
  height: 10px;
  background-position: -2919px 0;
}
.iti-flag.li {
  height: 12px;
  background-position: -2941px 0;
}
.iti-flag.lk {
  height: 10px;
  background-position: -2963px 0;
}
.iti-flag.lr {
  height: 11px;
  background-position: -2985px 0;
}
.iti-flag.ls {
  height: 14px;
  background-position: -3007px 0;
}
.iti-flag.lt {
  height: 12px;
  background-position: -3029px 0;
}
.iti-flag.lu {
  height: 12px;
  background-position: -3051px 0;
}
.iti-flag.lv {
  height: 10px;
  background-position: -3073px 0;
}
.iti-flag.ly {
  height: 10px;
  background-position: -3095px 0;
}
.iti-flag.ma {
  height: 14px;
  background-position: -3117px 0;
}
.iti-flag.mc {
  height: 15px;
  background-position: -3139px 0;
}
.iti-flag.md {
  height: 10px;
  background-position: -3160px 0;
}
.iti-flag.me {
  height: 10px;
  background-position: -3182px 0;
}
.iti-flag.mf {
  height: 14px;
  background-position: -3204px 0;
}
.iti-flag.mg {
  height: 14px;
  background-position: -3226px 0;
}
.iti-flag.mh {
  height: 11px;
  background-position: -3248px 0;
}
.iti-flag.mk {
  height: 10px;
  background-position: -3270px 0;
}
.iti-flag.ml {
  height: 14px;
  background-position: -3292px 0;
}
.iti-flag.mm {
  height: 14px;
  background-position: -3314px 0;
}
.iti-flag.mn {
  height: 10px;
  background-position: -3336px 0;
}
.iti-flag.mo {
  height: 14px;
  background-position: -3358px 0;
}
.iti-flag.mp {
  height: 10px;
  background-position: -3380px 0;
}
.iti-flag.mq {
  height: 14px;
  background-position: -3402px 0;
}
.iti-flag.mr {
  height: 14px;
  background-position: -3424px 0;
}
.iti-flag.ms {
  height: 10px;
  background-position: -3446px 0;
}
.iti-flag.mt {
  height: 14px;
  background-position: -3468px 0;
}
.iti-flag.mu {
  height: 14px;
  background-position: -3490px 0;
}
.iti-flag.mv {
  height: 14px;
  background-position: -3512px 0;
}
.iti-flag.mw {
  height: 14px;
  background-position: -3534px 0;
}
.iti-flag.mx {
  height: 12px;
  background-position: -3556px 0;
}
.iti-flag.my {
  height: 10px;
  background-position: -3578px 0;
}
.iti-flag.mz {
  height: 14px;
  background-position: -3600px 0;
}
.iti-flag.na {
  height: 14px;
  background-position: -3622px 0;
}
.iti-flag.nc {
  height: 10px;
  background-position: -3644px 0;
}
.iti-flag.ne {
  height: 15px;
  background-position: -3666px 0;
}
.iti-flag.nf {
  height: 10px;
  background-position: -3686px 0;
}
.iti-flag.ng {
  height: 10px;
  background-position: -3708px 0;
}
.iti-flag.ni {
  height: 12px;
  background-position: -3730px 0;
}
.iti-flag.nl {
  height: 14px;
  background-position: -3752px 0;
}
.iti-flag.no {
  height: 15px;
  background-position: -3774px 0;
}
.iti-flag.np {
  height: 15px;
  background-position: -3796px 0;
}
.iti-flag.nr {
  height: 10px;
  background-position: -3811px 0;
}
.iti-flag.nu {
  height: 10px;
  background-position: -3833px 0;
}
.iti-flag.nz {
  height: 10px;
  background-position: -3855px 0;
}
.iti-flag.om {
  height: 10px;
  background-position: -3877px 0;
}
.iti-flag.pa {
  height: 14px;
  background-position: -3899px 0;
}
.iti-flag.pe {
  height: 14px;
  background-position: -3921px 0;
}
.iti-flag.pf {
  height: 14px;
  background-position: -3943px 0;
}
.iti-flag.pg {
  height: 15px;
  background-position: -3965px 0;
}
.iti-flag.ph {
  height: 10px;
  background-position: -3987px 0;
}
.iti-flag.pk {
  height: 14px;
  background-position: -4009px 0;
}
.iti-flag.pl {
  height: 13px;
  background-position: -4031px 0;
}
.iti-flag.pm {
  height: 14px;
  background-position: -4053px 0;
}
.iti-flag.pn {
  height: 10px;
  background-position: -4075px 0;
}
.iti-flag.pr {
  height: 14px;
  background-position: -4097px 0;
}
.iti-flag.ps {
  height: 10px;
  background-position: -4119px 0;
}
.iti-flag.pt {
  height: 14px;
  background-position: -4141px 0;
}
.iti-flag.pw {
  height: 13px;
  background-position: -4163px 0;
}
.iti-flag.py {
  height: 11px;
  background-position: -4185px 0;
}
.iti-flag.qa {
  height: 8px;
  background-position: -4207px 0;
}
.iti-flag.re {
  height: 14px;
  background-position: -4229px 0;
}
.iti-flag.ro {
  height: 14px;
  background-position: -4251px 0;
}
.iti-flag.rs {
  height: 14px;
  background-position: -4273px 0;
}
.iti-flag.ru {
  height: 14px;
  background-position: -4295px 0;
}
.iti-flag.rw {
  height: 14px;
  background-position: -4317px 0;
}
.iti-flag.sa {
  height: 14px;
  background-position: -4339px 0;
}
.iti-flag.sb {
  height: 10px;
  background-position: -4361px 0;
}
.iti-flag.sc {
  height: 10px;
  background-position: -4383px 0;
}
.iti-flag.sd {
  height: 10px;
  background-position: -4405px 0;
}
.iti-flag.se {
  height: 13px;
  background-position: -4427px 0;
}
.iti-flag.sg {
  height: 14px;
  background-position: -4449px 0;
}
.iti-flag.sh {
  height: 10px;
  background-position: -4471px 0;
}
.iti-flag.si {
  height: 10px;
  background-position: -4493px 0;
}
.iti-flag.sj {
  height: 15px;
  background-position: -4515px 0;
}
.iti-flag.sk {
  height: 14px;
  background-position: -4537px 0;
}
.iti-flag.sl {
  height: 14px;
  background-position: -4559px 0;
}
.iti-flag.sm {
  height: 15px;
  background-position: -4581px 0;
}
.iti-flag.sn {
  height: 14px;
  background-position: -4603px 0;
}
.iti-flag.so {
  height: 14px;
  background-position: -4625px 0;
}
.iti-flag.sr {
  height: 14px;
  background-position: -4647px 0;
}
.iti-flag.ss {
  height: 10px;
  background-position: -4669px 0;
}
.iti-flag.st {
  height: 10px;
  background-position: -4691px 0;
}
.iti-flag.sv {
  height: 12px;
  background-position: -4713px 0;
}
.iti-flag.sx {
  height: 14px;
  background-position: -4735px 0;
}
.iti-flag.sy {
  height: 14px;
  background-position: -4757px 0;
}
.iti-flag.sz {
  height: 14px;
  background-position: -4779px 0;
}
.iti-flag.ta {
  height: 10px;
  background-position: -4801px 0;
}
.iti-flag.tc {
  height: 10px;
  background-position: -4823px 0;
}
.iti-flag.td {
  height: 14px;
  background-position: -4845px 0;
}
.iti-flag.tf {
  height: 14px;
  background-position: -4867px 0;
}
.iti-flag.tg {
  height: 13px;
  background-position: -4889px 0;
}
.iti-flag.th {
  height: 14px;
  background-position: -4911px 0;
}
.iti-flag.tj {
  height: 10px;
  background-position: -4933px 0;
}
.iti-flag.tk {
  height: 10px;
  background-position: -4955px 0;
}
.iti-flag.tl {
  height: 10px;
  background-position: -4977px 0;
}
.iti-flag.tm {
  height: 14px;
  background-position: -4999px 0;
}
.iti-flag.tn {
  height: 14px;
  background-position: -5021px 0;
}
.iti-flag.to {
  height: 10px;
  background-position: -5043px 0;
}
.iti-flag.tr {
  height: 14px;
  background-position: -5065px 0;
}
.iti-flag.tt {
  height: 12px;
  background-position: -5087px 0;
}
.iti-flag.tv {
  height: 10px;
  background-position: -5109px 0;
}
.iti-flag.tw {
  height: 14px;
  background-position: -5131px 0;
}
.iti-flag.tz {
  height: 14px;
  background-position: -5153px 0;
}
.iti-flag.ua {
  height: 14px;
  background-position: -5175px 0;
}
.iti-flag.ug {
  height: 14px;
  background-position: -5197px 0;
}
.iti-flag.um {
  height: 11px;
  background-position: -5219px 0;
}
.iti-flag.us {
  height: 11px;
  background-position: -5241px 0;
}
.iti-flag.uy {
  height: 14px;
  background-position: -5263px 0;
}
.iti-flag.uz {
  height: 10px;
  background-position: -5285px 0;
}
.iti-flag.va {
  height: 15px;
  background-position: -5307px 0;
}
.iti-flag.vc {
  height: 14px;
  background-position: -5324px 0;
}
.iti-flag.ve {
  height: 14px;
  background-position: -5346px 0;
}
.iti-flag.vg {
  height: 10px;
  background-position: -5368px 0;
}
.iti-flag.vi {
  height: 14px;
  background-position: -5390px 0;
}
.iti-flag.vn {
  height: 14px;
  background-position: -5412px 0;
}
.iti-flag.vu {
  height: 12px;
  background-position: -5434px 0;
}
.iti-flag.wf {
  height: 14px;
  background-position: -5456px 0;
}
.iti-flag.ws {
  height: 10px;
  background-position: -5478px 0;
}
.iti-flag.xk {
  height: 15px;
  background-position: -5500px 0;
}
.iti-flag.ye {
  height: 14px;
  background-position: -5522px 0;
}
.iti-flag.yt {
  height: 14px;
  background-position: -5544px 0;
}
.iti-flag.za {
  height: 14px;
  background-position: -5566px 0;
}
.iti-flag.zm {
  height: 14px;
  background-position: -5588px 0;
}
.iti-flag.zw {
  height: 10px;
  background-position: -5610px 0;
}
.iti-flag {
  width: 20px;
  height: 15px;
  box-shadow: 0 0 1px 0 #888;
  background-image: url(../img/flags.png);
  background-repeat: no-repeat;
  background-color: #dbdbdb;
  background-position: 20px 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2 / 1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
  .iti-flag {
    background-image: url(../img/flags@2x.png);
  }
}
.iti-flag.np {
  background-color: transparent;
}
.intl-tel-input {
  width: 100%;
}

/* element.css */
.bootstrap-switch {
  display: inline-block;
  direction: ltr;
  cursor: pointer;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 0.625rem 1.5625rem 0 rgb(198 205 218 / 42%);
  border: 1px solid #efefef;
  position: relative;
  text-align: center;
  overflow: hidden;
  line-height: 8px;
  z-index: 0;
  user-select: none;
  vertical-align: middle;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  height: 30px;
}
.bootstrap-switch .bootstrap-switch-container {
  display: inline-block;
  top: 0;
  border-radius: 15px;
  transform: translate3d(0, 0, 0);
}
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block !important;
  height: 100%;
  line-height: 1.25;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0;
}
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-on {
  text-align: center;
  z-index: 1;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:hover {
  color: #fff;
  background-color: #025aa5;
  border-color: #01549b;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:focus {
  box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-primary.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-primary:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-primary:disabled {
  background-color: #0275d8;
  border-color: #0275d8;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-primary.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-primary.dropdown-toggle {
  color: #fff;
  background-color: #025aa5;
  background-image: none;
  border-color: #01549b;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary {
  color: #fff;
  background-color: #dc3545;
  border-color: #ccc;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:hover {
  color: #292b2c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:focus {
  box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary:disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-secondary.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-secondary:disabled {
  background-color: #fff;
  border-color: #ccc;
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary.active,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-secondary.dropdown-toggle {
  color: #292b2c;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #adadad;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #5bc0de;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #2aabd2;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:focus {
  box-shadow: 0 0 0 2px rgba(91, 192, 222, 0.5);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.disabled,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:disabled {
  background-color: #5bc0de;
  border-color: #5bc0de;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-info.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-info.dropdown-toggle {
  color: #fff;
  background-color: #31b0d5;
  background-image: none;
  border-color: #2aabd2;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #419641;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:focus {
  box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5);
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-success.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-success:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-success:disabled {
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-success.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-success.dropdown-toggle {
  color: #fff;
  background-color: #449d44;
  background-image: none;
  border-color: #419641;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #eb9316;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:focus {
  box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.5);
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-warning.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-warning:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-warning:disabled {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-warning.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-warning.dropdown-toggle {
  color: #fff;
  background-color: #ec971f;
  background-image: none;
  border-color: #eb9316;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:focus {
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.5);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.disabled,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:disabled {
  background-color: #d9534f;
  border-color: #d9534f;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-danger.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-danger.dropdown-toggle {
  color: #fff;
  background-color: #c9302c;
  background-image: none;
  border-color: #c12e2a;
}
.bootstrap-switch .bootstrap-switch-label {
  text-align: center;
  margin-top: -1px;
  margin-bottom: -1px;
  z-index: 100;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.bootstrap-switch .bootstrap-switch-handle-on {
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
}
.bootstrap-switch .bootstrap-switch-handle-off {
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.bootstrap-switch input[type="checkbox"],
.bootstrap-switch input[type="radio"] {
  position: absolute !important;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
}
.bootstrap-switch.bootstrap-switch-mini {
  min-width: 71px;
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
.bootstrap-switch.bootstrap-switch-small {
  min-width: 55px;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
  padding: 0.4rem 0.5rem;
  font-size: 13px;
}
.bootstrap-switch.bootstrap-switch-large {
  min-width: 120px;
}
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-indeterminate,
.bootstrap-switch.bootstrap-switch-readonly {
  cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label {
  opacity: 0.5;
  cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
  transition: margin-left 0.5s;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
}
.bootstrap-switch.bootstrap-switch-focused {
  box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
}
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off
  .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on
  .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
}
.md-editor {
  display: block;
  border: 1px solid #ddd;
}
.md-editor .md-footer,
.md-editor > .md-header {
  display: block;
  padding: 6px 4px;
  background: #f5f5f5;
}
.md-editor > .md-header {
  margin: 0;
}
.md-editor > .md-preview {
  background: #fff;
  border-top: 1px dashed #ddd;
  border-bottom: 1px dashed #ddd;
  min-height: 10px;
  overflow: auto;
}
.md-editor > textarea {
  font-size: 14px;
  outline: 0;
  margin: 0;
  display: block;
  padding: 0;
  width: 100%;
  border: 0;
  border-top: 1px dashed #ddd;
  border-bottom: 1px dashed #ddd;
  border-radius: 0;
  box-shadow: none;
  background: #eee;
}
.md-editor > textarea:focus {
  box-shadow: none;
  background: #fff;
}
.md-editor.active {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}
.md-editor .md-controls {
  float: left;
  padding: 3px;
}
.md-editor .md-controls .md-control {
  left: 5px;
  color: #bebebe;
  padding: 3px 3px 3px 10px;
}
.md-editor .md-controls .md-control:hover {
  color: #333;
}
.md-editor.md-fullscreen-mode {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  padding: 60px 30px 15px;
  background: #fff !important;
  border: 0 !important;
}
.md-editor.md-fullscreen-mode .md-footer {
  display: none;
}
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
  margin: 0 auto !important;
  height: 100% !important;
  font-size: 20px !important;
  padding: 20px !important;
  color: #999;
  line-height: 1.6em !important;
  resize: none !important;
  box-shadow: none !important;
  background: #fff !important;
  border: 0 !important;
}
.md-editor.md-fullscreen-mode .md-preview {
  color: #333;
  overflow: auto;
}
.md-editor.md-fullscreen-mode .md-input:focus,
.md-editor.md-fullscreen-mode .md-input:hover {
  color: #333;
  background: #fff !important;
}
.md-editor.md-fullscreen-mode .md-header {
  background: 0 0;
  text-align: center;
  position: fixed;
  width: 100%;
  top: 20px;
}
.md-editor.md-fullscreen-mode .btn-group {
  float: none;
}
.md-editor.md-fullscreen-mode .btn {
  border: 0;
  background: 0 0;
  color: #b3b3b3;
}
.md-editor.md-fullscreen-mode .btn.active,
.md-editor.md-fullscreen-mode .btn:active,
.md-editor.md-fullscreen-mode .btn:focus,
.md-editor.md-fullscreen-mode .btn:hover {
  box-shadow: none;
  color: #333;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  text-align: left;
  z-index: 1002;
  display: block;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a {
  color: #b3b3b3;
  clear: left;
  margin: 10px;
  width: 30px;
  height: 30px;
  text-align: center;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
  color: #333;
  text-decoration: none;
}
.md-editor.md-fullscreen-mode .md-editor {
  height: 100% !important;
  position: relative;
}
.md-editor .md-fullscreen-controls {
  display: none;
}
.md-nooverflow {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
table.dataTable td.dt-control {
  text-align: center;
  cursor: pointer;
}
table.dataTable td.dt-control:before {
  height: 1em;
  width: 1em;
  margin-top: -9px;
  display: inline-block;
  color: #fff;
  border: 0.15em solid #fff;
  border-radius: 1em;
  box-shadow: 0 0 0.2em #444;
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  font-family: "Courier New", Courier, monospace;
  line-height: 1em;
  content: "+";
  background-color: #31b131;
}
table.dataTable tr.dt-hasChild td.dt-control:before {
  content: "-";
  background-color: #d33333;
}
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting_desc_disabled,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_desc_disabled {
  cursor: pointer;
  position: relative;
  padding-left: 26px;
}
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:before {
  position: absolute;
  display: block;
  opacity: 0.125;
  right: 0;
  line-height: 9px;
  font-size: 0.8em;
}
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before,
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc_disabled:before {
  bottom: 50%;
  content: "▲";
}
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_desc_disabled:after {
  top: 50%;
  content: "▼";
}
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:after {
  opacity: 0.6;
}
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:after {
  display: none;
}
table.dataTable thead > tr > td:active,
table.dataTable thead > tr > th:active {
  outline: 0;
}
div.dataTables_scrollBody table.dataTable thead > tr > td:after,
div.dataTables_scrollBody table.dataTable thead > tr > td:before,
div.dataTables_scrollBody table.dataTable thead > tr > th:after,
div.dataTables_scrollBody table.dataTable thead > tr > th:before {
  display: none;
}
div.dataTables_processing {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 200px;
  margin-right: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 2px;
}
div.dataTables_processing > div:last-child {
  position: relative;
  width: 80px;
  height: 15px;
  margin: 1em auto;
}
div.dataTables_processing > div:last-child > div {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(2, 117, 216, 0.9);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div.dataTables_processing > div:last-child > div:nth-child(1) {
  right: 8px;
  animation: datatables-loader-1 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(2) {
  right: 8px;
  animation: datatables-loader-2 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(3) {
  right: 32px;
  animation: datatables-loader-2 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(4) {
  right: 56px;
  animation: datatables-loader-3 0.6s infinite;
}
@keyframes datatables-loader-1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes datatables-loader-3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes datatables-loader-2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
table.dataTable.nowrap td,
table.dataTable.nowrap th {
  white-space: nowrap;
}
table.dataTable td.dt-right,
table.dataTable th.dt-right {
  text-align: right;
}
table.dataTable td.dataTables_empty,
table.dataTable td.dt-center,
table.dataTable th.dt-center {
  text-align: center;
}
table.dataTable td.dt-left,
table.dataTable th.dt-left {
  text-align: left;
}
table.dataTable td.dt-justify,
table.dataTable th.dt-justify {
  text-align: justify;
}
table.dataTable td.dt-nowrap,
table.dataTable th.dt-nowrap {
  white-space: nowrap;
}
table.dataTable tfoot td,
table.dataTable tfoot th,
table.dataTable thead td,
table.dataTable thead th {
  text-align: right;
}
table.dataTable tfoot td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable thead th.dt-head-right {
  text-align: right;
}
table.dataTable tfoot td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable thead th.dt-head-center {
  text-align: center;
}
table.dataTable tfoot td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable thead th.dt-head-left {
  text-align: left;
}
table.dataTable tfoot td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable thead th.dt-head-justify {
  text-align: justify;
}
table.dataTable tfoot td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable thead th.dt-head-nowrap {
  white-space: nowrap;
}
table.dataTable tbody td.dt-body-right,
table.dataTable tbody th.dt-body-right {
  text-align: right;
}
table.dataTable tbody td.dt-body-center,
table.dataTable tbody th.dt-body-center {
  text-align: center;
}
table.dataTable tbody td.dt-body-left,
table.dataTable tbody th.dt-body-left {
  text-align: left;
}
table.dataTable tbody td.dt-body-justify,
table.dataTable tbody th.dt-body-justify {
  text-align: justify;
}
table.dataTable tbody td.dt-body-nowrap,
table.dataTable tbody th.dt-body-nowrap {
  white-space: nowrap;
}
table.dataTable {
  clear: both;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none !important;
  border-spacing: 5px;
}
table.dataTable td,
table.dataTable th {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
  text-align: center;
}
table.dataTable.nowrap td,
table.dataTable.nowrap th {
  white-space: nowrap;
}
table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) {
  background-color: transparent;
}
table.dataTable > tbody > tr {
  background-color: transparent;
}
table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.9);
  color: #fff;
}
table.dataTable > tbody > tr.selected a {
  color: #090a0b;
}
table.dataTable.table-striped > tbody > tr.odd > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}
table.dataTable.table-striped > tbody > tr.odd.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.95);
}
table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.075);
}
table.dataTable.table-hover > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.975);
}
div.dataTables_wrapper div.dataTables_length label {
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
  font-size: 0;
}
div.dataTables_wrapper div.dataTables_length select {
  width: auto;
  display: inline-block;
}
div.dataTables_wrapper div.dataTables_filter {
  text-align: left;
}
div.dataTables_wrapper div.dataTables_filter label {
  font-weight: 400;
  white-space: nowrap;
  text-align: right;
}
div.dataTables_wrapper div.dataTables_filter input {
  margin-right: 0.5em;
  display: inline-block;
  width: auto;
}
div.dataTables_wrapper div.dataTables_info {
  padding-top: 0.85em;
}
div.dataTables_wrapper div.dataTables_paginate {
  margin: 0;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 2px 0;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_processing {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 200px;
  margin-right: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 1em 0;
}
div.dataTables_scrollHead table.dataTable {
  margin-bottom: 0 !important;
}
div.dataTables_scrollBody > table {
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
div.dataTables_scrollBody > table > thead .sorting:after,
div.dataTables_scrollBody > table > thead .sorting:before,
div.dataTables_scrollBody > table > thead .sorting_asc:after,
div.dataTables_scrollBody > table > thead .sorting_asc:before,
div.dataTables_scrollBody > table > thead .sorting_desc:after,
div.dataTables_scrollBody > table > thead .sorting_desc:before {
  display: none;
}
div.dataTables_scrollBody > table > tbody tr:first-child td,
div.dataTables_scrollBody > table > tbody tr:first-child th {
  border-top: none;
}
div.dataTables_scrollFoot > .dataTables_scrollFootInner {
  box-sizing: content-box;
}
div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
  margin-top: 0 !important;
  border-top: none;
}
@media screen and (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: center;
  }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
    padding: 0;
  }
  div.dataTables_wrapper div.dataTables_paginate {
    display: contents;
  }
  .page-link {
    padding: 5px 10px !important;
    height: 30px !important;
    margin: 20px 2px 10px !important;
    line-height: 20px !important;
    border-radius: 3px !important;
  }
}

table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
  padding-left: 20px;
}
table.table-bordered.dataTable {
  border-left-width: 0;
}
table.table-bordered.dataTable td,
table.table-bordered.dataTable th {
  border-right-width: 0;
}
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable th:last-child {
  border-left-width: 1px;
}
table.table-bordered.dataTable tbody td,
table.table-bordered.dataTable tbody th {
  border-bottom-width: 0;
}
div.dataTables_scrollHead table.table-bordered {
  border-bottom-width: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row {
  margin: 0;
}
div.table-responsive
  > div.dataTables_wrapper
  > div.row
  > div[class^="col-"]:first-child {
  padding-right: 0;
}
div.table-responsive
  > div.dataTables_wrapper
  > div.row
  > div[class^="col-"]:last-child {
  padding-left: 0;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child {
  cursor: default !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before {
  display: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  position: relative;
  padding-right: 30px;
  cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  top: 50%;
  right: 5px;
  height: 1em;
  width: 1em;
  margin-top: -9px;
  display: block;
  position: absolute;
  color: #fff;
  border: 0.15em solid #fff;
  border-radius: 1em;
  box-shadow: 0 0 0.2em #444;
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  font-family: "Courier New", Courier, monospace;
  line-height: 1em;
  content: "+";
  background-color: #0275d8;
}
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr.parent
  > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr.parent
  > th.dtr-control:before {
  content: "-";
  background-color: #d33333;
}
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
  padding-right: 27px;
}
table.dataTable.dtr-inline.collapsed.compact
  > tbody
  > tr
  > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed.compact
  > tbody
  > tr
  > th.dtr-control:before {
  right: 4px;
  height: 14px;
  width: 14px;
  border-radius: 14px;
  line-height: 14px;
  text-indent: 3px;
}
table.dataTable.dtr-column > tbody > tr > td.control,
table.dataTable.dtr-column > tbody > tr > td.dtr-control,
table.dataTable.dtr-column > tbody > tr > th.control,
table.dataTable.dtr-column > tbody > tr > th.dtr-control {
  position: relative;
  cursor: pointer;
}
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:before {
  top: 50%;
  right: 50%;
  height: 0.8em;
  width: 0.8em;
  margin-top: -0.5em;
  margin-right: -0.5em;
  display: block;
  position: absolute;
  color: #fff;
  border: 0.15em solid #fff;
  border-radius: 1em;
  box-shadow: 0 0 0.2em #444;
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  font-family: "Courier New", Courier, monospace;
  line-height: 1em;
  content: "+";
  background-color: #0275d8;
}
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before {
  content: "-";
  background-color: #d33333;
}
table.dataTable > tbody > tr.child {
  padding: 0.5em 1em;
}
table.dataTable > tbody > tr.child:hover {
  background: 0 0 !important;
}
table.dataTable > tbody > tr.child ul.dtr-details {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom: 1px solid #efefef;
  padding: 0.5em 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
  padding-top: 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
  border-bottom: none;
}
table.dataTable > tbody > tr.child span.dtr-title {
  display: inline-block;
  min-width: 75px;
  font-weight: 700;
}
div.dtr-modal {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  padding: 10em 1em;
}
div.dtr-modal div.dtr-modal-display {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  z-index: 102;
  overflow: auto;
  background-color: #f5f5f7;
  border: 1px solid #000;
  border-radius: 0.5em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
div.dtr-modal div.dtr-modal-content {
  position: relative;
  padding: 1em;
}
div.dtr-modal div.dtr-modal-close {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border: 1px solid #eaeaea;
  background-color: #f9f9f9;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  z-index: 12;
}
div.dtr-modal div.dtr-modal-close:hover {
  background-color: #eaeaea;
}
div.dtr-modal div.dtr-modal-background {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 767px) {
  div.dtr-modal div.dtr-modal-display {
    width: 95%;
  }
}
div.dtr-bs-modal table.table tr:first-child td {
  border-top: none;
}
.multiselect-container {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.multiselect-container .input-group {
  margin: 5px;
}
.multiselect-container > li {
  padding: 0;
}
.multiselect-container > li > a.multiselect-all label {
  font-weight: 700;
}
.multiselect-container > li.multiselect-group label {
  margin: 0;
  padding: 3px 20px 3px 20px;
  height: 100%;
  font-weight: 700;
}
.multiselect-container > li.multiselect-group-clickable label {
  cursor: pointer;
}
.multiselect-container > li > a {
  padding: 0;
}
.multiselect-container > li > a > label {
  margin: 0;
  height: 100%;
  cursor: pointer;
  font-weight: 400;
  padding: 3px 20px 3px 40px;
}
.multiselect-container > li > a > label.checkbox,
.multiselect-container > li > a > label.radio {
  margin: 0;
}
.multiselect-container > li > a > label > input[type="checkbox"] {
  margin-bottom: 5px;
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.form-inline .multiselect-container label.checkbox,
.form-inline .multiselect-container label.radio {
  padding: 3px 20px 3px 40px;
}
.form-inline .multiselect-container li a label.checkbox input[type="checkbox"],
.form-inline .multiselect-container li a label.radio input[type="radio"] {
  margin-right: -20px;
  margin-left: 0;
}
body:after {
  content: url(../images/close.png) url(../images/loading.gif)
    url(../images/prev.png) url(../images/next.png);
  display: none;
}
.lightboxOverlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  background-color: #000;
  opacity: 0.8;
  display: none;
  direction: rtl;
}
.lightbox {
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: 400;
  direction: rtl;
}
.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  border-radius: 3px;
}
.lightbox a img {
  border: none;
}
.lb-outerContainer {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
}
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-container {
  padding: 4px;
}
.lb-loader {
  position: absolute;
  top: 43%;
  right: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.lb-container > .nav {
  right: 0;
}
.lb-nav a {
  outline: 0;
  background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}
.lb-next,
.lb-prev {
  height: 100%;
  cursor: pointer;
  display: block;
}
.lb-nav a.lb-prev {
  width: 34%;
  right: 0;
  float: right;
  background: url(../images/prev.png) right 48% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
  opacity: 1;
}
.lb-nav a.lb-next {
  width: 64%;
  left: 0;
  float: left;
  background: url(../images/next.png) left 48% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
  opacity: 1;
}
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  width: 100%;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-data {
  padding: 0 4px;
  color: #ccc;
}
.lb-data .lb-details {
  width: 85%;
  float: right;
  text-align: right;
  line-height: 1.1em;
}
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: 700;
  line-height: 1em;
}
.lb-data .lb-number {
  display: block;
  clear: right;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999;
}
.lb-data .lb-close {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top left no-repeat;
  text-align: left;
  outline: 0;
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
  cursor: pointer;
  opacity: 1;
}
.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url(blue.png) no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox_square-blue {
  background-position: 0 0;
}
.icheckbox_square-blue.hover {
  background-position: -24px 0;
}
.icheckbox_square-blue.checked {
  background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
  background-position: -72px 0;
  cursor: default;
}
.icheckbox_square-blue.checked.disabled {
  background-position: -96px 0;
}
.iradio_square-blue {
  background-position: -120px 0;
}
.iradio_square-blue.hover {
  background-position: -144px 0;
}
.iradio_square-blue.checked {
  background-position: -168px 0;
}
.iradio_square-blue.disabled {
  background-position: -192px 0;
  cursor: default;
}
.iradio_square-blue.checked.disabled {
  background-position: -216px 0;
}
@media (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi),
  (min-resolution: 1.25dppx) {
  .icheckbox_square-blue,
  .iradio_square-blue {
    background-image: url(blue@2x.png);
    -webkit-background-size: 240px 24px;
    background-size: 240px 24px;
  }
}
.captcha-overlay-badge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  cursor: pointer;
}
.captcha-overlay-badge-hidden {
  display: none;
}
.captcha-overlay-badge img {
  width: 60px;
  height: auto;
}
.captcha-overlay-popup {
  display: none;
  position: fixed;
  bottom: 80px;
  left: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  width: 300px;
  z-index: 9998;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.bootstrap-switch {
  display: inline-block;
  direction: ltr;
  cursor: pointer;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 0.625rem 1.5625rem 0 rgb(198 205 218 / 42%);
  border: 1px solid #efefef;
  position: relative;
  text-align: center;
  overflow: hidden;
  line-height: 8px;
  z-index: 0;
  user-select: none;
  vertical-align: middle;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  height: 30px;
}
.bootstrap-switch .bootstrap-switch-container {
  display: inline-block;
  top: 0;
  border-radius: 15px;
  transform: translate3d(0, 0, 0);
}
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-label {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block !important;
  height: 100%;
  line-height: 1.25;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0;
}
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-handle-on {
  text-align: center;
  z-index: 1;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:hover {
  color: #fff;
  background-color: #025aa5;
  border-color: #01549b;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:focus {
  box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-primary.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-primary:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-primary:disabled {
  background-color: #0275d8;
  border-color: #0275d8;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-primary.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-primary.dropdown-toggle {
  color: #fff;
  background-color: #025aa5;
  background-image: none;
  border-color: #01549b;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary {
  color: #fff;
  background-color: #dc3545;
  border-color: #ccc;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:hover {
  color: #292b2c;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:focus {
  box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.5);
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary:disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-secondary.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-secondary:disabled {
  background-color: #fff;
  border-color: #ccc;
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary.active,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-secondary.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-secondary.dropdown-toggle {
  color: #292b2c;
  background-color: #e6e6e6;
  background-image: none;
  border-color: #adadad;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #5bc0de;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:hover {
  color: #fff;
  background-color: #31b0d5;
  border-color: #2aabd2;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:focus {
  box-shadow: 0 0 0 2px rgba(91, 192, 222, 0.5);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.disabled,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:disabled {
  background-color: #5bc0de;
  border-color: #5bc0de;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-info.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-info.dropdown-toggle {
  color: #fff;
  background-color: #31b0d5;
  background-image: none;
  border-color: #2aabd2;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #419641;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:focus {
  box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5);
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-success.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-success:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-success:disabled {
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-success.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-success.dropdown-toggle {
  color: #fff;
  background-color: #449d44;
  background-image: none;
  border-color: #419641;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:hover {
  color: #fff;
  background-color: #ec971f;
  border-color: #eb9316;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:focus {
  box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.5);
}
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-warning.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-warning:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.disabled,
.bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-warning:disabled {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-warning:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-warning:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-warning.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-warning.dropdown-toggle {
  color: #fff;
  background-color: #ec971f;
  background-image: none;
  border-color: #eb9316;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:hover,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:hover {
  color: #fff;
  background-color: #c9302c;
  border-color: #c12e2a;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.focus,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.focus,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:focus {
  box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.5);
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.disabled,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.disabled,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:disabled {
  background-color: #d9534f;
  border-color: #d9534f;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger.active,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger:active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger.active,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger:active,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-off.bootstrap-switch-danger.dropdown-toggle,
.show
  > .bootstrap-switch
  .bootstrap-switch-handle-on.bootstrap-switch-danger.dropdown-toggle {
  color: #fff;
  background-color: #c9302c;
  background-image: none;
  border-color: #c12e2a;
}
.bootstrap-switch .bootstrap-switch-label {
  text-align: center;
  margin-top: -1px;
  margin-bottom: -1px;
  z-index: 100;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
}
.bootstrap-switch .bootstrap-switch-handle-on {
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
}
.bootstrap-switch .bootstrap-switch-handle-off {
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.bootstrap-switch input[type="checkbox"],
.bootstrap-switch input[type="radio"] {
  position: absolute !important;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
}
.bootstrap-switch.bootstrap-switch-mini {
  min-width: 71px;
}
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}
.bootstrap-switch.bootstrap-switch-small {
  min-width: 55px;
}
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
  padding: 0.4rem 0.5rem;
  font-size: 13px;
}
.bootstrap-switch.bootstrap-switch-large {
  min-width: 120px;
}
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  border-radius: 0.3rem;
}
.bootstrap-switch.bootstrap-switch-disabled,
.bootstrap-switch.bootstrap-switch-indeterminate,
.bootstrap-switch.bootstrap-switch-readonly {
  cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label {
  opacity: 0.5;
  cursor: default !important;
}
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
  transition: margin-left 0.5s;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
}
.bootstrap-switch.bootstrap-switch-focused {
  box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.5);
}
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off
  .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label {
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on
  .bootstrap-switch-label,
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
}
.md-editor {
  display: block;
  border: 1px solid #ddd;
}
.md-editor .md-footer,
.md-editor > .md-header {
  display: block;
  padding: 6px 4px;
  background: #f5f5f5;
}
.md-editor > .md-header {
  margin: 0;
}
.md-editor > .md-preview {
  background: #fff;
  border-top: 1px dashed #ddd;
  border-bottom: 1px dashed #ddd;
  min-height: 10px;
  overflow: auto;
}
.md-editor > textarea {
  font-size: 14px;
  outline: 0;
  margin: 0;
  display: block;
  padding: 0;
  width: 100%;
  border: 0;
  border-top: 1px dashed #ddd;
  border-bottom: 1px dashed #ddd;
  border-radius: 0;
  box-shadow: none;
  background: #eee;
}
.md-editor > textarea:focus {
  box-shadow: none;
  background: #fff;
}
.md-editor.active {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}
.md-editor .md-controls {
  float: left;
  padding: 3px;
}
.md-editor .md-controls .md-control {
  left: 5px;
  color: #bebebe;
  padding: 3px 3px 3px 10px;
}
.md-editor .md-controls .md-control:hover {
  color: #333;
}
.md-editor.md-fullscreen-mode {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  padding: 60px 30px 15px;
  background: #fff !important;
  border: 0 !important;
}
.md-editor.md-fullscreen-mode .md-footer {
  display: none;
}
.md-editor.md-fullscreen-mode .md-input,
.md-editor.md-fullscreen-mode .md-preview {
  margin: 0 auto !important;
  height: 100% !important;
  font-size: 20px !important;
  padding: 20px !important;
  color: #999;
  line-height: 1.6em !important;
  resize: none !important;
  box-shadow: none !important;
  background: #fff !important;
  border: 0 !important;
}
.md-editor.md-fullscreen-mode .md-preview {
  color: #333;
  overflow: auto;
}
.md-editor.md-fullscreen-mode .md-input:focus,
.md-editor.md-fullscreen-mode .md-input:hover {
  color: #333;
  background: #fff !important;
}
.md-editor.md-fullscreen-mode .md-header {
  background: 0 0;
  text-align: center;
  position: fixed;
  width: 100%;
  top: 20px;
}
.md-editor.md-fullscreen-mode .btn-group {
  float: none;
}
.md-editor.md-fullscreen-mode .btn {
  border: 0;
  background: 0 0;
  color: #b3b3b3;
}
.md-editor.md-fullscreen-mode .btn.active,
.md-editor.md-fullscreen-mode .btn:active,
.md-editor.md-fullscreen-mode .btn:focus,
.md-editor.md-fullscreen-mode .btn:hover {
  box-shadow: none;
  color: #333;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  text-align: left;
  z-index: 1002;
  display: block;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a {
  color: #b3b3b3;
  clear: left;
  margin: 10px;
  width: 30px;
  height: 30px;
  text-align: center;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
  color: #333;
  text-decoration: none;
}
.md-editor.md-fullscreen-mode .md-editor {
  height: 100% !important;
  position: relative;
}
.md-editor .md-fullscreen-controls {
  display: none;
}
.md-nooverflow {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
table.dataTable td.dt-control {
  text-align: center;
  cursor: pointer;
}
table.dataTable td.dt-control:before {
  height: 1em;
  width: 1em;
  margin-top: -9px;
  display: inline-block;
  color: #fff;
  border: 0.15em solid #fff;
  border-radius: 1em;
  box-shadow: 0 0 0.2em #444;
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  font-family: "Courier New", Courier, monospace;
  line-height: 1em;
  content: "+";
  background-color: #31b131;
}
table.dataTable tr.dt-hasChild td.dt-control:before {
  content: "-";
  background-color: #d33333;
}
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_asc_disabled,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting_desc_disabled,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_desc_disabled {
  cursor: pointer;
  position: relative;
  padding-left: 26px;
}
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > th.sorting_desc_disabled:before {
  position: absolute;
  display: block;
  opacity: 0.125;
  right: 10px;
  line-height: 9px;
  font-size: 0.8em;
}
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before,
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc_disabled:before {
  bottom: 50%;
  content: "▲";
}
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_asc_disabled:after,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > th.sorting_desc_disabled:after {
  top: 50%;
  content: "▼";
}
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:after {
  opacity: 0.6;
}
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:after {
  display: none;
}
table.dataTable thead > tr > td:active,
table.dataTable thead > tr > th:active {
  outline: 0;
}
div.dataTables_scrollBody table.dataTable thead > tr > td:after,
div.dataTables_scrollBody table.dataTable thead > tr > td:before,
div.dataTables_scrollBody table.dataTable thead > tr > th:after,
div.dataTables_scrollBody table.dataTable thead > tr > th:before {
  display: none;
}
div.dataTables_processing {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 200px;
  margin-right: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 2px;
}
div.dataTables_processing > div:last-child {
  position: relative;
  width: 80px;
  height: 15px;
  margin: 1em auto;
}
div.dataTables_processing > div:last-child > div {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(2, 117, 216, 0.9);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div.dataTables_processing > div:last-child > div:nth-child(1) {
  right: 8px;
  animation: datatables-loader-1 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(2) {
  right: 8px;
  animation: datatables-loader-2 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(3) {
  right: 32px;
  animation: datatables-loader-2 0.6s infinite;
}
div.dataTables_processing > div:last-child > div:nth-child(4) {
  right: 56px;
  animation: datatables-loader-3 0.6s infinite;
}
@keyframes datatables-loader-1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes datatables-loader-3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes datatables-loader-2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
table.dataTable.nowrap td,
table.dataTable.nowrap th {
  white-space: nowrap;
}
table.dataTable td.dt-right,
table.dataTable th.dt-right {
  text-align: right;
}
table.dataTable td.dataTables_empty,
table.dataTable td.dt-center,
table.dataTable th.dt-center {
  text-align: center;
}
table.dataTable td.dt-left,
table.dataTable th.dt-left {
  text-align: left;
}
table.dataTable td.dt-justify,
table.dataTable th.dt-justify {
  text-align: justify;
}
table.dataTable td.dt-nowrap,
table.dataTable th.dt-nowrap {
  white-space: nowrap;
}
table.dataTable tfoot td,
table.dataTable tfoot th,
table.dataTable thead td,
table.dataTable thead th {
  text-align: right;
}
table.dataTable tfoot td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable thead th.dt-head-right {
  text-align: right;
}
table.dataTable tfoot td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable thead th.dt-head-center {
  text-align: center;
}
table.dataTable tfoot td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable thead th.dt-head-left {
  text-align: left;
}
table.dataTable tfoot td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable thead th.dt-head-justify {
  text-align: justify;
}
table.dataTable tfoot td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable thead th.dt-head-nowrap {
  white-space: nowrap;
}
table.dataTable tbody td.dt-body-right,
table.dataTable tbody th.dt-body-right {
  text-align: right;
}
table.dataTable tbody td.dt-body-center,
table.dataTable tbody th.dt-body-center {
  text-align: center;
}
table.dataTable tbody td.dt-body-left,
table.dataTable tbody th.dt-body-left {
  text-align: left;
}
table.dataTable tbody td.dt-body-justify,
table.dataTable tbody th.dt-body-justify {
  text-align: justify;
}
table.dataTable tbody td.dt-body-nowrap,
table.dataTable tbody th.dt-body-nowrap {
  white-space: nowrap;
}
table.dataTable {
  clear: both;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none !important;
  border-spacing: 5px;
}
table.dataTable td,
table.dataTable th {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
table.dataTable td.dataTables_empty,
table.dataTable th.dataTables_empty {
  text-align: center;
}
table.dataTable.nowrap td,
table.dataTable.nowrap th {
  white-space: nowrap;
}
table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) {
  background-color: transparent;
}
table.dataTable > tbody > tr {
  background-color: transparent;
}
table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.9);
  color: #fff;
}
table.dataTable > tbody > tr.selected a {
  color: #090a0b;
}
table.dataTable.table-striped > tbody > tr.odd > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}
table.dataTable.table-striped > tbody > tr.odd.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.95);
}
table.dataTable.table-hover > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.075);
}
table.dataTable.table-hover > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(2, 117, 216, 0.975);
}
div.dataTables_wrapper div.dataTables_length label {
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
  font-size: 0;
}
div.dataTables_wrapper div.dataTables_length select {
  width: auto;
  display: inline-block;
}
div.dataTables_wrapper div.dataTables_filter {
  text-align: left;
}
div.dataTables_wrapper div.dataTables_filter label {
  font-weight: 400;
  white-space: nowrap;
  text-align: right;
}
div.dataTables_wrapper div.dataTables_filter input {
  margin-right: 0.5em;
  display: inline-block;
  width: auto;
}
div.dataTables_wrapper div.dataTables_info {
  padding-top: 0.85em;
}
div.dataTables_wrapper div.dataTables_paginate {
  margin: 0;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 2px 0;
  white-space: nowrap;
}
div.dataTables_wrapper div.dataTables_processing {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 200px;
  margin-right: -100px;
  margin-top: -26px;
  text-align: center;
  padding: 1em 0;
}
div.dataTables_scrollHead table.dataTable {
  margin-bottom: 0 !important;
}
div.dataTables_scrollBody > table {
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
div.dataTables_scrollBody > table > thead .sorting:after,
div.dataTables_scrollBody > table > thead .sorting:before,
div.dataTables_scrollBody > table > thead .sorting_asc:after,
div.dataTables_scrollBody > table > thead .sorting_asc:before,
div.dataTables_scrollBody > table > thead .sorting_desc:after,
div.dataTables_scrollBody > table > thead .sorting_desc:before {
  display: none;
}
div.dataTables_scrollBody > table > tbody tr:first-child td,
div.dataTables_scrollBody > table > tbody tr:first-child th {
  border-top: none;
}
div.dataTables_scrollFoot > .dataTables_scrollFootInner {
  box-sizing: content-box;
}
div.dataTables_scrollFoot > .dataTables_scrollFootInner > table {
  margin-top: 0 !important;
  border-top: none;
}
@media screen and (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_filter,
  div.dataTables_wrapper div.dataTables_info,
  div.dataTables_wrapper div.dataTables_length,
  div.dataTables_wrapper div.dataTables_paginate {
    text-align: center;
  }
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
    padding: 0;
  }
  div.dataTables_wrapper div.dataTables_paginate {
    display: contents;
  }
  .page-link {
    padding: 5px 10px !important;
    height: 30px !important;
    margin: 20px 2px 10px !important;
    line-height: 20px !important;
    border-radius: 3px !important;
  }
}

table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
  padding-left: 20px;
}
table.table-bordered.dataTable {
  border-left-width: 0;
}
table.table-bordered.dataTable td,
table.table-bordered.dataTable th {
  border-right-width: 0;
}
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable th:last-child {
  border-left-width: 1px;
}
table.table-bordered.dataTable tbody td,
table.table-bordered.dataTable tbody th {
  border-bottom-width: 0;
}
div.dataTables_scrollHead table.table-bordered {
  border-bottom-width: 0;
}
div.table-responsive > div.dataTables_wrapper > div.row {
  margin: 0;
}
div.table-responsive
  > div.dataTables_wrapper
  > div.row
  > div[class^="col-"]:first-child {
  padding-right: 0;
}
div.table-responsive
  > div.dataTables_wrapper
  > div.row
  > div[class^="col-"]:last-child {
  padding-left: 0;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child {
  cursor: default !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before {
  display: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  position: relative;
  padding-right: 30px;
  cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  top: 50%;
  right: 5px;
  height: 1em;
  width: 1em;
  margin-top: -9px;
  display: block;
  position: absolute;
  color: #fff;
  border: 0.15em solid #fff;
  border-radius: 1em;
  box-shadow: 0 0 0.2em #444;
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  font-family: "Courier New", Courier, monospace;
  line-height: 1em;
  content: "+";
  background-color: #0275d8;
}
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr.parent
  > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr.parent
  > th.dtr-control:before {
  content: "-";
  background-color: #d33333;
}
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
  padding-right: 27px;
}
table.dataTable.dtr-inline.collapsed.compact
  > tbody
  > tr
  > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed.compact
  > tbody
  > tr
  > th.dtr-control:before {
  right: 4px;
  height: 14px;
  width: 14px;
  border-radius: 14px;
  line-height: 14px;
  text-indent: 3px;
}
table.dataTable.dtr-column > tbody > tr > td.control,
table.dataTable.dtr-column > tbody > tr > td.dtr-control,
table.dataTable.dtr-column > tbody > tr > th.control,
table.dataTable.dtr-column > tbody > tr > th.dtr-control {
  position: relative;
  cursor: pointer;
}
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:before {
  top: 50%;
  right: 50%;
  height: 0.8em;
  width: 0.8em;
  margin-top: -0.5em;
  margin-right: -0.5em;
  display: block;
  position: absolute;
  color: #fff;
  border: 0.15em solid #fff;
  border-radius: 1em;
  box-shadow: 0 0 0.2em #444;
  box-sizing: content-box;
  text-align: center;
  text-indent: 0 !important;
  font-family: "Courier New", Courier, monospace;
  line-height: 1em;
  content: "+";
  background-color: #0275d8;
}
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before {
  content: "-";
  background-color: #d33333;
}
table.dataTable > tbody > tr.child {
  padding: 0.5em 1em;
}
table.dataTable > tbody > tr.child:hover {
  background: 0 0 !important;
}
table.dataTable > tbody > tr.child ul.dtr-details {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom: 1px solid #efefef;
  padding: 0.5em 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
  padding-top: 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
  border-bottom: none;
}
table.dataTable > tbody > tr.child span.dtr-title {
  display: inline-block;
  min-width: 75px;
  font-weight: 700;
}
div.dtr-modal {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  padding: 10em 1em;
}
div.dtr-modal div.dtr-modal-display {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  z-index: 102;
  overflow: auto;
  background-color: #f5f5f7;
  border: 1px solid #000;
  border-radius: 0.5em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
div.dtr-modal div.dtr-modal-content {
  position: relative;
  padding: 1em;
}
div.dtr-modal div.dtr-modal-close {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 22px;
  height: 22px;
  border: 1px solid #eaeaea;
  background-color: #f9f9f9;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  z-index: 12;
}
div.dtr-modal div.dtr-modal-close:hover {
  background-color: #eaeaea;
}
div.dtr-modal div.dtr-modal-background {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 767px) {
  div.dtr-modal div.dtr-modal-display {
    width: 95%;
  }
}
div.dtr-bs-modal table.table tr:first-child td {
  border-top: none;
}
.multiselect-container {
  position: absolute;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.multiselect-container .input-group {
  margin: 5px;
}
.multiselect-container > li {
  padding: 0;
}
.multiselect-container > li > a.multiselect-all label {
  font-weight: 700;
}
.multiselect-container > li.multiselect-group label {
  margin: 0;
  padding: 3px 20px 3px 20px;
  height: 100%;
  font-weight: 700;
}
.multiselect-container > li.multiselect-group-clickable label {
  cursor: pointer;
}
.multiselect-container > li > a {
  padding: 0;
}
.multiselect-container > li > a > label {
  margin: 0;
  height: 100%;
  cursor: pointer;
  font-weight: 400;
  padding: 3px 20px 3px 40px;
}
.multiselect-container > li > a > label.checkbox,
.multiselect-container > li > a > label.radio {
  margin: 0;
}
.multiselect-container > li > a > label > input[type="checkbox"] {
  margin-bottom: 5px;
}
.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.form-inline .multiselect-container label.checkbox,
.form-inline .multiselect-container label.radio {
  padding: 3px 20px 3px 40px;
}
.form-inline .multiselect-container li a label.checkbox input[type="checkbox"],
.form-inline .multiselect-container li a label.radio input[type="radio"] {
  margin-right: -20px;
  margin-left: 0;
}
body:after {
  content: url(../images/close.png) url(../images/loading.gif)
    url(../images/prev.png) url(../images/next.png);
  display: none;
}
.lightboxOverlay {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9999;
  background-color: #000;
  opacity: 0.8;
  display: none;
  direction: rtl;
}
.lightbox {
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: 400;
  direction: rtl;
}
.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  border-radius: 3px;
}
.lightbox a img {
  border: none;
}
.lb-outerContainer {
  position: relative;
  background-color: #fff;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 4px;
}
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-container {
  padding: 4px;
}
.lb-loader {
  position: absolute;
  top: 43%;
  right: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}
.lb-nav {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.lb-container > .nav {
  right: 0;
}
.lb-nav a {
  outline: 0;
  background-image: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}
.lb-next,
.lb-prev {
  height: 100%;
  cursor: pointer;
  display: block;
}
.lb-nav a.lb-prev {
  width: 34%;
  right: 0;
  float: right;
  background: url(../images/prev.png) right 48% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.lb-nav a.lb-prev:hover {
  opacity: 1;
}
.lb-nav a.lb-next {
  width: 64%;
  left: 0;
  float: left;
  background: url(../images/next.png) left 48% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.lb-nav a.lb-next:hover {
  opacity: 1;
}
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  width: 100%;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}
.lb-data {
  padding: 0 4px;
  color: #ccc;
}
.lb-data .lb-details {
  width: 85%;
  float: right;
  text-align: right;
  line-height: 1.1em;
}
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: 700;
  line-height: 1em;
}
.lb-data .lb-number {
  display: block;
  clear: right;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999;
}
.lb-data .lb-close {
  display: block;
  float: left;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top left no-repeat;
  text-align: left;
  outline: 0;
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.lb-data .lb-close:hover {
  cursor: pointer;
  opacity: 1;
}
.icheckbox_square-blue,
.iradio_square-blue {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  background: url(blue.png) no-repeat;
  border: none;
  cursor: pointer;
}
.icheckbox_square-blue {
  background-position: 0 0;
}
.icheckbox_square-blue.hover {
  background-position: -24px 0;
}
.icheckbox_square-blue.checked {
  background-position: -48px 0;
}
.icheckbox_square-blue.disabled {
  background-position: -72px 0;
  cursor: default;
}
.icheckbox_square-blue.checked.disabled {
  background-position: -96px 0;
}
.iradio_square-blue {
  background-position: -120px 0;
}
.iradio_square-blue.hover {
  background-position: -144px 0;
}
.iradio_square-blue.checked {
  background-position: -168px 0;
}
.iradio_square-blue.disabled {
  background-position: -192px 0;
  cursor: default;
}
.iradio_square-blue.checked.disabled {
  background-position: -216px 0;
}
@media (-o-min-device-pixel-ratio: 5/4),
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi),
  (min-resolution: 1.25dppx) {
  .icheckbox_square-blue,
  .iradio_square-blue {
    background-image: url(blue@2x.png);
    -webkit-background-size: 240px 24px;
    background-size: 240px 24px;
  }
}
.captcha-overlay-badge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  cursor: pointer;
}
.captcha-overlay-badge-hidden {
  display: none;
}
.captcha-overlay-badge img {
  width: 60px;
  height: auto;
}
.captcha-overlay-popup {
  display: none;
  position: fixed;
  bottom: 80px;
  left: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
  width: 300px;
  z-index: 9998;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* main-core.css */
@font-face {
  font-family: whmcsco;
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/whmcsco.woff);
}

@font-face {
  font-family: var(--hp-font);
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/onvan.woff2);
}

*,
::after,
::before {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

div.dataTables_wrapper div.dataTables_info {
  padding-top: 4px;
  font-size: 13px;
  color: #384b73;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  margin: 0;
  font-family: "whmcsco";
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: #212529;
  text-align: right;
  background-color: #f7faff;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}

.fs-14 {
  font-size: 15px;
  font-family: var(--hp-font);
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[data-original-title],
abbr[title] {
  text-decoration: none;
  -webkit-text-decoration: none dotted;
  text-decoration: none dotted;
  cursor: help;
  border-bottom: 0;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-right: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: 600;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  color: #0f64d1;
  text-decoration: none;
  background-color: transparent;
  transition: all 0.5s;
}

a:hover {
  color: #204060;
  text-decoration: none;
  transition: all 0.5s;
}

a:not([href]):not([class]) {
  color: inherit;
  text-decoration: none;
  transition: all 0.5s;
}

a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
  transition: all 0.5s;
}

code,
kbd,
pre,
samp {
  font-family:
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
  max-width: 100%;

  img {
    vertical-align: middle;
    border-style: none;
    max-width: 100%;
  }
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: right;
  caption-side: bottom;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
  cursor: pointer;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-family: var(--hp-font);
}

.h1,
h1 {
  font-size: 20px;
}

.h2,
h2 {
  font-size: 1.1rem;
  color: #464646;
  padding: 10px 0 5px;
}

.h3,
h3 {
  font-size: 1.75rem;
}

.h4,
h4 {
  font-size: 18px;
}

.h5,
h5 {
  font-size: 1.25rem;
}

.h6,
h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-2 {
  font-size: 5.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-3 {
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1.2;
}

.display-4 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgb(240 245 255);
}

.small,
small {
  font-size: 80%;
  font-weight: 400;
}

.mark,
mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

.list-unstyled {
  padding-right: 0;
  list-style: none;
}

.list-inline {
  padding-right: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-left: 0.5rem;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.blockquote-footer {
  display: block;
  font-size: 80%;
  color: #6c757d;
}

.blockquote-footer::before {
  content: "— ";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 90%;
  color: #6c757d;
}

code {
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #d5d5d5;
  background-color: #333;
  padding: 10px 15px;
  border-radius: 10px;
  line-height: 30px;
  direction: ltr;
  text-align: left;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

.pre-scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 540px;
  }
  .navbar.navbar-light {
        margin: 55px auto 15px !important;
        max-width: 540px;
    }
}

@media (min-width: 768px) {
  .container,
  .container-md,
  .container-sm {
    max-width: 720px;
  }
  .navbar.navbar-light {
        margin: 55px auto 15px !important;
        max-width: 720px;
    }
  .card.tabs {
  min-height: 348px;
  max-height: 348px;
  }
  .custom-tab-1 {
    & .nav-link {
        font-size: 13px !important;
    }
  }
    header.header .main-navbar-wrapper .navbar-collapse {
        width: 300px !important;
    }
}

@media (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 960px;
  }
  .navbar.navbar-light {
        margin: 55px auto 15px !important;
        max-width: 960px;
    }
  .card.tabs {
  min-height: 478px;
  max-height: 478px;
  }
  header.header .main-navbar-wrapper .navbar-collapse {
        width: 300px !important;
    }
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1360px;
  }
.navbar.navbar-light {
        margin: 55px auto 15px !important;
        max-width: 1360px;
        padding: 35px 0 5px;
    }
  .card.tabs {
        min-height: 450px;
        max-height: 450px;
    }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.no-gutters {
  margin-left: 0;
  margin-right: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  position: relative;
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.row-cols-1 > * {
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.offset-1 {
  margin-right: 8.3333333333%;
}

.offset-2 {
  margin-right: 16.6666666667%;
}

.offset-3 {
  margin-right: 25%;
}

.offset-4 {
  margin-right: 33.3333333333%;
}

.offset-5 {
  margin-right: 41.6666666667%;
}

.offset-6 {
  margin-right: 50%;
}

.offset-7 {
  margin-right: 58.3333333333%;
}

.offset-8 {
  margin-right: 66.6666666667%;
}

.offset-9 {
  margin-right: 75%;
}

.offset-10 {
  margin-right: 83.3333333333%;
}

.offset-11 {
  margin-right: 91.6666666667%;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-sm-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-sm-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-sm-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-sm-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-sm-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-sm-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-sm-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-sm-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-sm-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-sm-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    order: -1;
  }

  .order-sm-last {
    order: 13;
  }

  .order-sm-0 {
    order: 0;
  }

  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .offset-sm-0 {
    margin-right: 0;
  }

  .offset-sm-1 {
    margin-right: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-right: 16.6666666667%;
  }

  .offset-sm-3 {
    margin-right: 25%;
  }

  .offset-sm-4 {
    margin-right: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-right: 41.6666666667%;
  }

  .offset-sm-6 {
    margin-right: 50%;
  }

  .offset-sm-7 {
    margin-right: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-right: 66.6666666667%;
  }

  .offset-sm-9 {
    margin-right: 75%;
  }

  .offset-sm-10 {
    margin-right: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-right: 91.6666666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-md-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-md-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-md-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-md-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-md-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-md-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    order: -1;
  }

  .order-md-last {
    order: 13;
  }

  .order-md-0 {
    order: 0;
  }

  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .offset-md-0 {
    margin-right: 0;
  }

  .offset-md-1 {
    margin-right: 8.3333333333%;
  }

  .offset-md-2 {
    margin-right: 16.6666666667%;
  }

  .offset-md-3 {
    margin-right: 25%;
  }

  .offset-md-4 {
    margin-right: 33.3333333333%;
  }

  .offset-md-5 {
    margin-right: 41.6666666667%;
  }

  .offset-md-6 {
    margin-right: 50%;
  }

  .offset-md-7 {
    margin-right: 58.3333333333%;
  }

  .offset-md-8 {
    margin-right: 66.6666666667%;
  }

  .offset-md-9 {
    margin-right: 75%;
  }

  .offset-md-10 {
    margin-right: 83.3333333333%;
  }

  .offset-md-11 {
    margin-right: 91.6666666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-lg-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-lg-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-lg-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-lg-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-lg-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-lg-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-lg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-lg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-lg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-lg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    order: -1;
  }

  .order-lg-last {
    order: 13;
  }

  .order-lg-0 {
    order: 0;
  }

  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .offset-lg-0 {
    margin-right: 0;
  }

  .offset-lg-1 {
    margin-right: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-right: 16.6666666667%;
  }

  .offset-lg-3 {
    margin-right: 25%;
  }

  .offset-lg-4 {
    margin-right: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-right: 41.6666666667%;
  }

  .offset-lg-6 {
    margin-right: 50%;
  }

  .offset-lg-7 {
    margin-right: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-right: 66.6666666667%;
  }

  .offset-lg-9 {
    margin-right: 75%;
  }

  .offset-lg-10 {
    margin-right: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-right: 91.6666666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-xl-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-xl-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-xl-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-xl-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-xl-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-xl-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-xl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-xl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-xl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-xl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-xl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-xl-first {
    order: -1;
  }

  .order-xl-last {
    order: 13;
  }

  .order-xl-0 {
    order: 0;
  }

  .order-xl-1 {
    order: 1;
  }

  .order-xl-2 {
    order: 2;
  }

  .order-xl-3 {
    order: 3;
  }

  .order-xl-4 {
    order: 4;
  }

  .order-xl-5 {
    order: 5;
  }

  .order-xl-6 {
    order: 6;
  }

  .order-xl-7 {
    order: 7;
  }

  .order-xl-8 {
    order: 8;
  }

  .order-xl-9 {
    order: 9;
  }

  .order-xl-10 {
    order: 10;
  }

  .order-xl-11 {
    order: 11;
  }

  .order-xl-12 {
    order: 12;
  }

  .offset-xl-0 {
    margin-right: 0;
  }

  .offset-xl-1 {
    margin-right: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-right: 16.6666666667%;
  }

  .offset-xl-3 {
    margin-right: 25%;
  }

  .offset-xl-4 {
    margin-right: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-right: 41.6666666667%;
  }

  .offset-xl-6 {
    margin-right: 50%;
  }

  .offset-xl-7 {
    margin-right: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-right: 66.6666666667%;
  }

  .offset-xl-9 {
    margin-right: 75%;
  }

  .offset-xl-10 {
    margin-right: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-right: 91.6666666667%;
  }
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}

.table td,
.table th {
  padding: 13px 25px;
  vertical-align: top;
  border-radius: 0;
  color: #3a3a3a;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table-sm td,
.table-sm th {
  padding: 0.3rem;
}

.table-bordered {
  border: 1px solid #dee2e6;
}

.table-bordered td,
.table-bordered th {
  border: 1px solid #dee2e6;
}

.table-bordered thead td,
.table-bordered thead th {
  border-bottom-width: 2px;
}

.table-borderless tbody + tbody,
.table-borderless td,
.table-borderless th,
.table-borderless thead th {
  border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
  color: #212529;
  background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > td,
.table-primary > th {
  background-color: #c6d4e2;
}

.table-primary tbody + tbody,
.table-primary td,
.table-primary th,
.table-primary thead th {
  border-color: #95afca;
}

.table-hover .table-primary:hover {
  background-color: #b5c7d9;
}

.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
  background-color: #b5c7d9;
}

.table-secondary,
.table-secondary > td,
.table-secondary > th {
  background-color: #d6d8db;
}

.table-secondary tbody + tbody,
.table-secondary td,
.table-secondary th,
.table-secondary thead th {
  border-color: #b3b7bb;
}

.table-hover .table-secondary:hover {
  background-color: #c8cbcf;
}

.table-hover .table-secondary:hover > td,
.table-hover .table-secondary:hover > th {
  background-color: #c8cbcf;
}

.table-success,
.table-success > td,
.table-success > th {
  background-color: #c3e6cb;
}

.table-success tbody + tbody,
.table-success td,
.table-success th,
.table-success thead th {
  border-color: #8fd19e;
}

.table-hover .table-success:hover {
  background-color: #b1dfbb;
}

.table-hover .table-success:hover > td,
.table-hover .table-success:hover > th {
  background-color: #b1dfbb;
}

.table-info,
.table-info > td,
.table-info > th {
  background-color: #bee5eb;
}

.table-info tbody + tbody,
.table-info td,
.table-info th,
.table-info thead th {
  border-color: #86cfda;
}

.table-hover .table-info:hover {
  background-color: #abdde5;
}

.table-hover .table-info:hover > td,
.table-hover .table-info:hover > th {
  background-color: #abdde5;
}

.table-warning,
.table-warning > td,
.table-warning > th {
  background-color: #ffeeba;
}

.table-warning tbody + tbody,
.table-warning td,
.table-warning th,
.table-warning thead th {
  border-color: #ffdf7e;
}

.table-hover .table-warning:hover {
  background-color: #ffe8a1;
}

.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
  background-color: #ffe8a1;
}

.table-danger,
.table-danger > td,
.table-danger > th {
  background-color: #f5c6cb;
}

.table-danger tbody + tbody,
.table-danger td,
.table-danger th,
.table-danger thead th {
  border-color: #ed969e;
}

.table-hover .table-danger:hover {
  background-color: #f1b0b7;
}

.table-hover .table-danger:hover > td,
.table-hover .table-danger:hover > th {
  background-color: #f1b0b7;
}

.table-light,
.table-light > td,
.table-light > th {
  background-color: #fdfdfe;
}

.table-light tbody + tbody,
.table-light td,
.table-light th,
.table-light thead th {
  border-color: #fbfcfc;
}

.table-hover .table-light:hover {
  background-color: #ececf6;
}

.table-hover .table-light:hover > td,
.table-hover .table-light:hover > th {
  background-color: #ececf6;
}

.table-dark,
.table-dark > td,
.table-dark > th {
  background-color: #c6c8ca;
}

.table-dark tbody + tbody,
.table-dark td,
.table-dark th,
.table-dark thead th {
  border-color: #95999c;
}

.table-hover .table-dark:hover {
  background-color: #b9bbbe;
}

.table-hover .table-dark:hover > td,
.table-hover .table-dark:hover > th {
  background-color: #b9bbbe;
}

.table-active,
.table-active > td,
.table-active > th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
  background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
  background-color: rgba(0, 0, 0, 0.075);
}

.table .thead-dark th {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}

.table .thead-light th {
  color: #495057;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.table-dark {
  color: #fff;
  background-color: #343a40;
}

.table-dark td,
.table-dark th,
.table-dark thead th {
  border-color: #454d55;
}

.table-dark.table-bordered {
  border: 0;
}

.table-dark.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

.table-dark.table-hover tbody tr:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.075);
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-sm > .table-bordered {
    border: 0;
  }
}

@media (max-width: 767.98px) {
  .table-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-md > .table-bordered {
    border: 0;
  }
}

@media (max-width: 991.98px) {
  .table-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-lg > .table-bordered {
    border: 0;
  }
}

@media (max-width: 1199.98px) {
  .table-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-xl > .table-bordered {
    border: 0;
  }
}

.table-responsive {
  display: contents;
  width: 100%;
  min-width: 800px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0;
  margin-top: 10px;
}

.table-responsive > .table-bordered {
  border: 0;
}
table.table-list thead th {
  padding: 8px;
  background-color: #fff;
  border-bottom: 1px solid #efefef;
  color: #333;
  text-align: center;
  line-height: 45px;
}

table.table-list tbody td {
  padding: 10px 0;
  vertical-align: middle;
  font-size: 15px;
  line-height: 45px;
}

table.table-list tbody td.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.table-list > tbody > tr > td {
  background-color: #fff;
}

.table-list > tbody > tr:hover {
  cursor: pointer;
}

.table-list > tbody > tr:hover > td {
  background-color: #f9f9f9;
}

table.dtr-inline .dtr-title:empty {
  display: none !important;
}

table.table-solid-bottom-border-light-gray {
  border-bottom: 1px solid #dee2e6;
}

.form-control {
  display: block;
  width: 100%;
  height: 45px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #e5e5e5;
  background-color: #fafafa;
  border-radius: 6px;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #79a6d2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(51, 102, 153, 0.25);
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #fafafa;
  opacity: 1;
}

input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control,
input[type="time"].form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

.col-form-label {
  padding-top: calc(0.375rem + 1px);
  padding-bottom: calc(0.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.5;
}

.col-form-label-lg {
  padding-top: calc(0.5rem + 1px);
  padding-bottom: calc(0.5rem + 1px);
  font-size: 1.25rem;
  line-height: 1.5;
}

.col-form-label-sm {
  padding-top: calc(0.25rem + 1px);
  padding-bottom: calc(0.25rem + 1px);
  font-size: 0.875rem;
  line-height: 1.5;
}

.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: transparent;
  border: solid transparent;
  border-width: 1px 0;
}

.form-control-plaintext.form-control-lg,
.form-control-plaintext.form-control-sm {
  padding-left: 0;
  padding-right: 0;
}

.form-control-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.form-control-lg {
  height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.3rem;
}

select.form-control[multiple],
select.form-control[size] {
  height: auto;
}

textarea.form-control {
  height: auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-text {
  display: block;
  margin-top: 0.25rem;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -5px;
  margin-right: -5px;
}

.form-row > .col,
.form-row > [class*="col-"] {
  padding-left: 5px;
  padding-right: 5px;
}

.form-check {
  position: relative;
  display: block;
  padding-right: 1.25rem;
}

.form-check-input {
  position: absolute;
  margin-top: 0.3rem;
  margin-right: -1.25rem;
}

.form-check-input:disabled ~ .form-check-label,
.form-check-input[disabled] ~ .form-check-label {
  color: #6c757d;
}

.form-check-label {
  margin-bottom: 0;
}

.form-check-inline {
  display: inline-flex;
  align-items: center;
  padding-right: 0;
  margin-left: 0.75rem;
}

.form-check-inline .form-check-input {
  position: static;
  margin-top: 0;
  margin-left: 0.3125rem;
  margin-right: 0;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #28a745;
}

.valid-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(40, 167, 69, 0.9);
  border-radius: 0.25rem;
}

.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip,
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip {
  display: block;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #28a745;
  padding-left: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
  padding-left: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) left
    calc(0.375em + 0.1875rem);
}

.custom-select.is-valid,
.was-validated .custom-select:valid {
  border-color: #28a745;
  padding-left: calc(0.75em + 2.3125rem);
  background:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
      no-repeat left 0.75rem center/8px 10px,
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e")
      #fff no-repeat center left 1.75rem / calc(0.75em + 0.375rem)
      calc(0.75em + 0.375rem);
}

.custom-select.is-valid:focus,
.was-validated .custom-select:valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
  color: #28a745;
}

.form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip,
.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip {
  display: block;
}

.custom-control-input.is-valid ~ .custom-control-label,
.was-validated .custom-control-input:valid ~ .custom-control-label {
  color: #28a745;
}

.custom-control-input.is-valid ~ .custom-control-label::before,
.was-validated .custom-control-input:valid ~ .custom-control-label::before {
  border-color: #28a745;
}

.custom-control-input.is-valid:checked ~ .custom-control-label::before,
.was-validated
  .custom-control-input:valid:checked
  ~ .custom-control-label::before {
  border-color: #34ce57;
  background-color: #34ce57;
}

.custom-control-input.is-valid:focus ~ .custom-control-label::before,
.was-validated
  .custom-control-input:valid:focus
  ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.custom-control-input.is-valid:focus:not(:checked)
  ~ .custom-control-label::before,
.was-validated
  .custom-control-input:valid:focus:not(:checked)
  ~ .custom-control-label::before {
  border-color: #28a745;
}

.custom-file-input.is-valid ~ .custom-file-label,
.was-validated .custom-file-input:valid ~ .custom-file-label {
  border-color: #28a745;
}

.custom-file-input.is-valid:focus ~ .custom-file-label,
.was-validated .custom-file-input:valid:focus ~ .custom-file-label {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

.invalid-tooltip {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #fff;
  background-color: rgba(220, 53, 69, 0.9);
  border-radius: 0.25rem;
}

.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip,
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip {
  display: block;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #dc3545;
  padding-left: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
  padding-left: calc(1.5em + 0.75rem);
  background-position: top calc(0.375em + 0.1875rem) left
    calc(0.375em + 0.1875rem);
}

.custom-select.is-invalid,
.was-validated .custom-select:invalid {
  border-color: #dc3545;
  padding-left: calc(0.75em + 2.3125rem);
  background:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
      no-repeat left 0.75rem center/8px 10px,
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e")
      #fff no-repeat center left 1.75rem / calc(0.75em + 0.375rem)
      calc(0.75em + 0.375rem);
}

.custom-select.is-invalid:focus,
.was-validated .custom-select:invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-check-input.is-invalid ~ .form-check-label,
.was-validated .form-check-input:invalid ~ .form-check-label {
  color: #dc3545;
}

.form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip,
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip {
  display: block;
}

.custom-control-input.is-invalid ~ .custom-control-label,
.was-validated .custom-control-input:invalid ~ .custom-control-label {
  color: #dc3545;
}

.custom-control-input.is-invalid ~ .custom-control-label::before,
.was-validated .custom-control-input:invalid ~ .custom-control-label::before {
  border-color: #dc3545;
}

.custom-control-input.is-invalid:checked ~ .custom-control-label::before,
.was-validated
  .custom-control-input:invalid:checked
  ~ .custom-control-label::before {
  border-color: #e4606d;
  background-color: #e4606d;
}

.custom-control-input.is-invalid:focus ~ .custom-control-label::before,
.was-validated
  .custom-control-input:invalid:focus
  ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.custom-control-input.is-invalid:focus:not(:checked)
  ~ .custom-control-label::before,
.was-validated
  .custom-control-input:invalid:focus:not(:checked)
  ~ .custom-control-label::before {
  border-color: #dc3545;
}

.custom-file-input.is-invalid ~ .custom-file-label,
.was-validated .custom-file-input:invalid ~ .custom-file-label {
  border-color: #dc3545;
}

.custom-file-input.is-invalid:focus ~ .custom-file-label,
.was-validated .custom-file-input:invalid:focus ~ .custom-file-label {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }

  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }

  .form-inline .form-control-plaintext {
    display: inline-block;
  }

  .form-inline .custom-select,
  .form-inline .input-group {
    width: auto;
  }

  .form-inline .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-right: 0;
  }

  .form-inline .form-check-input {
    position: relative;
    flex-shrink: 0;
    margin-top: 0;
    margin-left: 0.25rem;
    margin-right: 0;
  }

  .form-inline .custom-control {
    align-items: center;
    justify-content: center;
  }

  .form-inline .custom-control-label {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 6px;
}

.btn {
  text-transform: uppercase;
  vertical-align: bottom;
  border: 0;
  font-weight: 500;
  padding: 0.625rem 1.5rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
  font-family: var(--hp-font);
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block + .btn-block {
  margin-top: 0.5rem;
}

[class*="btn-outline-"] {
  border-width: 0.125rem;
  border-style: solid;
  box-shadow: none;
  padding: 0.5rem 1.375rem 0.375rem;
}

[class*="btn-outline-"].focus,
[class*="btn-outline-"]:focus,
[class*="btn-outline-"]:hover {
  box-shadow: none;
  text-decoration: none;
}

[class*="btn-outline-"].active,
[class*="btn-outline-"].active:focus,
[class*="btn-outline-"].disabled,
[class*="btn-outline-"]:active,
[class*="btn-outline-"]:active:focus,
[class*="btn-outline-"]:disabled,
fieldset:disabled [class*="btn-outline-"] {
  box-shadow: none;
}

.btn-group-lg > [class*="btn-outline-"].btn,
[class*="btn-outline-"].btn-lg {
  padding: 0.625rem 1.5625rem 0.5625rem;
}

.btn-group-sm > [class*="btn-outline-"].btn,
[class*="btn-outline-"].btn-sm {
  padding: 0.25rem 0.875rem 0.1875rem;
}

.btn-primary {
  color: #fff;
  background-color: #0f64d1;
}

.btn-primary.focus,
.btn-primary:focus,
.btn-primary:hover {
  color: #fff;
  background-color: #0a4ab3;
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #093d94;
}

.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #1266f1;
}

.btn-secondary {
  color: #fff;
  background-color: #b23cfd;
}

.btn-secondary.focus,
.btn-secondary:focus,
.btn-secondary:hover {
  color: #fff;
  background-color: #a316fd;
}

.btn-check:active + .btn-secondary,
.btn-check:checked + .btn-secondary,
.btn-secondary.active,
.btn-secondary:active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #8102d1;
}

.btn-check:active + .btn-secondary:focus,
.btn-check:checked + .btn-secondary:focus,
.btn-secondary.active:focus,
.btn-secondary:active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: #b23cfd;
}

.btn-success {
  color: #fff;
  background-color: #00b74a;
}

.btn-success.focus,
.btn-success:focus,
.btn-success:hover {
  color: #fff;
  background-color: #00913b;
}

.btn-check:active + .btn-success,
.btn-check:checked + .btn-success,
.btn-success.active,
.btn-success:active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #005121;
}

.btn-check:active + .btn-success:focus,
.btn-check:checked + .btn-success:focus,
.btn-success.active:focus,
.btn-success:active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #00b74a;
}

.btn-button-nav {
  color: #005397;
  background-color: #f7faff;
}

.btn-button-nav.focus,
.btn-button-nav:focus,
.btn-button-nav:hover {
  color: #005397;
  background-color: #eaeff8;
}

.btn-info {
  color: #fff;
  background-color: #39c0ed;
}

.btn-info.focus,
.btn-info:focus,
.btn-info:hover {
  color: #fff;
  background-color: #16b5ea;
}

.btn-check:active + .btn-info,
.btn-check:checked + .btn-info,
.btn-info.active,
.btn-info:active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #1088b0;
}

.btn-check:active + .btn-info:focus,
.btn-check:checked + .btn-info:focus,
.btn-info.active:focus,
.btn-info:active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #39c0ed;
}

.btn-warning {
  color: #fff;
  background-color: #ffa900;
}

.btn-warning.focus,
.btn-warning:focus,
.btn-warning:hover {
  color: #fff;
  background-color: #d99000;
}

.btn-check:active + .btn-warning,
.btn-check:checked + .btn-warning,
.btn-warning.active,
.btn-warning:active,
.show > .btn-warning.dropdown-toggle {
  color: #fff;
  background-color: #996500;
}

.btn-check:active + .btn-warning:focus,
.btn-check:checked + .btn-warning:focus,
.btn-warning.active:focus,
.btn-warning:active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-warning.disabled,
.btn-warning:disabled {
  color: #fff;
  background-color: #ffa900;
}

.btn-danger {
  color: #fff;
  background-color: #f93154;
}

.btn-danger.focus,
.btn-danger:focus,
.btn-danger:hover {
  color: #fff;
  background-color: #f80c35;
}

.btn-check:active + .btn-danger,
.btn-check:checked + .btn-danger,
.btn-danger.active,
.btn-danger:active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #be0626;
}

.btn-check:active + .btn-danger:focus,
.btn-check:checked + .btn-danger:focus,
.btn-danger.active:focus,
.btn-danger:active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #fff;
  background-color: #f93154;
}

.btn-light {
  color: #4f4f4f;
  background-color: #fbfbfb;
}

.btn-light.focus,
.btn-light:focus,
.btn-light:hover {
  color: #4f4f4f;
  background-color: #e8e8e8;
}

.btn-check:active + .btn-light,
.btn-check:checked + .btn-light,
.btn-light.active,
.btn-light:active,
.show > .btn-light.dropdown-toggle {
  color: #4f4f4f;
  background-color: #c8c8c8;
}

.btn-check:active + .btn-light:focus,
.btn-check:checked + .btn-light:focus,
.btn-light.active:focus,
.btn-light:active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-light.disabled,
.btn-light:disabled {
  color: #4f4f4f;
  background-color: #fbfbfb;
}

.btn-dark {
  color: #fff;
  background-color: #262626;
}

.btn-dark.focus,
.btn-dark:focus,
.btn-dark:hover {
  color: #fff;
  background-color: #131313;
}

.btn-check:active + .btn-dark,
.btn-check:checked + .btn-dark,
.btn-dark.active,
.btn-dark:active,
.show > .btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #000;
}

.btn-check:active + .btn-dark:focus,
.btn-check:checked + .btn-dark:focus,
.btn-dark.active:focus,
.btn-dark:active:focus,
.show > .btn-dark.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: #262626;
}

.btn-white {
  color: #4f4f4f;
  background-color: #fff;
}

.btn-white.focus,
.btn-white:focus,
.btn-white:hover {
  color: #4f4f4f;
  background-color: #ececec;
}

.btn-check:active + .btn-white,
.btn-check:checked + .btn-white,
.btn-white.active,
.btn-white:active,
.show > .btn-white.dropdown-toggle {
  color: #4f4f4f;
  background-color: #ccc;
}

.btn-check:active + .btn-white:focus,
.btn-check:checked + .btn-white:focus,
.btn-white.active:focus,
.btn-white:active:focus,
.show > .btn-white.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-white.disabled,
.btn-white:disabled {
  color: #4f4f4f;
  background-color: #fff;
}

.btn-black,
.btn-black.active,
.btn-black.focus,
.btn-black:active,
.btn-black:focus,
.btn-black:hover,
.btn-check:active + .btn-black,
.btn-check:checked + .btn-black,
.show > .btn-black.dropdown-toggle {
  color: #fff;
  background-color: #000;
}

.btn-black.active:focus,
.btn-black:active:focus,
.btn-check:active + .btn-black:focus,
.btn-check:checked + .btn-black:focus,
.show > .btn-black.dropdown-toggle:focus {
  box-shadow:
    0 4px 10px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.btn-black.disabled,
.btn-black:disabled {
  color: #fff;
  background-color: #000;
}

.btn-outline-primary {
  color: #1266f1;
  border-color: #1266f1;
}

.btn-outline-primary:hover {
  color: #1266f1;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary.focus,
.btn-outline-primary:active,
.btn-outline-primary:focus {
  color: #1266f1;
  background-color: transparent;
}

.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus,
.btn-outline-primary:active:focus {
  box-shadow: none;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #1266f1;
}

.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary {
  color: #fff;
  background-color: #1266f1;
}

.btn-outline-secondary {
  color: #b23cfd;
  border-color: #b23cfd;
}

.btn-outline-secondary:hover {
  color: #b23cfd;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary.focus,
.btn-outline-secondary:active,
.btn-outline-secondary:focus {
  color: #b23cfd;
  background-color: transparent;
}

.btn-outline-secondary.active:focus,
.btn-outline-secondary.dropdown-toggle.show:focus,
.btn-outline-secondary:active:focus {
  box-shadow: none;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #b23cfd;
}

.btn-check:active + .btn-outline-secondary,
.btn-check:checked + .btn-outline-secondary {
  color: #fff;
  background-color: #b23cfd;
}

.btn-outline-success {
  color: #00b74a;
  border-color: #00b74a;
}

.btn-outline-success:hover {
  color: #00b74a;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-success.active,
.btn-outline-success.dropdown-toggle.show,
.btn-outline-success.focus,
.btn-outline-success:active,
.btn-outline-success:focus {
  color: #00b74a;
  background-color: transparent;
}

.btn-outline-success.active:focus,
.btn-outline-success.dropdown-toggle.show:focus,
.btn-outline-success:active:focus {
  box-shadow: none;
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #00b74a;
}

.btn-check:active + .btn-outline-success,
.btn-check:checked + .btn-outline-success {
  color: #fff;
  background-color: #00b74a;
}

.btn-outline-info {
  color: #39c0ed;
  border-color: #39c0ed;
}

.btn-outline-info:hover {
  color: #39c0ed;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-info.active,
.btn-outline-info.dropdown-toggle.show,
.btn-outline-info.focus,
.btn-outline-info:active,
.btn-outline-info:focus {
  color: #39c0ed;
  background-color: transparent;
}

.btn-outline-info.active:focus,
.btn-outline-info.dropdown-toggle.show:focus,
.btn-outline-info:active:focus {
  box-shadow: none;
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #39c0ed;
}

.btn-check:active + .btn-outline-info,
.btn-check:checked + .btn-outline-info {
  color: #fff;
  background-color: #39c0ed;
}

.btn-outline-warning {
  color: #ffa900;
  border-color: #ffa900;
}

.btn-outline-warning:hover {
  color: #ffa900;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-warning.active,
.btn-outline-warning.dropdown-toggle.show,
.btn-outline-warning.focus,
.btn-outline-warning:active,
.btn-outline-warning:focus {
  color: #ffa900;
  background-color: transparent;
}

.btn-outline-warning.active:focus,
.btn-outline-warning.dropdown-toggle.show:focus,
.btn-outline-warning:active:focus {
  box-shadow: none;
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #ffa900;
}

.btn-check:active + .btn-outline-warning,
.btn-check:checked + .btn-outline-warning {
  color: #fff;
  background-color: #ffa900;
}

.btn-outline-danger {
  color: #f93154;
  border-color: #f93154;
}

.btn-outline-danger:hover {
  color: #f93154;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-danger.active,
.btn-outline-danger.dropdown-toggle.show,
.btn-outline-danger.focus,
.btn-outline-danger:active,
.btn-outline-danger:focus {
  color: #f93154;
  background-color: transparent;
}

.btn-outline-danger.active:focus,
.btn-outline-danger.dropdown-toggle.show:focus,
.btn-outline-danger:active:focus {
  box-shadow: none;
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #f93154;
}

.btn-check:active + .btn-outline-danger,
.btn-check:checked + .btn-outline-danger {
  color: #fff;
  background-color: #f93154;
}

.btn-outline-light {
  color: #fbfbfb;
  border-color: #fbfbfb;
}

.btn-outline-light:hover {
  color: #fbfbfb;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-light.active,
.btn-outline-light.dropdown-toggle.show,
.btn-outline-light.focus,
.btn-outline-light:active,
.btn-outline-light:focus {
  color: #fbfbfb;
  background-color: transparent;
}

.btn-outline-light.active:focus,
.btn-outline-light.dropdown-toggle.show:focus,
.btn-outline-light:active:focus {
  box-shadow: none;
}

.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #fbfbfb;
}

.btn-check:active + .btn-outline-light,
.btn-check:checked + .btn-outline-light {
  color: #4f4f4f;
  background-color: #fbfbfb;
}

.btn-outline-dark {
  color: #262626;
  border-color: #262626;
}

.btn-outline-dark:hover {
  color: #262626;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-dark.active,
.btn-outline-dark.dropdown-toggle.show,
.btn-outline-dark.focus,
.btn-outline-dark:active,
.btn-outline-dark:focus {
  color: #262626;
  background-color: transparent;
}

.btn-outline-dark.active:focus,
.btn-outline-dark.dropdown-toggle.show:focus,
.btn-outline-dark:active:focus {
  box-shadow: none;
}

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #262626;
}

.btn-check:active + .btn-outline-dark,
.btn-check:checked + .btn-outline-dark {
  color: #fff;
  background-color: #262626;
}

.btn-outline-white {
  color: #fff;
  border-color: #fff;
}

.btn-outline-white:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-white.active,
.btn-outline-white.dropdown-toggle.show,
.btn-outline-white.focus,
.btn-outline-white:active,
.btn-outline-white:focus {
  color: #fff;
  background-color: transparent;
}

.btn-outline-white.active:focus,
.btn-outline-white.dropdown-toggle.show:focus,
.btn-outline-white:active:focus {
  box-shadow: none;
}

.btn-outline-white.disabled,
.btn-outline-white:disabled {
  color: #fff;
}

.btn-check:active + .btn-outline-white,
.btn-check:checked + .btn-outline-white {
  color: #4f4f4f;
  background-color: #fff;
}

.btn-outline-black {
  color: #000;
  border-color: #000;
}

.btn-outline-black:hover {
  color: #000;
  background-color: rgba(0, 0, 0, 0.02);
}

.btn-outline-black.active,
.btn-outline-black.dropdown-toggle.show,
.btn-outline-black.focus,
.btn-outline-black:active,
.btn-outline-black:focus {
  color: #000;
  background-color: transparent;
}

.btn-outline-black.active:focus,
.btn-outline-black.dropdown-toggle.show:focus,
.btn-outline-black:active:focus {
  box-shadow: none;
}

.btn-outline-black.disabled,
.btn-outline-black:disabled {
  color: #000;
}

.btn-check:active + .btn-outline-black,
.btn-check:checked + .btn-outline-black {
  color: #fff;
  background-color: #000;
}

.btn-group-lg > .btn,
.btn-lg {
  padding: 0.75rem 1.6875rem 0.6875rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

.btn-group-sm > .btn,
.btn-sm {
  padding: 0.375rem 0.8rem 0.3125rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.btn-link {
  box-shadow: none;
  text-decoration: none;
}

.btn-link.focus,
.btn-link:focus,
.btn-link:hover {
  box-shadow: none;
  text-decoration: none;
  background-color: #f5f5f5;
}

.btn-link.active,
.btn-link.active:focus,
.btn-link:active,
.btn-link:active:focus {
  box-shadow: none;
  background-color: #f5f5f5;
}

.btn-link.disabled,
.btn-link:disabled,
fieldset:disabled .btn-link {
  box-shadow: none;
}

.btn-rounded {
  border-radius: 10rem;
}

.btn-floating,
[class*="btn-outline-"].btn-floating {
  border-radius: 50%;
  padding: 0;
  position: relative;
}

.btn-floating {
  width: 2.3125rem;
  height: 2.3125rem;
}

.btn-floating .fab,
.btn-floating .far,
.btn-floating .fas {
  width: 2.3125rem;
  line-height: 2.3125rem;
}

.btn-floating.btn-lg,
.btn-group-lg > .btn-floating.btn {
  width: 2.8125rem;
  height: 2.8125rem;
}

.btn-floating.btn-lg .fab,
.btn-floating.btn-lg .far,
.btn-floating.btn-lg .fas,
.btn-group-lg > .btn-floating.btn .fab,
.btn-group-lg > .btn-floating.btn .far,
.btn-group-lg > .btn-floating.btn .fas {
  width: 2.8125rem;
  line-height: 2.8125rem;
}

.btn-floating.btn-sm,
.btn-group-sm > .btn-floating.btn {
  width: 1.8125rem;
  height: 1.8125rem;
}

.btn-floating.btn-sm .fab,
.btn-floating.btn-sm .far,
.btn-floating.btn-sm .fas,
.btn-group-sm > .btn-floating.btn .fab,
.btn-group-sm > .btn-floating.btn .far,
.btn-group-sm > .btn-floating.btn .fas {
  width: 1.8125rem;
  line-height: 1.8125rem;
}

[class*="btn-outline-"].btn-floating .fab,
[class*="btn-outline-"].btn-floating .far,
[class*="btn-outline-"].btn-floating .fas {
  width: 2.0625rem;
  line-height: 2.0625rem;
}

.btn-group-lg > [class*="btn-outline-"].btn-floating.btn .fab,
.btn-group-lg > [class*="btn-outline-"].btn-floating.btn .far,
.btn-group-lg > [class*="btn-outline-"].btn-floating.btn .fas,
[class*="btn-outline-"].btn-floating.btn-lg .fab,
[class*="btn-outline-"].btn-floating.btn-lg .far,
[class*="btn-outline-"].btn-floating.btn-lg .fas {
  width: 2.5625rem;
  line-height: 2.5625rem;
}

.btn-group-sm > [class*="btn-outline-"].btn-floating.btn .fab,
.btn-group-sm > [class*="btn-outline-"].btn-floating.btn .far,
.btn-group-sm > [class*="btn-outline-"].btn-floating.btn .fas,
[class*="btn-outline-"].btn-floating.btn-sm .fab,
[class*="btn-outline-"].btn-floating.btn-sm .far,
[class*="btn-outline-"].btn-floating.btn-sm .fas {
  width: 1.5625rem;
  line-height: 1.5625rem;
}

.fade {
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.navbar-collapse.collapsing {
    position: fixed !important;
    top: 0;
    right: 0; 
    height: 100vh !important;
    width: 260px; 
    overflow: hidden;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 2000;
}

.navbar-collapse.collapse.show {
    height: 100vh !important;
    overflow-y: auto;
    background: #fff;
    transform: translateX(0);
    transition: transform 0.35s ease;
}

.navbar-collapse.collapse:not(.show) {
    display: none;
}


@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.dropdown,
.dropleft,
.dropright,
.dropup {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle:empty::after {
  margin-right: 0;
}

.dropdown-menu {
  position: absolute;
  top: 55px;
  right: 0;
  z-index: 1000;
  display: none;
  float: right;
  min-width: 10rem;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  color: #212529;
  box-shadow: 0 0.5rem 1.6rem 0 rgb(222 231 247);
  text-align: right;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: 0 0 15px 15px;
}

.dropdown-menu-right {
  left: auto;
  right: 0;
}

.dropdown-menu-left {
  left: 0;
  right: auto;
}

@media (min-width: 576px) {
  .dropdown-menu-sm-right {
    left: auto;
    right: 0;
  }

  .dropdown-menu-sm-left {
    left: 0;
    right: auto;
  }
}

@media (min-width: 768px) {
  .dropdown-menu-md-right {
    left: auto;
    right: 0;
  }

  .dropdown-menu-md-left {
    left: 0;
    right: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu-lg-right {
    left: auto;
    right: 0;
  }

  .dropdown-menu-lg-left {
    left: 0;
    right: auto;
  }
}

@media (min-width: 1200px) {
  .dropdown-menu-xl-right {
    left: auto;
    right: 0;
  }

  .dropdown-menu-xl-left {
    left: 0;
    right: auto;
  }
}

.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-left: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-right: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
  margin-right: 0;
}

.dropleft .dropdown-menu {
  top: 0;
  left: auto;
  right: 100%;
  margin-top: 0;
  margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-left: 0;
  border-bottom: 0.3em solid transparent;
  border-right: 0.3em solid;
}

.dropleft .dropdown-toggle:empty::after {
  margin-right: 0;
}

.dropleft .dropdown-toggle::after {
  vertical-align: 0;
}

.dropright .dropdown-menu {
  top: 0;
  left: 100%;
  right: auto;
  margin-top: 0;
  margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  display: none;
}

.dropright .dropdown-toggle::before {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-left: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}

.dropright .dropdown-toggle:empty::after {
  margin-right: 0;
}

.dropright .dropdown-toggle::before {
  vertical-align: 0;
}

.dropdown-menu[x-placement^="bottom"],
.dropdown-menu[x-placement^="left"],
.dropdown-menu[x-placement^="right"],
.dropdown-menu[x-placement^="top"] {
  left: auto;
  bottom: auto;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid #e9ecef;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 4px 8px;
  clear: both;
  font-weight: 300 !important;
  color: #666666 !important;
  font-size: 14px !important;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  transition: all 0.5s;
}

.dropdown-item a:hover {
  padding-right: 20px !important;
  transition: all 0.5s;
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: #16181b;
  text-decoration: none;
  background-color: #f3f6f9;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #f3f6f9;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: transparent;
}

.dropdown-menu.show {
  display: block;
  font-size: 14px;
  line-height: 30px;
  min-width: 200px;
  padding: 5px;
}

.dropdown-header {
  display: block;
  padding: 0.5rem 1.5rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.dropdown-item-text {
  display: block;
  padding: 0.25rem 1.5rem;
  color: #212529;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

.btn-group-vertical > .btn,
.btn-group > .btn {
  position: relative;
  flex: 1 1 auto;
}

.btn-group-vertical > .btn:hover,
.btn-group > .btn:hover {
  z-index: 1;
}

.btn-group-vertical > .btn.active,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn:focus,
.btn-group > .btn.active,
.btn-group > .btn:active,
.btn-group > .btn:focus {
  z-index: 1;
}

.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.btn-toolbar .input-group {
  width: auto;
}

.btn-group > .btn-group:not(:first-child),
.btn-group > .btn:not(:first-child) {
  margin-right: -1px;
}

.btn-group > .btn-group:not(:last-child) > .btn,
.btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn-group:not(:first-child) > .btn,
.btn-group > .btn:not(:first-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-toggle-split {
  padding-left: 0.5625rem;
  padding-right: 0.5625rem;
}

.dropdown-toggle-split::after,
.dropleft .dropdown-toggle-split::after,
.dropup .dropdown-toggle-split::after {
  margin-right: 0;
}

.dropright .dropdown-toggle-split::before {
  margin-left: 0;
}

.btn-group-sm > .btn + .dropdown-toggle-split,
.btn-sm + .dropdown-toggle-split {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.btn-group-lg > .btn + .dropdown-toggle-split,
.btn-lg + .dropdown-toggle-split {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}

.btn-group-vertical > .btn-group:not(:first-child),
.btn-group-vertical > .btn:not(:first-child) {
  margin-top: -1px;
}

.btn-group-vertical > .btn-group:not(:last-child) > .btn,
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group-vertical > .btn-group:not(:first-child) > .btn,
.btn-group-vertical > .btn:not(:first-child) {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
  margin-bottom: 0;
}

.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group > .custom-file,
.input-group > .custom-select,
.input-group > .form-control,
.input-group > .form-control-plaintext {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}

.input-group > .custom-file + .custom-file,
.input-group > .custom-file + .custom-select,
.input-group > .custom-file + .form-control,
.input-group > .custom-select + .custom-file,
.input-group > .custom-select + .custom-select,
.input-group > .custom-select + .form-control,
.input-group > .form-control + .custom-file,
.input-group > .form-control + .custom-select,
.input-group > .form-control + .form-control,
.input-group > .form-control-plaintext + .custom-file,
.input-group > .form-control-plaintext + .custom-select,
.input-group > .form-control-plaintext + .form-control {
  margin-right: -1px;
}

.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label,
.input-group > .custom-select:focus,
.input-group > .form-control:focus {
  z-index: 3;
}

.input-group > .custom-file .custom-file-input:focus {
  z-index: 4;
}

.input-group > .custom-select:not(:last-child),
.input-group > .form-control:not(:last-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .custom-select:not(:first-child),
.input-group > .form-control:not(:first-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group > .custom-file {
  display: flex;
  align-items: center;
}

.input-group > .custom-file:not(:last-child) .custom-file-label,
.input-group > .custom-file:not(:last-child) .custom-file-label::after {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .custom-file:not(:first-child) .custom-file-label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-append,
.input-group-prepend {
  display: flex;
}

.input-group-append .btn,
.input-group-prepend .btn {
  position: relative;
  z-index: 2;
}

.input-group-append .btn:focus,
.input-group-prepend .btn:focus {
  z-index: 3;
}

.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .btn,
.input-group-append .input-group-text + .input-group-text,
.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-prepend .input-group-text + .input-group-text {
  margin-right: -1px;
}

.input-group-prepend {
  margin-left: -1px;
}

.input-group-append {
  margin-right: -1px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 1rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  text-align: center;
  white-space: nowrap;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 0.25rem;
}

.input-group-text input[type="checkbox"],
.input-group-text input[type="radio"] {
  margin-top: 0;
}

.input-group-lg > .custom-select,
.input-group-lg > .form-control:not(textarea) {
  height: calc(1.5em + 1rem + 2px);
}

.input-group-lg > .custom-select,
.input-group-lg > .form-control,
.input-group-lg > .input-group-append > .btn,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-prepend > .input-group-text {
  padding: 0.5rem 1rem;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 0.3rem;
}

.input-group-sm > .custom-select,
.input-group-sm > .form-control:not(textarea) {
  height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .custom-select,
.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-prepend > .input-group-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
  padding-left: 1.75rem;
}

.input-group
  > .input-group-append:last-child
  > .btn:not(:last-child):not(.dropdown-toggle),
.input-group
  > .input-group-append:last-child
  > .input-group-text:not(:last-child),
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group
  > .input-group-prepend:first-child
  > .input-group-text:not(:first-child),
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-right: 1.5rem;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}

.custom-control-inline {
  display: inline-flex;
  margin-left: 1rem;
}

.custom-control-input {
  position: absolute;
  right: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #369;
  background-color: #369;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(51, 102, 153, 0.25);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: #79a6d2;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
  color: #fff;
  background-color: #9fbfdf;
  border-color: #9fbfdf;
}

.custom-control-input:disabled ~ .custom-control-label,
.custom-control-input[disabled] ~ .custom-control-label {
  color: #6c757d;
}

.custom-control-input:disabled ~ .custom-control-label::before,
.custom-control-input[disabled] ~ .custom-control-label::before {
  background-color: #e9ecef;
}

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top;
}

.custom-control-label::before {
  position: absolute;
  top: 0.25rem;
  right: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
  background-color: #fff;
  border: #adb5bd solid 1px;
}

.custom-control-label::after {
  position: absolute;
  top: 0.25rem;
  right: -1.5rem;
  display: block;
  width: 1rem;
  height: 1rem;
  content: "";
  background: no-repeat 50%/50% 50%;
}

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox
  .custom-control-input:indeterminate
  ~ .custom-control-label::before {
  border-color: #369;
  background-color: #369;
}

.custom-checkbox
  .custom-control-input:indeterminate
  ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox
  .custom-control-input:disabled:checked
  ~ .custom-control-label::before {
  background-color: rgba(51, 102, 153, 0.5);
}

.custom-checkbox
  .custom-control-input:disabled:indeterminate
  ~ .custom-control-label::before {
  background-color: rgba(51, 102, 153, 0.5);
}

.custom-radio .custom-control-label::before {
  border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio
  .custom-control-input:disabled:checked
  ~ .custom-control-label::before {
  background-color: rgba(51, 102, 153, 0.5);
}

.custom-switch {
  padding-right: 2.25rem;
}

.custom-switch .custom-control-label::before {
  right: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}

.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  right: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition:
    transform 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  transform: translateX(0.75rem);
}

.custom-switch
  .custom-control-input:disabled:checked
  ~ .custom-control-label::before {
  background-color: rgba(51, 102, 153, 0.5);
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: 45px;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 25px;
  color: #495057;
  vertical-align: middle;
  background: #fff
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
    no-repeat left 0.75rem center/8px 10px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: #79a6d2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(51, 102, 153, 0.25);
}

.custom-select:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-left: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #6c757d;
  background-color: #e9ecef;
}

.custom-select::-ms-expand {
  display: none;
}

.custom-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #495057;
}

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 1rem;
  font-size: 1.25rem;
}

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0;
}

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.6em + 0.75rem + 2px);
  margin: 0;
  opacity: 0;
}

.custom-file-input:focus ~ .custom-file-label {
  border-color: #79a6d2;
  box-shadow: 0 0 0 0.2rem rgba(51, 102, 153, 0.25);
}

.custom-file-input:disabled ~ .custom-file-label,
.custom-file-input[disabled] ~ .custom-file-label {
  background-color: #e9ecef;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
  content: "Browse";
}

.custom-file-input ~ .custom-file-label[data-browse]::after {
  content: attr(data-browse);
}

.custom-file-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: calc(1.6em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #39c10c;
  border-radius: 6px;
}

.custom-file-label::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: block;
  height: calc(1.6em + 0.75rem);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  color: #ffffff;
  content: "انتخاب فایل";
  background-color: #39c10c;
  border-right: inherit;
  border-radius: 5px 0 0 5px;
  border: 0;
}

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-range:focus {
  outline: 0;
}

.custom-range:focus::-webkit-slider-thumb {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 0.2rem rgba(51, 102, 153, 0.25);
}

.custom-range:focus::-moz-range-thumb {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 0.2rem rgba(51, 102, 153, 0.25);
}

.custom-range:focus::-ms-thumb {
  box-shadow:
    0 0 0 1px #fff,
    0 0 0 0.2rem rgba(51, 102, 153, 0.25);
}

.custom-range::-moz-focus-outer {
  border: 0;
}

.custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #369;
  border: 0;
  border-radius: 1rem;
  -webkit-transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}

.custom-range::-webkit-slider-thumb:active {
  background-color: #9fbfdf;
}

.custom-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background-color: #369;
  border: 0;
  border-radius: 1rem;
  -moz-transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  -moz-appearance: none;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}

.custom-range::-moz-range-thumb:active {
  background-color: #9fbfdf;
}

.custom-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: #dee2e6;
  border-color: transparent;
  border-radius: 1rem;
}

.custom-range::-ms-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: 0;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  background-color: #369;
  border: 0;
  border-radius: 1rem;
  -ms-transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  appearance: none;
}

@media (prefers-reduced-motion: reduce) {
  .custom-range::-ms-thumb {
    -ms-transition: none;
    transition: none;
  }
}

.custom-range::-ms-thumb:active {
  background-color: #9fbfdf;
}

.custom-range::-ms-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: transparent;
  border-color: transparent;
  border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
  margin-left: 15px;
  background-color: #dee2e6;
  border-radius: 1rem;
}

.custom-range:disabled::-webkit-slider-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-webkit-slider-runnable-track {
  cursor: default;
}

.custom-range:disabled::-moz-range-thumb {
  background-color: #adb5bd;
}

.custom-range:disabled::-moz-range-track {
  cursor: default;
}

.custom-range:disabled::-ms-thumb {
  background-color: #adb5bd;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-control-label::before,
  .custom-file-label,
  .custom-select {
    transition: none;
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-right: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:focus,
.nav-link:hover {
  text-decoration: none;
}

.nav-link.disabled {
  color: #6c757d;
  pointer-events: none;
  cursor: default;
}

.nav-tabs {
  border-bottom: 1px solid #f0f5ff;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-right-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link.disabled {
  color: #6c757d;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: #495057;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.nav-pills .nav-link {
  border-radius: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #369;
}

.nav-fill .nav-item,
.nav-fill > .nav-link {
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item,
.nav-justified > .nav-link {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: block;
}

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 1rem;
}

.navbar-light {
  margin-top: 55px;
}

.navbar .container,
.navbar .container-fluid,
.navbar .container-lg,
.navbar .container-md,
.navbar .container-sm,
.navbar .container-xl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-left: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:focus,
.navbar-brand:hover {
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-right: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-left: 0;
  padding-right: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  transition: all 0.4s ease;
  float: none;
  top: 45px;
  border-radius: 10px;
  min-width: 220px;
  box-shadow: 0 0.5rem 1.6rem 0 rgb(222 231 247);
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:focus,
.navbar-toggler:hover {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid,
  .navbar-expand-sm > .container-lg,
  .navbar-expand-sm > .container-md,
  .navbar-expand-sm > .container-sm,
  .navbar-expand-sm > .container-xl {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid,
  .navbar-expand-sm > .container-lg,
  .navbar-expand-sm > .container-md,
  .navbar-expand-sm > .container-sm,
  .navbar-expand-sm > .container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid,
  .navbar-expand-md > .container-lg,
  .navbar-expand-md > .container-md,
  .navbar-expand-md > .container-sm,
  .navbar-expand-md > .container-xl {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .navbar-expand-md {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-md .navbar-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid,
  .navbar-expand-md > .container-lg,
  .navbar-expand-md > .container-md,
  .navbar-expand-md > .container-sm,
  .navbar-expand-md > .container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-md .navbar-toggler {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid,
  .navbar-expand-lg > .container-lg,
  .navbar-expand-lg > .container-md,
  .navbar-expand-lg > .container-sm,
  .navbar-expand-lg > .container-xl {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid,
  .navbar-expand-lg > .container-lg,
  .navbar-expand-lg > .container-md,
  .navbar-expand-lg > .container-sm,
  .navbar-expand-lg > .container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid,
  .navbar-expand-xl > .container-lg,
  .navbar-expand-xl > .container-md,
  .navbar-expand-xl > .container-sm,
  .navbar-expand-xl > .container-xl {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-flow: row nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-xl .navbar-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid,
  .navbar-expand-xl > .container-lg,
  .navbar-expand-xl > .container-md,
  .navbar-expand-xl > .container-sm,
  .navbar-expand-xl > .container-xl {
    flex-wrap: nowrap;
  }

  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
}

.navbar-expand {
  flex-flow: row nowrap;
  justify-content: flex-start;
}

.navbar-expand > .container,
.navbar-expand > .container-fluid,
.navbar-expand > .container-lg,
.navbar-expand > .container-md,
.navbar-expand > .container-sm,
.navbar-expand > .container-xl {
  padding-left: 0;
  padding-right: 0;
}

.navbar-expand .navbar-nav {
  flex-direction: row;
}

.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}

.navbar-expand .navbar-nav .nav-link {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.navbar-expand > .container,
.navbar-expand > .container-fluid,
.navbar-expand > .container-lg,
.navbar-expand > .container-md,
.navbar-expand > .container-sm,
.navbar-expand > .container-xl {
  flex-wrap: nowrap;
}

.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}

.navbar-expand .navbar-toggler {
  display: none;
}

.navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: rgba(0, 0, 0, 0.7);
}

.navbar-light .navbar-nav .nav-link.disabled {
  color: rgba(0, 0, 0, 0.3);
}

.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-toggler {
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
  color: rgba(0, 0, 0, 0.5);
}

.navbar-light .navbar-text a {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-light .navbar-text a:focus,
.navbar-light .navbar-text a:hover {
  color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
  color: #fff;
}

.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link.disabled {
  color: rgba(255, 255, 255, 0.25);
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #fff;
}

.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-text {
  color: rgba(255, 255, 255, 0.5);
}

.navbar-dark .navbar-text a {
  color: #fff;
}

.navbar-dark .navbar-text a:focus,
.navbar-dark .navbar-text a:hover {
  color: #fff;
}

.card,
.mc-promo-login,
.mc-promo-manage {
  border-radius: 15px;
  transition: all 0.5s ease-in-out;
}

.card > hr,
.mc-promo-login > hr,
.mc-promo-manage > hr {
  margin-left: 0;
  margin-right: 0;
}

.card > .list-group,
.mc-promo-login > .list-group,
.mc-promo-manage > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}

.card > .list-group:first-child,
.mc-promo-login > .list-group:first-child,
.mc-promo-manage > .list-group:first-child {
  border-top-width: 0;
  border-top-right-radius: calc(0.25rem - 1px);
  border-top-left-radius: calc(0.25rem - 1px);
}

.card > .list-group:last-child,
.mc-promo-login > .list-group:last-child,
.mc-promo-manage > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-left-radius: calc(0.25rem - 1px);
  border-bottom-right-radius: calc(0.25rem - 1px);
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer,
.mc-promo-login > .card-header + .list-group,
.mc-promo-login > .list-group + .card-footer,
.mc-promo-manage > .card-header + .list-group,
.mc-promo-manage > .list-group + .card-footer {
  border-top: 0;
}

.card-body,
.mc-promo-login .content,
.mc-promo-manage .content {
  flex: 1 1 auto;
  padding: 1.25rem;
}

.card-title,
.mc-promo-login .panel-heading h3,
.mc-promo-manage .panel-heading h3,
.promo-container .header h3 {
  margin-bottom: 0.75rem;
}

.card-subtitle {
  margin-top: -0.375rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}

.card-link + .card-link {
  margin-right: 1.25rem;
}

.card-header {
  padding: 20px 15px;
  margin-bottom: 0;
}

.card-header:first-child {
  border-radius: 15px 15px 0 0;
}

.card-footer {
  padding: 1rem 1.25rem;
  border-top: 3px dotted #dae9ff;
  background-color: #eef2fb;
}

.card-footer:last-child {
  border-radius: 0 0 15px 15px;
}

.card-header-tabs {
  margin-left: -0.625rem;
  margin-bottom: -0.75rem;
  margin-right: -0.625rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 1.25rem;
  border-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-bottom,
.card-img-top {
  flex-shrink: 0;
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-right-radius: calc(0.25rem - 1px);
  border-top-left-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-bottom {
  border-bottom-left-radius: calc(0.25rem - 1px);
  border-bottom-right-radius: calc(0.25rem - 1px);
}

.card-deck .card,
.card-deck .mc-promo-login,
.card-deck .mc-promo-manage {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    display: flex;
    flex-flow: row wrap;
    margin-left: -15px;
    margin-right: -15px;
  }

  .card-deck .card,
  .card-deck .mc-promo-login,
  .card-deck .mc-promo-manage {
    flex: 1 0 0%;
    margin-left: 15px;
    margin-bottom: 0;
    margin-right: 15px;
  }
}

.card-group > .card,
.card-group > .mc-promo-login,
.card-group > .mc-promo-manage {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }

  .card-group > .card,
  .card-group > .mc-promo-login,
  .card-group > .mc-promo-manage {
    flex: 1 0 0%;
    margin-bottom: 0;
  }

  .card-group > .card + .card,
  .card-group > .card + .mc-promo-login,
  .card-group > .card + .mc-promo-manage,
  .card-group > .mc-promo-login + .card,
  .card-group > .mc-promo-login + .mc-promo-login,
  .card-group > .mc-promo-login + .mc-promo-manage,
  .card-group > .mc-promo-manage + .card,
  .card-group > .mc-promo-manage + .mc-promo-login,
  .card-group > .mc-promo-manage + .mc-promo-manage {
    margin-right: 0;
    border-right: 0;
  }

  .card-group > .card:not(:last-child),
  .card-group > .mc-promo-login:not(:last-child),
  .card-group > .mc-promo-manage:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-group > .card:not(:last-child) .card-header,
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .mc-promo-login:not(:last-child) .card-header,
  .card-group > .mc-promo-login:not(:last-child) .card-img-top,
  .card-group > .mc-promo-manage:not(:last-child) .card-header,
  .card-group > .mc-promo-manage:not(:last-child) .card-img-top {
    border-top-left-radius: 0;
  }

  .card-group > .card:not(:last-child) .card-footer,
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .mc-promo-login:not(:last-child) .card-footer,
  .card-group > .mc-promo-login:not(:last-child) .card-img-bottom,
  .card-group > .mc-promo-manage:not(:last-child) .card-footer,
  .card-group > .mc-promo-manage:not(:last-child) .card-img-bottom {
    border-bottom-left-radius: 0;
  }

  .card-group > .card:not(:first-child),
  .card-group > .mc-promo-login:not(:first-child),
  .card-group > .mc-promo-manage:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-group > .card:not(:first-child) .card-header,
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .mc-promo-login:not(:first-child) .card-header,
  .card-group > .mc-promo-login:not(:first-child) .card-img-top,
  .card-group > .mc-promo-manage:not(:first-child) .card-header,
  .card-group > .mc-promo-manage:not(:first-child) .card-img-top {
    border-top-right-radius: 0;
  }

  .card-group > .card:not(:first-child) .card-footer,
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .mc-promo-login:not(:first-child) .card-footer,
  .card-group > .mc-promo-login:not(:first-child) .card-img-bottom,
  .card-group > .mc-promo-manage:not(:first-child) .card-footer,
  .card-group > .mc-promo-manage:not(:first-child) .card-img-bottom {
    border-bottom-right-radius: 0;
  }
}

.card-columns .card,
.card-columns .mc-promo-login,
.card-columns .mc-promo-manage {
  margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
  .card-columns {
    -moz-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card,
  .card-columns .mc-promo-login,
  .card-columns .mc-promo-manage {
    display: inline-block;
    width: 100%;
  }
}

.accordion {
  overflow-anchor: none;
}

.accordion > .card,
.accordion > .mc-promo-login,
.accordion > .mc-promo-manage {
  overflow: hidden;
}

.accordion > .card:not(:last-of-type),
.accordion > .mc-promo-login:not(:last-of-type),
.accordion > .mc-promo-manage:not(:last-of-type) {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.accordion > .card:not(:first-of-type),
.accordion > .mc-promo-login:not(:first-of-type),
.accordion > .mc-promo-manage:not(:first-of-type) {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.accordion > .card > .card-header,
.accordion > .mc-promo-login > .card-header,
.accordion > .mc-promo-manage > .card-header {
  border-radius: 0;
  margin-bottom: -1px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  list-style: none;
}

.breadcrumb-item {
  display: flex;
}

.breadcrumb a {
  color: #005397;
}

.breadcrumb-item + .breadcrumb-item {
  padding-right: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-left: 0.5rem;
  color: #94b7d5;
  content: "/";
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #518b1b;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #369;
  border-color: #369;
}

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}

a.badge:focus,
a.badge:hover {
  text-decoration: none;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-left: 0.6em;
  padding-right: 0.6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: #369;
}

a.badge-primary:focus,
a.badge-primary:hover {
  color: #fff;
  background-color: #264d73;
}

a.badge-primary.focus,
a.badge-primary:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(51, 102, 153, 0.5);
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

a.badge-secondary:focus,
a.badge-secondary:hover {
  color: #fff;
  background-color: #545b62;
}

a.badge-secondary.focus,
a.badge-secondary:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.badge-success {
  color: #fff;
  background-color: #28a745;
}

a.badge-success:focus,
a.badge-success:hover {
  color: #fff;
  background-color: #1e7e34;
}

a.badge-success.focus,
a.badge-success:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

a.badge-info:focus,
a.badge-info:hover {
  color: #fff;
  background-color: #117a8b;
}

a.badge-info.focus,
a.badge-info:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

a.badge-warning:focus,
a.badge-warning:hover {
  color: #212529;
  background-color: #d39e00;
}

a.badge-warning.focus,
a.badge-warning:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

a.badge-danger:focus,
a.badge-danger:hover {
  color: #fff;
  background-color: #bd2130;
}

a.badge-danger.focus,
a.badge-danger:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

a.badge-light:focus,
a.badge-light:hover {
  color: #212529;
  background-color: #dae0e5;
}

a.badge-light.focus,
a.badge-light:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

a.badge-dark:focus,
a.badge-dark:hover {
  color: #fff;
  background-color: #1d2124;
}

a.badge-dark.focus,
a.badge-dark:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
}

.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: 0.3rem;
}

@media (min-width: 576px) {
  .jumbotron {
    padding: 4rem 2rem;
  }
}

.jumbotron-fluid {
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin: 15px 0 20px;
  border: 1px solid transparent;
  border-radius: 15px;
  box-shadow: rgb(198 205 218 / 32%) 0px 0.625rem 1.5625rem 0px;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-left: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
  transition: all 0.9s;
}
.alert-primary .fad {
  color: #205ab7 !important;
  transition: all 0.9s;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.alert-primary a {
  color: #2265d3;
}

.alert-primary b {
  color: #2265d3;
}

.alert-primary .alert-link {
  color: #2265d3;
}

.alert-info {
  background: rgba(6, 182, 212, 0.1) !important;
  border-color: rgba(6, 182, 212, 0.1) !important;
  color: #06b6d4 !important;
  transition: all 0.9s;
}
.alert-info .fad {
  color: #0798b0 !important;
  transition: all 0.9s;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.alert-info a {
  color: #0092ab;
}

.alert-info b {
  color: #0092ab;
}

.alert-info .alert-link {
  color: #0092ab;
}

.alert-warning {
  background: rgba(249, 115, 22, 0.1) !important;
  border-color: rgba(249, 115, 22, 0.1) !important;
  color: #f97316 !important;
  transition: all 0.9s;
}
.alert-warning .fad {
  color: #d55c09 !important;
  transition: all 0.9s;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.alert-warning a {
  color: #c65d14;
}

.alert-warning b {
  color: #c65d14;
}

.alert-warning .alert-link {
  color: #c65d14;
}
.alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.1) !important;
  color: #0ba343 !important;
  transition: all 0.9s;
}
.alert-success .fad {
  color: #159644 !important;
  transition: all 0.9s;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.alert-success hr {
  border-top-color: #b1dfbb;
}

.alert-success b {
  color: #0d8238;
}

.alert-success a {
  color: #0d8238;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  transition: all 0.9s;
}
.alert-danger .fad {
  color: #c72727 !important;
  transition: all 0.9s;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.alert-danger a {
  color: #ad1c1c;
}

.alert-danger b {
  color: #ad1c1c;
}

.alert-danger .alert-link {
  color: #ad1c1c;
}

.alert-secondary {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: rgba(168, 85, 247, 0.1) !important;
  color: #a855f7 !important;
  transition: all 0.9s;
}
.alert-secondary .fad {
  color: #8536cf !important;
  transition: all 0.9s;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.alert-secondary a {
  color: #762ebb;
}

.alert-secondary b {
  color: #762ebb;
}

.alert-secondary .alert-link {
  color: #762ebb;
}

.alert-light {
  background: rgba(236, 72, 153, 0.1) !important;
  border-color: rgba(236, 72, 153, 0.1) !important;
  color: #ec4899 !important;
  transition: all 0.9s;
}
.alert-light .fad {
  color: #bc2b73 !important;
  transition: all 0.9s;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.alert-light a {
  color: #bf176a;
}

.alert-light b {
  color: #bf176a;
}

.alert-light .alert-link {
  color: #bf176a;
}

.alert-dark {
  background: rgba(107, 114, 128, 0.1) !important;
  border-color: rgba(107, 114, 128, 0.1) !important;
  color: #6b7280 !important;
  transition: all 0.9s;
}
.alert-dark .fad {
  color: #575f6f !important;
  transition: all 0.9s;
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.alert-dark a {
  color: #474d59;
}

.alert-dark b {
  color: #474d59;
}

.alert-dark .alert-link {
  color: #474d59;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }

  to {
    background-position: 0 0;
  }
}

.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  line-height: 0;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #369;
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}

.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}

.list-group {
  display: flex;
  flex-direction: column;
  padding-right: 0;
  margin-bottom: 0;
  border-radius: 0.25rem;
}

.list-group-item-action {
  width: 100%;
  color: #495057;
  text-align: inherit;
}

.list-group-item-action:focus,
.list-group-item-action:hover {
  z-index: 1;
  color: #495057;
  text-decoration: none;
  background-color: #f8f9fa;
}

.list-group-item-action:active {
  color: #212529;
  background-color: #e9ecef;
}

.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  background-color: #fff;
  border: 1px solid #efefef;
  transition: all 0.5s;
  font-size: 15px;
}

.list-group-item:hover {
  transition: all 0.5s;
  padding-right: 40px !important;
}
.list-group-item .fas {
  margin-left: 5px;
  color: #0074ff;
}

.list-group-item:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

.list-group-item.disabled,
.list-group-item:disabled {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
}

.list-group-item.active {
  z-index: 2;
  color: #2b41a1;
  background-color: #f5f5f5;
  border-color: #f5f5f5;
}

.list-group-item + .list-group-item {
  border-top-width: 0;
}

.list-group-item + .list-group-item.active {
  margin-top: -1px;
  border-top-width: 1px;
}

.list-group-horizontal {
  flex-direction: row;
}

.list-group-horizontal > .list-group-item:first-child {
  border-bottom-right-radius: 0.25rem;
  border-top-left-radius: 0;
}

.list-group-horizontal > .list-group-item:last-child {
  border-top-left-radius: 0.25rem;
  border-bottom-right-radius: 0;
}

.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}

.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: 1px;
  border-right-width: 0;
}

.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-right: -1px;
  border-right-width: 1px;
}

@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }

  .list-group-horizontal-sm > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }

  .list-group-horizontal-sm > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }

  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-right-width: 0;
  }

  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}

@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }

  .list-group-horizontal-md > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }

  .list-group-horizontal-md > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }

  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-right-width: 0;
  }

  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}

@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }

  .list-group-horizontal-lg > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }

  .list-group-horizontal-lg > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }

  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-right-width: 0;
  }

  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}

@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }

  .list-group-horizontal-xl > .list-group-item:first-child {
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
  }

  .list-group-horizontal-xl > .list-group-item:last-child {
    border-top-left-radius: 0.25rem;
    border-bottom-right-radius: 0;
  }

  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }

  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: 1px;
    border-right-width: 0;
  }

  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-right: -1px;
    border-right-width: 1px;
  }
}

.list-group-flush {
  border-radius: 15px;
}

.list-group-flush > .list-group-item {
  border-width: 0 0 1px;
}

.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}

.list-group-item-primary {
  color: #1b3550;
  background-color: #c6d4e2;
}

.list-group-item-primary.list-group-item-action:focus,
.list-group-item-primary.list-group-item-action:hover {
  color: #1b3550;
  background-color: #b5c7d9;
}

.list-group-item-primary.list-group-item-action.active {
  color: #fff;
  background-color: #1b3550;
  border-color: #1b3550;
}

.list-group-item-secondary {
  color: #383d41;
  background-color: #d6d8db;
}

.list-group-item-secondary.list-group-item-action:focus,
.list-group-item-secondary.list-group-item-action:hover {
  color: #383d41;
  background-color: #c8cbcf;
}

.list-group-item-secondary.list-group-item-action.active {
  color: #fff;
  background-color: #383d41;
  border-color: #383d41;
}

.list-group-item-success {
  color: #155724;
  background-color: #c3e6cb;
}

.list-group-item-success.list-group-item-action:focus,
.list-group-item-success.list-group-item-action:hover {
  color: #155724;
  background-color: #b1dfbb;
}

.list-group-item-success.list-group-item-action.active {
  color: #fff;
  background-color: #155724;
  border-color: #155724;
}

.list-group-item-info {
  color: #0c5460;
  background-color: #bee5eb;
}

.list-group-item-info.list-group-item-action:focus,
.list-group-item-info.list-group-item-action:hover {
  color: #0c5460;
  background-color: #abdde5;
}

.list-group-item-info.list-group-item-action.active {
  color: #fff;
  background-color: #0c5460;
  border-color: #0c5460;
}

.list-group-item-warning {
  color: #856404;
  background-color: #ffeeba;
}

.list-group-item-warning.list-group-item-action:focus,
.list-group-item-warning.list-group-item-action:hover {
  color: #856404;
  background-color: #ffe8a1;
}

.list-group-item-warning.list-group-item-action.active {
  color: #fff;
  background-color: #856404;
  border-color: #856404;
}

.list-group-item-danger {
  color: #721c24;
  background-color: #f5c6cb;
}

.list-group-item-danger.list-group-item-action:focus,
.list-group-item-danger.list-group-item-action:hover {
  color: #721c24;
  background-color: #f1b0b7;
}

.list-group-item-danger.list-group-item-action.active {
  color: #fff;
  background-color: #721c24;
  border-color: #721c24;
}

.list-group-item-light {
  color: #818182;
  background-color: #fdfdfe;
}

.list-group-item-light.list-group-item-action:focus,
.list-group-item-light.list-group-item-action:hover {
  color: #818182;
  background-color: #ececf6;
}

.list-group-item-light.list-group-item-action.active {
  color: #fff;
  background-color: #818182;
  border-color: #818182;
}

.list-group-item-dark {
  color: #1b1e21;
  background-color: #c6c8ca;
}

.list-group-item-dark.list-group-item-action:focus,
.list-group-item-dark.list-group-item-action:hover {
  color: #1b1e21;
  background-color: #b9bbbe;
}

.list-group-item-dark.list-group-item-action.active {
  color: #fff;
  background-color: #1b1e21;
  border-color: #1b1e21;
}

.close {
  float: left;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0.5;
}

.close:hover {
  color: #000;
  text-decoration: none;
}

.close:not(:disabled):not(.disabled):focus,
.close:not(:disabled):not(.disabled):hover {
  opacity: 0.75;
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
}

a.close.disabled {
  pointer-events: none;
}

.toast {
  flex-basis: 350px;
  max-width: 350px;
  font-size: 0.875rem;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  opacity: 0;
  border-radius: 0.25rem;
}

.toast:not(:last-child) {
  margin-bottom: 0.75rem;
}

.toast.showing {
  opacity: 1;
}

.toast.show {
  display: block;
  opacity: 1;
}

.toast.hide {
  display: none;
}

.toast-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  color: #6c757d;
  background-color: rgba(255, 255, 255, 0.85);
  background-clip: padding-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-top-right-radius: calc(0.25rem - 1px);
  border-top-left-radius: calc(0.25rem - 1px);
}

.toast-body {
  padding: 0.75rem;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999999;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  direction: rtl;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-footer,
.modal-dialog-scrollable .modal-header {
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: -moz-min-content;
  height: min-content;
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #10477e;
  border-top-right-radius: 14px;
  border-top-left-radius: 13px;
}

.modal-header .close {
  padding: 5px;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-left-radius: calc(0.3rem - 1px);
  border-bottom-right-radius: calc(0.3rem - 1px);
}

.modal-footer > * {
  margin: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }

  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }

  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }

  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }

  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -moz-min-content;
    height: min-content;
  }

  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1360px;
  }
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 0;
}

.tooltip.show {
  opacity: 0.9;
}

.tooltip .arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}

.tooltip .arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-tooltip-auto[x-placement^="top"],
.bs-tooltip-top {
  padding: 0.4rem 0;
}

.bs-tooltip-auto[x-placement^="top"] .arrow,
.bs-tooltip-top .arrow {
  bottom: 0;
}

.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.bs-tooltip-top .arrow::before {
  top: 0;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}

.bs-tooltip-auto[x-placement^="left"],
.bs-tooltip-left {
  padding: 0 0.4rem;
}

.bs-tooltip-auto[x-placement^="left"] .arrow,
.bs-tooltip-left .arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.bs-tooltip-left .arrow::before {
  left: 0;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-left-color: #000;
}

.bs-tooltip-auto[x-placement^="bottom"],
.bs-tooltip-bottom {
  padding: 0.4rem 0;
}

.bs-tooltip-auto[x-placement^="bottom"] .arrow,
.bs-tooltip-bottom .arrow {
  top: 0;
}

.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  bottom: 0;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}

.bs-tooltip-auto[x-placement^="right"],
.bs-tooltip-right {
  padding: 0 0.4rem;
}

.bs-tooltip-auto[x-placement^="right"] .arrow,
.bs-tooltip-right .arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}

.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.bs-tooltip-right .arrow::before {
  right: 0;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-right-color: #000;
}

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}

.popover {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1060;
  display: block;
  max-width: 276px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: right;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
}

.popover .arrow::after,
.popover .arrow::before {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
}

.bs-popover-auto[x-placement^="top"],
.bs-popover-top {
  margin-bottom: 0.5rem;
}

.bs-popover-auto[x-placement^="top"] > .arrow,
.bs-popover-top > .arrow {
  bottom: calc(-0.5rem - 1px);
}

.bs-popover-auto[x-placement^="top"] > .arrow::before,
.bs-popover-top > .arrow::before {
  bottom: 0;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="top"] > .arrow::after,
.bs-popover-top > .arrow::after {
  bottom: 1px;
  border-width: 0.5rem 0.5rem 0;
  border-top-color: #fff;
}

.bs-popover-auto[x-placement^="left"],
.bs-popover-left {
  margin-right: 0.5rem;
}

.bs-popover-auto[x-placement^="left"] > .arrow,
.bs-popover-left > .arrow {
  right: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-auto[x-placement^="left"] > .arrow::before,
.bs-popover-left > .arrow::before {
  right: 0;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-left-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="left"] > .arrow::after,
.bs-popover-left > .arrow::after {
  right: 1px;
  border-width: 0.5rem 0.5rem 0.5rem 0;
  border-left-color: #fff;
}

.bs-popover-auto[x-placement^="bottom"],
.bs-popover-bottom {
  margin-top: 0.5rem;
}

.bs-popover-auto[x-placement^="bottom"] > .arrow,
.bs-popover-bottom > .arrow {
  top: calc(-0.5rem - 1px);
}

.bs-popover-auto[x-placement^="bottom"] > .arrow::before,
.bs-popover-bottom > .arrow::before {
  top: 0;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="bottom"] > .arrow::after,
.bs-popover-bottom > .arrow::after {
  top: 1px;
  border-width: 0 0.5rem 0.5rem 0.5rem;
  border-bottom-color: #fff;
}

.bs-popover-auto[x-placement^="bottom"] .popover-header::before,
.bs-popover-bottom .popover-header::before {
  position: absolute;
  top: 0;
  right: 50%;
  display: block;
  width: 1rem;
  margin-right: -0.5rem;
  content: "";
  border-bottom: 1px solid #f7f7f7;
}

.bs-popover-auto[x-placement^="right"],
.bs-popover-right {
  margin-left: 0.5rem;
}

.bs-popover-auto[x-placement^="right"] > .arrow,
.bs-popover-right > .arrow {
  left: calc(-0.5rem - 1px);
  width: 0.5rem;
  height: 1rem;
  margin: 0.3rem 0;
}

.bs-popover-auto[x-placement^="right"] > .arrow::before,
.bs-popover-right > .arrow::before {
  left: 0;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-right-color: rgba(0, 0, 0, 0.25);
}

.bs-popover-auto[x-placement^="right"] > .arrow::after,
.bs-popover-right > .arrow::after {
  left: 1px;
  border-width: 0.5rem 0 0.5rem 0.5rem;
  border-right-color: #fff;
}

.popover-header {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0;
  font-size: 1rem;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-top-right-radius: calc(0.3rem - 1px);
  border-top-left-radius: calc(0.3rem - 1px);
}

.popover-header:empty {
  display: none;
}

.popover-body {
  padding: 0.5rem 0.75rem;
  color: #0f64d1;
}

.carousel {
  position: relative;
  border-radius: 15px;
}

.carousel.pointer-event {
  touch-action: pan-y;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 0;
}

.carousel-inner .fad {
  font-size: 30px;
  color: #005397;
}

.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
  border-radius: 15px;
}

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
  border-radius: 15px;
}

.carousel-item img {
  border-radius: var(--phc-radius-lg);
  box-shadow: 0 0.625rem 1.5625rem 0 rgb(198 205 218 / 12%);
  border: 1px solid #f5f5f5;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
  display: block;
}

.active.carousel-item-right,
.carousel-item-next:not(.carousel-item-left) {
  transform: translateX(100%);
}

.active.carousel-item-left,
.carousel-item-prev:not(.carousel-item-right) {
  transform: translateX(-100%);
}

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
  z-index: 1;
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: opacity 0 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right {
    transition: none;
  }
}

.carousel-control-next,
.carousel-control-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-control-next,
  .carousel-control-prev {
    transition: none;
  }
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}

.carousel-control-prev {
  left: 0;
  background-image: linear-gradient(91deg, #d4deef, hsl(0deg 0% 100% / 75%));
}

.carousel-control-next {
  right: 0;
  background-image: linear-gradient(271deg, #d4deef, hsl(0deg 0% 100% / 75%));
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: no-repeat 50%/100% 100%;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none;
  padding: 0;
}

.carousel-indicators li {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 15px;
  height: 4px;
  margin-bottom: -10px;
  margin-right: 3px;
  border-radius: 0;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #154668b8;
  background-clip: padding-box;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.2;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-indicators li {
    transition: none;
  }
}

.carousel-indicators .active {
  opacity: 1;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

@-webkit-keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
    transform: none;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: spinner-grow 0.75s linear infinite;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.bg-primary {
  background-color: #2531b7 !important;
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
  background-color: #264d73 !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

a.bg-secondary:focus,
a.bg-secondary:hover,
button.bg-secondary:focus,
button.bg-secondary:hover {
  background-color: #545b62 !important;
}

.bg-success {
  background-color: #28a745 !important;
}

a.bg-success:focus,
a.bg-success:hover,
button.bg-success:focus,
button.bg-success:hover {
  background-color: #1e7e34 !important;
}

.bg-info {
  background-color: #17a2b8 !important;
}

a.bg-info:focus,
a.bg-info:hover,
button.bg-info:focus,
button.bg-info:hover {
  background-color: #117a8b !important;
}

.bg-warning {
  background-color: #ffc107 !important;
}

a.bg-warning:focus,
a.bg-warning:hover,
button.bg-warning:focus,
button.bg-warning:hover {
  background-color: #d39e00 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

a.bg-danger:focus,
a.bg-danger:hover,
button.bg-danger:focus,
button.bg-danger:hover {
  background-color: #bd2130 !important;
}

.bg-light {
  background-color: #f8f9fa !important;
}

a.bg-light:focus,
a.bg-light:hover,
button.bg-light:focus,
button.bg-light:hover {
  background-color: #dae0e5 !important;
}

.bg-dark {
  background-color: #343a40 !important;
}

a.bg-dark:focus,
a.bg-dark:hover,
button.bg-dark:focus,
button.bg-dark:hover {
  background-color: #1d2124 !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.icons-blue {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
  transition: all 0.9s;
}
.icons-blue:hover {
  background: rgb(59 130 246 / 32%) !important;
  color: #3b82f6 !important;
  transition: all 0.9s;
}

.icons-cyan {
  background: rgba(6, 182, 212, 0.1) !important;
  color: #06b6d4 !important;
  transition: all 0.9s;
}
.icons-cyan:hover {
  background: rgb(6 182 212 / 35%) !important;
  color: #06b6d4 !important;
  transition: all 0.9s;
}

.icons-orange {
  background: rgba(249, 115, 22, 0.1) !important;
  color: #f97316 !important;
  transition: all 0.9s;
}
.icons-orange:hover {
  background: rgb(249 115 22 / 27%) !important;
  color: #f97316 !important;
  transition: all 0.9s;
}

.icons-green {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #22c55e !important;
  transition: all 0.9s;
}
.icons-green:hover {
  background: rgb(34 197 94 / 32%) !important;
  color: #22c55e !important;
  transition: all 0.9s;
}

.icons-purple {
  background: rgba(168, 85, 247, 0.1) !important;
  color: #a855f7 !important;
  transition: all 0.9s;
}
.icons-purple:hover {
  background: rgb(168 85 247 / 30%) !important;
  color: #a855f7 !important;
  transition: all 0.9s;
}

.icons-indigo {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #6366f1 !important;
  transition: all 0.9s;
}
.icons-indigo:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #6366f1 !important;
  transition: all 0.9s;
}

.icons-pink {
  background: rgba(236, 72, 153, 0.1) !important;
  color: #ec4899 !important;
  transition: all 0.9s;
}
.icons-pink:hover {
  background: rgba(236, 72, 153, 0.1) !important;
  color: #ec4899 !important;
  transition: all 0.9s;
}

.icons-red {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
  transition: all 0.9s;
}
.icons-red:hover {
  background: rgb(239 68 68 / 27%) !important;
  color: #ef4444 !important;
  transition: all 0.9s;
}

.icons-teal {
  background: rgba(20, 184, 166, 0.1) !important;
  color: #14b8a6 !important;
  transition: all 0.9s;
}
.icons-teal:hover {
  background: rgb(20 184 166 / 32%) !important;
  color: #14b8a6 !important;
  transition: all 0.9s;
}

.icons-amber {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #f59e0b !important;
  transition: all 0.9s;
}
.icons-amber:hover {
  background: rgb(245 158 11 / 34%) !important;
  color: #f59e0b !important;
  transition: all 0.9s;
}

.icons-lime {
  background: rgba(132, 204, 22, 0.1) !important;
  color: #84cc16 !important;
  transition: all 0.9s;
}
.icons-lime:hover {
  background: rgba(132, 204, 22, 0.1) !important;
  color: #84cc16 !important;
  transition: all 0.9s;
}

.icons-gray {
  background: rgba(107, 114, 128, 0.1) !important;
  color: #6b7280 !important;
  transition: all 0.9s;
}
.icons-gray:hover {
  background: rgb(107 114 128 / 34%) !important;
  color: #6b7280 !important;
  transition: all 0.9s;
}

.border {
  border: 1px solid #dee2e6 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-left {
  border-left: 1px solid #dee2e6 !important;
}

.border-bottom {
  border-bottom: 1px solid #dee2e6 !important;
}

.border-right {
  border-right: 3px dotted #ededed !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-primary {
  border-color: #369 !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.border-success {
  border-color: #28a745 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded-sm {
  border-radius: 0.2rem !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-top {
  border-top-right-radius: 0.25rem !important;
  border-top-left-radius: 0.25rem !important;
}

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-left-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-lg {
  border-radius: 0.3rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .d-sm-none {
    display: none !important;
  }

  .d-sm-inline {
    display: inline !important;
  }

  .d-sm-inline-block {
    display: inline-block !important;
  }

  .d-sm-block {
    display: block !important;
  }

  .d-sm-table {
    display: table !important;
  }

  .d-sm-table-row {
    display: table-row !important;
  }

  .d-sm-table-cell {
    display: table-cell !important;
  }

  .d-sm-flex {
    display: flex !important;
  }

  .d-sm-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }

  .d-md-inline {
    display: inline !important;
  }

  .d-md-inline-block {
    display: inline-block !important;
  }

  .d-md-block {
    display: block !important;
  }

  .d-md-table {
    display: table !important;
  }

  .d-md-table-row {
    display: table-row !important;
  }

  .d-md-table-cell {
    display: table-cell !important;
  }

  .d-md-flex {
    display: flex !important;
  }

  .d-md-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-inline {
    display: inline !important;
  }

  .d-lg-inline-block {
    display: inline-block !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-table {
    display: table !important;
  }

  .d-lg-table-row {
    display: table-row !important;
  }

  .d-lg-table-cell {
    display: table-cell !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .d-xl-none {
    display: none !important;
  }

  .d-xl-inline {
    display: inline !important;
  }

  .d-xl-inline-block {
    display: inline-block !important;
  }

  .d-xl-block {
    display: block !important;
  }

  .d-xl-table {
    display: table !important;
  }

  .d-xl-table-row {
    display: table-row !important;
  }

  .d-xl-table-cell {
    display: table-cell !important;
  }

  .d-xl-flex {
    display: flex !important;
  }

  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}

@media print {
  .d-print-none {
    display: none !important;
  }

  .d-print-inline {
    display: inline !important;
  }

  .d-print-inline-block {
    display: inline-block !important;
  }

  .d-print-block {
    display: block !important;
  }

  .d-print-table {
    display: table !important;
  }

  .d-print-table-row {
    display: table-row !important;
  }

  .d-print-table-cell {
    display: table-cell !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .d-print-inline-flex {
    display: inline-flex !important;
  }
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.8571428571%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.flex-fill {
  flex: 1 1 auto !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

@media (min-width: 576px) {
  .flex-sm-row {
    flex-direction: row !important;
  }

  .flex-sm-column {
    flex-direction: column !important;
  }

  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }

  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-sm-fill {
    flex: 1 1 auto !important;
  }

  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-sm-start {
    justify-content: flex-start !important;
  }

  .justify-content-sm-end {
    justify-content: flex-end !important;
  }

  .justify-content-sm-center {
    justify-content: center !important;
  }

  .justify-content-sm-between {
    justify-content: space-between !important;
  }

  .justify-content-sm-around {
    justify-content: space-around !important;
  }

  .align-items-sm-start {
    align-items: flex-start !important;
  }

  .align-items-sm-end {
    align-items: flex-end !important;
  }

  .align-items-sm-center {
    align-items: center !important;
  }

  .align-items-sm-baseline {
    align-items: baseline !important;
  }

  .align-items-sm-stretch {
    align-items: stretch !important;
  }

  .align-content-sm-start {
    align-content: flex-start !important;
  }

  .align-content-sm-end {
    align-content: flex-end !important;
  }

  .align-content-sm-center {
    align-content: center !important;
  }

  .align-content-sm-between {
    align-content: space-between !important;
  }

  .align-content-sm-around {
    align-content: space-around !important;
  }

  .align-content-sm-stretch {
    align-content: stretch !important;
  }

  .align-self-sm-auto {
    align-self: auto !important;
  }

  .align-self-sm-start {
    align-self: flex-start !important;
  }

  .align-self-sm-end {
    align-self: flex-end !important;
  }

  .align-self-sm-center {
    align-self: center !important;
  }

  .align-self-sm-baseline {
    align-self: baseline !important;
  }

  .align-self-sm-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 768px) {
  .flex-md-row {
    flex-direction: row !important;
  }

  .flex-md-column {
    flex-direction: column !important;
  }

  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-md-wrap {
    flex-wrap: wrap !important;
  }

  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-md-fill {
    flex: 1 1 auto !important;
  }

  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-md-start {
    justify-content: flex-start !important;
  }

  .justify-content-md-end {
    justify-content: flex-end !important;
  }

  .justify-content-md-center {
    justify-content: center !important;
  }

  .justify-content-md-between {
    justify-content: space-between !important;
  }

  .justify-content-md-around {
    justify-content: space-around !important;
  }

  .align-items-md-start {
    align-items: flex-start !important;
  }

  .align-items-md-end {
    align-items: flex-end !important;
  }

  .align-items-md-center {
    align-items: center !important;
  }

  .align-items-md-baseline {
    align-items: baseline !important;
  }

  .align-items-md-stretch {
    align-items: stretch !important;
  }

  .align-content-md-start {
    align-content: flex-start !important;
  }

  .align-content-md-end {
    align-content: flex-end !important;
  }

  .align-content-md-center {
    align-content: center !important;
  }

  .align-content-md-between {
    align-content: space-between !important;
  }

  .align-content-md-around {
    align-content: space-around !important;
  }

  .align-content-md-stretch {
    align-content: stretch !important;
  }

  .align-self-md-auto {
    align-self: auto !important;
  }

  .align-self-md-start {
    align-self: flex-start !important;
  }

  .align-self-md-end {
    align-self: flex-end !important;
  }

  .align-self-md-center {
    align-self: center !important;
  }

  .align-self-md-baseline {
    align-self: baseline !important;
  }

  .align-self-md-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 992px) {
  .flex-lg-row {
    flex-direction: row !important;
  }

  .flex-lg-column {
    flex-direction: column !important;
  }

  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }

  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-lg-fill {
    flex: 1 1 auto !important;
  }

  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-lg-start {
    justify-content: flex-start !important;
  }

  .justify-content-lg-end {
    justify-content: flex-end !important;
  }

  .justify-content-lg-center {
    justify-content: center !important;
  }

  .justify-content-lg-between {
    justify-content: space-between !important;
  }

  .justify-content-lg-around {
    justify-content: space-around !important;
  }

  .align-items-lg-start {
    align-items: flex-start !important;
  }

  .align-items-lg-end {
    align-items: flex-end !important;
  }

  .align-items-lg-center {
    align-items: center !important;
  }

  .align-items-lg-baseline {
    align-items: baseline !important;
  }

  .align-items-lg-stretch {
    align-items: stretch !important;
  }

  .align-content-lg-start {
    align-content: flex-start !important;
  }

  .align-content-lg-end {
    align-content: flex-end !important;
  }

  .align-content-lg-center {
    align-content: center !important;
  }

  .align-content-lg-between {
    align-content: space-between !important;
  }

  .align-content-lg-around {
    align-content: space-around !important;
  }

  .align-content-lg-stretch {
    align-content: stretch !important;
  }

  .align-self-lg-auto {
    align-self: auto !important;
  }

  .align-self-lg-start {
    align-self: flex-start !important;
  }

  .align-self-lg-end {
    align-self: flex-end !important;
  }

  .align-self-lg-center {
    align-self: center !important;
  }

  .align-self-lg-baseline {
    align-self: baseline !important;
  }

  .align-self-lg-stretch {
    align-self: stretch !important;
  }
}

@media (min-width: 1200px) {
  .flex-xl-row {
    flex-direction: row !important;
  }

  .flex-xl-column {
    flex-direction: column !important;
  }

  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }

  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }

  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }

  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }

  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .flex-xl-fill {
    flex: 1 1 auto !important;
  }

  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }

  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }

  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }

  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }

  .justify-content-xl-start {
    justify-content: flex-start !important;
  }

  .justify-content-xl-end {
    justify-content: flex-end !important;
  }

  .justify-content-xl-center {
    justify-content: center !important;
  }

  .justify-content-xl-between {
    justify-content: space-between !important;
  }

  .justify-content-xl-around {
    justify-content: space-around !important;
  }

  .align-items-xl-start {
    align-items: flex-start !important;
  }

  .align-items-xl-end {
    align-items: flex-end !important;
  }

  .align-items-xl-center {
    align-items: center !important;
  }

  .align-items-xl-baseline {
    align-items: baseline !important;
  }

  .align-items-xl-stretch {
    align-items: stretch !important;
  }

  .align-content-xl-start {
    align-content: flex-start !important;
  }

  .align-content-xl-end {
    align-content: flex-end !important;
  }

  .align-content-xl-center {
    align-content: center !important;
  }

  .align-content-xl-between {
    align-content: space-between !important;
  }

  .align-content-xl-around {
    align-content: space-around !important;
  }

  .align-content-xl-stretch {
    align-content: stretch !important;
  }

  .align-self-xl-auto {
    align-self: auto !important;
  }

  .align-self-xl-start {
    align-self: flex-start !important;
  }

  .align-self-xl-end {
    align-self: flex-end !important;
  }

  .align-self-xl-center {
    align-self: center !important;
  }

  .align-self-xl-baseline {
    align-self: baseline !important;
  }

  .align-self-xl-stretch {
    align-self: stretch !important;
  }
}

.float-right {
  float: right !important;
}

.float-left {
  float: left !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-right {
    float: right !important;
  }

  .float-sm-left {
    float: left !important;
  }

  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-right {
    float: right !important;
  }

  .float-md-left {
    float: left !important;
  }

  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-right {
    float: right !important;
  }

  .float-lg-left {
    float: left !important;
  }

  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-right {
    float: right !important;
  }

  .float-xl-left {
    float: left !important;
  }

  .float-xl-none {
    float: none !important;
  }
}

.user-select-all {
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  user-select: all !important;
}

.user-select-auto {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  user-select: auto !important;
}

.user-select-none {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

.fixed-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1030;
}

@supports (position: sticky) {
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  /* box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important; */
}

.shadow-none {
  box-shadow: none !important;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

.vw-100 {
  width: 100vw !important;
}

.vh-100 {
  height: 100vh !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-left: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-right: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-left: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1.8rem !important;
}

.ml-3,
.mx-3 {
  margin-right: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-left: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-right: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-left: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-right: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-left: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-right: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-left: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-right: 3rem !important;
}

.m-n1 {
  margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
  margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
  margin-left: -0.25rem !important;
}

.mb-n1,
.my-n1 {
  margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
  margin-right: -0.25rem !important;
}

.m-n2 {
  margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
  margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
  margin-left: -0.5rem !important;
}

.mb-n2,
.my-n2 {
  margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
  margin-right: -0.5rem !important;
}

.m-n3 {
  margin: -1rem !important;
}

.mt-n3,
.my-n3 {
  margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
  margin-left: -1rem !important;
}

.mb-n3,
.my-n3 {
  margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
  margin-right: -1rem !important;
}

.m-n4 {
  margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
  margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
  margin-left: -1.5rem !important;
}

.mb-n4,
.my-n4 {
  margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
  margin-right: -1.5rem !important;
}

.m-n5 {
  margin: -3rem !important;
}

.mt-n5,
.my-n5 {
  margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
  margin-left: -3rem !important;
}

.mb-n5,
.my-n5 {
  margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
  margin-right: -3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-left: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-right: auto !important;
}

@media (min-width: 576px) {
  .m-sm-0 {
    margin: 0 !important;
  }

  .mt-sm-0,
  .my-sm-0 {
    margin-top: 0 !important;
  }

  .mr-sm-0,
  .mx-sm-0 {
    margin-left: 0 !important;
  }

  .mb-sm-0,
  .my-sm-0 {
    margin-bottom: 0 !important;
  }

  .ml-sm-0,
  .mx-sm-0 {
    margin-right: 0 !important;
  }

  .m-sm-1 {
    margin: 0.25rem !important;
  }

  .mt-sm-1,
  .my-sm-1 {
    margin-top: 0.25rem !important;
  }

  .mr-sm-1,
  .mx-sm-1 {
    margin-left: 0.25rem !important;
  }

  .mb-sm-1,
  .my-sm-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-sm-1,
  .mx-sm-1 {
    margin-right: 0.25rem !important;
  }

  .m-sm-2 {
    margin: 0.5rem !important;
  }

  .mt-sm-2,
  .my-sm-2 {
    margin-top: 0.5rem !important;
  }

  .mr-sm-2,
  .mx-sm-2 {
    margin-left: 0.5rem !important;
  }

  .mb-sm-2,
  .my-sm-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-sm-2,
  .mx-sm-2 {
    margin-right: 0.5rem !important;
  }

  .m-sm-3 {
    margin: 1rem !important;
  }

  .mt-sm-3,
  .my-sm-3 {
    margin-top: 1rem !important;
  }

  .mr-sm-3,
  .mx-sm-3 {
    margin-left: 1rem !important;
  }

  .mb-sm-3,
  .my-sm-3 {
    margin-bottom: 1rem !important;
  }

  .ml-sm-3,
  .mx-sm-3 {
    margin-right: 1rem !important;
  }

  .m-sm-4 {
    margin: 1.5rem !important;
  }

  .mt-sm-4,
  .my-sm-4 {
    margin-top: 1.5rem !important;
  }

  .mr-sm-4,
  .mx-sm-4 {
    margin-left: 1.5rem !important;
  }

  .mb-sm-4,
  .my-sm-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-sm-4,
  .mx-sm-4 {
    margin-right: 1.5rem !important;
  }

  .m-sm-5 {
    margin: 3rem !important;
  }

  .mt-sm-5,
  .my-sm-5 {
    margin-top: 3rem !important;
  }

  .mr-sm-5,
  .mx-sm-5 {
    margin-left: 3rem !important;
  }

  .mb-sm-5,
  .my-sm-5 {
    margin-bottom: 3rem !important;
  }

  .ml-sm-5,
  .mx-sm-5 {
    margin-right: 3rem !important;
  }

  .p-sm-0 {
    padding: 0 !important;
  }

  .pt-sm-0,
  .py-sm-0 {
    padding-top: 0 !important;
  }

  .pr-sm-0,
  .px-sm-0 {
    padding-left: 0 !important;
  }

  .pb-sm-0,
  .py-sm-0 {
    padding-bottom: 0 !important;
  }

  .pl-sm-0,
  .px-sm-0 {
    padding-right: 0 !important;
  }

  .p-sm-1 {
    padding: 0.25rem !important;
  }

  .pt-sm-1,
  .py-sm-1 {
    padding-top: 0.25rem !important;
  }

  .pr-sm-1,
  .px-sm-1 {
    padding-left: 0.25rem !important;
  }

  .pb-sm-1,
  .py-sm-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-sm-1,
  .px-sm-1 {
    padding-right: 0.25rem !important;
  }

  .p-sm-2 {
    padding: 0.5rem !important;
  }

  .pt-sm-2,
  .py-sm-2 {
    padding-top: 0.5rem !important;
  }

  .pr-sm-2,
  .px-sm-2 {
    padding-left: 0.5rem !important;
  }

  .pb-sm-2,
  .py-sm-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-sm-2,
  .px-sm-2 {
    padding-right: 0.5rem !important;
  }

  .p-sm-3 {
    padding: 1rem !important;
  }

  .pt-sm-3,
  .py-sm-3 {
    padding-top: 1rem !important;
  }

  .pr-sm-3,
  .px-sm-3 {
    padding-left: 1rem !important;
  }

  .pb-sm-3,
  .py-sm-3 {
    padding-bottom: 1rem !important;
  }

  .pl-sm-3,
  .px-sm-3 {
    padding-right: 1rem !important;
  }

  .p-sm-4 {
    padding: 1.5rem !important;
  }

  .pt-sm-4,
  .py-sm-4 {
    padding-top: 1.5rem !important;
  }

  .pr-sm-4,
  .px-sm-4 {
    padding-left: 1.5rem !important;
  }

  .pb-sm-4,
  .py-sm-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-sm-4,
  .px-sm-4 {
    padding-right: 1.5rem !important;
  }

  .p-sm-5 {
    padding: 3rem !important;
  }

  .pt-sm-5,
  .py-sm-5 {
    padding-top: 3rem !important;
  }

  .pr-sm-5,
  .px-sm-5 {
    padding-left: 3rem !important;
  }

  .pb-sm-5,
  .py-sm-5 {
    padding-bottom: 3rem !important;
  }

  .pl-sm-5,
  .px-sm-5 {
    padding-right: 3rem !important;
  }

  .m-sm-n1 {
    margin: -0.25rem !important;
  }

  .mt-sm-n1,
  .my-sm-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-sm-n1,
  .mx-sm-n1 {
    margin-left: -0.25rem !important;
  }

  .mb-sm-n1,
  .my-sm-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-sm-n1,
  .mx-sm-n1 {
    margin-right: -0.25rem !important;
  }

  .m-sm-n2 {
    margin: -0.5rem !important;
  }

  .mt-sm-n2,
  .my-sm-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-sm-n2,
  .mx-sm-n2 {
    margin-left: -0.5rem !important;
  }

  .mb-sm-n2,
  .my-sm-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-sm-n2,
  .mx-sm-n2 {
    margin-right: -0.5rem !important;
  }

  .m-sm-n3 {
    margin: -1rem !important;
  }

  .mt-sm-n3,
  .my-sm-n3 {
    margin-top: -1rem !important;
  }

  .mr-sm-n3,
  .mx-sm-n3 {
    margin-left: -1rem !important;
  }

  .mb-sm-n3,
  .my-sm-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-sm-n3,
  .mx-sm-n3 {
    margin-right: -1rem !important;
  }

  .m-sm-n4 {
    margin: -1.5rem !important;
  }

  .mt-sm-n4,
  .my-sm-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-sm-n4,
  .mx-sm-n4 {
    margin-left: -1.5rem !important;
  }

  .mb-sm-n4,
  .my-sm-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-sm-n4,
  .mx-sm-n4 {
    margin-right: -1.5rem !important;
  }

  .m-sm-n5 {
    margin: -3rem !important;
  }

  .mt-sm-n5,
  .my-sm-n5 {
    margin-top: -3rem !important;
  }

  .mr-sm-n5,
  .mx-sm-n5 {
    margin-left: -3rem !important;
  }

  .mb-sm-n5,
  .my-sm-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-sm-n5,
  .mx-sm-n5 {
    margin-right: -3rem !important;
  }

  .m-sm-auto {
    margin: auto !important;
  }

  .mt-sm-auto,
  .my-sm-auto {
    margin-top: auto !important;
  }

  .mr-sm-auto,
  .mx-sm-auto {
    margin-left: auto !important;
  }

  .mb-sm-auto,
  .my-sm-auto {
    margin-bottom: auto !important;
  }

  .ml-sm-auto,
  .mx-sm-auto {
    margin-right: auto !important;
  }
}

@media (min-width: 768px) {
  .m-md-0 {
    margin: 0 !important;
  }

  .mt-md-0,
  .my-md-0 {
    margin-top: 0 !important;
  }

  .mr-md-0,
  .mx-md-0 {
    margin-left: 0 !important;
  }

  .mb-md-0,
  .my-md-0 {
    margin-bottom: 0 !important;
  }

  .ml-md-0,
  .mx-md-0 {
    margin-right: 0 !important;
  }

  .m-md-1 {
    margin: 0.25rem !important;
  }

  .mt-md-1,
  .my-md-1 {
    margin-top: 0.25rem !important;
  }

  .mr-md-1,
  .mx-md-1 {
    margin-left: 0.25rem !important;
  }

  .mb-md-1,
  .my-md-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-md-1,
  .mx-md-1 {
    margin-right: 0.25rem !important;
  }

  .m-md-2 {
    margin: 0.5rem !important;
  }

  .mt-md-2,
  .my-md-2 {
    margin-top: 0.5rem !important;
  }

  .mr-md-2,
  .mx-md-2 {
    margin-left: 0.5rem !important;
  }

  .mb-md-2,
  .my-md-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-md-2,
  .mx-md-2 {
    margin-right: 0.5rem !important;
  }

  .m-md-3 {
    margin: 1rem !important;
  }

  .mt-md-3,
  .my-md-3 {
    margin-top: 1rem !important;
  }

  .mr-md-3,
  .mx-md-3 {
    margin-left: 1rem !important;
  }

  .mb-md-3,
  .my-md-3 {
    margin-bottom: 1rem !important;
  }

  .ml-md-3,
  .mx-md-3 {
    margin-right: 1rem !important;
  }

  .m-md-4 {
    margin: 1.5rem !important;
  }

  .mt-md-4,
  .my-md-4 {
    margin-top: 1.5rem !important;
  }

  .mr-md-4,
  .mx-md-4 {
    margin-left: 1.5rem !important;
  }

  .mb-md-4,
  .my-md-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-md-4,
  .mx-md-4 {
    margin-right: 1.5rem !important;
  }

  .m-md-5 {
    margin: 3rem !important;
  }

  .mt-md-5,
  .my-md-5 {
    margin-top: 3rem !important;
  }

  .mr-md-5,
  .mx-md-5 {
    margin-left: 3rem !important;
  }

  .mb-md-5,
  .my-md-5 {
    margin-bottom: 3rem !important;
  }

  .ml-md-5,
  .mx-md-5 {
    margin-right: 3rem !important;
  }

  .p-md-0 {
    padding: 0 !important;
  }

  .pt-md-0,
  .py-md-0 {
    padding-top: 0 !important;
  }

  .pr-md-0,
  .px-md-0 {
    padding-left: 0 !important;
  }

  .pb-md-0,
  .py-md-0 {
    padding-bottom: 0 !important;
  }

  .pl-md-0,
  .px-md-0 {
    padding-right: 0 !important;
  }

  .p-md-1 {
    padding: 0.25rem !important;
  }

  .pt-md-1,
  .py-md-1 {
    padding-top: 0.25rem !important;
  }

  .pr-md-1,
  .px-md-1 {
    padding-left: 0.25rem !important;
  }

  .pb-md-1,
  .py-md-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-md-1,
  .px-md-1 {
    padding-right: 0.25rem !important;
  }

  .p-md-2 {
    padding: 0.5rem !important;
  }

  .pt-md-2,
  .py-md-2 {
    padding-top: 0.5rem !important;
  }

  .pr-md-2,
  .px-md-2 {
    padding-left: 0.5rem !important;
  }

  .pb-md-2,
  .py-md-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-md-2,
  .px-md-2 {
    padding-right: 0.5rem !important;
  }

  .p-md-3 {
    padding: 1rem !important;
  }

  .pt-md-3,
  .py-md-3 {
    padding-top: 1rem !important;
  }

  .pr-md-3,
  .px-md-3 {
    padding-left: 1rem !important;
  }

  .pb-md-3,
  .py-md-3 {
    padding-bottom: 1rem !important;
  }

  .pl-md-3,
  .px-md-3 {
    padding-right: 1rem !important;
  }

  .p-md-4 {
    padding: 1.5rem !important;
  }

  .pt-md-4,
  .py-md-4 {
    padding-top: 1.5rem !important;
  }

  .pr-md-4,
  .px-md-4 {
    padding-left: 1.5rem !important;
  }

  .pb-md-4,
  .py-md-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-md-4,
  .px-md-4 {
    padding-right: 1.5rem !important;
  }

  .p-md-5 {
    padding: 3rem !important;
  }

  .pt-md-5,
  .py-md-5 {
    padding-top: 3rem !important;
  }

  .pr-md-5,
  .px-md-5 {
    padding-left: 3rem !important;
  }

  .pb-md-5,
  .py-md-5 {
    padding-bottom: 3rem !important;
  }

  .pl-md-5,
  .px-md-5 {
    padding-right: 3rem !important;
  }

  .m-md-n1 {
    margin: -0.25rem !important;
  }

  .mt-md-n1,
  .my-md-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-md-n1,
  .mx-md-n1 {
    margin-left: -0.25rem !important;
  }

  .mb-md-n1,
  .my-md-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-md-n1,
  .mx-md-n1 {
    margin-right: -0.25rem !important;
  }

  .m-md-n2 {
    margin: -0.5rem !important;
  }

  .mt-md-n2,
  .my-md-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-md-n2,
  .mx-md-n2 {
    margin-left: -0.5rem !important;
  }

  .mb-md-n2,
  .my-md-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-md-n2,
  .mx-md-n2 {
    margin-right: -0.5rem !important;
  }

  .m-md-n3 {
    margin: -1rem !important;
  }

  .mt-md-n3,
  .my-md-n3 {
    margin-top: -1rem !important;
  }

  .mr-md-n3,
  .mx-md-n3 {
    margin-left: -1rem !important;
  }

  .mb-md-n3,
  .my-md-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-md-n3,
  .mx-md-n3 {
    margin-right: -1rem !important;
  }

  .m-md-n4 {
    margin: -1.5rem !important;
  }

  .mt-md-n4,
  .my-md-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-md-n4,
  .mx-md-n4 {
    margin-left: -1.5rem !important;
  }

  .mb-md-n4,
  .my-md-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-md-n4,
  .mx-md-n4 {
    margin-right: -1.5rem !important;
  }

  .m-md-n5 {
    margin: -3rem !important;
  }

  .mt-md-n5,
  .my-md-n5 {
    margin-top: -3rem !important;
  }

  .mr-md-n5,
  .mx-md-n5 {
    margin-left: -3rem !important;
  }

  .mb-md-n5,
  .my-md-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-md-n5,
  .mx-md-n5 {
    margin-right: -3rem !important;
  }

  .m-md-auto {
    margin: auto !important;
  }

  .mt-md-auto,
  .my-md-auto {
    margin-top: auto !important;
  }

  .mr-md-auto,
  .mx-md-auto {
    margin-left: auto !important;
  }

  .mb-md-auto,
  .my-md-auto {
    margin-bottom: auto !important;
  }

  .ml-md-auto,
  .mx-md-auto {
    margin-right: auto !important;
  }
}

@media (min-width: 992px) {
  .m-lg-0 {
    margin: 0 !important;
  }

  .mt-lg-0,
  .my-lg-0 {
    margin-top: 0 !important;
  }

  .mr-lg-0,
  .mx-lg-0 {
    margin-left: 0 !important;
  }

  .mb-lg-0,
  .my-lg-0 {
    margin-bottom: 0 !important;
  }

  .ml-lg-0,
  .mx-lg-0 {
    margin-right: 0 !important;
  }

  .m-lg-1 {
    margin: 0.25rem !important;
  }

  .mt-lg-1,
  .my-lg-1 {
    margin-top: 0.25rem !important;
  }

  .mr-lg-1,
  .mx-lg-1 {
    margin-left: 0.25rem !important;
  }

  .mb-lg-1,
  .my-lg-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-lg-1,
  .mx-lg-1 {
    margin-right: 0.25rem !important;
  }

  .m-lg-2 {
    margin: 0.5rem !important;
  }

  .mt-lg-2,
  .my-lg-2 {
    margin-top: 0.5rem !important;
  }

  .mr-lg-2,
  .mx-lg-2 {
    margin-left: 0.5rem !important;
  }

  .mb-lg-2,
  .my-lg-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-lg-2,
  .mx-lg-2 {
    margin-right: 0.5rem !important;
  }

  .m-lg-3 {
    margin: 1rem !important;
  }

  .mt-lg-3,
  .my-lg-3 {
    margin-top: 1rem !important;
  }

  .mr-lg-3,
  .mx-lg-3 {
    margin-left: 1rem !important;
  }

  .mb-lg-3,
  .my-lg-3 {
    margin-bottom: 1rem !important;
  }

  .ml-lg-3,
  .mx-lg-3 {
    margin-right: 1rem !important;
  }

  .m-lg-4 {
    margin: 1.5rem !important;
  }

  .mt-lg-4,
  .my-lg-4 {
    margin-top: 1.5rem !important;
  }

  .mr-lg-4,
  .mx-lg-4 {
    margin-left: 1.5rem !important;
  }

  .mb-lg-4,
  .my-lg-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-lg-4,
  .mx-lg-4 {
    margin-right: 1.5rem !important;
  }

  .m-lg-5 {
    margin: 3rem !important;
  }

  .mt-lg-5,
  .my-lg-5 {
    margin-top: 3rem !important;
  }

  .mr-lg-5,
  .mx-lg-5 {
    margin-left: 3rem !important;
  }

  .mb-lg-5,
  .my-lg-5 {
    margin-bottom: 3rem !important;
  }

  .ml-lg-5,
  .mx-lg-5 {
    margin-right: 3rem !important;
  }

  .p-lg-0 {
    padding: 0 !important;
  }

  .pt-lg-0,
  .py-lg-0 {
    padding-top: 0 !important;
  }

  .pr-lg-0,
  .px-lg-0 {
    padding-left: 0 !important;
  }

  .pb-lg-0,
  .py-lg-0 {
    padding-bottom: 0 !important;
  }

  .pl-lg-0,
  .px-lg-0 {
    padding-right: 0 !important;
  }

  .p-lg-1 {
    padding: 0.25rem !important;
  }

  .pt-lg-1,
  .py-lg-1 {
    padding-top: 0.25rem !important;
  }

  .pr-lg-1,
  .px-lg-1 {
    padding-left: 0.25rem !important;
  }

  .pb-lg-1,
  .py-lg-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-lg-1,
  .px-lg-1 {
    padding-right: 0.25rem !important;
  }

  .p-lg-2 {
    padding: 0.5rem !important;
  }

  .pt-lg-2,
  .py-lg-2 {
    padding-top: 0.5rem !important;
  }

  .pr-lg-2,
  .px-lg-2 {
    padding-left: 0.5rem !important;
  }

  .pb-lg-2,
  .py-lg-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-lg-2,
  .px-lg-2 {
    padding-right: 0.5rem !important;
  }

  .p-lg-3 {
    padding: 1rem !important;
  }

  .pt-lg-3,
  .py-lg-3 {
    padding-top: 1rem !important;
  }

  .pr-lg-3,
  .px-lg-3 {
    padding-left: 1rem !important;
  }

  .pb-lg-3,
  .py-lg-3 {
    padding-bottom: 1rem !important;
  }

  .pl-lg-3,
  .px-lg-3 {
    padding-right: 1rem !important;
  }

  .p-lg-4 {
    padding: 1.5rem !important;
  }

  .pt-lg-4,
  .py-lg-4 {
    padding-top: 1.5rem !important;
  }

  .pr-lg-4,
  .px-lg-4 {
    padding-left: 1.5rem !important;
  }

  .pb-lg-4,
  .py-lg-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-lg-4,
  .px-lg-4 {
    padding-right: 1.5rem !important;
  }

  .p-lg-5 {
    padding: 3rem !important;
  }

  .pt-lg-5,
  .py-lg-5 {
    padding-top: 3rem !important;
  }

  .pr-lg-5,
  .px-lg-5 {
    padding-left: 3rem !important;
  }

  .pb-lg-5,
  .py-lg-5 {
    padding-bottom: 3rem !important;
  }

  .pl-lg-5,
  .px-lg-5 {
    padding-right: 3rem !important;
  }

  .m-lg-n1 {
    margin: -0.25rem !important;
  }

  .mt-lg-n1,
  .my-lg-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-lg-n1,
  .mx-lg-n1 {
    margin-left: -0.25rem !important;
  }

  .mb-lg-n1,
  .my-lg-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-lg-n1,
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
  }

  .m-lg-n2 {
    margin: -0.5rem !important;
  }

  .mt-lg-n2,
  .my-lg-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-lg-n2,
  .mx-lg-n2 {
    margin-left: -0.5rem !important;
  }

  .mb-lg-n2,
  .my-lg-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-lg-n2,
  .mx-lg-n2 {
    margin-right: -0.5rem !important;
  }

  .m-lg-n3 {
    margin: -1rem !important;
  }

  .mt-lg-n3,
  .my-lg-n3 {
    margin-top: -1rem !important;
  }

  .mr-lg-n3,
  .mx-lg-n3 {
    margin-left: -1rem !important;
  }

  .mb-lg-n3,
  .my-lg-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-lg-n3,
  .mx-lg-n3 {
    margin-right: -1rem !important;
  }

  .m-lg-n4 {
    margin: -1.5rem !important;
  }

  .mt-lg-n4,
  .my-lg-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-lg-n4,
  .mx-lg-n4 {
    margin-left: -1.5rem !important;
  }

  .mb-lg-n4,
  .my-lg-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-lg-n4,
  .mx-lg-n4 {
    margin-right: -1.5rem !important;
  }

  .m-lg-n5 {
    margin: -3rem !important;
  }

  .mt-lg-n5,
  .my-lg-n5 {
    margin-top: -3rem !important;
  }

  .mr-lg-n5,
  .mx-lg-n5 {
    margin-left: -3rem !important;
  }

  .mb-lg-n5,
  .my-lg-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-lg-n5,
  .mx-lg-n5 {
    margin-right: -3rem !important;
  }

  .m-lg-auto {
    margin: auto !important;
  }

  .mt-lg-auto,
  .my-lg-auto {
    margin-top: auto !important;
  }

  .mr-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }

  .mb-lg-auto,
  .my-lg-auto {
    margin-bottom: auto !important;
  }

  .ml-lg-auto,
  .mx-lg-auto {
    margin-right: auto !important;
  }
}

@media (min-width: 1200px) {
  .m-xl-0 {
    margin: 0 !important;
  }

  .mt-xl-0,
  .my-xl-0 {
    margin-top: 0 !important;
  }

  .mr-xl-0,
  .mx-xl-0 {
    margin-left: 0 !important;
  }

  .mb-xl-0,
  .my-xl-0 {
    margin-bottom: 0 !important;
  }

  .ml-xl-0,
  .mx-xl-0 {
    margin-right: 0 !important;
  }

  .m-xl-1 {
    margin: 0.25rem !important;
  }

  .mt-xl-1,
  .my-xl-1 {
    margin-top: 0.25rem !important;
  }

  .mr-xl-1,
  .mx-xl-1 {
    margin-left: 0.25rem !important;
  }

  .mb-xl-1,
  .my-xl-1 {
    margin-bottom: 0.25rem !important;
  }

  .ml-xl-1,
  .mx-xl-1 {
    margin-right: 0.25rem !important;
  }

  .m-xl-2 {
    margin: 0.5rem !important;
  }

  .mt-xl-2,
  .my-xl-2 {
    margin-top: 0.5rem !important;
  }

  .mr-xl-2,
  .mx-xl-2 {
    margin-left: 0.5rem !important;
  }

  .mb-xl-2,
  .my-xl-2 {
    margin-bottom: 0.5rem !important;
  }

  .ml-xl-2,
  .mx-xl-2 {
    margin-right: 0.5rem !important;
  }

  .m-xl-3 {
    margin: 1rem !important;
  }

  .mt-xl-3,
  .my-xl-3 {
    margin-top: 1rem !important;
  }

  .mr-xl-3,
  .mx-xl-3 {
    margin-left: 1rem !important;
  }

  .mb-xl-3,
  .my-xl-3 {
    margin-bottom: 1rem !important;
  }

  .ml-xl-3,
  .mx-xl-3 {
    margin-right: 1rem !important;
  }

  .m-xl-4 {
    margin: 1.5rem !important;
  }

  .mt-xl-4,
  .my-xl-4 {
    margin-top: 1.5rem !important;
  }

  .mr-xl-4,
  .mx-xl-4 {
    margin-left: 1.5rem !important;
  }

  .mb-xl-4,
  .my-xl-4 {
    margin-bottom: 1.5rem !important;
  }

  .ml-xl-4,
  .mx-xl-4 {
    margin-right: 1.5rem !important;
  }

  .m-xl-5 {
    margin: 3rem !important;
  }

  .mt-xl-5,
  .my-xl-5 {
    margin-top: 3rem !important;
  }

  .mr-xl-5,
  .mx-xl-5 {
    margin-left: 3rem !important;
  }

  .mb-xl-5,
  .my-xl-5 {
    margin-bottom: 3rem !important;
  }

  .ml-xl-5,
  .mx-xl-5 {
    margin-right: 3rem !important;
  }

  .p-xl-0 {
    padding: 0 !important;
  }

  .pt-xl-0,
  .py-xl-0 {
    padding-top: 0 !important;
  }

  .pr-xl-0,
  .px-xl-0 {
    padding-left: 0 !important;
  }

  .pb-xl-0,
  .py-xl-0 {
    padding-bottom: 0 !important;
  }

  .pl-xl-0,
  .px-xl-0 {
    padding-right: 0 !important;
  }

  .p-xl-1 {
    padding: 0.25rem !important;
  }

  .pt-xl-1,
  .py-xl-1 {
    padding-top: 0.25rem !important;
  }

  .pr-xl-1,
  .px-xl-1 {
    padding-left: 0.25rem !important;
  }

  .pb-xl-1,
  .py-xl-1 {
    padding-bottom: 0.25rem !important;
  }

  .pl-xl-1,
  .px-xl-1 {
    padding-right: 0.25rem !important;
  }

  .p-xl-2 {
    padding: 0.5rem !important;
  }

  .pt-xl-2,
  .py-xl-2 {
    padding-top: 0.5rem !important;
  }

  .pr-xl-2,
  .px-xl-2 {
    padding-left: 0.5rem !important;
  }

  .pb-xl-2,
  .py-xl-2 {
    padding-bottom: 0.5rem !important;
  }

  .pl-xl-2,
  .px-xl-2 {
    padding-right: 0.5rem !important;
  }

  .p-xl-3 {
    padding: 1rem !important;
  }

  .pt-xl-3,
  .py-xl-3 {
    padding-top: 1rem !important;
  }

  .pr-xl-3,
  .px-xl-3 {
    padding-left: 1rem !important;
  }

  .pb-xl-3,
  .py-xl-3 {
    padding-bottom: 1rem !important;
  }

  .pl-xl-3,
  .px-xl-3 {
    padding-right: 1rem !important;
  }

  .p-xl-4 {
    padding: 1.5rem !important;
  }

  .pt-xl-4,
  .py-xl-4 {
    padding-top: 1.5rem !important;
  }

  .pr-xl-4,
  .px-xl-4 {
    padding-left: 1.5rem !important;
  }

  .pb-xl-4,
  .py-xl-4 {
    padding-bottom: 1.5rem !important;
  }

  .pl-xl-4,
  .px-xl-4 {
    padding-right: 1.5rem !important;
  }

  .p-xl-5 {
    padding: 3rem !important;
  }

  .pt-xl-5,
  .py-xl-5 {
    padding-top: 3rem !important;
  }

  .pr-xl-5,
  .px-xl-5 {
    padding-left: 3rem !important;
  }

  .pb-xl-5,
  .py-xl-5 {
    padding-bottom: 3rem !important;
  }

  .pl-xl-5,
  .px-xl-5 {
    padding-right: 3rem !important;
  }

  .m-xl-n1 {
    margin: -0.25rem !important;
  }

  .mt-xl-n1,
  .my-xl-n1 {
    margin-top: -0.25rem !important;
  }

  .mr-xl-n1,
  .mx-xl-n1 {
    margin-left: -0.25rem !important;
  }

  .mb-xl-n1,
  .my-xl-n1 {
    margin-bottom: -0.25rem !important;
  }

  .ml-xl-n1,
  .mx-xl-n1 {
    margin-right: -0.25rem !important;
  }

  .m-xl-n2 {
    margin: -0.5rem !important;
  }

  .mt-xl-n2,
  .my-xl-n2 {
    margin-top: -0.5rem !important;
  }

  .mr-xl-n2,
  .mx-xl-n2 {
    margin-left: -0.5rem !important;
  }

  .mb-xl-n2,
  .my-xl-n2 {
    margin-bottom: -0.5rem !important;
  }

  .ml-xl-n2,
  .mx-xl-n2 {
    margin-right: -0.5rem !important;
  }

  .m-xl-n3 {
    margin: -1rem !important;
  }

  .mt-xl-n3,
  .my-xl-n3 {
    margin-top: -1rem !important;
  }

  .mr-xl-n3,
  .mx-xl-n3 {
    margin-left: -1rem !important;
  }

  .mb-xl-n3,
  .my-xl-n3 {
    margin-bottom: -1rem !important;
  }

  .ml-xl-n3,
  .mx-xl-n3 {
    margin-right: -1rem !important;
  }

  .m-xl-n4 {
    margin: -1.5rem !important;
  }

  .mt-xl-n4,
  .my-xl-n4 {
    margin-top: -1.5rem !important;
  }

  .mr-xl-n4,
  .mx-xl-n4 {
    margin-left: -1.5rem !important;
  }

  .mb-xl-n4,
  .my-xl-n4 {
    margin-bottom: -1.5rem !important;
  }

  .ml-xl-n4,
  .mx-xl-n4 {
    margin-right: -1.5rem !important;
  }

  .m-xl-n5 {
    margin: -3rem !important;
  }

  .mt-xl-n5,
  .my-xl-n5 {
    margin-top: -3rem !important;
  }

  .mr-xl-n5,
  .mx-xl-n5 {
    margin-left: -3rem !important;
  }

  .mb-xl-n5,
  .my-xl-n5 {
    margin-bottom: -3rem !important;
  }

  .ml-xl-n5,
  .mx-xl-n5 {
    margin-right: -3rem !important;
  }

  .m-xl-auto {
    margin: auto !important;
  }

  .mt-xl-auto,
  .my-xl-auto {
    margin-top: auto !important;
  }

  .mr-xl-auto,
  .mx-xl-auto {
    margin-left: auto !important;
  }

  .mb-xl-auto,
  .my-xl-auto {
    margin-bottom: auto !important;
  }

  .ml-xl-auto,
  .mx-xl-auto {
    margin-right: auto !important;
  }
}

.stretched-link::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

.text-monospace {
  font-family:
    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace !important;
}

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-sm-right {
    text-align: right !important;
  }

  .text-sm-left {
    text-align: left !important;
  }

  .text-sm-center {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-md-right {
    text-align: right !important;
  }

  .text-md-left {
    text-align: left !important;
  }

  .text-md-center {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-lg-right {
    text-align: right !important;
  }

  .text-lg-left {
    text-align: left !important;
  }

  .text-lg-center {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-xl-right {
    text-align: right !important;
  }

  .text-xl-left {
    text-align: left !important;
  }

  .text-xl-center {
    text-align: center !important;
  }
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.font-weight-light {
  font-weight: 300 !important;
}

.font-weight-lighter {
  font-weight: lighter !important;
}

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: bolder !important;
}

.font-italic {
  font-style: italic !important;
}

.text-white {
  color: #fff !important;
}

.text-primary {
  color: #0f64d1 !important;
}

a.text-primary:focus,
a.text-primary:hover {
  color: #204060 !important;
}

.text-secondary {
  color: #6c757d !important;
}

a.text-secondary:focus,
a.text-secondary:hover {
  color: #494f54 !important;
}

.text-success {
  color: #28a745 !important;
}

a.text-success:focus,
a.text-success:hover {
  color: #19692c !important;
}

.text-info {
  color: #39c0ed !important;
}

a.text-info:focus,
a.text-info:hover {
  color: #0f6674 !important;
}

.text-warning {
  color: #fb8516 !important;
}

a.text-warning:focus,
a.text-warning:hover {
  color: #d96b02 !important;
}

.text-danger {
  color: #f64d70 !important;
}

a.text-danger:focus,
a.text-danger:hover {
  color: #a71d2a !important;
}

.text-light {
  color: #f8f9fa !important;
}

a.text-light:focus,
a.text-light:hover {
  color: #cbd3da !important;
}

.text-dark {
  color: #343a40 !important;
}

a.text-dark:focus,
a.text-dark:hover {
  color: #121416 !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #0f64d1 !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-break {
  word-break: break-word !important;
  word-wrap: break-word !important;
}

.text-reset {
  color: inherit !important;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

@media print {
  *,
  ::after,
  ::before {
    text-shadow: none !important;
    box-shadow: none !important;
  }

  a:not(.btn) {
    text-decoration: none;
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre {
    white-space: pre-wrap !important;
  }

  blockquote,
  pre {
    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  img,
  tr {
    page-break-inside: avoid;
  }

  h2,
  h3,
  p {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  @page {
    size: a3;
  }

  body {
    min-width: 992px !important;
  }

  .container {
    min-width: 992px !important;
  }

  .navbar {
    display: none;
  }

  .badge {
    border: 1px solid #000;
  }

  .table {
    border-collapse: collapse !important;
  }

  .table td,
  .table th {
    background-color: #fff !important;
  }

  .table-bordered td,
  .table-bordered th {
    border: 1px solid #dee2e6 !important;
  }

  .table-dark {
    color: inherit;
  }

  .table-dark tbody + tbody,
  .table-dark td,
  .table-dark th,
  .table-dark thead th {
    border-color: #dee2e6;
  }

  .table .thead-dark th {
    color: inherit;
    border-color: #dee2e6;
  }
}

.header-lined {
  padding: 1px 15px;
}

/* rtl.css */
body {
  font-family: whmcsco;
}
body,
html {
  height: 100%;
}
section#main-body {
  margin: 0px;
  padding: 30px 0px;
  direction: rtl;
  background-color: rgb(250, 250, 250);
  background-image: linear-gradient(
    229deg,
    rgb(255, 255, 255) calc(100% - 450px),
    rgb(247, 250, 255) 85px
  );
}
section#main-content {
  margin-bottom: 60px;
}
.main-content {
  margin-bottom: 60px;
  min-height: 300px;
}
.password-strength-meter .progress {
  margin-bottom: 5px;
}
.password-strength-meter p {
  margin-bottom: 15px;
}
#popup-backdrop {
  background-color: rgb(46, 54, 63);
  padding: 15px;
  height: 100%;
}
.popup-header-padding {
  margin-top: 5px;
  margin-bottom: 5px;
}
.alert .fas.pull-right {
  margin: -3px 0px 0px -3px;
}
.alert .alert-text {
  margin-right: 56px;
}
.card-sidebar .alert {
  padding: 10px 15px;
  margin-bottom: 5px;
}
.sidebar.sidebar-secondary {
  clear: right;
}
form[data-role="json-form"] .has-error input.form-control,
form[data-role="json-form"] .has-error select.form-control,
form[data-role="json-form"] .has-error textarea.form-control {
  background-color: rgb(255, 240, 240);
  transition: 0.2s;
}
form[data-role="json-form"] .has-error .tooltip-inner {
  background-color: rgb(157, 42, 11);
}
form[data-role="json-form"] .has-error .tooltip.top .tooltip-arrow {
  border-top-color: rgb(157, 42, 11);
}
.modal-metric-pricing .modal-body,
.modal-metric-pricing .modal-footer,
.modal-metric-pricing .modal-header {
  border: 0px;
  text-align: center !important;
}
.select-account {
  margin: 20px auto;
  padding: 0px;
  border-top: 1px solid rgb(221, 221, 221);
}
.select-account a {
  display: block;
  margin: 0px;
  padding: 10px;
  border-bottom: 1px solid rgb(221, 221, 221);
  text-decoration: none;
}
.select-account a.disabled {
  opacity: 0.5;
}
.select-account a:hover {
  background-color: rgb(246, 246, 246);
}
.continue-container {
  margin: 40px auto;
  padding: 20px;
  background-color: rgb(246, 246, 246);
  border: 1px solid rgb(238, 238, 238);
  max-width: 500px;
}
.invite-box {
  margin: 20px 0px;
  padding: 20px;
  background-color: rgb(246, 246, 246);
  border: 1px solid rgb(238, 238, 238);
}
@media print {
  #main-menu,
  #top-nav,
  .header-lined,
  .sidebar {
    display: none;
  }
  a[href]::after {
    content: "" !important;
  }
}
.admin-masquerade-notice {
  margin: 25px 0px 0px auto;
  padding: 4px 10px;
  max-width: 240px;
  font-family: Tahoma;
  font-size: 0.7em;
  text-align: left;
}
.admin-masquerade-notice a {
  text-decoration: none;
}
a.admin-inline-edit {
  margin-right: 6px;
  font-weight: 400;
  color: rgb(136, 136, 136);
}
a.admin-inline-edit:hover {
  color: rgb(68, 68, 68);
  text-decoration: none;
}
.licensing-addon-latest-download h3 {
  margin-top: 0px;
}
.input-inline {
  display: inline-block;
}
.input-inline-100 {
  width: 100px;
}
.select-inline {
  display: inline-block;
  width: auto;
}
.form-group .field-error-msg {
  display: none;
  font-size: 0.85em;
  color: rgb(204, 0, 0);
}
.form-group.has-error .field-error-msg {
  display: block;
}
#fullpage-overlay {
  display: table;
  position: fixed;
  z-index: 1000;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  direction: rtl;
}
#fullpage-overlay .outer-wrapper {
  position: relative;
  height: 100%;
}
#fullpage-overlay .inner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30%;
  width: 50%;
  margin: -3% 0px 0px -25%;
  text-align: center;
}
#fullpage-overlay .msg {
  display: inline-block;
  padding: 20px;
  max-width: 400px;
}
.has-feedback label ~ .form-control-feedback {
  top: 27px !important;
}
.has-error button {
  border-color: rgb(169, 68, 66);
  box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset;
}
.btn {
  overflow: hidden;
}
.is-warning ~ .warning-feedback,
.is-warning ~ .warning-tooltip {
  display: block;
}
.form-control.is-warning {
  border-color: var(--warning);
  padding-left: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1.0625em' height='1em' viewBox='0 0 17 16'%3e%3cpath fill='%23ffc107' d='M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3e%3cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.form-control.is-warning:focus {
  border-color: var(--warning);
  box-shadow: rgba(255, 193, 7, 0.25) 0px 0px 0px 0.2rem;
}
.w-text-09 {
  font-size: 0.9em;
}
.width-fixed-20 {
  width: 20px;
}
.width-fixed-60 {
  width: 60px;
}
.w-hidden {
  display: none;
}
span.caret {
  display: none;
}
.card .bootstrap-switch,
.mc-promo-login .bootstrap-switch,
.mc-promo-manage .bootstrap-switch {
  overflow-wrap: initial;
}
.line-height-reduced {
  line-height: 0.8;
}
#personalInformation {
  overflow: inherit;
}
.iradio_square-blue {
  margin-left: 6px;
}
.cc-payment-form .control-label {
  text-align: left;
}
header.header {
  background-color: rgb(255, 255, 255);
  direction: rtl;
}
header.header .topbar {
  margin: 0px;
  padding: 5px 0px;
  background-color: rgb(51, 102, 153);
  color: rgba(255, 255, 255, 0.65);
}
header.header .topbar .btn {
  line-height: 1;
  color: rgba(255, 255, 255, 0.65);
}
header.header .topbar .active-client {
  line-height: 1;
}
header.header .topbar .active-client .input-group-text {
  padding: 0.25rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  background-color: transparent;
  border: 0px;
}
header.header .topbar .active-client .btn {
  color: rgba(255, 255, 255, 0.65);
}
header.header .topbar .active-client .btn.btn-active-client span {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.65);
}
header.header .logo-img {
  max-width: 400px;
  height: 75px;
}
header.header .user-icon {
  font-size: 2em;
  color: rgb(135, 147, 159);
}
header.header .btn {
  font-size: 14px;
}
header.header .btn.focus,
header.header .btn:focus {
  box-shadow: none;
}
header.header .toolbar {
  flex-direction: row;
}
header.header .toolbar .nav-link {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.125rem 0px 0.0625rem 1rem;
  padding: 0.5rem;
  border-radius: 6.25rem;
  font-size: 19px;
}
header.header .toolbar .nav-link .badge {
  position: absolute;
  top: 2px;
  left: 5px;
  opacity: 0.8;
  font-size: 10px;
  padding: 3px 5px;
  border-radius: 50%;
}
header.header .toolbar .nav-link:hover {
  color: rgb(102, 102, 102);
}
header.header .search {
  width: 600px;
  border: 1px solid rgb(229, 229, 229);
  border-radius: 0.25rem;
}
header.header .search .btn,
header.header .search .form-control {
  border: 0px;
}
header.header .search .btn {
  color: rgb(165, 165, 165);
  width: 60px;
  background-color: rgb(255, 255, 255);
  border-left: 1px solid rgb(229, 229, 229);
}
header.header .search:focus-within {
  border-color: rgb(165, 165, 165);
}
header.header .main-navbar-wrapper {
  padding: 10px 0px;
}
header.header .main-navbar-wrapper .navbar-collapse {
  padding: 0.5rem 1rem;
}
header.header .navbar a {
  color: rgb(94, 94, 94);
  padding: 10px 15px;
}
header.header .navbar-nav a {
  font-size: 16px;
}
#Secondary_Navbar-Account {
  font-size: 14px;
}
#Secondary_Navbar-Account .dropdown-menu.show {
  top: 19px !important;
}
.clientsnfad {
  font-size: 18px;
  font-weight: 300;
  text-align: right;
  color: rgb(0 83 151);
  margin-left: 5px;
  vertical-align: middle;
}
.clientsnum {
  font-size: 14px;
  font-weight: 300;
  text-align: right;
  color: #518b1b;
  margin-right: 5px;
}
.client-top-access-item-count {
  display: table-caption;
  position: absolute;
  top: 58px;
  transition: 0.9s;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: -10px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: rgb(249, 115, 22) !important;
}
.notification-content {
  font-size: 13px;
  font-weight: 300;
}
.modal-content .modal-body .icon {
  font-size: 25px;
  vertical-align: text-top;
  transition: 0.9s;
  font-weight: 300;
  color: rgb(59, 130, 246) !important;
}
.master-breadcrumb {
  background-color: rgb(249 249 249);
  direction: rtl;
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
}
.master-breadcrumb .breadcrumb {
  margin: 0px;
  padding: 13px 30px;
  font-size: 14px;
}
.primary-content .card,
.primary-content .mc-promo-login,
.primary-content .mc-promo-manage {
  margin-bottom: 30px;
}
.primary-content .card.mw-540,
.primary-content .mw-540.mc-promo-login,
.primary-content .mw-540.mc-promo-manage {
  max-width: 540px;
  margin-right: auto;
  margin-left: auto;
}
.primary-content .card.mw-750,
.primary-content .mw-750.mc-promo-login,
.primary-content .mw-750.mc-promo-manage {
  max-width: 750px;
  margin-right: auto;
  margin-left: auto;
}
.mc-promo-login .primary-content .content,
.mc-promo-manage .primary-content .content,
.primary-content .card-body,
.primary-content .mc-promo-login .content,
.primary-content .mc-promo-manage .content {
  padding: 19px;
}
@media (min-width: 768px) {
  .mc-promo-login .primary-content .extra-padding.content,
  .mc-promo-manage .primary-content .extra-padding.content,
  .primary-content .card-body.extra-padding,
  .primary-content .mc-promo-login .extra-padding.content,
  .primary-content .mc-promo-manage .extra-padding.content {
    padding: 1.8rem;
  }
}
@media (min-width: 1200px) {
  .mc-promo-login .primary-content .extra-padding.content,
  .mc-promo-manage .primary-content .extra-padding.content,
  .primary-content .card-body.extra-padding,
  .primary-content .mc-promo-login .extra-padding.content,
  .primary-content .mc-promo-manage .extra-padding.content {
    padding: 2rem;
  }
}
.mc-promo-login .panel-heading .primary-content h3,
.mc-promo-manage .panel-heading .primary-content h3,
.primary-content .card-title,
.primary-content .mc-promo-login .panel-heading h3,
.primary-content .mc-promo-manage .panel-heading h3,
.primary-content .promo-container .header h3,
.promo-container .header .primary-content h3 {
  margin: 5px 10px 30px 0px;
  padding: 0px;
  font-size: 20px;
  color: rgb(51, 102, 153);
}
footer.footer {
  margin: 0px;
  padding: 50px 0px 80px;
  background-color: rgb(51, 102, 153);
  color: rgb(238, 238, 238);
  font-size: 0.9rem;
  direction: rtl;
}
footer.footer .nav-link {
  color: rgb(238, 238, 238);
}
footer.footer .btn {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 1.75rem;
  padding: 0px 10px;
}
footer.footer .btn-icon {
  padding: 0px;
  width: 1.75rem;
  height: 1.75rem;
}
footer.footer .dropdown-item {
  font-size: 0.9em;
}
footer.footer .copyleft {
  margin: 30px 0px;
  font-size: 0.85rem;
  text-align: center;
}
footer.footer .notices {
  margin: 30px 0px;
  font-size: 0.85rem;
  text-align: center;
}
.card .show-on-card-hover,
.mc-promo-login .show-on-card-hover,
.mc-promo-manage .show-on-card-hover {
  opacity: 0;
  transition: 0.5s;
}
.card:hover .show-on-card-hover,
.mc-promo-login:hover .show-on-card-hover,
.mc-promo-manage:hover .show-on-card-hover {
  opacity: 1;
}
h1 .show-on-hover,
h2 .show-on-hover,
h3 .show-on-hover,
h4 .show-on-hover,
h5 .show-on-hover,
h6 .show-on-hover {
  opacity: 0;
  transition: 0.5s;
}
h1:hover .show-on-hover,
h2:hover .show-on-hover,
h3:hover .show-on-hover,
h4:hover .show-on-hover,
h5:hover .show-on-hover,
h6:hover .show-on-hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .btn-return-to-admin {
    top: 425px;
    left: 0px;
    text-decoration: none;
    transform: rotate(90deg);
    transform-origin: left top;
    z-index: 500;
    position: fixed !important;
    padding: 5px 15px !important;
    background-color: rgb(215, 215, 215) !important;
    color: rgb(119, 119, 119) !important;
    font-size: 0.9rem !important;
    border-radius: 0px 0px 3px 3px !important;
  }
  .btn-return-to-admin:hover {
    text-decoration: none;
    background-color: rgb(205, 205, 205) !important;
    color: rgb(68, 68, 68) !important;
  }
}
.btn-return-to-admin .floating {
  top: 425px;
  left: 0px;
  text-decoration: none;
  transform: rotate(90deg);
  transform-origin: left top;
  z-index: 500;
  position: fixed !important;
  padding: 5px 15px !important;
  background-color: rgb(215, 215, 215) !important;
  color: rgb(119, 119, 119) !important;
  font-size: 0.9rem !important;
  border-radius: 0px 0px 3px 3px !important;
}
.btn-return-to-admin .floating:hover {
  text-decoration: none;
  background-color: rgb(205, 205, 205) !important;
  color: rgb(68, 68, 68) !important;
}
.form-control:focus {
  box-shadow: none;
}
.input-group .btn-reveal-pw {
  border-right: 0px;
}
.modal .modal-dialog {
  max-width: 700px;
}
.modal .modal-header {
  background-color: rgb(238, 238, 238);
}
.modal-localisation .modal-content {
  background-color: rgb(62, 62, 62);
}
.modal-localisation .modal-body {
  background: url("../img/worldmap.png") 0% 0% / cover;
}
.modal-localisation .modal-footer {
  border: 0px;
}
.modal-localisation .h5 {
  color: rgb(255, 255, 255);
}
.modal-localisation .item-selector .item {
  display: block;
  margin: 2px 0px;
  padding: 2px;
  text-align: center;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 3px;
  color: rgb(238, 238, 238);
}
.modal-localisation .item-selector .item:hover {
  background-color: rgb(238, 238, 238);
  color: rgb(68, 68, 68);
}
.modal-localisation .item-selector .item.active {
  background-color: rgb(221, 221, 221);
  border-color: rgb(187, 187, 187);
  color: rgb(68, 68, 68);
}
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.network-issue-alert {
  padding: 9px 10px;
  border-right: 0px;
  border-left: 0px;
  border-radius: 0px;
  font-size: 0.9rem;
}
.form-check-inline {
  display: initial;
}
@media (max-width: 991.98px) {
  .licensing-verification h3 {
    font-size: 1.4em;
  }
}
@media (max-width: 767.98px) {
  .licensing-verification h3 {
    font-size: 1em;
  }
}
@media (max-width: 991.98px) {
  .licensing-verification h2 {
    font-size: 1.7em;
  }
}
@media (max-width: 767.98px) {
  .licensing-verification h2 {
    font-size: 1.2em;
  }
}
.licensing-verification .secondary-input-submit {
  display: none;
}
@media (max-width: 767.98px) {
  .licensing-verification .input-group .input-group-append {
    display: none;
  }
  .licensing-verification .input-group input {
    border-radius: 0px 6px 6px 0px !important;
  }
  .licensing-verification .secondary-input-submit {
    display: block;
    padding-top: 0.5em;
  }
}
.input-group-xs > .custom-select,
.input-group-xs > .form-control:not(textarea) {
  height: calc(1.25em + 2px + 0.5rem);
}
.input-group-xs > .custom-select,
.input-group-xs > .form-control,
.input-group-xs > .input-group-append > .btn,
.input-group-xs > .input-group-append > .input-group-text,
.input-group-xs > .input-group-prepend > .btn,
.input-group-xs > .input-group-prepend > .input-group-text {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 0.2rem;
}
.input-group-xs > .custom-select {
  padding-left: 1.75rem;
}
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group
  > .input-group-prepend:first-child
  > .input-group-text:not(:first-child),
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.btn-group-xs > .btn,
.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.modal-header > .close {
  color: inherit;
}
.bg-color-gold {
  background-color: rgba(163, 130, 35, 0.08) !important;
  color: rgb(215, 135, 15) !important;
  padding: 10px 20px !important;
}
.bg-color-green {
  background-color: rgb(92, 184, 92);
}
.bg-color-red {
  background-color: rgba(163, 35, 35, 0.08) !important;
  color: rgb(215, 15, 15) !important;
  padding: 10px 20px !important;
}
.bg-color-blue {
  background-color: rgba(35, 67, 163, 0.08) !important;
  color: rgb(35, 67, 163) !important;
  padding: 10px 20px !important;
  font-weight: 300 !important;
}
.bg-color-orange {
  background-color: rgb(255, 102, 0);
}
.bg-color-pink {
  background-color: rgb(230, 113, 184);
}
.bg-color-purple {
  background-color: rgb(123, 79, 157);
}
.bg-color-lime {
  background-color: rgb(140, 191, 38);
}
.bg-color-magenta {
  background-color: rgb(255, 0, 151);
}
.bg-color-teal {
  background-color: rgb(0, 171, 169);
}
.bg-color-turquoise {
  background-color: rgb(26, 188, 156);
}
.bg-color-emerald {
  background-color: rgb(46, 204, 113);
}
.bg-color-amethyst {
  background-color: rgb(155, 89, 182);
}
.bg-color-wet-asphalt {
  background-color: rgb(0, 66, 88);
}
.bg-color-midnight-blue {
  background-color: rgb(44, 62, 80);
}
.bg-color-sun-flower {
  background-color: rgb(241, 196, 15);
}
.bg-color-pomegranate {
  background-color: rgb(192, 57, 43);
}
.bg-color-silver {
  background-color: rgb(189, 195, 199);
}
.bg-color-asbestos {
  background-color: rgba(151, 22, 153, 0.08) !important;
  color: rgb(169, 9, 112) !important;
  padding: 10px 20px !important;
}
.label {
  max-width: 100%;
  margin-bottom: 5px;
  border-radius: 15px;
  display: inline;
  padding: 7px 11px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
  color: rgb(255, 255, 255);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
}
.label-default {
  background-color: rgb(102, 102, 102);
}
.label-success {
  background-color: rgb(92, 184, 92);
}
.label-info {
  background-color: rgb(91, 192, 222);
}
.label-warning {
  background-color: rgb(240, 173, 78);
}
.label-danger {
  background-color: rgb(217, 83, 79);
}
.status-pending {
  color: rgb(229, 15, 8);
  background-color: rgb(255, 236, 235);
}
.status-pending.transfer {
  background-color: rgb(240, 173, 78);
}
.status-active,
.status-completed,
.status-open {
  background-color: rgb(202, 255, 202);
  color: rgb(31, 173, 31);
}
.status-suspended {
  background-color: rgb(118, 118, 118);
}
.status-customer-reply {
  background-color: rgb(255, 102, 0);
  color: #fff;
}
.status-fraud {
  background-color: rgb(0, 0, 0);
}
.status-answered {
  background-color: rgb(243, 228, 255);
  color: rgb(123, 79, 157);
}
.status-expired,
.status-transferred.away {
  background-color: rgb(0, 66, 88);
}
.status-terminated {
  background-color: rgb(102, 102, 102);
}
.status-onhold {
  background-color: rgb(51, 102, 153);
}
.status-inprogress {
  background-color: rgb(192, 57, 43);
}
.status-closed {
  transition: 0.9s;
  background: rgba(20, 184, 166, 0.1) !important;
  color: rgb(20, 184, 166) !important;
}
.status-paid {
  background-color: rgb(202, 255, 202);
  color: rgb(31, 173, 31);
}
.status-unpaid {
  color: rgb(217, 83, 79);
  background-color: rgb(255, 239, 238);
}
.status-cancelled {
  background-color: rgb(239, 242, 245);
  color: rgb(135, 147, 159);
}
.status-collections {
  background-color: rgb(44, 62, 80);
}
.status-refunded {
  background-color: rgb(240, 173, 78);
}
.status-payment-pending {
  background-color: rgb(51, 102, 153);
}
.status-delivered {
  background-color: rgb(51, 102, 153);
}
.status-accepted {
  background-color: rgb(92, 184, 92);
}
.status-dead,
.status-lost {
  background-color: rgb(0, 0, 0);
}
.requestor-type-operator {
  background-color: rgb(91, 192, 222);
}
.requestor-type-owner {
  background-color: rgb(92, 184, 92);
}
.requestor-type-authorizeduser {
  background-color: rgb(102, 102, 102);
}
.requestor-type-externaluser {
  background-color: rgb(240, 173, 78);
}
.requestor-type-subaccount {
  background-color: rgb(102, 102, 102);
}
.requestor-type-guest {
  background-color: rgb(135, 147, 159);
}
.responsive-tabs-sm-connector {
  display: none;
}
.responsive-tabs-sm .nav-item a {
  margin-left: 2px;
}
.responsive-tabs-sm .nav-item a:hover {
  background-color: rgb(247, 247, 247);
  border-bottom: 0px;
}
@media (max-width: 767.98px) {
  .responsive-tabs-sm {
    border-width: 1px 1px 0px;
    border-right-style: solid;
    border-right-color: rgb(221, 221, 221);
    background: rgb(255, 255, 255);
    width: 90%;
    border-top-style: solid;
    border-top-color: rgb(221, 221, 221);
    border-left-style: solid;
    border-left-color: rgb(221, 221, 221);
    border-bottom-style: initial;
    border-bottom-color: initial;
    margin-left: 0px;
    border-radius: 4px 4px 4px 0px;
  }
  .responsive-tabs-sm .nav-item {
    margin-right: 5px;
    margin-bottom: 0px;
    width: 100%;
    margin-left: 0px !important;
    border-bottom: 1px solid rgb(221, 221, 221) !important;
  }
  .responsive-tabs-sm .nav-item a {
    width: 100%;
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-image: initial;
    padding: 7px 15px !important;
    border-bottom: 0px !important;
    border-radius: 0px !important;
  }
  .responsive-tabs-sm .nav-item a.active {
    border: 0px;
    font-weight: 700;
    background-color: rgb(255, 255, 255) !important;
  }
  .responsive-tabs-sm .nav-item:first-child a {
    border-radius: 0px 4px 0px 0px !important;
  }
  .responsive-tabs-sm .nav-item:last-child {
    border-radius: 0px 0px 4px !important;
  }
  .responsive-tabs-sm .nav-item:last-child a {
    border-radius: 0px 0px 4px !important;
  }
  .responsive-tabs-sm-connector {
    display: block;
  }
  .responsive-tabs-sm-connector .channel {
    float: right;
    background: rgb(255, 255, 255);
    width: 6px;
    height: 5px;
    border-left: 1px solid rgb(221, 221, 221);
  }
  .responsive-tabs-sm-connector .bottom-border {
    margin-right: 5px;
    height: 5px;
    border-bottom: 1px solid rgb(221, 221, 221);
  }
  .responsive-tabs-sm-connector.store .channel {
    border-right: 1px solid rgb(221, 221, 221);
  }
}
.pagination {
  display: flex;
  list-style: none;
  direction: ltr;
  text-align: center;
}
.page-link {
  position: relative;
  display: block;
  padding: 10px 15px;
  height: 40px;
  margin: 3px;
  line-height: 20px;
  color: rgb(51, 102, 153);
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(222, 226, 230);
  border-radius: 10px;
}
.page-link:hover {
  z-index: 2;
  color: rgb(32, 64, 96);
  text-decoration: none;
  background-color: rgb(233, 236, 239);
  border-color: rgb(222, 226, 230);
}
.page-link:focus {
  z-index: 3;
  outline: 0px;
  box-shadow: rgba(51, 102, 153, 0.25) 0px 0px 0px 0.2rem;
}
.page-item.disabled .page-link {
  color: rgb(108, 117, 125);
  pointer-events: none;
  cursor: auto;
  background-color: rgb(255, 255, 255);
  border-color: rgb(222, 226, 230);
}
.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
.pagination-lg .page-item:first-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}
.pagination-lg .page-item:last-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.pagination-sm .page-item:first-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}
.pagination-sm .page-item:last-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
.badge {
  display: inline-block;
  font-size: 75%;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none;
  }
}
.fab.fa-telegram {
  color: rgb(255, 255, 255);
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.fa.fa-cube {
  color: rgb(21, 87, 100);
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.fa.fa-star {
  color: rgb(175, 138, 22);
  font-size: 28px;
  vertical-align: middle;
  margin-left: 10px;
}
.mc-promo-login .panel-heading .sidebar h3,
.mc-promo-manage .panel-heading .sidebar h3,
.promo-container .header .sidebar h3,
 margin-right: auto;
}
.home-domain-search h2 {
  margin: 0px;
}
.home-domain-search .tld-logos {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size: 1.4em;
  color: rgb(136, 136, 136);
  font-weight: 300;
}
.home-domain-search .tld-logos li {
  float: right;
  padding: 0px 25px 0px 0px;
}
.home-domain-search .tld-logos img {
  width: 60px;
}
.home-domain-search .input-group-wrapper {
  margin: 15px 0px;
  padding: 6px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(206, 212, 218);
  border-radius: 0.25rem;
}
.home-domain-search .input-group-wrapper .form-control {
  border: 0px;
}
.home-domain-search .input-group-wrapper .form-control:focus {
  box-shadow: none;
}
.home-domain-search .input-group-wrapper .btn {
  margin: 0px 2px !important;
  border-radius: 0.25rem !important;
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .card-columns.home {
    column-count: 2;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .card-columns.home {
    column-count: 2;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .card-columns.home {
    column-count: 3;
  }
}
@media (min-width: 1200px) {
  .card-columns.home {
    column-count: 3;
  }
}
.action-icon-btns a {
  margin: 0px 0px 10px;
  padding: 20px 0px 15px;
  display: block;
  text-align: center;
  transition: 0.3s;
  color: rgb(102, 102, 102);
  text-decoration: none;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 5px 0px;
  height: 170px;
}
.action-icon-btns a .ico-container {
  margin: 10px auto;
  line-height: 55px;
  font-size: 2.6em;
  text-align: center;
  transition: 0.3s;
}
.action-icon-btns a .ico-container i {
  color: rgb(51, 102, 153);
}
.action-icon-btns a:hover {
  color: rgb(68, 68, 68);
}
.action-icon-btns a:hover .ico-container {
  font-size: 3.4em;
}
.client-home-cards .card {
  font-size: 14px;
  padding: 20px 15px 5px;
}
.client-home-cards .card-header {
  background-color: rgb(255, 255, 255);
  font-weight: 700;
}
.client-home-cards .card-header .btn {
  color: rgb(255, 255, 255);
  border: 0px;
}
.client-home-cards .card-header .btn:hover {
  color: rgb(0, 0, 0);
}
.client-home-cards .card-title {
  font-size: 16px;
  letter-spacing: -0.03375rem;
  color: rgb(94, 94, 94);
  overflow: inherit;
  line-height: 40px;
}
.client-home-cards .card-body {
  padding: 15px;
  min-height: 170px;
  overflow: auto;
}
.client-home-cards .card-body p {
  padding: 5px;
}
.client-home-cards .card-footer {
  border-top: 0px;
}
.client-home-cards .list-group {
  max-height: 170px;
  overflow: auto;
  border-radius: 0px;
  min-height: 120px;
  border: 0px !important;
}
.client-home-cards .list-group .list-group-item {
  line-height: 35px;
}
.client-home-cards .list-group .list-group-item:last-child {
  border-bottom: 0px;
}
.client-home-cards small {
  color: rgb(218, 0, 127);
}
.promotions-slider-control .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231c3965' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}
.promotions-slider-control .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231c3965' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.tiles .tile {
  display: block;
  position: relative;
  padding: 45px 25px;
  height: 180px;
  background-color: rgb(255, 255, 255);
  text-decoration: none;
  transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 0px 5px 0px;
  border-radius: 15px;
  margin: 8px;
}
.tiles .tile .stat {
  margin-top: 20px;
  font-size: 40px;
  line-height: 1;
}
.tiles .tile .title {
  font-weight: 300;
  color: rgb(51, 102, 153);
  text-transform: uppercase;
  font-size: 16px;
}
.tiles .tile .highlight {
  margin-top: 4px;
  height: 2px;
  border-radius: 2px;
}
.tiles .tile i {
  position: absolute;
  top: 55px;
  left: 30px;
  font-size: 55px;
  line-height: 1;
  color: rgba(51, 102, 153, 0.21);
  transition: 0.3s;
  text-align: center;
}
.tiles .tile:hover {
  background-color: rgb(255, 255, 255);
  cursor: pointer;
  margin-top: -2px;
}
.tiles .tile:hover i {
  font-size: 70px;
  color: rgb(51, 102, 153);
}
.tiles .row > div:last-child .tile {
  border: 0px;
}
@media (max-width: 1199.98px) {
  .tiles div:nth-child(2) > .tile {
    border: 0px;
  }
  .tiles div:nth-child(1) > .tile,
  .tiles div:nth-child(2) > .tile {
    border-bottom: 1px solid rgb(204, 204, 204);
  }
}
.carousel-item.item {
  float: none;
}
.carousel-inner .carousel-item.item {
  float: right;
}
div[menuitemname="Active Products/Services"] .list-group {
  overflow: initial !important;
  max-height: initial !important;
  border-bottom: 0px !important;
}
div[menuitemname="Active Products/Services"]
  .list-group
  .list-group-item:nth-child(n + 5) {
  display: none;
}
div[menuitemname="Active Products/Services"] .card-footer {
  border-top: 1px;
  padding: 0.188rem 1.25rem;
}
div[menuitemname="Active Products/Services"] .btn-view-more {
  font-size: 0.75rem;
}
div[menuitemname="Active Products/Services"] .btn-view-more.disabled {
  cursor: default;
  text-decoration: none;
  color: rgb(233, 134, 7);
}
.div-service-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.div-service-status {
  text-align: center;
}
.div-service-status .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(255, 255, 255);
  display: inline-block;
  line-height: initial;
  margin: 0px;
}
.div-service-status .label-placeholder {
  position: absolute;
  visibility: hidden;
}
.div-service-status .label:not(.label-placeholder) {
  width: 3rem;
}
.div-service-name {
  flex: 1 1 0%;
  min-width: 0px;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  margin-left: 10px;
}
.div-service-name > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.div-service-buttons {
  margin-right: auto;
}
.div-service-buttons .disabled {
  cursor: default;
}
.div-service-buttons .dropdown-item {
  font-size: 0.875rem;
}
.div-service-buttons .btn-group-secondary,
.div-service-buttons .btn-view-details span:not(.sr-only) {
  display: none;
}
.div-service-buttons .dropdown-toggle::after {
  margin-right: 0px;
}
@media (min-width: 768px) {
  .div-service-status .label {
    width: initial !important;
  }
  .div-service-buttons .btn-group-primary,
  .div-service-buttons .btn-view-details i {
    display: none;
  }
  .div-service-buttons .btn-group-secondary {
    display: inline-flex;
  }
  .div-service-buttons .btn-view-details span:not(.sr-only):not(.caret) {
    display: initial !important;
  }
}
.recaptcha-content-domain-checker {
  padding-left: 15px;
  margin-right: -15px;
}
.google-recaptcha-align {
  padding-top: 20px;
  padding-right: 15%;
  padding-left: 15%;
}
@media (max-width: 768px) {
  .google-recaptcha-align {
    padding-right: 15px;
    padding-left: 15px;
  }
    .custom-dropdown-menu.custom-mobile-show {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        top: 85%;
    }
}
.twofa-setup .modal-body {
  min-height: 100px;
}
.twofa-setup .activation-msg {
  margin: 25px 0px;
  padding: 15px;
  border: 1px dashed rgb(221, 221, 221);
  text-align: center;
  font-weight: 700;
  font-size: 1.1em;
}
.twofa-setup .backup-code {
  margin: 20px auto;
  padding: 10px;
  background-color: rgb(239, 239, 239);
  color: rgb(68, 68, 68);
  text-align: center;
}
.twofa-module {
  margin: 10px 0px;
  padding: 14px 20px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 4px;
  cursor: pointer;
}
.twofa-module .col-radio {
  float: right;
  width: 35px;
  margin-top: 12px;
}
.twofa-module .col-logo {
  float: right;
  width: 80px;
  line-height: 40px;
  text-align: center;
}
.twofa-module .col-description {
  margin-right: 136px;
}
.twofa-module img {
  max-width: 100%;
  max-height: 40px;
}
.twofa-module.active {
  border-color: rgb(51, 122, 183);
}
.popover-user-notifications {
  border-radius: 15px;
  padding: 5px 10px;
  border-color: rgb(199, 227, 255);
  min-width: 310px;
}
.popover-user-notifications .popover-body {
  padding: 0px;
}
.popover-user-notifications ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.popover-user-notifications ul li {
  padding: 5px 0px;
  min-height: 66px;
  border-bottom: 1px solid rgb(221, 221, 221);
}
.popover-user-notifications ul li:last-child {
  border: 0px;
}
.popover-user-notifications ul li a {
  display: block;
  padding: 10px 15px 10px 12px;
  text-decoration: none;
  color: rgb(85, 85, 85);
  font-size: 0.95em;
}
.popover-user-notifications ul li a:hover {
  background-color: rgb(246, 246, 246);
}
.popover-user-notifications ul li i.far,
.popover-user-notifications ul li i.fas {
  float: right;
  padding-top: 6px;
  font-size: 21px;
}
.popover-user-notifications ul li i.far.fa-check-circle,
.popover-user-notifications ul li i.fas.fa-check-circle {
  color: rgb(92, 184, 92);
}
.popover-user-notifications ul li i.far.fa-warning,
.popover-user-notifications ul li i.fas.fa-warning {
  color: rgb(236, 195, 23);
}
.popover-user-notifications ul li i.far.fa-exclamation-circle,
.popover-user-notifications ul li i.fas.fa-exclamation-circle {
  color: rgb(236, 45, 69);
}
.popover-user-notifications ul li .message {
  margin-right: 40px;
}
.popover-user-notifications ul li.none {
  padding: 12px 0px;
  min-height: auto;
  text-align: center;
}
#google-recaptcha-domainchecker {
  width: 304px;
  height: 78px;
  margin-top: 15px;
  margin-bottom: 15px;
}
#default-captcha-domainchecker {
  margin-top: 15px;
  font-size: 14px;
}
#default-captcha-domainchecker img {
  height: 35px;
  border-radius: 6px;
  text-align: center;
  border: 1px solid rgb(233, 233, 233);
  padding: 2px;
}
#default-captcha-domainchecker #inputCaptcha {
  width: 120px;
  border-radius: 6px;
  height: 35px;
  text-align: center;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(233, 233, 233);
}
.domainchecker-homepage-captcha #google-recaptcha-domainchecker {
  margin-bottom: -46px;
}
@media (max-width: 991px) {
  #google-recaptcha-domainchecker {
    padding-right: 2.5%;
  }
}
@media (max-width: 736px) {
  #google-recaptcha-domainchecker {
    transform: scale(0.935);
    transform-origin: 0px 0px;
  }
}
@media (max-width: 384px) {
  #google-recaptcha-domainchecker {
    transform: scale(0.96);
    transform-origin: 0px 0px;
  }
}
@media (max-width: 360px) {
  #google-recaptcha-domainchecker {
    transform: scale(0.89);
    transform-origin: 0px 0px;
  }
}
@media (max-width: 320px) {
  #google-recaptcha-domainchecker {
    padding-right: 13.5%;
    transform: scale(0.785);
    transform-origin: 0px 0px;
  }
}
.captchaimage {
  padding: 15px 50px;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  text-align: center;
  align-items: center;
  align-content: center;
  border-radius: 10px;
  color: rgb(49, 49, 49);
  margin-bottom: 20px !important;
}
.verification-banner {
  margin: 0px;
  padding: 10px;
  font-weight: 300;
  background-color: rgb(249, 249, 249);
  border-bottom: 1px solid rgb(238, 238, 238);
  color: rgb(51, 51, 51);
}
.verification-banner .text {
  display: block;
  padding: 6px 0px;
}
.verification-banner .btn {
  margin: 3px 0px;
  padding: 3px 10px;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.verification-banner .btn.close {
  margin-right: 10px;
  background-color: transparent;
  color: rgba(55, 55, 55, 0.5);
  font-size: 22px;
  opacity: 1;
}
.verification-banner .btn.close:hover {
  color: rgba(55, 55, 55, 0.8);
}
.verification-banner .fal,
.verification-banner .far,
.verification-banner .fas {
  color: rgb(102, 102, 102);
  float: right;
  padding: 2px 10px 0px 0px;
  font-size: 24px;
}
@media (min-width: 768px) {
  .verification-banner .text {
    padding-top: 9px;
    padding-bottom: 0px;
  }
  .verification-banner .btn {
    margin: 0px;
    padding: 9px 25px;
  }
  .verification-banner .button {
    float: left;
  }
  .verification-banner .fal,
  .verification-banner .far,
  .verification-banner .fas {
    font-size: 36px;
  }
}
.verification-banner.email-verification .btn.btn-action,
.verification-banner.email-verification .btn.btn-action:active,
.verification-banner.email-verification .btn.btn-action[disabled]:hover {
  background-color: rgb(80, 82, 95);
  border-color: rgb(80, 82, 95);
  color: rgb(255, 255, 255);
}
.verification-banner.user-validation i {
  margin-right: 0.11em;
}
.md-editor {
  border: 1px solid rgb(221, 221, 221);
  border-radius: 3px;
}
.md-editor > .btn-toolbar {
  background-color: rgb(255, 255, 255) !important;
}
.md-editor > .btn-toolbar .hidden {
  display: none !important;
}
.md-editor > .md-preview,
.md-editor > textarea.markdown-editor {
  padding: 20px !important;
  border-top: 1px solid rgb(221, 221, 221) !important;
  border-bottom: 1px solid rgb(221, 221, 221) !important;
  background-color: rgb(255, 255, 255) !important;
}
div.md-editor.active {
  display: block;
  border: 1px solid rgb(221, 221, 221);
  outline: 0px;
  box-shadow: none;
}
.markdown-editor-status {
  padding: 2px 10px;
  font-size: 9pt;
  color: rgb(149, 150, 148);
  text-align: left;
}
.small-font {
  font-size: 0.9em;
}
.markdown-content h1,
.md-preview h1 {
  font-size: 1.6em;
  color: rgb(51, 51, 51);
}
.markdown-content h2,
.md-preview h2 {
  font-size: 1.4em;
  color: rgb(51, 51, 51);
}
.markdown-content h3,
.md-preview h3 {
  font-size: 1.2em;
  color: rgb(51, 51, 51);
}
.markdown-content h4,
.md-preview h4 {
  font-size: 1.1em;
  color: rgb(51, 51, 51);
}
.markdown-content pre,
.md-preview pre {
  padding: 15px;
  background-color: rgb(68, 68, 68);
  color: rgb(248, 248, 248);
  border: 0px;
}
.markdown-content pre code,
.md-preview pre code {
  white-space: pre;
  word-break: normal;
  overflow-wrap: normal;
}
.markdown-content blockquote,
.md-preview blockquote {
  font-size: 1em;
  padding: 10px 20px;
  margin: 0px 0px 20px;
  border-right: 5px solid rgb(238, 238, 238);
}
.markdown-content table,
.md-preview table {
  margin: 10px 0px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(221, 221, 221);
}
.markdown-content table > thead > tr > th,
.md-preview table > thead > tr > th {
  padding: 4px 10px;
  background-color: rgb(248, 248, 248);
  border: 1px solid rgb(221, 221, 221);
  font-weight: 700;
  text-align: center;
}
.markdown-content table > tbody > tr > td,
.md-preview table > tbody > tr > td {
  padding: 3px 8px;
  border: 1px solid rgb(221, 221, 221);
}
.store-order-container {
  margin: 0px;
  padding: 0px;
}
.store-order-container h2 {
  margin-top: 0px;
}
.store-order-container .btn {
  padding: 10px 30px;
  font-size: 1.15em;
  font-weight: 300;
}
.store-order-container .store-domain-tabs {
  margin-top: 20px;
}
.store-order-container .store-domain-tabs li a {
  margin-left: 10px;
  padding: 7px 15px;
  background-color: rgb(249, 249, 249);
  border-bottom: 1px solid rgb(221, 221, 221);
}
.store-order-container .store-domain-tabs li.active a {
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid transparent;
}
.store-order-container .store-domain-tab-content {
  margin-bottom: 20px;
  padding: 20px;
  border-width: 0px 1px 1px;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-right-color: rgb(221, 221, 221);
  border-bottom-color: rgb(221, 221, 221);
  border-left-color: rgb(221, 221, 221);
  border-image: initial;
  border-top-style: initial;
  border-top-color: initial;
}
.store-order-container .store-domain-tab-content a {
  text-decoration: none;
}
.store-order-container .store-domain-tab-content a:hover {
  text-decoration: none;
}
.store-order-container .payment-term h4 {
  margin-top: 25px;
}
@media (min-width: 768px) {
  .store-order-container .payment-term {
    float: left;
  }
  .store-order-container .payment-term h4 {
    margin-top: 0px;
  }
}
.store-order-container .domain-validation {
  display: block;
  padding-top: 5px;
  font-size: 1.2em;
  font-weight: 300;
  color: rgb(136, 136, 136);
}
.store-order-container .domain-validation.ok {
  color: rgb(83, 162, 45);
}
.store-promoted-product .icon {
  height: 200px;
  line-height: 200px;
  text-align: center;
  overflow: hidden;
}
.store-promoted-product .icon img {
  max-width: 100%;
  max-height: 100%;
}
.store-promoted-product ul.features {
  margin: 20px 0px;
  padding: 0px;
  list-style: none;
  font-size: 1.1em;
  font-weight: 300;
}
.store-promoted-product ul.features li {
  float: right;
  width: 50%;
  margin-bottom: 5px;
}
.store-promoted-product ul.features li .fa:not(.fa-spinner) {
  font-size: 1.2em;
  color: rgb(145, 197, 144);
  margin-right: 20px;
  margin-left: 10px;
}
.store-promoted-product .btn {
  margin-top: 10px;
  padding: 10px 30px;
  font-size: 1.2em;
  font-weight: 300;
}
.promo-container {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  margin-bottom: 10px;
  background-color: rgb(255, 255, 255);
}
.promo-container .header {
  padding: 20px;
}
.promo-container .header h3 {
  padding: 0px;
  margin: 0px !important;
}
.promo-banner {
  margin: 0px;
  padding: 15px 10px 20px;
  background-color: rgb(255, 255, 255);
  font-size: 1em;
  overflow: auto;
}
.promo-banner .content {
  margin-right: 185px;
}
@media (max-width: 767.98px) {
  .promo-banner .content {
    margin: 10px 0px 0px;
  }
}
.promo-banner .icon-right {
  text-align: center;
  width: 155px;
  float: right;
}
@media (max-width: 767.98px) {
  .promo-banner .icon-right {
    width: 90px;
    float: none;
  }
}
.promo-banner .icon-right img {
  max-width: 100%;
  max-height: 100%;
}
@media (max-width: 767.98px) {
  .promo-banner form {
    text-align: center;
  }
}
.promo-banner .icon {
  float: right;
  margin: 0px 20px 0px 0px;
}
.promo-banner h3 {
  margin: 0px;
  padding: 0px;
  font-size: 24px;
  font-weight: 300;
}
.promo-banner h4 {
  font-size: 18px;
  font-weight: 300;
}
.promo-banner p {
  margin: 5px 0px;
}
.promo-banner ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-size: 0.92em;
}
.promo-banner ul li {
  margin-bottom: 4px;
}
@media (min-width: 1200px) {
  .promo-banner ul li {
    width: 50%;
  }
  .promo-banner ul li.right {
    float: right;
  }
  .promo-banner ul li.left {
    float: left;
  }
}
.promo-banner .fa:not(.fa-spinner) {
  font-size: 1.2em;
  color: rgb(145, 197, 144);
  margin-right: 20px;
  margin-left: 10px;
}
.promo-banner a {
  color: rgb(255, 102, 0);
  text-decoration: none;
}
.promo-banner .btn {
  margin: 6px 0px 0px;
  padding: 8px 30px;
  background-color: rgb(255, 102, 0);
  border: 0px;
  color: rgb(255, 255, 255);
}
@media (max-width: 650px) {
  .promo-banner .icon {
    width: 100%;
    margin-bottom: 15px;
  }
}
.promo-banner-rounded {
  border-radius: 4px;
}
.promo-banner-slim {
  padding: 10px;
}
.promo-banner-slim .icon-right {
  width: 85px;
}
.promo-banner-slim .content {
  margin-right: 110px;
}
.promo-banner-slim h3 {
  font-size: 18px;
}
.promo-banner-slim h4 {
  font-size: 14px;
}
.promo-banner-slim .btn {
  margin: 0px 20px 0px 0px;
  padding: 6px 20px;
}
.promo-banner.symantec {
  border-top: 3px solid rgb(77, 162, 76);
}
.promo-banner.symantec .btn {
  background-color: rgb(77, 162, 76);
}
.promo-banner.weebly {
  border-top: 3px solid rgb(41, 144, 234);
}
.promo-banner.weebly .btn {
  background-color: rgb(41, 144, 234);
}
.promo-banner.spamexperts {
  border-top: 3px solid rgb(88, 158, 215);
}
.promo-banner.spamexperts .btn {
  background-color: rgb(88, 158, 215);
}
.promo-banner-slim.weebly .icon-right {
  width: 160px;
}
.promo-banner-slim.weebly .content {
  margin-right: 185px;
}
.promo-banner.sitelock {
  border-top: 3px solid rgb(242, 149, 45);
}
.promo-banner.sitelock .btn {
  background-color: rgb(242, 149, 45);
}
.promo-banner.codeguard {
  border-top: 3px solid rgb(169, 204, 95);
}
.promo-banner.codeguard a {
  color: rgb(169, 204, 95);
}
.promo-banner.codeguard .btn {
  background-color: rgb(169, 204, 95);
}
.promo-banner.sitelockvpn {
  border-top: 3px solid rgb(85, 85, 85);
}
.promo-banner.sitelockvpn .btn {
  background-color: rgb(85, 85, 85);
}
.promo-banner.nordvpn {
  border-top: 3px solid rgb(70, 135, 255);
}
.promo-banner.nordvpn .btn {
  background-color: rgb(70, 135, 255);
}
.promo-banner.marketgoo {
  border-top: 3px solid rgb(48, 144, 224);
}
.promo-banner.marketgoo .btn {
  background-color: rgb(48, 144, 224);
}
.promo-banner.ox {
  border-top: 3px solid rgb(102, 102, 102);
}
.promo-banner.ox a {
  color: rgb(102, 102, 102);
}
.promo-banner.ox .btn {
  background-color: rgb(102, 102, 102);
}
.promo-banner.sitebuilder {
  border-top: 3px solid rgb(255, 51, 119);
}
.promo-banner.sitebuilder a {
  color: rgb(255, 51, 119);
}
.promo-banner.sitebuilder .btn {
  background-color: rgb(255, 51, 119);
}
.promo-banner.xovinow {
  border-top: 3px solid rgb(16, 6, 159);
}
.promo-banner.xovinow a {
  color: rgb(16, 6, 159);
}
.promo-banner.xovinow .btn {
  background-color: rgb(16, 6, 159);
}
.promo-banner.threesixtymonitoring {
  border-top: 3px solid rgb(206, 59, 86);
}
.promo-banner.threesixtymonitoring .btn {
  background-color: rgb(206, 59, 86);
}
.promo-banner.threesixtymonitoring a {
  color: rgb(206, 59, 86);
}
.mc-panel-promo {
  font-size: 0.95em;
}
.mc-panel-promo img {
  display: block;
  margin: 0px auto 6px;
  max-width: 90%;
  max-height: 87px;
}
.panel-mc-sso {
  padding: 0px 10px 10px;
}
.panel-mc-sso img {
  max-width: 100%;
  max-height: 120px;
}
.panel-mc-sso .row {
  margin-right: -5px;
  margin-left: -5px;
}
.panel-mc-sso .col-sm-6 {
  padding-right: 5px;
  padding-left: 5px;
}
.panel-mc-sso .btn,
.panel-mc-sso .form-control,
.panel-mc-sso small {
  margin-top: 5px;
}
.panel-mc-sso small {
  display: block;
}
.client-home-cards div[menuitemname="ThreesixtymonitoringLogin"] {
  border-top: 3px solid rgb(206, 59, 86);
}
.client-home-cards div[menuitemname="ThreesixtymonitoringLogin"] .card-body,
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .mc-promo-login
  .content,
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .mc-promo-manage
  .content,
.mc-promo-login
  .client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .content,
.mc-promo-manage
  .client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .content {
  max-height: initial;
}
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-metrics-row
  > div:not(:last-child) {
  border-left: 1px solid rgb(204, 204, 204);
}
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-metric {
  margin-top: 20px;
  font-size: 40px;
  line-height: 1;
  color: rgb(144, 42, 109);
}
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-title {
  font-weight: 700;
  color: rgb(136, 136, 136);
  text-transform: uppercase;
  font-size: 12px;
}
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-highlight {
  margin-top: 4px;
  height: 2px;
  border-radius: 2px;
  background-color: rgb(144, 42, 109);
}
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-highlight-alerts,
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-highlight-monitors,
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-highlight-servers {
  margin-top: 4px;
  height: 2px;
  border-radius: 2px;
}
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-highlight-servers {
  background-color: rgb(144, 42, 109);
}
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-highlight-monitors {
  background-color: rgb(175, 51, 98);
}
.client-home-cards
  div[menuitemname="ThreesixtymonitoringLogin"]
  .threesixtymonitoring-highlight-alerts {
  background-color: rgb(206, 59, 86);
}
.client-home-cards div[menuitemname="ThreesixtymonitoringLogin"] form,
.client-home-cards div[menuitemname="ThreesixtymonitoringLogin"] small {
  text-align: center;
}
.client-home-cards div[menuitemname="ThreesixtymonitoringLogin"] .btn {
  width: 100%;
}
.social-signin-btns {
  text-align: center;
}
.social-signin-btns .btn {
  margin-bottom: 5px;
}
.btn-social {
  position: relative;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-social i.far,
.btn-social i.fas {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  padding-left: 2px;
  width: 32px;
  line-height: 34px;
  font-size: 1.6em;
  text-align: center;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-facebook {
  color: rgb(255, 255, 255);
  background-color: rgb(66, 103, 178);
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook.active,
.btn-facebook:active,
.btn-facebook:focus,
.btn-facebook:hover,
.open .dropdown-toggle.btn-facebook {
  color: rgb(255, 255, 255);
  background-color: rgb(48, 72, 123);
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-facebook.active,
.btn-facebook:active,
.open .dropdown-toggle.btn-facebook {
  background-image: none;
}
.btn-facebook.disabled,
.btn-facebook.disabled.active,
.btn-facebook.disabled:active,
.btn-facebook.disabled:focus,
.btn-facebook.disabled:hover,
.btn-facebook[disabled],
.btn-facebook[disabled].active,
.btn-facebook[disabled]:active,
.btn-facebook[disabled]:focus,
.btn-facebook[disabled]:hover,
fieldset[disabled] .btn-facebook,
fieldset[disabled] .btn-facebook.active,
fieldset[disabled] .btn-facebook:active,
fieldset[disabled] .btn-facebook:focus,
fieldset[disabled] .btn-facebook:hover {
  background-color: rgb(66, 103, 178);
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter {
  color: rgb(255, 255, 255);
  background-color: rgb(43, 169, 225);
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter.active,
.btn-twitter:active,
.btn-twitter:focus,
.btn-twitter:hover,
.open .dropdown-toggle.btn-twitter {
  color: rgb(255, 255, 255);
  background-color: rgb(28, 146, 199);
  border-color: rgba(0, 0, 0, 0.2);
}
.btn-twitter.active,
.btn-twitter:active,
.open .dropdown-toggle.btn-twitter {
  background-image: none;
}
.btn-twitter.disabled,
.btn-twitter.disabled.active,
.btn-twitter.disabled:active,
.btn-twitter.disabled:focus,
.btn-twitter.disabled:hover,
.btn-twitter[disabled],
.btn-twitter[disabled].active,
.btn-twitter[disabled]:active,
.btn-twitter[disabled]:focus,
.btn-twitter[disabled]:hover,
fieldset[disabled] .btn-twitter,
fieldset[disabled] .btn-twitter.active,
fieldset[disabled] .btn-twitter:active,
fieldset[disabled] .btn-twitter:focus,
fieldset[disabled] .btn-twitter:hover {
  background-color: rgb(43, 169, 225);
  border-color: rgba(0, 0, 0, 0.2);
}
.providerPreLinking {
  min-height: 52px;
}
.providerLinkingFeedback {
  display: none;
}
div.home-twitter {
  margin-top: 20px;
  margin-bottom: 40px;
}
div.tweet > i {
  color: rgb(43, 171, 207);
  float: right;
  margin-left: 15px;
}
div.tweet span {
  font-size: 12px;
  color: rgb(204, 204, 204);
}
.upgrade .product-to-be-upgraded {
  margin: 20px 0px;
  padding: 15px;
  background-color: rgb(248, 248, 248);
}
.upgrade .product-to-be-upgraded h4,
.upgrade .product-to-be-upgraded h5 {
  margin: 0px;
}
.upgrade .products {
  margin-right: -5px;
  margin-left: -5px;
}
.upgrade .products .column {
  padding-right: 5px;
  padding-left: 5px;
}
.upgrade .products .product {
  margin: 20px 0px;
  padding: 0px;
  background-color: rgb(255, 255, 255);
}
.upgrade .products .product .current,
.upgrade .products .product .recommended {
  padding: 5px;
  background-color: rgb(255, 188, 0);
  color: rgb(245, 245, 245);
  font-weight: 700;
  text-align: center;
}
.upgrade .products .product .recommended {
  background-color: rgb(37, 172, 47);
}
.upgrade .products .product ul {
  border-right: 1px solid rgb(238, 238, 238);
  border-left: 1px solid rgb(238, 238, 238);
}
.upgrade .products .product .footer {
  border-width: 0px 1px 1px;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-right-color: rgb(238, 238, 238);
  border-bottom-color: rgb(238, 238, 238);
  border-left-color: rgb(238, 238, 238);
  border-image: initial;
  border-top-style: initial;
  border-top-color: initial;
}
.upgrade .products .product .header {
  margin: 0px;
  padding: 20px;
  background-color: rgb(43, 85, 128);
  color: rgb(255, 255, 255);
  min-height: 150px;
}
.upgrade .products .product .header p {
  font-size: 1.1em;
  font-weight: 300;
}
.upgrade .products .product ul {
  margin: 0px;
  padding: 20px 25px;
  list-style: none;
}
.upgrade .products .product ul li {
  line-height: 25px;
  font-size: 0.9em;
  text-align: left;
  color: rgb(170, 170, 170);
  border-bottom: 1px solid rgb(238, 238, 238);
}
.upgrade .products .product ul li:last-child {
  border: 0px;
}
.upgrade .products .product ul li span {
  float: right;
  color: rgb(68, 68, 68);
}
.upgrade .products .far,
.upgrade .products .fas {
  font-size: 1.3em;
}
.upgrade .products .fa-check {
  color: rgb(35, 173, 46);
}
.upgrade .products .product .footer {
  margin: 0px;
  padding: 20px;
}
.upgrade .products .product .footer select {
  margin-bottom: 10px;
}
.upgrade .products .product .btn {
  background-color: rgb(43, 85, 128);
  color: rgb(255, 255, 255);
}
.affiliate-stat {
  margin: 0px;
  padding: 15px;
  font-size: 1.6em;
  text-align: center;
}
.affiliate-stat span {
  display: block;
  font-size: 2.4em;
}
.affiliate-stat i {
  float: right;
  padding: 10px;
  font-size: 4em;
}
@media (max-width: 1200px) {
  .affiliate-stat {
    font-size: 1.2em;
  }
  .affiliate-stat span {
    font-size: 2.1em;
  }
  .affiliate-stat i {
    font-size: 3.6em;
  }
}
@media (max-width: 992px) {
  .affiliate-stat {
    font-size: 1em;
  }
  .affiliate-stat span {
    font-size: 1.6em;
  }
  .affiliate-stat i {
    font-size: 3em;
  }
}
.announcements .announcement {
  margin-bottom: 4rem;
}
.announcements .announcement article {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: rgb(237, 246, 255);
  border-right: 7px solid rgb(51, 102, 153);
  border-radius: 15px 0px 0px 15px;
}
.announcements .announcement article p {
  margin: 0px;
}
.kb-category a {
  text-decoration: none;
}
.kb-category a:hover {
  background-color: rgb(245, 245, 245);
}
.kb-article-item:hover {
  background-color: rgb(245, 245, 245);
  text-decoration: none;
}
.kb-article-item small {
  display: block;
  padding-right: 25px;
  color: rgb(135, 147, 159);
}
.ticket-des {
  background-color: rgb(249, 251, 255);
  padding: 20px;
  border-radius: 15px;
  border: 0px;
}
.ticket-tit {
  color: rgb(15, 100, 209);
  padding: 10px 20px 20px;
  font-size: 17px;
}
.ticket-tit .fa {
  vertical-align: middle;
  padding: 10px;
  border-radius: 50%;
  color: rgb(15, 100, 209);
}
.ticket-subject.unread {
  font-weight: 700;
}
.ticket-reply .rating,
.ticket-reply .rating-done {
  float: left;
  padding: 5px 10px;
  unicode-bidi: bidi-override;
  direction: rtl;
  font-size: 24px;
}
.ticket-reply .rating span.star,
.ticket-reply .rating-done span.star {
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
}
.ticket-reply .rating-done .rated {
  display: inline-block;
  font-size: 12px;
}
.ticket-reply .rating span.star:hover {
  cursor: pointer;
}
.ticket-reply .rating span.star::before,
.ticket-reply .rating-done span.star::before {
  content: "";
  padding-left: 0px;
  color: rgb(153, 153, 153);
}
.ticket-reply .rating span.star:hover::before,
.ticket-reply .rating span.star:hover ~ span.star::before,
.ticket-reply .rating-done span.star.active::before {
  content: "";
  color: rgb(242, 222, 136);
}
.md-editor .btn-toolbar .btn-group {
  margin-left: 6px;
}
.mc-promo-login .view-ticket .content,
.mc-promo-manage .view-ticket .content,
.view-ticket .card-body,
.view-ticket .mc-promo-login .content,
.view-ticket .mc-promo-manage .content {
  padding: 0px;
  border-bottom: 1px solid rgb(221, 221, 221);
}
.mc-promo-login .view-ticket .content:last-child,
.mc-promo-manage .view-ticket .content:last-child,
.view-ticket .card-body:last-child,
.view-ticket .mc-promo-login .content:last-child,
.view-ticket .mc-promo-manage .content:last-child {
  border-bottom: 0px;
}
.view-ticket .posted-by {
  color: rgb(136, 136, 136);
  font-size: 0.9rem;
  background-color: rgb(246, 246, 246);
  padding: 0.5rem 1rem;
}
.view-ticket .posted-by .posted-by-name {
  font-weight: 700;
}
.view-ticket .requestor-badge {
  font-size: 85%;
  padding: 5px 10px;
}
.view-ticket .message p:last-child {
  margin-bottom: 0px;
}
.view-ticket .attachments {
  border-top: 1px dashed rgb(221, 221, 221);
  font-size: 80%;
}
.view-ticket .attachment-list {
  list-style: none;
  margin: 10px 0px -10px;
  padding: 0px;
}
.view-ticket .attachment-list li {
  display: inline-block;
  width: 190px;
  vertical-align: top;
}
.view-ticket .attachment-list li span {
  display: block;
  padding: 5px 5px 10px;
  margin-bottom: 10px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 3px;
}
.view-ticket .attachment-list li figure {
  margin: 0px 0px 5px;
  background-color: rgb(246, 246, 246);
  line-height: 100px;
  text-align: center;
  font-size: 4em;
}
.ticketfeedbackstaffcont {
  margin: 10px auto;
  padding: 15px;
  width: 90%;
  background-color: rgb(239, 239, 239);
  border-radius: 6px;
}
.ticketfeedbackrating {
  padding: 0px 100px;
}
.ticketfeedbackrating .rate {
  float: right;
  padding: 0px 10px;
  min-width: 30px;
  text-align: center;
}
@media (min-width: 380px) {
  .btn-input-padded-responsive {
    padding-right: 20px;
    padding-left: 20px;
  }
}
@media (min-width: 500px) {
  .btn-input-padded-responsive {
    padding-right: 35px;
    padding-left: 35px;
  }
}
.kb-search.margin-bottom {
  margin-bottom: 20px;
}
#registration {
  /* margin: 0px; */
  /* padding: 50px 10px 140px; */
  /* background-color: rgb(255, 255, 255); */
  /* box-shadow: var(--dash-shadow-soft); */
}
#registration .field-container {
  margin: 0px 0px 30px;
}
#registration label {
  font-weight: 300;
  color: rgb(102, 102, 102);
  font-size: 14px;
}
#registration .info-text-sm {
  font-size: 0.85em;
  text-align: center;
}
#registration .sub-heading {
  height: 0px;
  border-top: 1px solid rgb(221, 221, 221);
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
}
#registration .sub-heading span {
  display: inline-block;
  position: relative;
  padding: 0px 17px;
  top: -11px;
  font-size: 16px;
  color: rgb(0, 85, 136);
  background-color: rgb(255, 255, 255);
}
#registration .prepend-icon {
  top: 0px;
  right: 0px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 100%;
  font-weight: 400;
}

#registration .input-group-lg > .form-control {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33333;
  border-radius: 6px 0px 0px 6px;
}
#registration .form-control-qty {
  width: 70px;
  text-align: center;
}
#registration .form-control-static-inline {
  display: inline-block;
}
#registration .form-control:focus {
  border-color: rgb(221, 221, 221);
  outline: 0px;
  box-shadow: none;
}
#registration textarea.field {
  height: auto;
}
#registration .prepend-icon .field {
  appearance: none;
  padding-right: 40px;
}
#registration .prepend-icon .field-icon i {
  position: relative;
  font-size: 14px;
}
#registration .prepend-icon .field-icon {
  top: 0px;
  z-index: 4;
  width: 42px;
  height: 45px;
  color: inherit;
  line-height: 45px;
  position: absolute;
  text-align: center;
  transition: 0.5s ease-out;
  pointer-events: none;
}
#registration .field-icon i {
  color: rgb(51, 102, 153);
}
#registration .field[disabled],
#registration .field[readonly],
#registration .form-control[disabled],
#registration .form-control[readonly] {
  background-color: rgb(248, 248, 248);
  opacity: 1;
}
#registration .field-help-text {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: rgb(136, 136, 136);
  font-size: 12px;
}
div.credit-card {
  margin: 0px auto 30px;
  max-width: 400px;
  background-color: rgb(248, 248, 248);
  border: 1px solid rgb(204, 204, 204);
  border-radius: 8px;
}
div.credit-card div.card-type {
  float: left;
  padding: 10px 20px;
  font-size: 1.2em;
}
div.credit-card div.card-icon {
  float: right;
  padding: 7px;
  font-size: 1.2em;
}
div.credit-card div.card-number {
  padding: 10px;
  background-color: rgb(204, 204, 204);
  font-size: 1.6em;
  text-align: center;
  clear: both;
}
div.credit-card div.card-start {
  float: right;
  padding: 20px 0px 50px 50px;
  font-size: 1.3em;
  text-align: left;
}
div.credit-card div.card-expiry {
  float: left;
  padding: 20px 50px 50px 0px;
  height: 120px;
  font-size: 1.3em;
  text-align: left;
}
div.credit-card div.end {
  clear: both;
}
@media (max-width: 600px) {
  div.credit-card {
    max-width: 250px;
  }
  div.credit-card div.card-type {
    font-size: 1em;
  }
  div.credit-card div.card-icon {
    font-size: 1em;
  }
  div.credit-card div.card-number {
    padding: 6px 10px;
    font-size: 1.2em;
  }
  div.credit-card div.card-start {
    padding: 20px 0px 30px 50px;
    font-size: 0.9em;
  }
  div.credit-card div.card-expiry {
    padding: 20px 50px 30px 0px;
    height: 80px;
    font-size: 0.9em;
  }
}
.auth3d-area {
  border: 1px solid rgb(255, 255, 255);
}
.submit-3d {
  width: 80%;
  border: 1px solid rgb(255, 255, 255);
}
.invoice-summary-table {
  margin: 20px 0px;
  max-height: 300px;
  overflow: auto;
}
.invoice-summary-table td {
  font-size: 0.8em;
}
.invoice-summary-table td.total-row {
  background-color: rgb(239, 239, 239);
  font-weight: 700;
}
div.credit-card .logo-visa {
  color: rgb(26, 31, 113);
}
div.credit-card .logo-amex {
  color: rgb(67, 171, 223);
}
div.credit-card .logo-mastercard {
  color: rgb(237, 11, 0);
}
div.credit-card .logo-discover {
  color: rgb(0, 0, 0);
}
div.three-column-grid,
div.two-column-grid {
  display: inline-grid;
  grid-template-columns: repeat(3, auto) minmax(10em, 30em) auto;
  font-weight: 300;
  font-size: 13px;
}
div.two-column-grid {
  grid-template-columns: repeat(2, auto) minmax(10em, 30em) auto;
}
div.three-column-grid > div,
div.two-column-grid > div {
  margin: 5px 0px;
  padding-left: 5px;
}
div.three-column-grid > div > label,
div.two-column-grid > div > label {
  font-weight: 400;
}
#frmPayment .paymethod-info {
  margin: 5px 0px;
  cursor: pointer;
}
#frmPayment .paymethod-info label {
  font-weight: 400;
  cursor: pointer;
}
#payMethodList tr {
  font-size: smaller;
}
#payMethodList tr td:nth-child(2),
#payMethodList tr td:nth-child(3) {
  max-width: 15em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.iframe-input-container {
  height: 34px;
}
.cc-number-field {
  background-image: url("../../../assets/img/payment/unknown.png");
  background-repeat: no-repeat;
  background-position: left 10px center;
}
.cc-number-field.visa {
  background-image: url("../../../assets/img/payment/visa.png");
}
.cc-number-field.mastercard {
  background-image: url("../../../assets/img/payment/mastercard.png");
}
.cc-number-field.amex {
  background-image: url("../../../assets/img/payment/amex.png");
}
.cc-number-field.dinersclub {
  background-image: url("../../../assets/img/payment/dinersclub.png");
}
.cc-number-field.discover {
  background-image: url("../../../assets/img/payment/discover.png");
}
.cc-number-field.unionpay {
  background-image: url("../../../assets/img/payment/unionpay.png");
}
.cc-number-field.jcb {
  background-image: url("../../../assets/img/payment/jcb.png");
}
.cc-number-field.maestro {
  background-image: url("../../../assets/img/payment/maestro.png");
}
.cc-number-field.forbrugsforeningen {
  background-image: url("../../../assets/img/payment/forbrugsforeningen.png");
}
.cc-number-field.dankort {
  background-image: url("../../../assets/img/payment/dankort.png");
}
.cc-number-field.troy {
  background-image: url("../../../assets/img/payment/troy.png");
}
tr.masspay-invoice-detail td {
  font-size: 0.8em;
}
tr.masspay-total td {
  background-color: rgb(239, 239, 239);
  font-weight: 700;
}
div.product-details div.product-icon {
  margin: 0px;
  background-color: rgb(37, 49, 183);
  border-radius: 15px 15px 0px 0px;
  padding: 30px;
  line-height: 1em;
  font-size: 60px;
  color: rgb(255, 255, 255);
}
@media (max-width: 767.98px) {
  div.product-details div.product-icon {
    font-size: 30px;
  }
}
.product-status {
  padding: 0px;
  border-radius: 15px;
}
.product-status-pending {
  background-color: rgb(248, 148, 6);
}
.product-status-active {
  background-color: rgb(70, 165, 70);
}
.product-status-suspended {
  background-color: rgb(7, 104, 184);
}
.product-status-cancelled,
.product-status-terminated {
  background-color: rgb(102, 102, 102);
}
.product-status-fraud {
  background-color: rgb(0, 0, 0);
}
.product-status-text {
  padding: 5px;
  color: rgb(255, 255, 255);
  text-align: center;
  text-transform: uppercase;
}
.product-actions-wrapper > div:not(:last-child) {
  margin-bottom: 0.5rem;
}
div.product-details-tab-container {
  margin: 0px;
  padding: 20px;
  border-width: 0px 1px 1px;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-right-color: rgb(221, 221, 221);
  border-bottom-color: rgb(221, 221, 221);
  border-left-color: rgb(221, 221, 221);
  border-image: initial;
  border-top-style: initial;
  border-top-color: initial;
  background-color: rgb(255, 255, 255);
}
.module-client-area {
  padding: 15px 15px 0px;
}
.ssl-inactive {
  cursor: pointer;
}
#mc-promo-widgets {
  margin: 10px 0px;
}
@media (min-width: 1200px) {
  #mc-promo-widgets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1%;
  }
}
.mc-promo-login,
.mc-promo-manage {
  position: relative;
}
.mc-promo-login .logo,
.mc-promo-manage .logo {
  width: 130px;
  height: 130px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-left: 1em;
}
@media (max-width: 767.98px) {
  .mc-promo-login .logo,
  .mc-promo-manage .logo {
    width: 65px;
    height: 65px;
  }
}
.mc-promo-login .logo img,
.mc-promo-manage .logo img {
  max-width: 130px;
  max-height: 130px;
  display: block;
  margin: 0px -50% 0px auto;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}
@media (max-width: 767.98px) {
  .mc-promo-login .logo img,
  .mc-promo-manage .logo img {
    max-width: 65px;
    max-height: 65px;
  }
}
.mc-promo-login .logo + div,
.mc-promo-manage .logo + div {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
}
@media (max-width: 767.98px) {
  .mc-promo-login .panel-heading h3,
  .mc-promo-manage .panel-heading h3 {
    margin: 0px 0px 8px !important;
    font-size: 18px !important;
  }
}
.featured-tlds-container {
  margin: 35px 0px 15px;
}
.featured-tld {
  margin: 0px 0px 20px;
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 20px;
}
.featured-tld .img-container {
  padding: 20px 0px;
  height: 115px;
  line-height: 75px;
  overflow: hidden;
  text-align: center;
}
@media (max-width: 767px) {
  .featured-tld .img-container {
    height: 80px;
    line-height: 40px;
  }
}
.featured-tld .img-container img {
  max-width: 70%;
  max-height: 100%;
}
.featured-tld .price {
  padding: 5px;
  background-color: rgb(249, 249, 249);
  color: rgb(85, 85, 85);
  font-weight: 400;
  line-height: 28px;
  text-align: center;
  border-radius: 0px 0px 4px 4px;
}
.featured-tld .price.blog {
  background-color: rgb(160, 213, 203);
  color: rgb(255, 255, 255);
}
.featured-tld .price.club {
  background-color: rgb(5, 55, 150);
  color: rgb(255, 255, 255);
}
.featured-tld .price.com {
  background-color: rgb(58, 164, 218);
  color: rgb(255, 255, 255);
}
.featured-tld .price.couk {
  background-color: rgb(29, 55, 116);
  color: rgb(255, 255, 255);
}
.featured-tld .price.host {
  background-color: rgb(237, 77, 66);
  color: rgb(255, 255, 255);
}
.featured-tld .price.live {
  background-color: rgb(255, 158, 25);
  color: rgb(255, 255, 255);
}
.featured-tld .price.name {
  background-color: rgb(68, 176, 62);
  color: rgb(255, 255, 255);
}
.featured-tld .price.net {
  background-color: rgb(239, 192, 14);
  color: rgb(255, 255, 255);
}
.featured-tld .price.online {
  background-color: rgb(56, 206, 106);
  color: rgb(255, 255, 255);
}
.featured-tld .price.rocks {
  background-color: rgb(253, 86, 60);
  color: rgb(255, 255, 255);
}
.featured-tld .price.shop {
  background-color: rgb(255, 89, 0);
  color: rgb(255, 255, 255);
}
.featured-tld .price.social {
  background-color: rgb(255, 154, 0);
  color: rgb(255, 255, 255);
}
.featured-tld .price.store {
  background-color: rgb(14, 173, 179);
  color: rgb(255, 255, 255);
}
.featured-tld .price.tech {
  background-color: rgb(13, 176, 75);
  color: rgb(255, 255, 255);
}
.featured-tld .price.tv {
  background-color: rgb(234, 52, 56);
  color: rgb(255, 255, 255);
}
.featured-tld .price.website {
  background-color: rgb(45, 185, 234);
  color: rgb(255, 255, 255);
}
.tld-filters {
  margin: 0px 0px 25px;
}
.tld-filters a {
  display: inline-block;
  margin-bottom: 4px;
  padding: 5px 6px;
  font-size: 90%;
  font-weight: 400;
  border-radius: 2px;
}
.domain-pricing .tld-row {
  padding-top: 3px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgb(245, 245, 245);
}
.domain-pricing .tld-row.highlighted {
  background: rgb(243, 249, 253);
}
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-2 {
  height: 56px;
}
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-sm-4,
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-xs-4 {
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom: 6px solid rgb(151, 181, 210);
  background-color: rgb(239, 239, 239);
  border-radius: 4px 4px 0px 0px;
}
.domain-pricing .no-bg {
  background-color: transparent !important;
}
.domain-pricing .tld-pricing-header div:nth-child(2n + 1) {
  border-color: rgb(51, 102, 153);
  background-color: rgb(245, 245, 245);
}
.domain-pricing .two-row-center {
  line-height: 28px;
  margin-top: 6px;
  margin-bottom: 6px;
}
@media (min-width: 768px) {
  .domain-pricing .two-row-center {
    border-left: 2px solid rgb(199, 215, 230);
  }
}
.domain-pricing .tld-row.no-tlds {
  display: none;
}
.tld-sale-group {
  padding: 1px 3px;
  color: rgb(255, 255, 255);
  font-size: 10px;
  text-transform: uppercase;
}
.tld-sale-group-hot {
  background-color: rgb(249, 97, 90);
}
.tld-sale-group-sale {
  background-color: rgb(247, 212, 88);
}
.tld-sale-group-new {
  background-color: rgb(42, 213, 136);
}
.dataTables_wrapper table.table-list {
  border-radius: 4px;
  border: 1px solid rgb(221, 221, 221);
  margin: 10px 0px !important;
  width: 100% !important;
}
.dataTables_wrapper table.table-list thead th:first-child {
  border-radius: 4px 0px 0px;
}
.dataTables_wrapper table.table-list tr:last-child td:first-child {
  border-radius: 0px 0px 0px 4px;
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
}
.dataTables_wrapper .dataTables_filter {
  float: left;
}
@media (max-width: 600px) {
  .dataTables_wrapper .dataTables_info {
    padding: 9px 10px 40px;
  }
  .dataTables_wrapper .dataTables_filter {
    float: left;
    margin-top: 30px;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter label {
    display: block;
    margin: 5px;
    padding: 0px;
  }
  .dataTables_wrapper .dataTables_filter label .form-control {
    margin: 0px;
    width: 100%;
  }
}
.dataTables_wrapper .dataTables_paginate {
  float: left;
}
.pagination > li > a,
.pagination > li > span {
  color: rgb(68, 68, 68);
}
.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: rgb(79, 83, 96);
  border-color: rgb(79, 83, 96);
}
table.table-list thead th {
  background-color: rgb(255, 255, 255);
  color: rgb(51, 51, 51);
  text-align: right;
  line-height: 25px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: initial;
  font-family: var(--hp-font);
  font-size: 16px;
  padding: 0.75rem 1.4rem !important;
  border-bottom: 2px solid rgb(51, 51, 51) !important;
}
table.table-list tbody td {
  padding: 10px 8px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 35px;
}
table.table-list tbody td.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.table-list > tbody > tr > td a.border-right {
  padding-right: 20px;
  display: block;
}
.table-list > tbody > tr > td {
  background-color: rgb(255, 255, 255);
  border: 0.4rem solid rgb(255, 255, 255);
}
.table-list > tbody > tr:hover {
  cursor: pointer;
}
.table-list > tbody > tr:hover > td {
  background-color: rgb(249, 249, 249);
}
table.dtr-inline .dtr-title:empty {
  display: none !important;
}
table.table-solid-bottom-border-light-gray {
  border-bottom: 1px solid rgb(222, 226, 230);
}
.tiles .tile .title5 {
  color: rgb(214, 30, 208);
  float: right;
  font-size: 20px;
  text-align: center;
  width: 100%;
  word-break: break-all;
  padding: 28px 10px;
}
.tiles .tile .title6 {
  color: rgb(255, 102, 0);
  float: right;
  font-size: 20px;
  text-align: center;
  width: 100%;
  word-break: break-all;
  padding: 28px 10px;
}
.tiles .tile .title5 p {
  font-size: 15px;
  padding: 5px;
  color: rgb(117, 117, 117);
}
.tiles .tile .title6 p {
  font-size: 15px;
  padding: 5px;
  color: rgb(117, 117, 117);
}
.card-title.m-0 {
  font-size: 17px !important;
  color: rgb(15, 100, 209);
}
.home-domain-search.bg-white {
  color: rgb(255, 255, 255);
  height: 450px;
  padding: 80px 0px;
  background-color: rgb(51, 102, 153) !important;
}
.input-group-append.d-none.d-sm-block {
  padding: 5px;
}

.widget-box {
  border-radius: 0.3125rem;
  background-color: rgb(255, 255, 255);
  padding: 3.5rem 1.9rem;
  margin-bottom: 2rem;
}
@media (max-width: 992px) {
  .widget-box {
    padding: 0.625rem 0px 0.3125rem;
  }
}
.widget-box .row {
  display: flex;
  justify-content: center;
}
@media (max-width: 1200px) {
  .widget-box .row {
    display: inline-block;
  }
}
.widget-box-item {
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 0px 1.5rem;
}
@media (max-width: 1200px) {
  .widget-box-item {
    width: 50%;
    float: right;
  }
}
@media (max-width: 768px) {
  .widget-box-item {
    width: 100%;
    float: none;
    margin-bottom: 2rem;
  }
  .widget-box-item:last-child {
    margin-bottom: 0px;
  }
}
.widget-box-item.pr_40 {
  padding-right: 2.5rem;
}
@media (max-width: 1440px) {
  .widget-box-item.pr_40 {
    padding-right: 1.5rem;
  }
}
.widget-box-item .bg-icon {
  width: 4.0625rem;
  height: 4.0625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.3125rem;
  font-size: 40px;
  color: rgb(15, 100, 209);
  font-weight: 300;
}
.widget-box-item-content {
  padding-right: 1rem;
}
.widget-box-item-content a {
  text-decoration: none;
}
.widget-box-item-content h5 {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.03375rem;
  color: rgb(15, 100, 209);
  margin-bottom: 0px;
}
.widget-box-item-content div {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 2;
  color: rgb(54, 65, 99);
}
.widget-box-item-content div span:first-child {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.0675rem;
  color: rgb(116, 203, 11);
}
.widget-box-item-content div span:nth-child(3) {
  padding-right: 1.75rem;
  font-feature-settings: "ss02";
}
.widget-box-item-content-divider {
  background-color: rgb(233, 235, 239);
  width: 0.0625rem;
  height: 2rem;
  display: inline-block;
  position: absolute;
  margin-top: 0.5rem;
  margin-right: 0.6875rem;
}
.text-last-updated {
  color: rgb(43, 65, 161);
  display: none;
}
.client-home-cards .list-group .list-group-item {
  padding: 10px;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: initial;
  border-bottom: 1px dashed rgb(221, 221, 221) !important;
}
@media (min-width: 480px) {
  .navmin {
    display: none;
  }
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0px;
  overflow-wrap: break-word;
  background: rgb(255, 255, 255);
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 1px solid rgb(245, 245, 245);
}
.card:hover {
  transition: 0.5s;
  box-shadow: rgba(37, 51, 203, 0.08) 0px 0.25rem 1.5rem 0px;
  border-radius: 5px 5px 15px 15px;
}
.card:hover::before {
  transform: scaleX(1);
}
.card::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 5px;
  background: linear-gradient(135deg, rgb(116, 203, 11), rgb(15, 100, 209));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s;
  border-radius: 15px 15px 0px 0px;
}
#servicesPanel {
  display: none;
}
#ticketsPanel {
  display: none;
}
.widget-stat .media {
  padding: 0px;
  align-items: center;
}
.widget-stat .media > span {
  height: 85px;
  width: 85px;
  border-radius: 50px;
  padding: 10px 12px;
  font-size: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 1400px) {
  .widget-stat .media > span {
    height: 70px;
    width: 70px;
    min-width: 70px;
  }
}
.widget-stat .media .media-body p {
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  font-family: var(--hp-font);
}
@media only screen and (max-width: 1400px) {
  .widget-stat .media .media-body p {
    font-size: 14px;
  }
}
[data-theme-version="dark"] .widget-stat .media .media-body p {
  color: rgb(196, 201, 213);
}
.widget-stat .media .media-body small,
.widget-stat .media .media-body .small {
  font-size: 75%;
}
.widget-stat .media .media-body h3 {
  font-size: 30px;
  font-weight: 600;
  margin: 0px;
  line-height: 1.2;
}
.widget-stat .media .media-body h4 {
  font-size: 15px;
  display: inline-block;
  vertical-align: middle;
}
.widget-stat .media .media-body span {
  margin-left: 5px;
}
.widget-stat[class*="bg-"] .media > span {
  background-color: rgba(255, 255, 255, 0.25);
  color: rgb(255, 255, 255);
}
.widget-stat[class*="bg-"] .progress {
  background-color: rgba(255, 255, 255, 0.25) !important;
}
[direction="rtl"] .widget-stat .media .media-body span {
  margin-left: 0px;
  margin-right: 10px;
}
.dez-widget-1 .card {
  background: rgb(255, 231, 219);
}
.dez-widget-1 .card .card-body p {
  color: rgb(248, 117, 51);
}
.dez-widget-1 .icon {
  float: right;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 28px;
}
.bgl-primary {
  background: rgb(231, 243, 253);
  border-color: rgb(231, 243, 253);
}
[data-theme-version="dark"] .bgl-primary {
  background-color: rgba(100, 24, 195, 0.2);
  border-color: rgba(100, 24, 195, 0.2);
}
.bgl-secondary {
  background: rgb(251, 233, 249);
  border-color: rgb(251, 233, 249);
}
[data-theme-version="dark"] .bgl-secondary {
  background-color: rgba(220, 60, 204, 0.5);
  border-color: rgba(220, 60, 204, 0.5);
}
.bgl-success {
  background: rgb(231, 250, 236);
  border-color: rgb(231, 250, 236);
}
[data-theme-version="dark"] .bgl-success {
  background-color: rgba(43, 193, 85, 0.1);
  border-color: rgba(43, 193, 85, 0.1);
}
.bgl-warning {
  background: rgb(253, 244, 229);
  border-color: rgb(253, 244, 229);
}
[data-theme-version="dark"] .bgl-warning {
  background-color: rgba(255, 171, 45, 0.1);
  border-color: rgba(255, 171, 45, 0.1);
}
.bgl-danger {
  background: rgb(255, 240, 240);
  border-color: rgb(255, 240, 240);
}
[data-theme-version="dark"] .bgl-danger {
  background-color: rgba(255, 46, 46, 0.15);
  border-color: rgba(255, 46, 46, 0.15);
}
.bgl-info {
  background: rgb(244, 250, 253);
  border-color: rgb(244, 250, 253);
}
[data-theme-version="dark"] .bgl-info {
  background-color: rgba(43, 152, 214, 0.1);
  border-color: rgba(43, 152, 214, 0.1);
}
.bg-primary-light {
  background: rgba(235, 223, 251, 0.5);
}
[data-theme-version="dark"] .bg-primary-light {
  background-color: rgba(100, 24, 195, 0.05);
}
.bg-secondary-light {
  background: rgba(251, 233, 249, 0.5);
}
[data-theme-version="dark"] .bg-secondary-light {
  background-color: rgba(220, 60, 204, 0.05);
}
.bg-success-light {
  background: rgba(231, 250, 236, 0.5);
}
[data-theme-version="dark"] .bg-success-light {
  background-color: rgba(43, 193, 85, 0.05);
}
.bg-warning-light {
  background: rgba(255, 249, 239, 0.5);
}
[data-theme-version="dark"] .bg-warning-light {
  background-color: rgba(255, 171, 45, 0.05);
}
.bg-danger-light {
  background: rgba(255, 240, 240, 0.5);
}
[data-theme-version="dark"] .bg-danger-light {
  background-color: rgba(255, 46, 46, 0.05);
}
.bg-info-light {
  background: rgba(244, 250, 253, 0.5);
}
[data-theme-version="dark"] .bg-info-light {
  background-color: rgba(43, 152, 214, 0.05);
}
.bgl-dark {
  background: rgb(238, 238, 238);
  border-color: rgb(238, 238, 238);
}
.bgl-light {
  background: rgb(244, 245, 249);
  border-color: rgb(244, 245, 249);
}
.progress {
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.65625rem;
  background-color: rgb(233, 236, 239);
  border-radius: 0.75rem;
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: rgb(255, 255, 255);
  text-align: center;
  white-space: nowrap;
  background-color: rgb(100, 24, 195);
  transition: width 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}
.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}
.progress-bar-animated {
  animation: 1s linear 0s infinite normal none running progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: auto ease 0s 1 normal none running none;
  }
}
.dataTables_wrapper table.table-list {
  border: 0px;
  min-width: 800px;
  margin: 30px 0px !important;
  width: 100% !important;
  border-radius: 15px !important;
}
.dataTables_wrapper table.table-list thead th {
  font-weight: 600;
}
.dataTables_wrapper table.table-list thead th:first-child {
  border-radius: 0px;
}
.dataTables_wrapper table.table-list tr:last-child td:first-child {
  border-radius: 0px;
}
.dataTables_wrapper .dataTables_filter {
  float: left;
}
.dataTables_wrapper .dataTables_filter label .form-control {
  padding: 10px 15px;
  height: auto;
  font-size: 14px;
  border-radius: 6px;
  background-color: rgb(250, 250, 250);
  border: 1px solid rgb(235, 235, 235);
}
@media (max-width: 600px) {
  .dataTables_wrapper .dataTables_info {
    padding: 9px 10px 40px;
  }
  .dataTables_wrapper .dataTables_filter {
    float: left;
    margin-top: 30px;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter label {
    display: block;
    margin: 5px;
    padding: 0px;
  }
  .dataTables_wrapper .dataTables_filter label .form-control {
    margin: 0px;
    width: 100%;
  }
}
.dataTables_wrapper .dataTables_paginate {
  float: left;
}
.pagination > li > a,
.pagination > li > span {
  color: rgb(68, 68, 68);
}
.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: rgb(0, 116, 255);
  border-color: rgb(0, 116, 255);
}
table.table-list tbody td {
  padding: 5px 20px;
  vertical-align: middle;
  font-size: 14px;
  line-height: 45px;
}
table.table-list tbody td.py-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.table-list > tbody > tr > td {
  background-color: rgb(250, 252, 255);
  transition: 0.5s;
  overflow: hidden;
  text-wrap-mode: nowrap;
}
.sidebar-menu-item-label {
  overflow: auto;
}
.table-list > tbody > tr:hover {
  cursor: pointer;
}
.table-list > tbody > tr:hover > td {
  background-color: rgb(239, 246, 255);
}
table.dtr-inline .dtr-title:empty {
  display: none !important;
}
table.table-solid-bottom-border-light-gray {
  border-bottom: 1px solid rgb(222, 226, 230);
}
.table-container.clearfix {
  padding: 45px 30px;
  background-color: rgb(255, 255, 255);
  border-radius: 10px;
}
.products .fas.fa-cart-plus {
  padding: 10px;
  border: 1px solid rgb(33, 150, 243);
  border-radius: 50%;
  color: rgb(255, 255, 255);
  background-color: rgb(33, 150, 243);
  float: left;
}
#order-standard_cart .products .product div.product-desc {
  float: right;
  width: 100%;
  padding: 20px !important;
  font-size: 15px !important;
  line-height: 30px !important;
  text-align: right !important;
}
#order-standard_cart .products .product header {
  border-bottom: 1px solid rgb(239, 239, 239);
  text-align: center;
  position: relative !important;
  padding: 20px !important;
  background: rgb(255, 255, 255) !important;
  color: rgb(80, 80, 80) !important;
  margin: 0px !important;
}
.table-container.clearfix {
  padding: 25px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  min-height: 450px;
  margin-bottom: 15px;
  transition: 0.5s;
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 1px solid rgb(245, 245, 245);
}
.table-container.clearfix:hover {
  transition: 0.5s;
  box-shadow: rgba(37, 51, 203, 0.08) 0px 0.25rem 1.5rem 0px;
  border-radius: 15px;
}
.ticket-replies .reply {
  margin: 60px 0px;
  position: relative;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  color: rgb(97, 97, 97);
  font-size: 13px;
  min-height: 160px;
  padding: 15px;
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 1px solid rgb(255, 243, 245);
  transition: 0.5s;
}
.ticket-replies .reply:hover {
  box-shadow: rgb(230, 240, 251) 0px 20px 50px;
  border-radius: 15px;
  transition: 0.5s;
}
.ticket-replies .replies-admin {
  direction: ltr;
  border: 1px solid rgb(239, 246, 255);
}
.ticket-replies .replies-user-info {
  display: inline-block;
  padding: 15px 10px;
  text-align: center;
  vertical-align: top;
  width: 200px;
  border-radius: 15px;
  margin-top: -50px;
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 1px solid rgb(245, 245, 245);
  background-color: rgb(239, 246, 255);
}
.ticket-replies .replies-client .replies-user-info {
  background-color: rgb(255, 243, 245);
}
.ticket-replies .replies-user-info .replies-user-image {
  border-radius: 50%;
  max-width: 100%;
  margin: 10px;
  width: 100px;
  border: 3px solid rgb(221, 221, 221);
}
.ticket-replies .replies-user-info > span {
  display: block;
}
.ticket-replies .replies-user-info .replies-user-title {
  color: rgb(97, 97, 97);
  font-size: 14px;
  padding: 11px;
  line-height: 14px;
  margin-bottom: 0px;
  text-align: center;
  width: 100%;
}
.ticket-replies .replies-user-info .replies-user-title span {
  display: inline-block;
  font-size: 13px;
  height: 23px;
  line-height: 26px;
  overflow: hidden;
  width: calc(100% - 41px);
}
.ticket-replies .replies-user-info .replies-user-title i {
  display: inline-block;
  height: 24px;
  line-height: 20px;
  margin: 0px;
  text-align: center;
  vertical-align: text-bottom;
  width: 25px;
}
.ticket-replies .replies-user-info .replies-user-type {
  border-radius: 6px;
  height: 35px;
  margin: 0px;
  text-align: center;
  min-width: 100px;
}
.ticket-replies .replies-admin .replies-user-info .replies-user-type {
  background: rgb(15, 100, 209);
}
.ticket-replies .replies-client .replies-user-info .replies-user-type {
  background: rgb(249, 49, 84);
  border: 2px solid rgb(249, 49, 84);
}
.ticket-replies .replies-user-info .replies-user-type span {
  color: rgb(255, 255, 255);
  display: inline-block;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  overflow: hidden;
  text-align: center;
  vertical-align: top;
  width: calc(100% - 30px);
}
.ticket-replies .replies-user-info .replies-user-type i {
  border-radius: 5px;
  color: rgb(255, 255, 255);
  display: inline-block;
  font-size: 15px;
  height: 25px;
  line-height: 25px;
  margin: 0px;
  text-align: center;
  vertical-align: top;
  width: 24px;
  font-weight: 900 !important;
}
.ticket-replies .replies-info {
  display: inline-block;
  vertical-align: top;
  width: calc(89% - 100px);
}
.ticket-replies .replies-date-attachment {
  position: absolute;
  bottom: -1px;
  z-index: 1;
}
.ticket-replies .replies-admin .replies-date-attachment {
  direction: ltr;
  right: -1px;
  margin-top: 9px;
}
.ticket-replies .replies-client .replies-date-attachment {
  left: -1px;
}
.ticket-replies .replies-date {
  display: inline-block;
  direction: ltr;
  overflow: hidden;
  font-size: 14px;
  padding: 15px 0px 0px;
  color: rgb(15, 100, 209);
}
.ticket-replies .replies-admin .replies-date {
  border-radius: 10px;
}
.ticket-replies .replies-client .replies-date {
  border-radius: 10px;
  overflow: hidden;
  font-size: 14px;
  padding: 15px 0px 0px;
  color: rgb(249, 49, 84);
}
.ticket-replies .replies-attahcments {
  display: inline-block;
  color: rgb(255, 255, 255);
  font-size: 12px;
  height: 26px;
  line-height: 26px;
  padding: 0px 5px;
  vertical-align: top;
}
.ticket-replies .replies-admin .attachemets-list + .replies-date {
  border-radius: 0px 0px 10px;
}
.ticket-replies .replies-client .attachemets-list + .replies-date {
  border-radius: 5px 0px 0px 5px;
}
.replies-attahcments + .attachemets-list {
  display: none;
}
.ticket-replies .replies-admin .replies-attahcments {
  background: rgb(63, 81, 181);
  border-radius: 5px 0px 0px;
  margin-right: 0px;
}
.ticket-replies .replies-client .replies-attahcments {
  background: rgb(116, 203, 11);
  border-radius: 0px 5px 5px 0px;
  margin-left: -4px;
}
.ticket-replies .replies-date i,
.ticket-replies .replies-date span {
  display: inline-block;
  direction: ltr;
  vertical-align: revert;
}
.ticket-replies .replies-date i {
  font-size: 11px;
  position: relative;
  top: 2px;
}
.ticket-replies .replies-content {
  border-radius: 3px;
  color: rgb(97, 97, 97);
  font-size: 15px;
  min-height: 160px;
  padding: 5px 10px;
  position: relative;
  direction: rtl;
  overflow: auto;
}
.ticket-replies .replies-rank {
  padding-top: 15px;
}
.ticket-replies .rating span.star {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: 0.2s ease-in-out;
}
.ticket-replies .rating span.star:hover,
.ticket-replies .rating span.star:hover ~ span.star,
.ticket-replies .rating-done span.star.active {
  color: rgb(255, 193, 7);
}
@media (max-width: 576px) {
  .ticket-replies .replies-info {
    width: 100%;
  }
  .ticket-replies .replies-user-info {
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 15px;
    width: 100%;
  }
  .ticket-replies .replies-client .replies-user-info {
    text-align: center;
    border-radius: 15px;
    padding-bottom: 10px;
    margin-top: -50px;
    box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
    border: 1px solid rgb(245, 245, 245);
    background-color: rgb(255, 243, 245);
  }
  .ticket-replies .replies-user-info .replies-user-type {
    height: 20px;
  }
  .ticket-replies .replies-user-info .replies-user-type span {
    height: 28px;
    line-height: 28px;
    vertical-align: top;
  }
  .ticket-replies .replies-user-info .replies-user-type i {
    height: 16px;
    line-height: 20px;
    font-size: 10px;
    width: 16px;
  }
  .ticket-replies .replies-client .replies-content::before {
    border: 8px solid rgb(247, 247, 247);
    border-radius: 0px 20px 0px 0px;
    inset: auto 4px calc(100% + 1px) auto;
    display: none;
  }
  .ticket-replies .replies-client .replies-content::after {
    border: 9px solid rgb(255, 255, 255);
    border-radius: 0px 30px 0px 0px;
    inset: auto 13px calc(100% + 1px) auto;
    display: none;
  }
  .ticket-replies .replies-client .replies-user-info .replies-user-image {
    float: right;
    margin-top: 8px;
    width: 65px;
  }
  .ticket-replies .replies-client .replies-user-info .replies-user-title {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    vertical-align: top;
    width: 100%;
  }
  .ticket-replies .replies-client .replies-user-info .replies-user-type {
    border-width: 1px 2px 1px 1px;
    border-style: solid;
    border-color: rgb(229, 57, 53);
    border-image: initial;
    display: inline-block;
    float: right;
    margin: 10px;
    text-align: center;
    height: 30px;
    line-height: 35px;
    padding: 1px;
  }
  .ticket-replies .replies-admin .replies-content::before {
    border: 8px solid rgb(247, 247, 247);
    border-radius: 20px 0px 0px;
    bottom: calc(100% + 1px);
    display: none;
    left: 4px;
    top: auto;
  }
  .ticket-replies .replies-admin .replies-content::after {
    border: 9px solid rgb(255, 255, 255);
    border-radius: 30px 0px 0px;
    bottom: calc(100% + 1px);
    display: none;
    left: 13px;
    top: auto;
  }
  .ticket-replies .replies-admin .replies-user-info {
    text-align: center;
    border-radius: 15px;
    padding-bottom: 10px;
    margin-top: -50px;
    box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
    border: 1px solid rgb(245, 245, 245);
    background-color: rgb(239, 246, 255);
  }
  .ticket-replies .reply {
    margin: 60px 0px;
  }
  .ticket-replies .replies-admin .replies-user-info .replies-user-image {
    float: right;
    margin-top: 10px;
    width: 50px;
  }
  .ticket-replies .replies-admin .replies-user-info .replies-user-title {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    vertical-align: top;
    width: 100%;
  }
  .ticket-replies .replies-admin .replies-user-info .replies-user-type {
    display: inline-block;
    float: right;
    margin: 10px;
    text-align: center;
    height: 30px;
    line-height: 35px;
    padding: 1px;
  }
  .ticket-replies .replies-admin .replies-user-info .replies-rank {
    display: none;
  }
}
.ticket-info {
  padding-top: 30px;
}
.ticket-info-block {
  padding: 0px 0px 10px;
}
.ticket-info-block.btns {
  text-align: center;
}
.ticket-info-block .ticket-info-block-content {
  border-radius: 10px;
  padding: 20px 10px 15px;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.08) 1px 1px 7px;
}
.ticket-info-block .ticket-info-block-btn {
  border-radius: 3px;
  padding: 0px;
  position: relative;
}
.ticket-info-block .ticket-info-item {
  padding: 5px 10px;
}
.ticket-info-block .ticket-info-item .icon {
  background: rgb(238, 238, 238);
  border-radius: 50%;
  color: rgb(158, 158, 158);
  display: inline-block;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
  text-align: center;
  vertical-align: top;
  width: 30px;
}
.ticket-info-block .ticket-info-item .title {
  color: rgb(117, 117, 117);
  display: inline-block;
  font-size: 13px;
  height: 30px;
  line-height: 34px;
  vertical-align: top;
}
.ticket-info-block .ticket-info-item .value {
  color: rgb(117, 117, 117);
  display: inline-block;
  float: left;
  font-size: 13px;
  height: 30px;
  padding: 8px 0px;
  text-align: left;
  vertical-align: top;
  width: calc(95% - 135px);
}
.ticket-status {
  font-size: 11px;
  padding: 5px 10px;
  position: absolute;
  left: 16px;
  top: 4px;
  width: 110px;
  z-index: 1;
  display: none;
}
.ticket-status::before {
  border-width: 14px 14px 14px 16px;
  border-style: solid;
  border-top-color: initial;
  border-right-color: initial;
  border-bottom-color: initial;
  border-image: initial;
  border-left-color: transparent;
  bottom: 0px;
  content: "";
  position: absolute;
  right: -1px;
  top: 0px;
  display: none;
}
.ticket-status span {
  color: rgb(255, 255, 255);
  position: absolute;
  z-index: 1;
  padding: 5px 8px;
  background-color: rgb(61, 75, 180);
  border-radius: 3px;
}
.ticket-info-block .ticket-info-item .btn {
  color: rgb(255, 255, 255);
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 35px;
  min-width: 110px;
  padding: 6px 10px 0px 5px;
  text-align: right;
  vertical-align: top;
  width: 100%;
}
.ticket-info-block .ticket-info-item .btn i {
  display: inline-block;
  font-size: 13px;
  height: 20px;
  line-height: 20px;
  margin-left: 1px;
  text-align: center;
  vertical-align: top;
  width: 20px;
}
.ticket-info-block .ticket-info-item .btn span {
  display: inline-block;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  vertical-align: top;
}
.ticket-info-block .close-ticket {
  background: rgb(229, 57, 53);
}
.ticket-info-block .add-reply {
  background: rgb(0, 200, 83);
}
.ticket-info-block .replies-attahcments {
  background: rgb(255, 160, 0);
}
@media (max-width: 992px) {
  .ticket-info {
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
    margin: 30px 5px 15px;
    padding: 0px 0px 5px;
    background-color: rgb(255, 255, 255);
  }
  .ticket-info > div {
    position: static;
  }
  .ticket-info > div:nth-child(2) {
    border-bottom: 1px solid rgb(238, 238, 238);
    padding-bottom: 10px;
  }
  .ticket-info-block {
    padding: 0px;
  }
  .ticket-info-block.btns {
    padding-top: 5px;
  }
  .ticket-info-block.btns .ticket-info-item {
    display: inline-block;
    padding-left: 0px;
    padding-right: 0px;
    width: 32%;
  }
  .ticket-info-block.btns .ticket-info-item .btn {
    text-align: center;
    width: 100%;
  }
  .ticket-info-block .ticket-info-block-content {
    box-shadow: none;
    padding: 0px;
    position: static;
  }
}
@media (max-width: 567px) {
  .ticket-info > div:nth-child(2) {
    border-bottom: none;
    padding-bottom: 0px;
  }
  .ticket-info-block .ticket-info-item .value {
    display: block;
    padding-right: 55px;
    padding-top: 0px;
    text-align: left;
    width: 100%;
  }
  .ticket-info-block.btns .ticket-info-item,
  .ticket-info-block.btns .ticket-info-item .btn {
    text-align: center;
    width: 100%;
  }
  .container-login100 {
    width: 100%;
    max-width: 550px;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.97);
    border-radius: 0px;
  }
}
#Primary_Sidebar-Ticket_Information-Department {
  display: none;
}
#Primary_Sidebar-Ticket_Information-Date_Opened {
  display: none;
}
#Primary_Sidebar-Ticket_Information-Priority {
  display: none;
}
.btn.btn-success.btn-sm.btn-block {
  display: none;
}
.registers {
  background-image: url("../img/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  margin: auto 0px;
  width: 100%;
}
.logins {
  background-image: url("../img/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: inherit;
  margin: auto 0px;
  width: 100%;
}
.container-login100 {
  width: 100%;
  max-width: 800px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.container-login {
  width: 100%;
  max-width: 800px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.wrap-login100 {
  overflow: hidden;
  display: flex;
  align-items: stretch;
  flex-direction: row;
  direction: rtl;
}
.wrap-login100 .btn {
  border-radius: 6px;
}
.login100-more {
  width: calc(100% - 560px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  z-index: 1;
}
.login100-more::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.1);
}
.login100-form {
  min-height: 100vh;
  display: block;
  background-color: rgb(255, 255, 255);
  padding: 150px 80px;
  max-width: 800px;
  background-image: linear-gradient(
    344deg,
    rgb(255, 255, 255) calc(100% - 450px),
    rgb(247, 250, 255) 85px
  );
}
.Registr100-form {
  min-height: 100vh;
  display: block;
  background-color: rgb(255, 255, 255);
  padding: 60px;
  max-width: 800px;
  background-image: linear-gradient(
    344deg,
    rgb(255, 255, 255) calc(100% - 450px),
    rgb(247, 250, 255) 85px
  );
}
.login100-form-title {
  width: 100%;
  display: block;
  font-family: Poppins-Regular;
  font-size: 30px;
  color: rgb(51, 51, 51);
  line-height: 1.2;
  text-align: center;
}
.wrap-input100 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 100%;
  height: 80px;
  position: relative;
  border: 1px solid rgb(230, 230, 230);
  border-radius: 10px;
  margin-bottom: 10px;
}
.label-input100 {
  font-family: Montserrat-Regular;
  font-size: 18px;
  color: rgb(153, 153, 153);
  line-height: 1.2;
  display: block;
  position: absolute;
  pointer-events: none;
  width: 100%;
  padding-left: 24px;
  left: 0px;
  top: 30px;
  transition: 0.4s;
}
.input100 {
  display: block;
  width: 100%;
  background: 0px 0px;
  font-family: Montserrat-Regular;
  font-size: 18px;
  color: rgb(85, 85, 85);
  line-height: 1.2;
  padding: 0px 26px;
}
input.input100 {
  height: 100%;
  transition: 0.4s;
}
.focus-input100 {
  position: absolute;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  top: -1px;
  left: -1px;
  pointer-events: none;
  border: 1px solid rgb(102, 117, 223);
  border-radius: 10px;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s;
  transform: scaleX(1.1) scaleY(1.3);
}
.input100:focus + .focus-input100 {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.eff-focus-selection {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.input100:focus {
  height: 48px;
}
.input100:focus + .focus-input100 + .label-input100 {
  top: 14px;
  font-size: 13px;
}
.has-val {
  height: 48px !important;
}
.has-val + .focus-input100 + .label-input100 {
  top: 14px;
  font-size: 13px;
}
.input-checkbox100 {
  display: none;
}
.label-checkbox100 {
  font-family: Poppins-Regular;
  font-size: 13px;
  color: rgb(153, 153, 153);
  line-height: 1.4;
  display: block;
  position: relative;
  padding-left: 26px;
  cursor: pointer;
}
.label-checkbox100::before {
  content: "";
  font-family: FontAwesome;
  font-size: 13px;
  color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(102, 117, 223);
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.input-checkbox100:checked + .label-checkbox100::before {
  color: rgb(102, 117, 223);
}
.container-login100-form-btn {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.login100-form-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  background: rgb(102, 117, 223);
  font-family: Montserrat-Bold;
  font-size: 12px;
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.4s;
}
.login100-form-btn:hover {
  background: rgb(51, 51, 51);
}
@media (max-width: 768px) {
  .login100-form {
    width: 100%;
  }
  .login100-more {
    display: none;
  }
}
@media (max-width: 576px) {
  .login100-form {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 50px;
  }
}
li {
  line-height: 30px;
  list-style: none;
}
.product-desc li {
  border-bottom: 1px solid rgb(239, 239, 239);
  padding-bottom: 10px;
}
.product-desc ul {
  padding: 0px;
}
#btnTicketAttachmentsAdd {
  padding: 0px 15px;
  height: 38px;
  font-size: 14px;
}
.footer-block {
  background-color: rgb(1, 4, 31);
}
.footer-block-col {
  border-bottom: 0.0625rem solid rgb(57, 68, 101);
  padding: 4.375rem 0px 3.5625rem;
}
.footer-block-col-1st {
  display: flex;
  padding-right: 0px;
}
.footer-block-col-1st div {
  margin-right: 1rem;
}
.footer-block-col-1st div p:first-child {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.06rem;
  color: rgb(172, 179, 239);
}
.footer-block-col-1st div p:nth-child(2) {
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.01rem;
  color: rgb(205, 214, 243);
}
@media (max-width: 992px) {
  .footer-block-col-1st img {
    display: none;
  }
}
@media (max-width: 992px) {
  .footer-block-col-1st {
    text-align: center;
    display: inline-block;
  }
}
.footer-block-col-2nd {
  text-align: left;
  padding-left: 1rem;
}
.footer-block-col-2nd::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 5rem;
  background-color: rgb(163, 173, 192);
  opacity: 0.18;
  top: 0px;
  left: 0px;
}
@media (max-width: 992px) {
  .footer-block-col-2nd::after {
    display: none;
  }
}
.footer-block-col-2nd p:first-child {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.06rem;
  color: rgb(172, 179, 239);
  direction: ltr;
}
.footer-block-col-2nd p:nth-child(2) {
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.01rem;
  color: rgb(198, 205, 218);
}
@media (max-width: 992px) {
  .footer-block-col-2nd {
    text-align: center;
  }
}
.footer-block-col2nd {
  padding: 2.625rem 0px 5.0625rem;
}
.footer-block-col2nd p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.00875rem;
  color: rgb(198, 205, 218);
  display: flex;
}
.footer-block-col2nd p a {
  color: rgb(198, 205, 218);
  text-decoration: none;
  padding: 0px 0.1875rem;
}
.footer-block-col2nd p a.en-font {
  font-family: titillium;
}
@media (max-width: 992px) {
  .footer-block-col2nd p {
    text-align: center;
    justify-content: center;
  }
}
.footer-block-col2nd div:last-child p {
  text-align: left;
  justify-content: end;
}
@media (max-width: 992px) {
  .footer-block-col2nd div:last-child p {
    text-align: center;
    justify-content: center;
  }
}
.footer-block-col2nd-mobile p {
  justify-content: center !important;
}
.rounded {
}
.donut-chart-sale {
  position: relative;
  z-index: 1;
  & small {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    display: flex;
    align-items: center;
    top: 0px;
    justify-content: center;
    font-weight: 600;
    color: rgb(255, 255, 255);
    font-size: 40px;
  }
  & .circle {
    height: 91px;
    width: 91px;
    z-index: -1;
    content: "";
    position: absolute;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.donut-chart-sale2 {
  position: relative;
  z-index: 1;
  & small {
    font-size: 16px;
    position: absolute;
    width: 75%;
    height: 75%;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
    left: 50%;
    border-radius: 76px;
    display: flex;
    align-items: center;
    top: 50%;
    transform: translate(-50%, -50%);
    justify-content: center;
    font-weight: 600;
  }
}
.star-icons {
  & i {
    font-size: 22px;
    &:last-child {
    }
  }
}
.progress-bar {
  background-color: rgb(116, 203, 11) !important;
}
.progress-bar-primary {
}
.progress-bar-success {
}
.progress-bar-info {
}
.progress-bar-danger {
}
.progress-bar-warning {
}
.progress-bar-pink {
}
.progress {
  height: 5px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.13) 0px 0px 5px 0px inset;
  border-radius: 25px;
  margin-top: 10px;
}
.progress-vertical {
  display: inline-block;
  margin-bottom: 0px;
  margin-right: 2rem;
  min-height: 17rem;
  position: relative;
}
.progress-vertical-bottom {
  display: inline-block;
  margin-bottom: 0px;
  margin-right: 2rem;
  min-height: 17rem;
  position: relative;
  transform: rotate(180deg);
}
.progress-animated {
  animation-duration: 5s;
  animation-name: myanimation;
  transition: 5s;
}
@keyframes myanimation {
  0% {
    width: 0px;
  }
}
@keyframes myanimation {
  0% {
    width: 0px;
  }
}
.nav-pills {
  & .nav-link {
    padding: 0.75rem 1.25rem;
  }
}
.default-tab {
  & .nav-link {
    background: transparent;
    border-radius: 0px;
    font-weight: 500;
    & i {
      display: inline-block;
      transform: scale(1.5);
    }
    &:focus,
    &:hover,
    &.active {
      color: rgb(73, 80, 87);
      background-color: rgb(255, 255, 255);
      border-color: rgb(222, 226, 230) rgb(222, 226, 230) rgb(255, 255, 255)
        rgb(235, 238, 246);
    }
  }
}
.custom-tab-1 {
  & .nav-link {
    background: transparent;
    border-radius: 0px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    transition: 0.5s;
    font-size: 16px;
    font-family: var(--hp-font);
    & i {
      display: inline-block;
      transform: scale(1.5);
    }
    &:focus,
    &:hover,
    &.active {
      color: rgb(97, 97, 97);
      background-color: rgb(255, 255, 255);
      border-color: rgb(203, 222, 246);
      border-radius: 0px;
      border-width: 0px 0px 3px;
    }
  }
}
.sharp {
  min-width: 40px;
  padding: 7px;
  height: 40px;
  min-height: 40px;
}
.sharp.btn-xs {
  padding: 3px;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
}
.light {
  &.tp-btn {
    background-color: transparent;
  }
  &.btn-default {
    background: rgb(173, 182, 199);
  }
  &.btn-success {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-info {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-primary {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
      & svg {
        & path {
        }
      }
    }
  }
  &.btn-secondary {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-warning {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-danger {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-dark {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
}
.btn.tp-btn {
  background-color: transparent;
  border-color: transparent;
  &.btn-default {
    background: rgb(173, 182, 199);
  }
  &.btn-success {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-info {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-primary {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-secondary {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-warning {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-danger {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
  &.btn-light {
    & g [fill] {
    }
    &:hover {
      & g [fill] {
      }
    }
  }
  &.btn-dark {
    & g [fill] {
    }
    &:hover {
      color: rgb(255, 255, 255);
      & g [fill] {
      }
    }
  }
}
.btn.tp-btn-light {
  background-color: transparent;
  border-color: transparent;
  &.btn-success {
    & g [fill] {
    }
    &:hover {
      & g [fill] {
      }
    }
  }
  &.btn-info {
    & g [fill] {
    }
    &:hover {
      & g [fill] {
      }
    }
  }
  &.btn-primary {
    & g [fill] {
    }
    &:hover {
      & g [fill] {
      }
    }
  }
  &.btn-secondary {
    & g [fill] {
    }
    &:hover {
      & g [fill] {
      }
    }
  }
  &.btn-warning {
    & g [fill] {
    }
    &:hover {
      & g [fill] {
      }
    }
  }
  &.btn-danger {
    & g [fill] {
    }
    &:hover {
      & g [fill] {
      }
    }
  }
  &.btn-dark {
    & g [fill] {
    }
    &:hover {
      & [fill] {
      }
    }
  }
}
.shadow.btn-primary {
}
.shadow.btn-secondary {
}
.shadow.btn-warning {
}
.shadow.btn-danger {
}
.shadow.btn-info {
}
.shadow.btn-success {
}
.btn-square {
  border-radius: 0px;
}
.btn-rounded {
  border-radius: 30px !important;
}
.btn-icon-right {
  border-left: 1px solid white;
  display: inline-block;
  margin: -1rem -0.25rem -1rem 1rem;
  padding: 1rem 0px 1rem 1.25rem;
}
.btn-icon-left {
  background: rgb(255, 255, 255);
  border-radius: 10rem;
  display: inline-block;
  margin: -0.5rem 0.75rem -0.5rem -1.188rem;
  padding: 0.6rem 0.7rem 0.2rem;
  float: left;
}
[direction="rtl"] {
  & .btn-icon-left {
    margin: -0.5rem -1.5rem -0.5rem 1rem;
  }
  & .btn-icon-right {
    border-left: 0px solid white;
    display: inline-block;
    margin: -0.8rem 1rem -0.8rem 0px;
    padding: 0.4375rem 1rem 0.4375rem 0px;
    border-right: 1px solid white;
  }
}
.toggle-dropdown::after {
  margin-left: 0.755em;
}
.social-btn-icon {
  & .btn {
    min-width: 7.5rem;
    margin-bottom: 1.5rem;
  }
}
.social-icon {
  & .btn {
    padding: 0.7rem 1.4rem;
  }
}
.btn-circle {
  height: 5rem;
  width: 5rem;
  border-radius: 50% !important;
}
.btn-page {
  & .btn {
    min-width: 110px;
    margin-right: 4px;
    margin-bottom: 8px;
  }
}
.size-1 {
  font-size: 24px;
  padding: 0.68rem 0.75rem;
  min-width: 160px !important;
}
.size-2 {
  font-size: 20px;
  padding: 0.57rem 0.75rem;
  min-width: 130px !important;
}
.size-3 {
  font-size: 14px;
  padding: 0.536rem 0.75rem;
  min-width: 110px !important;
}
.size-4 {
  font-size: 14px;
  min-width: 100px !important;
}
.size-5 {
  font-size: 14px;
  min-width: 0px;
  padding: 0px 25px;
  height: 25px;
  color: rgb(133, 133, 133);
}
.size-6 {
  font-size: 13px;
  padding: 0.097rem 0.75rem;
  min-width: 80px !important;
}
.size-7 {
  font-size: 12px;
  padding: 0.001rem 0.75rem;
  min-width: 60px !important;
}
.btn-light {
  &:active,
  &:focus,
  &:hover {
  }
}
.btn-outline-primary {
  &:hover {
  }
}
.btn-outline-light {
}
.btn-outline-secondary {
}
.btn-outline-dark {
}
.btn-dark {
  &:active,
  &:focus,
  &:hover {
  }
}
.btn-group {
  &.btn-rounded {
    & .btn:first-child {
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
    }
    & .btn:last-child {
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
    }
  }
}
@media (max-width: 1200px) {
  header.header .toolbar {
    display: none;
  }
  header.header .btn {
    margin-left: -23px;
  }
  header.header .search {
    display: none;
  }
  .mr-auto,
  .mx-auto {
    margin-left: 0px !important;
  }
  .navlog a {
    font-size: 14px;
    display: block;
  }
  .listtable {
  overflow: auto;
  }
  .master-breadcrumb {
    z-index: 9999999;
  }
.btn-topcheck {
  position: fixed;
  left: 20px;
  bottom: 95px;
  z-index: 9999;
  padding: 9px;
  height: 55px;
  width: 55px;
  border: 4px solid #ffffff;
  color: #ffffff;
  font-size: 25px;
  background-color: #005397;
  box-shadow: rgb(205 217 231) 0 0 10px;
  transform: translateX(-100px);
}
.btn-topcheck2 {
  position: fixed;
  left: 20px;
  bottom: 155px;
  z-index: 9999;
  padding: 9px;
  height: 55px;
  width: 55px;
  border: 4px solid #ffffff;
  color: #ffffff;
  font-size: 25px;
  background-color: #005397;
  box-shadow: rgb(205 217 231) 0 0 10px;
  transform: translateX(-100px);
}
.btn-topcheck3 {
  position: fixed;
  left: 20px;
  bottom: 215px;
  z-index: 9999;
  padding: 9px;
  height: 55px;
  width: 55px;
  border: 4px solid #ffffff;
  color: #ffffff;
  font-size: 25px;
  background-color: #005397;
  box-shadow: rgb(205 217 231) 0 0 10px;
  transform: translateX(-100px);
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(0);
  }
}
.animate-slideInLeft {
  animation: slideInLeft 1.5s ease forwards;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}
.animate-bounce {
  animation: bounce 1.5s ease forwards;
}
  .tab-content tr {
    display: grid;
    text-align: right;
    border-radius: 0;
    background-color: #fafcff !important;
    border: 1px solid #ebf2fe;
    border-right: 5px solid #d5e4fd;
    padding: 15px;
    margin-bottom: 10px;
  }
  .tab-content td {
    padding: 2px !important;
    height: 30px;
    line-height: 20px !important;
    border: 0 !important;
  }
  .tab-content td span {
    padding: 0 5px !important;
    line-height: 20px !important;
    font-size: 12px;
    float: right;
  }
  .modal-content {
    box-shadow: rgb(230, 240, 251) 0px 0px 50px;
  }
  .md-editor > .md-header {
    display: none;
  }
  .md-editor .md-footer,
  .md-editor > .md-header {
    display: none;
  }
  .modal-footer {
    direction: ltr;
    border-top: 0px;
    padding: 0px;
  }
  .modal-content {
    border: 0px;
    border-radius: 0px;
  }
  .navbar-brand {
    right: 20px;
    position: absolute;
  }
  .navbar-nav .dropdown-menu .dropdown-item {
    padding: 5px 0px !important;
    font-size: 15px !important;
  }
  .dropdown-menu.show {
    width: 100%;
  }
  .dropdown-item {
    padding: 5px 15px !important;
    font-size: 15px !important;
  }
  #Primary_Navbar-Home {
    display: none !important;
  }
  #Secondary_Navbar-Account {
    color: rgb(43, 65, 161);
    font-size: 18px !important;
    margin-bottom: 0px !important;
  }
  .navlog {
    text-align: center;
    width: -webkit-fill-available;
    font-size: 18px;
  }
  .breadcrumb-item {
    display: none;
  }
  .nav-item.ml-1.d-xl-none {
    left: 30px;
    right: auto;
    position: absolute;
  }
  .nav-item2.ml-1.d-xl-none {
    left: 40px;
    right: auto;
    position: absolute;
    border-radius: 10px;
    padding: 7px 12px;
    line-height: 20px;
  }
  header.header .main-navbar-wrapper {
    padding: 0px !important;
  }
  section#main-body {
    padding: 0px;
  }
  .master-breadcrumb .breadcrumb {
    margin: 0px;
    padding: 0;
  }
  #Secondary_Navbar-Account .dropdown-menu.show {
    top: 8px !important;
  }
  .navbar.navbar-light {
    padding: 50px 20px;
    margin: 55px 0px 15px;
  }
  .calenders {
    float: none !important;
  }
  .widtet {
    margin: 10px 0px !important;
  }
  .bg-footer {
    padding-bottom: 80px !important;
  }
}
.widtet-ipad {
  display: none;
}
@media (max-width: 980px) {
  .widtet-w {
    display: none;
  }
  .widtet-m {
    display: block !important;
  }
  .widtet-i {
    display: none;
  }
}
@media (min-width: 480px) {
  .navmin {
    display: none;
  }
}
@media (max-width: 1200px) {
  .widtet-i {
    display: none;
  }
  .widtet-ipad {
    display: block !important;
  }
  .login-fix {
    margin: 0px;
    height: 100%;
    border-radius: 0px;
  }
  .d-block {
    padding: 0px;
    border-bottom: 0px;
    line-height: 40px;
    display: block !important;
  }
  .mr-auto,
  .mx-auto {
    margin-left: 0px !important;
  }
  .navbar-nav .dropdown-menu {
    box-shadow: none;
    border-width: 0px 3px 0px 0px;
    border-top-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-top-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-image: initial;
    background-color: rgb(247, 250, 255);
    border-right-style: solid;
    border-right-color: rgb(139, 177, 213);
    border-radius: 0px;
    color: rgb(255, 255, 255);
    width: 100%;
  }
  header.header .navbar-nav a {
    width: 100%;
    margin: 0;
    display: block;
    background-color: transparent;
    border-bottom: 2px dotted rgb(231, 240, 255);
    color: rgb(56, 55, 55) !important;
    font-size: 17px;
  }
  .navbar-nav .dropdown-toggle::after {
    float: left;
    margin-top: 15px;
  }
  .navbar-nav .fa {
    margin-left: 15px;
    color: rgb(82, 147, 204);
    vertical-align: middle;
  }
  header.header .main-navbar-wrapper .navbar-collapse {
    padding: 60px 1rem;
    background-color: rgb(255, 255, 255);
    right: 0px;
    position: fixed;
    z-index: 999999;
    width: 100%;
    top: 0px;
    font-variant: titling-caps;
    margin-top: 0px;
    height: 100%;
    box-shadow: rgb(219 232 247) 0px 18px 30px;
  }
  ul.navbar-nav.ml-auto.w-auto {
    display: none;
  }
  .navbar-nav .dropdown-menu ::before {
    display: none;
  }
}
.navbar-nav-btn a {
  color: rgb(255, 255, 255) !important;
}
.navbar-nav-btn span {
  margin: -0.4rem 0.8rem -0.4rem -0.5rem;
  padding: 0.6rem 0.7rem 0.2rem;
}
.navbar-nav-btn .fa {
  margin-left: 0px;
  color: rgb(57, 192, 237);
}
.widtet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0px;
  overflow-wrap: break-word;
  background: linear-gradient(
      344deg,
      rgb(255, 255, 255) calc(100% - 150px),
      rgb(247, 250, 255) 85px
    )
    rgb(255, 255, 255);
  transition: 0.5s;
  border-radius: 15px;
  margin: 0px;
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 1px solid rgb(240, 245, 255) !important;
}
.widtet:hover {
  transform: translateY(-8px);
  box-shadow: rgb(230, 240, 251) 0px 20px 50px;
  border-color: var(--gradient-start);
  border-radius: 15px;
}
.widtet-icon.uptime {
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(52, 211, 153));
}
.widtet-icon.support {
  background: linear-gradient(135deg, rgb(139, 92, 246), rgb(167, 139, 250));
}
.widtet-icon.speed {
  background: linear-gradient(135deg, rgb(245, 158, 11), rgb(251, 191, 36));
}
.widtet-icon.security {
  background: linear-gradient(135deg, rgb(59, 130, 246), rgb(96, 165, 250));
}
.widtet-icon.backup {
  background: linear-gradient(135deg, rgb(236, 72, 153), rgb(244, 114, 182));
}
.widtet-icon.guarantee {
  background: linear-gradient(135deg, rgb(20, 184, 166), rgb(45, 212, 191));
}
.fa,
.fas {
  font-weight: 300 !important;
}
.widget-core {
  border-radius: 50%;
  width: 90px;
  height: 110px;
  margin: auto;
  line-height: 105px;
  transition: 0.5s;
  color: rgb(0, 83, 151);
  padding: 0px !important;
}
.icon-widget {
  color: rgb(255, 255, 255);
  font-size: 50px;
  line-height: 90px;
}
.widget-core .fad {
  line-height: 90px;
  font-size: 65px;
}
.navlog {
  margin-right: auto !important;
}
.pointer-events-none {
  pointer-events: none;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-8 {
  left: 2rem;
  right: 2rem;
}
.-left-16 {
  left: -4rem;
}
.-right-10 {
  left: -2.5rem;
}
.-right-16 {
  right: -4rem;
}
.-top-10 {
  top: -2.5rem;
}
.-top-4 {
  top: -1rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-10 {
  bottom: 2.5rem;
}
.left-1\/2 {
  left: 50%;
}
.right-8 {
  right: 2rem;
}
.top-0 {
  top: 0px;
}
.top-10 {
  top: 2.5rem;
}
.top-6 {
  top: 1.5rem;
}
.top-8 {
  top: 2rem;
}
.-z-10 {
  z-index: -10;
}
.z-10 {
  z-index: 10;
}
.z-40 {
  z-index: 40;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
  direction: rtl;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-4 {
  margin-left: 1rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-32 {
  height: 8rem;
}
.h-5 {
  height: 1.25rem;
}
.h-52 {
  height: 13rem;
}
.h-6 {
  height: 1.5rem;
}
.h-60 {
  height: 15rem;
}
.h-64 {
  height: 16rem;
}
.h-full {
  height: 100%;
}
.min-h-\[60vh\] {
  min-height: 60vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-32 {
  width: 8rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-\[32rem\] {
  width: 32rem;
}
.w-\[36rem\] {
  width: 36rem;
}
.w-full {
  width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-3 {
  --tw-rotate: -3deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-6 {
  --tw-rotate: 6deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: 1s linear 0s infinite normal none running spin;
}
.cursor-pointer {
  cursor: pointer;
}
.list-inside {
  list-style-position: inside;
}
.list-disc {
  list-style-type: disc;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
  color: rgb(255, 255, 255);
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-brand-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
}
.border-brand-300 {
  --tw-border-opacity: 1;
  border-color: rgb(147 197 253 / var(--tw-border-opacity));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
.border-slate-100 {
  border: 0px;
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity));
}
.border-transparent {
  border-color: transparent;
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.border-white\/60 {
  border-color: rgba(255, 255, 255, 0.6);
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-brand-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.bg-brand-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}
.bg-brand-50 {
  background-color: rgb(245, 250, 255);
}
.bg-brand-50\/80 {
  background-color: rgba(239, 246, 255, 0.8);
}
.bg-brand-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(0, 223, 48);
}
.bg-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(245 247 251 / var(--tw-bg-opacity));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255, 255, 255);
}
.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1);
}
.bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.2);
}
.bg-white\/70 {
  background-color: rgba(255, 255, 255, 0.7);
}
.bg-white\/80 {
  background-color: rgba(255, 255, 255, 0.8);
}
.bg-white\/95 {
  background-color: rgba(255, 255, 255, 0.95);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}
.bg-\[radial-gradient\(circle_at_top\,_rgba\(255\,255\,255\,0\.45\)\,rgba\(255\,255\,255\,0\)\)\] {
  background-image: radial-gradient(
    circle at center top,
    rgb(37, 49, 183),
    rgb(16, 20, 65)
  );
  background-color: rgb(37, 49, 183);
  color: rgb(255, 255, 255);
}
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-brand-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white {
  --tw-gradient-from: #fff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-brand-600 {
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
    var(--tw-gradient-from), #2563eb var(--tw-gradient-via-position),
    var(--tw-gradient-to);
}
.via-white {
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops:
    var(--tw-gradient-from), #fff var(--tw-gradient-via-position),
    var(--tw-gradient-to);
}
.to-brand-50 {
  --tw-gradient-to: #eff6ff var(--tw-gradient-to-position);
}
.to-brand-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}
.to-brand-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.to-canvas {
  direction: rtl;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-7 {
  padding: 1.75rem;
}
.p-8 {
  padding: 1.7rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[80px\] {
  font-size: 80px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  direction: rtl;
}
.text-xl {
  font-size: 1.2rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 1rem;
  line-height: 2rem;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-8 {
  line-height: 2rem;
}
.leading-none {
  line-height: 1;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-brand-100 {
  --tw-text-opacity: 1;
  color: rgb(219 234 254 / var(--tw-text-opacity));
}
.text-brand-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}
.text-brand-600 {
  color: rgb(37, 49, 183);
}
.text-brand-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}
.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(51, 51, 51);
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity));
}
.text-slate-900 {
  color: rgb(37, 49, 183);
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-white\/70 {
  color: rgba(255, 255, 255, 0.7);
}
.text-white\/80 {
  color: rgba(255, 255, 255, 0.8);
}
.text-white\/85 {
  color: rgba(255, 255, 255, 0.85);
}
.text-white\/90 {
  color: rgba(255, 255, 255, 0.9);
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity));
}
.opacity-0 {
  opacity: 0;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:
    0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.shadow-glow {
  --tw-shadow: 0 40px 80px -32px rgba(59, 130, 246, 0.45);
  --tw-shadow-colored: 0 40px 80px -32px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.shadow-lg {
  border: 1px solid rgb(204, 204, 204);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:
    0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.shadow-brand-100\/30 {
  --tw-shadow-color: rgb(219 234 254 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-200\/30 {
  --tw-shadow-color: rgb(191 219 254 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-200\/40 {
  --tw-shadow-color: rgb(191 219 254 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-200\/50 {
  --tw-shadow-color: rgb(191 219 254 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-400\/40 {
  --tw-shadow-color: rgb(96 165 250 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-brand-500\/40 {
  background-image: radial-gradient(
    circle at center top,
    rgb(37, 49, 183),
    rgb(16, 20, 65)
  );
  background-color: rgb(37, 49, 183);
  color: rgb(255, 255, 255);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}
.ring-brand-100 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity));
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[110px\] {
  --tw-blur: blur(110px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[120px\] {
  --tw-blur: blur(120px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-\[140px\] {
  --tw-blur: blur(140px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
}
.transition {
  transition: 0.5s;
}
.transition-colors {
  transition: 0.5s;
}
.open\:shadow-lg[open] {
  --tw-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:
    0 10px 15px -3px var(--tw-shadow-color),
    0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.open\:shadow-brand-100\/40[open] {
  --tw-shadow-color: rgb(219 234 254 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-brand-200:hover {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity));
}
.hover\:border-brand-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity));
}
.hover\:bg-brand-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.hover\:bg-white\/10:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.hover\:from-brand-600:hover {
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-brand-700:hover {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}
.hover\:text-brand-600:hover {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}
.hover\:text-brand-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:shadow-xl:hover {
  --tw-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:
    0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:
    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.hover\:shadow-brand-200\/40:hover {
  --tw-shadow-color: rgb(191 219 254 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-brand-500\/50:hover {
  --tw-shadow-color: rgb(59 130 246 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}
.group[open] .group-open\:rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:opacity-60 {
  opacity: 0.6;
}
@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }
  .sm\:w-full {
    width: 100%;
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-start {
    align-items: flex-start;
  }
  .sm\:items-center {
    align-items: center;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:justify-center {
    justify-content: center;
  }
  .sm\:gap-6 {
    gap: 1.5rem;
  }
  .sm\:text-4xl {
    font-size: 2rem;
    line-height: 2.5rem;
    color: rgb(35, 47, 173);
  }
  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .sm\:leading-8 {
    line-height: 2rem;
  }
}
@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }
  .md\:hidden {
    display: none;
  }
  .md\:h-7 {
    height: 1.75rem;
  }
  .md\:w-7 {
    width: 1.75rem;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0px, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:items-center {
    align-items: center;
  }
  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .md\:pb-20 {
    padding-bottom: 5rem;
  }
  .md\:pb-24 {
    padding-bottom: 6rem;
  }
  .md\:pt-24 {
    padding-top: 6rem;
  }
  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media (min-width: 1024px) {
  .lg\:mr-0 {
    margin-right: 0px;
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
  .lg\:grid-cols-\[1\.1fr_1fr\] {
    grid-template-columns: 1.1fr 1fr;
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:justify-start {
    justify-content: flex-start;
  }
  .lg\:gap-8 {
    gap: 2rem;
  }
  .lg\:py-20 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .lg\:pb-20 {
    padding-bottom: 5rem;
  }
  .lg\:pb-24 {
    padding-bottom: 6rem;
  }
  .lg\:text-right {
    text-align: right;
  }
  .lg\:text-5xl {
    font-size: 2rem;
    line-height: 1;
    color: rgb(37, 49, 183);
  }
}
.bg-footer {
  background-color: rgb(247, 250, 255);
  color: rgb(49, 49, 49);
  padding: 10px 0px;
  direction: rtl;
}
.bg-footer a {
  color: rgb(181, 196, 225);
  line-height: 28px;
}
.bg-footer p {
  color: rgb(110, 134, 173);
  line-height: 35px;
  margin: 0px;
  padding: 10px;
}
.footer-title h2 {
  color: rgb(255, 255, 255);
}
.big-text {
  background-color: rgb(28, 37, 131);
  color: rgb(255, 255, 255);
  height: 450px;
  align-items: center;
  align-content: center;
  margin: 35px 0px;
}
.big-text p {
  color: rgb(255, 255, 255);
}
.big-text h2 {
  color: rgb(255, 255, 255);
}
.big-text a {
  color: rgb(255, 255, 255);
}
.sidebar-menu-item-label {
  overflow: auto;
}
#tableTicketsList_filter {
  display: none;
}
#tableTicketsList_info {
  display: none;
}
div.dataTables_wrapper div.dataTables_filter {
  display: none;
}
div.dataTables_wrapper div.dataTables_info {
  display: none;
}
.card-footer .col-6 {
  flex: 0 0 100%;
  max-width: 100% !important;
}
.container-fluid {
  border-right: 0px;
  border-left: 0px;
}
@media (max-width: 1200px) {
  .limiter {
    padding: 0px 30px;
  }
}
@media (max-width: 567px) {
  .container-login100 {
    margin: 0px;
    border-radius: 0px;
  }
  .container-login {
    border-radius: 0px;
  }
  .Registr100-form {
    border-radius: 0px;
    padding: 65px 40px;
  }
  .login100-form {
    border-radius: 0px;
  }
}
.notifications-but a {
  display: block;
  margin-bottom: 6px;
  border-radius: 10px;
  transition: 0.9s;
  background: rgba(168, 180, 199, 0.1) !important;
}
.widget-stat {
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  margin-bottom: 20px;
  padding: 10px;
  transition: 0.5s;
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 1px solid rgb(245, 245, 245);
}
.widget-stat:hover {
  transition: 0.5s;
  box-shadow: rgba(37, 51, 203, 0.08) 0px 0.25rem 1.5rem 0px;
  border-radius: 15px;
}
.logos {
  text-align: center;
  margin-bottom: 30px;
}
.announcement-item {
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 1px solid rgb(245, 245, 245);
  padding: 2rem;
  border-radius: 15px;
  line-height: 35px;
  margin-bottom: 25px;
  transition: 0.5s;
}
.announcement-item:hover {
  transition: 0.5s;
  box-shadow: rgba(37, 51, 203, 0.08) 0px 0.25rem 1.5rem 0px;
  border-radius: 15px;
}
.announcement-item-title {
  font-size: 17px;
  margin-bottom: 15px;
  border-bottom: 5px dotted rgb(239, 239, 239);
  padding: 10px 18px;
}
.announcement-item-title a {
  color: rgb(249, 115, 22);
}
.announcement-summary {
  padding: 15px;
}
.announcement-item-meta {
  padding: 15px;
}
.downlload-box {
  background-color: rgb(250, 250, 250);
  border: 1px solid rgb(239, 239, 239);
  padding: 20px;
  border-radius: 15px;
  flex: 1 1 auto;
  margin: 15px !important;
}
.service-det {
  padding: 15px;
  background-color: rgb(250, 250, 250);
  border: 1px solid rgb(239, 239, 239);
  border-radius: 15px;
  flex: 1 1 auto;
  margin: 15px;
  font-size: 14px;
  text-align: center;
}
.versions {
  margin: 10px 0;
  color: rgb(110, 88, 6);
  background-color: rgb(255, 236, 165);
  padding: 5px 15px;
  border-radius: 10px;
  float: right;
  font-size: 13px;
}
.updates {
  margin: 0px;
  color: rgb(21, 129, 59);
  background-color: rgb(196, 251, 215);
  padding: 5px 15px;
  border-radius: 15px;
  float: left;
}
.php {
  margin: 0px;
  color: rgb(112, 41, 191);
  background-color: rgb(223, 195, 255);
  padding: 5px 15px;
  border-radius: 6px;
  float: left;
  font-size: 14px;
}
.depa {
  background-color: rgb(249, 251, 255);
  padding: 20px;
  border-radius: 15px;
  margin: 10px 0px;
  transition: 0.8s;
}
.depa:hover {
  background-color: rgb(239, 244, 255);
  color: rgb(18, 55, 101);
  padding: 20px;
  border-radius: 15px;
  margin: 10px 0px;
  transition: 0.8s;
}
.depa .fad {
  font-size: 40px;
  vertical-align: middle;
  padding: 15px;
  border-radius: 50%;
}
.newser {
  padding: 20px 0px;
  list-style: none;
  line-height: 45px;
  align-items: center;
  align-content: center;
}
.newser-item {
  background-color: rgb(250, 250, 250);
  margin-bottom: 10px;
  padding: 10px 25px;
  transition: 0.5s;
}
.newser-item a {
  transition: 0.5s;
}
.newser-item a:hover {
  margin-right: 15px;
  transition: 0.5s;
}
.newser-item:hover {
  background-color: rgb(239, 246, 255);
}
.newser .title {
  font-size: 15px;
}
.newser .title .title-icon {
  padding-left: 5px;
  color: rgb(255, 169, 0);
}
#Secondary_Sidebar-Categories-Addons {
  display: none;
}
.typechat {
  font-size: 90px;
  opacity: 0.2;
}
.phonenumber {
  direction: ltr;
  line-height: 15px;
  width: max-content !important;
  border-radius: 15px !important;
  font-size: 16px !important;
  text-align: left !important;
  padding: 7px 10px !important;
  margin-top: 15px;
}
.calenders {
  float: left;
  transition: 0.9s;
  padding: 10px;
  border-radius: 10px;
  display: block;
  margin: 0px 15px;
  align-items: center;
  align-content: center;
  text-align: center;
  box-shadow: rgba(198, 205, 218, 0.12) 0px 0.625rem 1.5625rem 0px;
  border: 1px solid rgb(245, 245, 245);
  font-size: 13px;
  background: rgba(59, 130, 246, 0.04) !important;
  color: rgb(59, 130, 246) !important;
}
.calenders .fad {
  font-size: 16px;
  vertical-align: middle;
  transition: 0.9s;
  padding: 10px;
  border-radius: 50%;
  margin-right: 3px;
  background: rgba(59, 130, 246, 0.1) !important;
  color: rgb(59, 130, 246) !important;
}
.ticket-replies .replies-user-info .fad {
  font-size: 90px;
  color: rgb(15, 100, 209);
}
.card-sidebar.panel-danger {
  display: none;
}
.widtet-m {
  display: none;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: rgb(243, 246, 255);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgb(232, 238, 249);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(122, 147, 188);
}
/* نگهدارنده اصلی منو */
.top-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 75px;
  background-color: #ffffff;
  /* سایه نرم‌تر و مدرن‌تر */
  box-shadow: 0px -5px 25px rgba(205, 217, 231, 0.4);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
  /* کمی انحنا برای گوشه‌های بالای منو (اختیاری برای زیبایی) */
}

/* گروه دکمه‌ها */
.top-button .btn-groups {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 500px; /* جلوگیری از کشیدگی بیش از حد در تبلت‌ها */
  padding: 0 10px;
}

/* دکمه‌های کناری */
.top-button .btn-top-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  font-size: 22px;
  color: #063570;
  background-color: #f4f8fc; /* رنگ پس‌زمینه شبیه به تصویر */
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* ترانزیشن نرم برای انیمیشن */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* انیمیشن هاور برای دکمه‌های کناری */
.top-button .btn-top-button:hover,
.top-button .btn-top-button:active {
  background-color: #e4f0fc;
  transform: translateY(-5px); /* حرکت ظریف به سمت بالا */
  color: #267ae3;
  box-shadow: 0 5px 15px rgba(38, 122, 227, 0.2);
}

/* دکمه اصلی (وسط) */
.top-button .btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  margin-top: -15px; /* تغییر از -45 به -25 برای بیرون‌زدگی کمتر */
  border-radius: 50%;
  font-size: 32px;
  color: #ffffff;
  background: linear-gradient(135deg, #267ae3, #063570);
  border: 3px solid #ffffff; 
  box-shadow: 0 8px 20px rgba(6, 53, 112, 0.4);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* انیمیشن هاور برای دکمه اصلی */
.top-button .btn-main:hover,
.top-button .btn-main:active {
  transform: translateY(-50px) scale(1.05); /* بزرگ‌نمایی و بالا رفتن */
  box-shadow: 0 12px 25px rgba(6, 53, 112, 0.6);
}

/* انیمیشن آیکن‌ها */
.top-button a i {
  transition: transform 0.3s ease;
}

.top-button .btn-top-button:hover i {
  transform: scale(1.15); /* بزرگ شدن آیکن دکمه‌های کناری */
}

.top-button .btn-main:hover i {
  animation: bounceIcon 0.5s ease; /* انیمیشن پرش برای آیکن خانه */
}

/* کی‌فریم برای انیمیشن پرش آیکن خانه */
@keyframes bounceIcon {
  0% { transform: scale(1); }
  50% { transform: scale(1.2) translateY(-2px); }
  100% { transform: scale(1); }
}

#Secondary_Navbar-Account-Contacts {
  display: none;
}
#Secondary_Navbar-Account-Account_Security {
  display: none;
}
#Secondary_Navbar-Account-Profile {
  display: none;
}
#Secondary_Navbar-Account-Security_Settings {
  display: none;
}
a, button, input, select, textarea, div, span {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
*:focus {
    outline: none !important;
}
a:focus, button:focus {
    outline: none !important;
}
.custom-services-manager {
    font-family: inherit;
}
.csm-search input {
    min-width: 300px;
    border: 1px solid #e1e5eb;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.csm-search input:focus {
    box-shadow: 0 4px 15px rgba(0,123,255,0.1);
    border-color: #007bff;
}
.status-badge {
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.8rem;
}
.status-active { background-color: #e0f7e9; color: #28a745; }
.status-pending { background-color: #fff3cd; color: #ffc107; }
.status-suspended { background-color: #fdeee9; color: #fd7e14; }
.status-terminated, .status-cancelled { background-color: #f8d7da; color: #dc3545; }
.csm-desktop-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}
.csm-desktop-table th {
    border: none;
    color: #6c757d;
    font-weight: 600;
    padding: 10px 15px;
}
.csm-desktop-table tbody tr {
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.csm-desktop-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}
.csm-desktop-table td {
    border: none !important;
    padding: 15px;
}
.csm-desktop-table td:first-child { border-radius: 0 12px 12px 0; }
.csm-desktop-table td:last-child { border-radius: 12px 0 0 12px; }
.csm-mobile-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    border: 1px solid #f1f3f6;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.csm-card-header {
    background: #f8f9fa;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eef0f3;
}
.csm-card-body {
    padding: 15px 20px;
}
.csm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #f1f3f6;
}
.csm-row:last-child {
    border-bottom: none;
}
.csm-label {
    color: #88929e;
    font-size: 0.85rem;
    font-weight: 600;
}
.csm-card-footer {
    padding: 15px 20px;
    background: #fff;
    border-top: 1px solid #f1f3f6;
}
@media (max-width: 768px) {
    .csm-search input { min-width: 100%; width: 100%; }
}
.custom-services-manager .table-responsive {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #eaedf3 !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}
.csm-modern-table {
    width: 100% !important;
    background: #ffffff !important;
    border-collapse: collapse !important;
    margin-bottom: 0 !important;
}
.csm-modern-table thead {
    background: #f8fafc !important;
}
.csm-modern-table thead th {
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 18px 24px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    white-space: nowrap !important;
}
.csm-modern-table tbody tr {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
}
.csm-modern-table tbody tr:hover {
    background-color: #f8fafc !important;
    box-shadow: inset 4px 0 0 #1e62d8 !important;
}
.csm-modern-table tbody td {
    padding: 18px 24px !important;
    vertical-align: middle !important;
    color: #334155 !important;
}
.csm-modern-table strong {
    color: #0b3f80 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.csm-modern-table small,
.csm-modern-table .text-muted {
    color: #64748b !important;
    font-size: 0.8rem !important;
}
.csm-modern-table .btn {
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 6px 18px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
}
.csm-modern-table .btn:hover {
    background-color: #1e62d8 !important;
    border-color: #1e62d8 !important;
    color: #ffffff !important;
}
/* =========================================
   Toolbar & Buttons
   ========================================= */
.toolbar .nav-item { 
    margin-left: 0.5rem; 
    position: relative !important; 
    overflow: visible !important; /* جلوگیری از مخفی شدن بج */
}

.toolbar .btn-nav {
    width: 42px; 
    height: 42px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 12px; 
    background: #f8fafc; 
    border: 1px solid #f1f5f9;
    transition: all 0.3s ease; 
    position: relative; 
    padding: 0; 
    color: #64748b;
    overflow: visible !important; /* جلوگیری از برش لبه‌های دایره اعلان */
}

.toolbar .btn-nav:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
}

.toolbar .icons-green:hover { background: #10b981; color: #fff !important; border-color: #10b981; }
.toolbar .icons-blue:hover { background: #3b82f6; color: #fff !important; border-color: #3b82f6; }
.toolbar .icons-orange:hover { background: #f59e0b; color: #fff !important; border-color: #f59e0b; }

.toolbar .phonenumber {
    border-radius: 12px;
    padding: 0.2rem 1rem !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transition: all 0.3s;
}

.toolbar .dropdown-toggle::after { display: none; }

/* =========================================
   Notifications Badge (Red Circle)
   ========================================= */
#notifications {
    position: relative !important;
    overflow: visible !important;
}

.client-top-access-item-count {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important; /* کاملا گرد */
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    z-index: 9999 !important; /* قرارگیری روی تمام لایه‌ها */
    background-color: #ef4444 !important;
    color: white !important;
    font-size: 11px !important;
    font-weight: bold !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4) !important; /* سایه ملایم */
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================
   Dropdown Menu Styles
   ========================================= */
.notifications-dropdown {
    position: absolute !important;
    top: 100% !important;
    margin-top: 12px;
    width: 320px;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 0;
    background: #fff;
    left: 0 !important;
    right: auto !important;
    direction: rtl;
    overflow: hidden;
    animation: dropOpen 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top left;
    z-index: 1050 !important;
}

.notifications-dropdown .dropdown-header {
    background: #f8fafc;
    padding: 15px;
    font-weight: bold;
    color: #1e293b;
    text-align: right;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
}

.notifications-dropdown .dropdown-item {
    display: flex !important;
    align-items: flex-start;
    padding: 12px 15px;
    border-bottom: 1px solid #f1f5f9;
    white-space: normal !important; 
    text-align: right;
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
    transition: background 0.2s;
}

.notifications-dropdown .dropdown-item:last-child {
    border-bottom: none;
}

.notifications-dropdown .dropdown-item:hover {
    background: #f8fafc;
    color: #1e293b;
}

.notifications-dropdown .dropdown-item i {
    margin-left: 12px;
    margin-top: 4px;
    font-size: 16px;
    flex-shrink: 0;
}

/* =========================================
   Animations & Responsive
   ========================================= */
@keyframes dropOpen {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
    .notifications-dropdown {
        width: 300px;
        left: -30px !important;
    }
}

@media (max-width: 400px) {
    .notifications-dropdown {
        width: 280px;
        left: -60px !important;
    }
}

.custom-nav-item {
    position: relative;
    list-style: none;
}
.custom-nav-link {
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
    padding: 18px 15px;
    cursor: pointer;
    font-size: 16px !important;
}
.custom-clientsnum {
    font-size: 0.85em;
    opacity: 0.8;
    margin-right: 5px;
}
.custom-dropdown-toggle::after {
    content: "";
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.custom-dropdown-menu {
    position: absolute;
    top: 110%;
    left: 0;
    min-width: 230px;
    background: #ffffff;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 25px 25px rgb(0 0 0 / 8%);
    padding: 10px 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-top: 10px;
}

.custom-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
}

@media (min-width: 992px) {
    .custom-has-dropdown:hover .custom-dropdown-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-dropdown-menu.custom-mobile-show {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    display: block !important;
    width: 100%;
}
.custom-dropdown-item {
    display: block;
    padding: 7px 45px;
    color: #444;
    text-decoration: none;
    font-size: 1em !important;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    text-align: right;
}
.custom-dropdown-item:hover {
    background: #f8f9fc;
    color: #0056b3; 
    text-decoration: none;
}
.custom-divider {
    height: 1px;
    margin: 8px 0;
    background-color: #e9ecef;
}

    .phc-alert {
        --pa-bg: #ffffff;
        --pa-border: rgba(0,0,0,0.05);
        --pa-icon-bg: #e2e8f0;
        --pa-icon-color: #ffffff;
        --pa-text: #334155;
        
        background-color: var(--pa-bg);
        border: 1px solid var(--pa-border);
        border-radius: 1.25rem;
        padding: 1.25rem 1.5rem;
        box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03);
        display: flex;
        align-items: center;
        gap: 1.25rem;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative;
        overflow: hidden;
        margin-bottom: 1.5rem;
        text-decoration: none;
    }

    /* Side Accent Line */
    .phc-alert::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--pa-icon-bg);
        opacity: 0.8;
        transition: width 0.3s ease;
    }

    /* Hover Effects */
    .phc-alert:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.08);
        border-color: rgba(0,0,0,0.08);
    }

    .phc-alert:hover::before {
        width: 6px;
    }

    /* Icon Container */
    .phc-alert-icon {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        background: var(--pa-icon-bg);
        color: var(--pa-icon-color);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1.25rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 1;
    }

    .phc-alert:hover .phc-alert-icon {
        transform: scale(1.1) rotate(5deg);
    }

    /* Text Content */
    .phc-alert-content {
        flex-grow: 1;
        color: var(--pa-text);
        font-size: 0.95rem;
        line-height: 1.8;
        z-index: 1;
    }

    .phc-alert-content strong {
        color: #0f172a;
        font-weight: 700;
    }

    /* Premium Button */
    .phc-alert-btn {
        background: var(--pa-icon-bg);
        color: #ffffff !important;
        padding: 0.65rem 1.5rem;
        border-radius: 50rem;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        flex-shrink: 0;
        z-index: 1;
        border: none;
    }

    .phc-alert-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        filter: brightness(1.1);
    }

    .phc-alert-btn i {
        transition: transform 0.3s ease;
    }

    .phc-alert-btn:hover i {
        transform: translateX(-4px);
    }

    /* --- Theme Variants --- */
    
    /* Warning (Gold/Yellow) */
    .phc-alert-warning {
        --pa-bg: linear-gradient(to left, #fffbf0, #ffffff);
        --pa-border: rgba(245, 158, 11, 0.15);
        --pa-icon-bg: linear-gradient(135deg, #f59e0b, #d97706);
        --pa-text: #78350f;
    }
    
    /* Info (Blue) */
    .phc-alert-info {
        --pa-bg: linear-gradient(to left, #f0f9ff, #ffffff);
        --pa-border: rgba(14, 165, 233, 0.15);
        --pa-icon-bg: linear-gradient(135deg, #3b82f6, #1d4ed8);
        --pa-text: #0c4a6e;
    }

    /* Responsive */
    @media (max-width: 576px) {
        .phc-alert {
            flex-direction: column;
            text-align: center;
            padding: 1.5rem 1.25rem;
        }
        .phc-alert-btn {
            width: 100%;
            justify-content: center;
            margin-top: 0.5rem;
        }
    }
    .phc-widget-card {
        background: #ffffff;
        border-radius: 1.25rem;
        border: 1px solid rgba(0, 0, 0, 0.03);
        box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.03);
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        height: 100%;
        display: block;
        text-decoration: none !important;
        padding: 1.5rem;
    }
    
    .phc-widget-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 0, 0, 0.05);
    }

    .phc-widget-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.25rem;
        font-size: 1.75rem;
        transition: transform 0.3s ease;
    }

    .phc-widget-card:hover .phc-widget-icon {
        transform: scale(1.1) rotate(5deg);
    }

    .phc-widget-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: #1e293b;
        text-align: center;
        margin-bottom: 1rem;
    }

    .phc-widget-stat {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: auto;
    }

    .phc-widget-label {
        color: #64748b;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .phc-widget-badge {
        padding: 0.4rem 0.85rem;
        border-radius: 50rem;
        font-size: 0.85rem;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .phc-widget-value {
        font-size: 1.2rem;
        font-weight: 800;
        display: inline-block;
    }

    /* Color Variants */
    .phc-w-primary .phc-widget-icon { color: #3b82f6; background-color: rgba(59, 130, 246, 0.1); }
    .phc-w-primary .phc-widget-badge { background-color: #3b82f6; color: #ffffff; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }

    .phc-w-info .phc-widget-icon { color: #0ea5e9; background-color: rgba(14, 165, 233, 0.1); }
    .phc-w-info .phc-widget-badge { background-color: #0ea5e9; color: #ffffff; box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3); }

    .phc-w-danger .phc-widget-icon { color: #ef4444; background-color: rgba(239, 68, 68, 0.1); }
    .phc-w-danger .phc-widget-badge { background-color: #ef4444; color: #ffffff; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3); }

    .phc-w-warning .phc-widget-icon { color: #f59e0b; background-color: rgba(245, 158, 11, 0.1); }
    .phc-w-warning .phc-widget-value { color: #f59e0b; }

    .phc-w-success .phc-widget-icon { color: #10b981; background-color: rgba(16, 185, 129, 0.1); }
    .phc-w-success .phc-widget-value { color: #10b981; }
.phc-widget-card {
    padding: 22px 18px !important;
    min-height: 160px !important;
}

.widtet-w .col-6 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* libs.css */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: 0;
}
.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}
.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}
.flickity-button:hover {
  background: #fff;
  cursor: pointer;
}
.flickity-button:focus {
  outline: 0;
  box-shadow: 0 0 0 5px #19f;
}
.flickity-button:active {
  opacity: 0.6;
}
.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}
.flickity-button-icon {
  fill: #333;
}
.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transform: translateY(-50%);
}
.flickity-prev-next-button.previous {
  left: 10px;
}
.flickity-prev-next-button.next {
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}
.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}
.mfp-bg,
.mfp-container,
.mfp-wrap {
  top: 0;
  height: 100%;
}
.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}
.flickity-rtl .flickity-page-dots {
  direction: rtl;
}
.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
  opacity: 1;
}
@-webkit-keyframes bounce {
  20%,
  53%,
  80%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes bounce {
  20%,
  53%,
  80%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  50%,
  from,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  50%,
  from,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
@-webkit-keyframes pulse {
  from,
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
@keyframes pulse {
  from,
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}
@-webkit-keyframes rubberBand {
  from,
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
}
@keyframes rubberBand {
  from,
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
}
.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from,
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
}
@keyframes tada {
  from,
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
}
.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
@-webkit-keyframes wobble {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
}
@keyframes wobble {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
}
.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  11.1%,
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  11.1%,
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0%,
  28%,
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14%,
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}
@keyframes heartBeat {
  0%,
  28%,
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14%,
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}
.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes bounceIn {
  20%,
  40%,
  60%,
  80%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  20%,
  40%,
  60%,
  80%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
.bounceOut,
.flipOutX {
  -webkit-animation-duration: 0.75s;
}
@-webkit-keyframes bounceInDown {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.bounceOut {
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1)
      translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1)
      translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95)
      translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1)
      translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1)
      translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95)
      translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
.flipInY,
.flipOutX {
  -webkit-backface-visibility: visible !important;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}
.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}
.animated.fast {
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
}
.animated.faster {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}
.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}
@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}
.mfp-bg {
  left: 0;
  width: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}
.mfp-wrap {
  left: 0;
  width: 100%;
  z-index: 1043;
  position: fixed;
  outline: 0 !important;
  -webkit-backface-visibility: hidden;
}
.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  left: 0;
  padding: 0 8px;
  box-sizing: border-box;
}
.mfp-container:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
  display: none;
}
.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}
.mfp-ajax-holder .mfp-content,
.mfp-inline-holder .mfp-content {
  width: 100%;
  cursor: auto;
}
.mfp-ajax-cur {
  cursor: progress;
}
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}
.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
  cursor: auto;
}
.mfp-arrow,
.mfp-close,
.mfp-counter,
.mfp-preloader {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.mfp-loading.mfp-figure {
  display: none;
}
.mfp-hide {
  display: none !important;
}
.mfp-preloader {
  color: #ccc;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}
.mfp-preloader a {
  color: #ccc;
}
.mfp-preloader a:hover {
  color: #fff;
}
.mfp-s-error .mfp-content,
.mfp-s-ready .mfp-preloader {
  display: none;
}
button.mfp-arrow,
button.mfp-close {
  overflow: visible;
  cursor: pointer;
  background: 0 0;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: 0;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}
.mfp-figure:after,
.mfp-iframe-scaler iframe {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  position: absolute;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #fff;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}
.mfp-close:focus,
.mfp-close:hover {
  opacity: 1;
}
.mfp-close:active {
  top: 1px;
}
.mfp-close-btn-in .mfp-close {
  color: #333;
}
.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close {
  color: #fff;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}
.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #ccc;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: -55px 0 0;
  top: 50%;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
  margin-top: -54px;
}
.mfp-arrow:focus,
.mfp-arrow:hover {
  opacity: 1;
}
.mfp-arrow:after,
.mfp-arrow:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: inset transparent;
}
.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}
.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}
.mfp-arrow-left {
  left: 0;
}
.mfp-arrow-left:after {
  border-right: 17px solid #fff;
  margin-left: 31px;
}
.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3f3f3f;
}
.mfp-arrow-right {
  right: 0;
}
.mfp-arrow-right:after {
  border-left: 17px solid #fff;
  margin-left: 39px;
}
.mfp-arrow-right:before {
  border-left: 27px solid #3f3f3f;
}
.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
  top: -40px;
}
.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
.mfp-figure:after,
img.mfp-img {
  width: auto;
  height: auto;
  display: block;
}
img.mfp-img {
  max-width: 100%;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0;
  margin: 0 auto;
}
.mfp-figure {
  line-height: 0;
}
.mfp-figure:after {
  content: "";
  left: 0;
  top: 40px;
  bottom: 40px;
  right: 0;
  z-index: -1;
  background: #444;
}
.mfp-figure small {
  color: #bdbdbd;
  display: block;
  font-size: 12px;
  line-height: 14px;
}
.mfp-figure figure {
  margin: 0;
}
.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}
.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #f3f3f3;
  word-wrap: break-word;
  padding-right: 36px;
}
.mfp-image-holder .mfp-content {
  max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}
@media screen and (max-width: 800px) and (orientation: landscape),
  screen and (max-height: 300px) {
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/*!
 * WHMCS Twenty-One Theme
 * Store Stylesheet
 * Copyright (c) 2020 WHMCS Limited
 * https://www.whmcs.com/license/
 */

.landing-page::after {
  display: block;
  clear: both;
  content: "";
}

.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5,
.landing-page h6 {
  font-weight: 300;
}

.landing-page img {
  max-width: 100%;
}

.landing-page .hero {
  padding: 60px 0;
  text-align: center;
  color: #333;
}
.landing-page .hero h2 {
  margin: 0 0 15px 0;
  font-size: 3em;
  font-weight: 300;
}
.landing-page .hero h3 {
  margin: 0;
  font-size: 1.7em;
  font-weight: 300;
}
.landing-page .hero .logo-container {
  margin: 0 auto;
  max-width: 500px;
}
.landing-page .hero img {
  padding-bottom: 25px;
}

.landing-page .product-options {
  padding: 40px 0 20px;
  text-align: center;
}

.landing-page.mail-services .product-options {
  background-color: #00acd4;
}

.landing-page.mail-services .product-options .preview-text {
  padding: 50px;
  color: #fff;
}

.landing-page .product-options h2 {
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-size: 2.8em;
  color: #fff;
}
.landing-page .product-options h3 {
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-size: 2.4em;
  color: #fff;
}
.landing-page .product-options .item {
  margin: 0 0 20px 0;
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
}
.landing-page .product-options h4 {
  margin: 0;
  font-size: 1.4em;
  font-weight: 300;
}
.landing-page .product-options .icon {
  line-height: 80px;
  font-size: 50px;
  color: #ccc;
}
.landing-page .product-options img {
  margin: 20px 0;
  max-width: 100%;
}
.landing-page .product-options span {
  display: block;
  font-size: 1.2em;
}
.landing-page .product-options p {
  margin: 10px 0;
  color: #555;
}
.landing-page .product-options .price {
  margin: 10px 0;
  font-size: 1.1em;
  color: #444;
}
.landing-page .product-options .item .btn {
  padding: 6px 20px;
  background-color: #989898;
  color: #eee;
}

.landing-page.mail-services .product-options .item {
  background-color: #f0fcff;
}
.landing-page.mail-services .product-options .icon {
  color: #00acd4;
}
.landing-page.mail-services .product-options .btn-buy {
  background-color: #00acd4;
}
.landing-page.mail-services .product-options .price {
  color: #00acd4;
}

.landing-page .product-options .powered-by {
  text-align: right;
  color: #fff;
  font-size: 0.9em;
}
.landing-page .product-options .powered-by img {
  margin: 0 0 0 8px;
  max-height: 60px;
}

.landing-page .navbar-toggler {
  margin: 5px 0;
}

@media (min-width: 768px) {
  .landing-page .navbar .navbar-nav {
    width: 100%;
  }
}
.landing-page .navbar .navbar-nav > li > a {
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
@media (min-width: 768px) {
  .landing-page .navbar.navbar-expand-md .navbar-nav > li {
    width: 25%;
  }
  .landing-page .navbar.navbar-expand-md .navbar-nav > li > a {
    border-left: 1px solid #ccc;
  }
  .landing-page .navbar.navbar-expand-md .navbar-nav > li:last-child > a {
    border-right: 1px solid #ccc;
  }
}
@media (min-width: 992px) {
  .landing-page .navbar.navbar-expand-lg .navbar-nav > li {
    width: 25%;
  }
  .landing-page .navbar.navbar-expand-lg .navbar-nav > li > a {
    border-left: 1px solid #ccc;
  }
  .landing-page .navbar.navbar-expand-lg .navbar-nav > li:last-child > a {
    border-right: 1px solid #ccc;
  }
}

.landing-page .navbar .navbar-nav > li.active > a {
  background: #fff;
}

.landing-page .content-block {
  margin: 40px 0;
  padding: 40px 0;
}
.landing-page .text13 {
  font-size: 1.3em;
}
.landing-page .text20 {
  font-size: 2em;
}
.landing-page .text20 h2 {
  margin: 0;
  font-weight: 300;
}

.landing-page .light-grey-bg {
  background-color: #f6f6f6;
  color: #222;
}
.landing-page .get-started {
  background-color: #00acd4;
  color: #fff;
}

.landing-page.mail-services .light-grey-bg {
  margin-top: 0;
}
.landing-page.mail-services .get-started {
  margin-bottom: 0;
  padding: 60px 0;
}

.landing-page .get-started h2 {
  margin: 0 0 20px 0;
}
.landing-page .get-started .price {
  font-size: 2em;
}
.landing-page .get-started .additional-options .option:not(:first-child) {
  display: none;
}
.landing-page .get-started .checkbox-inline + .checkbox-inline,
.landing-page .get-started .radio-inline + .radio-inline {
  margin: 0;
}
.landing-page .get-started .btn-order-now {
  background-color: #28798e;
  color: #fff;
}
.landing-page .get-started .price:not(:first-child) {
  display: none;
}

.landing-page .content-block.tabs {
  padding: 80px 0;
}

.landing-page .nav-tabs {
  border: 0;
}
.landing-page .nav-tabs > li {
  margin-right: 5px;
}
.landing-page .nav-tabs > li > a,
.landing-page .nav-tabs > li > a:focus {
  background-color: #efefef;
  border: 0;
}
.landing-page .nav-tabs > li > a:hover {
  background-color: #f2f2f2;
  border: 0;
}
.landing-page .nav-tabs > li.active > a,
.landing-page .nav-tabs > li.active > a:focus,
.landing-page .nav-tabs > li.active > a:hover {
  background-color: #fff;
  border: 0;
  border-top: 3px solid #2cc9f2;
}

.landing-page .tab-content {
  padding: 30px;
  background-color: #fff;
}
.landing-page .tab-content h1,
.landing-page .tab-content h2,
.landing-page .tab-content h3,
.landing-page .tab-content h4,
.landing-page .tab-content h5,
.landing-page .tab-content h6 {
  margin: 0 0 10px 0;
}
.landing-page .tab-content p {
  margin: 0 0 16px 0;
}

.landing-page.mail-services .benefits {
  margin: 0 0 30px 0;
  padding: 20px;
  font-size: 1.1em;
  background: rgba(44, 201, 242, 0.05);
  border-radius: 6px;
}
.landing-page.mail-services .benefits i {
  color: #33993c;
  font-size: 1.5em;
  padding-right: 5px;
}

.landing-page .image-standout {
  font-size: 1.2em;
}
.landing-page .image-standout img {
  max-width: 100%;
}

.landing-page .currency-selector {
  margin: 0 0 30px 0;
  display: inline-block;
  width: 250px;
}

.landing-page .pricing-item {
  margin: 0 0 10px 0;
  border: 1px solid #ddd;
  text-align: center;
}
.landing-page .pricing-item .header {
  padding: 30px 20px 10px;
}
.landing-page .pricing-item .header h4 {
  margin: 0;
  font-size: 1.4em;
}
.landing-page .pricing-item .price {
  padding: 0 0 10px 0;
  font-size: 2em;
}
.landing-page .pricing-item ul {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
}
.landing-page .pricing-item ul li {
  line-height: 28px;
  font-size: 0.92em;
  border-bottom: 1px solid #eee;
}
.landing-page .pricing-item .feature-heading {
  margin: 10px 0 0 0;
  background-color: #f4f4f4;
  line-height: 30px;
  font-weight: bold;
  font-size: 0.92em;
}

.landing-page.weebly .weebly-lite-plan {
  margin: 0 0 30px 0;
  padding: 20px;
  background-color: #dceefd;
  border: 1px solid #a7cdec;
}

@media (min-width: 768px) {
  .landing-page.weebly .pricing-item ul {
    height: 290px;
  }
  .landing-page.weebly .pricing-item ul.ecommerce-features {
    height: 265px;
  }
}

@media (max-width: 767px) {
  .landing-page .hero {
    padding: 30px 0;
  }
  .landing-page .hero h2 {
    font-size: 2em;
  }
  .landing-page .hero h3 {
    font-size: 1.6em;
  }
  .landing-page .standout-features p {
    margin: 0 20px 50px;
  }
}

.landing-page .features {
  padding: 90px 0 50px;
  background-color: #f6f6f6;
  text-align: center;
}
.landing-page .features .feature {
  margin-bottom: 30px;
  height: 250px;
  overflow: hidden;
}
.landing-page .features .feature .icon {
  line-height: 120px;
}

.landing-page.weebly .faq {
  padding: 80px 0;
  background-color: #d5dde4;
}
.landing-page .faq h3 {
  margin: 0 0 30px 0;
  font-size: 2em;
}

.landing-page .trusted-by {
  padding: 10px 0;
}
.landing-page .trusted-by {
  color: #ccc;
  font-size: 1.3em;
  line-height: 60px;
}
.landing-page .trusted-by img {
  max-height: 60px;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  opacity: 0.3;
}

.landing-page.mail-services .navbar {
  margin-bottom: 0;
}
.landing-page.mail-services .tabs {
  margin-bottom: 0;
}
.landing-page.mail-services .get-started {
  margin-top: 0;
}

.landing-page.ssl .content-block h1,
.landing-page.ssl .content-block h2,
.landing-page.ssl .content-block h3,
.landing-page.ssl .content-block h4,
.landing-page.ssl .content-block h5,
.landing-page.ssl .content-block h6 {
  margin: 0 0 20px 0;
  padding: 0;
}

.landing-page.ssl .validation-levels {
  padding: 20px 20px 0 20px;
  background-color: #327ba7;
  text-align: center;
}
.landing-page.ssl .validation-levels h3 {
  margin: 0;
  line-height: 80px;
  font-weight: 400;
  font-size: 2em;
  color: #eee;
}

.landing-page.ssl .validation-levels .row {
  justify-content: space-around;
}

.landing-page.ssl .validation-levels .item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 5fr 5fr 4fr 9fr auto;
  row-gap: 10px;
  height: 100% !important;
  margin: 20px 0 20px 0;
  padding: 30px 30px;
  color: #432448;
  background-color: #fff;
  border-radius: 4px;
}
.landing-page.ssl .validation-levels .item h4 {
  font-size: 1.4em;
  font-weight: bold;
  grid-row: 1;
}

.landing-page.ssl .validation-levels .item .logo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  grid-row: 2;
}
.landing-page.ssl .validation-levels .item img {
  max-width: 220px;
}

.landing-page.ssl .validation-levels .item p {
  text-align: left;
  margin: 0;
}

.landing-page.ssl .validation-levels .item p .first {
  grid-row: 3;
}

.landing-page.ssl .validation-levels .item p .second {
  grid-row: 4;
}

.landing-page.ssl .validation-levels .item .logo-wrapper span {
  font-size: 1em;
  font-weight: bold;
}

.landing-page.ssl .validation-levels .item p span {
  font-weight: bold;
}

.landing-page.ssl .validation-levels .item p:not(:has(span)) {
  font-weight: bold;
}

.landing-page.ssl .validation-levels .item .item-features {
  list-style: none;
  font-weight: normal;
  text-align: left;
  padding-left: 0;
  width: 100%;
  grid-row: 5;
}

.landing-page.ssl .validation-levels .item .item-features li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.landing-page.ssl .validation-levels .item .item-features li span {
  font-weight: normal;
}

.landing-page.ssl .validation-levels .item .item-features li img {
  width: 24px;
}

.landing-page.ssl .validation-levels .item .btn {
  padding: 4px 20px;
  background-color: #327ba7;
  color: #eee;
  width: 110px;
  border-radius: 8px;
  font-size: 1.4em;
  font-weight: bold;
  grid-row: 6;
}
.landing-page.ssl p.help-me-choose {
  margin-bottom: 0;
  color: #fff;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.landing-page.ssl p.help-me-choose a,
.landing-page.ssl a.help-me-choose {
  font-size: 1em;
  color: #fff;
  text-decoration: underline;
}

.landing-page.ssl .standout {
  font-size: 1.2em;
  font-weight: 300;
}

.landing-page.ssl .what-is-ssl ul {
  list-style: none;
  margin: 30px 0;
}
.landing-page.ssl .what-is-ssl ul li {
  line-height: 2em;
}
.landing-page.ssl .what-is-ssl .fas,
.landing-page.ssl .what-is-ssl .far {
  float: left;
  color: #44737e;
  font-size: 2em;
  padding-right: 15px;
}

.landing-page.ssl .help-me-choose .ideal {
  font-style: italic;
  text-align: center;
  color: #888;
}
.landing-page.ssl .help-me-choose .ssl-types-expl {
  margin: 0 0 20px 0;
  font-size: 0.85em;
  text-align: center;
}
.landing-page.ssl .help-me-choose img {
  margin: 20px 0;
}

.landing-page.ssl .ideal-for {
  text-align: center;
}
.landing-page.ssl .ideal-for i {
  padding: 15px 0;
  font-size: 3em;
  color: #ccc;
}
.landing-page.ssl .ideal-for.dv i {
  color: #2369a5;
}
.landing-page.ssl .ideal-for.ov i {
  color: #f3b32e;
}
.landing-page.ssl .ideal-for.ev i {
  color: #4cab6e;
}

.landing-page.ssl .ssl-benefits {
  margin-top: 0;
  padding-top: 0;
}
.landing-page.ssl .ssl-benefits .row {
  margin-top: 40px;
  text-align: center;
  color: #444;
}
.landing-page.ssl .ssl-benefits i {
  display: block;
  margin: 20px 0;
  font-size: 5em;
  color: #566b6f;
}

.landing-page.ssl .browser-notice {
  float: left;
  margin-top: -100px;
  width: 100%;
}
.landing-page.ssl .browser-notice .wrapper-container {
  padding: 0 75px;
}
.landing-page.ssl .browser-notice .wrapper {
  margin: 0 auto;
  padding: 40px;
  max-width: 660px;
  background-color: #fff;
  border-top: 4px solid #cc0000;
  box-shadow: 2px 2px 5px #ccc;
  font-size: 1.4em;
  text-align: center;
}
.landing-page.ssl .browser-notice img {
  display: block;
  float: none !important;
  margin: 20px auto;
}

.landing-page.ssl .browser-msg span {
  display: block;
  padding: 42px 30px;
  font-size: 1.8em;
}
.landing-page.ssl .browser-msg img {
  float: left;
  max-width: 200px;
  padding-right: 40px;
}

@media (max-width: 1199px) {
  .landing-page.ssl .browser-msg span {
    padding: 25px 30px;
  }
}
@media (max-width: 991px) {
  .landing-page.ssl .browser-msg span {
    padding: 15px 30px;
  }
}
@media (max-width: 700px) {
  .landing-page.ssl .standout-1 h3 {
    padding: 0 0 20px 0;
    font-size: 1.6em;
  }
  .landing-page.ssl .browser-notice .wrapper {
    font-size: 1em;
  }
  .landing-page.ssl .browser-notice .wrapper img {
    max-width: 80px;
  }
  .landing-page.ssl .browser-msg span {
    font-size: 1.4em;
  }
}

.landing-page.ssl .competitive-upgrade-promo {
  margin: 80px 0 40px 0;
  background-color: #327aa7;
  font-size: 2em;
  color: #fff;
  font-weight: 300;
  text-align: center;
}
.landing-page.ssl .competitive-upgrade-promo a {
  color: #fff;
  text-decoration: underline;
}
.landing-page.ssl .competitive-upgrade-banner {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 12px;
  width: 100%;
  background: #444;
  color: #eee;
  z-index: 100;
}
.landing-page.ssl .competitive-upgrade-banner button.close {
  color: #fff;
}
.landing-page.ssl .competitive-upgrade-banner h4,
.landing-page.ssl .competitive-upgrade-banner p {
  margin: 2px 0;
}

.landing-page.ssl .detailed-info {
  padding: 80px 0;
  background-color: #f8f8f8;
}
.landing-page.ssl .detailed-info .panel-group {
  margin: 0;
}
.landing-page.ssl .detailed-info .arrow {
  float: left;
  width: 30px;
  margin-right: 10px;
  text-align: center;
}
.landing-page.ssl .detailed-info .card-header {
  background-color: #327aa7;
  color: #fff;
  border-radius: 3px;
}
.landing-page.ssl .detailed-info .card-header h4 {
  margin: 0;
  font-weight: 300;
  font-size: 1.5em;
}
.landing-page.ssl .detailed-info .panel {
  background-color: transparent;
  border: 0;
}
.landing-page.ssl .detailed-info .card-body {
  margin-top: 0;
  padding: 35px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: none;
}
.landing-page.ssl .detailed-info div#collapseAllCerts .card-body {
  padding: 0;
}
.landing-page.ssl .detailed-info .card-body h4 {
  margin: 20px 0;
  font-weight: 700;
}

.landing-page.ssl .standout-1 {
  margin: 30px 0 200px 0;
  padding: 40px 0 0 0;
  background-color: #f5a200;
  text-align: center;
}
.landing-page.ssl .standout-1 .browser {
  max-height: 400px;
  overflow: hidden;
}
.landing-page.ssl .standout-1 .browser .browser-image {
  float: left;
  width: 100%;
}
.landing-page.ssl .standout-1 .browser .browser-image img {
  max-width: 100%;
}
.landing-page.ssl .standout-1 h3 {
  padding: 30px 0;
  font-size: 2.4em;
  font-weight: 300;
  color: #fff;
}

.landing-page.ssl .standout-2 {
  color: #444;
  font-size: 1.5em;
  text-align: center;
}

.landing-page.ssl ul.ssl-certs-all {
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-page.ssl ul.ssl-certs-all li {
  margin: 0;
  padding: 15px 35px;
  border-bottom: 3px solid #f8f8f8;
}
.landing-page.ssl ul.ssl-certs-all li .row {
  margin-top: 1em;
}
.landing-page.ssl ul.ssl-certs-all li.featured {
  background: #fff7cc;
  border-radius: 0.25rem;
}
.landing-page.ssl ul.ssl-certs-all li:last-child {
  border-bottom: 0;
}
.landing-page.ssl ul.ssl-certs-all li h3 {
  font-weight: 300;
}
.landing-page.ssl ul.ssl-certs-all li h4 {
  margin-top: 0 !important;
}
.landing-page.ssl ul.ssl-certs-all .padded-cell {
  padding-top: 30px;
  text-align: center;
}
.landing-page.ssl ul.ssl-certs-all .padded-cell .btn {
  margin-bottom: 5px;
}
.landing-page.ssl ul.ssl-certs-all .padded-cell a {
  font-size: 0.9em;
}
.landing-page.ssl ul.ssl-certs-all .price strong {
  font-size: 1.6em;
}
.landing-page.ssl ul.ssl-certs-all .price span {
  font-size: 0.9em;
  color: #888;
}

.landing-page.ssl .features {
  background-color: #444;
  text-align: center;
}
@media (max-width: 767px) {
  .landing-page.ssl .features {
    padding-left: 20px;
    padding-right: 20px;
  }
}
.landing-page.ssl .features h3 {
  margin: 10px 0 40px 0;
  padding: 0;
  color: #fff;
  font-size: 2.8em;
  font-weight: 300;
}
.landing-page.ssl .features .feature {
  margin: 0 0 40px 0;
  padding: 30px 20px;
  background-color: #666;
  height: 150px;
  font-size: 40px;
  color: #eee;
}
.landing-page.ssl .features .feature h4 {
  font-weight: 300;
}
.landing-page.ssl .features .feature:hover {
  background-color: #999;
  color: #fff;
}

.landing-page.ssl .logos {
  padding: 10px 0;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}
.landing-page.ssl .logos img {
  max-height: 70px;
  max-width: 90%;
}
@media (max-width: 767px) {
  .landing-page.ssl .logos img {
    margin-bottom: 20px;
    max-height: 50px;
  }
}

.landing-page.ssl .certificate-options {
  background-color: #2369a5;
  color: #fff;
}
.landing-page.ssl .certificate-options.ov {
  background-color: #f3b32e;
}
.landing-page.ssl .certificate-options.ev {
  background-color: #4cab6e;
}

.landing-page.ssl .certificate-options h3 {
  font-size: 2em;
  font-weight: 300;
}

.landing-page.ssl .currency-selector {
  display: inline-block;
  width: 250px;
}

.landing-page.ssl .row-pricing-table {
  margin-left: -2px;
  margin-right: -2px;
}
.landing-page.ssl .row-pricing-table .col-md-3,
.landing-page.ssl .row-pricing-table .col-md-4,
.landing-page.ssl .row-pricing-table .col-md-6 {
  padding-left: 2px;
  padding-right: 2px;
}
.landing-page.ssl .row-pricing-table .header {
  margin-bottom: 4px;
  padding: 5px;
  height: 65px;
  text-align: center;
  overflow: hidden;
}

.landing-page.ssl .popular-plan {
  margin-top: 5px;
  width: 100%;
  height: 35px;
  position: absolute;
  bottom: -0.6rem;
}
.landing-page.ssl .popular-plan-wrapper {
  position: relative;
  padding-bottom: 1rem;
}
.landing-page.ssl .popular-plan .plan-container {
  text-align: center;
  position: absolute;
  top: 0;
  left: -10px;
  width: calc(100% + 20px);
  background-size: 100% auto;
}
.landing-page.ssl .popular-plan .plan-container .txt-container {
  padding: 6px 0 0 0;
  height: 28px;
  width: 100%;
  /* Old browsers */
  background: #f7a566;
  /* FF3.6+ */
  background: -moz-linear-gradient(top, #f7a566 0%, #f36900 100%);
  /* Chrome,Safari4+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #f7a566),
    color-stop(100%, #f36900)
  );
  /* Chrome10+,Safari5.1+ */
  background: -webkit-linear-gradient(top, #f7a566 0%, #f36900 100%);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #f7a566 0%, #f36900 100%);
  /* IE10+ */
  background: -ms-linear-gradient(top, #f7a566 0%, #f36900 100%);
  /* W3C */
  background: linear-gradient(to bottom, #f7a566 0%, #f36900 100%);
  /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7A566', endColorstr='#F36900',GradientType=0);
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  -webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  -moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: -1px 10px 2px -7px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: -1px 10px 2px -7px rgba(0, 0, 0, 0.18);
  box-shadow: -1px 10px 2px -7px rgba(0, 0, 0, 0.18);
}
.landing-page.ssl .popular-plan .plan-container:before,
.landing-page.ssl .popular-plan .plan-container:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #823c0f transparent transparent transparent;
  bottom: -10px;
}
.landing-page.ssl .popular-plan .plan-container:before {
  left: 0;
  border-width: 10px 0 0 10px;
}
.landing-page.ssl .popular-plan .plan-container:after {
  right: 0;
  border-width: 10px 10px 0 0;
}
@media (max-width: 767px) {
  .landing-page.ssl .certificate-options h3 {
    margin-bottom: 0;
  }
  .landing-page.ssl .row-pricing-table .header {
    margin-top: 40px;
  }
}
.landing-page.ssl .row-pricing-table .header h4 {
  font-size: 1.4em;
  font-weight: 300;
}
.landing-page.ssl .row-pricing-table ul {
  list-style: none;
  margin: 0 0 10px 0;
  padding: 0;
  border-radius: 4px;
}
.landing-page.ssl .row-pricing-table ul li {
  line-height: 40px;
  text-align: right;
  background-color: #fff;
  text-align: center;
  border-bottom: 1px solid #ddd;
  color: #666;
}
.landing-page.ssl .row-pricing-table ul li:first-child {
  border-radius: 4px 4px 0 0;
}
.landing-page.ssl .row-pricing-table ul li:last-child {
  border-bottom: 0;
  border-radius: 0 0 4px 4px;
}
.landing-page.ssl .certificate-options .col-md-3.sidebar ul li,
.landing-page.ssl .certificate-options .col-md-4.sidebar ul li,
.landing-page.ssl .certificate-options .col-md-6.sidebar ul li {
  background-color: transparent;
  text-align: left;
  padding-right: 20px;
  color: #eee;
  border-color: #4484bb;
}
.landing-page.ssl .certificate-options.ov .col-md-3.sidebar ul li,
.landing-page.ssl .certificate-options.ov .col-md-4.sidebar ul li,
.landing-page.ssl .certificate-options.ov .col-md-6.sidebar ul li {
  border-color: #f9cb6c;
}
.landing-page.ssl .certificate-options.ev .col-md-3.sidebar ul li,
.landing-page.ssl .certificate-options.ev .col-md-4.sidebar ul li,
.landing-page.ssl .certificate-options.ev .col-md-6.sidebar ul li {
  border-color: #90cca8;
}

.landing-page.ssl .certificate-options .btn {
  background-color: #fff;
  color: #444;
}

.landing-page.ssl .certificate-options .preview-text {
  padding: 180px 0 0;
  text-align: center;
}

.landing-page.ssl .dashed-border {
  padding-bottom: 70px;
  border-bottom: 1px dashed #ddd;
}

.sitebuilder-upgrade-container,
.weebly-upgrade-container {
  margin: 30px 0 50px;
  padding: 0;
  border: 1px solid #ddd;
}
.sitebuilder-upgrade-container .content-padded,
.weebly-upgrade-container .content-padded {
  padding: 70px 40px 40px;
  text-align: center;
}
.sitebuilder-upgrade-container img,
.weebly-upgrade-container img {
  max-width: 100%;
  max-height: 135px;
}
.sitebuilder-upgrade-container .promo-wrapper,
.weebly-upgrade-container .promo-wrapper {
  margin: 0;
  padding: 30px;
  background-color: #f6f6f6;
  min-height: 400px;
}
.sitebuilder-upgrade-container .promo-wrapper .logincontainer,
.weebly-upgrade-container .promo-wrapper .logincontainer {
  margin: 30px auto 50px;
}
.sitebuilder-upgrade-container .promo-wrapper h3,
.weebly-upgrade-container .promo-wrapper h3 {
  margin: 20px 0;
}
.sitebuilder-upgrade-container .promo-wrapper ul,
.weebly-upgrade-container .promo-wrapper ul {
  margin: 30px 0;
}
.sitebuilder-upgrade-container .sitebuilder-service-select,
.weebly-upgrade-container .weebly-service-select {
  margin-bottom: 10px;
}
.sitebuilder-upgrade-container .promo-wrapper .btn-success,
.weebly-upgrade-container .promo-wrapper .btn-success {
  margin-bottom: 20px;
  padding: 15px 15px;
  font-size: 1.1em;
  font-weight: 300;
}

.landing-page.sitelock .hero img {
  padding-bottom: 15px;
}
.landing-page.sitelock h2 {
  margin: 0 0 5px 0;
  font-size: 3em;
}
.landing-page.sitelock h3 {
  margin: 0 0 20px 0;
  font-size: 1.8em;
}
.landing-page.sitelock h4 {
  font-size: 1.7em;
}
.landing-page.sitelock p {
  margin: 0 0 15px 0;
  font-size: 1.5em;
  font-weight: 300;
}
.landing-page.sitelock .plans {
  padding: 80px 0;
  background-color: #336699;
}
.landing-page.sitelock .plans h2,
.landing-page.sitelock .emergency h2,
.landing-page.sitelock .plans h3,
.landing-page.sitelock .emergency h3 {
  color: #fff;
}

.landing-page.sitelock .emergency h2.text-danger {
  color: #ff8f8f;
}

.landing-page.sitelock .plans .plan-comparison {
  margin-left: -5px;
  margin-right: -5px;
}
.landing-page.sitelock .plans .plan-comparison .col-lg-3,
.landing-page.sitelock .plans .plan-comparison .col-lg-4,
.landing-page.sitelock .plans .plan-comparison .col-lg-6,
.landing-page.sitelock .plans .plan-comparison .col-lg-12 {
  padding-left: 5px;
  padding-right: 5px;
}
.landing-page.sitelock .plans .plan {
  margin: 20px 0;
  padding: 0;
  background-color: #fff;
}
.landing-page.sitelock .plans .plan .header {
  margin: 0;
  padding: 20px;
  background-color: #2b5580;
  color: #fff;
}
.landing-page.sitelock .plans .plan .header p {
  font-size: 1.3em;
}
.landing-page.sitelock .plans .plan ul {
  margin: 0;
  padding: 20px 25px;
  list-style: none;
}
@media (min-width: 992px) {
  .landing-page.sitelock .plans .plan ul {
    height: 440px;
  }
}
.landing-page.sitelock .plans .plan ul li {
  line-height: 25px;
  font-size: 0.9em;
  text-align: right;
  color: #aaa;
  border-bottom: 1px solid #eee;
}
.landing-page.sitelock .plans .plan ul li:last-child {
  border: 0;
}
.landing-page.sitelock .plans .plan ul li span {
  float: left;
  color: #444;
}
.landing-page.sitelock .plans .fas,
.landing-page.sitelock .plans .far {
  font-size: 1.3em;
}
.landing-page.sitelock .plans .fa-check {
  color: #23ad2e;
}
.landing-page.sitelock .plans .plan .footer {
  margin: 0;
  padding: 20px;
}
.landing-page.sitelock .plans .plan .footer select {
  margin-bottom: 10px;
}
.landing-page.sitelock .plans .plan .btn {
  background-color: #2b5580;
  color: #fff;
}

.landing-page.sitelock .feature-wrapper {
  margin: 0 0 20px 0;
}
.landing-page.sitelock .feature-wrapper i {
  float: left;
  font-size: 5em;
  margin-right: 15px;
}
.landing-page.sitelock .feature-wrapper .content {
  margin-left: 100px;
}
.landing-page.sitelock .feature-wrapper p {
  font-size: 1.3em;
}

.landing-page.sitelock .features {
  margin: 0;
  padding: 40px 0;
  background-color: transparent;
  text-align: left;
}
.landing-page.sitelock .features .fas,
.landing-page.sitelock .features .far {
  color: #336699;
}

.landing-page.sitelock .emergency {
  padding: 80px 0;
  background-color: #444;
  color: #fff;
}
.landing-page.sitelock .emergency .price {
  font-size: 2em;
}
.landing-page.sitelock .emergency .fas,
.landing-page.sitelock .emergency .far {
  color: #f5e88e;
}
.landing-page.sitelock .emergency .btn {
  padding: 15px 45px;
  background-color: #f5e88e;
  border-color: #afa563;
  font-size: 1.3em;
}

.landing-page.sitelock .faq {
  padding-bottom: 10px;
}
.landing-page.sitelock .faq .panel-group {
  margin: 30px 0;
  font-size: 1.2em;
}
.landing-page.sitelock .faq .panel-group .card-body {
  padding: 20px;
}
.landing-page.sitelock .faq .panel-group li {
  margin-top: 10px;
}

.landing-page.codeguard .strong-green span {
  color: #94c83d;
  font-style: italic;
  font-weight: bold;
}

.landing-page.codeguard .overview-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-page.codeguard .overview-features img {
  padding: 5px 30px;
}
.landing-page.codeguard .overview-features span {
  font-size: medium;
  color: #888;
}

@media (min-width: 768px) {
  .landing-page.codeguard .overview-features li {
    float: left;
    margin: 0;
    width: 20%;
    text-align: center;
    border-right: 1px solid #ddd;
  }
  .landing-page.codeguard .overview-features li:last-child {
    border-right: 0;
  }
  .landing-page.codeguard .overview-features img {
    display: block;
    margin: 0 auto;
    padding: 20px;
  }
  .landing-page.codeguard .overview-features span {
    display: block;
    padding: 0 30px 20px;
    font-size: medium;
    color: #888;
  }
}

.landing-page.codeguard .features .feature {
  padding-top: 5px;
}

.landing-page.codeguard .faqs {
  padding: 90px 0 50px;
  background-color: #f6f6f6;
  text-align: center;
}
.landing-page.codeguard .faqs h3 {
  margin-bottom: 30px;
}
.landing-page.codeguard .faqs h4 {
  font-weight: bold;
  font-style: italic;
}
.landing-page.codeguard .faqs p {
  min-height: 100px;
}

.landing-page.codeguard .features {
  background-color: inherit;
}

.landing-page.codeguard .pricing {
  background: #94c83d
    url(../../../assets/img/marketconnect/codeguard/pricing-bg.gif);
  color: #fff;
  padding: 55px 0;
}
.landing-page.codeguard .pricing h2 {
  margin: 0;
}
.landing-page.codeguard .pricing img {
  margin: 20px 0;
}

/* Sliders Styles Overwrite */
.landing-page.codeguard .irs-with-grid {
  margin: 40px 10px;
  height: 31px;
}
.landing-page.codeguard .irs-from,
.landing-page.codeguard .irs-to,
.landing-page.codeguard .irs-single {
  color: #fff;
  text-shadow: none;
  background: transparent;
}
.landing-page.codeguard .irs-single {
  display: none;
}
.landing-page.codeguard .irs-grid-pol.small {
  display: none;
}
.landing-page.codeguard .irs-grid-text {
  bottom: -4px;
  color: #fff;
  font-size: 16px;
}
.landing-page.codeguard .irs-slider,
.landing-page.codeguard .irs-slider:hover {
  background: url(../../../assets/img/marketconnect/codeguard/slider.png)
    no-repeat;
  top: -7px;
  width: 96px;
  cursor: pointer;
  z-index: 1100;
  border: none;
  box-shadow: none;
}
.landing-page.codeguard .irs-line {
  background: #fff;
  border: 0;
  height: 16px;
  top: 0;
  box-shadow: none;
  margin-left: 10px;
  margin-right: 10px;
}
.landing-page.codeguard .irs-bar {
  height: 16px;
  border: 0;
  top: 0;
  background: #6c6c6c;
}
.landing-page.codeguard .irs-bar-edge {
  height: 16px;
  width: 50px;
  top: 0;
  border: 0 solid #428bca;
  background: #6c6c6c;
  margin-left: 10px;
  margin-right: 10px;
}

.landing-page.codeguard .order-btn {
  padding: 12px 35px;
  background-color: #6c6c6c;
  color: #fff;
  font-size: 16px;
  border: 0;
}

.landing-page.codeguard .pricing-container {
  float: left;
}
.landing-page.codeguard .pricing-container .price {
  font-size: 30px;
}

.landing-page.sitelockvpn .hero {
  margin: 0;
  padding: 0;
  background-color: #3d82bb;
  text-align: left;
}
.landing-page.sitelockvpn .hero-bg {
  padding: 0 0 30px 0;
  text-align: center;
}
.landing-page.sitelockvpn .hero-bg img {
  max-width: 100%;
}
@media (min-width: 992px) {
  .landing-page.sitelockvpn .hero-bg {
    padding: 40px 0 60px;
    text-align: left;
    background: url("../../../assets/img/marketconnect/sitelockvpn/header-img.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 650px;
  }
}
@media (min-width: 1200px) {
  .landing-page.sitelockvpn .hero-bg {
    padding: 60px 0;
    text-align: left;
    background-size: auto;
  }
}
.landing-page.sitelockvpn .hero h1 {
  font-size: 4em;
  color: #fff;
}

.landing-page.sitelockvpn .hero h2 {
  font-size: 2em;
  color: #fff;
  font-family: "Open Sans", Verdana, Tahoma, serif;
}

.landing-page.sitelockvpn .btn-start {
  margin: 15px 0;
  padding: 10px 40px;
  display: inline-block;
  background-color: #7bc143;
  color: #fff;
  font-size: 1.4em;
  border-radius: 5px;
}

.landing-page.sitelockvpn .feature {
  margin: 40px 0;
  padding: 40px 0;
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1.5em;
}

.landing-page.sitelockvpn .feature img {
  margin: 50px 0;
}

.landing-page.sitelockvpn .feature p {
  margin: 20px 0;
}

.landing-page.sitelockvpn .feature h3 {
  font-size: 2em;
  font-weight: bold;
}

@media (max-width: 767px) {
  .landing-page.sitelockvpn .hero h1 {
    font-size: 3em;
  }
  .landing-page.sitelockvpn .hero h2 {
    font-size: 1.6em;
  }
  .landing-page.sitelockvpn .feature {
    margin: 15px 0;
    padding: 15px 0;
    font-size: 1.2em;
  }
  .landing-page.sitelockvpn .feature img {
    margin: 20px 0;
  }
}

.landing-page.sitelockvpn ul.highlights {
  list-style: none;
}

.landing-page.sitelockvpn ul.highlights li::before {
  content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #ccc; /* Change the color */
  font-size: 1.3em;
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1.5em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.landing-page.sitelockvpn .feature.alternate-bg {
  background-color: #f4f8fb;
}

.landing-page.sitelockvpn .feature.devices {
  margin: 0;
  padding: 70px 0 20px;
}
.landing-page.sitelockvpn .feature.devices img {
  margin: 0;
}
.landing-page.sitelockvpn .feature.devices h3 {
  margin-top: 40px;
}
.landing-page.sitelockvpn .feature.devices .logos {
  padding: 20px;
  text-align: center;
}
.landing-page.sitelockvpn .feature.devices .logos img {
  margin: 25px 30px;
}

.landing-page.sitelockvpn .feature.pricing {
  margin: 0;
  background-color: #3d82bb;
}

.landing-page.sitelockvpn .feature.pricing h2 {
  color: #fff;
}

.landing-page.sitelockvpn .feature.pricing .pricing-box {
  margin: 30px 0;
  padding: 0;
  background-color: #fff;
}

.landing-page.sitelockvpn .feature.pricing .cycle {
  padding: 10px;
  background-color: #dfeaf3;
  color: #333;
  text-align: center;
  font-weight: bold;
}
.landing-page.sitelockvpn .feature.pricing .price {
  margin: 15px;
  padding: 15px;
  color: #3d82bb;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}
.landing-page.sitelockvpn .feature.pricing ul {
  list-style: none;
  margin: 15px;
  padding: 0;
}
.landing-page.sitelockvpn .feature.pricing ul li {
  padding: 5px;
  text-align: center;
  border-bottom: 1px solid #dce7f1;
  font-size: 0.8em;
}
.landing-page.sitelockvpn .feature.pricing ul li:last-child {
  border-bottom: 0;
}
.landing-page.sitelockvpn .signup {
  padding: 15px;
}
.landing-page.sitelockvpn .btn-signup {
  display: block;
  padding: 8px;
  background-color: #616161;
  color: #fff;
  border-radius: 5px;
  font-weight: 400;
  text-align: center;
}
.landing-page.sitelockvpn .btn-signup.highlight1 {
  background-color: #3d82bb;
}
.landing-page.sitelockvpn .btn-signup.highlight2 {
  background-color: #7bc143;
}

.landing-page.sitelockvpn .dividing-line {
  margin: 30px auto;
  padding: 0;
  background-color: #dce7f1;
  height: 3px;
  width: 200px;
}

.landing-page.sitelockvpn .all-plans {
  text-align: center;
}
.landing-page.sitelockvpn .all-plans span {
  display: block;
  padding: 10px;
}
.landing-page.sitelockvpn .all-plans img {
  margin: 5px;
}

.landing-page.sitelockvpn .feature.world span {
  display: block;
  margin: 10px 0;
  color: #3d82bb;
  font-weight: bold;
  font-size: 2.5em;
}
.landing-page.sitelockvpn .feature.world em {
  display: block;
  margin: 0 0 50px;
  font-style: normal;
}
.landing-page.sitelockvpn .feature.world img {
  max-width: 100%;
}

.landing-page.sitelockvpn .feature.countries {
  background-color: #f8f8f8;
}
.landing-page.sitelockvpn .feature.countries img {
  margin: 0;
  max-width: 100%;
}

.landing-page.marketgoo .hero .logo {
  margin: 0 auto;
  max-width: 550px;
}
.landing-page.marketgoo h3 {
  font-size: 2.8em;
}
.landing-page.marketgoo h3 em {
  font-style: normal;
  font-weight: bold;
}
.landing-page.marketgoo .video-banner {
  background-color: #5ec9f8;
  min-height: 300px;
  line-height: 300px;
  text-align: center;
  color: #fff;
}
.landing-page.marketgoo .feature-blocks {
  margin: 10px 0;
  padding: 10px 0;
}
.landing-page.marketgoo .feature-blocks .block {
  padding: 10px;
  text-align: center;
}
.landing-page.marketgoo .feature-blocks .block img {
  display: block;
  margin: 0 auto;
  max-width: 150px;
}
.landing-page.marketgoo .feature-blocks .block span {
  font-size: 1.4em;
}
.landing-page.marketgoo .feature-blocks .block p {
  font-size: 1.2em;
  font-weight: 300;
  padding: 10px 20px;
}
.landing-page.marketgoo .feature-wrapper {
  margin: 0;
  padding: 20px;
  background-color: #f0f2f4;
  border-radius: 15px;
}
.landing-page.marketgoo .plan {
  float: left;
  margin: 0 0 20px 0;
  width: 30%;
  text-align: center;
}
.landing-page.marketgoo .plan.labels {
  float: left;
  width: 40%;
  display: none;
}
.landing-page.marketgoo .plan.labels:first-child {
  display: block;
}
.landing-page.marketgoo .plan .header {
  height: 120px;
}
.landing-page.marketgoo .plan.marketgoo_pro .header h4 {
  color: #ac18b4;
  text-transform: uppercase;
}
.landing-page.marketgoo .plan .header .best-value {
  margin: 0;
  padding: 3px 10px;
  position: relative;
  top: -9px;
  background-color: #ac18b4;
  border-radius: 4px;
  text-transform: initial;
  color: #fff;
  font-size: 0.3em;
  display: none;
}
.landing-page.marketgoo .plan.marketgoo_pro .header .best-value {
  display: inline-block;
}
.landing-page.marketgoo .plan .header h4 {
  margin: 0;
  padding: 0;
  font-size: 2.4em;
  font-weight: bold;
}
.landing-page.marketgoo .plan .pricing {
  font-size: 1.2em;
  color: #57657a;
}
.landing-page.marketgoo .plan ul {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  border-top: 1px solid #bbc2ce;
}
.landing-page.marketgoo .plan ul li {
  padding: 0 20px;
  height: 55px;
  line-height: 55px;
  border-bottom: 1px solid #bbc2ce;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-page.marketgoo .plan.labels ul li {
  font-weight: bold;
  text-align: left;
  border-right: 1px solid #bbc2ce;
}
.landing-page.marketgoo .plan ul li span {
  font-weight: bold;
}
.landing-page.marketgoo .plan.marketgoo_pro ul {
  background-color: #eee;
}
.landing-page.marketgoo .plan .btn-signup {
  padding: 8px 20px;
  background-color: #5ec9f8;
  border-color: #5ec9f8;
  color: #fff;
  font-size: 1.05em;
}
.landing-page.marketgoo .carousel .carousel-indicators {
  bottom: -50px;
}
.landing-page.marketgoo .carousel .carousel-indicators li {
  background-color: #ddd;
}
.landing-page.marketgoo .carousel .carousel-inner {
  margin-bottom: 50px;
}
.landing-page.marketgoo .testimonials .testimonial {
  margin: 0 auto;
  max-width: 650px;
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.3em;
  font-style: italics;
  color: #57657a;
  text-align: center;
}
.landing-page.marketgoo .testimonials .user {
  margin: 20px auto;
  max-width: 350px;
  text-align: center;
}
.landing-page.marketgoo .testimonials .user img {
  max-width: 100px;
}
.landing-page.marketgoo .testimonials .user span {
  display: block;
  padding: 15px 0 0 0;
  font-weight: bold;
  font-size: 1.1em;
}
.landing-page.marketgoo .testimonials .user em {
  display: block;
  margin: 0 0 5px 0;
  font-style: normal;
}
.landing-page.marketgoo .faqs {
  background-color: #f0f2f4;
}
.landing-page.marketgoo .embed-responsive {
  padding-bottom: 45%;
}
@media (min-width: 768px) {
  .landing-page.marketgoo .feature-blocks .block {
    padding: 20px 20px;
  }
  .landing-page.marketgoo .feature-blocks .block img {
    max-width: 250px;
  }
  .landing-page.marketgoo .feature-blocks .block p {
    padding: 10px 40px;
  }
  .landing-page.marketgoo .feature-wrapper {
    padding: 20px 80px;
  }
  .landing-page.marketgoo .plan .header {
    height: 90px;
  }
  .landing-page.marketgoo .testimonials .testimonial {
    font-size: 1.5em;
  }
  .landing-page.marketgoo .testimonials .user .bio {
    margin-left: 120px;
  }
  .landing-page.marketgoo .testimonials .user {
    text-align: left;
  }
  .landing-page.marketgoo .testimonials .user img {
    float: left;
    max-width: 100px;
  }
  .landing-page.marketgoo .faqs .faq {
    padding: 0 20px 20px;
  }
}
@media (max-width: 767px) {
  .landing-page.marketgoo .plan .header span {
    display: block;
  }
  .landing-page.marketgoo .plan {
    font-size: 1em;
  }
  .landing-page.marketgoo .plan {
    width: 40%;
  }
  .landing-page.marketgoo .plan.labels {
    display: block;
    width: 60%;
  }
}

.landing-page.ox img {
  max-width: 100%;
}
.landing-page.ox .header {
  margin: 0;
  padding: 50px 0;
  background-color: #043856;
  min-height: 200px;
}
.landing-page.ox .header .header-content {
  padding: 30px 0;
}
.landing-page.ox .header h1 {
  margin: 30px 0;
  font-size: 1.6em;
  color: #fff;
}
.landing-page.ox .header .btn {
  padding: 10px 25px;
}
.landing-page.ox .header .logo-img {
  max-width: 400px;
}
.landing-page.ox .header .header-img {
  max-width: 70%;
}
.landing-page.ox .stand-out {
  padding: 50px 0;
  background-color: #e5e5e5;
  color: #043856;
}
.landing-page.ox .stand-out h2 {
  margin: 0 0 10px 0;
  font-size: 26px;
  color: #043856;
}
.landing-page.ox .features {
  margin: 75px 0;
  padding: 0;
  background: transparent;
  text-align: left;
}
.landing-page.ox .feature-block {
  min-height: 120px;
}
.landing-page.ox .features img {
  float: left;
}
.landing-page.ox .features p {
  margin-left: 130px;
}
.landing-page.ox .features .title {
  font-size: 1.5em;
  font-weight: bold;
}
.landing-page.ox h3 {
  margin: 0 0 40px 0;
  font-size: 2.6em;
  color: #339900;
}
.landing-page.ox .stand-out ul {
  padding: 0 20px;
}
.landing-page.ox .stand-out .wrapper {
  padding: 20px;
  font-size: 1.05em;
}
.landing-page.ox .pricing {
  margin: 75px 0;
}
.landing-page.ox .pricing table {
  width: 100%;
  color: #043855;
  font-size: 0.92em;
}
.landing-page.ox .pricing td:not(.no-border),
.landing-page.ox .pricing th {
  padding: 7px 8px;
  width: 33.33%;
  text-align: center;
  border: 1px solid #e1eaf3;
}
.landing-page.ox .pricing th {
  padding: 12px 8px;
  background-color: #3d82bb;
  color: #fff;
}
.landing-page.ox .pricing th.feature {
  background-color: #3dbb7e;
}
.landing-page.ox .pricing table tr td:first-child {
  padding: 7px 20px;
  text-align: left;
}
.landing-page.ox .pricing table tr:nth-child(even) td:first-child {
  background-color: #f3f7fa;
}
.landing-page.ox .pricing td.no-bg {
  background-color: transparent !important;
}
.landing-page.ox .pricing .pricing-label {
  padding-bottom: 20px;
  font-size: 1.6em;
}
.landing-page.ox .pricing td.buy {
  text-align: center;
  padding: 20px;
}
.landing-page.ox .faqs {
  padding: 40px 0 70px;
  background-color: #f3f7fa;
}
.landing-page.ox .faqs .question {
  margin: 30px 0 10px;
  font-weight: bold;
}
@media (max-width: 991px) {
  .landing-page.ox .header {
    text-align: center;
  }
  .landing-page.ox img {
    max-width: 70%;
  }
  .landing-page.ox .feature-tabs {
    font-size: 0.95em;
  }
  .landing-page.ox ul.feature-tabs li img {
    max-width: 60%;
  }
  .landing-page.ox .header .header-img {
    float: none;
  }
  .landing-page.ox .header .header-content {
    padding: 10px 0 30px;
  }
}

.landing-page.sitebuilder {
  background-color: #fff;
}
.landing-page.sitebuilder .logo-container {
  padding: 60px;
  text-align: center;
}
.landing-page.sitebuilder .logo-container img {
  max-width: 85%;
}
@media (min-width: 992px) {
  .landing-page.sitebuilder .logo-container img {
    max-width: 60%;
  }
}
.landing-page.sitebuilder .hero {
  margin-top: 80px;
  padding: 0;
  background-color: #293340;
}
.landing-page.sitebuilder .hero img {
  margin-top: -150px;
  padding: 0;
}
.landing-page.sitebuilder h2 {
  margin-bottom: 25px;
  text-align: center;
  font-weight: bold;
}
.landing-page.sitebuilder .intro {
  padding: 60px 0;
  background-color: #f8f9f9;
}
@media (min-width: 1200px) {
  .landing-page.sitebuilder .intro .vertical-spacer {
    height: 80px;
  }
}
.landing-page.sitebuilder .bold-line {
  background-color: #ff3377;
  width: 40%;
  height: 6px;
}
.landing-page.sitebuilder .bold-line.slim {
  width: 100px;
  height: 3px;
}
.landing-page.sitebuilder .intro h2 {
  text-align: left;
}
.landing-page.sitebuilder .intro p {
  font-size: 1.1em;
  line-height: 1.6em;
}
.landing-page.sitebuilder .intro .learn-more {
  display: inline-block;
  margin-top: 15px;
}
.landing-page.sitebuilder .features {
  padding: 60px 0;
  background-color: transparent;
  text-align: left;
}
.landing-page.sitebuilder .feature-block {
  font-size: 0.9em;
}
@media (min-width: 768px) {
  .landing-page.sitebuilder .feature-block {
    min-height: 260px;
  }
}
.landing-page.sitebuilder .tagline {
  text-align: center;
}
.landing-page.sitebuilder .nav-tabs > li {
  float: none;
  display: inline-block;
  zoom: 1;
}
.landing-page.sitebuilder .nav-tabs {
  text-align: center;
}
.landing-page.sitebuilder .nav-tabs > li > a {
  padding: 10px 30px;
  text-transform: uppercase;
  background: #f6f6f6;
  border: 0;
  color: #333;
  font-weight: bold;
  font-size: 1.1em;
  border-radius: 10px;
}
.landing-page.sitebuilder .nav-tabs a.active,
.landing-page.sitebuilder .nav-tabs a.active:focus,
.landing-page.sitebuilder .nav-tabs a.active:hover {
  border: 0;
  color: #ff3377;
  background: #ddd;
}
.landing-page.sitebuilder .carousel-indicators li {
  background-color: #aaa;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.landing-page.sitebuilder .tab-content {
  background-color: transparent;
}
.landing-page.sitebuilder .features img {
  max-width: 128px;
}
.landing-page.sitebuilder .features .title {
  display: block;
  font-size: 1.5em;
  padding-bottom: 10px;
}
.landing-page.sitebuilder .features p {
  color: #666;
}
.landing-page.sitebuilder .btn-primary {
  padding: 2px 15px;
  background-color: #ff3377;
  border-color: #ff3377;
  color: #fff;
}
.landing-page.sitebuilder .btn-primary.large {
  padding: 12px 30px;
}
.landing-page.sitebuilder .templates {
  padding: 60px 0;
  border-top: 1px solid #ddd;
}
.landing-page.sitebuilder .templates .previews {
  padding: 50px 0;
}
.landing-page.sitebuilder .templates .previews img,
.landing-page.sitebuilder .templates .previews .show-more div {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
  border: 1px solid #ddd;
}
@media (max-width: 767px) {
  .landing-page.sitebuilder .templates .previews img,
  .landing-page.sitebuilder .templates .previews .show-more div {
    height: 300px;
  }
}
.landing-page.sitebuilder .templates .previews .show-more div {
  font-size: 3em;
  text-align: center;
  line-height: 200px;
}
.landing-page.sitebuilder .templates .previews .show-more div .icon-wrapper {
  display: inline-block;
  width: 100px;
  line-height: 100px;
  background-color: #ccc;
  color: #fff;
  border-radius: 50%;
}
.landing-page.sitebuilder .templates .previews .thumb-wrapper {
  position: relative;
  overflow: hidden;
}
.landing-page.sitebuilder .templates .previews .thumb-wrapper .type-label {
  position: absolute;
  top: 11px;
  right: -31px;
  background-color: #333;
  color: #fff;
  font-size: 13px;
  padding: 3px;
  transform: rotate(30deg);
  width: 145px;
  text-align: center;
  border: 1px solid #fff;
}
.landing-page.sitebuilder .templates .previews .type-single .type-label {
  background-color: #bbb;
}
.landing-page.sitebuilder .templates .previews .type-ecom .type-label {
  background-color: #1b9636;
}
.landing-page.sitebuilder .templates .previews .tplname {
  display: block;
  padding: 10px 0 20px;
  color: #777;
  text-align: center;
}
.landing-page.sitebuilder .templates .previews a:hover .tplname {
  color: #444;
}
.landing-page.sitebuilder .pricing {
  padding: 70px 0;
  background-color: #293340;
}
@media (min-width: 992px) {
  .landing-page.sitebuilder .pricing {
    height: 850px;
  }
}
.landing-page.sitebuilder .pricing h2,
.landing-page.sitebuilder .pricing p {
  color: #fff;
}
.landing-page.sitebuilder .pricing-table {
  margin: 60px 0 0;
  padding: 0;
  background-color: #fff;
  font-weight: bold;
  font-size: 0.92em;
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: auto;
}
@media (min-width: 992px) {
  .landing-page.sitebuilder .pricing-table {
    overflow: hidden;
  }
}
.landing-page.sitebuilder .pricing-table-row {
  margin-left: -10px;
  margin-right: -10px;
  min-width: 880px;
}
.landing-page.sitebuilder .pricing-table-row:not(.col-heading):nth-child(even) {
  background-color: #f6f6f6;
}
.landing-page.sitebuilder .pricing-table-row::after {
  content: "";
  clear: both;
  display: table;
}
.landing-page.sitebuilder .pricing-table-row .col-primary {
  float: left;
  width: 40%;
  padding: 4px 40px;
}
.landing-page.sitebuilder .pricing-table-row .col-plans-1 {
  float: left;
  width: 60%;
  padding: 4px 10px;
  text-align: center;
}
.landing-page.sitebuilder .pricing-table-row .col-plans-2 {
  float: left;
  width: 30%;
  padding: 4px 10px;
  text-align: center;
}
.landing-page.sitebuilder .pricing-table-row .col-plans-3 {
  float: left;
  width: 20%;
  padding: 4px 10px;
  text-align: center;
}
.landing-page.sitebuilder .pricing-table-row .col-plans-4 {
  float: left;
  width: 15%;
  padding: 4px 10px;
  text-align: center;
}
.landing-page.sitebuilder .pricing-table-row .col-plans-5 {
  float: left;
  width: 12%;
  padding: 4px 10px;
  text-align: center;
}
.landing-page.sitebuilder .pricing-table-row.col-heading div {
  padding: 18px 10px;
  text-align: center;
}
.landing-page.sitebuilder .pricing-table i {
  color: #bbb;
}
.landing-page.sitebuilder .faq {
  padding: 80px 0;
}
.landing-page.sitebuilder .faq-block {
  padding: 0 0 20px 0;
}
@media (min-width: 992px) {
  .landing-page.sitebuilder .faq {
    margin: 160px 0 0;
  }
  .landing-page.sitebuilder .faq-block {
    padding: 0;
    min-height: 150px;
  }
}
.landing-page.sitebuilder .faq-title {
  display: block;
  padding: 20px 0;
  font-size: 1.4em;
}

.wp-toolkit {
  background-color: #fff;
}
.wp-toolkit .hero-cta {
  padding: 30px 0;
  text-align: center;
}
.wp-toolkit .hero-cta h1 {
  font-weight: bold;
  font-size: 2.5em;
}
.wp-toolkit .hero-cta h2 {
  font-size: 1.2em;
}
.wp-toolkit .hero-cta .logo {
  max-width: 229px;
  vertical-align: baseline;
  margin-bottom: -2px;
}
.wp-toolkit .hero-cta .logo-plesk {
  margin-left: 10px;
  max-height: 45px;
  vertical-align: middle;
  margin-bottom: -2px;
}
.wp-toolkit .btn-cta {
  margin-top: 25px;
  padding: 15px 75px;
}
.wp-toolkit .hero-image {
  margin-top: 100px;
  background-color: #dbe7f1;
  text-align: center;
}
.wp-toolkit .hero-image img {
  margin-top: -100px;
  padding: 0 0 50px 0;
  max-width: 100%;
}
.wp-toolkit .body-intro {
  margin: 0;
  padding: 0 0 35px;
  background-color: #dbe7f1;
}
@media (min-width: 992px) {
  .wp-toolkit .body-intro {
    height: 450px;
  }
}
.wp-toolkit .body-intro .lead {
  font-weight: bold;
}
.wp-toolkit .body-intro img {
  float: left;
  max-width: 100%;
}
.wp-toolkit .features {
  margin: 25px 0 0;
  padding: 25px 0;
}
.wp-toolkit .features .smart-updates {
  margin: 25px 0 50px;
}
.wp-toolkit .features h3 {
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
}
.wp-toolkit .feature-block {
  padding: 20px;
  text-align: center;
}
.wp-toolkit .feature-block img {
  max-width: 100px;
}
.wp-toolkit .feature-block .title {
  padding: 30px 0;
  font-size: 1.3em;
  color: #043855;
}
.wp-toolkit .pre-screenshots {
  margin: 0;
  padding: 50px 0 150px;
  background-color: #043855;
  color: #fff;
  text-align: center;
}
.wp-toolkit .pre-screenshots .title {
  padding-bottom: 30px;
  font-size: 1.5em;
}
.wp-toolkit .screenshots-row {
  margin-top: -100px;
}
.wp-toolkit .screenshots .screenshot-thumb {
  display: block;
  position: relative;
  margin-bottom: 25px;
}
.wp-toolkit .screenshots .screenshot-thumb .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transition: background-color 0.3s ease;
  background-color: rgba(0, 0, 0, 0);
}
.wp-toolkit .screenshots .screenshot-thumb .overlay img {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 60px;
}
.wp-toolkit .screenshots .screenshot-thumb:hover .overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
.wp-toolkit .screenshots .screenshot-thumb:hover .overlay img {
  display: block;
}
.wp-toolkit .screenshots img {
  width: 100%;
  height: auto;
}
.wp-toolkit .pricing {
  margin: 0;
  padding: 25px 0;
  text-align: center;
}
.wp-toolkit .pricing:after {
  content: "";
  clear: both;
  display: table;
}
.wp-toolkit .pricing .starting-from {
  margin-bottom: 40px;
  font-size: 1.6em;
  font-weight: bold;
  color: #043855;
}
.wp-toolkit .pricing .subtitle {
  margin-bottom: 20px;
  font-size: 1.2em;
}
.wp-toolkit .pricing .action-btns .btn {
  margin-bottom: 5px;
  padding: 10px 50px;
}
.wp-toolkit .service-selector {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 25px;
  border-bottom: 1px solid #dce8f2;
}
.wp-toolkit .cart {
  display: none;
  padding-top: 40px;
  text-align: left;
}
.wp-toolkit .cart-items {
  border-bottom: 1px solid #dce8f2;
}
.wp-toolkit .cart-items .item {
  padding: 10px 30px;
}
.wp-toolkit .cart-items .item:after {
  content: "";
  clear: both;
  display: table;
}
.wp-toolkit .cart-items .item:nth-child(odd) {
  background-color: #f3f7fa;
}
.wp-toolkit .cart-items .item.template {
  display: none;
}
.wp-toolkit .cart-items .product-info {
  display: inline-block;
  min-width: 450px;
  margin-right: 30px;
}
.wp-toolkit .cart-items .domain-name,
.wp-toolkit .cart-items .price {
  font-weight: bold;
}
.wp-toolkit .cart-totals {
  padding: 30px;
  font-size: 1.15em;
  color: #043855;
}
.wp-toolkit .cart-totals .cart-total-amount {
  font-weight: bold;
}
.wp-toolkit .cart-totals .btn-checkout {
  margin: 10px 0 0 0;
  padding: 10px 30px;
  width: 100%;
}
.wp-toolkit .service-selector .service {
  position: relative;
  flex: 0 0 80%;
  max-width: 80%;
  margin-bottom: 30px;
}
.wp-toolkit .service-selector .service .inner-content {
  padding: 10px;
}
.wp-toolkit .service-selector .service .in-cart-indicator {
  display: none;
  text-align: center;
}
.wp-toolkit .service-selector .service .in-cart-indicator img {
  max-width: 40px;
}
.wp-toolkit .service-selector .service .btn {
  width: 95%;
  height: 40px;
}
.wp-toolkit .service-selector .service .btn.disabled {
  background-color: #e7e7e7;
  border-color: #e7e7e7;
  color: #999;
}
.wp-toolkit .service-selector .service.in-cart .btn {
  display: none;
}
.wp-toolkit .service-selector .service.in-cart .in-cart-indicator {
  display: block;
}
.wp-toolkit .service-selector .product-name {
  padding: 10px;
  color: #3d82bb;
  text-transform: uppercase;
}
.wp-toolkit .service-selector .divider {
  margin: 0 auto;
  background-color: #d5d5d5;
  height: 1px;
  width: 100px;
}
.wp-toolkit .service-selector .domain-name {
  padding: 15px;
  font-size: 1.1em;
  font-weight: bold;
  color: #043855;
}
.wp-toolkit .service-selector .description {
  max-height: 48px;
  overflow: hidden;
}
.wp-toolkit .service-selector .price {
  font-weight: bold;
  color: #043855;
}
.wp-toolkit .faqs {
  margin: 0;
  padding: 0 0 100px 0;
}
.wp-toolkit .faqs .border-line {
  margin-top: 30px;
  width: 115px;
  height: 3px;
  background-color: #dce8f2;
}
.wp-toolkit .faqs .faq-title {
  padding: 20px 0;
  font-size: 1.1em;
  font-weight: bold;
  color: #043855;
}
.wp-toolkit .addon-na {
  padding-top: 5px;
}
@media (min-width: 768px) {
  .wp-toolkit .hero-cta {
    padding: 75px 0;
  }
  .wp-toolkit .hero-cta h1 {
    font-size: 3.4em;
  }
  .wp-toolkit .hero-cta h2 {
    font-size: 2em;
  }
  .wp-toolkit .hero-cta .logo-plesk {
    max-height: 65px;
  }
  .wp-toolkit .body-intro {
    padding: 50px 0 75px;
  }
  .wp-toolkit .features {
    margin: 50px 0;
    padding: 50px 0;
  }
  .wp-toolkit .features .smart-updates {
    margin: 50px 0 100px;
  }
  .wp-toolkit .features h3 {
    font-size: 2.4em;
    text-align: left;
  }
  .wp-toolkit .pre-screenshots {
    margin: 50px 0 0;
    padding: 75px 0 150px;
  }
  .wp-toolkit .pre-screenshots .title {
    font-size: 2em;
  }
  .wp-toolkit .pricing {
    margin: 50px 0;
    padding: 50px 0;
  }
  .wp-toolkit .pricing .subtitle {
    margin-bottom: 40px;
  }
  .wp-toolkit .cart-items .item {
    line-height: 40px;
  }
  .wp-toolkit .service-selector {
    padding-bottom: 75px;
  }
  .wp-toolkit .service-selector .service {
    flex: 0 0 250px;
    max-width: 250px;
  }
  .wp-toolkit .service-selector .service .inner-content {
    min-height: 195px;
  }
  .wp-toolkit .cart-totals .btn-checkout {
    margin: 0;
    width: auto;
  }
}

.landing-page.xovinow .content-block {
  margin: 20px 0;
  padding: 20px 0;
}
.landing-page.xovinow .header {
  margin: 0;
  padding: 50px 0;
  background-color: #10069f;
  color: #fff;
}
.landing-page.xovinow .header-img {
  float: right;
  max-width: 55% !important;
  margin-top: 0px;
}
@media (min-width: 1200px) {
  .landing-page.xovinow .header-img {
    max-width: 60% !important;
    margin-top: -60px;
  }
}
.landing-page.xovinow .header h1 {
  display: block;
  margin: 20px 0;
  color: #fff;
}
.landing-page.xovinow .header .btn {
  margin: 20px 0;
}
.landing-page.xovinow .btn-stretched {
  padding: 8px 30px;
}
.landing-page.xovinow .btn-xovinow {
  color: #10069f;
  background-color: #fff;
  border-color: #fff;
}
.landing-page.xovinow .carousel-container {
  margin: 0 20px;
  max-width: 950px;
  text-align: center;
}
.landing-page.xovinow .feature-carousel .carousel-inner {
  border-radius: 6px;
  box-shadow: 0px 0px 20px #ccc;
}
.landing-page.xovinow .feature-carousel img {
  max-width: 100%;
}
.landing-page.xovinow .feature-carousel .carousel-control {
  display: inline-block;
  margin: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #10069f;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.landing-page.xovinow .feature-carousel .carousel-control.right {
  left: auto;
  right: -70px;
}
@media (min-width: 768px) {
  .landing-page.xovinow .carousel-container {
    margin: 0 100px;
    max-width: 950px;
  }
  .landing-page.xovinow .feature-carousel .carousel-control {
    position: absolute;
    margin: 0;
    top: 50%;
    left: -70px;
    width: 40px;
    height: 40px;
    font-size: 25px;
  }
  .landing-page.xovinow .feature-carousel .carousel-control.right {
    left: auto;
    right: -70px;
  }
}
@media (min-width: 1150px) {
  .landing-page.xovinow .carousel-container {
    margin: 0 auto;
  }
}

.landing-page.xovinow .feature-tabs .nav-tabs li {
  margin: 0;
  padding: 3px;
  width: 50%;
}
@media (min-width: 576px) {
  .landing-page.xovinow .feature-tabs .nav-tabs li {
    width: 33.3%;
  }
}
@media (min-width: 991px) {
  .landing-page.xovinow .feature-tabs .nav-tabs li {
    width: 16.6%;
  }
}
.landing-page.xovinow .feature-tabs .nav-tabs > li > a,
.landing-page.xovinow .feature-tabs .nav-tabs > li > a:focus,
.landing-page.xovinow .feature-tabs .nav-tabs > li > a:hover {
  margin: 4px;
  padding: 10px;
  display: block;
  background-color: #eef4f8;
  color: #555;
  border-radius: 4px;
  border: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-page.xovinow .feature-tabs .nav-tabs > li > a.active,
.landing-page.xovinow .feature-tabs .nav-tabs > li > a.active:focus,
.landing-page.xovinow .feature-tabs .nav-tabs > li > a.active:hover {
  background-color: #10069f;
  color: #fff;
  border: 0;
}
.landing-page.xovinow .feature-tabs .tab-content img {
  max-width: 300px;
}
.landing-page.xovinow .audience i {
  margin-bottom: 15px;
  font-size: 2em;
}

.landing-page.xovinow .pricing .money-back {
  font-size: 1.6em;
  line-height: 1.2em;
  color: #043855;
}
.landing-page.xovinow .pricing .money-back span {
  font-weight: bold;
  color: #10069f;
}
.landing-page.xovinow .pricing .plan-features {
  font-weight: bold;
  color: #043855;
}
.landing-page.xovinow .pricing .plan {
  margin: 0 0 50px 0;
  padding: 0;
  text-align: center;
}
.landing-page.xovinow .pricing .plan-header {
  padding: 0 10px;
  height: 120px;
}
.landing-page.xovinow .pricing .plan-header img {
  max-width: 90%;
}
.landing-page.xovinow .pricing .plan .plan-name {
  padding: 5px;
  font-size: 1.1em;
  font-weight: bold;
  color: #043855;
  border-bottom: 4px solid #737373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-page.xovinow .pricing .plan.featured .plan-name {
  border-color: #10069f;
}
.landing-page.xovinow .pricing .plan .plan-price {
  margin-top: 8px;
  padding: 5px;
  font-size: 0.95em;
  font-weight: bold;
  color: #043855;
  border-bottom: 2px solid #f4f5f7;
}
.landing-page.xovinow .pricing .plan-feature {
  padding: 6px 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-page.xovinow .pricing .plan-feature.row-highlight {
  background-color: #f8f9fa;
}
.landing-page.xovinow .pricing .plan-feature i {
  color: #10069f;
}
.landing-page.xovinow .pricing .buy-btn {
  padding-top: 30px;
}
.landing-page.xovinow .pricing .plan.featured .buy-btn .btn {
  color: #fff;
  background-color: #10069f;
  border-color: #10069f;
}
.landing-page.xovinow .pricing .plan.featured .buy-btn .btn:hover {
  background-color: #10069f;
  border-color: #10069f;
}

.landing-page.xovinow .faq .accordion > .card {
  border: 0;
  border-radius: 5px;
}
.landing-page.xovinow .faq .accordion > .card > .card-header {
  background-color: #10069f;
  border: 0;
  border-radius: 5px;
}
.landing-page.xovinow .faq .card-header .btn {
  color: #fff;
}
.landing-page.xovinow .faq img {
  display: block;
  margin: 0 auto 20px;
}

.landing-page.nordvpn p {
  font-size: 1.1rem;
  font-weight: lighter;
}
.landing-page.nordvpn h1 {
  font-size: 2rem;
  font-weight: bold;
}
.landing-page.nordvpn h3 {
  font-size: 1.4rem;
  font-weight: bold;
}
.landing-page.nordvpn strong {
  font-weight: bold;
}
.landing-page.nordvpn {
  color: #043855;
  font-family: sans-serif;
}
.landing-page.nordvpn .blue {
  color: #4580ff;
}
.landing-page.nordvpn .line-break {
  border-bottom: 1px #dce8f2 solid;
  padding-top: 20px;
}
.landing-page.nordvpn .btn-get-nord,
.landing-page.nordvpn .btn-get-monthly,
.landing-page.nordvpn .btn-get-annually {
  font-weight: 500;
  font-size: 1.4rem;
  padding: 0.8rem 4rem;
  background: #4580ff;
  color: white;
  border: 0;
}
.landing-page.nordvpn .btn-get-deal {
  padding: 0.8rem 1.5rem;
  background: #f55368;
}
.landing-page.nordvpn .btn-get-monthly {
  background: #1b325a;
  margin-bottom: 2.5rem;
}
.landing-page.nordvpn .btn-get-annually {
  background: #4580ff;
}
.landing-page.nordvpn .hero {
  font-size: 1.25rem;
}
.landing-page.nordvpn .hero .hero-bg {
  margin: 1.25rem 0;
}
.landing-page.nordvpn .hero h1 {
  font-size: 2.125rem;
  font-weight: bold;
}
.landing-page.nordvpn .hero h2 {
  font-size: 1.75rem;
}
.landing-page.nordvpn .hero .guarantee {
  margin: 1rem 0;
  font-weight: bold;
  font-size: 1.7rem;
  color: #4580ff;
  text-transform: uppercase;
  padding-bottom: 25px;
}
.landing-page.nordvpn .hero,
.landing-page.nordvpn .feature.world {
  background: #0e1b33;
  color: white;
}
.landing-page.nordvpn .feature {
  padding: 60px 0;
  text-align: center;
}
.landing-page.nordvpn .feature.icon img,
.landing-page.nordvpn .feature.threat img {
  margin: 2rem 0;
}
.landing-page.nordvpn .feature.icon h1,
.landing-page.nordvpn .feature.comparison h1,
.landing-page.nordvpn .feature.threat h1,
.landing-page.nordvpn .feature.use h1 {
  margin: 2.5rem 0;
}
.landing-page.nordvpn .feature.pricing h1 {
  margin: 4rem 0;
}
.landing-page.nordvpn .feature.icon h3,
.landing-page.nordvpn .feature.use h3 {
  margin-bottom: 1.4rem;
}
.landing-page.nordvpn .feature.icon .col-3 {
  padding: 0 3rem;
}
.landing-page.nordvpn .feature.device p,
.landing-page.nordvpn .feature.security p,
.landing-page.nordvpn .feature.use p {
  margin-bottom: 2.5rem;
}
.landing-page.nordvpn .feature.device,
.landing-page.nordvpn .feature.security,
.landing-page.nordvpn .feature.faq {
  text-align: left;
}
.landing-page.nordvpn .feature.comparison th,
.landing-page.nordvpn .feature.comparison td {
  padding: 1rem 0;
  font-weight: lighter;
  font-size: 1.1rem;
}
.landing-page.nordvpn .feature.comparison .comparison-note {
  font-size: 0.75rem;
  text-align: center;
}
.landing-page.nordvpn .feature.comparison .comparison-note a {
  text-decoration: underline;
}
.landing-page.nordvpn .feature.world {
  text-align: center;
}
.landing-page.nordvpn .feature.world h1 {
  margin: 0 0 2.5rem;
}
.landing-page.nordvpn .feature.world .world-image {
  max-width: initial;
  margin: auto;
  opacity: 33%;
}
.landing-page.nordvpn .feature.world .world-desc {
  position: absolute;
  top: 0;
  width: 100%;
}
.landing-page.nordvpn .feature.world .world-image,
.landing-page.nordvpn .feature.world .world-tagline,
.landing-page.nordvpn .feature.world .world-data .col-6 {
  margin-bottom: 2rem;
}
.landing-page.nordvpn .feature.world .world-data p:first-of-type {
  margin-bottom: 0.5rem;
}
.landing-page.nordvpn .feature.world .world-data p:nth-of-type(2) {
  font-size: 3.25rem;
  line-height: 3.25rem;
  font-weight: bold;
  margin-bottom: 0;
}
.landing-page.nordvpn .feature.world > p {
  margin-bottom: 2.5rem;
}
.landing-page.nordvpn .feature.logo {
  background: #f2f2f2;
}
.landing-page.nordvpn .feature.logo img {
  margin: 0.75rem 0;
}
.landing-page.nordvpn .feature.security .row.h-100 {
  margin: 4rem 0 8rem;
}
.landing-page.nordvpn .feature.security .row.h-100 p {
  font-size: 1.4rem;
}
.landing-page.nordvpn .feature.use .row div {
  padding-top: 0;
}
.landing-page.nordvpn .feature.use .row.headers div {
  padding-top: 1.6rem;
  padding-bottom: 0;
}
.landing-page.nordvpn .feature.use .col-4 p {
  text-align: left;
}
.landing-page.nordvpn .feature.threat .col-4,
.landing-page.nordvpn .feature.use .col-4 {
  padding: 1.6rem 2rem;
}
.landing-page.nordvpn .feature.threat .col-4 {
  padding: 0 2rem;
}
.landing-page.nordvpn .feature.pricing .billing-cycle {
  font-size: 2.5rem;
  font-weight: lighter;
}
.landing-page.nordvpn .feature.pricing .billing-price {
  font-size: 2.5rem;
  line-height: 3rem;
  font-weight: bold;
}
.landing-page.nordvpn .feature.pricing .billing-save,
.landing-page.nordvpn .feature.faq h1 {
  margin-bottom: 2.5rem;
}
.landing-page.nordvpn .feature.faq .card {
  margin-bottom: 1.5rem;
  border: 0;
  border-radius: 0;
}
.landing-page.nordvpn .feature.faq .card-header {
  padding: 0;
  background: #1b325a;
}
.landing-page.nordvpn .feature.faq .card-header .btn {
  padding: 0.5rem 2rem;
  color: white;
  display: flex;
  justify-content: space-between;
  text-decoration: none;
}
.landing-page.nordvpn .feature.faq .card-header .btn i {
  align-self: center;
}
.landing-page.nordvpn .comparison {
  text-align: center;
}
.landing-page.nordvpn .comparison .col-2:first-of-type {
  text-align: left;
}
.landing-page.nordvpn .comparison .col-2 {
  min-height: 4rem;
  padding: 0 1rem;
  border: 1px solid #e7e7e8;
  border-bottom: none;
}
.landing-page.nordvpn .comparison .col-12:first-of-type .col-2 {
  min-height: 1.5rem;
}
.landing-page.nordvpn
  .comparison
  .col-12:nth-of-type(7)
  .col-2:not(:nth-of-type(2)),
.landing-page.nordvpn .comparison .col-12:last-of-type .col-2:nth-of-type(2) {
  border-bottom: 1px solid #e7e7e8;
}
.landing-page.nordvpn
  .comparison
  .col-12:first-of-type
  .col-2:not(:nth-of-type(2)),
.landing-page.nordvpn
  .comparison
  .col-12:last-of-type
  .col-2:not(:nth-of-type(2)) {
  border: none;
}
.landing-page.nordvpn .comparison .col-12:nth-of-type(2) .col-2:nth-of-type(2),
.landing-page.nordvpn .comparison .col-12:last-of-type .col-2:nth-of-type(2) {
  border-top: none;
}
.landing-page.nordvpn .comparison .col-2:first-of-type {
  border-right: none;
}
.landing-page.nordvpn
  .comparison
  .col-2:not(:first-of-type):not(:nth-of-type(2)) {
  border-left: none;
}
.landing-page.nordvpn .comparison .col-12:nth-of-type(2) .col-2:first-of-type {
  border-top-left-radius: 4px;
}
.landing-page.nordvpn .comparison .col-12:nth-of-type(7) .col-2:first-of-type {
  border-bottom-left-radius: 4px;
}
.landing-page.nordvpn .comparison .col-12:nth-of-type(2) .col-2:last-of-type {
  border-top-right-radius: 4px;
}
.landing-page.nordvpn .comparison .col-12:nth-of-type(7) .col-2:last-of-type {
  border-bottom-right-radius: 4px;
}
.landing-page.nordvpn .comparison .col-12:first-of-type .col-2:nth-of-type(2) {
  border-radius: 4px 4px 0 0;
}
.landing-page.nordvpn .comparison .col-12:last-of-type .col-2:nth-of-type(2) {
  border-radius: 0 0 4px 4px;
}
.landing-page.nordvpn .comparison .col-2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.landing-page.nordvpn .comparison .col-12 .col-2:nth-of-type(2) {
  border-left-color: #bed4fe;
  border-right-color: #bed4fe;
  background: #ecf3ff;
}
.landing-page.nordvpn .comparison .col-12:first-of-type .col-2:nth-of-type(2) {
  border-top-color: #bed4fe;
}
.landing-page.nordvpn .comparison .col-12:last-of-type .col-2:nth-of-type(2) {
  border-bottom-color: #bed4fe;
}
.landing-page.nordvpn .comparison .col-2 span {
  width: 100%;
}
.landing-page.nordvpn .comparison .btn-get-deal {
  font-size: 1rem;
  padding: 0.5rem 1.5rem;
}
.landing-page.nordvpn .comparison-container {
  overflow-x: auto;
  margin-bottom: 2.5rem;
}
.landing-page.nordvpn .comparison-container > .row {
  min-width: 1110px;
}
@media (max-width: 575px) {
  .landing-page.nordvpn .feature.pricing h1 {
    margin: 3.5rem 0;
  }
  .landing-page.nordvpn .hero h2 {
    font-size: 1.5rem;
  }
  .landing-page.nordvpn .hero .guarantee {
    font-size: 1.4rem;
  }
  .landing-page.nordvpn p {
    font-size: 1rem;
  }
  .landing-page.nordvpn .feature.world .world-data p:nth-of-type(2) {
    font-size: 3.75rem;
    line-height: 3rem;
  }
  .landing-page.nordvpn .feature.security .row.h-100 p {
    font-size: 1.25rem;
  }
  .landing-page.nordvpn .feature.security .row.h-100 {
    margin-bottom: 2.5rem;
  }
  .landing-page.nordvpn .feature {
    padding: 35px 0;
  }
  .landing-page.nordvpn .br-xs-space {
    content: "";
  }
  .landing-page.nordvpn .br-xs-space:after {
    content: " ";
  }
}
@media (min-width: 576px) {
  .landing-page.nordvpn .br-sm-reg {
    content: initial;
  }
  .landing-page.nordvpn .br-sm-space {
    content: "";
  }
  .landing-page.nordvpn .br-sm-space:after {
    content: " ";
  }
}
@media (min-width: 768px) {
  .landing-page.nordvpn .br-md-reg {
    content: initial;
  }
  .landing-page.nordvpn .br-md-space {
    content: "";
  }
  .landing-page.nordvpn .br-md-space:after {
    content: " ";
  }
}
@media (min-width: 992px) {
  .landing-page.nordvpn .feature.logo img,
  .landing-page.nordvpn .feature.world .world-image {
    margin: 0;
  }
  .landing-page.nordvpn .br-lg-reg {
    content: initial;
  }
  .landing-page.nordvpn .br-lg-space {
    content: "";
  }
  .landing-page.nordvpn .br-lg-space:after {
    content: " ";
  }
}
@media (min-width: 1200px) {
  .landing-page.nordvpn .feature.world {
    text-align: left;
  }
  .landing-page.nordvpn .feature.world .world-desc {
    position: initial;
  }
  .landing-page.nordvpn .feature.world .world-image {
    position: absolute;
    top: 0;
    right: 2rem;
    opacity: 100%;
  }
  .landing-page.nordvpn .br-xl-reg {
    content: initial;
  }
  .landing-page.nordvpn .br-xl-space {
    content: "";
  }
  .landing-page.nordvpn .br-xl-space:after {
    content: " ";
  }
}

.landing-page.threesixtymonitoring {
  font-family: "Open Sans", sans-serif;
  font-size: 0.875rem;
  color: #42535e;
}
.landing-page.threesixtymonitoring h1,
.landing-page.threesixtymonitoring h2,
.landing-page.threesixtymonitoring h3,
.landing-page.threesixtymonitoring .row-revenue {
  font-weight: 600 !important;
  color: #222;
}
.landing-page.threesixtymonitoring h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}
.landing-page.threesixtymonitoring h2 {
  font-size: 2.125rem;
  margin-bottom: 2rem;
}
.landing-page.threesixtymonitoring h3 {
  font-size: 1.75rem;
}
.landing-page.threesixtymonitoring .p-tagline {
  font-size: 1rem;
  margin-bottom: 2rem;
}
.landing-page.threesixtymonitoring .section-header .tab-server .p-tagline {
  font-size: 2.125rem;
  font-weight: 600;
}
.landing-page.threesixtymonitoring section {
  padding: 5rem 0;
  text-align: center;
}
.landing-page.threesixtymonitoring .section-discover,
.landing-page.threesixtymonitoring .section-features {
  padding: 7.5rem 0;
}
.landing-page.threesixtymonitoring .section-features .tab-content {
  padding-bottom: 1rem;
}
.landing-page.threesixtymonitoring .section-notifications,
.landing-page.threesixtymonitoring .section-monitoring,
.landing-page.threesixtymonitoring .section-features .row-features {
  padding: 3rem 0;
}
.landing-page.threesixtymonitoring .nav-secondary {
  padding-top: 5.5rem;
}
.landing-page.threesixtymonitoring .section-discover .row-features {
  margin: 5rem 0;
}
.landing-page.threesixtymonitoring .section-header .tab-server h2 {
  margin-bottom: 1rem;
}
.landing-page.threesixtymonitoring .modal-results .modal-body,
.landing-page.threesixtymonitoring .section-header,
.landing-page.threesixtymonitoring .tab-website .section-monitoring {
  background-color: #b8d2ff;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
}
.landing-page.threesixtymonitoring .btn-primary {
  background-color: #8952cb !important;
  border-color: #8952cb !important;
  border-radius: 2.5rem;
  color: #fff !important;
  font-weight: 600;
  padding: 1.125rem;
  text-transform: uppercase;
  width: 100%;
  max-width: 25rem;
}
.landing-page.threesixtymonitoring .btn:disabled {
  opacity: initial;
}
.landing-page.threesixtymonitoring .btn-search {
  background-color: #000;
  border-radius: 0.25rem;
  color: #fff;
  width: 100%;
}
.landing-page.threesixtymonitoring .section-pricing .btn-primary {
  width: 100%;
}
.landing-page.threesixtymonitoring .section-header {
  color: #222;
}
.landing-page.threesixtymonitoring .section-header .form-control {
  font-weight: 600;
  color: #222;
}
.landing-page.threesixtymonitoring .img-logo,
.landing-page.threesixtymonitoring .img-full,
.landing-page.threesixtymonitoring .tab-website h1 {
  margin-bottom: 2rem;
}
.landing-page.threesixtymonitoring .modal-results .modal-header {
  background: linear-gradient(to right, #902a6d, #ce3b56);
  color: #fff;
}
.landing-page.threesixtymonitoring .modal-results .modal-dialog {
  max-width: 970px;
}
.landing-page.threesixtymonitoring .modal-results .modal-body > div {
  margin: 0 1rem;
}
.landing-page.threesixtymonitoring .modal-results .modal-body p {
  text-transform: uppercase;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 1.5rem 0;
}
.landing-page.threesixtymonitoring .modal-results .modal-body .btn {
  margin: 1.5rem 0;
}
.landing-page.threesixtymonitoring .modal-results .div-results {
  margin-bottom: 4rem;
}
.landing-page.threesixtymonitoring
  .modal-results
  .div-results
  > div:first-child {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.landing-page.threesixtymonitoring
  .modal-results
  .div-results
  > div:nth-child(2) {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.landing-page.threesixtymonitoring
  .modal-results
  .div-results
  [data-metric="host_status"] {
  text-transform: uppercase;
}
.landing-page.threesixtymonitoring .modal-results .row-legend i {
  margin: 0 1rem;
}
.landing-page.threesixtymonitoring .modal-results .row-legend {
  font-size: 0.75rem;
  font-weight: 600;
}
.landing-page.threesixtymonitoring .modal-results .result-positive {
  color: #00c74f;
}
.landing-page.threesixtymonitoring .modal-results .result-concern {
  color: #ffcc1a;
}
.landing-page.threesixtymonitoring .modal-results .result-negative {
  color: #f1526f;
}
.landing-page.threesixtymonitoring .modal-results .div-modal-border {
  width: 100%;
  border-bottom: solid 1px #b8d2ff;
  margin: 2rem 0;
}
.landing-page.threesixtymonitoring .nav-item {
  width: 50%;
}
.landing-page.threesixtymonitoring .nav-item.nav-full-width {
  width: 100%;
}
.landing-page.threesixtymonitoring .nav-link {
  color: #42535e;
  font-weight: 600;
  height: 100%;
}
.landing-page.threesixtymonitoring .nav-primary .nav-link {
  background-color: #f1f7ff;
  border-radius: 0 0 0.25rem 0.25rem;
  padding: 1.875rem;
  font-size: 1.25rem;
}
.landing-page.threesixtymonitoring .modal-results .modal-header,
.landing-page.threesixtymonitoring .nav-primary .nav-link.active {
  background: linear-gradient(to right, #902a6d, #ce3b56);
  color: #fff;
}
.landing-page.threesixtymonitoring .nav-secondary .nav-link {
  background-color: #d9e8ff;
  border-radius: 0.25rem 0.25rem 0 0;
  padding: 1.875rem;
}
.landing-page.threesixtymonitoring .nav-secondary .nav-link.active {
  background-color: #fff;
  border-radius: 0;
  border-top: solid #9b65db 3px;
}
.landing-page.threesixtymonitoring .tab-content {
  padding: initial;
}
.landing-page.threesixtymonitoring .div-heading-text {
  margin-top: -7rem;
}
.landing-page.threesixtymonitoring .section-features {
  background: linear-gradient(#dce9ff, #ffffff);
}
.landing-page.threesixtymonitoring .row-features {
  font-weight: 600;
}
.landing-page.threesixtymonitoring .row-features span {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.landing-page.threesixtymonitoring .row-features img {
  margin: 2rem 0;
  width: 7.5rem;
}
.landing-page.threesixtymonitoring .row-features p {
  margin-bottom: 2rem;
}
.landing-page.threesixtymonitoring .row-notifications {
  font-size: 0.75rem;
}
.landing-page.threesixtymonitoring .row-notifications > div {
  margin: 1rem 0;
}
.landing-page.threesixtymonitoring .col-brand-img {
  height: 92px;
}
.landing-page.threesixtymonitoring .section-monitoring {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}
.landing-page.threesixtymonitoring .tab-server .section-monitoring {
  margin-bottom: 5rem;
}
.landing-page.threesixtymonitoring .section-monitoring .container > .row {
  align-items: center;
}
.landing-page.threesixtymonitoring .row-revenue {
  color: #fff;
  font-size: 1.25rem;
  margin: 2.25rem 0;
}
.landing-page.threesixtymonitoring .row-revenue .row div:first-child,
.landing-page.threesixtymonitoring .row-revenue .row div:nth-child(4) {
  font-size: 2.5rem;
}
.landing-page.threesixtymonitoring .row-revenue > div {
  padding: 15px;
}
.landing-page.threesixtymonitoring .row-revenue > div .row {
  border-radius: 0.5rem;
  margin: auto;
  padding: 1.875rem 0;
}
.landing-page.threesixtymonitoring .row-revenue > div:first-child .row {
  background-color: #ac86da;
}
.landing-page.threesixtymonitoring .row-revenue > div:nth-child(2) .row {
  background-color: #a175d5;
}
.landing-page.threesixtymonitoring .row-revenue > div:nth-child(3) .row {
  background-color: #9563d0;
}
.landing-page.threesixtymonitoring .row-revenue > div:last-child .row {
  background-color: #8952cb;
}
.landing-page.threesixtymonitoring .div-pricing-container {
  margin-bottom: 3rem;
}
.landing-page.threesixtymonitoring .div-pricing {
  min-width: 930px;
}
.landing-page.threesixtymonitoring .div-pricing .col-4 > div,
.landing-page.threesixtymonitoring
  .div-pricing
  .row:not(.row-order)
  .col-2
  > div {
  padding: 0.5rem;
}
.landing-page.threesixtymonitoring .div-pricing .row-order {
  margin-bottom: 1rem;
}
.landing-page.threesixtymonitoring .row-amount {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.div-pricing > div:nth-child(2) > div {
  border-top: solid #f8fafc 3px;
}
.landing-page.threesixtymonitoring .div-heading-border {
  border-bottom: solid #9b65db 3px;
  margin: 0.5rem;
}
.landing-page.threesixtymonitoring .div-pricing-container ul {
  list-style: none;
  padding: 0;
}
.landing-page.threesixtymonitoring .div-pricing-container li {
  height: 2.5rem;
  line-height: 2.5rem;
}
.landing-page.threesixtymonitoring
  .div-pricing-container
  .div-feature-labels
  li,
.landing-page.threesixtymonitoring
  .div-pricing-container
  .div-feature-label-starting {
  padding-left: 0.5rem;
}
.landing-page.threesixtymonitoring .header {
  height: 6.25rem;
}
.landing-page.threesixtymonitoring .div-feature-price {
  margin: 0 1rem;
}
.landing-page.threesixtymonitoring .div-feature-label-starting,
.landing-page.threesixtymonitoring .div-feature-price {
  margin-top: 2.5rem;
  line-height: 2.5rem;
}
.landing-page.threesixtymonitoring .div-feature-order {
  margin: 1rem;
  margin-bottom: 3rem;
}
.landing-page.threesixtymonitoring .div-feature-labels {
  text-align: left;
  width: 65%;
  float: left;
}
.landing-page.threesixtymonitoring .div-feature-values {
  width: 35%;
  float: left;
}
.landing-page.threesixtymonitoring
  .div-pricing-container
  .div-feature-labels
  ul
  li:nth-child(2n + 2) {
  background-color: #f1f5f9;
}
.landing-page.threesixtymonitoring
  .div-pricing-container
  .div-feature-values
  li {
  text-transform: lowercase;
}
.landing-page.threesixtymonitoring
  .div-pricing-container
  .div-feature-values
  ul
  li:nth-child(2n + 2) {
  background-color: #f8fafc;
}
.landing-page.threesixtymonitoring .div-feature-price {
  background-color: #b8d2ff;
  color: #fff;
}
.landing-page.threesixtymonitoring .div-feature-labels,
.landing-page.threesixtymonitoring .div-plan-name,
.landing-page.threesixtymonitoring .div-feature-price,
.landing-page.threesixtymonitoring .section-pricing strong {
  font-weight: 600;
}
.landing-page.threesixtymonitoring .div-feature-label-starting {
  background-color: #8952cb;
  color: #fff;
}
.landing-page.threesixtymonitoring .section-pricing .fa-times {
  color: #2ea2e2;
}
.landing-page.threesixtymonitoring .div-sample-price {
  filter: blur(3px);
  -webkit-filter: blur(3px);
}
.landing-page.threesixtymonitoring .section-faq .btn-link {
  color: #42535e;
  font-weight: 600;
  text-transform: uppercase;
  text-align: left;
  font-size: 0.9rem;
}
.landing-page.threesixtymonitoring .section-faq .card {
  border: 0;
  margin: 0;
}
.landing-page.threesixtymonitoring .section-faq .card-header {
  background-color: #fff;
  border-bottom: solid #f6f9ff 3px;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.landing-page.threesixtymonitoring .section-faq .card-body {
  font-weight: 600;
  text-align: left;
}
.landing-page.threesixtymonitoring .section-faq .fa-plus,
.landing-page.threesixtymonitoring .section-faq .fa-minus {
  color: #2ea2e2;
  cursor: pointer;
}
@media (min-width: 768px) {
  .landing-page.threesixtymonitoring .modal-results .row-legend i {
    margin: 0 0.5rem;
  }
  .landing-page.threesixtymonitoring
    .modal-results
    .div-results
    > div:nth-child(2) {
    font-size: 1.75rem;
  }
  .landing-page.threesixtymonitoring .div-feature-labels,
  .landing-page.threesixtymonitoring .div-plan-name,
  .landing-page.threesixtymonitoring .div-feature-price {
    font-weight: 600;
    font-size: 1rem;
  }
  .landing-page.threesixtymonitoring .div-feature-labels.feature-count-2 {
    width: 50%;
  }
  .landing-page.threesixtymonitoring .div-feature-values.feature-count-2 {
    width: 25%;
  }
  .landing-page.threesixtymonitoring
    .div-pricing-container
    > .div-feature-labels.feature-count-2:not(:first-child),
  .landing-page.threesixtymonitoring
    .div-pricing-container
    > .div-feature-labels.feature-count-3:not(:first-child),
  .landing-page.threesixtymonitoring
    .div-pricing-container
    > .div-feature-labels.feature-count-4:not(:first-child) {
    display: none;
  }
  .landing-page.threesixtymonitoring
    .div-pricing-container
    > .div-feature-labels.feature-count-4:nth-child(5) {
    display: block;
  }
  .landing-page.threesixtymonitoring .div-feature-labels.feature-count-3 {
    width: 40%;
  }
  .landing-page.threesixtymonitoring .div-feature-values.feature-count-3 {
    width: 20%;
  }
  .landing-page.threesixtymonitoring .div-feature-labels.feature-count-4 {
    width: 50%;
  }
  .landing-page.threesixtymonitoring .div-feature-values.feature-count-4 {
    width: 25%;
  }
}
@media (min-width: 992px) {
  .landing-page.threesixtymonitoring .section-header,
  .landing-page.threesixtymonitoring .tab-website .section-monitoring,
  .landing-page.threesixtymonitoring .section-faq {
    text-align: left;
  }
  .landing-page.threesixtymonitoring .section-faq h2 {
    text-align: center;
  }
  .landing-page.threesixtymonitoring .div-feature-labels,
  .landing-page.threesixtymonitoring .div-plan-name,
  .landing-page.threesixtymonitoring .div-feature-price {
    font-weight: 600;
    font-size: 1.125rem;
  }
  .landing-page.threesixtymonitoring .div-feature-labels.feature-count-4 {
    width: 40%;
  }
  .landing-page.threesixtymonitoring .div-feature-values.feature-count-4 {
    width: 15%;
  }
  .landing-page.threesixtymonitoring
    .div-pricing-container
    > .div-feature-labels.feature-count-4:not(:first-child) {
    display: none;
  }
}

.landing-page.ssl .secure-wildcard p {
  margin-top: 28px;
  margin-bottom: 0;
}

.landing-page.ssl .secure-wildcard h2,
.landing-page.ssl .secure-wildcard h4 {
  font-weight: bold;
}

.landing-page.ssl .secure-wildcard ul {
  padding-left: 0;
  margin-top: 8px;
}

.landing-page.ssl .secure-wildcard ul li {
  list-style-position: inside;
}

.landing-page.ssl .secure-wildcard .quote-section {
  padding-top: 70px;
}

.landing-page.ssl .secure-wildcard .quote-section img {
  margin: 10px 0;
}
.landing-page.ssl .secure-wildcard .quote-section p {
  margin-bottom: 28px;
}

.landing-page.ssl .secure-wildcard .quote-section a {
  display: inline-block;
  margin-top: 28px;
}

.landing-page.ssl .secure-wildcard q.google-quote {
  font-size: 28px;
  font-weight: bolder;
  font-style: italic;
}

#nav-ssl {
  white-space: nowrap;
}

/* Ion.RangeSlider
// css version 2.0.3
// © 2013-2014 Denis Ineshin | IonDen.com
// ===================================================================================================================*/

/* =====================================================================================================================
// RangeSlider */

.irs {
    position: relative; display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
    .irs-line {
        position: relative; display: block;
        overflow: hidden;
        outline: none !important;
    }
        .irs-line-left, .irs-line-mid, .irs-line-right {
            position: absolute; display: block;
            top: 0;
        }
        .irs-line-left {
            left: 0; width: 11%;
        }
        .irs-line-mid {
            left: 9%; width: 82%;
        }
        .irs-line-right {
            right: 0; width: 11%;
        }

    .irs-bar {
        position: absolute; display: block;
        left: 0; width: 0;
    }
        .irs-bar-edge {
            position: absolute; display: block;
            top: 0; left: 0;
        }

    .irs-shadow {
        position: absolute; display: none;
        left: 0; width: 0;
    }

    .irs-slider {
        position: absolute; display: block;
        cursor: default;
        z-index: 1;
    }
        .irs-slider.single {

        }
        .irs-slider.from {

        }
        .irs-slider.to {

        }
        .irs-slider.type_last {
            z-index: 2;
        }

    .irs-min {
        position: absolute; display: block;
        left: 0;
        cursor: default;
    }
    .irs-max {
        position: absolute; display: block;
        right: 0;
        cursor: default;
    }

    .irs-from, .irs-to, .irs-single {
        position: absolute; display: block;
        top: 0; left: 0;
        cursor: default;
        white-space: nowrap;
    }

.irs-grid {
    position: absolute; display: none;
    bottom: 0; left: 0;
    width: 100%; height: 20px;
}
.irs-with-grid .irs-grid {
    display: block;
}
    .irs-grid-pol {
        position: absolute;
        top: 0; left: 0;
        width: 1px; height: 8px;
        background: #000;
    }
    .irs-grid-pol.small {
        height: 4px;
    }
    .irs-grid-text {
        position: absolute;
        bottom: 0; left: 0;
        white-space: nowrap;
        text-align: center;
        font-size: 9px; line-height: 9px;
        padding: 0 3px;
        color: #000;
    }

.irs-disable-mask {
    position: absolute; display: block;
    top: 0; left: -1%;
    width: 102%; height: 100%;
    cursor: default;
    background: rgba(0,0,0,0.0);
    z-index: 2;
}
.irs-disabled {
    opacity: 0.4;
}
.lt-ie9 .irs-disabled {
    filter: alpha(opacity=40);
}


.irs-hidden-input {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    z-index: -9999 !important;
    background: none !important;
    border-style: solid !important;
    border-color: transparent !important;
}

/* Ion.RangeSlider, Simple Skin
// css version 2.0.3
// © Denis Ineshin, 2014    https://github.com/IonDen
// © guybowden, 2014        https://github.com/guybowden
// ===================================================================================================================*/

/* =====================================================================================================================
// Skin details */

.irs {
    height: 55px;
}
.irs-with-grid {
    height: 75px;
}
.irs-line {
    height: 10px; top: 33px;
    background: #EEE;
    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); /* W3C */
    border: 1px solid #CCC;
    border-radius: 16px;
    -moz-border-radius: 16px;
}
    .irs-line-left {
        height: 8px;
    }
    .irs-line-mid {
        height: 8px;
    }
    .irs-line-right {
        height: 8px;
    }

.irs-bar {
    height: 10px; top: 33px;
    border-top: 1px solid #428bca;
    border-bottom: 1px solid #428bca;
    background: #428bca;
    background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
}
    .irs-bar-edge {
        height: 10px; top: 33px;
        width: 14px;
        border: 1px solid #428bca;
        border-right: 0;
        background: #428bca;
        background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
        border-radius: 16px 0 0 16px;
        -moz-border-radius: 16px 0 0 16px;
    }

.irs-shadow {
    height: 2px; top: 38px;
    background: #000;
    opacity: 0.3;
    border-radius: 5px;
    -moz-border-radius: 5px;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=30);
}

.irs-slider {
    top: 25px;
    width: 27px; height: 27px;
    border: 1px solid #AAA;
    background: #DDD;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
    border-radius: 27px;
    -moz-border-radius: 27px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}

.irs-slider.state_hover, .irs-slider:hover {
    background: #FFF;
}

.irs-min, .irs-max {
    color: #333;
    font-size: 12px; line-height: 1.333;
    text-shadow: none;
    top: 0;
    padding: 1px 5px;
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
    -moz-border-radius: 3px;
}

.lt-ie9 .irs-min, .lt-ie9 .irs-max {
    background: #ccc;
}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 14px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: #428bca;
    border-radius: 3px;
    -moz-border-radius: 3px;
}
.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
    background: #999;
}

.irs-grid {
    height: 27px;
}
.irs-grid-pol {
    opacity: 0.5;
    background: #428bca;
}
.irs-grid-pol.small {
    background: #999;
}

.irs-grid-text {
    bottom: 5px;
    color: #99a4ac;
}

.irs-disabled {
}

/*!
 * WHMCS Twenty-One Theme
 * OAuth Stylesheet
 * Copyright (c) 2020 WHMCS Limited
 * https://www.whmcs.com/license/
 */

:where(html[data-hp-page="oauth"]) body {
  background-color: #efefef;
}

:where(html[data-hp-page="oauth"]) section#header {
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid #ccc;
  font-size: 0.8em;
}

:where(html[data-hp-page="oauth"]) section#content {
  margin: 30px;
}

:where(html[data-hp-page="oauth"]) section#footer {
  margin: 40px 0 0 0;
  padding: 10px;
  font-size: 0.8em;
  text-align: center;
}

:where(html[data-hp-page="oauth"]) .content-container {
  margin: 0 auto;
  padding: 10px;
  max-width: 550px;
  background-color: #fff;
  border-radius: 6px;
}

:where(html[data-hp-page="oauth"]) .app-logo {
  margin: 0;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

:where(html[data-hp-page="oauth"]) .app-logo,
:where(html[data-hp-page="oauth"]) .app-logo img {
  max-height: 100px;
}

:where(html[data-hp-page="oauth"]) .content-padded {
  margin: 0;
  padding: 30px 50px;
}

:where(html[data-hp-page="oauth"]) .action-buttons {
  margin: 10px 0 0 0;
  padding: 10px;
  border-top: 1px solid #ccc;
  background-color: #efefef;
  text-align: right;
  font-size: 0.9em;
  border-radius: 0 0 6px 6px;
}

/* header.tpl */
/* =========================================================
   AlvandNetwork Header
   Clean redesign
   Namespace: alh-
   ========================================================= */

:root {
    --alh-page-bg: var(--hp-page);
    --alh-surface: var(--hp-surface);
    --alh-surface-soft: var(--hp-surface-soft);

    --alh-border: #e4e9f1;
    --alh-border-strong: #d4dce8;
    --alh-divider: #edf1f5;

    --alh-text: #172033;
    --alh-text-2: #344054;
    --alh-muted: #667085;
    --alh-muted-2: #98a2b3;

    --alh-primary: var(--hp-primary);
    --alh-primary-hover: var(--hp-primary-hover);
    --alh-primary-soft: var(--hp-primary-soft);
    --alh-primary-border: var(--hp-primary-line);

    --alh-success: #10b981;

    --alh-warning: #f59e0b;
    --alh-warning-hover: #d97706;

    --alh-danger: #ef4444;
    --alh-danger-soft: #fef2f2;

    --alh-shadow:
        0 1px 2px rgba(15, 23, 42, 0.02),
        0 12px 32px rgba(15, 23, 42, 0.055);

    --alh-shadow-dropdown:
        0 20px 48px rgba(15, 23, 42, 0.13),
        0 4px 12px rgba(15, 23, 42, 0.04);

    --alh-transition: 240ms cubic-bezier(.22, .8, .24, 1);
}


/* =========================================================
   Base
   ========================================================= */

.alh-header,
.alh-header * {
    box-sizing: border-box;
}

body.alh-drawer-open {
    overflow: hidden;
}

.alh-header {
    position: relative;
    top: 0;
    z-index: 1050;

    direction: rtl;
    text-align: right;

    background: #ffffff;
    border-bottom: 1px solid var(--alh-border);

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);

    transition: box-shadow var(--alh-transition);
}



/* =========================================================
   Topbar
   ========================================================= */

.alh-topbar {
    min-height: 36px;

    background: #ffffff;
    border-bottom: 1px solid var(--alh-divider);
}

.alh-topbar-inner {
    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.alh-breadcrumb {
    min-width: 0;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    list-style: none;
    overflow: hidden;

    white-space: nowrap;
}

.alh-breadcrumb-item {
    min-width: 0;

    display: flex;
    align-items: center;

    color: var(--alh-muted-2);

    font-size: 0.76rem;
    font-weight: 700;
}

.alh-breadcrumb-item + .alh-breadcrumb-item::before {
    content: "/";

    margin: 0 9px;

    color: #d0d5dd;
    font-weight: 500;
}

.alh-breadcrumb-item a {
    color: var(--alh-muted);

    text-decoration: none !important;

    transition: color var(--alh-transition);
}

.alh-breadcrumb-item a:hover {
    color: var(--alh-primary);
}

.alh-breadcrumb-item.active {
    max-width: 320px;

    overflow: hidden;

    color: var(--alh-text-2);

    text-overflow: ellipsis;
}

.alh-top-tools {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 8px;
}

.alh-top-link,
.alh-network-status {
    min-height: 28px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--alh-muted);

    font-size: 0.74rem;
    font-weight: 700;
}

.alh-top-link {
    padding: 0 8px;

    border-radius: 8px;

    text-decoration: none !important;

    transition:
        color var(--alh-transition),
        background-color var(--alh-transition);
}

.alh-top-link i {
    color: var(--alh-primary);
    font-size: 0.72rem;
}

.alh-top-link:hover {
    color: var(--alh-primary) !important;
    background: var(--alh-primary-soft);
}


.alh-social-links {
    display: flex;
    align-items: center;

    gap: 4px;
}

.alh-social-link {
    width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--alh-muted) !important;
    background: transparent;

    border: 1px solid transparent;
    border-radius: 8px;

    text-decoration: none !important;

    transition:
        color var(--alh-transition),
        background-color var(--alh-transition),
        border-color var(--alh-transition),
        transform var(--alh-transition);
}

.alh-social-link i {
    font-size: 0.88rem;
}

.alh-social-link:hover,
.alh-social-link:focus {
    transform: translateY(-1px);
}

.alh-social-telegram:hover,
.alh-social-telegram:focus {
    color: #229ed9 !important;
    background: rgba(34, 158, 217, 0.08);
    border-color: rgba(34, 158, 217, 0.16);
}

.alh-social-instagram:hover,
.alh-social-instagram:focus {
    color: #e4405f !important;
    background: rgba(228, 64, 95, 0.08);
    border-color: rgba(228, 64, 95, 0.16);
}

.alh-social-whatsapp:hover,
.alh-social-whatsapp:focus {
    color: #25d366 !important;
    background: rgba(37, 211, 102, 0.08);
    border-color: rgba(37, 211, 102, 0.16);
}


/* =========================================================
   Unified Header Card
   ========================================================= */

.alh-main {
    padding: 10px 0 8px;
}

.alh-header-card {
    position: relative;
    z-index: 10;

    width: 100%;

    overflow: visible;

    background: transparent;
    border: 0;
    border-radius: 0;

    box-shadow: none;
}

.alh-header-card::before {
    display: none;
}

.alh-header-main {
    position: relative;
    z-index: 120;

    min-height: 72px;

    padding: 10px 16px;

    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        auto;

    align-items: center;

    gap: 16px;
}



.alh-header-main > .alh-brand {
    grid-column: 1;
}

.alh-header-main > .alh-actions {
    grid-column: 2;
}






/* =========================================================
   Brand
   ========================================================= */

.alh-brand {
    min-width: 0;

    display: flex;
    align-items: center;
}

.alh-brand-link {
    min-width: 0;

    display: inline-flex;
    align-items: center;

    text-decoration: none !important;
}

.alh-brand img {
    display: block;

    width: auto;

    max-width: 172px;
    max-height: 50px;

    object-fit: contain;
}

.alh-brand-name {
    color: var(--alh-text);

    font-size: 1.1rem;
    font-weight: 900;
}




/* =========================================================
   Header Actions
   ========================================================= */

.alh-actions {
    position: relative;
    z-index: 130;

    display: flex;
    align-items: center;

    gap: 7px;
}

.alh-actions > .dropdown {
    position: relative;
    z-index: 140;
}

.alh-action-btn {
    position: relative;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--alh-text-2) !important;
    background: #ffffff;

    border: 1px solid var(--alh-border);
    border-radius: 10px;

    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.025);

    text-decoration: none !important;

    cursor: pointer;

    transition:
        color var(--alh-transition),
        background-color var(--alh-transition),
        border-color var(--alh-transition),
        box-shadow var(--alh-transition);
}

.alh-action-btn:hover,
.alh-action-btn:focus {
    color: var(--alh-primary) !important;
    background: var(--alh-primary-soft);
    border-color: var(--alh-primary-border);

    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.07);
}

.alh-action-btn::after {
    display: none !important;
}

.alh-action-btn i {
    font-size: 0.84rem;
}

.alh-cart-btn {
    color: var(--alh-primary) !important;
    background: var(--alh-primary-soft);
    border-color: var(--alh-primary-border);
}

.alh-notification-badge {
    position: absolute;

    top: -6px;
    left: -5px;

    min-width: 21px;
    height: 21px;

    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: var(--alh-danger);

    border: 2px solid #ffffff;
    border-radius: 999px;

    font-size: 0.56rem;
    font-weight: 900;
}


/* =========================================================
   Account Trigger
   ========================================================= */

.alh-account {
    min-width: 184px;
    height: auto;

    padding: 6px 6px 6px 6px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--alh-text-2) !important;
    background: #ffffff;

    border: 1px solid var(--alh-border);
    border-radius: 10px;

    text-decoration: none !important;

    transition:
        background-color var(--alh-transition),
        border-color var(--alh-transition),
        box-shadow var(--alh-transition);
}

.alh-account::after {
    display: none !important;
}

.alh-account:hover,
.alh-account:focus {
    background: #fbfdff;
    border-color: var(--alh-primary-border);

    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.06);
}

.alh-account-avatar {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #60a5fa,
            #2563eb 55%,
            #1d4ed8
        );

    border-radius: 10px;

    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);

    font-size: 0.78rem;
}

.alh-account-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.alh-account-name {
    max-width: 122px;

    overflow: hidden;

    color: var(--alh-text);

    font-size: 0.82rem;
    font-weight: 850;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.alh-account-label {
    color: var(--alh-muted);
    font-size: 0.68rem;
    font-weight: 500;
}

.alh-account-arrow {
    margin-right: auto;

    color: var(--alh-muted-2);

    font-size: 0.55rem;

    transition: transform var(--alh-transition);
}

.alh-account[aria-expanded="true"] .alh-account-arrow {
    transform: rotate(180deg);
}

.alh-login-btn {
    min-width: 120px;
    height: 46px;

    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #ffffff !important;
    background: var(--alh-primary);

    border: 1px solid var(--alh-primary);
    border-radius: 10px;

    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.16);

    font-size: 0.78rem;
    font-weight: 800;

    text-decoration: none !important;
}

.alh-login-btn:hover {
    color: #ffffff !important;
    background: var(--alh-primary-hover);
    border-color: var(--alh-primary-hover);
}


/* =========================================================
   Navigation - Inside Header Card
   ========================================================= */

.alh-nav-shell {
    position: relative;

    min-height: 52px;

    padding-top: 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    border-top: 1px solid var(--alh-divider);
}

.alh-nav-list {
    min-width: 0;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    gap: 4px;

    list-style: none;
}

.alh-nav-item {
    position: relative;
}

.alh-nav-link {
    position: relative;

    min-height: 40px;

    padding: 0 13px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: var(--alh-text-2) !important;
    background: transparent;

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    text-decoration: none !important;

    transition:
        color var(--alh-transition),
        background-color var(--alh-transition),
        border-color var(--alh-transition);
}

.alh-nav-link::before {
    content: "";

    position: absolute;

    right: 11px;
    bottom: 0px;
    left: 11px;

    height: 2px;

    background: linear-gradient(
        90deg,
        rgba(37, 99, 235, 0) 0%,
        rgba(37, 99, 235, 0.35) 18%,
        var(--alh-primary) 50%,
        rgba(37, 99, 235, 0.35) 82%,
        rgba(37, 99, 235, 0) 100%
    );

    border-radius: 999px;

    opacity: 0;

    transform: scaleX(0.55);

    transition:
        opacity var(--alh-transition),
        transform var(--alh-transition);
}

.alh-nav-icon {
    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--alh-muted);
    background: var(--alh-surface-soft);

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 0.7rem;
}

.alh-nav-chevron {
    color: #aab4c2;

    font-size: 0.5rem;

    transition: transform var(--alh-transition);
}

.alh-nav-item:hover > .alh-nav-link,
.alh-nav-item:focus-within > .alh-nav-link,
.alh-nav-item.is-current > .alh-nav-link {
    color: var(--alh-primary) !important;
    background: #f8fbff;
    border-color: var(--alh-primary-border);
}

.alh-nav-item:hover > .alh-nav-link::before,
.alh-nav-item:focus-within > .alh-nav-link::before,
.alh-nav-item.is-current > .alh-nav-link::before {
    opacity: 1;
    transform: scaleX(1);
}

.alh-nav-item:hover > .alh-nav-link .alh-nav-icon,
.alh-nav-item:focus-within > .alh-nav-link .alh-nav-icon,
.alh-nav-item.is-current > .alh-nav-link .alh-nav-icon {
    color: var(--alh-primary);
    background: var(--alh-primary-soft);
    border-color: var(--alh-primary-border);
}

.alh-nav-item:hover > .alh-nav-link .alh-nav-chevron,
.alh-nav-item:focus-within > .alh-nav-link .alh-nav-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   Navigation Extras
   ========================================================= */

.alh-nav-extra {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 6px;
}

.alh-nav-extra-link {
    min-height: 36px;

    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: var(--alh-muted) !important;
    background: var(--alh-surface-soft);

    border: 1px solid transparent;
    border-radius: 8px;

    font-size: 0.73rem;
    font-weight: 750;

    text-decoration: none !important;

    transition:
        color var(--alh-transition),
        background-color var(--alh-transition),
        border-color var(--alh-transition);
}

.alh-nav-extra-link i {
    color: var(--alh-primary);
}

.alh-nav-extra-link:hover {
    color: var(--alh-primary) !important;
    background: var(--alh-primary-soft);
    border-color: var(--alh-primary-border);
}


.alh-nav-extra-link.is-current {
    color: var(--alh-primary) !important;
    background: var(--alh-primary-soft);
    border-color: var(--alh-primary-border);
}

.alh-nav-extra-link.is-current i {
    color: var(--alh-primary);
}


/* =========================================================
   Navigation CTA Buttons
   ========================================================= */

.alh-nav-extra-link.alh-nav-cta {
    min-height: 38px;
    padding: 0 13px;

    color: #ffffff !important;

    border: 1px solid transparent;
    border-radius: 9px;

    font-size: 0.76rem;
    font-weight: 800;

    transition:
        background-color var(--alh-transition),
        border-color var(--alh-transition),
        box-shadow var(--alh-transition),
        transform var(--alh-transition);
}

.alh-nav-extra-link.alh-nav-cta i {
    color: #ffffff !important;
}

.alh-nav-extra-link.alh-nav-cta:hover,
.alh-nav-extra-link.alh-nav-cta:focus {
    color: #ffffff !important;
    transform: translateY(-1px);
}

.alh-nav-extra-link.alh-nav-cta-primary {
    background: var(--alh-primary);
    border-color: var(--alh-primary);
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.16);
}

.alh-nav-extra-link.alh-nav-cta-primary:hover,
.alh-nav-extra-link.alh-nav-cta-primary:focus {
    background: var(--alh-primary-hover);
    border-color: var(--alh-primary-hover);
    box-shadow: 0 9px 20px rgba(37, 99, 235, 0.20);
}

.alh-nav-extra-link.alh-nav-cta-warning {
    background: var(--alh-warning);
    border-color: var(--alh-warning);
    box-shadow: 0 7px 16px rgba(245, 158, 11, 0.18);
}

.alh-nav-extra-link.alh-nav-cta-warning:hover,
.alh-nav-extra-link.alh-nav-cta-warning:focus {
    background: var(--alh-warning-hover);
    border-color: var(--alh-warning-hover);
    box-shadow: 0 9px 20px rgba(217, 119, 6, 0.22);
}


/* =========================================================
   Desktop Submenus
   ========================================================= */

.alh-has-dropdown {
    position: relative;
}

.alh-mega {
    position: absolute;

    top: calc(100% + 6px);
    right: 0;

    width: 300px;

    padding: 7px;

    z-index: 900;

    background: #ffffff;

    border: 1px solid var(--alh-border);
    border-radius: 10px;

    box-shadow: var(--alh-shadow-dropdown);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: translateY(5px);

    transition:
        opacity var(--alh-transition),
        visibility var(--alh-transition),
        transform var(--alh-transition);
}

.alh-has-dropdown.alh-hover-open > .alh-mega {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0) scale(1);
}


.alh-mega-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}


.alh-mega-grid > hr {
    width: calc(100% - 16px);
    height: 1px;

    margin: 2px 8px;

    border: 0;

    background: linear-gradient(
        90deg,
        rgba(228, 233, 241, 0) 0%,
        rgba(212, 220, 232, 0.9) 18%,
        rgba(212, 220, 232, 1) 50%,
        rgba(212, 220, 232, 0.9) 82%,
        rgba(228, 233, 241, 0) 100%
    );

    opacity: 1;
}

.alh-mega-link {
    width: 100%;
    min-height: 46px;

    padding: 6px 8px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--alh-text-2) !important;
    background: #ffffff;

    border: 1px solid transparent;
    border-radius: 8px;

    text-decoration: none !important;

    transition:
        color var(--alh-transition),
        background-color var(--alh-transition),
        border-color var(--alh-transition),
        box-shadow var(--alh-transition);
}

.alh-mega-link:hover {
    color: var(--alh-primary) !important;
    background: #f8fbff;
    border-color: var(--alh-primary-border);

    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.05);
}

.alh-mega-link-icon {
    width: 33px;
    height: 33px;

    flex: 0 0 33px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--alh-primary);
    background: var(--alh-primary-soft);

    border: 1px solid #e1e9f4;
    border-radius: 8px;

    font-size: 0.74rem;

    transition:
        color var(--alh-transition),
        background-color var(--alh-transition),
        border-color var(--alh-transition);
}

.alh-mega-link:hover .alh-mega-link-icon {
    color: #ffffff;
    background: var(--alh-primary);
    border-color: var(--alh-primary);
}


.alh-mega-link.is-current {
    color: var(--alh-primary) !important;
    background: var(--alh-primary-soft);
    border-color: var(--alh-primary-border);
}

.alh-mega-link.is-current .alh-mega-link-icon {
    color: #ffffff;
    background: var(--alh-primary);
    border-color: var(--alh-primary);
}

.alh-mega-link-copy {
    min-width: 0;

    display: block;
}

.alh-mega-link-copy strong {
    display: block;

    color: inherit;

    font-size: 0.79rem;
    font-weight: 800;
    line-height: 1.6;
}


/* =========================================================
   Bootstrap Dropdowns
   ========================================================= */


.alh-actions .dropdown-menu {
    z-index: 9999 !important;

    margin-top: 6px !important;
    padding: 0 !important;

    overflow: hidden;

    background: #ffffff !important;

    border: 1px solid var(--alh-border) !important;
    border-radius: 12px !important;

    box-shadow: var(--alh-shadow-dropdown) !important;
}

.alh-actions > .dropdown.alh-hover-open > .dropdown-menu {
    display: block !important;
}

/* =========================================================
   Dropdown layer safety fix
   Prevent user/notification dropdowns from going under nav
   ========================================================= */

.alh-header-main,
.alh-header-main .alh-actions,
.alh-header-main .alh-actions > .dropdown {
    isolation: auto;
}

.alh-header-main .alh-user-menu,
.alh-header-main .alh-notification-menu {
    z-index: 99999 !important;
}


/* =========================================================
   Notifications Dropdown
   ========================================================= */

.alh-notification-menu {
    width: 350px;
}

.alh-dropdown-head {
    padding: 12px 13px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    background: #fbfcfe;
    border-bottom: 1px solid var(--alh-divider);
}

.alh-dropdown-title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;
}

.alh-dropdown-title-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--alh-primary);
    background: var(--alh-primary-soft);

    border: 1px solid var(--alh-primary-border);
    border-radius: 8px;

    font-size: 0.72rem;
}

.alh-dropdown-title-copy strong {
    display: block;

    margin-bottom: 2px;

    color: var(--alh-text);

    font-size: 0.79rem;
    font-weight: 850;
}

.alh-dropdown-title-copy small {
    display: block;

    color: var(--alh-muted);

    font-size: 0.67rem;
}

.alh-notification-list {
    max-height: 330px;

    padding: 6px;

    overflow-y: auto;
}

.alh-notification-item {
    min-height: 54px;

    padding: 9px 10px !important;

    display: flex !important;
    align-items: flex-start !important;

    gap: 9px !important;

    color: var(--alh-text-2) !important;

    border-radius: 9px !important;

    white-space: normal !important;

    font-size: 0.74rem !important;
    font-weight: 650 !important;
    line-height: 1.8 !important;
}

.alh-notification-item:hover {
    color: var(--alh-primary) !important;
    background: #f8fbff !important;
}

.alh-notification-item > i {
    margin-top: 5px;

    flex: 0 0 auto;

    font-size: 0.45rem;
}

.alh-empty-notification {
    min-height: 145px;

    padding: 24px 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 9px;

    color: var(--alh-muted);

    text-align: center;

    font-size: 0.74rem;
    font-weight: 650;
}

.alh-empty-notification i {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--alh-muted-2);
    background: var(--alh-surface-soft);

    border: 1px solid var(--alh-border);
    border-radius: 10px;

    font-size: 0.95rem;
}


/* =========================================================
   User Dropdown
   ========================================================= */

.alh-user-menu {
    width: 290px;
}

.alh-user-hero {
    position: relative;

    min-height: 66px;

    padding: 10px 12px;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #172554 0%,
            #1e3a8a 48%,
            #2563eb 100%
        );
}

.alh-user-hero::before {
    content: "";

    position: absolute;

    top: -52px;
    left: -35px;

    width: 115px;
    height: 115px;

    background: rgba(255, 255, 255, 0.055);

    border-radius: 50%;
}

.alh-user-profile {
    position: relative;
    z-index: 2;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;
}

.alh-user-avatar-large {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;

    font-size: 0.9rem;
}

.alh-user-profile-copy {
    min-width: 0;
}

.alh-user-profile-copy strong {
    display: block;

    max-width: 190px;

    margin-bottom: 0;

    overflow: hidden;

    color: #ffffff;

    font-size: 0.84rem;
    font-weight: 850;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.alh-user-profile-copy small {
    color: rgba(255, 255, 255, 0.7);

    font-size: 0.7rem;
    font-weight: 650;
}

.alh-user-links {
    padding: 7px;
}

.alh-user-links .dropdown-item {
    min-height: 43px;

    padding: 0 10px !important;

    display: flex !important;
    align-items: center !important;

    gap: 9px !important;

    color: var(--alh-text-2) !important;

    border-radius: 8px !important;

    font-size: 0.76rem !important;
    font-weight: 750 !important;
}

.alh-user-links .dropdown-item i {
    width: 24px;

    color: var(--alh-muted-2);

    text-align: center;

    font-size: 0.72rem;
}

.alh-user-links .dropdown-item:hover {
    color: var(--alh-primary) !important;
    background: var(--alh-primary-soft) !important;
}

.alh-user-links .dropdown-item:hover i {
    color: var(--alh-primary);
}

.alh-user-links .dropdown-item.text-danger {
    color: #dc2626 !important;
}

.alh-user-links .dropdown-item.text-danger:hover {
    background: var(--alh-danger-soft) !important;
}

.alh-user-links .dropdown-item.text-danger i {
    color: var(--alh-danger);
}


/* =========================================================
   Mobile Trigger
   ========================================================= */

.alh-mobile-trigger {
    display: none;
}


/* =========================================================
   Mobile Drawer
   ========================================================= */

.alh-drawer {
    display: none;
}

.alh-overlay {
    position: fixed;

    inset: 0;

    z-index: 1090;

    opacity: 0;
    visibility: hidden;

    background: rgba(15, 23, 42, 0.42);

    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    transition:
        opacity var(--alh-transition),
        visibility var(--alh-transition);
}

.alh-overlay.is-open {
    opacity: 1;
    visibility: visible;
}


/* Header action menus are anchored to the left side of their triggers in RTL. */
@media (min-width: 992px) {
    .alh-actions .dropdown-menu {
        top: calc(100% + 8px) !important;
        right: auto !important;
        left: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1199.98px) {

    .alh-header-main {
        grid-template-columns:
            155px
            minmax(220px, 1fr)
            auto;

        gap: 13px;
    }

    .alh-brand img {
        max-width: 155px;
    }

    .alh-account {
        min-width: 46px;
        width: 46px;

        padding: 4px;
    }

    .alh-account-info,
    .alh-account-arrow {
        display: none;
    }

    .alh-nav-link {
        padding: 0 8px;

        font-size: 0.84rem;
        font-weight: 700;
    }

    .alh-nav-icon {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }

    .alh-nav-extra-link span {
        display: none;
    }

    .alh-nav-extra-link {
        width: 38px;

        padding: 0;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 991.98px) {

    .alh-main {
        padding: 8px 0;
    }

    .alh-header-card {
        border-radius: 10px;
    }

    .alh-header-main {
        min-height: 62px;

        padding: 7px 8px;

        grid-template-columns:
            41px
            minmax(0, 1fr)
            auto;

        gap: 8px;
    }

    .alh-header-card::before {
        right: 18px;
        left: 18px;
    }






    .alh-header-main {
        grid-template-columns:
            41px
            minmax(0, 1fr)
            auto;
    }

    .alh-header-main > .alh-mobile-trigger {
        grid-column: 1;
    }

    .alh-header-main > .alh-brand {
        grid-column: 2;
    }

    .alh-header-main > .alh-actions {
        grid-column: 3;
    }


    .alh-mobile-trigger {
        width: 41px;
        height: 41px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--alh-primary);
        background: var(--alh-primary-soft);

        border: 1px solid var(--alh-primary-border);
        border-radius: 10px;

        cursor: pointer;
    }

    .alh-brand {
        justify-content: center;
    }

    .alh-brand img {
        max-width: 145px;
        max-height: 42px;
    }

    .alh-brand-name {
        font-size: 1rem;
    }



    .alh-actions {
        gap: 5px;
    }

    .alh-action-btn {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        border-radius: 10px;
    }

    .alh-cart-btn {
        display: none;
    }

    .alh-account {
        width: 40px;
        min-width: 40px;
        height: 40px;

        padding: 3px;

        border-radius: 10px;
    }

    .alh-account-avatar {
        width: 32px;
        height: 32px;

        flex-basis: 32px;

        border-radius: 8px;
    }

    .alh-login-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;

        padding: 0;

        border-radius: 10px;

        font-size: 0;
    }

    .alh-login-btn i {
        font-size: 0.8rem;
    }

    .alh-notification-menu,
    .alh-user-menu {
        position: fixed !important;

        top: 72px !important;
        right: 12px !important;
        left: 12px !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;

        transform: none !important;
    }

    .alh-drawer {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;

        z-index: 1100;

        width: min(330px, 88vw);

        display: flex;
        flex-direction: column;

        overflow: hidden;

        background: #ffffff;

        border-left: 1px solid var(--alh-border);

        box-shadow: -18px 0 50px rgba(15, 23, 42, 0.16);

        transform: translateX(105%);

        transition: transform 280ms ease;
    }

    .alh-drawer.is-open {
        transform: translateX(0);
    }

    .alh-drawer-head {
        min-height: 74px;

        padding: 11px 13px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 12px;

        background: #fbfcfe;
        border-bottom: 1px solid var(--alh-divider);
    }

    .alh-drawer-brand {
        min-width: 0;

        display: flex;
        align-items: center;

        gap: 9px;
    }

    .alh-drawer-brand-icon {
        width: 39px;
        height: 39px;

        flex: 0 0 39px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: #ffffff;
        background: var(--alh-primary);

        border-radius: 10px;
    }

    .alh-drawer-brand-copy strong {
        display: block;

        margin-bottom: 2px;

        color: var(--alh-text);

        font-size: 0.78rem;
        font-weight: 850;
    }

    .alh-drawer-brand-copy small {
        display: block;

        color: var(--alh-muted);

        font-size: 0.67rem;
    }

    .alh-drawer-close {
        width: 39px;
        height: 39px;

        flex: 0 0 39px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--alh-muted);
        background: var(--alh-surface-soft);

        border: 1px solid var(--alh-border);
        border-radius: 10px;

        cursor: pointer;
    }


    .alh-drawer-body {
        flex: 1;

        padding: 11px 10px 20px;

        overflow-y: auto;

        overscroll-behavior: contain;
    }

    .alh-mobile-nav {
        margin: 0;
        padding: 0;

        list-style: none;
    }

    .alh-mobile-nav-item {
        margin-bottom: 5px;
    }


    .alh-mobile-nav-item.is-current > .alh-mobile-nav-row {
        background: var(--alh-primary-soft);
        border-color: var(--alh-primary-border);
    }

    .alh-mobile-nav-item.is-current > .alh-mobile-nav-row .alh-mobile-nav-link {
        color: var(--alh-primary) !important;
    }

    .alh-mobile-nav-item.is-current > .alh-mobile-nav-row .alh-mobile-nav-icon {
        color: #ffffff;
        background: var(--alh-primary);
        border-color: var(--alh-primary);
    }

    .alh-mobile-nav-parent {
        cursor: pointer;
    }

    .alh-mobile-nav-row {
        min-height: 49px;

        display: flex;
        align-items: center;

        background: #ffffff;

        border: 1px solid transparent;
        border-radius: 10px;
    }

    .alh-mobile-nav-row:hover {
        background: #f8fbff;
        border-color: var(--alh-primary-border);
    }

    .alh-mobile-nav-link {
        min-width: 0;

        flex: 1;

        padding: 6px 8px;

        display: flex;
        align-items: center;

        gap: 9px;

        color: var(--alh-text-2) !important;

        font-size: 0.78rem;
        font-weight: 800;

        text-decoration: none !important;
    }

    .alh-mobile-nav-icon {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--alh-primary);
        background: var(--alh-primary-soft);

        border: 1px solid #e5ebf3;
        border-radius: 8px;

        font-size: 0.7rem;
    }

    .alh-mobile-dropdown-toggle {
        width: 39px;
        height: 39px;

        margin-left: 4px;

        display: flex;
        align-items: center;
        justify-content: center;

        color: var(--alh-muted-2);
        background: transparent;

        border: 0;

        cursor: pointer;

        transition:
            color var(--alh-transition),
            transform var(--alh-transition);
    }

    .alh-mobile-nav-item.is-open .alh-mobile-dropdown-toggle {
        color: var(--alh-primary);
        transform: rotate(180deg);
    }

    .alh-mobile-submenu {
        display: none;

        margin: 5px 8px 8px;
        padding: 6px;

        background: var(--alh-surface-soft);

        border: 1px solid var(--alh-border);
        border-radius: 10px;
    }

    .alh-mobile-nav-item.is-open .alh-mobile-submenu {
        display: block;
    }

    .alh-mobile-submenu a {
        min-height: 41px;

        padding: 0 10px;

        display: flex;
        align-items: center;

        gap: 8px;

        color: var(--alh-muted) !important;

        border-radius: 8px;

        font-size: 0.74rem;
        font-weight: 750;

        text-decoration: none !important;
    }

    .alh-mobile-submenu a:hover {
        color: var(--alh-primary) !important;
        background: #ffffff;
    }


    .alh-mobile-submenu a.is-current {
        color: var(--alh-primary) !important;
        background: #ffffff;

        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
    }

    .alh-mobile-submenu a.is-current i {
        color: var(--alh-primary);
    }

    .alh-mobile-submenu hr {
        width: calc(100% - 14px);
        height: 1px;

        margin: 3px 7px;

        border: 0;

        background: linear-gradient(
            90deg,
            rgba(228, 233, 241, 0) 0%,
            rgba(212, 220, 232, 0.9) 18%,
            rgba(212, 220, 232, 1) 50%,
            rgba(212, 220, 232, 0.9) 82%,
            rgba(228, 233, 241, 0) 100%
        );
    }

    .alh-mobile-submenu a i {
        width: 20px;

        color: var(--alh-primary);

        text-align: center;
    }

    .alh-drawer-footer {
        padding: 11px 12px;

        background: #fbfcfe;
        border-top: 1px solid var(--alh-divider);
    }

    .alh-drawer-footer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 7px;
    }

    .alh-drawer-footer-link {
        min-height: 43px;

        padding: 0 8px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 6px;

        color: var(--alh-text-2) !important;
        background: #ffffff;

        border: 1px solid var(--alh-border);
        border-radius: 10px;

        font-size: 0.7rem;
        font-weight: 800;

        text-decoration: none !important;
    }

    .alh-drawer-footer-link i {
        color: var(--alh-primary);
    }


    .alh-drawer-footer-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alh-drawer-cta {
        color: #ffffff !important;
        border-color: transparent;
    }

    .alh-drawer-cta i {
        color: #ffffff !important;
    }

    .alh-drawer-cta-primary {
        background: var(--alh-primary);
        border-color: var(--alh-primary);
    }

    .alh-drawer-cta-primary:hover,
    .alh-drawer-cta-primary:focus {
        color: #ffffff !important;
        background: var(--alh-primary-hover);
        border-color: var(--alh-primary-hover);
    }

    .alh-drawer-cta-warning {
        background: var(--alh-warning);
        border-color: var(--alh-warning);
    }

    .alh-drawer-cta-warning:hover,
    .alh-drawer-cta-warning:focus {
        color: #ffffff !important;
        background: var(--alh-warning-hover);
        border-color: var(--alh-warning-hover);
    }
}


@media (max-width: 430px) {

    .alh-brand img {
        max-width: 125px;
    }

    .alh-action-btn {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .alh-account {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }

    .alh-account-avatar {
        width: 30px;
        height: 30px;

        flex-basis: 30px;
    }

    .alh-login-btn {
        width: 38px;
        min-width: 38px;
        height: 38px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .alh-header,
    .alh-header *,
    .alh-overlay,
    .alh-drawer {
        transition: none !important;
    }
}

/* footer.tpl */
:root{
    --ft-card:var(--hp-surface);
    --ft-soft:var(--hp-surface-soft);
    --ft-border:var(--hp-line);
    --ft-divider:#edf1f6;

    --ft-text:var(--hp-ink);
    --ft-text-2:var(--hp-ink-secondary);
    --ft-muted:var(--hp-muted);
    --ft-muted-2:#94a3b8;

    --ft-blue:var(--hp-primary);
    --ft-blue-dark:var(--hp-primary-hover);
    --ft-blue-light:#60a5fa;
    --ft-blue-soft:var(--hp-primary-soft);
    --ft-blue-line:#bfdbfe;
    --ft-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --ft-green:#059669;
    --ft-green-soft:#ecfdf5;
    --ft-red:#dc2626;

    --ft-radius-xl:24px;
    --ft-radius-lg:18px;
    --ft-radius-md:12px;

    --ft-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --ft-shadow-md:0 18px 44px rgba(15,23,42,.10),0 5px 16px rgba(15,23,42,.04);

    --ft-transition:220ms cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   Footer
   ========================================================= */
.bg-footer{
    position:relative;
    overflow:hidden;

    margin-top:28px;
    padding:18px 0!important;

    border-top:1px solid var(--ft-border);

    background:
        radial-gradient(circle at 8% 0%,rgba(96,165,250,.08),transparent 30%),
        linear-gradient(180deg,#fbfdff 0%,#f8fafc 100%)!important;

    color:var(--ft-muted)!important;
}

.bg-footer::before{
    content:"";
    position:absolute;
    top:0;
    right:18%;
    left:18%;
    height:2px;

    border-radius:0 0 999px 999px;

    background:linear-gradient(90deg,transparent,rgba(37,99,235,.55),transparent);
}

.bg-footer .container{
    position:relative;
    z-index:1;
}

.bg-footer p{
    margin:0!important;

    color:var(--ft-muted)!important;

    font-size:.74rem!important;
    line-height:1.8;
    font-weight:700;
}

/* =========================================================
   Mobile Bottom Navigation
   ========================================================= */
.top-button{
    position:fixed!important;
    right:0;
    bottom:0;
    left:0;

    z-index:1050;

    width:100%;
    margin:0!important;
    padding:0 12px calc(10px + env(safe-area-inset-bottom))!important;

    pointer-events:none;
}

.top-button .btn-groups{
    position:relative;

    width:min(520px,100%);
    min-height:64px;
    margin:0 auto;

    padding:7px 10px;

    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:5px;

    border:1px solid rgba(203,213,225,.84);
    border-radius:18px;

    background:rgba(255,255,255,.94);

    box-shadow:
        0 16px 38px rgba(15,23,42,.14),
        0 4px 12px rgba(15,23,42,.05);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    pointer-events:auto;
}

.top-button .btn-groups::before{
    content:"";
    position:absolute;
    top:0;
    right:20%;
    left:20%;
    height:2px;

    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.55),transparent);
}

.btn-top-button{
    width:44px!important;
    height:44px!important;
    min-width:44px;

    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center;
    justify-content:center;

    border:1px solid transparent!important;
    border-radius:13px!important;

    color:var(--ft-muted)!important;
    background:transparent!important;

    font-size:.90rem!important;
    text-decoration:none!important;

    box-shadow:none!important;

    transition:
        transform var(--ft-transition),
        color var(--ft-transition),
        border-color var(--ft-transition),
        background var(--ft-transition);
}

.btn-top-button:hover,
.btn-top-button:focus{
    transform:translateY(-1px);

    color:var(--ft-blue)!important;
    border-color:var(--ft-blue-line)!important;
    background:var(--ft-blue-soft)!important;

    text-decoration:none!important;
}

.btn-main{
    position:relative;

    width:54px!important;
    height:54px!important;
    min-width:54px;

    margin:-19px 0 0!important;
    padding:0!important;

    display:flex!important;
    align-items:center;
    justify-content:center;

    border:4px solid #fff!important;
    border-radius:17px!important;

    color:#fff!important;
    background:var(--ft-gradient)!important;

    font-size:1rem!important;
    text-decoration:none!important;

    box-shadow:
        0 13px 24px rgba(37,99,235,.28),
        0 4px 8px rgba(15,23,42,.08)!important;

    transition:
        transform var(--ft-transition),
        box-shadow var(--ft-transition);
}

.btn-main::after{
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
}

.btn-main:hover,
.btn-main:focus{
    transform:translateY(-2px) scale(1.02);

    color:#fff!important;

    box-shadow:
        0 16px 28px rgba(37,99,235,.33),
        0 5px 10px rgba(15,23,42,.09)!important;

    text-decoration:none!important;
}



/* =========================================================
   Fullpage Loading Overlay
   ========================================================= */
#fullpage-overlay{
    position:fixed!important;
    inset:0;

    z-index:99999!important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(248,250,252,.88)!important;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

#fullpage-overlay .outer-wrapper{
    width:auto!important;
    height:auto!important;
}

#fullpage-overlay .inner-wrapper{
    min-width:170px;
    padding:22px 24px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ft-border);
    border-radius:18px;

    background:#fff;

    box-shadow:var(--ft-shadow-md);
}

#fullpage-overlay .msg{
    margin-top:8px;

    color:var(--ft-muted);

    font-size:.78rem;
    line-height:1.6;
    font-weight:800;
}

/* =========================================================
   Global System Modal
   ========================================================= */
.system-modal .modal-dialog,
.modal-localisation .modal-dialog{
    margin-top:7vh;
}

.system-modal .modal-content,
.modal-localisation .modal-content{
    overflow:hidden;

    border:1px solid var(--ft-border)!important;
    border-radius:20px!important;

    background:#fff!important;

    box-shadow:0 24px 65px rgba(15,23,42,.16)!important;
}

.system-modal .modal-content::before,
.modal-localisation .modal-content::before{
    content:"";

    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--ft-gradient);
}

.system-modal .modal-header{
    min-height:64px;
    padding:15px 18px!important;

    align-items:center;

    border-bottom:1px solid var(--ft-divider)!important;

    background:
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

.system-modal .modal-title{
    margin:0!important;

    color:var(--ft-text)!important;

    font-size:.95rem!important;
    line-height:1.5;
    font-weight:900!important;
}

.system-modal .close,
.modal-localisation .close{
    width:34px;
    height:34px;

    margin:0!important;
    padding:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ft-border)!important;
    border-radius:10px!important;

    color:var(--ft-muted)!important;
    background:#f8fafc!important;

    opacity:1!important;

    font-size:1.1rem;
    line-height:1;

    transition:
        color var(--ft-transition),
        border-color var(--ft-transition),
        background var(--ft-transition);
}

.system-modal .close:hover,
.modal-localisation .close:hover{
    color:var(--ft-blue)!important;
    border-color:var(--ft-blue-line)!important;
    background:var(--ft-blue-soft)!important;
}

.system-modal .modal-body{
    padding:18px!important;

    color:var(--ft-text-2)!important;

    font-size:.82rem!important;
    line-height:1.8;
}

.system-modal .modal-footer{
    padding:12px 18px!important;

    display:flex;
    align-items:center;
    gap:7px;

    border-top:1px solid var(--ft-divider)!important;

    background:#fbfdff!important;
}

.system-modal .modal-footer .loader{
    margin-left:auto;

    color:var(--ft-muted)!important;

    font-size:.72rem!important;
    font-weight:700;
}

.system-modal .btn,
.modal-localisation .btn{
    min-height:38px;
    padding:0 13px!important;

    border-radius:10px!important;

    font-family:inherit!important;
    font-size:.73rem!important;
    line-height:1!important;
    font-weight:900!important;

    box-shadow:none!important;
}

.system-modal .btn-default,
.modal-localisation .btn-default{
    color:var(--ft-text-2)!important;
    border:1px solid var(--ft-border)!important;
    background:#fff!important;
}

.system-modal .btn-default:hover,
.modal-localisation .btn-default:hover{
    color:var(--ft-blue)!important;
    border-color:var(--ft-blue-line)!important;
    background:var(--ft-blue-soft)!important;
}

.system-modal .btn-primary{
    color:#fff!important;
    border:1px solid var(--ft-blue)!important;
    background:var(--ft-gradient)!important;

    box-shadow:0 7px 14px rgba(37,99,235,.14)!important;
}

/* =========================================================
   Language / Currency Modal
   ========================================================= */
.modal-localisation .modal-content{
    position:relative;

    background:#fff!important;
}

.modal-localisation .modal-body{
    padding:24px!important;

    color:var(--ft-text-2)!important;
    background:#fff!important;
}

.modal-localisation .close{
    position:absolute;
    top:14px;
    left:14px;
    z-index:4;

    color:var(--ft-muted)!important;
}

.modal-localisation h5,
.modal-localisation .h5{
    margin:0 0 14px!important;
    padding:0!important;

    color:var(--ft-text)!important;

    font-size:.95rem!important;
    line-height:1.6;
    font-weight:900!important;
}

.modal-localisation .item-selector{
    margin-right:-5px!important;
    margin-left:-5px!important;
}

.modal-localisation .item-selector > [class*="col-"]{
    padding-right:5px!important;
    padding-left:5px!important;
    margin-bottom:10px;
}

.modal-localisation .item-selector .item{
    min-height:44px;
    padding:0 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ft-border);
    border-radius:11px;

    color:var(--ft-text-2)!important;
    background:#f8fafc;

    font-size:.74rem;
    line-height:1.3;
    font-weight:800;

    text-align:center;
    text-decoration:none!important;

    transition:
        transform var(--ft-transition),
        color var(--ft-transition),
        border-color var(--ft-transition),
        background var(--ft-transition),
        box-shadow var(--ft-transition);
}

.modal-localisation .item-selector .item:hover{
    transform:translateY(-1px);

    color:var(--ft-blue)!important;
    border-color:var(--ft-blue-line);
    background:var(--ft-blue-soft);
}

.modal-localisation .item-selector .item.active{
    color:#fff!important;
    border-color:var(--ft-blue)!important;
    background:var(--ft-gradient)!important;

    box-shadow:0 8px 16px rgba(37,99,235,.14);
}

.modal-localisation .modal-footer{
    padding:12px 24px!important;

    border-top:1px solid var(--ft-divider)!important;

    background:#fbfdff!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px){
    .bg-footer{
        padding:15px 0 20px!important;
    }

    .bg-footer p{
        font-size:.69rem!important;
    }

    .top-button{
        padding-right:8px!important;
        padding-left:8px!important;
    }

    .top-button .btn-groups{
        min-height:60px;
        padding:6px 8px;

        border-radius:17px;
    }

    .btn-top-button{
        width:41px!important;
        height:41px!important;
        min-width:41px;
    }

    .btn-main{
        width:51px!important;
        height:51px!important;
        min-width:51px;

        margin-top:-17px!important;
    }

    .system-modal .modal-dialog,
    .modal-localisation .modal-dialog{
        margin:20px 10px;
    }

    .modal-localisation .modal-body{
        padding:20px 14px!important;
    }

    .modal-localisation .item-selector > [class*="col-"]{
        flex:0 0 50%;
        max-width:50%;
    }
}

@media(max-width:420px){
    .btn-top-button{
        width:38px!important;
        height:38px!important;
        min-width:38px;

        font-size:.82rem!important;
    }

    .btn-main{
        width:49px!important;
        height:49px!important;
        min-width:49px;
    }

    .modal-localisation .item-selector > [class*="col-"]{
        flex:0 0 100%;
        max-width:100%;
    }
}

@media(prefers-reduced-motion:reduce){
    .btn-top-button,
    .btn-main,
    .system-modal .close,
    .modal-localisation .close,
    .modal-localisation .item-selector .item{
        transition:none!important;
    }
}

/* account-contacts-manage.tpl */
:root:where(html[data-hp-page="account-contacts-manage"]) {
    --ct-card:var(--hp-surface);
    --ct-soft:var(--hp-surface-soft);
    --ct-border:var(--hp-line);
    --ct-divider:#edf1f6;

    --ct-text:var(--hp-ink);
    --ct-text-2:var(--hp-ink-secondary);
    --ct-muted:var(--hp-muted);
    --ct-muted-2:#94a3b8;

    --ct-blue:var(--hp-primary);
    --ct-blue-dark:var(--hp-primary-hover);
    --ct-blue-light:#60a5fa;
    --ct-blue-soft:var(--hp-primary-soft);
    --ct-blue-line:#bfdbfe;
    --ct-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --ct-green:#059669;
    --ct-green-soft:#ecfdf5;
    --ct-green-line:#a7f3d0;

    --ct-red:#dc2626;
    --ct-red-soft:#fef2f2;
    --ct-red-line:#fecaca;

    --ct-radius-xl:24px;
    --ct-radius-lg:17px;
    --ct-radius-md:12px;

    --ct-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --ct-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --ct-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-contacts-wrapper,
:where(html[data-hp-page="account-contacts-manage"]) .phc-contacts-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-contacts-wrapper {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--ct-text-2);
}

/* =========================================================
   Contact selector
   ========================================================= */
:where(html[data-hp-page="account-contacts-manage"]) .phc-selector-panel {
    position:relative;
    overflow:hidden;
    margin-bottom:14px;
    padding:15px 16px;

    border:1px solid var(--ct-blue-line);
    border-radius:15px;

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(135deg,#fff 0%,#f8fbff 100%);

    box-shadow:var(--ct-shadow-sm);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-selector-panel::before {
    content:"";
    position:absolute;
    top:10px;
    bottom:10px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;
    background:var(--ct-gradient);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-selector-grid {
    display:grid;
    grid-template-columns:190px minmax(0,1fr) 90px;
    align-items:end;
    gap:10px;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-selector-label {
    display:block;
    margin:0 0 6px!important;

    color:var(--ct-text)!important;

    font-size:.73rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-selector-grid .phc-selector-label {
    margin:0!important;
    align-self:center;
}

/* =========================================================
   Shared cards
   ========================================================= */
:where(html[data-hp-page="account-contacts-manage"]) .phc-form-card {
    position:relative;
    overflow:hidden;

    margin-bottom:14px;
    padding:0!important;

    border:1px solid var(--ct-border)!important;
    border-radius:var(--ct-radius-xl)!important;

    background:#fff!important;

    box-shadow:var(--ct-shadow-panel)!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-form-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--ct-gradient);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-form-card-header {
    min-height:78px;
    padding:15px 18px;

    display:flex;
    align-items:center;
    gap:10px;

    border-bottom:1px solid var(--ct-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.08),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-form-card-icon {
    position:relative;

    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ct-blue-line);
    border-radius:12px;

    color:#fff;
    background:var(--ct-gradient);

    box-shadow:0 8px 18px rgba(37,99,235,.15);

    font-size:.74rem;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-card-title {
    margin:0!important;

    color:var(--ct-text)!important;

    font-size:.91rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-card-subtitle {
    margin-top:2px;

    color:var(--ct-muted);

    font-size:.66rem;
    line-height:1.6;
    font-weight:650;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-form-card-body {
    padding:16px 18px 18px;
}

/* =========================================================
   Form grid
   ========================================================= */
:where(html[data-hp-page="account-contacts-manage"]) .phc-contact-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 14px;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-form-group {
    margin:0!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-form-label {
    display:block;
    margin:0 0 5px!important;

    color:var(--ct-muted)!important;

    font-size:.68rem!important;
    line-height:1.45;
    font-weight:850!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group {
    position:relative;

    min-height:43px;

    display:flex;
    align-items:center;

    overflow:hidden;

    border:1px solid var(--ct-border);
    border-radius:10px;

    background:#f8fafc;

    transition:
        border-color var(--ct-transition),
        background var(--ct-transition),
        box-shadow var(--ct-transition);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group:hover {
    border-color:#cbd5e1;
    background:#fff;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group:focus-within {
    border-color:var(--ct-blue);
    background:#fff;

    box-shadow:0 0 0 3px rgba(37,99,235,.07);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input-icon {
    width:40px;
    flex:0 0 40px;
    margin:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--ct-muted-2)!important;

    font-size:.68rem!important;

    transition:color var(--ct-transition);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group:focus-within .phc-input-icon {
    color:var(--ct-blue)!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input,
:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group select,
:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group input[type="text"],
:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group input[type="email"],
:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group input[type="tel"] {
    width:100%!important;
    min-width:0;
    min-height:41px;
    padding:0 8px!important;

    flex:1 1 auto;

    border:0!important;
    outline:0!important;

    color:var(--ct-text)!important;
    background:transparent!important;

    font-family:inherit!important;
    font-size:.74rem!important;
    line-height:1.4;

    box-shadow:none!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group select {
    cursor:pointer;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input::placeholder {
    color:var(--ct-muted-2)!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-input[dir="ltr"] {
    text-align:left;
}

/* Country dropdown generated by WHMCS */
:where(html[data-hp-page="account-contacts-manage"]) .phc-input-group .form-control {
    width:100%!important;
    min-width:0!important;
    min-height:41px!important;
    margin:0!important;
    padding:0 8px!important;

    border:0!important;
    outline:0!important;
    border-radius:0!important;

    color:var(--ct-text)!important;
    background:transparent!important;

    font-family:inherit!important;
    font-size:.74rem!important;

    box-shadow:none!important;
}

/* =========================================================
   Email preferences
   ========================================================= */
:where(html[data-hp-page="account-contacts-manage"]) .phc-email-preferences {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-custom-checkbox {
    min-height:48px;
    margin:0!important;
    padding:9px 10px;

    display:flex;
    align-items:center;
    gap:8px;

    border:1px solid var(--ct-border);
    border-radius:10px;

    color:var(--ct-text-2)!important;
    background:#f8fafc;

    font-size:.69rem!important;
    line-height:1.65;
    font-weight:750;

    cursor:pointer;

    transition:
        border-color var(--ct-transition),
        background var(--ct-transition);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-custom-checkbox:hover {
    border-color:var(--ct-blue-line);
    background:var(--ct-blue-soft);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-custom-checkbox input[type="checkbox"] {
    width:17px;
    height:17px;
    margin:0!important;

    flex:0 0 17px;

    accent-color:var(--ct-blue);
    cursor:pointer;
}

/* =========================================================
   Buttons / actions
   ========================================================= */
:where(html[data-hp-page="account-contacts-manage"]) .phc-form-actions {
    margin-top:14px;
    padding-top:14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;

    border-top:1px solid var(--ct-divider);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-form-actions-main {
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-primary,
:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-light,
:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-danger {
    min-height:39px;
    padding:0 13px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid!important;
    border-radius:10px!important;

    font-family:inherit!important;
    font-size:.69rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:none!important;

    transition:
        transform var(--ct-transition),
        color var(--ct-transition),
        border-color var(--ct-transition),
        background var(--ct-transition),
        box-shadow var(--ct-transition);
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-primary {
    min-width:145px;

    color:#fff!important;
    border-color:var(--ct-blue)!important;
    background:var(--ct-gradient)!important;

    box-shadow:0 8px 16px rgba(37,99,235,.14)!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-primary:hover {
    transform:translateY(-1px);

    color:#fff!important;

    box-shadow:0 11px 20px rgba(37,99,235,.18)!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-light {
    min-width:88px;

    color:var(--ct-muted)!important;
    border-color:var(--ct-border)!important;
    background:#fff!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-light:hover {
    transform:translateY(-1px);

    color:var(--ct-blue)!important;
    border-color:var(--ct-blue-line)!important;
    background:var(--ct-blue-soft)!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-danger {
    min-width:120px;

    color:var(--ct-red)!important;
    border-color:var(--ct-red-line)!important;
    background:var(--ct-red-soft)!important;
}

:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-danger:hover {
    transform:translateY(-1px);

    color:#fff!important;
    border-color:var(--ct-red)!important;
    background:linear-gradient(135deg,#ef4444,#dc2626)!important;
}

/* =========================================================
   Alerts
   ========================================================= */
:where(html[data-hp-page="account-contacts-manage"]) .phc-contacts-wrapper .alert {
    margin-bottom:14px!important;

    border-radius:11px!important;

    font-size:.73rem!important;
    line-height:1.75;
}

/* =========================================================
   Delete modal
   ========================================================= */
:where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-content {
    overflow:hidden;

    border:1px solid var(--ct-border)!important;
    border-radius:17px!important;

    background:#fff!important;

    box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
}

:where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-header {
    padding:14px 16px!important;

    border-bottom:1px solid var(--ct-divider)!important;

    background:#f8fafc!important;
}

:where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-title {
    margin:0!important;

    color:var(--ct-red)!important;

    font-size:.85rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .close {
    color:var(--ct-muted)!important;
    opacity:.7;
}

:where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-body {
    padding:18px!important;

    color:var(--ct-text-2)!important;

    font-size:.76rem!important;
    line-height:1.75;
}

:where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-body p {
    margin:0!important;

    color:var(--ct-muted)!important;

    font-size:.76rem!important;
}

:where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-footer {
    padding:11px 14px 14px!important;

    display:flex;
    justify-content:center;
    gap:7px;

    border-top:1px solid var(--ct-divider)!important;

    background:#fbfdff!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="account-contacts-manage"]) .phc-selector-grid {
        grid-template-columns:150px minmax(0,1fr) 80px;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="account-contacts-manage"]) .phc-selector-grid {
        grid-template-columns:1fr;
        gap:8px;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-selector-grid .phc-selector-label {
        margin-bottom:2px!important;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-form-card {
        border-radius:19px!important;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-form-card-header {
        min-height:0;
        padding:14px;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-form-card-body {
        padding:13px;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-contact-grid,
:where(html[data-hp-page="account-contacts-manage"]) .phc-email-preferences {
        grid-template-columns:1fr;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-form-actions {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-form-actions-main {
        width:100%;
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-btn-primary,
:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-light,
:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-danger {
        width:100%;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="account-contacts-manage"]) .phc-selector-panel {
        padding:13px;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-form-card-header {
        align-items:flex-start;
    }

    :where(html[data-hp-page="account-contacts-manage"]) .phc-form-card-icon {
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    :where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-footer {
        flex-direction:column;
    }

    :where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-footer .phc-btn-light,
:where(html[data-hp-page="account-contacts-manage"]) #modalDeleteContact .modal-footer .phc-btn-danger {
        width:100%;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="account-contacts-manage"]) .phc-input-group,
:where(html[data-hp-page="account-contacts-manage"]) .phc-custom-checkbox,
:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-primary,
:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-light,
:where(html[data-hp-page="account-contacts-manage"]) .phc-btn-danger {
        transition:none!important;
    }
}

/* account-contacts-new.tpl */
:root:where(html[data-hp-page="account-contacts-new"]) {
    --contact-page:var(--hp-page);
    --contact-card:var(--hp-surface);
    --contact-soft:var(--hp-surface-soft);
    --contact-border:var(--hp-line);
    --contact-border-soft:#edf1f6;

    --contact-text:var(--hp-ink);
    --contact-text-2:var(--hp-ink-secondary);
    --contact-muted:var(--hp-muted);
    --contact-muted-2:#94a3b8;

    --contact-blue:var(--hp-primary);
    --contact-blue-dark:var(--hp-primary-hover);
    --contact-blue-light:#60a5fa;
    --contact-blue-soft:var(--hp-primary-soft);
    --contact-blue-line:#bfdbfe;
    --contact-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --contact-green:#059669;
    --contact-green-soft:#ecfdf5;
    --contact-red:#dc2626;

    --contact-radius-xl:24px;
    --contact-radius-lg:17px;
    --contact-radius-md:12px;

    --contact-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --contact-shadow-md:0 18px 44px rgba(15,23,42,.08),0 5px 16px rgba(15,23,42,.035);

    --contact-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper,
:where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper {
    width:100%;
    direction:rtl;
    text-align:right;
    color:var(--contact-text);
    font-family:inherit;
    -webkit-font-smoothing:antialiased;
}

/* =========================================================
   Top Contact Selector
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-selector-panel {
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    padding:18px 20px;

    border:1px solid var(--contact-blue-line);
    border-radius:var(--contact-radius-lg);
    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#fbfdff 0%,#f7faff 100%);
    box-shadow:var(--contact-shadow-sm);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-selector-panel::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:3px;
    background:var(--contact-gradient);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-selector-panel .row {
    position:relative;
    z-index:2;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-selector-panel .phc-form-label {
    margin-bottom:0!important;
    color:var(--contact-text);
    font-size:.90rem;
    font-weight:900;
}

/* =========================================================
   Main Form Cards
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-form-card {
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    padding:22px;

    border:1px solid var(--contact-border);
    border-radius:var(--contact-radius-xl);
    background:#fff;
    box-shadow:var(--contact-shadow-sm);

    transition:
        border-color var(--contact-transition),
        box-shadow var(--contact-transition);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-form-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:linear-gradient(90deg,transparent,var(--contact-blue),transparent);
    opacity:.85;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-form-card:hover {
    border-color:#d5dfeb;
    box-shadow:var(--contact-shadow-md);
}

/* =========================================================
   Section titles
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-card-title {
    margin:0 0 20px!important;
    padding-bottom:14px;

    display:flex;
    align-items:center;
    gap:10px;

    border-bottom:1px solid var(--contact-border-soft);
    color:var(--contact-text);

    font-size:1.06rem;
    line-height:1.6;
    font-weight:900;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-card-title i {
    width:36px;
    height:36px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--contact-blue-line);
    border-radius:11px;

    color:#fff!important;
    background:var(--contact-gradient);
    box-shadow:0 8px 18px rgba(37,99,235,.17);

    font-size:.78rem;
}

/* =========================================================
   Grid / spacing
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-form-card .row {
    margin-right:-7px;
    margin-left:-7px;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-form-card .row > [class*="col-"] {
    padding-right:7px;
    padding-left:7px;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-form-group {
    margin-bottom:16px;
}

/* =========================================================
   Labels
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-form-label {
    display:block;
    margin-bottom:8px;

    color:var(--contact-text-2);
    font-size:.88rem;
    line-height:1.6;
    font-weight:850;
}

/* =========================================================
   Inputs
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group {
    position:relative;
    width:100%;
    min-height:50px;
    padding:0 13px;

    display:flex;
    align-items:center;

    border:1px solid var(--contact-border);
    border-radius:var(--contact-radius-md);
    background:var(--contact-soft);

    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);

    transition:
        background-color var(--contact-transition),
        border-color var(--contact-transition),
        box-shadow var(--contact-transition);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-input-group:hover {
    border-color:#cbd5e1;
    background:#fff;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-input-group:focus-within {
    border-color:var(--contact-blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-input-icon {
    width:28px;
    flex:0 0 28px;
    margin-left:9px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    color:var(--contact-muted-2);
    font-size:.78rem;

    transition:color var(--contact-transition);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-input-group:focus-within .phc-input-icon {
    color:var(--contact-blue);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-input,
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group select,
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group input[type="text"],
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group input[type="email"],
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group input[type="tel"],
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group .form-control {
    flex:1 1 auto;
    width:100%;
    min-width:0;
    min-height:48px;
    height:48px;
    padding:0!important;

    border:0!important;
    outline:0!important;

    color:var(--contact-text)!important;
    background:transparent!important;
    box-shadow:none!important;

    font-family:inherit;
    font-size:.89rem!important;
    line-height:1.5;
    font-weight:600;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-input::placeholder,
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group input::placeholder {
    color:var(--contact-muted-2);
}

/* Country / selects */
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group select,
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group select.form-control {
    cursor:pointer;
}

:where(html[data-hp-page="account-contacts-new"]) #inputEmail,
:where(html[data-hp-page="account-contacts-new"]) #inputPhone,
:where(html[data-hp-page="account-contacts-new"]) #inputTaxId,
:where(html[data-hp-page="account-contacts-new"]) #inputPostcode {
    text-align:left;
}

/* =========================================================
   Selector button
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-selector-panel .phc-btn-primary {
    width:100%;
    min-height:50px;
}

/* =========================================================
   Email preferences
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-form-card + .phc-form-card .col-12 {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-custom-checkbox {
    position:relative;
    min-height:48px;
    margin:0!important;
    padding:10px 44px 10px 12px;

    display:flex;
    align-items:center;

    border:1px solid var(--contact-border-soft);
    border-radius:11px;

    color:var(--contact-text-2);
    background:#f8fafc;

    font-size:.86rem;
    line-height:1.65;
    font-weight:700;
    cursor:pointer;

    transition:
        border-color var(--contact-transition),
        background var(--contact-transition),
        box-shadow var(--contact-transition);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-custom-checkbox:hover {
    border-color:var(--contact-blue-line);
    background:#fbfdff;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-custom-checkbox input[type="checkbox"] {
    position:absolute;
    top:50%;
    right:12px;

    width:20px;
    height:20px;
    margin:0;
    transform:translateY(-50%);

    appearance:none;
    -webkit-appearance:none;

    border:2px solid #cbd5e1;
    border-radius:6px;
    background:#fff;

    cursor:pointer;
    outline:0;

    transition:
        border-color var(--contact-transition),
        background-color var(--contact-transition),
        box-shadow var(--contact-transition);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-custom-checkbox input[type="checkbox"]:checked {
    border-color:var(--contact-blue);
    background-color:var(--contact-blue);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size:14px 14px;
    background-position:center;
    background-repeat:no-repeat;
    box-shadow:0 5px 11px rgba(37,99,235,.18);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-custom-checkbox:has(input[type="checkbox"]:checked) {
    border-color:var(--contact-blue-line);
    background:var(--contact-blue-soft);
    color:var(--contact-blue-dark);
}

/* =========================================================
   Buttons
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-btn-primary,
:where(html[data-hp-page="account-contacts-new"]) .phc-btn-light {
    min-height:48px;
    padding:0 20px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    border-radius:11px!important;

    font-family:inherit;
    font-size:.88rem;
    line-height:1;
    font-weight:900;

    cursor:pointer;

    transition:
        transform var(--contact-transition),
        box-shadow var(--contact-transition),
        border-color var(--contact-transition),
        background var(--contact-transition);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-btn-primary {
    border:0!important;
    color:#fff!important;
    background:var(--contact-gradient)!important;
    box-shadow:0 11px 23px -12px rgba(37,99,235,.92);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-btn-primary:hover {
    transform:translateY(-2px);
    color:#fff!important;
    box-shadow:0 16px 28px -12px rgba(37,99,235,.97);
}

:where(html[data-hp-page="account-contacts-new"]) .phc-btn-light {
    border:1px solid var(--contact-border)!important;
    color:var(--contact-text-2)!important;
    background:#f8fafc!important;
    box-shadow:none;
}

:where(html[data-hp-page="account-contacts-new"]) .phc-btn-light:hover {
    transform:translateY(-2px);
    color:var(--contact-blue)!important;
    border-color:var(--contact-blue-line)!important;
    background:var(--contact-blue-soft)!important;
}

/* action area */
:where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper form > .text-center.mt-4.mb-5 {
    margin-top:22px!important;
    margin-bottom:28px!important;
    padding-top:18px;
    border-top:1px solid var(--contact-border-soft);
}

/* =========================================================
   Alerts
   ========================================================= */
:where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper > .alert,
:where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper .alert {
    border-radius:13px;
    font-size:.87rem;
    line-height:1.75;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="account-contacts-new"]) .phc-selector-panel {
        padding:16px;
        border-radius:15px;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-selector-panel .phc-form-label {
        margin-bottom:8px!important;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-form-card {
        padding:17px;
        border-radius:19px;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-card-title {
        margin-bottom:17px!important;
        font-size:.99rem;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-input-group {
        min-height:48px;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-input,
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group select,
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group input,
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group .form-control {
        min-height:46px!important;
        height:46px!important;
        font-size:.85rem!important;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-form-card + .phc-form-card .col-12 {
        grid-template-columns:1fr;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="account-contacts-new"]) .phc-form-card {
        padding:14px;
        border-radius:16px;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-card-title {
        font-size:.94rem;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-custom-checkbox {
        min-height:46px;
        font-size:.82rem;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper form > .text-center.mt-4.mb-5 {
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    :where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper form > .text-center.mt-4.mb-5 .phc-btn-primary,
:where(html[data-hp-page="account-contacts-new"]) .phc-contacts-wrapper form > .text-center.mt-4.mb-5 .phc-btn-light {
        width:100%;
        margin:0!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="account-contacts-new"]) .phc-form-card,
:where(html[data-hp-page="account-contacts-new"]) .phc-input-group,
:where(html[data-hp-page="account-contacts-new"]) .phc-custom-checkbox,
:where(html[data-hp-page="account-contacts-new"]) .phc-btn-primary,
:where(html[data-hp-page="account-contacts-new"]) .phc-btn-light {
        transition:none!important;
    }
}

/* account-user-management.tpl */
:root:where(html[data-hp-page="account-user-management"]) {
    --um-card:var(--hp-surface);
    --um-soft:var(--hp-surface-soft);
    --um-border:var(--hp-line);
    --um-border-soft:#edf1f6;

    --um-text:var(--hp-ink);
    --um-text-2:var(--hp-ink-secondary);
    --um-muted:var(--hp-muted);
    --um-muted-2:#94a3b8;

    --um-blue:var(--hp-primary);
    --um-blue-dark:var(--hp-primary-hover);
    --um-blue-light:#60a5fa;
    --um-blue-soft:var(--hp-primary-soft);
    --um-blue-line:#bfdbfe;
    --um-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --um-green:#059669;
    --um-green-soft:#ecfdf5;
    --um-green-line:#a7f3d0;

    --um-red:#dc2626;
    --um-red-soft:#fef2f2;
    --um-red-line:#fecaca;

    --um-orange:#d97706;
    --um-orange-soft:#fff7ed;
    --um-orange-line:#fed7aa;

    --um-radius-xl:24px;
    --um-radius-lg:17px;
    --um-radius-md:12px;

    --um-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --um-shadow-md:0 18px 44px rgba(15,23,42,.08),0 5px 16px rgba(15,23,42,.035);

    --um-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="account-user-management"]) .premium-profile-wrapper,
:where(html[data-hp-page="account-user-management"]) .premium-profile-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="account-user-management"]) .premium-profile-wrapper {
    direction:rtl;
    text-align:right;
    color:var(--um-text-2);
    font-family:inherit;
    font-size:.88rem;
    -webkit-font-smoothing:antialiased;
}

/* =========================================================
   Cards
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .premium-card {
    position:relative;
    overflow:hidden;
    margin-bottom:20px;

    border:1px solid var(--um-border);
    border-radius:var(--um-radius-xl);
    background:var(--um-card);
    box-shadow:var(--um-shadow-sm);

    transition:border-color var(--um-transition),box-shadow var(--um-transition);
}

:where(html[data-hp-page="account-user-management"]) .premium-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:linear-gradient(90deg,transparent,var(--um-blue),transparent);
    opacity:.85;
}

:where(html[data-hp-page="account-user-management"]) .premium-card:hover {
    border-color:#d5dfeb;
    box-shadow:var(--um-shadow-md);
}

:where(html[data-hp-page="account-user-management"]) .premium-card-header {
    padding:16px 18px;

    display:flex;
    align-items:center;

    border-bottom:1px solid var(--um-border-soft);
    background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
}

:where(html[data-hp-page="account-user-management"]) .icon-wrapper {
    width:38px;
    height:38px;
    flex:0 0 38px;
    margin-left:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;
    font-size:.80rem;
}

:where(html[data-hp-page="account-user-management"]) .icon-primary {
    color:#fff;
    border:1px solid var(--um-blue-line);
    background:var(--um-gradient);
    box-shadow:0 8px 18px rgba(37,99,235,.16);
}

:where(html[data-hp-page="account-user-management"]) .icon-success {
    color:var(--um-green);
    border:1px solid var(--um-green-line);
    background:var(--um-green-soft);
}

:where(html[data-hp-page="account-user-management"]) .premium-card-title {
    margin:0;
    color:var(--um-text);
    font-size:1.03rem;
    line-height:1.55;
    font-weight:900;
}

:where(html[data-hp-page="account-user-management"]) .premium-card-body {
    padding:18px;
}

/* =========================================================
   Intro / helper text
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .premium-card-body > p.text-muted,
:where(html[data-hp-page="account-user-management"]) .premium-card-body > p.mb-4.text-muted {
    color:var(--um-muted)!important;
    font-size:.84rem;
    line-height:1.8;
}

:where(html[data-hp-page="account-user-management"]) .premium-card-body > p.text-muted i,
:where(html[data-hp-page="account-user-management"]) .premium-card-body > p.mb-4.text-muted i {
    color:var(--um-blue);
}

/* =========================================================
   Table
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .table-responsive {
    overflow-x:auto;
    overflow-y:visible;
}

:where(html[data-hp-page="account-user-management"]) .premium-table {
    width:100%;
    margin:0;
    border-collapse:separate;
    border-spacing:0 8px;
}

:where(html[data-hp-page="account-user-management"]) .premium-table thead th {
    padding:0 14px 8px!important;

    border:0!important;
    background:transparent!important;

    color:var(--um-muted);
    font-size:.78rem;
    line-height:1.55;
    font-weight:850;
    text-align:right;
    white-space:nowrap;
}

:where(html[data-hp-page="account-user-management"]) .premium-table tbody td {
    padding:13px 14px!important;

    vertical-align:middle;

    border-top:1px solid var(--um-border)!important;
    border-bottom:1px solid var(--um-border)!important;
    background:#fff;

    color:var(--um-text-2);
}

:where(html[data-hp-page="account-user-management"]) .premium-table tbody td:first-child {
    border-right:1px solid var(--um-border)!important;
    border-radius:0 12px 12px 0;
}

:where(html[data-hp-page="account-user-management"]) .premium-table tbody td:last-child {
    border-left:1px solid var(--um-border)!important;
    border-radius:12px 0 0 12px;
}

:where(html[data-hp-page="account-user-management"]) .premium-table tbody tr:hover td {
    background:#fbfdff;
    border-color:#d6e0ed!important;
}

:where(html[data-hp-page="account-user-management"]) .table-email {
    margin-bottom:3px;
    display:inline-block;

    color:var(--um-text);
    font-size:.89rem;
    line-height:1.5;
    font-weight:850;
}

:where(html[data-hp-page="account-user-management"]) .table-meta {
    color:var(--um-muted);
    font-size:.76rem;
    line-height:1.7;
}

:where(html[data-hp-page="account-user-management"]) .table-meta i {
    margin-left:4px;
    color:var(--um-muted-2);
}

/* owner badge */
:where(html[data-hp-page="account-user-management"]) .premium-label {
    min-height:24px;
    margin-right:7px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--um-blue-line);
    border-radius:8px;

    color:var(--um-blue);
    background:var(--um-blue-soft);

    font-size:.66rem;
    line-height:1;
    font-weight:900;
    vertical-align:middle;
}

/* 2FA icons */
:where(html[data-hp-page="account-user-management"]) .premium-table .text-success {
    color:var(--um-green)!important;
}

:where(html[data-hp-page="account-user-management"]) .premium-table .text-muted {
    color:var(--um-muted-2)!important;
}

/* pending invites separator */
:where(html[data-hp-page="account-user-management"]) .premium-table td[colspan="2"] {
    padding:10px 12px!important;
    border:1px dashed var(--um-border)!important;
    border-radius:10px!important;
    background:#f8fafc!important;
}

/* =========================================================
   Small action buttons
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .btn-premium-sm {
    min-height:36px;
    margin:2px 3px 2px 0;
    padding:0 11px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border-radius:9px;
    border:1px solid transparent;

    font-size:.76rem;
    line-height:1;
    font-weight:850;
    text-decoration:none!important;
    white-space:nowrap;

    transition:
        transform var(--um-transition),
        color var(--um-transition),
        border-color var(--um-transition),
        background var(--um-transition),
        box-shadow var(--um-transition);
}

:where(html[data-hp-page="account-user-management"]) .btn-premium-sm:hover:not(.disabled) {
    transform:translateY(-1px);
}

:where(html[data-hp-page="account-user-management"]) .btn-premium-outline {
    color:var(--um-blue);
    border-color:var(--um-blue-line);
    background:var(--um-blue-soft);
}

:where(html[data-hp-page="account-user-management"]) .btn-premium-outline:hover:not(.disabled) {
    color:#fff;
    border-color:var(--um-blue);
    background:var(--um-gradient);
    box-shadow:0 8px 16px rgba(37,99,235,.12);
}

:where(html[data-hp-page="account-user-management"]) .btn-premium-danger-outline {
    color:var(--um-red);
    border-color:var(--um-red-line);
    background:var(--um-red-soft);
}

:where(html[data-hp-page="account-user-management"]) .btn-premium-danger-outline:hover:not(.disabled) {
    color:#fff;
    border-color:var(--um-red);
    background:linear-gradient(135deg,#ef4444,#dc2626);
}

:where(html[data-hp-page="account-user-management"]) .btn-premium-sm.disabled {
    opacity:.42;
    cursor:not-allowed;
    pointer-events:none;
}

/* =========================================================
   Invite form
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .premium-profile-wrapper label:not(.form-check) {
    margin-bottom:7px;

    display:flex;
    align-items:center;

    color:var(--um-text-2);
    font-size:.84rem;
    line-height:1.55;
    font-weight:850;
}

:where(html[data-hp-page="account-user-management"]) .premium-profile-wrapper label:not(.form-check) > i {
    margin-left:6px;
    color:var(--um-blue);
}

:where(html[data-hp-page="account-user-management"]) .premium-input {
    width:100%;
    min-height:50px;
    padding:0 13px;

    border:1px solid var(--um-border);
    border-radius:11px;

    color:var(--um-text);
    background:#f8fafc;

    font-family:inherit;
    font-size:.88rem;
    font-weight:600;

    outline:0;
    box-shadow:none;

    transition:
        border-color var(--um-transition),
        background var(--um-transition),
        box-shadow var(--um-transition);
}

:where(html[data-hp-page="account-user-management"]) .premium-input:hover {
    border-color:#cbd5e1;
    background:#fff;
}

:where(html[data-hp-page="account-user-management"]) .premium-input:focus {
    border-color:var(--um-blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

/* =========================================================
   Permission mode
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .premium-check-group {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:16px;
}

:where(html[data-hp-page="account-user-management"]) .premium-radio-label {
    position:relative;
    min-height:44px;
    margin:0!important;
    padding:0 12px!important;

    display:inline-flex!important;
    align-items:center;

    border:1px solid var(--um-border);
    border-radius:10px;

    color:var(--um-text-2)!important;
    background:#f8fafc;

    font-size:.82rem!important;
    font-weight:800!important;
    cursor:pointer;

    transition:border-color var(--um-transition),background var(--um-transition),color var(--um-transition);
}

:where(html[data-hp-page="account-user-management"]) .premium-radio-label:hover {
    border-color:var(--um-blue-line);
    background:var(--um-blue-soft);
}

:where(html[data-hp-page="account-user-management"]) .premium-radio-label input {
    width:18px;
    height:18px;
    margin:0 0 0 8px;

    accent-color:var(--um-blue);
    cursor:pointer;
}

/* =========================================================
   Permission grid
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .permissions-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:8px;

    padding:12px;

    border:1px solid var(--um-border);
    border-radius:13px;
    background:#f8fafc;
}

:where(html[data-hp-page="account-user-management"]) .permission-item {
    min-height:60px;
    margin:0!important;
    padding:10px 11px!important;

    display:flex!important;
    align-items:flex-start;

    border:1px solid var(--um-border-soft);
    border-radius:10px;

    color:var(--um-text-2);
    background:#fff;

    cursor:pointer;

    transition:border-color var(--um-transition),background var(--um-transition);
}

:where(html[data-hp-page="account-user-management"]) .permission-item:hover {
    border-color:var(--um-blue-line);
    background:#fbfdff;
}

:where(html[data-hp-page="account-user-management"]) .permission-item input {
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin:3px 0 0 9px;

    accent-color:var(--um-blue);
}

:where(html[data-hp-page="account-user-management"]) .permission-text {
    display:flex;
    flex-direction:column;
}

:where(html[data-hp-page="account-user-management"]) .permission-title {
    color:var(--um-text);
    font-size:.82rem;
    line-height:1.55;
    font-weight:850;
}

:where(html[data-hp-page="account-user-management"]) .permission-desc {
    margin-top:3px;
    color:var(--um-muted);
    font-size:.72rem;
    line-height:1.7;
}

/* =========================================================
   Main invite button
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .btn-premium-save {
    min-height:48px;
    padding:0 20px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    border:0;
    border-radius:11px;

    color:#fff;
    background:var(--um-gradient);
    box-shadow:0 11px 23px -12px rgba(37,99,235,.92);

    font-family:inherit;
    font-size:.87rem;
    line-height:1;
    font-weight:900;

    transition:transform var(--um-transition),box-shadow var(--um-transition);
}

:where(html[data-hp-page="account-user-management"]) .btn-premium-save:hover {
    transform:translateY(-2px);
    color:#fff;
    box-shadow:0 16px 28px -12px rgba(37,99,235,.98);
}

/* =========================================================
   Modals
   ========================================================= */
:where(html[data-hp-page="account-user-management"]) .premium-modal-content {
    overflow:hidden;

    border:1px solid var(--um-border)!important;
    border-radius:18px!important;
    background:#fff;
    box-shadow:0 25px 65px rgba(15,23,42,.18)!important;
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-header {
    padding:16px 18px;

    display:flex;
    align-items:center;

    border:0;
    border-bottom:1px solid var(--um-border-soft);

    color:var(--um-text);
    background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-header .modal-title {
    margin:0;

    color:var(--um-text);
    font-size:.96rem;
    line-height:1.55;
    font-weight:900;
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-header .modal-title.text-danger {
    color:var(--um-red)!important;
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-header .close {
    width:32px;
    height:32px;
    margin:0 auto 0 0!important;
    padding:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--um-border);
    border-radius:9px;

    color:var(--um-muted);
    background:#fff;

    opacity:1;
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-content .modal-body {
    color:var(--um-text-2);
    font-size:.86rem;
    line-height:1.8;
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-content .modal-footer {
    gap:8px;
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-content .modal-footer .btn {
    min-height:42px;
    padding:0 15px;

    border-radius:10px;
    font-family:inherit;
    font-size:.80rem;
    font-weight:850;
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-content .btn-light {
    color:var(--um-text-2);
    border:1px solid var(--um-border);
    background:#f8fafc;
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-content .btn-danger {
    border-color:var(--um-red);
    background:linear-gradient(135deg,#ef4444,#dc2626);
}

:where(html[data-hp-page="account-user-management"]) .premium-modal-content .btn-warning {
    color:#fff;
    border-color:var(--um-orange);
    background:linear-gradient(135deg,#f59e0b,#d97706);
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="account-user-management"]) .premium-table th:nth-child(2) {
        width:auto!important;
    }

    :where(html[data-hp-page="account-user-management"]) .btn-premium-sm {
        margin-bottom:5px;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="account-user-management"]) .premium-card {
        border-radius:18px;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-card-header {
        padding:14px;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-card-body {
        padding:14px;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-table {
        border-spacing:0 7px;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-table thead {
        display:none;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-table,
:where(html[data-hp-page="account-user-management"]) .premium-table tbody,
:where(html[data-hp-page="account-user-management"]) .premium-table tr,
:where(html[data-hp-page="account-user-management"]) .premium-table td {
        display:block;
        width:100%;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-table tbody tr {
        margin-bottom:10px;
        padding:12px;

        border:1px solid var(--um-border);
        border-radius:13px;
        background:#fff;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-table tbody td {
        padding:6px 0!important;

        border:0!important;
        border-radius:0!important;
        background:transparent!important;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-table tbody td:last-child {
        padding-top:10px!important;
        border-top:1px solid var(--um-border-soft)!important;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-table td[colspan="2"] {
        padding:10px!important;
    }

    :where(html[data-hp-page="account-user-management"]) .btn-premium-sm {
        min-height:38px;
    }

    :where(html[data-hp-page="account-user-management"]) .permissions-grid {
        grid-template-columns:1fr;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="account-user-management"]) .premium-card-header {
        padding:13px;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-card-body {
        padding:12px;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-card-title {
        font-size:.94rem;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-check-group {
        flex-direction:column;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-radio-label {
        width:100%;
    }

    :where(html[data-hp-page="account-user-management"]) .btn-premium-save {
        width:100%;
    }

    :where(html[data-hp-page="account-user-management"]) .premium-table tbody td:last-child {
        display:flex;
        flex-direction:column;
    }

    :where(html[data-hp-page="account-user-management"]) .btn-premium-sm {
        width:100%;
        margin-right:0;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="account-user-management"]) .premium-card,
:where(html[data-hp-page="account-user-management"]) .btn-premium-sm,
:where(html[data-hp-page="account-user-management"]) .premium-input,
:where(html[data-hp-page="account-user-management"]) .premium-radio-label,
:where(html[data-hp-page="account-user-management"]) .permission-item,
:where(html[data-hp-page="account-user-management"]) .btn-premium-save {
        transition:none!important;
    }
}

/* announcements.tpl */
:root:where(html[data-hp-page="announcements"]) {
    --ann-card:var(--hp-surface);
    --ann-soft:var(--hp-surface-soft);
    --ann-border:var(--hp-line);
    --ann-border-soft:#edf1f6;

    --ann-text:var(--hp-ink);
    --ann-text-2:var(--hp-ink-secondary);
    --ann-muted:var(--hp-muted);
    --ann-muted-2:#94a3b8;

    --ann-blue:var(--hp-primary);
    --ann-blue-dark:var(--hp-primary-hover);
    --ann-blue-light:#60a5fa;
    --ann-blue-soft:var(--hp-primary-soft);
    --ann-blue-line:#bfdbfe;
    --ann-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --ann-radius-xl:22px;
    --ann-radius-lg:16px;
    --ann-radius-md:11px;

    --ann-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --ann-shadow-md:0 18px 44px rgba(15,23,42,.08),0 5px 16px rgba(15,23,42,.035);

    --ann-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="announcements"]) .premium-announcements-wrapper,
:where(html[data-hp-page="announcements"]) .premium-announcements-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="announcements"]) .premium-announcements-wrapper {
    direction:rtl;
    text-align:right;
    padding:4px 0;
    color:var(--ann-text-2);
    font-family:inherit;
    -webkit-font-smoothing:antialiased;
}

/* =========================================================
   Announcement Card
   ========================================================= */
:where(html[data-hp-page="announcements"]) .pa-card {
    position:relative;
    overflow:hidden;
    margin-bottom:16px;
    padding:20px;

    border:1px solid var(--ann-border);
    border-radius:var(--ann-radius-xl);
    background:
        linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    box-shadow:var(--ann-shadow-sm);

    transition:
        transform var(--ann-transition),
        border-color var(--ann-transition),
        box-shadow var(--ann-transition);
}

:where(html[data-hp-page="announcements"]) .pa-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:linear-gradient(90deg,transparent,var(--ann-blue),transparent);
    opacity:.72;
}

:where(html[data-hp-page="announcements"]) .pa-card:hover {
    transform:translateY(-2px);
    border-color:#d3deeb;
    box-shadow:var(--ann-shadow-md);
}

/* =========================================================
   Header / Date
   ========================================================= */
:where(html[data-hp-page="announcements"]) .pa-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;

    margin-bottom:12px;
}

:where(html[data-hp-page="announcements"]) .pa-date {
    min-height:34px;
    padding:0 10px;

    display:inline-flex;
    align-items:center;
    gap:6px;

    border:1px solid var(--ann-border);
    border-radius:9px;

    color:var(--ann-muted);
    background:#f8fafc;

    font-size:.74rem;
    line-height:1;
    font-weight:750;
}

:where(html[data-hp-page="announcements"]) .pa-date i {
    color:var(--ann-blue);
    font-size:.72rem;
}

/* =========================================================
   Title
   ========================================================= */
:where(html[data-hp-page="announcements"]) .pa-title {
    margin:0 0 12px;

    display:flex;
    align-items:flex-start;
    gap:10px;

    color:var(--ann-text)!important;

    font-size:1.08rem;
    line-height:1.75;
    font-weight:900;
    text-decoration:none!important;

    transition:color var(--ann-transition);
}

:where(html[data-hp-page="announcements"]) .pa-title i {
    width:38px;
    height:38px;
    flex:0 0 38px;
    margin-top:1px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ann-blue-line);
    border-radius:11px;

    color:var(--ann-blue);
    background:var(--ann-blue-soft);

    font-size:.76rem;
}

:where(html[data-hp-page="announcements"]) .pa-title:hover {
    color:var(--ann-blue)!important;
}

/* =========================================================
   Summary
   ========================================================= */
:where(html[data-hp-page="announcements"]) .pa-summary {
    margin-bottom:16px;

    color:var(--ann-muted);
    font-size:.88rem;
    line-height:1.95;
    font-weight:520;
    text-align:justify;

    word-break:break-word;
}

:where(html[data-hp-page="announcements"]) .pa-summary p:last-child {
    margin-bottom:0;
}

:where(html[data-hp-page="announcements"]) .pa-summary img {
    max-width:100%;
    height:auto;
    border-radius:12px;
}

:where(html[data-hp-page="announcements"]) .pa-summary a {
    color:var(--ann-blue);
    text-decoration:none;
}

:where(html[data-hp-page="announcements"]) .pa-summary a:hover {
    text-decoration:underline;
}

/* =========================================================
   Footer / Read More
   ========================================================= */
:where(html[data-hp-page="announcements"]) .pa-footer {
    padding-top:13px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    border-top:1px solid var(--ann-border-soft);
}

:where(html[data-hp-page="announcements"]) .pa-btn {
    min-height:42px;
    padding:0 15px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    border:0;
    border-radius:10px;

    color:#fff!important;
    background:var(--ann-gradient);
    box-shadow:0 10px 21px -12px rgba(37,99,235,.90);

    font-size:.80rem;
    line-height:1;
    font-weight:900;
    text-decoration:none!important;

    transition:
        transform var(--ann-transition),
        box-shadow var(--ann-transition);
}

:where(html[data-hp-page="announcements"]) .pa-btn:hover {
    transform:translateY(-1px);
    color:#fff!important;
    box-shadow:0 14px 25px -12px rgba(37,99,235,.97);
}

:where(html[data-hp-page="announcements"]) .pa-btn i {
    font-size:.74rem;
    transition:transform var(--ann-transition);
}

:where(html[data-hp-page="announcements"]) .pa-btn:hover i {
    transform:translateX(-3px);
}

/* =========================================================
   Pagination
   ========================================================= */
:where(html[data-hp-page="announcements"]) .pa-pagination-wrapper {
    margin-top:22px;
}

:where(html[data-hp-page="announcements"]) .pa-pagination-wrapper .pagination {
    margin:0;
    padding:6px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--ann-border);
    border-radius:13px;
    background:#fff;
    box-shadow:var(--ann-shadow-sm);
}

:where(html[data-hp-page="announcements"]) .pa-pagination-wrapper .page-item {
    margin:0;
}

:where(html[data-hp-page="announcements"]) .pa-pagination-wrapper .page-link {
    width:36px;
    height:36px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid transparent!important;
    border-radius:9px!important;

    color:var(--ann-muted);
    background:transparent!important;

    font-size:.76rem;
    line-height:1;
    font-weight:850;

    box-shadow:none!important;

    transition:
        color var(--ann-transition),
        border-color var(--ann-transition),
        background var(--ann-transition);
}

:where(html[data-hp-page="announcements"]) .pa-pagination-wrapper .page-item.active .page-link {
    color:#fff!important;
    border-color:var(--ann-blue)!important;
    background:var(--ann-gradient)!important;
    box-shadow:0 7px 14px rgba(37,99,235,.16)!important;
}

:where(html[data-hp-page="announcements"]) .pa-pagination-wrapper .page-item:not(.active):not(.disabled) .page-link:hover {
    color:var(--ann-blue)!important;
    border-color:var(--ann-blue-line)!important;
    background:var(--ann-blue-soft)!important;
}

:where(html[data-hp-page="announcements"]) .pa-pagination-wrapper .page-item.disabled .page-link {
    color:#cbd5e1!important;
    cursor:not-allowed;
}

/* =========================================================
   Empty state alert
   ========================================================= */
:where(html[data-hp-page="announcements"]) .premium-announcements-wrapper .alert {
    border-radius:13px;
    font-size:.86rem;
    line-height:1.75;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="announcements"]) .pa-card {
        padding:16px;
        border-radius:18px;
    }

    :where(html[data-hp-page="announcements"]) .pa-title {
        font-size:.98rem;
    }

    :where(html[data-hp-page="announcements"]) .pa-title i {
        width:35px;
        height:35px;
        flex-basis:35px;
    }

    :where(html[data-hp-page="announcements"]) .pa-summary {
        font-size:.84rem;
        text-align:right;
    }

    :where(html[data-hp-page="announcements"]) .pa-footer {
        justify-content:stretch;
    }

    :where(html[data-hp-page="announcements"]) .pa-btn {
        width:100%;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="announcements"]) .pa-card {
        padding:14px;
        border-radius:16px;
    }

    :where(html[data-hp-page="announcements"]) .pa-date {
        font-size:.70rem;
    }

    :where(html[data-hp-page="announcements"]) .pa-title {
        font-size:.93rem;
    }

    :where(html[data-hp-page="announcements"]) .pa-pagination-wrapper .pagination {
        max-width:100%;
        overflow-x:auto;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="announcements"]) .pa-card,
:where(html[data-hp-page="announcements"]) .pa-title,
:where(html[data-hp-page="announcements"]) .pa-btn,
:where(html[data-hp-page="announcements"]) .pa-btn i,
:where(html[data-hp-page="announcements"]) .pa-pagination-wrapper .page-link {
        transition:none!important;
    }
}

/* clientareaaddfunds.tpl */
:root:where(html[data-hp-page="clientareaaddfunds"]) {
    --af-page:var(--hp-page);
    --af-card:var(--hp-surface);
    --af-card-soft:var(--hp-surface-soft);
    --af-border:var(--hp-line);
    --af-border-soft:#edf1f6;

    --af-text:var(--hp-ink);
    --af-text-2:var(--hp-ink-secondary);
    --af-muted:var(--hp-muted);
    --af-muted-2:#94a3b8;

    --af-blue:var(--hp-primary);
    --af-blue-dark:var(--hp-primary-hover);
    --af-blue-light:#60a5fa;
    --af-blue-soft:var(--hp-primary-soft);
    --af-blue-line:#bfdbfe;
    --af-blue-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --af-green:#059669;
    --af-green-soft:#ecfdf5;
    --af-orange:#d97706;
    --af-orange-soft:#fffbeb;

    --af-radius-xl:24px;
    --af-radius-lg:18px;
    --af-radius-md:13px;

    --af-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --af-shadow-md:0 18px 44px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);
    --af-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-wrapper,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-wrapper {
    width:100%;
    max-width:920px;
    margin:0 auto;
    direction:rtl;
    text-align:right;
    color:var(--af-text);
    font-family:inherit;
    -webkit-font-smoothing:antialiased;
}

/* ===== Main container ===== */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-wrapper .card {
    position:relative;
    overflow:hidden;
    margin:0;
    border:1px solid var(--af-border);
    border-radius:var(--af-radius-xl);
    background:var(--af-card);
    box-shadow:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-wrapper .card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:5;
    background:var(--af-blue-gradient);
}

/* ===== Stats ===== */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-stats-grid {
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    padding:22px;
    border-bottom:1px solid var(--af-border-soft);
    background:
        radial-gradient(circle at 12% 0%,rgba(96,165,250,.08),transparent 26%),
        linear-gradient(180deg,#fbfdff 0%,#f8fafc 100%);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item {
    position:relative;
    min-width:0;
    min-height:132px;
    overflow:hidden;
    padding:18px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    border:1px solid var(--af-border);
    border-radius:var(--af-radius-lg);
    background:#fff;
    box-shadow:var(--af-shadow-sm);

    transition:
        transform var(--af-transition),
        border-color var(--af-transition),
        box-shadow var(--af-transition);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item::after {
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    left:-70px;
    bottom:-82px;
    border-radius:50%;
    background:var(--af-blue-soft);
    opacity:.75;
    pointer-events:none;
    transition:transform var(--af-transition);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item:hover {
    transform:translateY(-2px);
    border-color:#cbdcf5;
    box-shadow:var(--af-shadow-md);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item:hover::after {
    transform:scale(1.12);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-icon {
    position:absolute;
    top:17px;
    left:17px;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--af-blue-line);
    border-radius:12px;
    color:var(--af-blue);
    background:var(--af-blue-soft);

    font-size:.95rem;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-label {
    position:relative;
    z-index:2;
    margin-bottom:8px;
    padding-left:50px;
    color:var(--af-muted);
    font-size:.92rem;
    line-height:1.6;
    font-weight:800;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-value {
    position:relative;
    z-index:2;
    max-width:100%;
    color:var(--af-text);
    font-size:1.28rem;
    line-height:1.45;
    font-weight:900;
    font-variant-numeric:tabular-nums;
    word-break:break-word;
}

/* different accents */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item:nth-child(2) .soft-stat-icon {
    color:var(--af-green);
    background:var(--af-green-soft);
    border-color:#a7f3d0;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item:nth-child(2)::after {
    background:var(--af-green-soft);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item:nth-child(3) .soft-stat-icon {
    color:var(--af-orange);
    background:var(--af-orange-soft);
    border-color:#fde68a;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item:nth-child(3)::after {
    background:var(--af-orange-soft);
}

/* ===== Form ===== */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-form {
    position:relative;
    padding:27px 24px 24px;
    background:#fff;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-form::before {
    content:"افزایش اعتبار حساب";
    display:block;
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:1px solid var(--af-border-soft);
    color:var(--af-text);
    font-size:1.08rem;
    line-height:1.6;
    font-weight:900;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-form::after {
    content:"مبلغ موردنظر و روش پرداخت را انتخاب کنید.";
    position:absolute;
    top:30px;
    left:24px;
    color:var(--af-muted-2);
    font-size:.82rem;
    font-weight:600;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-form fieldset {
    margin:0;
    padding:0;
    border:0;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-group {
    margin-bottom:18px;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-label {
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:9px;
    color:var(--af-text-2);
    font-size:.93rem;
    line-height:1.6;
    font-weight:850;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-label::before {
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:var(--af-blue);
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-control,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-select {
    width:100%;
    min-height:52px;
    padding:0 15px;

    border:1px solid var(--af-border);
    border-radius:var(--af-radius-md);
    outline:0;

    color:var(--af-text);
    background:var(--af-card-soft);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);

    font-family:inherit;
    font-size:.95rem;
    font-weight:650;

    transition:
        background-color var(--af-transition),
        border-color var(--af-transition),
        box-shadow var(--af-transition);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-control:hover,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-select:hover {
    border-color:#cbd5e1;
    background:#fff;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-control:focus,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-select:focus {
    border-color:var(--af-blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.09);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-control::placeholder {
    color:var(--af-muted-2);
}

/* ===== Submit ===== */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-btn-block {
    width:100%;
    min-height:54px;
    margin-top:22px;
    padding:0 20px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    border:0;
    border-radius:13px;

    color:#fff!important;
    background:var(--af-blue-gradient);
    box-shadow:0 12px 25px -12px rgba(37,99,235,.9);

    font-family:inherit;
    font-size:.98rem;
    font-weight:900;

    cursor:pointer;

    transition:
        transform var(--af-transition),
        box-shadow var(--af-transition),
        filter var(--af-transition);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-btn-block:hover {
    transform:translateY(-2px);
    filter:saturate(1.05);
    box-shadow:0 17px 31px -12px rgba(37,99,235,.95);
    color:#fff!important;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-btn-block:active {
    transform:translateY(0);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-btn-block:focus-visible {
    outline:0;
    box-shadow:0 0 0 4px rgba(37,99,235,.12),0 12px 25px -12px rgba(37,99,235,.9);
}

/* ===== Disclaimer ===== */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-disclaimer {
    min-height:60px;
    padding:15px 22px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border-top:1px solid #fde7b0;
    color:#9a6700;
    background:linear-gradient(180deg,#fffdf7 0%,#fffbeb 100%);

    font-size:.88rem;
    line-height:1.75;
    font-weight:750;
    text-align:center;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-disclaimer i {
    width:30px;
    height:30px;
    flex:0 0 30px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid #fde68a;
    border-radius:9px;
    color:#d97706;
    background:#fff7d6;
}

/* ===== WHMCS alerts ===== */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-wrapper > .alert {
    margin-bottom:16px;
    border-radius:14px;
    font-size:.90rem;
    line-height:1.75;
}

/* ===== Responsive ===== */
@media(max-width:767.98px) {
    :where(html[data-hp-page="clientareaaddfunds"]) .soft-stats-grid {
        grid-template-columns:1fr;
        padding:16px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item {
        min-height:112px;
        padding:16px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-form {
        padding:21px 17px 19px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-form::before {
        margin-bottom:17px;
        font-size:1rem;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-form::after {
        display:none;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-form-control,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-select {
        min-height:50px;
        font-size:.91rem;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-btn-block {
        min-height:52px;
        font-size:.93rem;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-disclaimer {
        padding:13px 16px;
        font-size:.83rem;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-wrapper .card {
        border-radius:18px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-stats-grid {
        padding:12px;
        gap:10px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item {
        border-radius:15px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-label {
        font-size:.86rem;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-value {
        font-size:1.16rem;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-addfunds-form {
        padding:18px 14px 16px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-form-label {
        font-size:.88rem;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-disclaimer {
        align-items:flex-start;
        text-align:right;
    }
}


/* ===== Quick Amounts ===== */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-amounts {
    margin:2px 0 20px;
    padding:16px;
    border:1px solid var(--af-border-soft);
    border-radius:15px;
    background:linear-gradient(180deg,#fbfdff 0%,#f8fafc 100%);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-head {
    margin-bottom:11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-title {
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--af-text-2);
    font-size:.91rem;
    font-weight:850;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-title i {
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--af-blue-line);
    border-radius:9px;
    color:var(--af-blue);
    background:var(--af-blue-soft);
    font-size:.76rem;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-hint {
    color:var(--af-muted-2);
    font-size:.76rem;
    font-weight:650;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-chip {
    min-height:42px;
    padding:0 9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dce4ee;
    border-radius:11px;
    color:var(--af-text-2);
    background:#fff;
    box-shadow:0 2px 7px rgba(15,23,42,.025);
    font-family:inherit;
    font-size:.82rem;
    font-weight:850;
    cursor:pointer;
    white-space:nowrap;
    transition:
        transform var(--af-transition),
        color var(--af-transition),
        border-color var(--af-transition),
        background var(--af-transition),
        box-shadow var(--af-transition);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-chip:hover {
    transform:translateY(-1px);
    color:var(--af-blue);
    border-color:var(--af-blue-line);
    background:var(--af-blue-soft);
    box-shadow:0 7px 16px rgba(37,99,235,.07);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-chip.is-active {
    color:#fff;
    border-color:var(--af-blue);
    background:var(--af-blue-gradient);
    box-shadow:0 8px 18px rgba(37,99,235,.18);
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-chip:focus-visible {
    outline:0;
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

/* ===== Amount Live Preview ===== */
:where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-preview {
    min-height:46px;
    margin-top:-8px;
    margin-bottom:18px;
    padding:9px 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid #dbeafe;
    border-radius:12px;
    color:var(--af-muted);
    background:var(--af-blue-soft);
    font-size:.82rem;
    font-weight:700;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-preview strong {
    color:var(--af-blue-dark);
    font-size:.94rem;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

:where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-preview.is-empty strong {
    color:var(--af-muted-2);
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-chip:last-child {
        grid-column:1 / -1;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-amounts {
        padding:13px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-quick-head {
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-chip {
        min-height:40px;
        font-size:.78rem;
    }

    :where(html[data-hp-page="clientareaaddfunds"]) .soft-amount-preview {
        align-items:flex-start;
        flex-direction:column;
        gap:3px;
    }
}


@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-stat-item::after,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-control,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-form-select,
:where(html[data-hp-page="clientareaaddfunds"]) .soft-btn-block {
        transition:none!important;
    }
}

/* clientareacancelrequest.tpl */
:root:where(html[data-hp-page="clientareacancelrequest"]) {
    --cn-card:var(--hp-surface);
    --cn-soft:var(--hp-surface-soft);
    --cn-border:var(--hp-line);
    --cn-divider:#edf1f6;

    --cn-text:var(--hp-ink);
    --cn-text-2:var(--hp-ink-secondary);
    --cn-muted:var(--hp-muted);
    --cn-muted-2:#94a3b8;

    --cn-blue:var(--hp-primary);
    --cn-blue-dark:var(--hp-primary-hover);
    --cn-blue-light:#60a5fa;
    --cn-blue-soft:var(--hp-primary-soft);
    --cn-blue-line:#bfdbfe;
    --cn-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --cn-green:#059669;
    --cn-green-soft:#ecfdf5;
    --cn-green-line:#a7f3d0;

    --cn-orange:#d97706;
    --cn-orange-soft:#fff7ed;
    --cn-orange-line:#fed7aa;

    --cn-red:#dc2626;
    --cn-red-soft:#fef2f2;
    --cn-red-line:#fecaca;

    --cn-radius-xl:24px;
    --cn-radius-lg:17px;
    --cn-radius-md:12px;

    --cn-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --cn-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --cn-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-page,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-page * {
    box-sizing:border-box;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-page {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--cn-text-2);
}

/* =========================================================
   State cards
   ========================================================= */
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;
    padding:32px 20px;

    border:1px solid;
    border-radius:var(--cn-radius-xl);

    text-align:center;

    box-shadow:var(--cn-shadow-panel);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state--danger {
    border-color:var(--cn-red-line);
    background:linear-gradient(180deg,#fff 0%,var(--cn-red-soft) 160%);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state--danger::before {
    background:linear-gradient(90deg,#f87171,#dc2626,#b91c1c);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state--success {
    border-color:var(--cn-green-line);
    background:linear-gradient(180deg,#fff 0%,var(--cn-green-soft) 160%);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state--success::before {
    background:linear-gradient(90deg,#34d399,#059669,#047857);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state-icon {
    width:58px;
    height:58px;
    margin:0 auto 11px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid;
    border-radius:16px;

    background:#fff;

    font-size:.98rem;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state--danger .phc-cancel-state-icon {
    color:var(--cn-red);
    border-color:var(--cn-red-line);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state--success .phc-cancel-state-icon {
    color:var(--cn-green);
    border-color:var(--cn-green-line);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state h3 {
    margin:0 0 11px!important;

    color:var(--cn-text)!important;

    font-size:1.08rem!important;
    line-height:1.6;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-back {
    min-height:42px;
    padding:0 12px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--cn-blue);
    border-radius:10px;

    color:#fff!important;
    background:var(--cn-gradient);

    font-size:.84rem;
    line-height:1;
    font-weight:900;

    text-decoration:none!important;

    box-shadow:0 8px 16px rgba(37,99,235,.14);

    transition:
        transform var(--cn-transition),
        box-shadow var(--cn-transition);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-back:hover {
    transform:translateY(-1px);
    box-shadow:0 11px 20px rgba(37,99,235,.18);
}

/* =========================================================
   Error notice
   ========================================================= */
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-error {
    margin-bottom:14px;
    padding:13px 14px;

    display:flex;
    align-items:center;
    gap:8px;

    border:1px solid var(--cn-red-line);
    border-radius:12px;

    color:#991b1b;
    background:var(--cn-red-soft);

    font-size:.88rem;
    line-height:1.7;
    font-weight:800;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-error-icon {
    width:32px;
    height:32px;
    flex:0 0 32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--cn-red-line);
    border-radius:9px;

    background:#fff;

    font-size:.64rem;
}

/* =========================================================
   Main shell
   ========================================================= */
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-card {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;

    border:1px solid var(--cn-border);
    border-radius:var(--cn-radius-xl);

    background:#fff;
    box-shadow:var(--cn-shadow-panel);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--cn-gradient);
}

/* =========================================================
   Product header
   ========================================================= */
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-product {
    min-height:88px;
    padding:16px 18px;

    display:flex;
    align-items:center;
    gap:11px;

    border-bottom:1px solid var(--cn-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-product-icon {
    position:relative;

    width:44px;
    height:44px;
    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--cn-blue-line);
    border-radius:12px;

    color:#fff;
    background:var(--cn-gradient);

    box-shadow:0 9px 20px rgba(37,99,235,.16);

    font-size:.78rem;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-product-label {
    display:block;
    margin-bottom:3px;

    color:var(--cn-muted);

    font-size:.82rem;
    line-height:1.5;
    font-weight:850;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-product h4 {
    margin:0!important;

    color:var(--cn-text)!important;

    font-size:1.12rem!important;
    line-height:1.65;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-domain {
    color:var(--cn-blue)!important;

    font-size:.92rem;
    font-weight:800;
}

/* =========================================================
   Form body
   ========================================================= */
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-body {
    padding:20px 24px 22px;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-form {
    width:100%;
    max-width:none;
    margin:0;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-section {
    width:100%;
    margin-bottom:18px;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-label {
    display:flex;
    align-items:center;
    gap:7px;

    margin:0 0 10px!important;

    color:var(--cn-text)!important;

    font-size:.92rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-label i {
    color:var(--cn-blue);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-textarea {
    width:100%;
    min-height:150px;
    padding:14px 15px!important;

    border:1px solid var(--cn-border)!important;
    border-radius:11px!important;
    outline:0!important;

    color:var(--cn-text)!important;
    background:#f8fafc!important;

    font-family:inherit!important;
    font-size:.94rem!important;
    line-height:1.8;

    box-shadow:none!important;

    resize:vertical;

    transition:
        border-color var(--cn-transition),
        background var(--cn-transition),
        box-shadow var(--cn-transition);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-textarea:hover {
    border-color:#cbd5e1!important;
    background:#fff!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-textarea:focus {
    border-color:var(--cn-blue)!important;
    background:#fff!important;

    box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-textarea::placeholder {
    color:var(--cn-muted-2)!important;
}

/* =========================================================
   Domain cancellation
   ========================================================= */
:where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-warning {
    margin-bottom:15px;
    padding:12px 13px;

    border:1px solid var(--cn-orange-line);
    border-radius:13px;

    background:linear-gradient(135deg,#fff 0%,var(--cn-orange-soft) 160%);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-warning-head {
    display:flex;
    align-items:flex-start;
    gap:9px;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-warning-icon {
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--cn-orange-line);
    border-radius:10px;

    color:var(--cn-orange);
    background:#fff;

    font-size:.67rem;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-warning h6 {
    margin:0 0 4px!important;

    color:var(--cn-text)!important;

    font-size:.96rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-warning p {
    margin:0!important;

    color:var(--cn-muted)!important;

    font-size:.84rem!important;
    line-height:1.75;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-checkbox {
    margin-top:10px;
    padding:9px 10px;

    display:flex;
    align-items:center;
    gap:8px;

    border:1px solid var(--cn-orange-line);
    border-radius:10px;

    background:#fff;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-checkbox input {
    width:17px;
    height:17px;

    accent-color:var(--cn-orange);
    cursor:pointer;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-checkbox label {
    margin:0!important;

    color:var(--cn-text-2)!important;

    font-size:.86rem!important;
    line-height:1.65;
    font-weight:800!important;

    cursor:pointer;
}

/* =========================================================
   Cancellation type cards
   ========================================================= */
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type {
    position:relative;
    min-height:118px;

    display:block;

    cursor:pointer;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type-card {
    height:100%;
    padding:16px 16px;

    display:flex;
    align-items:flex-start;
    gap:9px;

    border:1px solid var(--cn-border);
    border-radius:12px;

    background:#fff;

    box-shadow:var(--cn-shadow-sm);

    transition:
        transform var(--cn-transition),
        border-color var(--cn-transition),
        background var(--cn-transition),
        box-shadow var(--cn-transition);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type:hover .phc-cancel-type-card {
    transform:translateY(-1px);

    border-color:var(--cn-blue-line);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type input:checked + .phc-cancel-type-card {
    border-color:var(--cn-blue);
    background:var(--cn-blue-soft);

    box-shadow:0 0 0 3px rgba(37,99,235,.06);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type-dot {
    width:20px;
    height:20px;
    flex:0 0 20px;
    margin-top:1px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #cbd5e1;
    border-radius:50%;

    background:#fff;

    transition:
        border-color var(--cn-transition),
        background var(--cn-transition);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type-dot::after {
    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:transparent;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type input:checked + .phc-cancel-type-card .phc-cancel-type-dot {
    border-color:var(--cn-blue);
    background:#fff;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type input:checked + .phc-cancel-type-card .phc-cancel-type-dot::after {
    background:var(--cn-blue);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type-title {
    display:block;
    margin-bottom:5px;

    color:var(--cn-text);

    font-size:.96rem;
    line-height:1.55;
    font-weight:900;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type-desc {
    display:block;

    color:var(--cn-muted);

    font-size:.84rem;
    line-height:1.75;
    font-weight:650;
}

/* =========================================================
   Actions
   ========================================================= */
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-actions {
    width:100%;
    margin-top:18px;
    padding-top:16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;

    border-top:1px solid var(--cn-divider);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-submit,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-reset {
    min-height:40px;
    padding:0 13px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border-radius:10px!important;

    font-family:inherit!important;
    font-size:.88rem!important;
    line-height:1;
    font-weight:900!important;

    text-decoration:none!important;

    box-shadow:none!important;

    transition:
        transform var(--cn-transition),
        color var(--cn-transition),
        border-color var(--cn-transition),
        background var(--cn-transition),
        box-shadow var(--cn-transition);
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-submit {
    min-width:190px;

    color:#fff!important;
    border:1px solid var(--cn-red)!important;
    background:linear-gradient(135deg,#ef4444,#dc2626)!important;

    box-shadow:0 8px 16px rgba(220,38,38,.14)!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-submit:hover {
    transform:translateY(-1px);

    box-shadow:0 11px 20px rgba(220,38,38,.18)!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-reset {
    min-width:110px;

    color:var(--cn-muted)!important;
    border:1px solid var(--cn-border)!important;
    background:#fff!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-reset:hover {
    transform:translateY(-1px);

    color:var(--cn-blue)!important;
    border-color:var(--cn-blue-line)!important;
    background:var(--cn-blue-soft)!important;
}

:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-card .form-stacked,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-card .form-group,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-card .row {
    width:100%;
    max-width:none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-card,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state {
        border-radius:19px;
    }

    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-product {
        padding:14px;
    }

    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-body {
        padding:15px;
    }

    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type-grid {
        grid-template-columns:1fr;
    }

    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-actions {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-submit,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-reset {
        width:100%;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-state {
        padding:27px 14px;
    }

    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-product {
        align-items:flex-start;
    }

    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-product-icon {
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    :where(html[data-hp-page="clientareacancelrequest"]) .phc-domain-warning-head {
        align-items:flex-start;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-back,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-textarea,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-type-card,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-submit,
:where(html[data-hp-page="clientareacancelrequest"]) .phc-cancel-reset {
        transition:none!important;
    }
}

/* clientareadetails.tpl */
:root:where(html[data-hp-page="clientareadetails"]) {
    --profile-card:var(--hp-surface);
    --profile-soft:var(--hp-surface-soft);
    --profile-border:var(--hp-line);
    --profile-border-soft:#edf1f6;

    --profile-text:var(--hp-ink);
    --profile-text-2:var(--hp-ink-secondary);
    --profile-muted:var(--hp-muted);
    --profile-muted-2:#94a3b8;

    --profile-blue:var(--hp-primary);
    --profile-blue-dark:var(--hp-primary-hover);
    --profile-blue-light:#60a5fa;
    --profile-blue-soft:var(--hp-primary-soft);
    --profile-blue-line:#bfdbfe;
    --profile-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --profile-green:#059669;
    --profile-green-soft:#ecfdf5;
    --profile-green-line:#a7f3d0;

    --profile-orange:#d97706;
    --profile-orange-soft:#fff7ed;
    --profile-orange-line:#fed7aa;

    --profile-radius-xl:24px;
    --profile-radius-lg:17px;
    --profile-radius-md:12px;

    --profile-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --profile-shadow-md:0 18px 44px rgba(15,23,42,.08),0 5px 16px rgba(15,23,42,.035);

    --profile-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="clientareadetails"]) .premium-profile-wrapper,
:where(html[data-hp-page="clientareadetails"]) .premium-profile-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="clientareadetails"]) .premium-profile-wrapper {
    direction:rtl;
    text-align:right;
    color:var(--profile-text-2);
    font-family:inherit;
    font-size:.88rem;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

/* =========================================================
   Profile Header
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-header-card {
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    padding:22px;

    display:flex;
    align-items:center;

    border:1px solid var(--profile-border);
    border-radius:var(--profile-radius-xl);
    background:
        radial-gradient(circle at 8% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    box-shadow:var(--profile-shadow-sm);

    transition:border-color var(--profile-transition),box-shadow var(--profile-transition);
}

:where(html[data-hp-page="clientareadetails"]) .premium-header-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:var(--profile-gradient);
}

:where(html[data-hp-page="clientareadetails"]) .premium-header-card:hover {
    border-color:#d5dfeb;
    box-shadow:var(--profile-shadow-md);
}

/* Avatar */
:where(html[data-hp-page="clientareadetails"]) .premium-avatar {
    width:84px;
    height:84px;
    flex:0 0 84px;
    padding:4px;

    border:1px solid var(--profile-blue-line);
    border-radius:22px;
    background:linear-gradient(145deg,#eff6ff,#ffffff);
    box-shadow:0 12px 24px rgba(37,99,235,.10);
}

:where(html[data-hp-page="clientareadetails"]) .premium-avatar-inner {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:18px;
    background:#f8fafc;
}

:where(html[data-hp-page="clientareadetails"]) .default-avatar-svg,
:where(html[data-hp-page="clientareadetails"]) .gravatar-img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

:where(html[data-hp-page="clientareadetails"]) .default-avatar-svg {
    z-index:1;
}

:where(html[data-hp-page="clientareadetails"]) .gravatar-img {
    z-index:2;
    object-fit:cover;
    opacity:0;
    transition:opacity .35s ease;
}

:where(html[data-hp-page="clientareadetails"]) .premium-user-info {
    min-width:0;
    padding-right:17px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

:where(html[data-hp-page="clientareadetails"]) .premium-user-info h2 {
    margin:0 0 5px!important;

    color:var(--profile-text);
    font-size:1.27rem;
    line-height:1.55;
    font-weight:900;
    letter-spacing:0;
}

:where(html[data-hp-page="clientareadetails"]) .premium-user-info p {
    margin:0!important;

    display:flex;
    align-items:center;
    gap:7px;

    color:var(--profile-muted);
    font-size:.86rem;
    line-height:1.7;
    font-weight:600;
}

:where(html[data-hp-page="clientareadetails"]) .premium-user-info p i {
    color:var(--profile-blue);
    font-size:.76rem;
}

/* =========================================================
   Main Cards
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-card {
    position:relative;
    overflow:hidden;
    margin-bottom:20px;

    border:1px solid var(--profile-border);
    border-radius:var(--profile-radius-xl);
    background:var(--profile-card);
    box-shadow:var(--profile-shadow-sm);

    transition:border-color var(--profile-transition),box-shadow var(--profile-transition);
}

:where(html[data-hp-page="clientareadetails"]) .premium-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:2px;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.75),transparent);
}

:where(html[data-hp-page="clientareadetails"]) .premium-card:hover {
    border-color:#d7e0eb;
    box-shadow:var(--profile-shadow-md);
}

:where(html[data-hp-page="clientareadetails"]) .premium-card-header {
    padding:15px 17px;

    display:flex;
    align-items:center;

    border-bottom:1px solid var(--profile-border-soft);
    background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
}

:where(html[data-hp-page="clientareadetails"]) .icon-wrapper {
    width:37px;
    height:37px;
    flex:0 0 37px;
    margin-left:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--profile-blue-line)!important;
    border-radius:11px!important;

    color:var(--profile-blue)!important;
    background:var(--profile-blue-soft)!important;
    box-shadow:none!important;

    font-size:.77rem;
}

:where(html[data-hp-page="clientareadetails"]) .premium-card-title {
    margin:0;
    color:var(--profile-text);
    font-size:1rem;
    line-height:1.55;
    font-weight:900;
}

:where(html[data-hp-page="clientareadetails"]) .premium-card-body {
    padding:18px;
}

/* =========================================================
   Form labels
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-profile-wrapper label {
    margin-bottom:7px;

    display:flex;
    align-items:center;

    color:var(--profile-text-2);
    font-size:.84rem;
    line-height:1.55;
    font-weight:850;
}

:where(html[data-hp-page="clientareadetails"]) .premium-profile-wrapper label i {
    width:18px;
    margin-left:5px;

    color:var(--profile-muted-2);
    font-size:.72rem;
    text-align:center;
}

:where(html[data-hp-page="clientareadetails"]) .premium-profile-wrapper .form-group {
    margin-bottom:16px!important;
}

/* =========================================================
   Inputs / Selects
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-input {
    width:100%;
    min-height:50px;
    padding:0 13px;

    border:1px solid var(--profile-border);
    border-radius:11px;

    color:var(--profile-text);
    background:#f8fafc;

    font-family:inherit;
    font-size:.88rem;
    line-height:1.5;
    font-weight:600;

    outline:0;
    box-shadow:none;

    transition:
        border-color var(--profile-transition),
        background var(--profile-transition),
        box-shadow var(--profile-transition);
}

:where(html[data-hp-page="clientareadetails"]) textarea.premium-input {
    min-height:110px;
    padding:12px 13px;
    line-height:1.8;
}

:where(html[data-hp-page="clientareadetails"]) .premium-input:hover:not(:disabled) {
    border-color:#cbd5e1;
    background:#fff;
}

:where(html[data-hp-page="clientareadetails"]) .premium-input:focus {
    border-color:var(--profile-blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="clientareadetails"]) .premium-input:disabled {
    color:#94a3b8;
    border-color:#e5eaf0;
    background:#f1f5f9;
    cursor:not-allowed;
}

:where(html[data-hp-page="clientareadetails"]) .premium-profile-wrapper .dir-ltr {
    direction:ltr!important;
    text-align:left!important;
}

/* Select arrows */
:where(html[data-hp-page="clientareadetails"]) select.premium-input {
    height:50px;
    padding-right:13px;
    padding-left:38px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:left 13px center;
    background-size:15px 15px;
}

/* =========================================================
   Custom field description
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .control small.text-muted {
    margin-top:7px!important;
    color:var(--profile-muted)!important;
    font-size:.73rem!important;
    line-height:1.7;
}

/* =========================================================
   Switch Cards
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-switch-item {
    width:100%;
    min-height:62px;
    margin-bottom:9px;
    padding:10px 12px;

    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    border:1px solid var(--profile-border);
    border-radius:11px;

    color:var(--profile-text-2);
    background:#f8fafc;

    cursor:pointer;

    transition:
        border-color var(--profile-transition),
        background var(--profile-transition),
        box-shadow var(--profile-transition);
}

:where(html[data-hp-page="clientareadetails"]) .premium-switch-item:hover {
    border-color:var(--profile-blue-line);
    background:#fbfdff;
    box-shadow:none;
}

:where(html[data-hp-page="clientareadetails"]) .premium-switch-label {
    flex:1 1 auto;
    margin:0!important;
    padding-left:8px;

    color:var(--profile-text-2);
    font-size:.83rem;
    line-height:1.7;
    font-weight:800;
    text-align:right;
}

/* Toggle */
:where(html[data-hp-page="clientareadetails"]) .premium-switch-item input[type="checkbox"],
:where(html[data-hp-page="clientareadetails"]) .control input[type="checkbox"] {
    position:relative;

    width:42px!important;
    min-width:42px!important;
    height:24px!important;

    margin:0!important;

    appearance:none!important;
    -webkit-appearance:none!important;

    border:0!important;
    border-radius:24px!important;

    background:#cbd5e1!important;
    outline:0!important;
    box-shadow:none!important;

    cursor:pointer;

    transition:background var(--profile-transition);
}

:where(html[data-hp-page="clientareadetails"]) .premium-switch-item input[type="checkbox"]::after,
:where(html[data-hp-page="clientareadetails"]) .control input[type="checkbox"]::after {
    content:"";
    position:absolute;
    top:3px;
    left:3px;

    width:18px;
    height:18px;

    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 5px rgba(15,23,42,.18);

    transition:transform var(--profile-transition);
}

:where(html[data-hp-page="clientareadetails"]) .premium-switch-item input[type="checkbox"]:checked,
:where(html[data-hp-page="clientareadetails"]) .control input[type="checkbox"]:checked {
    background:var(--profile-blue)!important;
}

:where(html[data-hp-page="clientareadetails"]) .premium-switch-item input[type="checkbox"]:checked::after,
:where(html[data-hp-page="clientareadetails"]) .control input[type="checkbox"]:checked::after {
    transform:translateX(18px);
}

/* Customfield checkbox wrapper */
:where(html[data-hp-page="clientareadetails"]) .control label.checkbox-inline {
    width:100%;
    min-height:54px;
    margin:0!important;
    padding:10px 12px!important;

    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    border:1px solid var(--profile-border);
    border-radius:11px;

    color:var(--profile-text-2);
    background:#f8fafc;

    font-size:.83rem;
    line-height:1.7;
    font-weight:800;

    cursor:pointer;
}

:where(html[data-hp-page="clientareadetails"]) .control label.checkbox-inline:hover {
    border-color:var(--profile-blue-line);
    background:#fbfdff;
}

:where(html[data-hp-page="clientareadetails"]) .control label.checkbox-inline input[type="checkbox"] {
    margin-right:auto!important;
    margin-left:0!important;
}

/* =========================================================
   Email preferences
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-card .row > [class*="col-"] .premium-switch-item:last-child {
    margin-bottom:0;
}

/* =========================================================
   Marketing card
   Override inline old colors
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-card[style*="background: #f8fafc"] {
    border-color:var(--profile-blue-line)!important;
    background:
        radial-gradient(circle at 8% 0%,rgba(96,165,250,.08),transparent 30%),
        linear-gradient(180deg,#fbfdff,#f7faff)!important;
}

:where(html[data-hp-page="clientareadetails"]) .premium-card[style*="background: #f8fafc"] .icon-wrapper {
    color:var(--profile-blue)!important;
    border-color:var(--profile-blue-line)!important;
    background:#fff!important;
    box-shadow:0 6px 14px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="clientareadetails"]) .premium-card[style*="background: #f8fafc"] .premium-switch-item {
    min-height:44px;
}

/* =========================================================
   Action Buttons
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-actions {
    margin-top:22px;
    margin-bottom:28px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

:where(html[data-hp-page="clientareadetails"]) .btn-premium-save,
:where(html[data-hp-page="clientareadetails"]) .btn-premium-cancel {
    min-height:48px;
    padding:0 20px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    border-radius:11px;

    font-family:inherit;
    font-size:.87rem;
    line-height:1;
    font-weight:900;

    transition:
        transform var(--profile-transition),
        color var(--profile-transition),
        border-color var(--profile-transition),
        background var(--profile-transition),
        box-shadow var(--profile-transition);
}

:where(html[data-hp-page="clientareadetails"]) .btn-premium-save {
    border:0;
    color:#fff;
    background:var(--profile-gradient);
    box-shadow:0 11px 23px -12px rgba(37,99,235,.92);
}

:where(html[data-hp-page="clientareadetails"]) .btn-premium-save:hover {
    transform:translateY(-2px);
    color:#fff;
    box-shadow:0 16px 28px -12px rgba(37,99,235,.98);
}

:where(html[data-hp-page="clientareadetails"]) .btn-premium-cancel {
    border:1px solid var(--profile-border);
    color:var(--profile-text-2);
    background:#f8fafc;
    box-shadow:none;
}

:where(html[data-hp-page="clientareadetails"]) .btn-premium-cancel:hover {
    transform:translateY(-2px);
    color:var(--profile-blue);
    border-color:var(--profile-blue-line);
    background:var(--profile-blue-soft);
}

/* =========================================================
   Alerts
   ========================================================= */
:where(html[data-hp-page="clientareadetails"]) .premium-profile-wrapper ~ .alert,
:where(html[data-hp-page="clientareadetails"]) .alert {
    border-radius:13px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="clientareadetails"]) .premium-header-card {
        padding:18px;
        flex-direction:column;
        text-align:center;
        border-radius:20px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-user-info {
        padding-right:0;
        margin-top:12px;
        align-items:center;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-user-info p {
        justify-content:center;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-card {
        border-radius:18px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-card-header {
        padding:14px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-card-body {
        padding:14px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-avatar {
        width:78px;
        height:78px;
        flex-basis:78px;
        border-radius:20px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-avatar-inner {
        border-radius:16px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-actions {
        flex-direction:column-reverse;
        gap:8px;
    }

    :where(html[data-hp-page="clientareadetails"]) .btn-premium-save,
:where(html[data-hp-page="clientareadetails"]) .btn-premium-cancel {
        width:100%;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="clientareadetails"]) .premium-header-card {
        padding:16px;
        border-radius:17px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-user-info h2 {
        font-size:1.10rem;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-card-header {
        padding:12px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-card-body {
        padding:12px;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-card-title {
        font-size:.93rem;
    }

    :where(html[data-hp-page="clientareadetails"]) .premium-switch-item {
        min-height:58px;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareadetails"]) .premium-header-card,
:where(html[data-hp-page="clientareadetails"]) .premium-card,
:where(html[data-hp-page="clientareadetails"]) .gravatar-img,
:where(html[data-hp-page="clientareadetails"]) .premium-input,
:where(html[data-hp-page="clientareadetails"]) .premium-switch-item,
:where(html[data-hp-page="clientareadetails"]) .premium-switch-item input,
:where(html[data-hp-page="clientareadetails"]) .premium-switch-item input::after,
:where(html[data-hp-page="clientareadetails"]) .btn-premium-save,
:where(html[data-hp-page="clientareadetails"]) .btn-premium-cancel {
        transition:none!important;
    }
}

/* clientareadomainaddons.tpl */
:where(html[data-hp-page="clientareadomainaddons"]) .max-w-700 { max-width: 700px; }
:where(html[data-hp-page="clientareadomainaddons"]) .w-sm-auto { width: auto !important; }
@media (max-width: 575.98px) {
    :where(html[data-hp-page="clientareadomainaddons"]) .w-sm-auto { width: 100% !important; }
}

/* clientareadomaincontactinfo.tpl */
:where(html[data-hp-page="clientareadomaincontactinfo"]) .phc-nav-pills .nav-link { color: #6c757d; }
:where(html[data-hp-page="clientareadomaincontactinfo"]) .phc-nav-pills .nav-link.active { background-color: #007bff; color: white; box-shadow: 0 4px 6px rgba(0,123,255,0.2); }
:where(html[data-hp-page="clientareadomaincontactinfo"]) .phc-selector-panel input[type="radio"]:checked ~ * { color: #007bff; }
:where(html[data-hp-page="clientareadomaincontactinfo"]) .phc-alert-card { border-left-width: 4px !important; }
:where(html[data-hp-page="clientareadomaincontactinfo"]) .border-left-thick { border-left-width: 4px !important; }

/* clientareadomaindetails.tpl */
:root:where(html[data-hp-page="clientareadomaindetails"]) {
    --alv-bg: var(--hp-page);
    --alv-surface: var(--hp-surface);
    --alv-surface-2: #f8fbff;
    --alv-border: #e3ebf5;
    --alv-border-strong: #d4e0f0;
    --alv-text: var(--hp-ink);
    --alv-text-soft: var(--hp-ink-secondary);
    --alv-muted: var(--hp-muted);
    --alv-muted-2: #94a3b8;
    --alv-primary: var(--hp-primary);
    --alv-primary-2: var(--hp-primary-hover);
    --alv-primary-soft: var(--hp-primary-soft);
    --alv-primary-line: #bfdbfe;
    --alv-success: #059669;
    --alv-success-soft: #ecfdf5;
    --alv-success-line: #a7f3d0;
    --alv-danger: #dc2626;
    --alv-danger-soft: #fef2f2;
    --alv-danger-line: #fecaca;
    --alv-warning: #d97706;
    --alv-warning-soft: #fffbeb;
    --alv-warning-line: #fde68a;
    --alv-radius-xl: 26px;
    --alv-radius-lg: 18px;
    --alv-radius-md: 14px;
    --alv-radius-sm: 10px;
    --alv-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.03);
    --alv-shadow-md: 0 18px 40px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.04);
    --alv-gradient: linear-gradient(135deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
    --alv-transition: all .25s cubic-bezier(.4,0,.2,1);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page * {
    box-sizing: border-box;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page {
    direction: rtl;
    color: var(--alv-text-soft);
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page a {
    transition: var(--alv-transition);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .alert {
    border: 1px solid transparent;
    border-radius: var(--alv-radius-md);
    padding: 1rem 1.1rem;
    box-shadow: none;
    font-size: .9rem;
    line-height: 1.8;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .alert-success {
    background: var(--alv-success-soft);
    border-color: var(--alv-success-line);
    color: #065f46;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .alert-danger {
    background: var(--alv-danger-soft);
    border-color: var(--alv-danger-line);
    color: #991b1b;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .alert-warning {
    background: var(--alv-warning-soft);
    border-color: var(--alv-warning-line);
    color: #92400e;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .alert-info {
    background: var(--alv-primary-soft);
    border-color: var(--alv-primary-line);
    color: #1e40af;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-hero {
    position: relative;
    overflow: hidden;
    padding: 1.4rem;
    border: 1px solid var(--alv-primary-line);
    border-radius: var(--alv-radius-xl);
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.24), transparent 28%),
        radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.10), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--alv-shadow-md);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--alv-gradient);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .95fr);
    gap: 1rem;
    align-items: stretch;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-main {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-width: 0;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #fff;
    background: var(--alv-gradient);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.20);
    font-size: 1.4rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-content {
    flex: 1 1 auto;
    min-width: 0;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-overline {
    margin-bottom: .35rem;
    color: var(--alv-muted);
    font-size: .8rem;
    font-weight: 700;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-title {
    margin: 0 0 .7rem;
    color: var(--alv-text);
    font-size: 1.65rem;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -.02em;
    word-break: break-word;
    direction: ltr;
    text-align: right;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-title a {
    color: inherit !important;
    text-decoration: none !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .55rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-tag {
    min-height: 34px;
    padding: 0 .9rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 999px;
    border: 1px solid var(--alv-border);
    background: rgba(255,255,255,.92);
    color: var(--alv-text-soft);
    font-size: .78rem;
    font-weight: 800;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-tag i {
    color: var(--alv-primary);
    font-size: .72rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-tag.alv-tag-status {
    border-color: var(--alv-primary-line);
    background: var(--alv-primary-soft);
    color: var(--alv-primary-2);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-summary-box {
    padding: .95rem 1rem;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 16px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(10px);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-summary-label {
    display: block;
    margin-bottom: .35rem;
    color: var(--alv-muted);
    font-size: .74rem;
    font-weight: 700;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-summary-value {
    display: block;
    color: var(--alv-text);
    font-size: .95rem;
    line-height: 1.6;
    font-weight: 900;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-unpaid-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--alv-danger-line);
    border-radius: var(--alv-radius-lg);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(220, 38, 38, 0.10));
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-unpaid-copy {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--alv-danger);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-unpaid-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--alv-danger);
    background: rgba(220, 38, 38, 0.10);
    font-size: 1rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-unpaid-title {
    color: var(--alv-text);
    font-size: .95rem;
    font-weight: 900;
    margin-bottom: .15rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-unpaid-text {
    color: var(--alv-muted);
    font-size: .82rem;
    line-height: 1.75;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .92fr);
    gap: 1.2rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-main-column,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-side-column {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--alv-border);
    border-radius: var(--alv-radius-xl);
    background: var(--alv-surface);
    box-shadow: var(--alv-shadow-sm);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, rgba(96,165,250,0), rgba(37,99,235,.75), rgba(96,165,250,0));
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-card-header {
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    border-bottom: 1px solid var(--alv-border);
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-card-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--alv-text);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 900;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-card-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--alv-primary-line);
    border-radius: 12px;
    background: var(--alv-primary-soft);
    color: var(--alv-primary);
    font-size: .82rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-card-body {
    padding: 1.15rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-card-subtitle {
    margin: 0;
    color: var(--alv-muted);
    font-size: .82rem;
    font-weight: 700;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-stat-box {
    position: relative;
    min-height: 102px;
    padding: .95rem 1rem;
    border: 1px solid var(--alv-border);
    border-radius: 18px;
    background: var(--alv-surface-2);
    transition: var(--alv-transition);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-stat-box:hover {
    border-color: var(--alv-primary-line);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.08);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-stat-label {
    margin-bottom: .35rem;
    color: var(--alv-muted);
    font-size: .74rem;
    font-weight: 800;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-stat-value {
    color: var(--alv-text);
    font-size: .96rem;
    line-height: 1.7;
    font-weight: 900;
    word-break: break-word;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-stat-value a {
    color: var(--alv-primary) !important;
    text-decoration: none !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--alv-success-line);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06), rgba(255,255,255,1));
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-status.is-inactive {
    border-color: var(--alv-danger-line);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(255,255,255,1));
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-main {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-badge {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--alv-success-soft);
    color: var(--alv-success);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-status.is-inactive .alv-ssl-badge {
    background: var(--alv-danger-soft);
    color: var(--alv-danger);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-title {
    margin: 0 0 .2rem;
    color: var(--alv-text);
    font-size: .95rem;
    font-weight: 900;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-text {
    color: var(--alv-muted);
    font-size: .82rem;
    line-height: 1.75;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-image {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .8rem;
    border-radius: 12px;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.7);
    font-weight: 800;
    color: var(--alv-text-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-image img {
    width: 18px;
    height: 18px;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-mini-box {
    padding: .9rem 1rem;
    border: 1px solid var(--alv-border);
    border-radius: 14px;
    background: var(--alv-surface-2);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-mini-label {
    display: block;
    margin-bottom: .3rem;
    color: var(--alv-muted);
    font-size: .72rem;
    font-weight: 800;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-mini-value {
    color: var(--alv-text);
    font-size: .88rem;
    line-height: 1.7;
    font-weight: 900;
    word-break: break-word;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-actions-list {
    display: grid;
    gap: .8rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-action-item {
    min-height: 60px;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    border: 1px solid var(--alv-border);
    border-radius: 16px;
    background: var(--alv-surface-2);
    color: var(--alv-text-soft) !important;
    text-decoration: none !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-action-item:hover {
    border-color: var(--alv-primary-line);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 26px rgba(37, 99, 235, 0.08);
    color: var(--alv-primary) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-action-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--alv-primary);
    background: var(--alv-primary-soft);
    font-size: .9rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-action-title {
    color: var(--alv-text);
    font-size: .88rem;
    font-weight: 900;
    margin-bottom: .15rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-action-desc {
    color: var(--alv-muted);
    font-size: .74rem;
    line-height: 1.6;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-simple-list {
    display: grid;
    gap: .8rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-simple-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
    border: 1px solid var(--alv-border);
    border-radius: 14px;
    background: var(--alv-surface-2);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-simple-label {
    color: var(--alv-muted);
    font-size: .78rem;
    font-weight: 800;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-simple-value {
    color: var(--alv-text);
    font-size: .82rem;
    line-height: 1.7;
    font-weight: 900;
    text-align: left;
    word-break: break-word;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-badge {
    min-height: 30px;
    padding: 0 .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .75rem;
    font-weight: 800;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-badge-success {
    color: var(--alv-success);
    border-color: var(--alv-success-line);
    background: var(--alv-success-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-badge-danger {
    color: var(--alv-danger);
    border-color: var(--alv-danger-line);
    background: var(--alv-danger-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-focus-layout {
    max-width: 860px;
    margin: 0 auto;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-center-state {
    padding: 1.2rem;
    border: 1px solid var(--alv-border);
    border-radius: 20px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-center-state-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-center-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 1rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-center-icon.success {
    color: var(--alv-success);
    background: var(--alv-success-soft);
    border: 1px solid var(--alv-success-line);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-center-icon.danger {
    color: var(--alv-danger);
    background: var(--alv-danger-soft);
    border: 1px solid var(--alv-danger-line);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-center-title {
    margin: 0 0 .2rem;
    color: var(--alv-text);
    font-size: 1rem;
    font-weight: 900;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-center-text {
    color: var(--alv-muted);
    font-size: .84rem;
    line-height: 1.85;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-center-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.2rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-note {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px dashed var(--alv-primary-line);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(255,255,255,1));
    color: #1e40af;
    font-size: .84rem;
    line-height: 1.8;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-option-card {
    position: relative;
    min-height: 74px;
    padding: .9rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    border: 1px solid var(--alv-border);
    border-radius: 16px;
    background: var(--alv-surface-2);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-option-card input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: .1rem;
    accent-color: var(--alv-primary);
    flex: 0 0 18px;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-option-card label {
    margin: 0;
    cursor: pointer;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-option-title {
    display: block;
    color: var(--alv-text);
    font-size: .88rem;
    font-weight: 900;
    margin-bottom: .2rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-option-desc {
    display: block;
    color: var(--alv-muted);
    font-size: .76rem;
    line-height: 1.7;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .form-label,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page label:not(.alv-option-card label) {
    color: var(--alv-text-soft);
    font-size: .83rem;
    font-weight: 800;
    margin-bottom: .5rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .form-control {
    min-height: 50px;
    border: 1px solid var(--alv-border);
    border-radius: 14px;
    background: var(--alv-surface-2);
    color: var(--alv-text);
    padding: .78rem 1rem;
    box-shadow: none !important;
    transition: var(--alv-transition);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .form-control:hover {
    border-color: var(--alv-border-strong);
    background: #fff;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .form-control:focus {
    border-color: var(--alv-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .form-check {
    margin-bottom: 0;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-page .moduleoutput {
    border: 1px solid var(--alv-border);
    border-radius: 18px;
    padding: 1rem;
    background: var(--alv-surface-2);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-list {
    display: grid;
    gap: 1rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--alv-border);
    border-radius: 18px;
    background: var(--alv-surface-2);
    transition: var(--alv-transition);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-row:hover {
    border-color: var(--alv-primary-line);
    background: #fff;
    box-shadow: 0 16px 28px rgba(37, 99, 235, 0.08);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid var(--alv-primary-line);
    color: var(--alv-primary);
    background: var(--alv-primary-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-icon i {
    font-size: 1.6rem !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-title {
    margin-bottom: .25rem;
    color: var(--alv-text);
    font-size: .98rem;
    font-weight: 900;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-desc {
    color: var(--alv-muted);
    font-size: .82rem;
    line-height: 1.8;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn {
    min-height: 46px;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--alv-transition);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn:hover {
    transform: translateY(-2px);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-primary {
    color: #fff !important;
    background: var(--alv-gradient);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-primary:hover {
    color: #fff !important;
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.28);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-success {
    color: var(--alv-success) !important;
    border-color: var(--alv-success-line);
    background: var(--alv-success-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-success:hover {
    color: #fff !important;
    border-color: var(--alv-success);
    background: linear-gradient(135deg, #10b981, #059669);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-danger {
    color: var(--alv-danger) !important;
    border-color: var(--alv-danger-line);
    background: var(--alv-danger-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-danger:hover {
    color: #fff !important;
    border-color: var(--alv-danger);
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-light {
    color: var(--alv-text-soft) !important;
    border-color: var(--alv-border);
    background: #fff;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-light:hover {
    color: var(--alv-primary) !important;
    border-color: var(--alv-primary-line);
    background: var(--alv-primary-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-btn-block {
    width: 100%;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-helper-text {
    color: var(--alv-muted);
    font-size: .82rem;
    line-height: 1.8;
}



/* =========================================================
   Balanced Overview Layout
   استفاده کامل از عرض صفحه و حذف فضای خالی ستون چپ
   ========================================================= */
@media (min-width: 992px) {
    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-grid {
        grid-template-columns: minmax(0, 1.55fr) minmax(290px, .82fr) !important;
        grid-auto-flow: row;
        align-items: stretch;
        gap: 1rem !important;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-grid > .alv-main-column,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-grid > .alv-side-column {
        display: contents !important;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card {
        grid-column: 1;
        grid-row: 1;
        height: 100%;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card {
        grid-column: 2;
        grid-row: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card > .alv-card-body {
        flex: 1 1 auto;
        display: flex;
        padding: 1rem;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-simple-list {
        width: 100%;
        display: grid;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: .7rem;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-simple-item {
        min-height: 0;
        height: 100%;
        align-items: center;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-ssl-card,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-management-card,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-hook-card {
        grid-column: 1 / -1;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-ssl-card {
        grid-row: 2;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-management-card {
        grid-row: 3;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-hook-card {
        grid-row: auto;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-ssl-card .alv-card-body {
        padding: 1rem 1.15rem;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-ssl-card .alv-ssl-status {
        min-height: 88px;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-ssl-card .alv-ssl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-management-card .alv-card-body {
        padding: 1rem 1.15rem 1.15rem;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-management-card .alv-registrar-tools {
        width: 100%;
    }

    /* فضای بیشتر برای محتوای داخلی ماژول رجیسترار */
    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-management-card .alv-registrar-tools .row {
        margin-right: -.45rem;
        margin-left: -.45rem;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-management-card .alv-registrar-tools .row > [class*="col-"] {
        padding-right: .45rem;
        padding-left: .45rem;
    }
}

/* =========================================================
   Registrar module output — full redesign
   خروجی داینامیک registrarclientarea
   ========================================================= */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools {
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--alv-text-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools > * {
    max-width: 100%;
}

/* Main inner shells that registrar modules commonly output */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .panel,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .well,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .box,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .card {
    overflow: hidden;
    margin-bottom: 1rem !important;
    border: 1px solid var(--alv-border) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.035) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .panel:last-child,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .well:last-child,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .box:last-child,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .card:last-child {
    margin-bottom: 0 !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .panel-heading,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .box-header,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .card-header {
    min-height: 52px;
    padding: .8rem 1rem !important;
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 0 !important;
    border-bottom: 1px solid var(--alv-border) !important;
    background: linear-gradient(180deg,#fff 0%,#fbfdff 100%) !important;
    color: var(--alv-text) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .panel-body,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .box-body,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .card-body {
    padding: 1rem !important;
    background: #fff !important;
}

/* Segmented navigation tabs */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools ul.nav.nav-tabs {
    width: 100%;
    margin: 0 0 1rem !important;
    padding: 6px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid var(--alv-border) !important;
    border-radius: 16px !important;
    background: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs::before,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs::after {
    display: none !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .nav-item {
    float: none !important;
    flex: 1 1 160px;
    margin: 0 !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li > a,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .nav-link {
    position: relative;
    width: 100%;
    min-height: 48px;
    margin: 0 !important;
    padding: .65rem .8rem !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: var(--alv-muted) !important;
    background: transparent !important;
    font-size: .82rem !important;
    line-height: 1.45;
    font-weight: 800 !important;
    text-align: center;
    text-decoration: none !important;
    transition: var(--alv-transition);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li > a:hover,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .nav-link:hover {
    color: var(--alv-primary) !important;
    border-color: var(--alv-primary-line) !important;
    background: var(--alv-primary-soft) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li.active > a,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li.active > a:hover,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li.active > a:focus,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .nav-link.active {
    color: var(--alv-primary) !important;
    border-color: var(--alv-primary-line) !important;
    background: #fff !important;
    box-shadow: 0 7px 16px rgba(37,99,235,.09) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li.active > a::after,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    right: 20%;
    bottom: -7px;
    left: 20%;
    height: 2px;
    border-radius: 2px;
    background: var(--alv-primary);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs i,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs svg {
    color: var(--alv-muted-2) !important;
    font-size: .83rem !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .active i,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .active svg,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs li.active i,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs li.active svg {
    color: var(--alv-primary) !important;
}

/* Tab contents */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-content {
    width: 100%;
    margin: 0 !important;
    padding: 1rem !important;
    border: 1px solid var(--alv-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg,#f8fbff 0%,#f7f9fc 100%) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-pane {
    color: var(--alv-text-soft);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-pane > :first-child {
    margin-top: 0 !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-pane > :last-child {
    margin-bottom: 0 !important;
}

/* Bootstrap rows/cards generated by registrar module */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .row {
    margin-right: -7px !important;
    margin-left: -7px !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .row > [class*="col-"] {
    padding-right: 7px !important;
    padding-left: 7px !important;
    margin-bottom: 14px;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-pane > .row > [class*="col-"] > .card,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-pane > .row > [class*="col-"] > .panel,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-pane > .row > [class*="col-"] > .well,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-pane > .row > [class*="col-"] > .box {
    width: 100%;
    height: 100%;
    min-height: 150px;
    margin: 0 !important;
}

/* Common title typography */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h1,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h2,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h3,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h4,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h5,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h6,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .panel-title,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .card-title,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .box-title {
    color: var(--alv-text) !important;
    font-family: inherit !important;
    font-weight: 900 !important;
    line-height: 1.65 !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h1 { font-size: 1.12rem !important; }
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h2 { font-size: 1.05rem !important; }
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h3 { font-size: .98rem !important; }
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h4,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h5,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h6,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .panel-title,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .card-title,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .box-title { font-size: .90rem !important; }

/* Icons inside generated card headings */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .card-title > i,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .panel-title > i,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .box-title > i,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h3 > i,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h4 > i,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools h5 > i {
    width: 36px;
    height: 36px;
    margin-left: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--alv-primary-line);
    border-radius: 10px;
    color: var(--alv-primary) !important;
    background: var(--alv-primary-soft);
    font-size: .75rem !important;
    vertical-align: middle;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools p,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .text-muted,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools small {
    color: var(--alv-muted) !important;
    line-height: 1.8;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools p {
    font-size: .84rem;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools small {
    font-size: .73rem;
}

/* Values and compact data rows */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools dl {
    margin: 0;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools dt {
    color: var(--alv-muted) !important;
    font-size: .74rem;
    font-weight: 800 !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools dd {
    margin-bottom: .75rem;
    color: var(--alv-text) !important;
    font-size: .86rem;
    font-weight: 800;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools hr {
    margin: .8rem 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--alv-border) !important;
}

/* Tables */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .table-responsive {
    border: 1px solid var(--alv-border);
    border-radius: 14px;
    background: #fff;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools table,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .table {
    width: 100% !important;
    margin-bottom: 0 !important;
    color: var(--alv-text-soft) !important;
    background: transparent !important;
    font-size: .80rem !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools table th,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .table th {
    padding: .75rem .85rem !important;
    border-color: var(--alv-border) !important;
    color: var(--alv-muted) !important;
    background: #f8fafc !important;
    font-size: .73rem !important;
    font-weight: 900 !important;
    white-space: nowrap;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools table td,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .table td {
    padding: .8rem .85rem !important;
    border-color: var(--alv-border-soft) !important;
    color: var(--alv-text-soft) !important;
    vertical-align: middle !important;
}

/* Lists */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .list-group {
    overflow: hidden;
    border: 1px solid var(--alv-border) !important;
    border-radius: 14px !important;
    background: #fff;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .list-group-item {
    padding: .75rem .9rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--alv-border-soft) !important;
    color: var(--alv-text-soft) !important;
    background: #fff !important;
    font-size: .80rem;
    line-height: 1.7;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .list-group-item:last-child {
    border-bottom: 0 !important;
}

/* Form controls */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools label,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .control-label,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .form-label {
    margin-bottom: .45rem !important;
    color: var(--alv-text-soft) !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .form-group {
    margin-bottom: .9rem !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .form-control,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="text"],
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="email"],
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="password"],
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="number"],
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools select,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools textarea {
    width: 100%;
    min-height: 46px;
    padding: .7rem .85rem !important;
    border: 1px solid var(--alv-border) !important;
    border-radius: 11px !important;
    color: var(--alv-text) !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-family: inherit !important;
    font-size: .82rem !important;
    transition: var(--alv-transition);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools textarea {
    min-height: 100px;
    resize: vertical;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .form-control:focus,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input:focus,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools select:focus,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools textarea:focus {
    border-color: var(--alv-primary) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.07) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="checkbox"],
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="radio"] {
    accent-color: var(--alv-primary);
}

/* Buttons - including ones not returned as modulebutton */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools button:not(.close),
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="submit"],
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="button"] {
    min-height: 42px;
    padding: 0 .95rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid var(--alv-border) !important;
    border-radius: 10px !important;
    color: var(--alv-text-soft) !important;
    background: #fff !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    transition: var(--alv-transition);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn:hover,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools button:not(.close):hover,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="submit"]:hover,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="button"]:hover {
    color: var(--alv-primary) !important;
    border-color: var(--alv-primary-line) !important;
    background: var(--alv-primary-soft) !important;
    transform: translateY(-1px);
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn-primary,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn-info,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .alv-btn-primary {
    color: #fff !important;
    border-color: var(--alv-primary) !important;
    background: var(--alv-gradient) !important;
    box-shadow: 0 9px 20px rgba(37,99,235,.16) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn-primary:hover,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn-info:hover,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .alv-btn-primary:hover {
    color: #fff !important;
    border-color: var(--alv-primary-2) !important;
    background: var(--alv-gradient) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn-success {
    color: var(--alv-success) !important;
    border-color: var(--alv-success-line) !important;
    background: var(--alv-success-soft) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn-danger {
    color: var(--alv-danger) !important;
    border-color: var(--alv-danger-line) !important;
    background: var(--alv-danger-soft) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn-warning {
    color: var(--alv-warning) !important;
    border-color: var(--alv-warning-line) !important;
    background: var(--alv-warning-soft) !important;
}

/* Badges / labels */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .badge,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .label {
    min-height: 25px;
    padding: 0 .65rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--alv-primary-line) !important;
    border-radius: 8px !important;
    color: var(--alv-primary) !important;
    background: var(--alv-primary-soft) !important;
    box-shadow: none !important;
    font-size: .68rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .badge-success,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .label-success {
    color: var(--alv-success) !important;
    border-color: var(--alv-success-line) !important;
    background: var(--alv-success-soft) !important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .badge-danger,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .label-danger {
    color: var(--alv-danger) !important;
    border-color: var(--alv-danger-line) !important;
    background: var(--alv-danger-soft) !important;
}

/* Alerts emitted by the registrar module */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .alert {
    margin-bottom: .9rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* Code / technical values */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools code {
    padding: .25rem .45rem;
    border: 1px solid var(--alv-border);
    border-radius: 7px;
    color: var(--alv-primary-2);
    background: #f8fafc;
    font-size: .76rem;
    direction: ltr;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools pre {
    max-width: 100%;
    padding: .9rem;
    overflow-x: auto;
    border: 1px solid #1e293b;
    border-radius: 12px;
    color: #cbd5e1;
    background: #0f172a;
    font-size: .75rem;
    line-height: 1.75;
    direction: ltr;
    text-align: left;
}

@media (max-width: 991.98px) {
    :where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-hero-grid,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-main-column,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-side-column {
        gap: 1rem;
    }
}

@media (max-width: 767.98px) {
    :where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-hero {
        padding: 1.1rem;
        border-radius: 22px;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-main {
        flex-direction: column;
        gap: .85rem;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-title {
        font-size: 1.28rem;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-side,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-stats-grid,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-grid,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-option-grid,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-form-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-card,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-unpaid-banner {
        border-radius: 20px;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-card-header,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-card-body {
        padding: 1rem;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-center-state-top {
        align-items: flex-start;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-center-actions {
        flex-direction: column;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-center-actions .alv-btn,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-unpaid-banner .alv-btn {
        width: 100%;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-row {
        grid-template-columns: 1fr;
        text-align: right;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-icon {
        width: 58px;
        height: 58px;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-actions,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-actions form,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-actions .d-flex {
        width: 100%;
        display: flex !important;
        flex-direction: column;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-addon-actions .alv-btn {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    :where(html[data-hp-page="clientareadomaindetails"]) .alv-domain-hero,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-card,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-unpaid-banner {
        border-radius: 18px;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-hero-side {
        grid-template-columns: 1fr;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-stats-grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-ssl-status {
        flex-direction: column;
        align-items: flex-start;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-simple-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    :where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .nav-item {
        flex: 1 1 calc(50% - 6px);
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .tab-content {
        padding: .75rem !important;
        border-radius: 15px !important;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .row > [class*="col-"] {
        margin-bottom: 10px;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .panel,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .well,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .box,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .card {
        border-radius: 15px !important;
    }
}

@media (max-width: 480px) {
    :where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .nav-item {
        flex-basis: 100%;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs > li > a,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .nav-tabs .nav-link {
        min-height: 44px;
        justify-content: flex-start;
    }

    :where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools .btn,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools button:not(.close),
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="submit"],
:where(html[data-hp-page="clientareadomaindetails"]) .alv-registrar-tools input[type="button"] {
        width: 100%;
    }
}


/* =========================================================
   Overview Compact Cards v4
   کوچک‌سازی کارت‌های بررسی و خلاصه بدون تغییر ساختار
   ========================================================= */
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card > .alv-card-body {
    padding:.82rem!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card .alv-stats-grid {
    gap:.58rem!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card .alv-stat-box {
    min-height:76px!important;
    padding:.66rem .78rem!important;
    border-radius:13px!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card .alv-stat-label {
    margin-bottom:.22rem!important;
    font-size:.68rem!important;
    line-height:1.35!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card .alv-stat-value {
    font-size:.86rem!important;
    line-height:1.55!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card > .alv-card-body {
    padding:.82rem!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-simple-list {
    gap:.58rem!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-simple-item {
    min-height:76px!important;
    padding:.66rem .78rem!important;
    border-radius:13px!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-simple-label {
    font-size:.70rem!important;
    line-height:1.4!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-simple-value {
    font-size:.78rem!important;
    line-height:1.5!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-badge {
    min-height:27px!important;
    padding:0 .7rem!important;
    font-size:.69rem!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card > .alv-card-header,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card > .alv-card-header {
    min-height:62px;
    padding:.72rem .9rem!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card .alv-card-icon,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-card-icon {
    width:33px!important;
    height:33px!important;
    flex-basis:33px!important;
    border-radius:10px!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card .alv-card-title,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-card-title {
    font-size:.92rem!important;
}

:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card .alv-card-subtitle {
    font-size:.73rem!important;
    line-height:1.5!important;
}

@media (max-width: 767.98px) {
    :where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-primary-card .alv-stat-box,
:where(html[data-hp-page="clientareadomaindetails"]) .alv-overview-summary-card .alv-simple-item {
        min-height:68px!important;
    }
}

/* clientareadomains.tpl */
:root:where(html[data-hp-page="clientareadomains"]) {
    --phc-srv-bg:var(--hp-page);
    --phc-srv-card:var(--hp-surface);
    --phc-srv-card-soft:var(--hp-surface-soft);
    --phc-srv-border:var(--hp-line);
    --phc-srv-border-strong:#cbd5e1;
    --phc-srv-divider:#edf1f6;

    --phc-srv-text:var(--hp-ink);
    --phc-srv-text-2:var(--hp-ink-secondary);
    --phc-srv-muted:var(--hp-muted);
    --phc-srv-muted-2:#94a3b8;

    --phc-srv-blue:var(--hp-primary);
    --phc-srv-blue-dark:var(--hp-primary-hover);
    --phc-srv-blue-light:#60a5fa;
    --phc-srv-blue-soft:var(--hp-primary-soft);
    --phc-srv-blue-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --phc-srv-green:#10b981;
    --phc-srv-green-soft:#ecfdf5;
    --phc-srv-orange:#f59e0b;
    --phc-srv-orange-soft:#fff7ed;
    --phc-srv-red:#ef4444;
    --phc-srv-red-soft:#fef2f2;
    --phc-srv-slate:var(--hp-muted);
    --phc-srv-slate-soft:#f1f5f9;

    --phc-srv-radius-xl:24px;
    --phc-srv-radius-lg:18px;
    --phc-srv-radius-md:13px;

    --phc-srv-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --phc-srv-shadow-md:0 18px 42px rgba(15,23,42,.09),0 5px 15px rgba(15,23,42,.035);
    --phc-srv-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --phc-srv-transition:220ms cubic-bezier(.2,.8,.2,1);
}

/* DataTables search پیش‌فرض پنهان است؛ جستجوی اختصاصی داریم */
:where(html[data-hp-page="clientareadomains"]) #domainsManager .dataTables_filter {
    display:none!important;
}

/* =========================================================
   Main manager — same visual system as reference page
   ========================================================= */
:where(html[data-hp-page="clientareadomains"]) .phc-srv-manager {
    position:relative;
    overflow:hidden;
    margin-top:0;
    padding:0;

    border:1px solid var(--phc-srv-border);
    border-radius:var(--phc-srv-radius-xl);
    background:#fff;
    box-shadow:var(--phc-srv-shadow-panel);
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:1px;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.32),transparent);
}

/* ===== Header ===== */
:where(html[data-hp-page="clientareadomains"]) .phc-srv-header {
    margin:0;
    padding:20px 22px;
    gap:15px;

    border-bottom:1px solid var(--phc-srv-divider);
    background:linear-gradient(180deg,#fff,#fbfcfe);
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-header > .phc-srv-heading {
    position:relative;
    padding-right:54px;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-header > .phc-srv-heading::before {
    content:"\f57d";
    position:absolute;
    top:50%;
    right:0;
    width:42px;
    height:42px;
    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #bfdbfe;
    border-radius:13px;
    color:#fff;
    background:var(--phc-srv-blue-gradient);
    box-shadow:0 8px 20px rgba(37,99,235,.20);

    font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";
    font-weight:900;
    font-size:.9rem;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-header h5 {
    margin-bottom:4px!important;
    color:var(--phc-srv-text)!important;
    font-size:1.08rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-header p {
    color:var(--phc-srv-muted)!important;
    font-size:.82rem!important;
    line-height:1.7;
}

/* ===== Search ===== */
:where(html[data-hp-page="clientareadomains"]) .phc-search-container {
    position:relative;
    width:100%;
    max-width:360px;
    margin:0;
}

:where(html[data-hp-page="clientareadomains"]) .phc-search-input {
    width:100%;
    height:46px;
    padding:0 44px 0 15px;

    outline:none;
    border:1px solid var(--phc-srv-border);
    border-radius:12px;
    background:#f8fafc;
    color:var(--phc-srv-text);

    font-family:inherit;
    font-size:.90rem!important;

    transition:
        background-color var(--phc-srv-transition),
        border-color var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareadomains"]) .phc-search-input::placeholder {
    color:var(--phc-srv-muted-2);
}

:where(html[data-hp-page="clientareadomains"]) .phc-search-input:hover {
    background:#fff;
    border-color:#cbd5e1;
}

:where(html[data-hp-page="clientareadomains"]) .phc-search-input:focus {
    background:#fff;
    border-color:var(--phc-srv-blue);
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="clientareadomains"]) .phc-search-icon {
    position:absolute;
    top:50%;
    right:15px;
    z-index:2;
    transform:translateY(-50%);
    color:var(--phc-srv-muted-2);
    font-size:.9rem;
    pointer-events:none;
    transition:color var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareadomains"]) .phc-search-container:focus-within .phc-search-icon {
    color:var(--phc-srv-blue);
}

/* =========================================================
   Bulk actions — styled as a sub-toolbar of the manager
   ========================================================= */
:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions {
    padding:12px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;

    border-bottom:1px solid var(--phc-srv-divider);
    background:#fff;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions-label {
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--phc-srv-muted);
    font-size:.78rem;
    font-weight:800;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions-label i {
    color:var(--phc-srv-blue);
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions-list {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:7px;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions .dropdown-menu {
    min-width:220px;
    margin-top:7px!important;
    padding:6px!important;

    border:1px solid var(--phc-srv-border)!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 16px 34px rgba(15,23,42,.12)!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions .dropdown-item {
    min-height:38px;
    padding:0 10px!important;

    display:flex!important;
    align-items:center;
    gap:8px;

    border-radius:8px;

    color:var(--phc-srv-text-2)!important;
    font-size:.76rem!important;
    font-weight:800!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions .dropdown-item:hover {
    color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-soft)!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions .dropdown-item i {
    width:20px;
    color:var(--phc-srv-blue)!important;
    text-align:center;
}

/* =========================================================
   Table — same card-row style as reference
   ========================================================= */
:where(html[data-hp-page="clientareadomains"]) .phc-srv-manager .table-responsive {
    padding:0!important;
    overflow-x:auto;
    overflow-y:visible;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-manager .dataTables_wrapper {
    width:100%;
    padding:0;
    color:var(--phc-srv-muted);
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-manager .dataTables_wrapper > .row {
    margin-right:0!important;
    margin-left:0!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-manager .dataTables_wrapper > .row > [class*="col-"] {
    padding-right:0!important;
    padding-left:0!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-manager table.phc-srv-table {
    width:calc(100% - 44px)!important;
    margin:9px 22px 8px!important;
    border-collapse:separate!important;
    border-spacing:0 6px!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-table thead th {
    padding:7px 14px 8px!important;
    border:0!important;
    color:#94a3b8!important;
    background:transparent!important;

    font-size:.84rem!important;
    font-weight:850!important;
    line-height:1.4!important;
    vertical-align:middle!important;
    white-space:nowrap;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td {
    height:52px!important;
    padding:7px 14px!important;

    vertical-align:middle!important;

    border-top:1px solid #e4eaf2!important;
    border-bottom:1px solid #e4eaf2!important;

    background:#fff!important;
    color:var(--phc-srv-text-2);

    font-size:.90rem!important;
    line-height:1.55!important;

    transition:
        background-color var(--phc-srv-transition),
        border-color var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td:first-child {
    border-right:1px solid #e4eaf2!important;
    border-radius:0 13px 13px 0!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td:last-child {
    border-left:1px solid #e4eaf2!important;
    border-radius:13px 0 0 13px!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody tr:hover td {
    background:#fbfdff!important;
    border-top-color:#c9dcff!important;
    border-bottom-color:#c9dcff!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody tr:hover td:first-child {
    border-right-color:#c9dcff!important;
    box-shadow:inset -3px 0 0 var(--phc-srv-blue)!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody tr:hover td:last-child {
    border-left-color:#c9dcff!important;
}

/* ===== Checkbox ===== */
:where(html[data-hp-page="clientareadomains"]) .phc-domain-checkbox {
    width:19px!important;
    height:19px!important;
    margin:0!important;

    appearance:none;
    -webkit-appearance:none;

    border:2px solid #cbd5e1!important;
    border-radius:6px!important;
    background:#fff!important;
    box-shadow:none!important;

    cursor:pointer;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-checkbox:checked {
    border-color:var(--phc-srv-blue)!important;
    background-color:var(--phc-srv-blue)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='white' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
    background-size:14px 14px!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
}

/* ===== SSL ===== */
:where(html[data-hp-page="clientareadomains"]) .phc-domain-ssl {
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-ssl img {
    width:23px!important;
    height:23px;
    object-fit:contain;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-ssl-empty {
    width:28px;
    height:28px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid #e4eaf2;
    border-radius:8px;
    color:var(--phc-srv-muted-2);
    background:#f8fafc;

    font-size:.70rem;
}

/* ===== Domain cell ===== */
:where(html[data-hp-page="clientareadomains"]) .phc-domain-name-row {
    display:flex;
    align-items:center;
    gap:7px;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-name {
    color:var(--phc-srv-text)!important;
    font-weight:850!important;
    font-variant-numeric:tabular-nums;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-external {
    width:26px;
    height:26px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid transparent;
    border-radius:7px;

    color:var(--phc-srv-muted-2)!important;
    text-decoration:none!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-external:hover {
    color:var(--phc-srv-blue)!important;
    border-color:#bfdbfe;
    background:#eff6ff;
}

/* ===== Auto renew badge ===== */
:where(html[data-hp-page="clientareadomains"]) .phc-renew-badge {
    min-height:25px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid #dbe2ea;
    border-radius:8px;

    font-size:.72rem!important;
    font-weight:900;
    line-height:1;
}

:where(html[data-hp-page="clientareadomains"]) .phc-renew-on {
    color:#047857!important;
    background:#ecfdf5!important;
    border-color:#a7f3d0!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-renew-off {
    color:#b91c1c!important;
    background:#fef2f2!important;
    border-color:#fecaca!important;
}

/* ===== Status badges ===== */
:where(html[data-hp-page="clientareadomains"]) .phc-domain-status {
    min-width:78px;
    min-height:28px;
    padding:0 10px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid #dbe2ea;
    border-radius:8px;

    color:#475569;
    background:#f8fafc;

    font-size:.72rem!important;
    font-weight:900;
    line-height:1;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-status::before {
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:currentColor;
}

:where(html[data-hp-page="clientareadomains"]) .status-active,
:where(html[data-hp-page="clientareadomains"]) .status-Active {
    color:#047857!important;
    background:#ecfdf5!important;
    border-color:#a7f3d0!important;
}

:where(html[data-hp-page="clientareadomains"]) .status-pending,
:where(html[data-hp-page="clientareadomains"]) .status-Pending,
:where(html[data-hp-page="clientareadomains"]) .status-pendingtransfer {
    color:#b45309!important;
    background:#fffbeb!important;
    border-color:#fde68a!important;
}

:where(html[data-hp-page="clientareadomains"]) .status-expired,
:where(html[data-hp-page="clientareadomains"]) .status-Expired,
:where(html[data-hp-page="clientareadomains"]) .status-cancelled,
:where(html[data-hp-page="clientareadomains"]) .status-Cancelled,
:where(html[data-hp-page="clientareadomains"]) .status-canceled {
    color:#b91c1c!important;
    background:#fef2f2!important;
    border-color:#fecaca!important;
}

:where(html[data-hp-page="clientareadomains"]) .status-transferred,
:where(html[data-hp-page="clientareadomains"]) .status-Transferred {
    color:#475569!important;
    background:#f1f5f9!important;
    border-color:#cbd5e1!important;
}

/* ===== Dates ===== */
:where(html[data-hp-page="clientareadomains"]) .phc-domain-date {
    color:var(--phc-srv-muted)!important;
    font-variant-numeric:tabular-nums;
}

:where(html[data-hp-page="clientareadomains"]) .phc-domain-due {
    color:#b45309!important;
    font-weight:850!important;
    font-variant-numeric:tabular-nums;
}

/* =========================================================
   Dedicated DataTables footer — same as reference
   ========================================================= */
:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer {
    width:100%;
    min-height:62px;
    padding:11px 22px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    border-top:1px solid var(--phc-srv-divider);
    background:#fff;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer-meta {
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer-pages {
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_length,
:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_info,
:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate {
    float:none!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_length label {
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:var(--phc-srv-muted)!important;
    font-size:.72rem!important;
    white-space:nowrap;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_length select {
    width:58px!important;
    min-width:58px!important;
    height:34px!important;
    margin:0!important;
    padding:0 7px!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;
    outline:0!important;

    color:var(--phc-srv-text-2)!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.72rem!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_info {
    color:var(--phc-srv-muted)!important;
    font-size:.72rem!important;
    line-height:34px!important;
    white-space:nowrap;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate ul.pagination {
    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;

    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-item {
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-link {
    min-width:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0 9px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;

    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.72rem!important;
    font-weight:850!important;
    line-height:1!important;
    text-decoration:none!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-item.next .page-link {
    min-width:56px!important;
    padding:0 12px!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-item.active .page-link {
    color:#fff!important;
    border-color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-gradient)!important;
    box-shadow:0 7px 15px rgba(37,99,235,.20)!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    transform:translateY(-1px)!important;
    color:var(--phc-srv-blue)!important;
    border-color:#bfdbfe!important;
    background:#f8fbff!important;
    box-shadow:0 5px 12px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-item.disabled .page-link {
    opacity:.46!important;
    cursor:default!important;
    color:#94a3b8!important;
    border-color:#e5eaf1!important;
    background:#f8fafc!important;
    box-shadow:none!important;
}

/* fallback DataTables without Bootstrap */
:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate > span > .paginate_button {
    min-width:34px!important;
    height:34px!important;
    margin:0 2px!important;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;
    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-size:.72rem!important;
    font-weight:850!important;
}

:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .paginate_button.current {
    color:#fff!important;
    border-color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-gradient)!important;
}

/* empty bootstrap rows after moving controls */
:where(html[data-hp-page="clientareadomains"]) .phc-srv-manager .phc-dt-empty-row {
    display:none!important;
}

/* =========================================================
   Loading
   ========================================================= */
:where(html[data-hp-page="clientareadomains"]) #tableLoading {
    min-height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
}

:where(html[data-hp-page="clientareadomains"]) #tableLoading .spinner-border {
    color:var(--phc-srv-blue)!important;
}

/* =========================================================
   Mobile — same card conversion approach as reference page
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="clientareadomains"]) .phc-srv-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-header {
        padding:18px;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-search-container {
        max-width:100%;
        margin-top:12px;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-header > .phc-srv-heading {
        width:100%;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-domain-actions {
        padding:12px 14px;
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-domain-actions-list {
        justify-content:flex-start;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-manager table.phc-srv-table {
        width:calc(100% - 28px)!important;
        margin:12px 14px 8px!important;
        display:block;
        border-spacing:0!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table thead {
        display:none!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody {
        display:block;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody tr {
        display:block;
        margin-bottom:12px;
        padding:6px 14px 12px;

        overflow:hidden;
        border:1px solid var(--phc-srv-border);
        border-radius:15px;
        background:#fff;
        box-shadow:0 5px 16px rgba(15,23,42,.035);
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody tr:hover {
        border-color:#cfe0ff;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td {
        width:100%;
        height:auto!important;
        min-height:43px;
        padding:9px 0!important;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        border:0!important;
        border-bottom:1px dashed #e5eaf1!important;
        border-radius:0!important;
        background:transparent!important;

        text-align:left!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td::before {
        content:attr(data-label);
        color:var(--phc-srv-muted-2);
        font-size:.74rem!important;
        font-weight:800;
        text-align:right;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td:first-child {
        min-height:auto;
        margin:0 -14px 3px;
        padding:13px 14px!important;

        display:flex;
        border-bottom:1px solid var(--phc-srv-divider)!important;
        background:#f8fafc!important;
        text-align:right!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td:first-child::before {
        content:"انتخاب";
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td:last-child {
        border-bottom:0!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-domain-name-row {
        justify-content:flex-end;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-dt-footer {
        min-height:0;
        padding:10px 14px 13px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-dt-footer-meta {
        width:100%;
        justify-content:center;
        gap:10px;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-dt-footer-pages {
        width:100%;
        justify-content:center;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate ul.pagination {
        max-width:100%;
        flex-wrap:wrap!important;
    }
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="clientareadomains"]) .phc-srv-manager {
        border-radius:18px;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-header {
        padding:16px;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-header > .phc-srv-heading {
        padding-right:49px;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-header > .phc-srv-heading::before {
        width:38px;
        height:38px;
        border-radius:12px;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-search-input {
        height:44px;
        font-size:.84rem!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-domain-actions-list {
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-domain-actions-list > *,
:where(html[data-hp-page="clientareadomains"]) .phc-domain-actions-list .dropdown{
        width:100%;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-manager table.phc-srv-table {
        width:calc(100% - 20px)!important;
        margin:10px!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td {
        font-size:.86rem!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td::before {
        font-size:.70rem!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_info {
        width:100%!important;
        text-align:center!important;
        line-height:1.6!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-link {
        min-width:31px!important;
        height:31px!important;
        padding:0 7px!important;
        font-size:.68rem!important;
    }

    :where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareadomains"]) .phc-dt-footer .dataTables_paginate .page-item.next .page-link {
        min-width:47px!important;
        padding:0 8px!important;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="clientareadomains"]) .phc-domain-actions-list {
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareadomains"]) .phc-search-input,
:where(html[data-hp-page="clientareadomains"]) .phc-srv-table tbody td,
:where(html[data-hp-page="clientareadomains"]) .phc-domain-external {
        transition:none!important;
    }
}

/* clientareaemails.tpl */
:root:where(html[data-hp-page="clientareaemails"]) {
    --mail-card:var(--hp-surface);
    --mail-soft:var(--hp-surface-soft);
    --mail-border:var(--hp-line);
    --mail-border-2:#d6e1ee;
    --mail-divider:#edf1f6;
    --mail-text:var(--hp-ink);
    --mail-text-2:var(--hp-ink-secondary);
    --mail-muted:var(--hp-muted);
    --mail-muted-2:#94a3b8;
    --mail-blue:var(--hp-primary);
    --mail-blue-dark:var(--hp-primary-hover);
    --mail-blue-light:#60a5fa;
    --mail-blue-soft:var(--hp-primary-soft);
    --mail-blue-line:#bfdbfe;
    --mail-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);
    --mail-radius-xl:24px;
    --mail-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --mail-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);
    --mail-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="clientareaemails"]) #emailsManager,
:where(html[data-hp-page="clientareaemails"]) #emailsManager * {box-sizing:border-box}

:where(html[data-hp-page="clientareaemails"]) #emailsManager .dataTables_filter {display:none!important}

:where(html[data-hp-page="clientareaemails"]) .phc-mail-manager {
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    border:1px solid var(--mail-border);
    border-radius:var(--mail-radius-xl);
    background:#fff;
    box-shadow:var(--mail-shadow-panel);
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-manager::before {
    content:"";
    position:absolute;
    top:0;right:0;left:0;height:3px;z-index:4;
    background:var(--mail-gradient);
}

:where(html[data-hp-page="clientareaemails"]) .phc-mail-header {
    min-height:92px;
    padding:18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:15px;
    border-bottom:1px solid var(--mail-divider);
    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-heading {
    min-width:280px;
    display:flex;
    align-items:center;
    gap:13px;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-icon {
    position:relative;
    width:50px;height:50px;flex:0 0 50px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--mail-blue-line);
    border-radius:14px;
    color:#fff;background:var(--mail-gradient);
    box-shadow:0 10px 22px rgba(37,99,235,.18);
    font-size:.95rem;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-icon::after {
    content:"";position:absolute;inset:6px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:9px;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-heading h3 {
    margin:0 0 3px!important;
    color:var(--mail-text)!important;
    font-size:1.05rem!important;
    line-height:1.55;
    font-weight:900!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-heading p {
    margin:0!important;
    max-width:520px;
    color:var(--mail-muted)!important;
    font-size:.80rem!important;
    line-height:1.7;
    font-weight:600;
}

:where(html[data-hp-page="clientareaemails"]) .phc-mail-search {position:relative;width:100%;max-width:360px}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-search input {
    width:100%;height:46px;padding:0 43px 0 14px;
    border:1px solid var(--mail-border);
    border-radius:12px;outline:0;
    color:var(--mail-text);background:#f8fafc;
    font-family:inherit;font-size:.86rem;
    box-shadow:none;
    transition:border-color var(--mail-transition),background var(--mail-transition),box-shadow var(--mail-transition);
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-search input::placeholder {color:var(--mail-muted-2)}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-search input:hover {border-color:#cbd5e1;background:#fff}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-search input:focus {
    border-color:var(--mail-blue);background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-search i {
    position:absolute;top:50%;right:15px;transform:translateY(-50%);
    color:var(--mail-muted-2);font-size:.85rem;pointer-events:none;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-search:focus-within i {color:var(--mail-blue)}

:where(html[data-hp-page="clientareaemails"]) .phc-mail-manager .dataTables_wrapper {width:100%;color:var(--mail-muted)}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-manager .dataTables_wrapper > .row {margin-right:0!important;margin-left:0!important}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-manager .dataTables_wrapper > .row > [class*="col-"] {padding-right:0!important;padding-left:0!important}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-manager .table-responsive {width:100%;padding:0!important;overflow-x:auto;overflow-y:visible}

:where(html[data-hp-page="clientareaemails"]) .phc-mail-table {
    width:calc(100% - 44px)!important;
    max-width:calc(100% - 44px)!important;
    margin:10px 22px 8px!important;
    border-collapse:separate!important;
    border-spacing:0 7px!important;
    background:transparent!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-table thead th {
    padding:7px 14px 8px!important;
    border:0!important;
    color:var(--mail-muted-2)!important;
    background:transparent!important;
    font-size:.76rem!important;
    line-height:1.4;
    font-weight:850!important;
    white-space:nowrap;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody tr {cursor:pointer}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td {
    min-height:54px;
    padding:10px 14px!important;
    vertical-align:middle;
    border-top:1px solid var(--mail-border)!important;
    border-bottom:1px solid var(--mail-border)!important;
    color:var(--mail-text-2);
    background:#fff!important;
    font-size:.84rem;
    line-height:1.6;
    transition:border-color var(--mail-transition),background var(--mail-transition),box-shadow var(--mail-transition);
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td:first-child {
    border-right:1px solid var(--mail-border)!important;
    border-radius:0 13px 13px 0;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td:last-child {
    border-left:1px solid var(--mail-border)!important;
    border-radius:13px 0 0 13px;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody tr:hover td {
    border-color:var(--mail-blue-line)!important;
    background:#fbfdff!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody tr:hover td:first-child {box-shadow:inset -3px 0 0 var(--mail-blue)}

:where(html[data-hp-page="clientareaemails"]) .phc-mail-date {
    color:var(--mail-muted)!important;
    font-size:.78rem!important;
    font-variant-numeric:tabular-nums;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-subject {
    display:flex;align-items:center;gap:9px;min-width:0;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-subject-icon {
    width:34px;height:34px;flex:0 0 34px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--mail-blue-line);
    border-radius:10px;
    color:var(--mail-blue);background:var(--mail-blue-soft);
    font-size:.70rem;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-subject strong {
    min-width:0;display:block;
    color:var(--mail-text)!important;
    font-size:.85rem!important;
    line-height:1.55;
    font-weight:900!important;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-attachment {
    min-width:27px;height:27px;padding:0 7px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--mail-border);
    border-radius:8px;
    color:var(--mail-muted)!important;
    background:#f8fafc!important;
    font-size:.68rem!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-view {
    min-width:82px;min-height:34px;padding:0 11px;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    border:1px solid var(--mail-blue-line)!important;
    border-radius:10px!important;
    color:var(--mail-blue)!important;
    background:var(--mail-blue-soft)!important;
    font-family:inherit;font-size:.73rem!important;line-height:1;font-weight:900!important;
    box-shadow:none!important;
    transition:transform var(--mail-transition),color var(--mail-transition),border-color var(--mail-transition),background var(--mail-transition),box-shadow var(--mail-transition);
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-view:hover {
    transform:translateY(-1px);
    color:#fff!important;border-color:var(--mail-blue)!important;
    background:var(--mail-gradient)!important;
    box-shadow:0 8px 16px rgba(37,99,235,.15)!important;
}

:where(html[data-hp-page="clientareaemails"]) #tableLoading {min-height:160px;display:flex;align-items:center;justify-content:center}
:where(html[data-hp-page="clientareaemails"]) #tableLoading .spinner-border {width:34px;height:34px;color:var(--mail-blue)!important;border-width:3px;box-shadow:none!important}

:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer {
    width:100%;min-height:62px;padding:11px 22px 14px;
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    border-top:1px solid var(--mail-divider);
    background:#fff;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer-meta {
    min-width:0;
    display:flex;align-items:center;flex-wrap:wrap;gap:14px;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer-pages {flex:0 0 auto;display:flex;align-items:center}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_length,
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_info,
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate {
    float:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_length label {
    margin:0!important;
    display:flex!important;align-items:center!important;gap:7px!important;
    color:var(--mail-muted)!important;
    font-size:.72rem!important;white-space:nowrap;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_length select {
    width:58px!important;min-width:58px!important;height:34px!important;
    margin:0!important;padding:0 7px!important;
    border:1px solid var(--mail-border)!important;
    border-radius:9px!important;
    color:var(--mail-text-2)!important;background:#fff!important;
    font-family:inherit!important;font-size:.72rem!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_info {
    color:var(--mail-muted)!important;
    font-size:.72rem!important;line-height:34px!important;white-space:nowrap;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate ul.pagination {
    margin:0!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:nowrap!important;gap:5px!important;
    border:0!important;background:transparent!important;box-shadow:none!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-item {margin:0!important;padding:0!important;border:0!important;background:transparent!important}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-link {
    min-width:34px!important;height:34px!important;margin:0!important;padding:0 9px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border:1px solid var(--mail-border)!important;border-radius:9px!important;
    color:#475569!important;background:#fff!important;
    font-size:.72rem!important;font-weight:850!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-item.next .page-link {min-width:56px!important}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-item.active .page-link {
    color:#fff!important;border-color:var(--mail-blue)!important;background:var(--mail-gradient)!important;
    box-shadow:0 7px 15px rgba(37,99,235,.18)!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    color:var(--mail-blue)!important;border-color:var(--mail-blue-line)!important;background:var(--mail-blue-soft)!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-item.disabled .page-link {
    opacity:.45!important;color:var(--mail-muted-2)!important;background:#f8fafc!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate > span > .paginate_button {
    min-width:34px!important;height:34px!important;margin:0 2px!important;padding:0 9px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    border:1px solid var(--mail-border)!important;border-radius:9px!important;
    color:#475569!important;background:#fff!important;
    font-size:.72rem!important;font-weight:850!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .paginate_button.current {
    color:#fff!important;border-color:var(--mail-blue)!important;background:var(--mail-gradient)!important;
}
:where(html[data-hp-page="clientareaemails"]) .phc-mail-manager .phc-dt-empty-row {display:none!important}

@media(max-width:991px) {
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-manager {border-radius:20px}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-header {padding:18px}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-heading {width:100%;min-width:0}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-search {max-width:100%}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table {
        width:calc(100% - 28px)!important;
        max-width:calc(100% - 28px)!important;
        margin:12px 14px 8px!important;
        display:block;border-spacing:0!important;
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table thead {display:none!important}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody {display:block}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody tr {
        display:block;margin-bottom:12px;padding:6px 14px 12px;
        overflow:hidden;
        border:1px solid var(--mail-border);
        border-radius:15px;background:#fff;
        box-shadow:0 5px 16px rgba(15,23,42,.035);
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td {
        width:100%;min-height:44px;height:auto!important;padding:9px 0!important;
        display:flex;align-items:center;justify-content:space-between;gap:12px;
        border:0!important;border-bottom:1px dashed #e5eaf1!important;border-radius:0!important;
        background:transparent!important;text-align:left!important;
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td::before {
        content:attr(data-label);
        color:var(--mail-muted-2);
        font-size:.72rem;font-weight:800;text-align:right;
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td:nth-child(2) {align-items:flex-start;flex-direction:column}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td:nth-child(2)::before {width:100%}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td:last-child {
        padding-top:12px!important;border-bottom:0!important;justify-content:center;
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td:last-child::before {display:none}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-view {width:100%;min-height:40px}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-footer {
        min-height:0;padding:10px 14px 13px;
        flex-direction:column;justify-content:center;
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-footer-meta {width:100%;justify-content:center}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-footer-pages {width:100%;justify-content:center}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate ul.pagination {flex-wrap:wrap!important}
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-manager {border-radius:18px}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-header {padding:15px}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-icon {width:44px;height:44px;flex-basis:44px;border-radius:13px}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-search input {height:44px;font-size:.82rem}
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-table {
        width:calc(100% - 20px)!important;
        max-width:calc(100% - 20px)!important;
        margin:10px!important;
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_info {
        width:100%!important;text-align:center!important;line-height:1.6!important;
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-link {
        min-width:31px!important;height:31px!important;padding:0 7px!important;font-size:.68rem!important;
    }
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareaemails"]) .phc-mail-footer .dataTables_paginate .page-item.next .page-link {min-width:47px!important}
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareaemails"]) .phc-mail-search input,
:where(html[data-hp-page="clientareaemails"]) .phc-mail-table tbody td,
:where(html[data-hp-page="clientareaemails"]) .phc-mail-view {transition:none!important}
}

/* clientareahome.tpl */
/* =========================================================
   AlvandNetwork Client Area — 2026 UI
   Scoped to .alvand-home-26 so it won't leak into WHMCS.
   ========================================================= */
:root:where(html[data-hp-page="clientareahome"]) {
    --av-bg:var(--hp-page);
    --av-surface:rgba(255,255,255,.78);
    --av-surface-solid:var(--hp-surface);
    --av-surface-soft:#f8faff;
    --av-surface-dark:var(--hp-ink);
    --av-border:rgba(15,23,42,.085);
    --av-border-strong:rgba(15,23,42,.14);
    --av-text:var(--hp-ink);
    --av-text-2:var(--hp-ink-secondary);
    --av-muted:var(--hp-muted);
    --av-muted-2:#94a3b8;
    --av-primary:var(--hp-primary);
    --av-primary-2:#0ea5e9;
    --av-blue:var(--hp-primary);
    --av-cyan:#0891b2;
    --av-teal:#0f9f8f;
    --av-green:#0f9f6e;
    --av-amber:#d97706;
    --av-rose:#e11d48;
    --av-shadow-xs:0 8px 22px -14px rgba(15,23,42,.18),0 2px 7px -4px rgba(15,23,42,.10);
    --av-shadow-sm:0 14px 36px -21px rgba(15,23,42,.24),0 5px 14px -9px rgba(15,23,42,.13);
    --av-shadow-md:0 22px 52px -28px rgba(15,23,42,.30),0 8px 20px -13px rgba(15,23,42,.15);
    --av-shadow-float:0 28px 64px -32px rgba(15,23,42,.34),0 10px 24px -16px rgba(15,23,42,.17);
    --av-radius-sm:14px;
    --av-radius-md:18px;
    --av-radius-lg:24px;
    --av-radius-xl:30px;
    --av-ease:cubic-bezier(.2,.8,.2,1);
    --av-spring:cubic-bezier(.16,1,.3,1);
}

:where(html[data-hp-page="clientareahome"]) .alvand-home-26,
:where(html[data-hp-page="clientareahome"]) .alvand-home-26 * {box-sizing:border-box}
:where(html[data-hp-page="clientareahome"]) .alvand-home-26 img {max-width:100%;height:auto}

:where(html[data-hp-page="clientareahome"]) .alvand-home-26 {
    position:relative;
    isolation:isolate;
    direction:rtl;
    color:var(--av-text);
    font-family:inherit;
    width:100%;
    max-width:100%;
    padding:10px 0 48px;
    overflow:visible;
    background:transparent;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* ambient background removed — page inherits WHMCS background */
/* reveal --------------------------------------------------------------- */

/* common --------------------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-glass {
    border:1px solid rgba(255,255,255,.7);
    background:rgba(255,255,255,.72);
    box-shadow:var(--av-shadow-sm),inset 0 1px 0 rgba(255,255,255,.85);
    backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
}

:where(html[data-hp-page="clientareahome"]) .av-link-reset {color:inherit!important;text-decoration:none!important}

:where(html[data-hp-page="clientareahome"]) .av-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#596579;
    font-size:.66rem;
    font-weight:850;
}

:where(html[data-hp-page="clientareahome"]) .av-live-dot {
    width:7px;
    height:7px;
    flex:0 0 7px;
    display:inline-block;
    border-radius:50%;
    background:#14b8a6;
    box-shadow:0 0 0 5px rgba(20,184,166,.10);
    animation:avLive 2s ease-in-out infinite;
}
@keyframes avLive {
    0%,100%{box-shadow:0 0 0 4px rgba(20,184,166,.10)}
    50%{box-shadow:0 0 0 8px rgba(20,184,166,.02)}
}

/* hero ----------------------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-hero {
    position:relative;
    min-height:260px;
    margin-bottom:22px;
    padding:30px;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);
    align-items:stretch;
    gap:22px;
    border:1px solid rgba(255,255,255,.62);
    border-radius:32px;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(15,23,42,.97) 0%,rgba(30,41,59,.96) 47%,rgba(30,64,175,.94) 100%);
    box-shadow:0 24px 56px -30px rgba(15,23,42,.50),0 8px 20px -14px rgba(15,23,42,.20),inset 0 1px 0 rgba(255,255,255,.12);
}

:where(html[data-hp-page="clientareahome"]) .av-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.6;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:36px 36px;
    mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.45) 65%,transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.45) 65%,transparent 100%);
}

:where(html[data-hp-page="clientareahome"]) .av-hero::after {
    content:"";
    position:absolute;
    width:560px;
    height:560px;
    left:-180px;
    top:-265px;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(96,165,250,.34),rgba(37,99,235,.09) 40%,transparent 70%);
}

:where(html[data-hp-page="clientareahome"]) .av-hero-main,
:where(html[data-hp-page="clientareahome"]) .av-hero-side {position:relative;z-index:2}

:where(html[data-hp-page="clientareahome"]) .av-hero-main {
    padding:8px 5px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}

:where(html[data-hp-page="clientareahome"]) .av-hero-badge {
    min-height:32px;
    padding:0 12px;
    margin-bottom:18px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    color:rgba(255,255,255,.82);
    background:rgba(255,255,255,.07);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    font-size:.64rem;
    font-weight:800;
}

:where(html[data-hp-page="clientareahome"]) .av-hero-badge i {color:#67e8f9}

:where(html[data-hp-page="clientareahome"]) .av-hero-title {
    margin:0 0 11px;
    max-width:760px;
    color:#fff;
    font-size:clamp(1.6rem,3vw,2.55rem);
    line-height:1.45;
    letter-spacing:-.035em;
    font-weight:950;
}

:where(html[data-hp-page="clientareahome"]) .av-hero-title span {
    color:transparent;
    background:linear-gradient(100deg,#93c5fd 0%,#67e8f9 52%,#bfdbfe 100%);
    -webkit-background-clip:text;
    background-clip:text;
}

:where(html[data-hp-page="clientareahome"]) .av-hero-desc {
    max-width:680px;
    margin:0 0 22px;
    color:rgba(226,232,240,.76);
    font-size:.75rem;
    line-height:2;
    font-weight:650;
}

:where(html[data-hp-page="clientareahome"]) .av-hero-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap}

:where(html[data-hp-page="clientareahome"]) .av-hero-side {
    min-height:198px;
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px;
    background:linear-gradient(155deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 20px 50px rgba(0,0,0,.12);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

:where(html[data-hp-page="clientareahome"]) .av-credit-head {display:flex;align-items:center;justify-content:space-between;gap:12px}
:where(html[data-hp-page="clientareahome"]) .av-credit-icon {
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border-radius:14px;color:#bfdbfe;background:rgba(59,130,246,.14);border:1px solid rgba(147,197,253,.18);
}
:where(html[data-hp-page="clientareahome"]) .av-credit-label {display:block;color:rgba(226,232,240,.68);font-size:.62rem;font-weight:800;margin-bottom:7px}
:where(html[data-hp-page="clientareahome"]) .av-credit-value {
    display:block;
    unicode-bidi:isolate;
    text-align:right;
    color:#fff;
    font-size:clamp(1.12rem,2vw,1.55rem);
    font-weight:950;
    letter-spacing:-.02em;
}

:where(html[data-hp-page="clientareahome"]) .av-credit-bottom {
    margin-top:18px;
    padding-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-top:1px solid rgba(255,255,255,.085);
}
:where(html[data-hp-page="clientareahome"]) .av-credit-bottom span {color:rgba(226,232,240,.62);font-size:.57rem;line-height:1.8}

/* hero shortcuts ------------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcuts {
    margin-top:14px;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut {
    min-width:0;
    min-height:62px;
    padding:12px 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:15px;
    color:#fff!important;
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.05));
    text-decoration:none!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(15,23,42,.08);
    transition:background .28s ease,border-color .28s ease,transform .28s var(--av-spring),box-shadow .28s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut:hover {
    transform:translateX(-2px);
    border-color:rgba(147,197,253,.26);
    background:linear-gradient(180deg,rgba(59,130,246,.16),rgba(37,99,235,.12));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 26px rgba(15,23,42,.12);
}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut.status-center {
    border-color:rgba(96,165,250,.16);
    background:linear-gradient(180deg,rgba(59,130,246,.11),rgba(37,99,235,.08));
}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-main {min-width:0;display:flex;align-items:center;gap:11px}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-icon {
    width:36px;height:36px;flex:0 0 36px;display:flex;align-items:center;justify-content:center;
    border-radius:11px;color:#dbeafe;background:rgba(59,130,246,.16);border:1px solid rgba(147,197,253,.14);font-size:.7rem;
}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-copy {min-width:0;flex:1}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-copy strong {
    display:block;overflow:hidden;color:#fff;font-size:.59rem;font-weight:900;line-height:1.55;white-space:normal;text-overflow:ellipsis;
}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-copy span {
    display:block;margin-top:3px;overflow:visible;color:rgba(226,232,240,.78);font-size:.5rem;line-height:1.7;white-space:normal;text-overflow:unset;
}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut > i {flex:0 0 auto;color:rgba(191,219,254,.82);font-size:.58rem;transition:transform .28s var(--av-spring)}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut:hover > i {transform:translateX(-3px)}

/* stats --------------------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:26px;
}

:where(html[data-hp-page="clientareahome"]) .av-stat {
    --stat:var(--hp-primary);
    --stat-rgb:37,99,235;
    position:relative;
    min-width:0;
    min-height:142px;
    padding:19px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid var(--av-border);
    border-radius:20px;
    color:inherit!important;
    background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(255,255,255,.72));
    box-shadow:var(--av-shadow-xs),inset 0 1px 0 rgba(255,255,255,.95);
    text-decoration:none!important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transform-style:preserve-3d;
    transition:transform .36s var(--av-spring),box-shadow .36s ease,border-color .36s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-stat.tickets {--stat:#d97706;--stat-rgb:217,119,6}
:where(html[data-hp-page="clientareahome"]) .av-stat.domains {--stat:#0891b2;--stat-rgb:8,145,178}
:where(html[data-hp-page="clientareahome"]) .av-stat.invoices {--stat:#0f9f8f;--stat-rgb:15,159,143}
:where(html[data-hp-page="clientareahome"]) .av-stat::before {
    content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
    background:radial-gradient(180px circle at var(--mx,80%) var(--my,10%),rgba(var(--stat-rgb),.14),transparent 60%);
    opacity:.55;transition:opacity .3s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-stat::after {
    content:"";position:absolute;right:18px;left:18px;top:0;height:2px;border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,var(--stat),transparent);opacity:.72;
}
:where(html[data-hp-page="clientareahome"]) .av-stat:hover {border-color:rgba(var(--stat-rgb),.22);box-shadow:var(--av-shadow-md)}
:where(html[data-hp-page="clientareahome"]) .av-stat:hover::before {opacity:1}
:where(html[data-hp-page="clientareahome"]) .av-stat-head {position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
:where(html[data-hp-page="clientareahome"]) .av-stat-label {display:block;margin-bottom:7px;color:var(--av-muted);font-size:.61rem;font-weight:850}
:where(html[data-hp-page="clientareahome"]) .av-stat-value {display:block;overflow:hidden;color:var(--av-text);font-size:1.7rem;line-height:1.15;font-weight:950;letter-spacing:-.03em;white-space:nowrap;text-overflow:ellipsis}
:where(html[data-hp-page="clientareahome"]) .av-stat-icon {
    width:48px;height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center;border-radius:15px;
    color:var(--stat);background:rgba(var(--stat-rgb),.07);border:1px solid rgba(var(--stat-rgb),.12);
    transition:transform .36s var(--av-spring),color .3s ease,background .3s ease,box-shadow .3s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-stat:hover .av-stat-icon {transform:translateY(-2px) rotate(-4deg) scale(1.04);color:#fff;box-shadow:0 12px 26px rgba(var(--stat-rgb),.22)}
:where(html[data-hp-page="clientareahome"]) .av-stat.services:hover .av-stat-icon {background:linear-gradient(135deg,#60a5fa,#2563eb 62%,#1d4ed8)}
:where(html[data-hp-page="clientareahome"]) .av-stat.tickets:hover .av-stat-icon {background:linear-gradient(135deg,#fbbf24,#d97706 68%,#b45309)}
:where(html[data-hp-page="clientareahome"]) .av-stat.domains:hover .av-stat-icon {background:linear-gradient(135deg,#22d3ee,#0891b2 68%,#0e7490)}
:where(html[data-hp-page="clientareahome"]) .av-stat.invoices:hover .av-stat-icon {background:linear-gradient(135deg,#34d399,#0f9f8f 68%,#047857)}
:where(html[data-hp-page="clientareahome"]) .av-stat-foot {position:relative;z-index:2;margin-top:18px;padding-top:11px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid rgba(15,23,42,.065);color:var(--stat);font-size:.56rem;font-weight:900}
:where(html[data-hp-page="clientareahome"]) .av-stat-foot i {transition:transform .3s var(--av-spring)}
:where(html[data-hp-page="clientareahome"]) .av-stat:hover .av-stat-foot i {transform:translateX(-4px)}

/* section heading ----------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-section-head {
    margin:0 2px 13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
:where(html[data-hp-page="clientareahome"]) .av-section-head-main {min-width:0;display:flex;align-items:center;gap:11px}
:where(html[data-hp-page="clientareahome"]) .av-section-icon {
    width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(37,99,235,.12);border-radius:12px;color:var(--av-primary);background:rgba(37,99,235,.065);
}
:where(html[data-hp-page="clientareahome"]) .av-section-copy h4 {margin:0 0 3px;color:var(--av-text);font-size:.88rem;font-weight:950}
:where(html[data-hp-page="clientareahome"]) .av-section-copy p {margin:0;color:var(--av-muted);font-size:.57rem;line-height:1.6}

/* panels -------------------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-main-grid {
    display:grid;
    grid-template-columns:minmax(0,1.72fr) minmax(300px,.68fr);
    gap:16px;
    align-items:stretch;
    margin-bottom:26px;
}

:where(html[data-hp-page="clientareahome"]) .av-panel {
    position:relative;
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--av-border);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    box-shadow:var(--av-shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
:where(html[data-hp-page="clientareahome"]) .av-panel::before {
    content:"";position:absolute;z-index:4;right:12%;left:12%;top:0;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(59,130,246,.45),rgba(34,211,238,.28),transparent);
}

:where(html[data-hp-page="clientareahome"]) .av-panel-header {
    min-height:78px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    border-bottom:1px solid rgba(15,23,42,.06);
    background:rgba(255,255,255,.62);
}
:where(html[data-hp-page="clientareahome"]) .av-panel-title {min-width:0;display:flex;align-items:center;gap:12px}
:where(html[data-hp-page="clientareahome"]) .av-panel-title-icon {
    width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;border-radius:14px;color:#fff;
    background:linear-gradient(135deg,#60a5fa,#2563eb 55%,#1d4ed8);box-shadow:0 10px 25px rgba(37,99,235,.23),inset 0 1px 0 rgba(255,255,255,.2);
}
:where(html[data-hp-page="clientareahome"]) .av-panel-title-icon.cyan {background:linear-gradient(135deg,#22d3ee,#0891b2 60%,#0e7490);box-shadow:0 10px 25px rgba(8,145,178,.19)}
:where(html[data-hp-page="clientareahome"]) .av-panel-title-icon.rose {background:linear-gradient(135deg,#fb7185,#e11d48 60%,#be123c);box-shadow:0 10px 25px rgba(225,29,72,.18)}
:where(html[data-hp-page="clientareahome"]) .av-panel-copy {min-width:0}
:where(html[data-hp-page="clientareahome"]) .av-panel-copy h5 {margin:0 0 4px;color:var(--av-text);font-size:.83rem;font-weight:950;letter-spacing:-.01em}
:where(html[data-hp-page="clientareahome"]) .av-panel-copy p {margin:0;overflow:hidden;color:var(--av-muted);font-size:.56rem;line-height:1.7;white-space:nowrap;text-overflow:ellipsis}
:where(html[data-hp-page="clientareahome"]) .av-panel-actions {display:flex;align-items:center;gap:8px;flex-shrink:0}
:where(html[data-hp-page="clientareahome"]) .av-count {
    min-width:32px;height:32px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(37,99,235,.13);border-radius:10px;color:var(--av-primary);background:rgba(37,99,235,.06);font-size:.61rem;font-weight:950;
}

:where(html[data-hp-page="clientareahome"]) .av-panel-body {flex:1;padding:15px;background:linear-gradient(180deg,rgba(248,250,252,.74),rgba(246,248,252,.86))}

/* services — original linear style, refined --------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-services-panel {overflow:visible}
:where(html[data-hp-page="clientareahome"]) .av-services-panel .av-panel-body {position:relative;overflow:visible}
:where(html[data-hp-page="clientareahome"]) .av-services {
    --service-row-height:82px;
    --service-gap:11px;
    display:flex;
    flex-direction:column;
    gap:var(--service-gap);
    max-height:calc((var(--service-row-height) * 3) + (var(--service-gap) * 2) + 38px);
    overflow-y:visible;
    overflow-x:hidden;
    padding:15px 14px 22px 16px;
    margin:-15px -14px -8px -16px;
    scrollbar-width:thin;
    scrollbar-color:#c7cedb transparent;
    scrollbar-gutter:auto;
    overscroll-behavior:contain;
}
:where(html[data-hp-page="clientareahome"]) .av-services.has-overflow {overflow-y:auto;scrollbar-gutter:stable;touch-action:pan-y;-webkit-overflow-scrolling:touch}
:where(html[data-hp-page="clientareahome"]) .av-services::-webkit-scrollbar {width:6px}
:where(html[data-hp-page="clientareahome"]) .av-services::-webkit-scrollbar-track {background:transparent}
:where(html[data-hp-page="clientareahome"]) .av-services::-webkit-scrollbar-thumb {background:#c7cedb;border-radius:999px}
:where(html[data-hp-page="clientareahome"]) .av-services::-webkit-scrollbar-thumb:hover {background:#aeb7c7}

:where(html[data-hp-page="clientareahome"]) .av-service {
    --svc:var(--hp-primary);
    --svc-rgb:37,99,235;
    position:relative;
    isolation:isolate;
    z-index:1;
    min-width:0;
    min-height:var(--service-row-height);
    padding:14px 15px 14px 18px;
    display:grid;
    grid-template-columns:minmax(225px,1.45fr) minmax(165px,1.18fr) 132px 180px 118px;
    align-items:center;
    gap:14px;
    overflow:hidden;
    border:1px solid #e3e8f0;
    border-radius:16px;
    background:#fff;
    box-shadow:0 5px 14px rgba(16,24,40,.035),0 1px 2px rgba(16,24,40,.025);
    transition:transform .28s var(--av-spring),border-color .28s ease,box-shadow .3s ease,background-color .28s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-service.is-pending {--svc:#d97706;--svc-rgb:217,119,6}
:where(html[data-hp-page="clientareahome"]) .av-service.is-suspended {--svc:#e11d48;--svc-rgb:225,29,72}

/* Hosting rows have no IP column: give that unused width to the domain. */
:where(html[data-hp-page="clientareahome"]) .av-service.service-hosting {
    grid-template-columns:minmax(225px,1.42fr) minmax(300px,2.45fr) minmax(180px,1fr) 118px;
}
:where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col-placeholder {display:none}
:where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col.hostname {padding-right:16px}
:where(html[data-hp-page="clientareahome"]) .av-service::before {
    content:"";
    position:absolute;
    top:16px;
    right:0;
    bottom:16px;
    width:3px;
    border-radius:3px 0 0 3px;
    background:var(--svc);
}
:where(html[data-hp-page="clientareahome"]) .av-service::after {
    content:"";
    position:absolute;
    z-index:0;
    width:110px;
    height:110px;
    left:-74px;
    bottom:-77px;
    border-radius:50%;
    background:rgba(var(--svc-rgb),.06);
    pointer-events:none;
}
:where(html[data-hp-page="clientareahome"]) .av-service:hover {
    z-index:8;
    transform:translateY(-2px);
    border-color:rgba(var(--svc-rgb),.20);
    box-shadow:0 18px 34px -16px rgba(16,24,40,.22),0 9px 20px -13px rgba(var(--svc-rgb),.18),0 2px 5px rgba(16,24,40,.035);
}

:where(html[data-hp-page="clientareahome"]) .av-service-main {
    position:relative;
    z-index:2;
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
}
:where(html[data-hp-page="clientareahome"]) .av-service-icon {
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:var(--svc);
    background:rgba(var(--svc-rgb),.065);
    border:1px solid rgba(var(--svc-rgb),.13);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
    font-size:.94rem;
    transition:transform .28s var(--av-spring),color .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-service:hover .av-service-icon {
    color:#fff;
    background:var(--svc);
    border-color:var(--svc);
    box-shadow:0 8px 18px rgba(var(--svc-rgb),.16);
}
:where(html[data-hp-page="clientareahome"]) .av-service-copy {min-width:0}
:where(html[data-hp-page="clientareahome"]) .av-service-name {
    display:block;
    margin-bottom:5px;
    overflow:hidden;
    color:#172033;
    direction:ltr;
    unicode-bidi:plaintext;
    text-align:right;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size:.78rem;
    font-weight:850;
    letter-spacing:0;
    white-space:nowrap;
    text-overflow:ellipsis;
}
:where(html[data-hp-page="clientareahome"]) .av-service-sub {display:flex;align-items:center;gap:7px;min-width:0}
:where(html[data-hp-page="clientareahome"]) .av-service-group {
    overflow:hidden;
    color:var(--av-muted);
    font-size:.55rem;
    font-weight:700;
    white-space:nowrap;
    text-overflow:ellipsis;
}
:where(html[data-hp-page="clientareahome"]) .av-service-status {
    min-height:23px;
    padding:0 8px;
    flex-shrink:0;
    display:inline-flex;
    align-items:center;
    gap:5px;
    border-radius:8px;
    font-size:.51rem;
    font-weight:900;
    border:1px solid transparent;
}
:where(html[data-hp-page="clientareahome"]) .av-service-status::before {content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
:where(html[data-hp-page="clientareahome"]) .av-service-status.active {color:#087f6f;background:#eafbf7;border-color:#bfe9e0}
:where(html[data-hp-page="clientareahome"]) .av-service-status.pending {color:#b26a04;background:#fff8e8;border-color:#f7dda2}
:where(html[data-hp-page="clientareahome"]) .av-service-status.suspended {color:#c43e56;background:#fff0f3;border-color:#f4cad3}
:where(html[data-hp-page="clientareahome"]) .av-service-status.other {color:#667085;background:#f7f8fa;border-color:#e1e5eb}

:where(html[data-hp-page="clientareahome"]) .av-service-col {
    position:relative;
    z-index:2;
    min-width:0;
    padding-right:12px;
    border-right:1px solid #e7ebf1;
}
:where(html[data-hp-page="clientareahome"]) .av-service-col.hostname {padding-right:10px}
:where(html[data-hp-page="clientareahome"]) .av-service-col.address,
:where(html[data-hp-page="clientareahome"]) .av-service-col.due {padding-right:12px}
:where(html[data-hp-page="clientareahome"]) .av-service-col-placeholder {
    height:34px;
    padding:0!important;
    border-right:0!important;
    visibility:hidden;
    pointer-events:none;
}
:where(html[data-hp-page="clientareahome"]) .av-service-label {
    display:block;
    margin-bottom:6px;
    color:#94a3b8;
    font-size:.52rem;
    font-weight:750;
}
:where(html[data-hp-page="clientareahome"]) .av-service-value {
    display:block;
    overflow:hidden;
    color:#334155;
    font-size:.64rem;
    font-weight:850;
    white-space:nowrap;
    text-overflow:ellipsis;
}
:where(html[data-hp-page="clientareahome"]) .av-service-hostname {
    direction:ltr;
    unicode-bidi:plaintext;
    text-align:right;
    display:block;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11px;
    font-weight:800;
    font-feature-settings:"locl" 0,"tnum" 1,"lnum" 1;
    font-variant-numeric:tabular-nums lining-nums;
    color:#344054;
}
:where(html[data-hp-page="clientareahome"]) .av-service-hostname-link {
    display:inline-flex;
    align-items:center;
    gap:5px;
    width:100%;
    max-width:100%;
    min-width:0;
    direction:ltr;
    unicode-bidi:plaintext;
    color:#2563eb!important;
    text-decoration:none!important;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11px;
    font-weight:800;
    font-feature-settings:"locl" 0,"tnum" 1,"lnum" 1;
    font-variant-numeric:tabular-nums lining-nums;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:color .25s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-service-hostname-link:hover {color:#1649c9!important;text-decoration:underline!important;text-underline-offset:3px}
:where(html[data-hp-page="clientareahome"]) .av-service-hostname-link i {flex:0 0 auto;font-size:.5rem;opacity:.72}
:where(html[data-hp-page="clientareahome"]) .av-service-hostname-link span {min-width:0;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-hostname-link {
    font-size:.72rem;
    font-weight:950;
    letter-spacing:0;
}
:where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-hostname-link span {
    max-width:calc(100% - 18px);
}
:where(html[data-hp-page="clientareahome"]) .av-service-address {
    direction:ltr;
    unicode-bidi:isolate;
    text-align:left;
    display:inline-flex;
    align-items:center;
    width:auto;
    max-width:100%;
    padding:6px 9px;
    color:#34415a;
    background:#f5f7fa;
    border:1px solid #e1e6ed;
    border-radius:9px;
    box-shadow:inset 0 1px 0 #fff;
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
    font-size:.66rem;
    font-weight:700;
    line-height:1.25;
    font-variant-numeric:tabular-nums lining-nums;
    letter-spacing:.012em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
:where(html[data-hp-page="clientareahome"]) .av-service-date {
    direction:ltr;
    unicode-bidi:isolate;
    text-align:right;
    color:#263349;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 11px;
    font-weight:800;
    font-feature-settings:"locl" 0,"tnum" 1,"lnum" 1;
    font-variant-numeric:tabular-nums lining-nums;
    letter-spacing:0;
}
:where(html[data-hp-page="clientareahome"]) .av-due-wrap {
    min-width:0;
    max-width:100%;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    white-space:nowrap;
}
:where(html[data-hp-page="clientareahome"]) .av-remaining {
    min-height:24px;
    padding:0 8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    flex:0 0 auto;
    border:1px solid #dbe4ef;
    border-radius:999px;
    color:#617086;
    background:linear-gradient(180deg,#f9fbfd,#f2f6fa);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    font-size:.50rem;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
}
:where(html[data-hp-page="clientareahome"]) .av-remaining:not(.soon):not(.today):not(.overdue)::before {content:"";width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.12)}
:where(html[data-hp-page="clientareahome"]) .av-remaining.soon {color:#9a5b06;background:linear-gradient(180deg,#fffaf0,#fff4d9);border-color:#efd08f}
:where(html[data-hp-page="clientareahome"]) .av-remaining.today {color:#b44b13;background:linear-gradient(180deg,#fff7f1,#ffeadf);border-color:#f1b996}
:where(html[data-hp-page="clientareahome"]) .av-remaining.overdue {color:#b8324b;background:linear-gradient(180deg,#fff5f7,#ffe8ed);border-color:#efbac5}
:where(html[data-hp-page="clientareahome"]) .av-service.due-soon .av-service-date {color:#8e570c}
:where(html[data-hp-page="clientareahome"]) .av-service.due-today .av-service-date {color:#ad4612}
:where(html[data-hp-page="clientareahome"]) .av-service.due-overdue .av-service-date {color:#b8324b}
:where(html[data-hp-page="clientareahome"]) .av-service-action {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/* empty --------------------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-empty {
    min-height:320px;padding:34px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    border:1px dashed rgba(15,23,42,.13);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(248,250,252,.9));
}
:where(html[data-hp-page="clientareahome"]) .av-empty-icon {width:68px;height:68px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;border-radius:21px;color:var(--av-primary);background:rgba(37,99,235,.065);border:1px solid rgba(37,99,235,.11);font-size:1.18rem;box-shadow:0 12px 30px rgba(37,99,235,.09)}
:where(html[data-hp-page="clientareahome"]) .av-empty strong {margin-bottom:6px;color:var(--av-text);font-size:.73rem}
:where(html[data-hp-page="clientareahome"]) .av-empty span {color:var(--av-muted);font-size:.58rem;line-height:1.8}

/* promo --------------------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-promo-body {flex:1;padding:15px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(248,250,252,.74),rgba(246,248,252,.86))}
:where(html[data-hp-page="clientareahome"]) .av-slider {
    position:relative;width:100%;min-height:350px;flex:1;overflow:hidden;border:1px solid rgba(15,23,42,.08);border-radius:17px;background:#e8edf5;
    box-shadow:0 14px 34px rgba(15,23,42,.075),inset 0 1px 0 rgba(255,255,255,.8);
}
:where(html[data-hp-page="clientareahome"]) .av-slide {position:absolute;inset:0;opacity:0;z-index:1;transform:scale(1.045);transition:opacity .65s ease,transform 1.1s var(--av-spring)}
:where(html[data-hp-page="clientareahome"]) .av-slide.active {opacity:1;z-index:2;transform:scale(1)}
:where(html[data-hp-page="clientareahome"]) .av-slide a {display:block;width:100%;height:100%}
:where(html[data-hp-page="clientareahome"]) .av-slide img {width:100%;height:100%;display:block;object-fit:cover;transition:transform 1s var(--av-spring)}
:where(html[data-hp-page="clientareahome"]) .av-slider:hover .av-slide.active img {transform:scale(1.018)}
:where(html[data-hp-page="clientareahome"]) .av-slider::after {content:"";position:absolute;z-index:3;inset:auto 0 0;height:45%;pointer-events:none;background:linear-gradient(to top,rgba(15,23,42,.48),transparent)}
:where(html[data-hp-page="clientareahome"]) .av-slider-overlay {position:absolute;z-index:4;right:16px;left:16px;bottom:15px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none}
:where(html[data-hp-page="clientareahome"]) .av-slider-caption {min-width:0;color:#fff}
:where(html[data-hp-page="clientareahome"]) .av-slider-caption strong {display:block;margin-bottom:4px;font-size:.68rem;font-weight:900;text-shadow:0 2px 14px rgba(0,0,0,.25)}
:where(html[data-hp-page="clientareahome"]) .av-slider-caption span {display:block;overflow:hidden;color:rgba(255,255,255,.74);font-size:.51rem;white-space:nowrap;text-overflow:ellipsis}
:where(html[data-hp-page="clientareahome"]) .av-slider-dots {display:flex;align-items:center;gap:6px;pointer-events:auto}
:where(html[data-hp-page="clientareahome"]) .av-slider-dot {width:7px;height:7px;border:0;border-radius:99px;background:rgba(255,255,255,.55);box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer;transition:width .3s var(--av-spring),background .3s ease}
:where(html[data-hp-page="clientareahome"]) .av-slider-dot.active {width:24px;background:#fff}

/* tickets ------------------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-ticket-panel {
    position:relative;overflow:hidden;border:1px solid var(--av-border);border-radius:26px;background:rgba(255,255,255,.92);
    box-shadow:var(--av-shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:none;-webkit-backdrop-filter:none;
}
:where(html[data-hp-page="clientareahome"]) .av-ticket-panel::before {content:"";position:absolute;z-index:3;right:13%;left:13%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.42),rgba(34,211,238,.25),transparent)}
:where(html[data-hp-page="clientareahome"]) .av-ticket-body {padding:15px;background:linear-gradient(180deg,rgba(248,250,252,.74),rgba(246,248,252,.86))}
:where(html[data-hp-page="clientareahome"]) .av-ticket-list {display:flex;flex-direction:column;gap:9px}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row {
    --ticket:var(--hp-primary);--ticket-rgb:37,99,235;
    position:relative;min-height:82px;padding:13px 14px 13px 17px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:15px;
    border:1px solid rgba(15,23,42,.075);border-radius:16px;color:inherit!important;background:rgba(255,255,255,.88);box-shadow:0 4px 14px rgba(15,23,42,.025);
    text-decoration:none!important;transition:transform .32s var(--av-spring),border-color .3s ease,box-shadow .32s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row.status-answered {--ticket:#0f9f8f;--ticket-rgb:15,159,143}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row.status-customer {--ticket:#d97706;--ticket-rgb:217,119,6}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row.status-progress {--ticket:var(--hp-primary);--ticket-rgb:37,99,235}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row.status-closed {--ticket:var(--hp-muted);--ticket-rgb:100,116,139}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row::before {content:"";position:absolute;right:0;top:14px;bottom:14px;width:3px;border-radius:0 4px 4px 0;background:var(--ticket)}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row::after {content:"";position:absolute;width:110px;height:110px;left:-80px;bottom:-80px;border-radius:50%;background:rgba(var(--ticket-rgb),.055);transition:transform .4s var(--av-spring)}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row:hover {transform:translateY(-3px);border-color:rgba(var(--ticket-rgb),.18);box-shadow:0 18px 36px -18px rgba(15,23,42,.24),0 7px 16px -12px rgba(var(--ticket-rgb),.2)}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row:hover::after {transform:scale(1.35)}
:where(html[data-hp-page="clientareahome"]) .av-ticket-content {position:relative;z-index:2;min-width:0;display:flex;align-items:center;gap:12px}
:where(html[data-hp-page="clientareahome"]) .av-ticket-icon {
    width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;border-radius:14px;color:var(--ticket);
    background:rgba(var(--ticket-rgb),.065);border:1px solid rgba(var(--ticket-rgb),.11);transition:transform .32s var(--av-spring),color .3s ease,background .3s ease;
}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row:hover .av-ticket-icon {transform:rotate(-5deg) scale(1.05);color:#fff;background:var(--ticket)}
:where(html[data-hp-page="clientareahome"]) .av-ticket-copy {min-width:0}
:where(html[data-hp-page="clientareahome"]) .av-ticket-topline {display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:6px}
:where(html[data-hp-page="clientareahome"]) .av-ticket-title {min-width:0;overflow:hidden;color:var(--av-text);font-size:.69rem;font-weight:900;line-height:1.6;white-space:nowrap;text-overflow:ellipsis;transition:color .3s ease}
:where(html[data-hp-page="clientareahome"]) .av-ticket-row:hover .av-ticket-title {color:var(--ticket)}
:where(html[data-hp-page="clientareahome"]) .av-ticket-unread {min-height:20px;padding:0 7px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;color:#fff;background:var(--ticket);font-size:.47rem;font-weight:900}
:where(html[data-hp-page="clientareahome"]) .av-ticket-meta {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
:where(html[data-hp-page="clientareahome"]) .av-ticket-id {min-height:23px;padding:0 7px;display:inline-flex;align-items:center;border-radius:7px;color:#58667a;background:#f7f9fb;border:1px solid #e5eaf0;font-family:"SFMono-Regular",Consolas,monospace;font-size:.53rem;font-weight:700;direction:ltr}
:where(html[data-hp-page="clientareahome"]) .av-ticket-meta-label {display:inline-flex;align-items:center;gap:5px;color:var(--av-muted);font-size:.53rem;font-weight:700}
:where(html[data-hp-page="clientareahome"]) .av-ticket-meta-label i {color:var(--ticket);font-size:.52rem}
:where(html[data-hp-page="clientareahome"]) .av-ticket-side {position:relative;z-index:2;display:flex;align-items:center;gap:9px;flex-shrink:0}
:where(html[data-hp-page="clientareahome"]) .av-ticket-status {min-width:106px;min-height:35px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:11px;color:var(--ticket);background:rgba(var(--ticket-rgb),.06);border:1px solid rgba(var(--ticket-rgb),.12);font-size:.59rem;font-weight:900;white-space:nowrap}
:where(html[data-hp-page="clientareahome"]) .av-ticket-status::before {content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
:where(html[data-hp-page="clientareahome"]) .av-ticket-empty {padding:45px 18px;text-align:center;color:var(--av-muted);font-size:.62rem}

/* focus + pointer ----------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut:focus-visible,
:where(html[data-hp-page="clientareahome"]) .av-stat:focus-visible,
:where(html[data-hp-page="clientareahome"]) .av-service-hostname-link:focus-visible,
:where(html[data-hp-page="clientareahome"]) .av-ticket-row:focus-visible,
:where(html[data-hp-page="clientareahome"]) .av-slider-dot:focus-visible {
    outline:3px solid rgba(59,130,246,.24);outline-offset:3px;
}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut,
:where(html[data-hp-page="clientareahome"]) .av-stat,
:where(html[data-hp-page="clientareahome"]) .av-service-hostname-link,
:where(html[data-hp-page="clientareahome"]) .av-ticket-row,
:where(html[data-hp-page="clientareahome"]) .av-slider-dot {-webkit-tap-highlight-color:transparent}

/* shadow-safe layout -------------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .alvand-home-26 > .av-hero,
:where(html[data-hp-page="clientareahome"]) .alvand-home-26 > .av-stats,
:where(html[data-hp-page="clientareahome"]) .alvand-home-26 > .av-main-grid,
:where(html[data-hp-page="clientareahome"]) .alvand-home-26 > .av-ticket-panel {
    width:100%;
    max-width:100%;
}

/* The outer containers stay visible so blurred box-shadows can fade naturally. */
:where(html[data-hp-page="clientareahome"]) .av-stats,
:where(html[data-hp-page="clientareahome"]) .av-main-grid {
    overflow:visible;
}

/* responsive ---------------------------------------------------------- */
@media(max-width:1180px) {
    :where(html[data-hp-page="clientareahome"]) .av-main-grid {grid-template-columns:1fr}
    :where(html[data-hp-page="clientareahome"]) .av-slider {min-height:330px;max-height:430px}
    :where(html[data-hp-page="clientareahome"]) .av-service {grid-template-columns:minmax(205px,1.38fr) minmax(155px,1.15fr) 130px 176px 112px;gap:11px}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting {grid-template-columns:minmax(205px,1.34fr) minmax(270px,2.35fr) 176px 112px}
}

@media(max-width:991.98px) {
    :where(html[data-hp-page="clientareahome"]) .alvand-home-26 {overflow:visible}
    :where(html[data-hp-page="clientareahome"]) .av-hero {grid-template-columns:1fr;min-height:auto}
    :where(html[data-hp-page="clientareahome"]) .av-hero-main,
:where(html[data-hp-page="clientareahome"]) .av-hero-side,
:where(html[data-hp-page="clientareahome"]) .av-panel,
:where(html[data-hp-page="clientareahome"]) .av-ticket-panel,
:where(html[data-hp-page="clientareahome"]) .av-main-grid {min-width:0;width:100%}
    :where(html[data-hp-page="clientareahome"]) .av-hero-side {min-height:160px}
    :where(html[data-hp-page="clientareahome"]) .av-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
    :where(html[data-hp-page="clientareahome"]) .av-service {
        grid-template-columns:minmax(0,1fr) 150px 145px auto;
        gap:10px 12px;
        min-height:auto;
        padding:13px 14px;
    }
    :where(html[data-hp-page="clientareahome"]) .av-service-main {grid-column:1/-1;padding-bottom:2px}
    :where(html[data-hp-page="clientareahome"]) .av-service-col {padding-right:0;border-right:0}
    :where(html[data-hp-page="clientareahome"]) .av-service-col.hostname {grid-column:1}
    :where(html[data-hp-page="clientareahome"]) .av-service-col.address {grid-column:2}
    :where(html[data-hp-page="clientareahome"]) .av-service-col.due {grid-column:3}
    :where(html[data-hp-page="clientareahome"]) .av-service-action {grid-column:4}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col-placeholder {display:none}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col.hostname {grid-column:1/3;padding-right:0}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-hostname-link {font-size:.70rem}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col.due {grid-column:3}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-action {grid-column:4}
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="clientareahome"]) .alvand-home-26 {padding-top:5px;padding-bottom:34px;overflow:visible}
    :where(html[data-hp-page="clientareahome"]) .alvand-home-26 * {min-width:0}
    :where(html[data-hp-page="clientareahome"]) .av-hero {padding:22px;border-radius:24px;gap:18px}
    :where(html[data-hp-page="clientareahome"]) .av-hero-title {font-size:1.55rem}
    :where(html[data-hp-page="clientareahome"]) .av-hero-desc {max-width:none}
    :where(html[data-hp-page="clientareahome"]) .av-hero-side {padding:16px;border-radius:20px}
    :where(html[data-hp-page="clientareahome"]) .av-credit-shortcut {min-height:58px}
    :where(html[data-hp-page="clientareahome"]) .av-panel-header {padding:14px}
    :where(html[data-hp-page="clientareahome"]) .av-panel-body,
:where(html[data-hp-page="clientareahome"]) .av-promo-body,
:where(html[data-hp-page="clientareahome"]) .av-ticket-body {padding:12px}
    :where(html[data-hp-page="clientareahome"]) .av-services {max-height:none;overflow:visible;padding:0;margin:0}
    :where(html[data-hp-page="clientareahome"]) .av-service {
        grid-template-columns:minmax(0,1fr) minmax(132px,.72fr);
        gap:11px 12px;
        padding:14px;
        border-radius:16px;
    }
    :where(html[data-hp-page="clientareahome"]) .av-service-main {grid-column:1/-1}
    :where(html[data-hp-page="clientareahome"]) .av-service-col.hostname {grid-column:1}
    :where(html[data-hp-page="clientareahome"]) .av-service-col.address {grid-column:2}
    :where(html[data-hp-page="clientareahome"]) .av-service-col.due {grid-column:1}
    :where(html[data-hp-page="clientareahome"]) .av-service-action {grid-column:2;align-self:end}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col.hostname {grid-column:1/-1;padding-right:2px}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-hostname-link {font-size:.68rem}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col.due {grid-column:1}
    :where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-action {grid-column:2}
    :where(html[data-hp-page="clientareahome"]) .av-service-col {padding:4px 2px;border-right:0}
    :where(html[data-hp-page="clientareahome"]) .av-due-wrap {flex-wrap:wrap;white-space:normal}
    :where(html[data-hp-page="clientareahome"]) .av-slider {min-height:270px}
    :where(html[data-hp-page="clientareahome"]) .av-ticket-row {grid-template-columns:1fr;gap:10px}
    :where(html[data-hp-page="clientareahome"]) .av-ticket-side {padding-right:58px;justify-content:space-between}
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="clientareahome"]) .av-hero {padding:18px 16px;margin-bottom:16px;border-radius:20px}
    :where(html[data-hp-page="clientareahome"]) .av-hero-badge {margin-bottom:13px;max-width:100%}
    :where(html[data-hp-page="clientareahome"]) .av-hero-title {font-size:1.38rem;line-height:1.55}
    :where(html[data-hp-page="clientareahome"]) .av-hero-desc {font-size:.66rem;line-height:1.9}
    :where(html[data-hp-page="clientareahome"]) .av-hero-actions {width:100%;display:grid;grid-template-columns:1fr 1fr}
    :where(html[data-hp-page="clientareahome"]) .av-credit-head {align-items:flex-start}
    :where(html[data-hp-page="clientareahome"]) .av-credit-bottom {align-items:stretch;flex-direction:column;gap:10px}
    :where(html[data-hp-page="clientareahome"]) .av-credit-shortcuts {gap:8px}
    :where(html[data-hp-page="clientareahome"]) .av-credit-shortcut {padding:11px;align-items:center}
    :where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-copy strong {font-size:.56rem}
    :where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-copy span {font-size:.47rem}
    :where(html[data-hp-page="clientareahome"]) .av-stat,
:where(html[data-hp-page="clientareahome"]) .av-panel,
:where(html[data-hp-page="clientareahome"]) .av-ticket-panel {border-radius:17px}
    :where(html[data-hp-page="clientareahome"]) .av-stats {grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
    :where(html[data-hp-page="clientareahome"]) .av-stat {min-height:126px;padding:15px}
    :where(html[data-hp-page="clientareahome"]) .av-stat-icon {width:43px;height:43px;flex-basis:43px}
    :where(html[data-hp-page="clientareahome"]) .av-stat-value {font-size:1.45rem}
    :where(html[data-hp-page="clientareahome"]) .av-stat-foot {font-size:.51rem}
    :where(html[data-hp-page="clientareahome"]) .av-panel-header {align-items:flex-start;gap:10px}
    :where(html[data-hp-page="clientareahome"]) .av-panel-copy p {white-space:normal;max-width:none}
    :where(html[data-hp-page="clientareahome"]) .av-panel-actions {flex-shrink:0}
    :where(html[data-hp-page="clientareahome"]) .av-service {grid-template-columns:1fr;gap:8px;padding:13px}
    :where(html[data-hp-page="clientareahome"]) .av-service-main,
:where(html[data-hp-page="clientareahome"]) .av-service-col.hostname,
:where(html[data-hp-page="clientareahome"]) .av-service-col.address,
:where(html[data-hp-page="clientareahome"]) .av-service-col.due,
:where(html[data-hp-page="clientareahome"]) .av-service-action,
:where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col.hostname,
:where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-col.due,
:where(html[data-hp-page="clientareahome"]) .av-service.service-hosting .av-service-action {grid-column:1}
    :where(html[data-hp-page="clientareahome"]) .av-service-col {padding:7px 2px;border-top:1px solid rgba(15,23,42,.055)}
    :where(html[data-hp-page="clientareahome"]) .av-service-col.hostname {border-top:0}
    :where(html[data-hp-page="clientareahome"]) .av-service-action {padding-top:4px}
    :where(html[data-hp-page="clientareahome"]) .av-service-address {max-width:100%}
    :where(html[data-hp-page="clientareahome"]) .av-service-hostname-link span {max-width:calc(100% - 18px)}
    :where(html[data-hp-page="clientareahome"]) .av-slider {min-height:245px}
    :where(html[data-hp-page="clientareahome"]) .av-ticket-side {padding-right:0;flex-direction:column;align-items:stretch}
    :where(html[data-hp-page="clientareahome"]) .av-ticket-status {width:100%}
}

@media(max-width:430px) {
    :where(html[data-hp-page="clientareahome"]) .av-hero-actions {grid-template-columns:1fr}
    :where(html[data-hp-page="clientareahome"]) .av-credit-value {font-size:1.15rem}
    :where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-main {align-items:flex-start}
    :where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-copy strong,
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut-copy span {white-space:normal}
    :where(html[data-hp-page="clientareahome"]) .av-stats {grid-template-columns:1fr}
    :where(html[data-hp-page="clientareahome"]) .av-stat {min-height:116px}
    :where(html[data-hp-page="clientareahome"]) .av-panel-header {flex-direction:column;align-items:stretch}
    :where(html[data-hp-page="clientareahome"]) .av-panel-actions {justify-content:space-between;width:100%}
    :where(html[data-hp-page="clientareahome"]) .av-ticket-content {align-items:flex-start}
    :where(html[data-hp-page="clientareahome"]) .av-ticket-topline {align-items:flex-start;flex-wrap:wrap}
    :where(html[data-hp-page="clientareahome"]) .av-ticket-title {width:100%;white-space:normal}
    :where(html[data-hp-page="clientareahome"]) .av-slider-overlay {right:11px;left:11px;bottom:11px}
    :where(html[data-hp-page="clientareahome"]) .av-slider-caption span {white-space:normal}
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareahome"]) .av-live-dot {animation:none!important}
:where(html[data-hp-page="clientareahome"]) .av-credit-shortcut,
:where(html[data-hp-page="clientareahome"]) .av-stat,
:where(html[data-hp-page="clientareahome"]) .av-stat-icon,
:where(html[data-hp-page="clientareahome"]) .av-service,
:where(html[data-hp-page="clientareahome"]) .av-service-icon,
:where(html[data-hp-page="clientareahome"]) .av-slide,
:where(html[data-hp-page="clientareahome"]) .av-slider-dot,
:where(html[data-hp-page="clientareahome"]) .av-ticket-row,
:where(html[data-hp-page="clientareahome"]) .av-ticket-icon {transition:none!important}
}

/* Status feed notice widget ------------------------------------------- */
:where(html[data-hp-page="clientareahome"]) .av-status-notice-panel {position:relative;overflow:hidden;border-color:rgba(37,99,235,.11);background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(248,251,255,.84));box-shadow:0 18px 45px -30px rgba(15,23,42,.34),0 5px 14px -10px rgba(37,99,235,.16)}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-panel::before {display:none}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-panel .av-panel-header {position:relative;padding:16px 16px 13px;border-bottom:0;background:transparent}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-panel .av-panel-title-icon {width:42px;height:42px;flex:0 0 42px;border-radius:13px}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-head-meta {display:flex;align-items:center;gap:7px}
:where(html[data-hp-page="clientareahome"]) .av-status-live {--state-color:var(--hp-muted);--state-rgb:100,116,139;min-height:27px;display:inline-flex;align-items:center;gap:7px;padding:0 9px;border:1px solid rgba(var(--state-rgb),.18);border-radius:999px;color:var(--state-color);background:rgba(var(--state-rgb),.075);font-size:.55rem;font-weight:900;white-space:nowrap;transition:color .25s ease,background .25s ease,border-color .25s ease}
:where(html[data-hp-page="clientareahome"]) .av-status-live::before {content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(var(--state-rgb),.10)}
:where(html[data-hp-page="clientareahome"]) .av-status-live.is-operational {--state-color:#087f62;--state-rgb:15,159,110}
:where(html[data-hp-page="clientareahome"]) .av-status-live.is-maintenance {--state-color:#a16207;--state-rgb:217,119,6}
:where(html[data-hp-page="clientareahome"]) .av-status-live.is-degraded {--state-color:#b45309;--state-rgb:245,158,11}
:where(html[data-hp-page="clientareahome"]) .av-status-live.is-partial_outage {--state-color:#be123c;--state-rgb:225,29,72}
:where(html[data-hp-page="clientareahome"]) .av-status-live.is-major_outage {--state-color:#b91c1c;--state-rgb:220,38,38}
:where(html[data-hp-page="clientareahome"]) .av-status-live.is-unknown {--state-color:var(--hp-muted);--state-rgb:100,116,139}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-body {position:relative;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 16px 14px}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-list {min-height:0;display:grid;grid-auto-rows:max-content;align-content:start;gap:8px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#c7cedb transparent;overscroll-behavior:contain}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-list::-webkit-scrollbar {width:5px}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-list::-webkit-scrollbar-track {background:transparent}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-list::-webkit-scrollbar-thumb {background:#c7cedb;border-radius:999px}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-item {--notice:var(--hp-primary);--notice-rgb:37,99,235;position:relative;min-height:96px;height:auto;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:10px;padding:11px 12px 13px;border:1px solid rgba(var(--notice-rgb),.13);border-radius:14px;color:inherit!important;background:linear-gradient(105deg,rgba(var(--notice-rgb),.055),rgba(255,255,255,.88) 44%);box-shadow:inset -3px 0 0 rgba(var(--notice-rgb),.72),0 8px 20px -20px rgba(15,23,42,.45);text-decoration:none!important;transition:transform .25s var(--av-spring),border-color .25s ease,box-shadow .25s ease}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-item.is-incident {--notice:#e11d48;--notice-rgb:225,29,72}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-item.is-maintenance {--notice:#d97706;--notice-rgb:217,119,6}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-item:hover {transform:translateY(-2px);border-color:rgba(var(--notice-rgb),.28);box-shadow:inset -3px 0 0 var(--notice),0 17px 30px -22px rgba(var(--notice-rgb),.36)}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-item:focus-visible {outline:0;box-shadow:inset -3px 0 0 var(--notice),0 0 0 3px rgba(var(--notice-rgb),.16)}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-icon {width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(var(--notice-rgb),.16);border-radius:12px;color:var(--notice);background:rgba(var(--notice-rgb),.075);font-size:.86rem}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-copy {min-width:0;align-self:stretch;display:grid;grid-template-rows:auto auto auto;gap:5px}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-top {display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-copy strong {min-width:0;overflow:hidden;color:#172033;font-size:.73rem;font-weight:900;line-height:1.65;text-overflow:ellipsis;white-space:nowrap}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-copy p {margin:0;overflow:hidden;color:#66758e;font-size:.6rem;line-height:1.7;text-overflow:ellipsis;white-space:nowrap}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-meta {min-height:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1px;padding-top:5px;border-top:1px solid rgba(var(--notice-rgb),.09);white-space:nowrap}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-badge {min-height:24px;display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;padding:0 8px;border:1px solid rgba(var(--notice-rgb),.15);border-radius:8px;color:var(--notice);background:rgba(var(--notice-rgb),.07);font-size:.53rem;font-weight:900;white-space:nowrap}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-badge::before {content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-date {display:inline-flex;align-items:center;gap:5px;color:#8a98ae;font-size:.54rem}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-date::before {content:"\f017";font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900;font-size:.55rem}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-open {display:inline-flex;align-items:center;gap:6px;color:var(--notice);font-size:.54rem;font-weight:850}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-footer {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:10px 2px 0;border-top:1px solid var(--av-border);color:#748198;font-size:.57rem;line-height:1.7}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-footer a {min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:1px solid rgba(37,99,235,.13);border-radius:10px;color:#1d4ed8!important;background:rgba(37,99,235,.055);font-weight:900;text-decoration:none!important;white-space:nowrap;transition:background .2s ease,border-color .2s ease}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-footer a:hover {border-color:rgba(37,99,235,.23);background:rgba(37,99,235,.1)}
:where(html[data-hp-page="clientareahome"]) .av-status-notice-empty,
:where(html[data-hp-page="clientareahome"]) .av-status-notice-loading {min-height:78px;display:grid;place-items:center;padding:14px;border:1px dashed rgba(37,99,235,.18);border-radius:13px;color:#6b7890;background:linear-gradient(120deg,rgba(37,99,235,.035),rgba(248,250,255,.72));font-size:.61rem;text-align:center}
:where(html[data-hp-page="clientareahome"]) .av-main-grid.has-services .av-status-notice-list {min-height:220px}
:where(html[data-hp-page="clientareahome"]) .av-main-grid.has-services .av-status-notice-empty,
:where(html[data-hp-page="clientareahome"]) .av-main-grid.has-services .av-status-notice-loading {min-height:220px}
@media(min-width:1181px) {
    :where(html[data-hp-page="clientareahome"]) .av-main-grid {--av-main-panel-max:375px;align-items:stretch}
    :where(html[data-hp-page="clientareahome"]) .av-main-grid>.av-panel {height:var(--av-main-panel-max);max-height:var(--av-main-panel-max)}
    :where(html[data-hp-page="clientareahome"]) .av-services-panel {overflow:hidden}
    :where(html[data-hp-page="clientareahome"]) .av-services-panel .av-panel-body {min-height:0;overflow:hidden}
    :where(html[data-hp-page="clientareahome"]) .av-services {height:auto;max-height:calc((var(--service-row-height) * 3) + (var(--service-gap) * 2) + 38px);overflow-y:visible;scrollbar-gutter:auto}
    :where(html[data-hp-page="clientareahome"]) .av-services.has-overflow {height:auto;max-height:calc((var(--service-row-height) * 3) + (var(--service-gap) * 2) + 38px);overflow-y:auto;scrollbar-gutter:stable}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-body {overflow:hidden;padding-bottom:12px}
    :where(html[data-hp-page="clientareahome"]) .av-main-grid.has-services .av-status-notice-list {min-height:0}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-list {flex:1 1 auto;max-height:none;padding:2px 0 3px 5px;scroll-padding-block:2px}
    :where(html[data-hp-page="clientareahome"]) .av-main-grid.has-services .av-status-notice-loading {height:100%;min-height:0}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-footer {flex:0 0 auto;margin-top:8px;padding-top:8px}
}
@media(max-width:640px) {
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-body {padding:0 13px 14px}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-panel .av-panel-header {padding:17px 14px 14px}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-head-meta {justify-content:flex-start}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-item {grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-icon {width:40px;height:40px;border-radius:12px}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-top {align-items:flex-start;flex-direction:column;gap:5px}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-copy p {white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-footer {align-items:flex-start;flex-direction:column}
    :where(html[data-hp-page="clientareahome"]) .av-status-notice-footer a {width:100%}
}

/* clientareainvoices.tpl */
:root:where(html[data-hp-page="clientareainvoices"]) {
    --phc-srv-bg:var(--hp-page);
    --phc-srv-card:var(--hp-surface);
    --phc-srv-card-soft:var(--hp-surface-soft);
    --phc-srv-border:var(--hp-line);
    --phc-srv-border-strong:#cbd5e1;
    --phc-srv-divider:#edf1f6;

    --phc-srv-text:var(--hp-ink);
    --phc-srv-text-2:var(--hp-ink-secondary);
    --phc-srv-muted:var(--hp-muted);
    --phc-srv-muted-2:#94a3b8;

    --phc-srv-blue:var(--hp-primary);
    --phc-srv-blue-dark:var(--hp-primary-hover);
    --phc-srv-blue-light:#60a5fa;
    --phc-srv-blue-soft:var(--hp-primary-soft);
    --phc-srv-blue-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --phc-srv-green:#10b981;
    --phc-srv-green-soft:#ecfdf5;
    --phc-srv-orange:#f59e0b;
    --phc-srv-orange-soft:#fff7ed;
    --phc-srv-red:#ef4444;
    --phc-srv-red-soft:#fef2f2;
    --phc-srv-slate:var(--hp-muted);
    --phc-srv-slate-soft:#f1f5f9;

    --phc-srv-radius-xl:24px;
    --phc-srv-radius-lg:18px;
    --phc-srv-radius-md:13px;

    --phc-srv-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --phc-srv-shadow-md:0 18px 42px rgba(15,23,42,.09),0 5px 15px rgba(15,23,42,.035);
    --phc-srv-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --phc-srv-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="clientareainvoices"]) .dataTables_filter {
    display:none!important;
}

/* ===== Summary widgets ===== */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget {
    --widget-accent:var(--phc-srv-blue);
    --widget-soft:var(--phc-srv-blue-soft);
    --widget-edge:var(--hp-primary-line);

    position:relative;
    min-height:132px;
    padding:20px;
    overflow:hidden;
    display:flex;
    align-items:center;

    border:1px solid var(--phc-srv-border);
    border-radius:var(--phc-srv-radius-lg);
    background:
        linear-gradient(145deg,#fff 0%,#fff 68%,var(--widget-soft) 145%);
    box-shadow:var(--phc-srv-shadow-sm);

    transition:
        transform var(--phc-srv-transition),
        border-color var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget::before {
    content:"";
    position:absolute;
    top:0;
    right:18px;
    left:18px;
    height:3px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,var(--widget-accent),transparent);
    opacity:.95;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget::after {
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    left:-72px;
    bottom:-100px;
    border-radius:50%;
    background:var(--widget-soft);
    opacity:.65;
    pointer-events:none;
    transition:transform var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget:hover {
    transform:translateY(-4px);
    border-color:var(--widget-edge);
    box-shadow:var(--phc-srv-shadow-md);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget:hover::after {
    transform:scale(1.12);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-w-success {
    --widget-accent:var(--phc-srv-green);
    --widget-soft:var(--phc-srv-green-soft);
    --widget-edge:#bbf7d0;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-w-primary {
    --widget-accent:var(--phc-srv-blue);
    --widget-soft:var(--phc-srv-blue-soft);
    --widget-edge:#bfdbfe;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-w-warning {
    --widget-accent:var(--phc-srv-orange);
    --widget-soft:var(--phc-srv-orange-soft);
    --widget-edge:#fed7aa;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-icon {
    position:relative;
    z-index:2;
    width:52px;
    height:52px;
    flex:0 0 52px;
    margin-left:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--widget-edge);
    border-radius:16px;
    color:var(--widget-accent);
    background:var(--widget-soft);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    font-size:1.2rem;

    transition:
        transform var(--phc-srv-transition),
        color var(--phc-srv-transition),
        background var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget:hover .phc-srv-icon {
    transform:rotate(-4deg) scale(1.04);
    color:#fff;
    background:var(--widget-accent);
    box-shadow:0 10px 22px rgba(15,23,42,.12);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-w-primary:hover .phc-srv-icon {
    background:var(--phc-srv-blue-gradient);
    border-color:var(--phc-srv-blue);
    box-shadow:0 10px 24px rgba(37,99,235,.22);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget .media-body {
    position:relative;
    z-index:2;
    min-width:0;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget .media-body p {
    color:var(--phc-srv-muted)!important;
    font-size:.72rem;
    font-weight:800;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget .media-body h4 {
    color:var(--phc-srv-text)!important;
    font-size:1.45rem;
    line-height:1.25;
    font-weight:900!important;
    letter-spacing:-.02em;
}




/* ===== Main manager ===== */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager {
    position:relative;
    overflow:hidden;
    margin-top:20px;
    padding:0;

    border:1px solid var(--phc-srv-border);
    border-radius:var(--phc-srv-radius-xl);
    background:#fff;
    box-shadow:var(--phc-srv-shadow-panel);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:1px;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.32),transparent);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-header {
    margin:0;
    padding:20px 22px;
    gap:15px;

    border-bottom:1px solid var(--phc-srv-divider);
    background:linear-gradient(180deg,#fff,#fbfcfe);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-header > div:first-child {
    position:relative;
    padding-right:54px;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-header > div:first-child::before {
    content:"\f571";
    position:absolute;
    top:50%;
    right:0;
    width:42px;
    height:42px;
    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #bfdbfe;
    border-radius:13px;
    color:#fff;
    background:var(--phc-srv-blue-gradient);
    box-shadow:0 8px 20px rgba(37,99,235,.20);

    font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";
    font-weight:900;
    font-size:.9rem;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-header h5 {
    margin-bottom:4px!important;
    color:var(--phc-srv-text)!important;
    font-size:.95rem;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-header p {
    color:var(--phc-srv-muted)!important;
    font-size:.64rem!important;
    line-height:1.7;
}

/* ===== Search ===== */
:where(html[data-hp-page="clientareainvoices"]) .phc-search-container {
    position:relative;
    width:100%;
    max-width:360px;
    margin:0;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-search-input {
    width:100%;
    height:46px;
    padding:0 44px 0 15px;

    outline:none;
    border:1px solid var(--phc-srv-border);
    border-radius:12px;
    background:#f8fafc;
    color:var(--phc-srv-text);

    font-family:inherit;
    font-size:.78rem;

    transition:
        background-color var(--phc-srv-transition),
        border-color var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-search-input::placeholder {
    color:var(--phc-srv-muted-2);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-search-input:hover {
    background:#fff;
    border-color:#cbd5e1;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-search-input:focus {
    background:#fff;
    border-color:var(--phc-srv-blue);
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-search-icon {
    position:absolute;
    top:50%;
    right:15px;
    z-index:2;
    transform:translateY(-50%);
    color:var(--phc-srv-muted-2);
    font-size:.9rem;
    pointer-events:none;
    transition:color var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-search-container:focus-within .phc-search-icon {
    color:var(--phc-srv-blue);
}

/* ===== Optional action buttons ===== */
:where(html[data-hp-page="clientareainvoices"]) .phc-btn-action {
    min-height:42px;
    padding:0 15px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;

    border:0;
    border-radius:11px;
    color:#fff!important;
    text-decoration:none!important;

    font-size:.72rem;
    font-weight:900;

    transition:
        transform var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-btn-masspay {
    background:linear-gradient(135deg,#34d399,#059669);
    box-shadow:0 8px 18px -9px rgba(5,150,105,.75);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-btn-addfunds {
    background:var(--phc-srv-blue-gradient);
    box-shadow:0 8px 18px -9px rgba(37,99,235,.82);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-btn-action:hover {
    transform:translateY(-1px);
    color:#fff!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-btn-masspay:hover {
    box-shadow:0 12px 22px -9px rgba(5,150,105,.78);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-btn-addfunds:hover {
    box-shadow:0 12px 22px -9px rgba(37,99,235,.88);
}

/* ===== Table ===== */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .table-responsive {
    padding:14px 18px 6px;
    overflow-x:auto;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table {
    width:100%!important;
    margin:0!important;
    border-collapse:separate!important;
    border-spacing:0 9px!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table thead th {
    padding:8px 12px 9px;
    border:0!important;
    color:var(--phc-srv-muted-2)!important;
    background:transparent!important;

    font-size:.61rem;
    font-weight:800;
    white-space:nowrap;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr {
    transition:filter var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
    padding:14px 12px!important;
    vertical-align:middle;
    border-top:1px solid #e8edf4!important;
    border-bottom:1px solid #e8edf4!important;
    background:#fbfcfe;

    color:var(--phc-srv-text-2);
    font-size:.72rem;
    line-height:1.65;

    transition:
        background-color var(--phc-srv-transition),
        border-color var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:first-child {
    border-right:1px solid #e8edf4!important;
    border-radius:0 13px 13px 0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:last-child {
    border-left:1px solid #e8edf4!important;
    border-radius:13px 0 0 13px!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr:hover td {
    background:#fff;
    border-color:#cfe0ff!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr:hover td:first-child {
    box-shadow:inset -3px 0 0 var(--phc-srv-blue);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table strong.text-dark {
    color:var(--phc-srv-text)!important;
    font-weight:850!important;
    font-variant-numeric:tabular-nums;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table .text-muted {
    color:var(--phc-srv-muted)!important;
}

/* ===== Invoice status ===== */
:where(html[data-hp-page="clientareainvoices"]) .status-badge {
    min-width:78px;
    min-height:28px;
    padding:0 10px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid #dbe2ea;
    border-radius:8px;
    color:#475569;
    background:#f8fafc;

    font-size:.60rem;
    font-weight:900;
    line-height:1;
}

:where(html[data-hp-page="clientareainvoices"]) .status-badge::before {
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:currentColor;
}

:where(html[data-hp-page="clientareainvoices"]) .status-paid {
    color:#047857!important;
    background:#ecfdf5!important;
    border-color:#a7f3d0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .status-unpaid,
:where(html[data-hp-page="clientareainvoices"]) .status-overdue {
    color:#b45309!important;
    background:#fffbeb!important;
    border-color:#fde68a!important;
}

:where(html[data-hp-page="clientareainvoices"]) .status-cancelled,
:where(html[data-hp-page="clientareainvoices"]) .status-collections {
    color:#b91c1c!important;
    background:#fef2f2!important;
    border-color:#fecaca!important;
}

:where(html[data-hp-page="clientareainvoices"]) .status-refunded {
    color:#475569!important;
    background:#f1f5f9!important;
    border-color:#cbd5e1!important;
}

:where(html[data-hp-page="clientareainvoices"]) .status-payment-pending,
:where(html[data-hp-page="clientareainvoices"]) .status-draft {
    color:#1d4ed8!important;
    background:#eff6ff!important;
    border-color:#bfdbfe!important;
}

/* ===== Manage button ===== */

/* ===== DataTables controls ===== */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper {
    color:var(--phc-srv-muted);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_info {
    padding:8px 20px 18px!important;
    color:var(--phc-srv-muted)!important;
    font-size:.64rem;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate {
    padding:6px 18px 16px!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button {
    min-width:34px!important;
    height:34px!important;
    margin:0 2px!important;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;

    border:1px solid var(--phc-srv-border)!important;
    border-radius:9px!important;
    color:var(--phc-srv-text-2)!important;
    background:#fff!important;
    box-shadow:none!important;

    font-size:.65rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button:hover {
    color:var(--phc-srv-blue)!important;
    border-color:#bfdbfe!important;
    background:#f8fbff!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.current,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.current:hover {
    color:#fff!important;
    border-color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-gradient)!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length select {
    border:1px solid var(--phc-srv-border);
    border-radius:8px;
    background:#fff;
    color:var(--phc-srv-text-2);
}

/* ===== Accessibility ===== */
:where(html[data-hp-page="clientareainvoices"]) .phc-search-input:focus-visible,
:where(html[data-hp-page="clientareainvoices"]) .phc-btn-action:focus-visible{
    outline:0;
    box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

/* ===== Responsive ===== */
@media(max-width:991px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-header {
        padding:18px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-search-container {
        max-width:100%;
        margin-top:12px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-header > div:first-child {
        width:100%;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .table-responsive {
        padding:12px;
        overflow:visible;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table {
        display:block;
        border-spacing:0!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table thead {
        display:none!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody {
        display:block;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr {
        display:block;
        margin-bottom:12px;
        padding:6px 14px 12px;

        overflow:hidden;
        border:1px solid var(--phc-srv-border);
        border-radius:15px;
        background:#fff;
        box-shadow:0 5px 16px rgba(15,23,42,.035);
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr:hover {
        border-color:#cfe0ff;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
        min-height:43px;
        padding:10px 0!important;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        border:0!important;
        border-bottom:1px dashed #e5eaf1!important;
        border-radius:0!important;
        background:transparent!important;

        text-align:left!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr:hover td:first-child {
        box-shadow:none;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td::before {
        content:attr(data-label);
        color:var(--phc-srv-muted-2);
        font-size:.61rem;
        font-weight:800;
        text-align:right;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:first-child {
        min-height:auto;
        margin:0 -14px 3px;
        padding:13px 14px!important;

        display:block;
        border-bottom:1px solid var(--phc-srv-divider)!important;
        background:#f8fafc!important;
        text-align:right!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:first-child::before,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:last-child::before {
        display:none;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:last-child {
        padding:12px 0 0!important;
        border-bottom:0!important;
        justify-content:center;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-btn-action {
        width:100%;
        margin:0 0 7px!important;
    }
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget {
        min-height:116px;
        padding:16px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-icon {
        width:46px;
        height:46px;
        flex-basis:46px;
        border-radius:14px;
        font-size:1.05rem;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget .media-body h4 {
        font-size:1.25rem;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager {
        margin-top:12px;
        border-radius:18px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-header {
        padding:16px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-header > div:first-child {
        padding-right:49px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-header > div:first-child::before {
        width:38px;
        height:38px;
        border-radius:12px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-search-input {
        height:44px;
        font-size:.73rem;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .table-responsive {
        padding:10px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr {
        border-radius:14px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_info,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate {
        width:100%;
        float:none!important;
        text-align:center!important;
    }
}



/* =========================================================
   INVOICES LAYOUT V2
   Real spacing + clean DataTables footer
   ========================================================= */

/*
 * DataTables/Bootstrap creates .row elements with negative margins.
 * Resetting them is necessary so the invoice cards can have real,
 * visible horizontal space from the main panel.
 */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .table-responsive {
    padding:0!important;
    overflow-x:auto;
    overflow-y:visible;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper {
    width:100%;
    padding:0;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row {
    margin-right:0!important;
    margin-left:0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row > [class*="col-"] {
    padding-right:0!important;
    padding-left:0!important;
}

/* جدول و ردیف‌ها دقیقاً 22px از دو طرف پنل فاصله دارند */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager table.phc-srv-table {
    width:calc(100% - 44px)!important;
    margin:9px 22px 8px!important;
    border-collapse:separate!important;
    border-spacing:0 10px!important;
}

/* هدر جدول با خود کارت‌ها هم‌راستا می‌شود */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table thead th {
    padding:7px 16px 8px!important;
    color:#94a3b8!important;
    font-size:.60rem!important;
    font-weight:850!important;
    line-height:1.4!important;
    vertical-align:middle!important;
}

/* کارت فاکتور */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
    height:62px;
    padding:12px 16px!important;

    border-top:1px solid #e4eaf2!important;
    border-bottom:1px solid #e4eaf2!important;

    background:#fff!important;
    color:var(--phc-srv-text-2);

    vertical-align:middle!important;
    transition:
        background-color var(--phc-srv-transition),
        border-color var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:first-child {
    border-right:1px solid #e4eaf2!important;
    border-radius:0 15px 15px 0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:last-child {
    border-left:1px solid #e4eaf2!important;
    border-radius:15px 0 0 15px!important;
}

/* hover یک‌دست؛ بدون شکستن سایه بین سلول‌ها */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr:hover td {
    background:#fbfdff!important;
    border-top-color:#c9dcff!important;
    border-bottom-color:#c9dcff!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr:hover td:first-child {
    border-right-color:#c9dcff!important;
    box-shadow:inset -3px 0 0 var(--phc-srv-blue)!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr:hover td:last-child {
    border-left-color:#c9dcff!important;
}

/* ===== DataTables bottom area ===== */

/* نوار پایین از خود جدول جداست و به قاب پنل نمی‌چسبد */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row:last-child {
    min-height:72px;
    margin-top:6px!important;
    padding:13px 22px 17px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;

    border-top:1px solid var(--phc-srv-divider);
    background:linear-gradient(180deg,#fcfdff 0%,#f8fafc 100%);
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row:last-child > [class*="col-"] {
    width:auto!important;
    max-width:none!important;
    flex:0 0 auto!important;
    padding:0!important;
}

/* اطلاعات تعداد نتایج */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_info {
    margin:0!important;
    padding:0!important;
    color:var(--phc-srv-muted)!important;
    font-size:.62rem!important;
    line-height:40px!important;
}

/* تعداد نمایش */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length {
    margin:0!important;
    padding:0!important;
    color:var(--phc-srv-muted)!important;
    font-size:.62rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length label {
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:var(--phc-srv-muted)!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length select {
    min-width:70px!important;
    width:70px!important;
    height:40px!important;
    margin:0!important;
    padding:0 10px!important;

    border:1px solid #dce4ee!important;
    border-radius:10px!important;
    outline:0!important;

    color:var(--phc-srv-text-2)!important;
    background:#fff!important;
    box-shadow:0 2px 7px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.68rem!important;
}

/* Pagination */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate {
    float:none!important;
    margin:0!important;
    padding:0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate ul.pagination {
    margin:0!important;
    padding:5px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;

    border:1px solid #e2e8f0!important;
    border-radius:13px!important;
    background:#f4f7fb!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}

/* li itself must never look like a button */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button {
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;

    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

/* Bootstrap page links */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item .page-link {
    min-width:36px!important;
    height:36px!important;
    margin:0!important;
    padding:0 10px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:0!important;
    border-radius:9px!important;

    color:#475569!important;
    background:transparent!important;
    box-shadow:none!important;

    font-family:inherit!important;
    font-size:.65rem!important;
    font-weight:850!important;
    line-height:1!important;
    text-decoration:none!important;

    transition:
        color var(--phc-srv-transition),
        background var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition),
        transform var(--phc-srv-transition);
}

/* DataTables non-Bootstrap fallback */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > span > .paginate_button {
    min-width:36px!important;
    height:36px!important;
    padding:0 10px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:0!important;
    border-radius:9px!important;
    color:#475569!important;
    background:transparent!important;

    font-size:.65rem!important;
    font-weight:850!important;
    line-height:1!important;
}

/* hover */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > .paginate_button:not(.current):not(.disabled):hover,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > span > .paginate_button:not(.current):not(.disabled):hover {
    transform:translateY(-1px)!important;
    color:var(--phc-srv-blue)!important;
    background:#fff!important;
    box-shadow:0 4px 10px rgba(37,99,235,.08)!important;
}

/* active page */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.active .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.current,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.current:hover {
    color:#fff!important;
    background:var(--phc-srv-blue-gradient)!important;
    box-shadow:0 7px 15px rgba(37,99,235,.22)!important;
}

/* Previous / Next are wider text buttons */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.next .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.previous,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.next {
    min-width:62px!important;
    padding:0 13px!important;
}

/* disabled */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.disabled .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.disabled,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.disabled:hover {
    opacity:.38!important;
    cursor:default!important;
    color:#94a3b8!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
}

/* remove Bootstrap focus ring but keep our own */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-link:focus {
    outline:0!important;
    box-shadow:0 0 0 3px rgba(37,99,235,.10)!important;
}

/* ===== Responsive ===== */
@media(max-width:991px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager table.phc-srv-table {
        width:calc(100% - 28px)!important;
        margin:12px 14px 8px!important;
        display:block;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody {
        display:block;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody tr {
        margin-bottom:12px!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row:last-child {
        min-height:auto;
        padding:13px 14px 16px!important;
        flex-direction:column!important;
        align-items:stretch!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row:last-child > [class*="col-"] {
        width:100%!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate ul.pagination {
        width:max-content;
        max-width:100%;
        margin:0 auto!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length label {
        justify-content:center!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_info {
        text-align:center!important;
        line-height:1.7!important;
    }
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager table.phc-srv-table {
        width:calc(100% - 20px)!important;
        margin:10px!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate ul.pagination {
        gap:3px!important;
        padding:4px!important;
        border-radius:11px!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > span > .paginate_button {
        min-width:32px!important;
        height:32px!important;
        padding:0 8px!important;
        border-radius:8px!important;
        font-size:.60rem!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.next .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.previous,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.next {
        min-width:50px!important;
        padding:0 9px!important;
    }
}


/* =========================================================
   COMPACT INVOICE ROWS + PAGINATION V3
   ========================================================= */

/* کارت‌های فاکتور جمع‌وجورتر */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager table.phc-srv-table {
    border-spacing:0 7px!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
    height:50px!important;
    padding:8px 14px!important;
    font-size:.69rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:first-child {
    border-radius:0 13px 13px 0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td:last-child {
    border-radius:13px 0 0 13px!important;
}

:where(html[data-hp-page="clientareainvoices"]) .status-badge {
    min-height:26px!important;
    padding:0 9px!important;
    font-size:.58rem!important;
}

/* =========================================================
   Pagination redesign
   ========================================================= */

/* footer دیگر نوار بزرگ و رنگی نباشد */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row:last-child {
    min-height:0!important;
    margin:8px 0 0!important;
    padding:12px 22px 16px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:wrap!important;
    gap:12px!important;

    border-top:1px solid var(--phc-srv-divider)!important;
    background:#fff!important;
}

/* ستون‌های footer */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row:last-child > [class*="col-"] {
    width:auto!important;
    max-width:none!important;
    flex:0 0 auto!important;
    padding:0!important;
    margin:0!important;
}

/* pagination فقط به اندازه محتوا */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate {
    width:auto!important;
    float:none!important;
    margin:0!important;
    padding:0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate ul.pagination {
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:6px!important;

    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

/* خود li نباید box جدا بسازد */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button {
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

/* دکمه استاندارد */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item .page-link {
    min-width:36px!important;
    height:36px!important;
    padding:0 10px!important;
    margin:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:10px!important;

    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.64rem!important;
    font-weight:850!important;
    line-height:1!important;
    text-decoration:none!important;
}

/* fallback برای DataTables بدون Bootstrap */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > span > .paginate_button {
    min-width:36px!important;
    height:36px!important;
    padding:0 10px!important;
    margin:0 3px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:10px!important;

    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-size:.64rem!important;
    font-weight:850!important;
}

/* قبلی / بعدی */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.next .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.previous,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.next {
    min-width:58px!important;
    padding:0 13px!important;
}

/* active */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.active .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.current,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.current:hover {
    color:#fff!important;
    border-color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-gradient)!important;
    box-shadow:0 7px 15px rgba(37,99,235,.20)!important;
}

/* hover */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > .paginate_button:not(.current):not(.disabled):hover,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > span > .paginate_button:not(.current):not(.disabled):hover {
    color:var(--phc-srv-blue)!important;
    border-color:#bfdbfe!important;
    background:#f8fbff!important;
    box-shadow:0 5px 12px rgba(37,99,235,.07)!important;
    transform:translateY(-1px)!important;
}

/* disabled */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.disabled .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.disabled,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.disabled:hover {
    opacity:.38!important;
    color:#94a3b8!important;
    border-color:#e8edf3!important;
    background:#f8fafc!important;
    box-shadow:none!important;
    transform:none!important;
}

/* selector تعداد رکوردها */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length {
    width:auto!important;
    margin:0!important;
    padding:0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length label {
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:var(--phc-srv-muted)!important;
    font-size:.62rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length select {
    width:62px!important;
    min-width:62px!important;
    height:36px!important;
    margin:0!important;
    padding:0 8px!important;

    border:1px solid #dce4ee!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-size:.64rem!important;
}

/* info جمع‌وجور */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_info {
    width:auto!important;
    margin:0!important;
    padding:0!important;
    line-height:36px!important;
    font-size:.61rem!important;
}

/* موبایل */
@media(max-width:991px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
        height:auto!important;
        padding:9px 0!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_wrapper > .row:last-child {
        padding:12px 14px 15px!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate ul.pagination {
        justify-content:center!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_info {
        line-height:1.6!important;
        text-align:center!important;
    }
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > span > .paginate_button {
        min-width:32px!important;
        height:32px!important;
        padding:0 8px!important;
        font-size:.59rem!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item.next .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.previous,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button.next {
        min-width:48px!important;
        padding:0 9px!important;
    }
}


/* =========================================================
   DATATABLES FOOTER V4 — deterministic layout
   ========================================================= */

/* ردیف فاکتور کمی جمع‌وجورتر */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager table.phc-srv-table {
    border-spacing:0 6px!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
    height:46px!important;
    padding:6px 14px!important;
}

:where(html[data-hp-page="clientareainvoices"]) .status-badge {
    min-height:24px!important;
}

/* Footer اختصاصی */
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer {
    width:100%;
    min-height:62px;
    padding:11px 22px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    border-top:1px solid var(--phc-srv-divider);
    background:#fff;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer-meta {
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer-pages {
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

/* بعد از انتقال کنترل‌ها، استایل‌های grid قدیمی DataTables دخالت نکنند */
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_length,
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_info,
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate {
    float:none!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_length label {
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:var(--phc-srv-muted)!important;
    font-size:.61rem!important;
    white-space:nowrap;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_length select {
    width:58px!important;
    min-width:58px!important;
    height:34px!important;
    margin:0!important;
    padding:0 7px!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;
    outline:0!important;

    color:var(--phc-srv-text-2)!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.63rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_info {
    color:var(--phc-srv-muted)!important;
    font-size:.60rem!important;
    line-height:34px!important;
    white-space:nowrap;
}

/* pagination */
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate ul.pagination {
    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;

    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-item {
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-link {
    min-width:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0 9px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;

    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.62rem!important;
    font-weight:850!important;
    line-height:1!important;
    text-decoration:none!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-item.next .page-link {
    min-width:56px!important;
    padding:0 12px!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-item.active .page-link {
    color:#fff!important;
    border-color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-gradient)!important;
    box-shadow:0 7px 15px rgba(37,99,235,.20)!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    transform:translateY(-1px)!important;
    color:var(--phc-srv-blue)!important;
    border-color:#bfdbfe!important;
    background:#f8fbff!important;
    box-shadow:0 5px 12px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-item.disabled .page-link {
    opacity:.46!important;
    cursor:default!important;
    color:#94a3b8!important;
    border-color:#e5eaf1!important;
    background:#f8fafc!important;
    box-shadow:none!important;
}

/* DataTables بدون Bootstrap */
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate > span > .paginate_button {
    min-width:34px!important;
    height:34px!important;
    margin:0 2px!important;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;

    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-size:.62rem!important;
    font-weight:850!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .paginate_button.current {
    color:#fff!important;
    border-color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-gradient)!important;
}

/* ردیف‌های خالی Bootstrap که بعد از جابه‌جایی باقی می‌مانند */
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .phc-dt-empty-row {
    display:none!important;
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer {
        min-height:0;
        padding:10px 14px 13px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer-meta {
        width:100%;
        justify-content:center;
        gap:10px;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer-pages {
        width:100%;
        justify-content:center;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate ul.pagination {
        max-width:100%;
        flex-wrap:wrap!important;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_info {
        width:100%!important;
        text-align:center!important;
        line-height:1.6!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-link {
        min-width:31px!important;
        height:31px!important;
        padding:0 7px!important;
        font-size:.58rem!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-item.next .page-link {
        min-width:47px!important;
        padding:0 8px!important;
    }
}


/* =========================================================
   FONT SIZE RESTORE — ONLY TYPOGRAPHY SIZE
   هیچ ویژگی ظاهری دیگری تغییر نکرده است
   ========================================================= */

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget .media-body p {
    font-size:.90rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget .media-body h4 {
    font-size:1.50rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-header h5 {
    font-size:1.08rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-header p {
    font-size:.82rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-search-input {
    font-size:.90rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-btn-action {
    font-size:.82rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table thead th {
    font-size:.84rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
    font-size:.90rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .status-badge {
    font-size:.72rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_info,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length label {
    font-size:.72rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_length select {
    font-size:.72rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .paginate_button,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate .page-item .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-manager .dataTables_paginate > span > .paginate_button {
    font-size:.72rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_length label,
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_info {
    font-size:.72rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_length select {
    font-size:.72rem!important;
}

:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-link,
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate > span > .paginate_button {
    font-size:.72rem!important;
}

@media(max-width:991px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td::before {
        font-size:.74rem!important;
    }
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-search-input {
        font-size:.84rem!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
        font-size:.86rem!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td::before {
        font-size:.70rem!important;
    }

    :where(html[data-hp-page="clientareainvoices"]) .phc-dt-footer .dataTables_paginate .page-link {
        font-size:.68rem!important;
    }
}


@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareainvoices"]) .phc-srv-widget,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-icon,
:where(html[data-hp-page="clientareainvoices"]) .phc-search-input,
:where(html[data-hp-page="clientareainvoices"]) .phc-btn-action,
:where(html[data-hp-page="clientareainvoices"]) .phc-srv-table tbody td {
        transition:none!important;
    }
}

/* clientareaproductdetails.tpl */
.hp-service-overview,
.hp-service-sheet {
  min-width: 0;
  border: 1px solid var(--hp-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .89);
  box-shadow: var(--hp-card-shadow);
}

.hp-service-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px clamp(14px, 2.5vw, 28px);
  border-radius: 19px 19px 0 0;
  color: #f8fafc;
  background:
    linear-gradient(rgba(184, 206, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(184, 206, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(ellipse at top left, rgba(112, 93, 226, .25), transparent 58%),
    linear-gradient(148deg, #182749, #0b152d 70%, #121c3c);
}

.hp-service-identity {
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}

.hp-service-identity > div {
  min-width: 0;
}

.hp-service-symbol {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid rgba(173, 200, 255, .22);
  border-radius: 12px;
  color: #bfdbfe;
  background: rgba(96, 165, 250, .13);
}

.hp-service-identity p {
  margin: 0 0 3px;
  color: #c0cee5;
  font-size: .78rem;
}

.hp-service-identity h1 {
  margin: 0;
  color: inherit;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.hp-service-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid rgba(173, 200, 255, .23);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(148, 163, 184, .13);
  font-size: .75rem;
  font-weight: 650;
}

.hp-service-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.hp-service-state.is-active { color: #a7f3d0; }
.hp-service-state.is-pending { color: #fde68a; }
.hp-service-state.is-inactive { color: #fecdd3; }

.hp-service-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(235px, .57fr);
}

.hp-service-layout--billing { grid-template-columns: minmax(0, 1fr); }

.hp-service-main,
.hp-service-billing,
.hp-service-sheet {
  min-width: 0;
  padding: 16px clamp(14px, 2.1vw, 24px);
}

.hp-service-billing {
  border-inline-start: 1px solid var(--hp-line);
  background: rgba(240, 246, 255, .52);
  border-end-end-radius: 19px;
}

.hp-service-layout--billing .hp-service-billing {
  border-inline-start: 0;
  border-end-start-radius: 19px;
}

.hp-service-layout:not(:last-child) .hp-service-billing {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.hp-service-module {
  min-width: 0;
  padding: 16px clamp(14px, 2.1vw, 24px);
  border-top: 1px solid var(--hp-line);
}

.hp-service-section-title {
  margin: 0 0 8px;
  color: var(--hp-ink);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.6;
}

.hp-service-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0 0 4px;
  border-bottom: 1px solid var(--hp-line);
}

.hp-service-tabs .nav-link {
  padding: 4px 1px 9px;
  border-bottom: 2px solid transparent;
  color: var(--hp-muted);
  background: transparent;
  font-size: .79rem;
  font-weight: 650;
  line-height: 1.6;
}

.hp-service-tabs .nav-link:is(:hover, :focus-visible, .active) {
  color: var(--hp-primary-hover);
}

.hp-service-tabs .nav-link.active { border-bottom-color: var(--hp-primary); }

.hp-service-tab-content {
  min-width: 0;
  padding-top: 5px;
}

/* The shared usage table sits flush inside the details panel. */
.hp-service-tab-content #metrics > .phc-card {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hp-service-tab-content #metrics .phc-card-header {
  padding: 10px 0 !important;
  background: transparent !important;
}

.hp-service-tab-content #metrics .phc-card-header .phc-icon-box {
  display: none !important;
}

.hp-service-facts {
  display: grid;
  grid-template-columns: minmax(98px, .62fr) minmax(0, 1fr);
  margin: 0;
}

.hp-service-facts > :is(dt, dd) {
  min-width: 0;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--hp-line);
  font-size: .83rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.hp-service-facts dt {
  padding-inline-end: 8px;
  color: var(--hp-muted);
  font-weight: 500;
}

.hp-service-facts dd {
  color: var(--hp-ink);
  font-weight: 650;
  text-align: end;
}

.hp-service-facts dd.hp-service-price {
  color: var(--hp-primary-hover);
  font-weight: 750;
}

.hp-service-code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .94em;
}

.hp-service-multiline {
  display: inline-block;
  white-space: pre-line;
  text-align: left;
}

.hp-service-nameservers bdi { display: block; }

.hp-service-facts progress {
  display: block;
  width: min(145px, 100%);
  height: 7px;
  margin-block-start: 5px;
  margin-inline-start: auto;
  accent-color: var(--hp-primary);
}

.hp-service-actions {
  margin-top: 13px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.hp-service-cancel {
  color: #9f243d;
  font-size: .74rem;
  font-weight: 600;
}

.hp-service-cancel:hover { color: #881337; }

.hp-service-sheet { margin-top: 14px; }

.hp-service-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-service-list-row,
.hp-service-invoice-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  flex-wrap: wrap;
}

.hp-service-list-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--hp-line);
  overflow-wrap: anywhere;
}

.hp-service-list-row:last-child { border-bottom: 0; }

.hp-service-list-row h3 {
  margin: 0 0 4px;
  color: var(--hp-ink);
  font-size: .85rem;
  font-weight: 650;
}

.hp-service-list-row p {
  margin: 0;
  color: var(--hp-muted);
  font-size: .77rem;
}

.hp-service-password {
  max-width: 600px;
  margin-inline: auto;
}

@media (max-width: 767.98px) {
  .hp-service-layout { grid-template-columns: minmax(0, 1fr); }

  .hp-service-billing {
    border-inline-start: 0;
    border-top: 1px solid var(--hp-line);
    border-end-start-radius: 19px;
  }

  .hp-service-layout--billing .hp-service-billing { border-top: 0; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .col-lg-8 .hp-service-layout { grid-template-columns: minmax(0, 1fr); }

  .col-lg-8 .hp-service-billing {
    border-inline-start: 0;
    border-top: 1px solid var(--hp-line);
    border-end-start-radius: 19px;
  }

  .col-lg-8 .hp-service-layout--billing .hp-service-billing { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-service-tab-content > .tab-pane { transition: none; }
}


/* clientareaproducts.tpl */
:root:where(html[data-hp-page="clientareaproducts"]) {
    --srv-page:var(--hp-page);
    --srv-card:var(--hp-surface);
    --srv-soft:var(--hp-surface-soft);
    --srv-border:var(--hp-line);
    --srv-border-strong:#cbd5e1;
    --srv-divider:#edf1f6;

    --srv-text:var(--hp-ink);
    --srv-text-2:var(--hp-ink-secondary);
    --srv-muted:var(--hp-muted);
    --srv-muted-2:#94a3b8;

    --srv-blue:var(--hp-primary);
    --srv-blue-dark:var(--hp-primary-hover);
    --srv-blue-light:#60a5fa;
    --srv-blue-soft:var(--hp-primary-soft);
    --srv-blue-line:#bfdbfe;
    --srv-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --srv-green:#059669;
    --srv-green-soft:#ecfdf5;
    --srv-green-line:#a7f3d0;

    --srv-orange:#d97706;
    --srv-orange-soft:#fffbeb;
    --srv-orange-line:#fde68a;

    --srv-red:#dc2626;
    --srv-red-soft:#fef2f2;
    --srv-red-line:#fecaca;

    --srv-slate:#475569;
    --srv-slate-soft:#f1f5f9;

    --srv-radius-xl:24px;
    --srv-radius-lg:18px;
    --srv-radius-md:13px;

    --srv-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --srv-shadow-md:0 18px 42px rgba(15,23,42,.09),0 5px 15px rgba(15,23,42,.035);
    --srv-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --srv-transition:220ms cubic-bezier(.2,.8,.2,1);
}

/* search پیش‌فرض DataTables مخفی */
:where(html[data-hp-page="clientareaproducts"]) #servicesManager .dataTables_filter {
    display:none!important;
}

/* =========================================================
   Widgets
   ========================================================= */
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget {
    --widget-accent:var(--srv-blue);
    --widget-soft:var(--srv-blue-soft);
    --widget-line:var(--srv-blue-line);

    position:relative;
    min-height:132px;
    height:100%;
    overflow:hidden;
    padding:20px;

    display:flex;
    align-items:center;

    border:1px solid var(--srv-border);
    border-radius:var(--srv-radius-lg);
    background:linear-gradient(145deg,#fff 0%,#fff 68%,var(--widget-soft) 145%);
    box-shadow:var(--srv-shadow-sm);

    transition:
        transform var(--srv-transition),
        border-color var(--srv-transition),
        box-shadow var(--srv-transition);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget::before {
    content:"";
    position:absolute;
    top:0;
    right:18px;
    left:18px;
    height:3px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,var(--widget-accent),transparent);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget::after {
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    left:-72px;
    bottom:-100px;
    border-radius:50%;
    background:var(--widget-soft);
    opacity:.65;
    pointer-events:none;
    transition:transform var(--srv-transition);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget:hover {
    border-color:var(--widget-line);
    box-shadow:var(--srv-shadow-md);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget:hover::after {
    transform:scale(1.12);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-w-primary {
    --widget-accent:var(--srv-blue);
    --widget-soft:var(--srv-blue-soft);
    --widget-line:var(--srv-blue-line);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-w-success {
    --widget-accent:var(--srv-green);
    --widget-soft:var(--srv-green-soft);
    --widget-line:var(--srv-green-line);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-w-warning {
    --widget-accent:var(--srv-orange);
    --widget-soft:var(--srv-orange-soft);
    --widget-line:var(--srv-orange-line);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-icon {
    position:relative;
    z-index:2;
    width:52px;
    height:52px;
    flex:0 0 52px;
    margin-left:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--widget-line);
    border-radius:16px;

    color:var(--widget-accent);
    background:var(--widget-soft);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);

    font-size:1.14rem;

    transition:
        transform var(--srv-transition),
        color var(--srv-transition),
        background var(--srv-transition),
        box-shadow var(--srv-transition);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget:hover .soft-srv-icon {
    transform:rotate(-4deg) scale(1.04);
    color:#fff;
    background:var(--widget-accent);
    box-shadow:0 10px 22px rgba(15,23,42,.12);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-w-primary:hover .soft-srv-icon {
    background:var(--srv-gradient);
    border-color:var(--srv-blue);
    box-shadow:0 10px 24px rgba(37,99,235,.22);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget .media-body {
    position:relative;
    z-index:2;
    min-width:0;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget .media-body p {
    margin:0 0 4px!important;
    color:var(--srv-muted)!important;
    font-size:.86rem!important;
    line-height:1.7;
    font-weight:700;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget .media-body h4 {
    margin:0!important;
    color:var(--srv-text)!important;
    font-size:1.45rem!important;
    line-height:1.4;
    font-weight:900!important;
}






/* =========================================================
   Main Manager
   ========================================================= */
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager {
    position:relative;
    overflow:hidden;
    margin-top:20px;
    padding:0;

    border:1px solid var(--srv-border);
    border-radius:var(--srv-radius-xl);
    background:#fff;
    box-shadow:var(--srv-shadow-panel);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:1px;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.32),transparent);
}

/* Header */
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-header {
    margin:0;
    padding:20px 22px;
    gap:15px;

    border-bottom:1px solid var(--srv-divider);
    background:linear-gradient(180deg,#fff,#fbfcfe);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-header > div:first-child {
    position:relative;
    padding-right:54px;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-header > div:first-child::before {
    content:"\f1b2";
    position:absolute;
    top:50%;
    right:0;
    width:42px;
    height:42px;
    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--srv-blue-line);
    border-radius:13px;
    color:#fff;
    background:var(--srv-gradient);
    box-shadow:0 8px 20px rgba(37,99,235,.20);

    font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";
    font-weight:900;
    font-size:.88rem;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-header h5 {
    margin-bottom:4px!important;
    color:var(--srv-text)!important;
    font-size:1.08rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-header p {
    margin:0!important;
    color:var(--srv-muted)!important;
    font-size:.82rem!important;
    line-height:1.7;
}

/* Search */
:where(html[data-hp-page="clientareaproducts"]) .soft-search-container {
    position:relative;
    width:100%;
    max-width:360px;
    margin:0;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-search-input {
    width:100%;
    height:46px;
    padding:0 44px 0 15px;

    outline:none;
    border:1px solid var(--srv-border);
    border-radius:12px;

    background:#f8fafc;
    color:var(--srv-text);

    font-family:inherit;
    font-size:.90rem!important;

    transition:
        background-color var(--srv-transition),
        border-color var(--srv-transition),
        box-shadow var(--srv-transition);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-search-input::placeholder {
    color:var(--srv-muted-2);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-search-input:hover {
    background:#fff;
    border-color:#cbd5e1;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-search-input:focus {
    background:#fff;
    border-color:var(--srv-blue);
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-search-icon {
    position:absolute;
    top:50%;
    right:15px;
    z-index:2;
    transform:translateY(-50%);

    color:var(--srv-muted-2);
    font-size:.9rem;
    pointer-events:none;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-search-container:focus-within .soft-search-icon {
    color:var(--srv-blue);
}

/* =========================================================
   Table
   ========================================================= */
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager .table-responsive {
    width:100%!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    box-sizing:border-box!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager .dataTables_wrapper,
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager .dataTables_wrapper > .row,
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager .dataTables_wrapper > .row > [class*="col-"] {
    box-sizing:border-box!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager .dataTables_wrapper {
    width:100%;
    padding:0;
    color:var(--srv-muted);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager .dataTables_wrapper > .row {
    margin-right:0!important;
    margin-left:0!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager .dataTables_wrapper > .row > [class*="col-"] {
    padding-right:0!important;
    padding-left:0!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager table.soft-srv-table {
    width:calc(100% - 44px)!important;
    max-width:calc(100% - 44px)!important;
    margin:9px 22px 8px!important;

    border-collapse:separate!important;
    border-spacing:0 6px!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table thead th {
    padding:7px 16px 8px!important;

    border:0!important;

    color:#94a3b8!important;
    background:transparent!important;

    font-size:.84rem!important;
    font-weight:850!important;
    line-height:1.4!important;
    vertical-align:middle!important;
    white-space:nowrap;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td {
    height:50px!important;
    padding:8px 14px!important;

    vertical-align:middle!important;

    border-top:1px solid #e4eaf2!important;
    border-bottom:1px solid #e4eaf2!important;

    color:var(--srv-text-2);
    background:#fff!important;

    font-size:.90rem!important;
    line-height:1.55!important;

    transition:
        background-color var(--srv-transition),
        border-color var(--srv-transition),
        box-shadow var(--srv-transition);
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td:first-child {
    border-right:1px solid #e4eaf2!important;
    border-radius:0 13px 13px 0!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td:last-child {
    border-left:1px solid #e4eaf2!important;
    border-radius:13px 0 0 13px!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody tr:hover td {
    background:#fbfdff!important;
    border-top-color:#c9dcff!important;
    border-bottom-color:#c9dcff!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody tr:hover td:first-child {
    border-right-color:#c9dcff!important;
    box-shadow:inset -3px 0 0 var(--srv-blue)!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody tr:hover td:last-child {
    border-left-color:#c9dcff!important;
}

/* product/domain */
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table strong.text-dark {
    color:var(--srv-text)!important;
    font-size:.91rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table a.text-primary {
    color:var(--srv-blue)!important;
    font-size:.76rem!important;
    font-weight:700;
    text-decoration:none!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table a.text-primary:hover {
    color:var(--srv-blue-dark)!important;
    text-decoration:underline!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table .text-muted {
    color:var(--srv-muted)!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table small.text-muted {
    font-size:.74rem!important;
}

/* status */
:where(html[data-hp-page="clientareaproducts"]) .status-badge {
    min-width:82px;
    min-height:27px;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid #dbe2ea;
    border-radius:8px;

    color:#475569;
    background:#f8fafc;

    font-size:.72rem!important;
    line-height:1;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareaproducts"]) .status-badge::before {
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:currentColor;
}

:where(html[data-hp-page="clientareaproducts"]) .status-active,
:where(html[data-hp-page="clientareaproducts"]) .status-completed {
    color:#047857!important;
    border-color:var(--srv-green-line)!important;
    background:var(--srv-green-soft)!important;
}

:where(html[data-hp-page="clientareaproducts"]) .status-pending,
:where(html[data-hp-page="clientareaproducts"]) .status-pending-transfer,
:where(html[data-hp-page="clientareaproducts"]) .status-awaiting-setup {
    color:#b45309!important;
    border-color:var(--srv-orange-line)!important;
    background:var(--srv-orange-soft)!important;
}

:where(html[data-hp-page="clientareaproducts"]) .status-suspended,
:where(html[data-hp-page="clientareaproducts"]) .status-terminated,
:where(html[data-hp-page="clientareaproducts"]) .status-cancelled,
:where(html[data-hp-page="clientareaproducts"]) .status-canceled,
:where(html[data-hp-page="clientareaproducts"]) .status-fraud {
    color:#b91c1c!important;
    border-color:var(--srv-red-line)!important;
    background:var(--srv-red-soft)!important;
}

:where(html[data-hp-page="clientareaproducts"]) .status-expired {
    color:#475569!important;
    border-color:#cbd5e1!important;
    background:#f1f5f9!important;
}

/* view button */

/* =========================================================
   Dedicated DataTables Footer
   ========================================================= */
:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer {
    width:100%;
    min-height:62px;
    padding:11px 22px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    border-top:1px solid var(--srv-divider);
    background:#fff;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer-meta {
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer-pages {
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_length,
:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_info,
:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate {
    float:none!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_length label {
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;

    color:var(--srv-muted)!important;
    font-size:.72rem!important;
    white-space:nowrap;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_length select {
    width:58px!important;
    min-width:58px!important;
    height:34px!important;
    margin:0!important;
    padding:0 7px!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;

    color:var(--srv-text-2)!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.72rem!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_info {
    color:var(--srv-muted)!important;
    font-size:.72rem!important;
    line-height:34px!important;
    white-space:nowrap;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate ul.pagination {
    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;

    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-item {
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-link {
    min-width:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0 9px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;

    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.72rem!important;
    font-weight:850!important;
    line-height:1!important;
    text-decoration:none!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-item.next .page-link {
    min-width:56px!important;
    padding:0 12px!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-item.active .page-link {
    color:#fff!important;
    border-color:var(--srv-blue)!important;
    background:var(--srv-gradient)!important;
    box-shadow:0 7px 15px rgba(37,99,235,.20)!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    transform:translateY(-1px)!important;
    color:var(--srv-blue)!important;
    border-color:var(--srv-blue-line)!important;
    background:#f8fbff!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-item.disabled .page-link {
    opacity:.46!important;
    color:#94a3b8!important;
    border-color:#e5eaf1!important;
    background:#f8fafc!important;
    box-shadow:none!important;
}

/* fallback */
:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate > span > .paginate_button {
    min-width:34px!important;
    height:34px!important;
    margin:0 2px!important;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;

    color:#475569!important;
    background:#fff!important;

    font-size:.72rem!important;
    font-weight:850!important;
}

:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .paginate_button.current {
    color:#fff!important;
    border-color:var(--srv-blue)!important;
    background:var(--srv-gradient)!important;
}

:where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager .phc-dt-empty-row {
    display:none!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-header {
        padding:18px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-header > div:first-child {
        width:100%;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-search-container {
        max-width:100%;
        margin-top:12px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager table.soft-srv-table {
        width:calc(100% - 28px)!important;
        max-width:calc(100% - 28px)!important;
        margin:12px 14px 8px!important;
        display:block;
        border-spacing:0!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table thead {
        display:none!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody {
        display:block;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody tr {
        display:block;
        margin-bottom:12px;
        padding:6px 14px 12px;

        overflow:hidden;

        border:1px solid var(--srv-border);
        border-radius:15px;
        background:#fff;
        box-shadow:0 5px 16px rgba(15,23,42,.035);
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td {
        width:100%;
        height:auto!important;
        min-height:43px;
        padding:9px 0!important;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        border:0!important;
        border-bottom:1px dashed #e5eaf1!important;
        border-radius:0!important;
        background:transparent!important;

        text-align:left!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td::before {
        content:attr(data-label);
        color:var(--srv-muted-2);
        font-size:.74rem!important;
        font-weight:800;
        text-align:right;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td:first-child {
        min-height:auto;
        margin:0 -14px 3px;
        padding:13px 14px!important;

        display:block;

        border-bottom:1px solid var(--srv-divider)!important;
        background:#f8fafc!important;
        text-align:right!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td:first-child::before,
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td:last-child::before {
        display:none;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td:last-child {
        padding:12px 0 0!important;
        border-bottom:0!important;
        justify-content:center;
    }

    :where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer {
        min-height:0;
        padding:10px 14px 13px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    :where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer-meta {
        width:100%;
        justify-content:center;
        gap:10px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer-pages {
        width:100%;
        justify-content:center;
    }

    :where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate ul.pagination {
        max-width:100%;
        flex-wrap:wrap!important;
    }
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget {
        min-height:116px;
        padding:16px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-icon {
        width:46px;
        height:46px;
        flex-basis:46px;
        border-radius:14px;
        font-size:1.05rem;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget .media-body h4 {
        font-size:1.28rem!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager {
        margin-top:12px;
        border-radius:18px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-header {
        padding:16px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-header > div:first-child {
        padding-right:49px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-header > div:first-child::before {
        width:38px;
        height:38px;
        border-radius:12px;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-search-input {
        height:44px;
        font-size:.84rem!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-manager table.soft-srv-table {
        width:calc(100% - 20px)!important;
        max-width:calc(100% - 20px)!important;
        margin:10px!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td {
        font-size:.86rem!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td::before {
        font-size:.70rem!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_info {
        width:100%!important;
        text-align:center!important;
        line-height:1.6!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-link {
        min-width:31px!important;
        height:31px!important;
        padding:0 7px!important;
        font-size:.68rem!important;
    }

    :where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="clientareaproducts"]) .phc-dt-footer .dataTables_paginate .page-item.next .page-link {
        min-width:47px!important;
        padding:0 8px!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareaproducts"]) .soft-srv-widget,
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-icon,
:where(html[data-hp-page="clientareaproducts"]) .soft-search-input,
:where(html[data-hp-page="clientareaproducts"]) .soft-srv-table tbody td {
        transition:none!important;
    }
}

/* clientareasecurity.tpl */
:root:where(html[data-hp-page="clientareasecurity"]) {
    --sso-card:var(--hp-surface);
    --sso-soft:var(--hp-surface-soft);
    --sso-border:var(--hp-line);
    --sso-border-2:#d6e1ee;

    --sso-text:var(--hp-ink);
    --sso-text-2:var(--hp-ink-secondary);
    --sso-muted:var(--hp-muted);
    --sso-muted-2:#94a3b8;

    --sso-blue:var(--hp-primary);
    --sso-blue-dark:var(--hp-primary-hover);
    --sso-blue-light:#60a5fa;
    --sso-blue-soft:var(--hp-primary-soft);
    --sso-blue-line:#bfdbfe;
    --sso-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 55%,#1d4ed8 100%);

    --sso-green:#059669;
    --sso-green-soft:#ecfdf5;
    --sso-green-line:#a7f3d0;

    --sso-red:#dc2626;
    --sso-red-soft:#fef2f2;
    --sso-red-line:#fecaca;

    --sso-radius-xl:24px;
    --sso-radius-lg:17px;
    --sso-radius-md:12px;

    --sso-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --sso-shadow-md:0 18px 44px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);

    --sso-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-card,
:where(html[data-hp-page="clientareasecurity"]) .phc-sso-card * {
    box-sizing:border-box;
}

/* =========================================================
   Main card
   ========================================================= */
:where(html[data-hp-page="clientareasecurity"]) .phc-sso-card {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;

    border:1px solid var(--sso-border)!important;
    border-radius:var(--sso-radius-xl)!important;

    background:#fff!important;
    box-shadow:var(--sso-shadow-sm)!important;
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--sso-gradient);
}

/* =========================================================
   Header
   ========================================================= */
:where(html[data-hp-page="clientareasecurity"]) .phc-sso-header {
    position:relative;
    min-height:92px;
    padding:18px 20px!important;

    display:flex;
    align-items:center;
    gap:13px!important;

    border:0!important;
    border-bottom:1px solid var(--sso-border)!important;

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.11),transparent 30%),
        linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-icon {
    position:relative;

    width:50px!important;
    height:50px!important;
    flex:0 0 50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--sso-blue-line)!important;
    border-radius:14px!important;

    color:#fff!important;
    background:var(--sso-gradient)!important;

    box-shadow:0 10px 22px rgba(37,99,235,.18)!important;

    font-size:.95rem!important;
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:9px;
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-header h3 {
    margin:0 0 3px!important;

    color:var(--sso-text)!important;
    font-size:1.02rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-header p {
    margin:0!important;
    max-width:620px;

    color:var(--sso-muted)!important;
    font-size:.79rem!important;
    line-height:1.75;
    font-weight:600;
}

/* =========================================================
   Body
   ========================================================= */
:where(html[data-hp-page="clientareasecurity"]) .phc-sso-body {
    padding:16px!important;
}

/* WHMCS alert */
:where(html[data-hp-page="clientareasecurity"]) .phc-sso-body .alert {
    margin-bottom:14px!important;
    padding:10px 12px!important;

    border:1px solid var(--sso-green-line)!important;
    border-radius:12px!important;

    color:#065f46!important;
    background:linear-gradient(135deg,#ffffff 0%,var(--sso-green-soft) 150%)!important;

    box-shadow:none!important;

    font-size:.78rem!important;
    line-height:1.8;
}

/* =========================================================
   Setting panel
   ========================================================= */
:where(html[data-hp-page="clientareasecurity"]) .phc-sso-setting {
    position:relative;
    min-height:92px;
    padding:14px 16px!important;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    overflow:hidden;

    border:1px solid var(--sso-border)!important;
    border-radius:15px!important;

    background:
        radial-gradient(circle at 100% 0%,rgba(37,99,235,.055),transparent 30%),
        linear-gradient(135deg,#ffffff 0%,#f8fbff 100%)!important;

    box-shadow:0 8px 20px rgba(15,23,42,.035)!important;

    transition:
        transform var(--sso-transition),
        border-color var(--sso-transition),
        box-shadow var(--sso-transition);
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-setting::before {
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;
    background:var(--sso-gradient);
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-setting:hover {
    transform:translateY(-1px);
    border-color:var(--sso-blue-line)!important;
    box-shadow:0 12px 26px rgba(37,99,235,.06)!important;
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-setting-content {
    min-width:0;
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-setting-title {
    margin:0 0 6px!important;

    color:var(--sso-text)!important;
    font-size:.88rem!important;
    line-height:1.5;
    font-weight:900!important;
}

/* =========================================================
   Status badges
   ========================================================= */
:where(html[data-hp-page="clientareasecurity"]) #ssoStatusTextEnabled,
:where(html[data-hp-page="clientareasecurity"]) #ssoStatusTextDisabled {
    min-height:29px;
    padding:0 9px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid transparent;
    border-radius:9px;

    font-size:.70rem!important;
    line-height:1;
    font-weight:900!important;
}

:where(html[data-hp-page="clientareasecurity"]) #ssoStatusTextEnabled {
    color:var(--sso-green)!important;
    border-color:var(--sso-green-line)!important;
    background:var(--sso-green-soft)!important;
}

:where(html[data-hp-page="clientareasecurity"]) #ssoStatusTextDisabled {
    color:var(--sso-red)!important;
    border-color:var(--sso-red-line)!important;
    background:var(--sso-red-soft)!important;
}

:where(html[data-hp-page="clientareasecurity"]) #ssoStatusTextEnabled i,
:where(html[data-hp-page="clientareasecurity"]) #ssoStatusTextDisabled i {
    margin:0!important;
    font-size:6px!important;
}

/* =========================================================
   Custom SSO switch
   ========================================================= */
:where(html[data-hp-page="clientareasecurity"]) .phc-sso-switch {
    flex:0 0 auto;
}

:where(html[data-hp-page="clientareasecurity"]) .phc-sso-switch .form-check {
    min-height:0;
    margin:0!important;
    padding:0!important;
}

:where(html[data-hp-page="clientareasecurity"]) #inputAllowSso {
    position:relative;

    width:54px!important;
    height:30px!important;
    margin:0!important;

    appearance:none!important;
    -webkit-appearance:none!important;

    border:1px solid #cbd5e1!important;
    border-radius:999px!important;

    background:#e2e8f0!important;
    background-image:none!important;

    box-shadow:
        inset 0 1px 3px rgba(15,23,42,.08)!important;

    cursor:pointer;

    transition:
        background var(--sso-transition),
        border-color var(--sso-transition),
        box-shadow var(--sso-transition);
}

:where(html[data-hp-page="clientareasecurity"]) #inputAllowSso::before {
    content:"";
    position:absolute;

    top:3px;
    left:3px;

    width:22px;
    height:22px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 3px 8px rgba(15,23,42,.18),
        0 1px 2px rgba(15,23,42,.08);

    transition:
        left var(--sso-transition),
        transform var(--sso-transition);
}

:where(html[data-hp-page="clientareasecurity"]) #inputAllowSso:hover {
    border-color:#b6c2d1!important;
}

:where(html[data-hp-page="clientareasecurity"]) #inputAllowSso:checked {
    border-color:var(--sso-blue)!important;
    background:var(--sso-gradient)!important;

    box-shadow:
        inset 0 1px 3px rgba(29,78,216,.10),
        0 0 0 4px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="clientareasecurity"]) #inputAllowSso:checked::before {
    left:27px;
}

:where(html[data-hp-page="clientareasecurity"]) #inputAllowSso:focus {
    outline:none!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.09)!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="clientareasecurity"]) .phc-sso-card {
        border-radius:19px!important;
    }

    :where(html[data-hp-page="clientareasecurity"]) .phc-sso-header {
        min-height:0;
        padding:15px!important;
        align-items:flex-start;
    }

    :where(html[data-hp-page="clientareasecurity"]) .phc-sso-icon {
        width:44px!important;
        height:44px!important;
        flex-basis:44px;
        border-radius:13px!important;
    }

    :where(html[data-hp-page="clientareasecurity"]) .phc-sso-body {
        padding:12px!important;
    }

    :where(html[data-hp-page="clientareasecurity"]) .phc-sso-setting {
        min-height:84px;
        padding:13px 14px!important;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="clientareasecurity"]) .phc-sso-setting {
        align-items:flex-start;
        flex-direction:column;
    }

    :where(html[data-hp-page="clientareasecurity"]) .phc-sso-switch {
        width:100%;

        display:flex;
        justify-content:flex-end;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientareasecurity"]) .phc-sso-setting,
:where(html[data-hp-page="clientareasecurity"]) #inputAllowSso,
:where(html[data-hp-page="clientareasecurity"]) #inputAllowSso::before {
        transition:none!important;
    }
}

/* clientregister.tpl */
:root:where(html[data-hp-page="clientregister"]) {
    --register-bg:var(--hp-page);
    --register-card:var(--hp-surface);
    --register-border:var(--hp-line);
    --register-border-soft:#edf1f6;
    --register-text:var(--hp-ink);
    --register-text-2:var(--hp-ink-secondary);
    --register-muted:var(--hp-muted);
    --register-muted-2:#94a3b8;
    --register-primary:var(--hp-primary);
    --register-primary-dark:var(--hp-primary-hover);
    --register-primary-soft:var(--hp-primary-soft);
    --register-success:#10b981;
    --register-radius-xl:28px;
    --register-radius-lg:17px;
    --register-radius-md:13px;
    --register-shadow:0 28px 70px rgba(15,23,42,.10);
    --register-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="clientregister"]) * {box-sizing:border-box}

:where(html[data-hp-page="clientregister"]) body {
    margin:0;
    background:var(--register-bg);
}

:where(html[data-hp-page="clientregister"]) .phc-register-wrapper {
    min-height:100vh;
    padding:46px 20px;
    direction:rtl;
    position:relative;
    overflow:hidden;
    color:var(--register-text);
    background:
        radial-gradient(circle at 15% 10%,rgba(37,99,235,.085),transparent 28%),
        radial-gradient(circle at 85% 92%,rgba(99,102,241,.06),transparent 28%),
        var(--register-bg);
}

:where(html[data-hp-page="clientregister"]) .phc-register-wrapper::before,
:where(html[data-hp-page="clientregister"]) .phc-register-wrapper::after {
    content:"";
    position:absolute;
    pointer-events:none;
    border-radius:50%;
}

:where(html[data-hp-page="clientregister"]) .phc-register-wrapper::before {
    width:300px;
    height:300px;
    top:-160px;
    left:-110px;
    border:1px solid rgba(37,99,235,.08);
    box-shadow:0 0 0 34px rgba(37,99,235,.018),0 0 0 68px rgba(37,99,235,.012);
}

:where(html[data-hp-page="clientregister"]) .phc-register-wrapper::after {
    width:210px;
    height:210px;
    right:-80px;
    bottom:-80px;
    border:30px solid rgba(37,99,235,.025);
}

:where(html[data-hp-page="clientregister"]) #registration {
    width:min(940px,100%);
    margin:0 auto;
    position:relative;
    z-index:2;
    overflow:hidden;
    border:1px solid var(--register-border);
    border-radius:var(--register-radius-xl);
    background:var(--register-card);
    box-shadow:var(--register-shadow);
}

:where(html[data-hp-page="clientregister"]) #registration form {margin:0}

/* Hero — هماهنگ با صفحه لاگین */
:where(html[data-hp-page="clientregister"]) .phc-page-header {
    position:relative;
    overflow:hidden;
    min-height:210px;
    padding:34px 40px 31px;
    text-align:right;
    color:#fff;
    background:
        linear-gradient(135deg,rgba(255,255,255,.06),transparent 35%),
        linear-gradient(145deg,#0f172a 0%,#1e3a8a 50%,#2563eb 100%);
}

:where(html[data-hp-page="clientregister"]) .phc-page-header::before {
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    top:-95px;
    left:-75px;
    border-radius:50%;
    background:rgba(255,255,255,.055);
}

:where(html[data-hp-page="clientregister"]) .phc-page-header::after {
    content:"";
    position:absolute;
    right:28px;
    bottom:18px;
    width:125px;
    height:125px;
    opacity:.22;
    pointer-events:none;
    background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1px);
    background-size:14px 14px;
    mask-image:linear-gradient(to bottom,transparent,#000);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000);
}

:where(html[data-hp-page="clientregister"]) .phc-page-header-inner {position:relative;z-index:2}

:where(html[data-hp-page="clientregister"]) .phc-register-brand-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:28px;
}

:where(html[data-hp-page="clientregister"]) .phc-page-header a {
    min-height:48px;
    display:flex;
    align-items:center;
    text-decoration:none!important;
}

:where(html[data-hp-page="clientregister"]) .phc-page-header img {
    max-width:175px;
    max-height:56px;
    object-fit:contain;
}

:where(html[data-hp-page="clientregister"]) .phc-register-brand-fallback {
    font-size:1.2rem;
    font-weight:900;
    color:#fff;
}

:where(html[data-hp-page="clientregister"]) .phc-register-secure-badge {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.82);
    font-size:.72rem;
    font-weight:800;
    white-space:nowrap;
}

:where(html[data-hp-page="clientregister"]) .phc-register-secure-badge i {
    width:8px;
    height:8px;
    display:block;
    border-radius:50%;
    background:#4ade80;
    box-shadow:0 0 0 4px rgba(74,222,128,.12);
}

:where(html[data-hp-page="clientregister"]) .phc-page-title {
    margin:0 0 8px;
    color:#fff;
    font-size:1.78rem;
    font-weight:900;
    line-height:1.5;
    letter-spacing:-.3px;
}

:where(html[data-hp-page="clientregister"]) .phc-page-subtitle {
    margin:0;
    max-width:590px;
    color:rgba(255,255,255,.68);
    font-size:.87rem;
    line-height:1.9;
}

:where(html[data-hp-page="clientregister"]) .phc-register-body {
    padding:32px 38px 38px;
    background:#fff;
}

:where(html[data-hp-page="clientregister"]) .phc-register-body>.alert,
:where(html[data-hp-page="clientregister"]) .phc-register-wrapper>.alert {
    width:min(940px,100%);
    margin:0 auto 18px;
    padding:12px 14px;
    border-radius:12px;
    box-shadow:none;
    font-size:.84rem;
    line-height:1.8;
}

/* هدیه ثبت‌نام */
:where(html[data-hp-page="clientregister"]) .register-gift-alert {
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 22px;
    padding:15px 17px;
    position:relative;
    overflow:hidden;
    direction:rtl;
    border:1px solid #dbeafe;
    border-radius:15px;
    background:linear-gradient(135deg,#f8fbff,#eff6ff);
}

:where(html[data-hp-page="clientregister"]) .register-gift-alert::after {
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    left:-55px;
    bottom:-78px;
    border-radius:50%;
    background:rgba(37,99,235,.055);
}

:where(html[data-hp-page="clientregister"]) .gift-icon {
    width:44px;
    height:44px;
    min-width:44px;
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    color:#fff;
    background:linear-gradient(135deg,#3b82f6,var(--register-primary-dark));
    box-shadow:0 10px 20px -12px rgba(37,99,235,.9);
    font-size:1rem;
}

:where(html[data-hp-page="clientregister"]) .gift-content {position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;min-width:0}
:where(html[data-hp-page="clientregister"]) .gift-content strong {color:#1e40af;font-size:.82rem;font-weight:900}
:where(html[data-hp-page="clientregister"]) .gift-content span {color:var(--register-muted);font-size:.75rem;line-height:1.8}
:where(html[data-hp-page="clientregister"]) .gift-content b {color:var(--register-primary);font-weight:900}

:where(html[data-hp-page="clientregister"]) .phc-register-linked {
    margin:0 0 20px;
    padding:0 0 20px;
    border-bottom:1px solid var(--register-border-soft);
}

:where(html[data-hp-page="clientregister"]) .phc-register-linked .btn {
    min-height:43px;
    border-radius:10px!important;
    box-shadow:none!important;
}

/* بخش‌های فرم */
:where(html[data-hp-page="clientregister"]) .phc-form-card {
    margin-top:18px;
    padding:20px 20px 4px;
    border:1px solid var(--register-border-soft);
    border-radius:var(--register-radius-lg);
    background:#fbfcfe;
}

:where(html[data-hp-page="clientregister"]) .phc-form-card:first-of-type {margin-top:0}

:where(html[data-hp-page="clientregister"]) .phc-section-head {
    margin:0 0 18px;
    padding:0 0 14px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom:1px solid var(--register-border-soft);
}

:where(html[data-hp-page="clientregister"]) .phc-section-head-icon {
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:var(--register-primary);
    background:var(--register-primary-soft);
    border:1px solid #dbeafe;
    font-size:.76rem;
}

:where(html[data-hp-page="clientregister"]) .phc-section-head-copy strong {
    display:block;
    margin-bottom:2px;
    color:var(--register-text);
    font-size:.85rem;
    font-weight:900;
}

:where(html[data-hp-page="clientregister"]) .phc-section-head-copy span {
    display:block;
    color:var(--register-muted);
    font-size:.65rem;
    line-height:1.65;
}

:where(html[data-hp-page="clientregister"]) .phc-form-group {margin-bottom:16px}
:where(html[data-hp-page="clientregister"]) .phc-input-group {position:relative;padding-top:26px}

/* label بالا، مشابه لاگین */
:where(html[data-hp-page="clientregister"]) .phc-form-label {
    position:absolute;
    top:0;
    right:2px;
    margin:0;
    color:var(--register-text-2);
    font-size:.77rem;
    font-weight:800;
    line-height:18px;
    pointer-events:none;
}

:where(html[data-hp-page="clientregister"]) .phc-input {
    width:100%;
    height:54px;
    padding:0 44px 0 15px;
    outline:none;
    border:1px solid var(--register-border);
    border-radius:var(--register-radius-md);
    background:#f8fafc;
    color:var(--register-text);
    font-family:inherit;
    font-size:.88rem;
    transition:background-color var(--register-transition),border-color var(--register-transition),box-shadow var(--register-transition);
}

:where(html[data-hp-page="clientregister"]) .phc-input:hover {background:#fff;border-color:#cbd5e1}
:where(html[data-hp-page="clientregister"]) .phc-input:focus {background:#fff;border-color:var(--register-primary);box-shadow:0 0 0 4px rgba(37,99,235,.09)}
:where(html[data-hp-page="clientregister"]) .phc-input::placeholder {color:#cbd5e1}

:where(html[data-hp-page="clientregister"]) .ltr-input {
    direction:ltr;
    text-align:left;
    padding:0 15px 0 44px;
}

:where(html[data-hp-page="clientregister"]) select.phc-input {
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}

:where(html[data-hp-page="clientregister"]) .phc-input-icon {
    position:absolute;
    right:15px;
    bottom:18px;
    z-index:2;
    color:var(--register-muted-2);
    font-size:.92rem;
    pointer-events:none;
    transition:color var(--register-transition);
}

:where(html[data-hp-page="clientregister"]) .phc-input-group:focus-within .phc-input-icon {color:var(--register-primary)}
:where(html[data-hp-page="clientregister"]) .ltr-input~.phc-input-icon {right:auto;left:15px}

/* custom fields بدون آیکن */
:where(html[data-hp-page="clientregister"]) .phc-input-group>.phc-input:first-child:last-of-type {padding-left:15px}

/* Password */
:where(html[data-hp-page="clientregister"]) .phc-password-widget {
    margin:0 0 16px;
    padding:15px;
    border:1px dashed #cbd5e1;
    border-radius:13px;
    background:#fff;
}

:where(html[data-hp-page="clientregister"]) .phc-password-widget .progress {
    height:8px!important;
    margin-bottom:8px!important;
    overflow:hidden;
    border-radius:999px!important;
    background:#e2e8f0!important;
    box-shadow:inset 0 1px 2px rgba(15,23,42,.06)!important;
}

:where(html[data-hp-page="clientregister"]) .phc-password-widget #passwordStrengthTextLabel {
    color:var(--register-muted)!important;
    font-size:.72rem!important;
    font-weight:700!important;
}

/* Buttons */
:where(html[data-hp-page="clientregister"]) .phc-btn-primary,
:where(html[data-hp-page="clientregister"]) .phc-btn-light,
:where(html[data-hp-page="clientregister"]) .phc-btn-outline {
    min-height:52px;
    padding:0 22px;
    border-radius:12px;
    font-family:inherit;
    font-size:.85rem;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none!important;
    cursor:pointer;
    transition:var(--register-transition);
}

:where(html[data-hp-page="clientregister"]) .phc-btn-primary {
    flex:1.35;
    border:0;
    color:#fff;
    background:linear-gradient(135deg,#3b82f6,var(--register-primary-dark));
    box-shadow:0 11px 24px -12px rgba(37,99,235,.85);
}

:where(html[data-hp-page="clientregister"]) .phc-btn-primary:hover {
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 15px 28px -12px rgba(37,99,235,.92);
}

:where(html[data-hp-page="clientregister"]) .phc-btn-light,
:where(html[data-hp-page="clientregister"]) .phc-btn-outline {
    color:var(--register-text-2);
    background:#fff;
    border:1px solid var(--register-border);
}

:where(html[data-hp-page="clientregister"]) .phc-btn-light:hover,
:where(html[data-hp-page="clientregister"]) .phc-btn-outline:hover {
    color:var(--register-primary);
    background:#f8fbff;
    border-color:#bfdbfe;
    transform:translateY(-1px);
}

:where(html[data-hp-page="clientregister"]) .phc-btn-outline {
    min-height:43px;
    padding:0 12px!important;
    font-size:.78rem!important;
}

:where(html[data-hp-page="clientregister"]) .phc-action-bar {
    display:flex;
    align-items:stretch;
    gap:11px;
    width:100%;
    margin-top:22px;
}

:where(html[data-hp-page="clientregister"]) .phc-action-bar .phc-btn-light {flex:1}

:where(html[data-hp-page="clientregister"]) .phc-captcha-container {
    margin-top:22px;
    padding:13px;
    text-align:center;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    background:#fbfcfe;
}

:where(html[data-hp-page="clientregister"]) .phc-tos-container {
    margin-top:18px;
    padding:13px 15px;
    border:1px solid var(--register-border-soft);
    border-radius:12px;
    background:#fbfcfe;
}

:where(html[data-hp-page="clientregister"]) .phc-tos-container label {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    margin:0;
    cursor:pointer;
    color:var(--register-muted);
    font-size:.78rem;
    font-weight:700;
    line-height:1.8;
}

:where(html[data-hp-page="clientregister"]) .phc-tos-container input[type="checkbox"] {
    width:17px;
    height:17px;
    margin:0;
    flex:0 0 17px;
    accent-color:var(--register-primary);
}

:where(html[data-hp-page="clientregister"]) .phc-tos-container a {color:var(--register-primary)!important}

/* alerts inside registration */
:where(html[data-hp-page="clientregister"]) #registration .alert {
    margin:0 0 18px;
    padding:12px 14px;
    border-radius:12px;
    box-shadow:none;
    font-size:.82rem;
    line-height:1.8;
}

/* Loading */
:where(html[data-hp-page="clientregister"]) .is-loading-btn {position:relative!important;pointer-events:none!important;color:transparent!important}
:where(html[data-hp-page="clientregister"]) .is-loading-btn>* {opacity:0!important}
:where(html[data-hp-page="clientregister"]) .is-loading-btn i {opacity:0!important}
:where(html[data-hp-page="clientregister"]) .is-loading-btn::after {
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:20px;
    height:20px;
    margin:-10px 0 0 -10px;
    border:3px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:phcBtnSpin .7s linear infinite;
}

:where(html[data-hp-page="clientregister"]) .phc-btn-light.is-loading-btn::after,
:where(html[data-hp-page="clientregister"]) .phc-btn-outline.is-loading-btn::after {
    border-color:rgba(37,99,235,.16);
    border-top-color:var(--register-primary);
}

@keyframes phcBtnSpin {to{transform:rotate(360deg)}}

:where(html[data-hp-page="clientregister"]) input:-webkit-autofill,
:where(html[data-hp-page="clientregister"]) input:-webkit-autofill:hover,
:where(html[data-hp-page="clientregister"]) input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 1000px #fff inset!important;
    -webkit-text-fill-color:var(--register-text)!important;
}

@media(max-width:768px) {
    :where(html[data-hp-page="clientregister"]) .phc-register-wrapper {
        min-height:100dvh;
        padding:0;
        background:#fff;
        overflow:visible;
    }

    :where(html[data-hp-page="clientregister"]) .phc-register-wrapper::before,
:where(html[data-hp-page="clientregister"]) .phc-register-wrapper::after {display:none}

    :where(html[data-hp-page="clientregister"]) #registration {
        width:100%;
        min-height:100dvh;
        border:0;
        border-radius:0;
        box-shadow:none;
    }

    :where(html[data-hp-page="clientregister"]) .phc-page-header {
        min-height:190px;
        padding:28px 20px 26px;
    }

    :where(html[data-hp-page="clientregister"]) .phc-register-brand-row {margin-bottom:25px}
    :where(html[data-hp-page="clientregister"]) .phc-page-title {font-size:1.5rem}
    :where(html[data-hp-page="clientregister"]) .phc-page-subtitle {font-size:.8rem}
    :where(html[data-hp-page="clientregister"]) .phc-register-body {padding:26px 18px 32px}

    :where(html[data-hp-page="clientregister"]) .phc-form-card {
        padding:18px 14px 2px;
        border-radius:15px;
    }

    :where(html[data-hp-page="clientregister"]) .phc-section-head {margin-bottom:16px}
    :where(html[data-hp-page="clientregister"]) .phc-input {height:52px}
    :where(html[data-hp-page="clientregister"]) .phc-input-icon {bottom:17px}

    :where(html[data-hp-page="clientregister"]) .phc-action-bar {gap:8px}
    :where(html[data-hp-page="clientregister"]) .phc-btn-primary,
:where(html[data-hp-page="clientregister"]) .phc-btn-light {min-height:51px;padding:0 8px;font-size:.78rem}
    :where(html[data-hp-page="clientregister"]) .phc-btn-primary {flex:1.2}
    :where(html[data-hp-page="clientregister"]) .phc-action-bar .phc-btn-light {flex:1}
}

@media(max-width:480px) {
    :where(html[data-hp-page="clientregister"]) .phc-register-secure-badge {font-size:.65rem;padding:6px 8px}
    :where(html[data-hp-page="clientregister"]) .phc-page-header img {max-width:145px;max-height:48px}
    :where(html[data-hp-page="clientregister"]) .register-gift-alert {align-items:flex-start;padding:14px}
    :where(html[data-hp-page="clientregister"]) .gift-icon {width:40px;height:40px;min-width:40px;border-radius:11px}
    :where(html[data-hp-page="clientregister"]) .gift-content span {font-size:.7rem}
}

@media(max-width:380px) {
    :where(html[data-hp-page="clientregister"]) .phc-register-secure-badge {display:none}
    :where(html[data-hp-page="clientregister"]) .phc-action-bar {flex-direction:column}
    :where(html[data-hp-page="clientregister"]) .phc-action-bar .phc-btn-primary,
:where(html[data-hp-page="clientregister"]) .phc-action-bar .phc-btn-light {width:100%;flex:none}
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="clientregister"]) .phc-input,
:where(html[data-hp-page="clientregister"]) .phc-btn-primary,
:where(html[data-hp-page="clientregister"]) .phc-btn-light,
:where(html[data-hp-page="clientregister"]) .phc-btn-outline {transition:none!important}
}

/* downloads.tpl */
:root:where(html[data-hp-page="downloads"]) {
    --dl-card:var(--hp-surface);
    --dl-soft:var(--hp-surface-soft);
    --dl-border:var(--hp-line);
    --dl-border-2:#d6e1ee;
    --dl-divider:#edf1f6;

    --dl-text:var(--hp-ink);
    --dl-text-2:var(--hp-ink-secondary);
    --dl-muted:var(--hp-muted);
    --dl-muted-2:#94a3b8;

    --dl-blue:var(--hp-primary);
    --dl-blue-dark:var(--hp-primary-hover);
    --dl-blue-light:#60a5fa;
    --dl-blue-soft:var(--hp-primary-soft);
    --dl-blue-line:#bfdbfe;
    --dl-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --dl-green:#059669;
    --dl-green-soft:#ecfdf5;
    --dl-green-line:#a7f3d0;

    --dl-orange:#d97706;
    --dl-orange-soft:#fff7ed;
    --dl-orange-line:#fed7aa;

    --dl-red:#dc2626;
    --dl-red-soft:#fef2f2;
    --dl-red-line:#fecaca;

    --dl-radius-xl:24px;
    --dl-radius-lg:17px;
    --dl-radius-md:12px;
    --dl-radius-sm:9px;

    --dl-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --dl-shadow-md:0 18px 44px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);
    --dl-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --dl-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="downloads"]) .phc-downloads-container,
:where(html[data-hp-page="downloads"]) .phc-downloads-container * {
    box-sizing:border-box;
}

:where(html[data-hp-page="downloads"]) .phc-downloads-container {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--dl-text-2);
}

/* =========================================================
   Header / Search
   ========================================================= */
:where(html[data-hp-page="downloads"]) .phc-downloads-manager {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;

    border:1px solid var(--dl-border);
    border-radius:var(--dl-radius-xl);
    background:#fff;
    box-shadow:var(--dl-shadow-panel);
}

:where(html[data-hp-page="downloads"]) .phc-downloads-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;
    background:var(--dl-gradient);
}

:where(html[data-hp-page="downloads"]) .phc-downloads-header {
    min-height:104px;
    padding:20px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;

    border-bottom:1px solid var(--dl-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="downloads"]) .phc-downloads-heading {
    display:flex;
    align-items:center;
    gap:13px;
    min-width:280px;
}

:where(html[data-hp-page="downloads"]) .phc-downloads-main-icon {
    position:relative;

    width:52px;
    height:52px;
    flex:0 0 52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dl-blue-line);
    border-radius:15px;

    color:#fff;
    background:var(--dl-gradient);
    box-shadow:0 10px 22px rgba(37,99,235,.18);

    font-size:1rem;
}

:where(html[data-hp-page="downloads"]) .phc-downloads-main-icon::after {
    content:"";
    position:absolute;
    inset:6px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
}

:where(html[data-hp-page="downloads"]) .phc-downloads-title {
    margin:0 0 4px!important;

    color:var(--dl-text)!important;
    font-size:1.08rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="downloads"]) .phc-downloads-subtitle {
    margin:0!important;
    max-width:560px;

    color:var(--dl-muted)!important;
    font-size:.80rem!important;
    line-height:1.75;
    font-weight:600;
}

:where(html[data-hp-page="downloads"]) .phc-downloads-search {
    width:100%;
    max-width:430px;
}

:where(html[data-hp-page="downloads"]) .phc-downloads-search form {
    margin:0;
}

:where(html[data-hp-page="downloads"]) .phc-search-input-group {
    position:relative;
    width:100%;
    height:48px;

    display:flex;
    align-items:center;

    border:1px solid var(--dl-border);
    border-radius:12px;

    background:#f8fafc;

    box-shadow:none;

    transition:
        border-color var(--dl-transition),
        background var(--dl-transition),
        box-shadow var(--dl-transition);
}

:where(html[data-hp-page="downloads"]) .phc-search-input-group:hover {
    border-color:#cbd5e1;
    background:#fff;
}

:where(html[data-hp-page="downloads"]) .phc-search-input-group:focus-within {
    border-color:var(--dl-blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="downloads"]) .phc-search-icon {
    position:absolute;
    right:14px;

    color:var(--dl-muted-2);
    font-size:.85rem;
}

:where(html[data-hp-page="downloads"]) .phc-search-input-group:focus-within .phc-search-icon {
    color:var(--dl-blue);
}

:where(html[data-hp-page="downloads"]) .phc-search-input {
    flex:1;
    height:100%;

    padding:0 42px 0 10px;

    border:0!important;
    outline:0!important;

    color:var(--dl-text)!important;
    background:transparent!important;

    font-family:inherit;
    font-size:.85rem!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="downloads"]) .phc-search-input::placeholder {
    color:var(--dl-muted-2);
}

:where(html[data-hp-page="downloads"]) .phc-search-btn {
    min-width:86px;
    height:38px;
    margin-left:5px;
    padding:0 14px;

    border:1px solid var(--dl-blue);
    border-radius:9px;

    color:#fff;
    background:var(--dl-gradient);

    font-family:inherit;
    font-size:.75rem;
    line-height:1;
    font-weight:900;

    box-shadow:0 7px 14px rgba(37,99,235,.14);

    cursor:pointer;

    transition:
        transform var(--dl-transition),
        box-shadow var(--dl-transition);
}

:where(html[data-hp-page="downloads"]) .phc-search-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(37,99,235,.20);
}

/* =========================================================
   Section Header
   ========================================================= */
:where(html[data-hp-page="downloads"]) .phc-section-header {
    margin:0 0 12px;
    padding:0 2px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

:where(html[data-hp-page="downloads"]) .phc-section-heading {
    display:flex;
    align-items:center;
    gap:10px;
}

:where(html[data-hp-page="downloads"]) .phc-section-icon {
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dl-blue-line);
    border-radius:11px;

    color:var(--dl-blue);
    background:var(--dl-blue-soft);

    font-size:.78rem;
}

:where(html[data-hp-page="downloads"]) .phc-section-icon.is-popular {
    color:var(--dl-orange);
    border-color:var(--dl-orange-line);
    background:var(--dl-orange-soft);
}

:where(html[data-hp-page="downloads"]) .phc-section-title {
    margin:0!important;

    color:var(--dl-text)!important;
    font-size:.96rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="downloads"]) .phc-section-subtitle {
    color:var(--dl-muted);
    font-size:.72rem;
    line-height:1.6;
}

/* =========================================================
   Category grid
   ========================================================= */
:where(html[data-hp-page="downloads"]) .phc-categories-block {
    margin-bottom:20px;
}

:where(html[data-hp-page="downloads"]) .phc-cat-card-link {
    display:block;
    height:100%;

    color:inherit!important;
    text-decoration:none!important;
}

:where(html[data-hp-page="downloads"]) .phc-cat-card {
    position:relative;
    min-height:94px;
    height:100%;
    padding:13px 14px;

    display:flex;
    align-items:center;
    gap:11px;

    overflow:hidden;

    border:1px solid var(--dl-border);
    border-radius:14px;

    background:
        linear-gradient(145deg,#ffffff 0%,#ffffff 72%,#f8fbff 140%);

    box-shadow:var(--dl-shadow-sm);

    transition:
        transform var(--dl-transition),
        border-color var(--dl-transition),
        box-shadow var(--dl-transition);
}

:where(html[data-hp-page="downloads"]) .phc-cat-card::after {
    content:"";
    position:absolute;
    width:84px;
    height:84px;
    left:-50px;
    bottom:-54px;

    border-radius:50%;

    background:rgba(37,99,235,.055);

    pointer-events:none;
}

:where(html[data-hp-page="downloads"]) .phc-cat-card:hover {
    transform:translateY(-2px);
    border-color:var(--dl-blue-line);
    box-shadow:0 13px 26px rgba(37,99,235,.07);
}

:where(html[data-hp-page="downloads"]) .phc-cat-icon {
    position:relative;
    z-index:2;

    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dl-blue-line);
    border-radius:12px;

    color:var(--dl-blue);
    background:var(--dl-blue-soft);

    font-size:.84rem;

    transition:
        transform var(--dl-transition),
        color var(--dl-transition),
        background var(--dl-transition);
}

:where(html[data-hp-page="downloads"]) .phc-cat-card:hover .phc-cat-icon {
    transform:scale(1.05);
    color:#fff;
    background:var(--dl-gradient);
}

:where(html[data-hp-page="downloads"]) .phc-cat-info {
    position:relative;
    z-index:2;

    min-width:0;
    flex:1;
}

:where(html[data-hp-page="downloads"]) .phc-cat-title {
    margin:0 0 6px!important;

    color:var(--dl-text)!important;
    font-size:.86rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="downloads"]) .phc-cat-count {
    min-height:25px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--dl-green-line);
    border-radius:8px;

    color:var(--dl-green);
    background:var(--dl-green-soft);

    font-size:.68rem;
    line-height:1;
    font-weight:850;
}

/* =========================================================
   Popular downloads
   ========================================================= */
:where(html[data-hp-page="downloads"]) .phc-downloads-list {
    margin-bottom:8px;
}

:where(html[data-hp-page="downloads"]) .phc-dl-card {
    position:relative;
    height:100%;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid var(--dl-border);
    border-radius:15px;

    background:#fff;

    box-shadow:var(--dl-shadow-sm);

    transition:
        transform var(--dl-transition),
        border-color var(--dl-transition),
        box-shadow var(--dl-transition);
}

:where(html[data-hp-page="downloads"]) .phc-dl-card::before {
    content:"";
    position:absolute;
    top:0;
    right:14px;
    left:14px;
    height:2px;

    background:linear-gradient(90deg,transparent,rgba(37,99,235,.70),transparent);
}

:where(html[data-hp-page="downloads"]) .phc-dl-card:hover {
    transform:translateY(-2px);
    border-color:var(--dl-blue-line);
    box-shadow:0 14px 28px rgba(37,99,235,.07);
}

:where(html[data-hp-page="downloads"]) .phc-dl-card-body {
    padding:14px 15px 12px;
    flex:1;
}

:where(html[data-hp-page="downloads"]) .phc-dl-header {
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-bottom:9px;
}

:where(html[data-hp-page="downloads"]) .phc-dl-file-icon {
    width:40px;
    height:40px;
    flex:0 0 40px;

    display:flex!important;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dl-blue-line);
    border-radius:11px;

    color:var(--dl-blue);
    background:var(--dl-blue-soft);

    font-size:.82rem!important;
}

:where(html[data-hp-page="downloads"]) .phc-dl-title {
    margin:2px 0 0!important;

    color:var(--dl-text)!important;
    font-size:.88rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="downloads"]) .phc-dl-desc {
    margin:0!important;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;

    color:var(--dl-muted)!important;
    font-size:.75rem!important;
    line-height:1.8!important;
}

:where(html[data-hp-page="downloads"]) .phc-dl-card-footer {
    min-height:54px;
    padding:9px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;

    border-top:1px solid var(--dl-divider);

    background:#fbfdff;
}

:where(html[data-hp-page="downloads"]) .phc-badge-premium,
:where(html[data-hp-page="downloads"]) .phc-public-badge {
    min-height:27px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid transparent;
    border-radius:8px;

    font-size:.67rem;
    line-height:1;
    font-weight:850;
}

:where(html[data-hp-page="downloads"]) .phc-badge-premium {
    color:var(--dl-red);
    border-color:var(--dl-red-line);
    background:var(--dl-red-soft);
}

:where(html[data-hp-page="downloads"]) .phc-public-badge {
    color:var(--dl-green);
    border-color:var(--dl-green-line);
    background:var(--dl-green-soft);
}

:where(html[data-hp-page="downloads"]) .btn-hyper-dl {
    min-height:34px;
    padding:0 11px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--dl-blue-line);
    border-radius:9px;

    color:var(--dl-blue)!important;
    background:var(--dl-blue-soft);

    font-size:.71rem;
    line-height:1;
    font-weight:900;

    text-decoration:none!important;

    box-shadow:none;

    transition:
        transform var(--dl-transition),
        color var(--dl-transition),
        border-color var(--dl-transition),
        background var(--dl-transition),
        box-shadow var(--dl-transition);
}

:where(html[data-hp-page="downloads"]) .btn-hyper-dl:hover {
    transform:translateY(-1px);

    color:#fff!important;
    border-color:var(--dl-blue);
    background:var(--dl-gradient);

    box-shadow:0 8px 16px rgba(37,99,235,.14);
}

/* =========================================================
   Alert
   ========================================================= */
:where(html[data-hp-page="downloads"]) .phc-downloads-container .alert {
    border-radius:13px!important;
    font-size:.80rem!important;
    line-height:1.75;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="downloads"]) .phc-downloads-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="downloads"]) .phc-downloads-header {
        padding:18px;
    }

    :where(html[data-hp-page="downloads"]) .phc-downloads-heading {
        width:100%;
        min-width:0;
    }

    :where(html[data-hp-page="downloads"]) .phc-downloads-search {
        max-width:100%;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="downloads"]) .phc-downloads-header {
        padding:15px;
    }

    :where(html[data-hp-page="downloads"]) .phc-downloads-main-icon {
        width:46px;
        height:46px;
        flex-basis:46px;
        border-radius:13px;
    }

    :where(html[data-hp-page="downloads"]) .phc-search-input-group {
        height:46px;
    }

    :where(html[data-hp-page="downloads"]) .phc-section-header {
        align-items:flex-start;
        flex-direction:column;
    }

    :where(html[data-hp-page="downloads"]) .phc-dl-card-footer {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="downloads"]) .btn-hyper-dl {
        width:100%;
        min-height:38px;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="downloads"]) .phc-downloads-title {
        font-size:1rem!important;
    }

    :where(html[data-hp-page="downloads"]) .phc-search-input-group {
        height:auto;
        padding:5px;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="downloads"]) .phc-search-icon {
        top:23px;
    }

    :where(html[data-hp-page="downloads"]) .phc-search-input {
        height:42px;
        width:100%;
        flex:1 1 calc(100% - 10px);
    }

    :where(html[data-hp-page="downloads"]) .phc-search-btn {
        width:100%;
        height:38px;
        margin:2px 0 0;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="downloads"]) .phc-search-input-group,
:where(html[data-hp-page="downloads"]) .phc-search-btn,
:where(html[data-hp-page="downloads"]) .phc-cat-card,
:where(html[data-hp-page="downloads"]) .phc-cat-icon,
:where(html[data-hp-page="downloads"]) .phc-dl-card,
:where(html[data-hp-page="downloads"]) .btn-hyper-dl {
        transition:none!important;
    }
}

/* downloadscat.tpl */
:root:where(html[data-hp-page="downloadscat"]) {
    --dc-card:var(--hp-surface);
    --dc-soft:var(--hp-surface-soft);
    --dc-border:var(--hp-line);
    --dc-divider:#edf1f6;

    --dc-text:var(--hp-ink);
    --dc-text-2:var(--hp-ink-secondary);
    --dc-muted:var(--hp-muted);
    --dc-muted-2:#94a3b8;

    --dc-blue:var(--hp-primary);
    --dc-blue-dark:var(--hp-primary-hover);
    --dc-blue-light:#60a5fa;
    --dc-blue-soft:var(--hp-primary-soft);
    --dc-blue-line:#bfdbfe;
    --dc-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --dc-green:#059669;
    --dc-green-soft:#ecfdf5;
    --dc-green-line:#a7f3d0;

    --dc-orange:#d97706;
    --dc-orange-soft:#fff7ed;
    --dc-orange-line:#fed7aa;

    --dc-red:#dc2626;
    --dc-red-soft:#fef2f2;
    --dc-red-line:#fecaca;

    --dc-radius-xl:24px;
    --dc-radius-lg:17px;
    --dc-radius-md:13px;
    --dc-radius-sm:9px;

    --dc-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --dc-shadow-md:0 18px 44px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);
    --dc-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --dc-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-container,
:where(html[data-hp-page="downloadscat"]) .phc-downloads-container * {
    box-sizing:border-box;
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-container {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--dc-text-2);
}

/* =========================================================
   Header / Search
   ========================================================= */
:where(html[data-hp-page="downloadscat"]) .phc-downloads-manager {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;

    border:1px solid var(--dc-border);
    border-radius:var(--dc-radius-xl);

    background:#fff;
    box-shadow:var(--dc-shadow-panel);
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;
    background:var(--dc-gradient);
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-header {
    min-height:102px;
    padding:20px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;

    border-bottom:1px solid var(--dc-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-heading {
    min-width:280px;

    display:flex;
    align-items:center;
    gap:13px;
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-icon {
    position:relative;

    width:52px;
    height:52px;
    flex:0 0 52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dc-blue-line);
    border-radius:15px;

    color:#fff;
    background:var(--dc-gradient);

    box-shadow:0 10px 22px rgba(37,99,235,.18);

    font-size:.98rem;
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-title {
    margin:0 0 4px!important;

    color:var(--dc-text)!important;
    font-size:1.08rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="downloadscat"]) .phc-downloads-subtitle {
    margin:0!important;
    max-width:540px;

    color:var(--dc-muted)!important;
    font-size:.80rem!important;
    line-height:1.75;
    font-weight:600;
}

:where(html[data-hp-page="downloadscat"]) .phc-search-wrapper {
    position:relative;
    width:100%;
    max-width:430px;
}

:where(html[data-hp-page="downloadscat"]) .phc-search-wrapper form {
    margin:0;
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box {
    position:relative;
    width:100%;
    height:48px;

    display:flex;
    align-items:center;

    border:1px solid var(--dc-border);
    border-radius:12px;

    background:#f8fafc;

    transition:
        border-color var(--dc-transition),
        background var(--dc-transition),
        box-shadow var(--dc-transition);
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box:hover {
    border-color:#cbd5e1;
    background:#fff;
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box:focus-within {
    border-color:var(--dc-blue);
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box > i {
    position:absolute;
    right:14px;

    color:var(--dc-muted-2);
    font-size:.84rem;
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box:focus-within > i {
    color:var(--dc-blue);
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box input {
    flex:1;
    height:100%;

    padding:0 42px 0 10px;

    border:0!important;
    outline:0!important;

    color:var(--dc-text)!important;
    background:transparent!important;

    font-family:inherit;
    font-size:.84rem!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box input::placeholder {
    color:var(--dc-muted-2);
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box button {
    min-width:86px;
    height:38px;
    margin-left:5px;
    padding:0 14px;

    border:1px solid var(--dc-blue);
    border-radius:9px;

    color:#fff;
    background:var(--dc-gradient);

    font-family:inherit;
    font-size:.74rem;
    line-height:1;
    font-weight:900;

    box-shadow:0 7px 14px rgba(37,99,235,.14);

    cursor:pointer;

    transition:
        transform var(--dc-transition),
        box-shadow var(--dc-transition);
}

:where(html[data-hp-page="downloadscat"]) .phc-search-box button:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(37,99,235,.20);
}

/* =========================================================
   Section heading
   ========================================================= */
:where(html[data-hp-page="downloadscat"]) .phc-section-header {
    margin:0 0 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

:where(html[data-hp-page="downloadscat"]) .phc-section-heading {
    display:flex;
    align-items:center;
    gap:10px;
}

:where(html[data-hp-page="downloadscat"]) .phc-section-icon {
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dc-blue-line);
    border-radius:11px;

    color:var(--dc-blue);
    background:var(--dc-blue-soft);

    font-size:.77rem;
}

:where(html[data-hp-page="downloadscat"]) .phc-section-title {
    margin:0!important;

    color:var(--dc-text)!important;
    font-size:.96rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="downloadscat"]) .phc-section-subtitle {
    color:var(--dc-muted);

    font-size:.71rem;
    line-height:1.6;
}

/* =========================================================
   Subcategories
   ========================================================= */
:where(html[data-hp-page="downloadscat"]) .phc-categories-block {
    margin-bottom:20px;
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-box {
    position:relative;
    min-height:94px;
    padding:13px 14px;

    display:flex;
    align-items:center;
    gap:11px;

    overflow:hidden;

    border:1px solid var(--dc-border);
    border-radius:14px;

    color:inherit!important;
    background:linear-gradient(145deg,#fff 0%,#fff 72%,#f8fbff 140%);

    text-decoration:none!important;

    box-shadow:var(--dc-shadow-sm);

    transition:
        transform var(--dc-transition),
        border-color var(--dc-transition),
        box-shadow var(--dc-transition);
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-box::after {
    content:"";
    position:absolute;
    width:84px;
    height:84px;
    left:-50px;
    bottom:-54px;

    border-radius:50%;

    background:rgba(37,99,235,.055);

    pointer-events:none;
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-box:hover {
    transform:translateY(-2px);

    border-color:var(--dc-blue-line);

    box-shadow:0 13px 26px rgba(37,99,235,.07);
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-icon-wrapper {
    position:relative;
    z-index:2;

    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dc-blue-line);
    border-radius:12px;

    color:var(--dc-blue);
    background:var(--dc-blue-soft);

    font-size:.83rem;

    transition:
        transform var(--dc-transition),
        color var(--dc-transition),
        background var(--dc-transition);
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-box:hover .phc-cat-icon-wrapper {
    transform:scale(1.05);

    color:#fff;
    background:var(--dc-gradient);
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-content {
    position:relative;
    z-index:2;

    min-width:0;
    flex:1;
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-title {
    margin:0 0 4px!important;

    color:var(--dc-text)!important;
    font-size:.85rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-description {
    margin:0 0 6px!important;

    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;

    color:var(--dc-muted)!important;

    font-size:.69rem!important;
    line-height:1.6;
}

:where(html[data-hp-page="downloadscat"]) .phc-cat-meta {
    min-height:24px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--dc-green-line);
    border-radius:8px;

    color:var(--dc-green);
    background:var(--dc-green-soft);

    font-size:.66rem;
    line-height:1;
    font-weight:850;
}

/* =========================================================
   Files list
   ========================================================= */
:where(html[data-hp-page="downloadscat"]) .phc-files-section {
    margin-top:4px;
}

:where(html[data-hp-page="downloadscat"]) .phc-files-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}

:where(html[data-hp-page="downloadscat"]) .phc-file-item {
    position:relative;
    min-height:94px;
    padding:13px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    overflow:hidden;

    border:1px solid var(--dc-border);
    border-radius:14px;

    background:#fff;

    box-shadow:var(--dc-shadow-sm);

    transition:
        transform var(--dc-transition),
        border-color var(--dc-transition),
        box-shadow var(--dc-transition),
        opacity .3s ease;
}

:where(html[data-hp-page="downloadscat"]) .phc-file-item::before {
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;

    background:var(--dc-gradient);
}

:where(html[data-hp-page="downloadscat"]) .phc-file-item:hover {
    transform:translateY(-1px);

    border-color:var(--dc-blue-line);

    box-shadow:0 12px 24px rgba(37,99,235,.065);
}

:where(html[data-hp-page="downloadscat"]) .phc-file-main {
    min-width:0;
    flex:1;

    display:flex;
    align-items:flex-start;
    gap:11px;
}

:where(html[data-hp-page="downloadscat"]) .phc-file-icon {
    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dc-blue-line);
    border-radius:12px;

    color:var(--dc-blue);
    background:var(--dc-blue-soft);

    font-size:.83rem;
}

:where(html[data-hp-page="downloadscat"]) .phc-file-info {
    min-width:0;
    flex:1;
}

:where(html[data-hp-page="downloadscat"]) .phc-file-name {
    margin:0 0 4px!important;

    display:flex;
    align-items:center;
    gap:7px;

    color:var(--dc-text)!important;

    font-size:.86rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="downloadscat"]) .phc-file-name .phc-lock {
    color:var(--dc-red);
    font-size:.67rem;
}

:where(html[data-hp-page="downloadscat"]) .phc-file-desc {
    margin:0 0 7px!important;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    color:var(--dc-muted)!important;

    font-size:.72rem!important;
    line-height:1.75;
}

:where(html[data-hp-page="downloadscat"]) .phc-file-tags {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
}

:where(html[data-hp-page="downloadscat"]) .phc-tag {
    min-height:24px;
    padding:0 7px;

    display:inline-flex;
    align-items:center;
    gap:4px;

    border:1px solid transparent;
    border-radius:7px;

    font-size:.64rem;
    line-height:1;
    font-weight:850;
}

:where(html[data-hp-page="downloadscat"]) .phc-tag-premium {
    color:var(--dc-red);
    border-color:var(--dc-red-line);
    background:var(--dc-red-soft);
}

:where(html[data-hp-page="downloadscat"]) .phc-tag-public {
    color:var(--dc-green);
    border-color:var(--dc-green-line);
    background:var(--dc-green-soft);
}

:where(html[data-hp-page="downloadscat"]) .phc-tag-size {
    color:var(--dc-orange);
    border-color:var(--dc-orange-line);
    background:var(--dc-orange-soft);
}

:where(html[data-hp-page="downloadscat"]) .phc-file-action {
    flex:0 0 auto;
}

/* =========================================================
   Pagination
   ========================================================= */
:where(html[data-hp-page="downloadscat"]) .phc-smart-pagination {
    margin-top:14px;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:5px;
}

:where(html[data-hp-page="downloadscat"]) .phc-page-btn {
    min-width:34px;
    height:34px;
    padding:0 8px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dc-border);
    border-radius:9px;

    color:#475569;
    background:#fff;

    font-family:inherit;
    font-size:.70rem;
    line-height:1;
    font-weight:850;

    cursor:pointer;

    box-shadow:0 2px 6px rgba(15,23,42,.025);

    transition:
        transform var(--dc-transition),
        color var(--dc-transition),
        border-color var(--dc-transition),
        background var(--dc-transition),
        box-shadow var(--dc-transition);
}

:where(html[data-hp-page="downloadscat"]) .phc-page-btn:hover {
    transform:translateY(-1px);

    color:var(--dc-blue);
    border-color:var(--dc-blue-line);
    background:var(--dc-blue-soft);
}

:where(html[data-hp-page="downloadscat"]) .phc-page-btn.active {
    color:#fff;
    border-color:var(--dc-blue);
    background:var(--dc-gradient);

    box-shadow:0 7px 15px rgba(37,99,235,.18);
}

/* =========================================================
   Empty state / back button
   ========================================================= */
:where(html[data-hp-page="downloadscat"]) .phc-empty-state {
    padding:28px 18px;

    border:1px dashed var(--dc-blue-line);
    border-radius:15px;

    color:var(--dc-muted);
    background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);

    text-align:center;

    font-size:.80rem;
    line-height:1.75;
}

:where(html[data-hp-page="downloadscat"]) .phc-empty-state i {
    width:46px;
    height:46px;
    margin:0 auto 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dc-blue-line);
    border-radius:13px;

    color:var(--dc-blue);
    background:var(--dc-blue-soft);

    font-size:.92rem;
}

:where(html[data-hp-page="downloadscat"]) .phc-back-row {
    margin-top:16px;
}

:where(html[data-hp-page="downloadscat"]) .phc-back-btn {
    min-height:38px;
    padding:0 12px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--dc-border);
    border-radius:10px;

    color:var(--dc-muted)!important;
    background:#fff;

    font-size:.72rem;
    font-weight:850;

    text-decoration:none!important;

    transition:
        transform var(--dc-transition),
        color var(--dc-transition),
        border-color var(--dc-transition),
        background var(--dc-transition);
}

:where(html[data-hp-page="downloadscat"]) .phc-back-btn:hover {
    transform:translateY(-1px);

    color:var(--dc-blue)!important;
    border-color:var(--dc-blue-line);
    background:var(--dc-blue-soft);
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="downloadscat"]) .phc-downloads-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-downloads-header {
        padding:18px;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-downloads-heading {
        width:100%;
        min-width:0;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-search-wrapper {
        max-width:100%;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-cat-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="downloadscat"]) .phc-downloads-header {
        padding:15px;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-downloads-icon {
        width:46px;
        height:46px;
        flex-basis:46px;

        border-radius:13px;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-cat-grid {
        grid-template-columns:1fr;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-file-item {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-file-action {
        width:100%;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="downloadscat"]) .phc-downloads-title {
        font-size:1rem!important;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-search-box {
        height:auto;
        padding:5px;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-search-box > i {
        top:23px;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-search-box input {
        height:42px;
        width:100%;
        flex:1 1 calc(100% - 10px);
    }

    :where(html[data-hp-page="downloadscat"]) .phc-search-box button {
        width:100%;
        height:38px;
        margin:2px 0 0;
    }

    :where(html[data-hp-page="downloadscat"]) .phc-file-main {
        align-items:flex-start;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="downloadscat"]) .phc-search-box,
:where(html[data-hp-page="downloadscat"]) .phc-search-box button,
:where(html[data-hp-page="downloadscat"]) .phc-cat-box,
:where(html[data-hp-page="downloadscat"]) .phc-cat-icon-wrapper,
:where(html[data-hp-page="downloadscat"]) .phc-file-item,
:where(html[data-hp-page="downloadscat"]) .phc-page-btn,
:where(html[data-hp-page="downloadscat"]) .phc-back-btn {
        transition:none!important;
    }
}

/* error/internal-error.tpl */
:root:where(html[data-hp-page="internal-error"]) {
    --error-page: var(--hp-page);
    --error-card: var(--hp-surface);
    --error-soft: var(--hp-surface-soft);
    --error-border: var(--hp-line);
    --error-border-soft: #edf1f6;

    --error-text: var(--hp-ink);
    --error-text-2: var(--hp-ink-secondary);
    --error-muted: var(--hp-muted);
    --error-muted-2: #94a3b8;

    --error-blue: var(--hp-primary);
    --error-blue-dark: var(--hp-primary-hover);
    --error-blue-light: #60a5fa;
    --error-blue-soft: var(--hp-primary-soft);
    --error-blue-line: #bfdbfe;
    --error-gradient: linear-gradient(135deg, #60a5fa 0%, #2563eb 52%, #1d4ed8 100%);

    --error-amber: #d97706;
    --error-amber-soft: #fffbeb;
    --error-amber-line: #fde68a;

    --error-red: #dc2626;
    --error-red-soft: #fef2f2;
    --error-red-line: #fecaca;

    --error-debug-bg: var(--hp-ink);
    --error-debug-border: #1e293b;
    --error-debug-text: #cbd5e1;

    --error-radius-xl: 28px;
    --error-radius-lg: 18px;
    --error-radius-md: 13px;

    --error-shadow: 0 24px 70px rgba(15, 23, 42, 0.10),
                    0 5px 18px rgba(15, 23, 42, 0.035);

    --error-transition: 220ms cubic-bezier(.2, .8, .2, 1);
}

:where(html[data-hp-page="internal-error"]) * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html:where(html[data-hp-page="internal-error"]),
:where(html[data-hp-page="internal-error"]) body {
    min-height: 100%;
}

:where(html[data-hp-page="internal-error"]) body {
    min-height: 100vh;
    padding: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--error-text);
    background:
        radial-gradient(circle at 10% 0%, rgba(96, 165, 250, .10), transparent 26%),
        radial-gradient(circle at 95% 100%, rgba(37, 99, 235, .06), transparent 24%),
        var(--error-page);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

:where(html[data-hp-page="internal-error"]) .phc-error-wrapper {
    position: relative;
    width: 100%;
    max-width: 760px;
    overflow: hidden;

    border: 1px solid var(--error-border);
    border-radius: var(--error-radius-xl);
    background: var(--error-card);
    box-shadow: var(--error-shadow);
}

:where(html[data-hp-page="internal-error"]) .phc-error-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    z-index: 5;
    background: var(--error-gradient);
}

:where(html[data-hp-page="internal-error"]) .phc-error-main {
    position: relative;
    padding: 46px 40px 38px;
    text-align: center;
    background:
        radial-gradient(circle at 8% 8%, rgba(96, 165, 250, .08), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

:where(html[data-hp-page="internal-error"]) .phc-error-main::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -105px;
    bottom: -118px;
    border-radius: 50%;
    background: var(--error-blue-soft);
    opacity: .85;
    pointer-events: none;
}

:where(html[data-hp-page="internal-error"]) .phc-icon-box {
    position: relative;
    z-index: 2;

    width: 92px;
    height: 92px;
    margin: 0 auto 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--error-blue-line);
    border-radius: 26px;

    color: #ffffff;
    background: var(--error-gradient);

    box-shadow:
        0 18px 34px rgba(37, 99, 235, .21),
        inset 0 1px 0 rgba(255, 255, 255, .20);
}

:where(html[data-hp-page="internal-error"]) .phc-icon-box svg {
    width: 38px;
    height: 38px;
    stroke: #ffffff;
}

:where(html[data-hp-page="internal-error"]) .phc-error-eyebrow {
    position: relative;
    z-index: 2;

    margin-bottom: 8px;

    color: var(--error-blue);
    font-size: 12px;
    line-height: 1.5;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

:where(html[data-hp-page="internal-error"]) h1 {
    position: relative;
    z-index: 2;

    margin-bottom: 10px;

    color: var(--error-text);
    font-size: 46px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -1.5px;
}

:where(html[data-hp-page="internal-error"]) h2 {
    position: relative;
    z-index: 2;

    max-width: 560px;
    margin: 0 auto 16px;

    color: var(--error-text-2);
    font-size: 20px;
    line-height: 1.6;
    font-weight: 700;
}

:where(html[data-hp-page="internal-error"]) .phc-error-description {
    position: relative;
    z-index: 2;

    max-width: 540px;
    margin: 0 auto;

    color: var(--error-muted);
    font-size: 15px;
    line-height: 1.85;
}

:where(html[data-hp-page="internal-error"]) .phc-error-description + .phc-error-description {
    margin-top: 3px;
}

:where(html[data-hp-page="internal-error"]) a {
    color: var(--error-blue);
    text-decoration: none;
    font-weight: 700;
}

:where(html[data-hp-page="internal-error"]) a:hover {
    color: var(--error-blue-dark);
}

:where(html[data-hp-page="internal-error"]) .phc-actions {
    position: relative;
    z-index: 2;

    margin-top: 28px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

:where(html[data-hp-page="internal-error"]) .phc-btn {
    min-width: 180px;
    min-height: 50px;
    padding: 0 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 12px;

    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    text-decoration: none;

    transition:
        transform var(--error-transition),
        color var(--error-transition),
        border-color var(--error-transition),
        background var(--error-transition),
        box-shadow var(--error-transition);
}

:where(html[data-hp-page="internal-error"]) .phc-btn:hover {
    transform: translateY(-2px);
}

:where(html[data-hp-page="internal-error"]) .phc-btn-primary {
    border: 1px solid transparent;
    color: #ffffff;
    background: var(--error-gradient);
    box-shadow: 0 12px 26px -12px rgba(37, 99, 235, .92);
}

:where(html[data-hp-page="internal-error"]) .phc-btn-primary:hover {
    color: #ffffff;
    box-shadow: 0 17px 31px -12px rgba(37, 99, 235, .98);
}

:where(html[data-hp-page="internal-error"]) .phc-btn-secondary {
    border: 1px solid var(--error-border);
    color: var(--error-text-2);
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
}

:where(html[data-hp-page="internal-error"]) .phc-btn-secondary:hover {
    color: var(--error-blue);
    border-color: var(--error-blue-line);
    background: var(--error-blue-soft);
}

:where(html[data-hp-page="internal-error"]) .phc-btn svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

/* ==========================
   Diagnostic / Admin area
   ========================== */
:where(html[data-hp-page="internal-error"]) .phc-diagnostics {
    position: relative;
    z-index: 2;

    padding: 0 28px 28px;
    background: #ffffff;
}

:where(html[data-hp-page="internal-error"]) .phc-diagnostics-inner {
    padding-top: 22px;
    border-top: 1px solid var(--error-border-soft);
}

:where(html[data-hp-page="internal-error"]) .debug-wrapper {
    margin-top: 14px;
    text-align: left;
}

:where(html[data-hp-page="internal-error"]) .debug-wrapper:first-child {
    margin-top: 0;
}

:where(html[data-hp-page="internal-error"]) .environment-issues {
    padding: 14px 15px;

    border: 1px solid var(--error-amber-line);
    border-radius: 12px;

    color: #92400e;
    background: var(--error-amber-soft);

    font-size: 13px;
    line-height: 1.75;
    font-weight: 600;
}

:where(html[data-hp-page="internal-error"]) .environment-issues::before {
    content: "Environment issue";
    display: block;
    margin-bottom: 6px;

    color: var(--error-amber);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

:where(html[data-hp-page="internal-error"]) .debug-box {
    position: relative;
    overflow-x: auto;

    padding: 18px;

    border: 1px solid var(--error-debug-border);
    border-radius: 14px;

    color: var(--error-debug-text);
    background:
        linear-gradient(180deg, #111c30 0%, var(--error-debug-bg) 100%);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);

    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    line-height: 1.75;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

:where(html[data-hp-page="internal-error"]) .debug-box:empty {
    display: none;
}

:where(html[data-hp-page="internal-error"]) .admin-help {
    display: block;
    margin-bottom: 12px;
    padding-bottom: 10px;

    border-bottom: 1px solid rgba(148, 163, 184, .16);

    color: #fbbf24;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.7;
    font-weight: 800;
    white-space: normal;
}

@media (max-width: 576px) {
    :where(html[data-hp-page="internal-error"]) body {
        padding: 14px;
        align-items: flex-start;
    }

    :where(html[data-hp-page="internal-error"]) .phc-error-wrapper {
        margin-top: 14px;
        border-radius: 21px;
    }

    :where(html[data-hp-page="internal-error"]) .phc-error-main {
        padding: 34px 18px 28px;
    }

    :where(html[data-hp-page="internal-error"]) .phc-icon-box {
        width: 80px;
        height: 80px;
        border-radius: 22px;
    }

    :where(html[data-hp-page="internal-error"]) .phc-icon-box svg {
        width: 34px;
        height: 34px;
    }

    :where(html[data-hp-page="internal-error"]) h1 {
        font-size: 38px;
    }

    :where(html[data-hp-page="internal-error"]) h2 {
        font-size: 17px;
    }

    :where(html[data-hp-page="internal-error"]) .phc-error-description {
        font-size: 14px;
    }

    :where(html[data-hp-page="internal-error"]) .phc-actions {
        flex-direction: column;
    }

    :where(html[data-hp-page="internal-error"]) .phc-btn {
        width: 100%;
        min-width: 0;
    }

    :where(html[data-hp-page="internal-error"]) .phc-diagnostics {
        padding: 0 16px 18px;
    }

    :where(html[data-hp-page="internal-error"]) .debug-box {
        padding: 14px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(html[data-hp-page="internal-error"]) .phc-btn {
        transition: none;
    }
}

/* error/page-not-found.tpl */
:root:where(html:has(.phc-404-wrap)) {
    --err-bg:var(--hp-page);
    --err-card:var(--hp-surface);
    --err-border:var(--hp-line);
    --err-border-soft:#edf1f6;

    --err-text:var(--hp-ink);
    --err-text-2:var(--hp-ink-secondary);
    --err-muted:var(--hp-muted);

    --err-blue:var(--hp-primary);
    --err-blue-dark:var(--hp-primary-hover);
    --err-blue-light:#60a5fa;
    --err-blue-soft:var(--hp-primary-soft);
    --err-blue-line:#bfdbfe;
    --err-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --err-radius-xl:28px;
    --err-radius-lg:18px;
    --err-radius-md:13px;

    --err-shadow:0 22px 60px rgba(15,23,42,.08),0 5px 18px rgba(15,23,42,.035);
    --err-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html:has(.phc-404-wrap)) .phc-404-wrap {
    min-height:620px;
    padding:48px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    direction:rtl;
    text-align:center;
}

:where(html:has(.phc-404-wrap)) .phc-404-card {
    position:relative;
    width:100%;
    max-width:820px;
    overflow:hidden;
    padding:48px 34px 38px;

    border:1px solid var(--err-border);
    border-radius:var(--err-radius-xl);
    background:
        radial-gradient(circle at 10% 5%,rgba(96,165,250,.10),transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    box-shadow:var(--err-shadow);
}

:where(html:has(.phc-404-wrap)) .phc-404-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:var(--err-gradient);
}

:where(html:has(.phc-404-wrap)) .phc-404-card::after {
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:-130px;
    bottom:-145px;
    border-radius:50%;
    background:var(--err-blue-soft);
    opacity:.8;
    pointer-events:none;
}

:where(html:has(.phc-404-wrap)) .phc-404-icon-wrap {
    position:relative;
    z-index:2;
    margin-bottom:24px;
}

:where(html:has(.phc-404-wrap)) .phc-404-icon {
    width:104px;
    height:104px;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--err-blue-line);
    border-radius:28px;

    color:#fff;
    background:var(--err-gradient);
    box-shadow:
        0 18px 34px rgba(37,99,235,.20),
        inset 0 1px 0 rgba(255,255,255,.18);

    font-size:2.15rem;
}

:where(html:has(.phc-404-wrap)) .phc-404-code {
    position:relative;
    z-index:2;
    margin:0 0 8px!important;

    color:var(--err-blue)!important;
    font-size:5.4rem!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:-.04em;
}

:where(html:has(.phc-404-wrap)) .phc-404-title {
    position:relative;
    z-index:2;
    margin:0 0 12px!important;

    color:var(--err-text)!important;
    font-size:1.45rem!important;
    line-height:1.6;
    font-weight:900!important;
}

:where(html:has(.phc-404-wrap)) .phc-404-desc {
    position:relative;
    z-index:2;
    max-width:560px;
    margin:0 auto 28px!important;

    color:var(--err-muted)!important;
    font-size:.96rem!important;
    line-height:1.95!important;
    font-weight:550;
}

:where(html:has(.phc-404-wrap)) .phc-404-actions {
    position:relative;
    z-index:2;

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:10px;
}

:where(html:has(.phc-404-wrap)) .phc-404-btn {
    min-width:180px;
    min-height:50px;
    padding:0 20px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:8px;

    border-radius:12px!important;

    font-family:inherit;
    font-size:.88rem!important;
    font-weight:900!important;
    text-decoration:none!important;

    transition:
        transform var(--err-transition),
        box-shadow var(--err-transition),
        border-color var(--err-transition),
        background var(--err-transition);
}

:where(html:has(.phc-404-wrap)) .phc-404-btn:hover {
    transform:translateY(-2px);
}

:where(html:has(.phc-404-wrap)) .phc-404-btn-primary {
    border:0!important;
    color:#fff!important;
    background:var(--err-gradient)!important;
    box-shadow:0 12px 25px -12px rgba(37,99,235,.92);
}

:where(html:has(.phc-404-wrap)) .phc-404-btn-primary:hover {
    color:#fff!important;
    box-shadow:0 17px 30px -12px rgba(37,99,235,.96);
}

:where(html:has(.phc-404-wrap)) .phc-404-btn-secondary {
    border:1px solid var(--err-border)!important;
    color:var(--err-text-2)!important;
    background:#fff!important;
    box-shadow:0 6px 16px rgba(15,23,42,.04);
}

:where(html:has(.phc-404-wrap)) .phc-404-btn-secondary i {
    color:var(--err-blue);
}

:where(html:has(.phc-404-wrap)) .phc-404-btn-secondary:hover {
    color:var(--err-blue)!important;
    border-color:var(--err-blue-line)!important;
    background:var(--err-blue-soft)!important;
}

:where(html:has(.phc-404-wrap)) .phc-404-hint {
    position:relative;
    z-index:2;
    margin-top:26px;
    padding-top:18px;

    border-top:1px solid var(--err-border-soft);
    color:#94a3b8;

    font-size:.78rem;
    line-height:1.7;
    font-weight:650;
}

@media(max-width:767.98px) {
    :where(html:has(.phc-404-wrap)) .phc-404-wrap {
        min-height:auto;
        padding:30px 12px;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-card {
        padding:36px 20px 28px;
        border-radius:22px;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-icon {
        width:88px;
        height:88px;
        border-radius:24px;
        font-size:1.8rem;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-code {
        font-size:4.3rem!important;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-title {
        font-size:1.20rem!important;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-desc {
        font-size:.88rem!important;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-actions {
        flex-direction:column;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-btn {
        width:100%;
        min-width:0;
    }
}

@media(max-width:420px) {
    :where(html:has(.phc-404-wrap)) .phc-404-card {
        padding:30px 16px 24px;
        border-radius:19px;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-code {
        font-size:3.7rem!important;
    }

    :where(html:has(.phc-404-wrap)) .phc-404-title {
        font-size:1.08rem!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html:has(.phc-404-wrap)) .phc-404-btn {
        transition:none!important;
    }
}

/* homepage.tpl */
/* متغیرهای رنگی مدرن و پرمیوم */
:root:where(html[data-hp-page="homepage"]) {
    --dash-bg: #f4f7f9;
    --dash-card-bg: var(--hp-surface);
    --dash-border: var(--hp-line);
    --dash-input-bg: var(--hp-surface-soft);
    --dash-text-main: var(--hp-ink);
    --dash-text-muted: var(--hp-muted);
    --dash-accent: var(--hp-primary);
    --dash-accent-hover: var(--hp-primary-hover);
    --dash-accent-glow: rgba(37, 99, 235, 0.15);
    --dash-radius: 20px;
    --dash-radius-sm: 12px;
    --dash-shadow-soft: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
    --dash-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:where(html[data-hp-page="homepage"]) body {
    background-color: var(--dash-bg);
    background-image: radial-gradient(circle at 50% -20%, #e0e7ff 0%, transparent 50%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    direction: rtl;
    text-align: right;
}

@keyframes hp-home-login-enter {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

:where(html[data-hp-page="homepage"]) .premium-login-container {
    display: flex;
    max-width: 1050px;
    width: 95%;
    background: var(--dash-card-bg);
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow-soft);
    overflow: hidden;
    margin: 40px auto;
    animation: hp-home-login-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* سمت راست: فرم ورود */
:where(html[data-hp-page="homepage"]) .login-form-side {
    flex: 1.2;
    padding: 60px 70px;
    background: var(--dash-card-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

:where(html[data-hp-page="homepage"]) .form-header {
    margin-bottom: 40px;
    text-align: right;
}

:where(html[data-hp-page="homepage"]) .form-header h2 {
    color: var(--dash-text-main);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

:where(html[data-hp-page="homepage"]) .form-header p {
    color: var(--dash-text-muted);
    font-size: 1rem;
    line-height: 1.5;
}

:where(html[data-hp-page="homepage"]) .form-group {
    margin-bottom: 22px;
    position: relative;
}

:where(html[data-hp-page="homepage"]) .input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

:where(html[data-hp-page="homepage"]) .input-icon {
    position: absolute;
    right: 18px; 
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.1rem;
    transition: var(--dash-transition);
    z-index: 2;
}

:where(html[data-hp-page="homepage"]) .premium-input {
    width: 100%;
    background: var(--dash-input-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 16px 48px 16px 16px; 
    font-size: 1rem;
    color: var(--dash-text-main);
    transition: var(--dash-transition);
    outline: none;
    box-shadow: none;
    font-family: inherit;
    text-align: left;
    direction: ltr;
    box-sizing: border-box;
}

:where(html[data-hp-page="homepage"]) .pw-input {
    padding-left: 50px; 
}

:where(html[data-hp-page="homepage"]) .premium-input::placeholder {
    color: #94a3b8;
    text-align: right;
}

:where(html[data-hp-page="homepage"]) .premium-input:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}

:where(html[data-hp-page="homepage"]) .premium-input:focus {
    background: #ffffff;
    border-color: var(--dash-accent);
    box-shadow: 0 0 0 4px var(--dash-accent-glow);
}

:where(html[data-hp-page="homepage"]) .premium-input:focus ~ .input-icon,
:where(html[data-hp-page="homepage"]) .premium-input:not(:placeholder-shown) ~ .input-icon {
    color: var(--dash-accent);
}

:where(html[data-hp-page="homepage"]) .btn-reveal {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    transition: var(--dash-transition);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

:where(html[data-hp-page="homepage"]) .btn-reveal:hover {
    background: #f1f5f9;
    color: var(--dash-accent);
}

:where(html[data-hp-page="homepage"]) .auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

:where(html[data-hp-page="homepage"]) .auth-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--dash-text-muted);
    cursor: pointer;
    margin: 0;
    user-select: none;
}

:where(html[data-hp-page="homepage"]) .auth-options input[type="checkbox"] {
    accent-color: var(--dash-accent);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

:where(html[data-hp-page="homepage"]) .forgot-link {
    color: var(--dash-accent);
    text-decoration: none;
    font-weight: 600;
    transition: var(--dash-transition);
}

:where(html[data-hp-page="homepage"]) .forgot-link:hover {
    color: var(--dash-accent-hover);
    text-decoration: underline;
}

/* دکمه‌ها در دسکتاپ */
:where(html[data-hp-page="homepage"]) .action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

:where(html[data-hp-page="homepage"]) .btn-submit {
    flex: 2;
    background: var(--dash-accent);
    color: white;
    border: none;
    border-radius: var(--dash-radius-sm);
    padding: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--dash-transition);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

:where(html[data-hp-page="homepage"]) .btn-submit:hover:not(:disabled) {
    background: var(--dash-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.35);
}

:where(html[data-hp-page="homepage"]) .btn-submit:active:not(:disabled) {
    transform: translateY(0);
}

:where(html[data-hp-page="homepage"]) .btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

:where(html[data-hp-page="homepage"]) .btn-register-outline {
    flex: 1;
    background: #ffffff;
    color: var(--dash-text-main);
    border: 2px solid var(--dash-border);
    border-radius: var(--dash-radius-sm);
    padding: 16px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--dash-transition);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    gap: 8px;
}

:where(html[data-hp-page="homepage"]) .btn-register-outline:hover {
    border-color: var(--dash-accent);
    color: var(--dash-accent);
    background: var(--dash-input-bg);
}

/* --- انیمیشن لودینگ دکمه‌ها --- */
:where(html[data-hp-page="homepage"]) .is-loading-btn {
    position: relative !important;
    pointer-events: none !important;
    color: transparent !important;
}
:where(html[data-hp-page="homepage"]) .is-loading-btn i,
:where(html[data-hp-page="homepage"]) .is-loading-btn span {
    opacity: 0 !important;
}
:where(html[data-hp-page="homepage"]) .is-loading-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: dash-btn-spin 0.8s linear infinite;
}
:where(html[data-hp-page="homepage"]) .btn-register-outline.is-loading-btn::after {
    border: 3px solid rgba(37, 99, 235, 0.2);
    border-top-color: var(--dash-accent);
}
@keyframes dash-btn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes hp-home-login-background {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* سمت چپ: بنر دسکتاپ */
:where(html[data-hp-page="homepage"]) .login-brand-side {
    flex: 1;
    background: linear-gradient(-45deg, #1e1b4b, #4338ca, #3b82f6, #0ea5e9);
    background-size: 400% 400%;
    animation: hp-home-login-background 15s ease infinite;
    padding: 60px 45px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

:where(html[data-hp-page="homepage"]) .login-brand-side::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -100px;
    right: -100px;
    filter: blur(40px);
}

:where(html[data-hp-page="homepage"]) .login-brand-side::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    bottom: -80px;
    left: -80px;
    filter: blur(30px);
}

:where(html[data-hp-page="homepage"]) .brand-content-wrapper {
    position: relative;
    z-index: 2;
}

:where(html[data-hp-page="homepage"]) .brand-title {
    font-size: 2.2rem;
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

:where(html[data-hp-page="homepage"]) .brand-subtitle {
    font-size: 1.1rem;
    opacity: 0.95;
    line-height: 1.8;
    text-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

/* ========================================= */
/* استایل اختصاصی موبایل (فوق مینیمال و شیک) */
/* ========================================= */
@media (max-width: 768px) {
    :where(html[data-hp-page="homepage"]) body { 
        background-color: var(--dash-card-bg); 
        align-items: flex-start; /* چسبیدن به بالای صفحه */
    }

    :where(html[data-hp-page="homepage"]) .premium-login-container {
        flex-direction: column;
        width: 100%;
        border-radius: 0;
        margin: 0;
        padding: 0;
        min-height: 100dvh;
        box-shadow: none;
        animation: none;
    }

    /* مخفی کردن بنر گرافیکی در موبایل برای تمیزی بیشتر */
    :where(html[data-hp-page="homepage"]) .login-brand-side { 
        display: none; 
    }

    :where(html[data-hp-page="homepage"]) .login-form-side { 
        padding: 40px 25px; 
        flex: 1; 
        justify-content: center;
    }

    :where(html[data-hp-page="homepage"]) .form-header { margin-bottom: 30px;}
    :where(html[data-hp-page="homepage"]) .form-header h2 { font-size: 1.5rem; }
    :where(html[data-hp-page="homepage"]) .form-header p { font-size: 0.9rem; }

    :where(html[data-hp-page="homepage"]) .premium-input { padding: 14px 45px 14px 16px; font-size: 0.95rem; }
    :where(html[data-hp-page="homepage"]) .pw-input { padding-left: 48px; }   
    :where(html[data-hp-page="homepage"]) .auth-options { font-size: 0.9rem; margin-bottom: 25px; }

    /* دکمه‌ها در یک ردیف در موبایل */
    :where(html[data-hp-page="homepage"]) .action-buttons { 
        flex-direction: row; 
        gap: 10px; 
        margin-top: 15px;
    }

    :where(html[data-hp-page="homepage"]) .btn-submit { 
        padding: 14px; 
        font-size: 1rem; 
        flex: 1.5; 
    }

    :where(html[data-hp-page="homepage"]) .btn-register-outline { 
        padding: 14px; 
        font-size: 0.95rem; 
        flex: 1; 
    }
}

:where(html[data-hp-page="homepage"]) input:-webkit-autofill,
:where(html[data-hp-page="homepage"]) input:-webkit-autofill:hover,
:where(html[data-hp-page="homepage"]) input:-webkit-autofill:focus,
:where(html[data-hp-page="homepage"]) input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px #ffffff inset !important;
    -webkit-text-fill-color: var(--dash-text-main) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* includes/captcha.tpl */
/* Soft UI CAPTCHA Styles */
.soft-captcha-box {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
    padding: 1.25rem;
    border: 1px solid rgba(0,0,0,0.05);
    margin-top: 10px;
}

.soft-captcha-box p {
    color: #8392ab;
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    width: 100%;
}

.soft-captcha-img {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    max-width: 100%;
    height: auto;
    border: 1px solid #e9ecef;
}

.soft-input-captcha {
    border-radius: 10px !important;
    border: 1px solid #d2d6da;
    padding: 0.6rem 1rem;
    color: #495057;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) inset;
    text-align: center;
    letter-spacing: 4px; /* ایجاد فاصله بین حروف برای خوانایی بهتر کپچا */
    font-weight: 600;
}

.soft-input-captcha:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    outline: 0;
}

/* includes/flashmessage.tpl */
/* Soft UI Flash Messages (Alerts) */
.soft-alert {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03) !important;
    font-weight: 500;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
}

/* استایل‌های اختصاصی برای هر نوع پیام */
.soft-alert.alert-danger { 
    background: linear-gradient(310deg, #fdd1d1 0%, #ffe4e4 100%) !important; 
    color: #b70000 !important; 
}

.soft-alert.alert-success { 
    background: linear-gradient(310deg, #d4fce1 0%, #e6fced 100%) !important; 
    color: #0b8e36 !important; 
}

.soft-alert.alert-warning { 
    background: linear-gradient(310deg, #fff2c4 0%, #fff7db 100%) !important; 
    color: #b38200 !important; 
}

.soft-alert.alert-info { 
    background: linear-gradient(310deg, #d3eafc 0%, #e6f2fc 100%) !important; 
    color: #0c569c !important; 
}

/* includes/generate-password.tpl */
/* Soft UI Modal & Form Styles */
.soft-modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);
    overflow: hidden;
}

.soft-modal-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 20px 24px;
    align-items: center;
}

.soft-modal-header .modal-title {
    color: #344767;
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0;
}

.soft-modal-header .close {
    color: #8392ab;
    opacity: 0.7;
    text-shadow: none;
    transition: all 0.3s ease;
}

.soft-modal-header .close:hover {
    color: #ea0606;
    opacity: 1;
}

.soft-modal-body {
    padding: 24px;
}

.soft-modal-footer {
    border-top: 1px solid rgba(0,0,0,0.05);
    background-color: #f8f9fa;
    padding: 16px 24px;
}

/* Soft Inputs */
.soft-input {
    border-radius: 10px;
    border: 1px solid #d2d6da;
    padding: 0.6rem 1rem;
    color: #495057;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) inset;
}

.soft-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: 0;
}

/* Soft Buttons */
.soft-btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.soft-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.soft-btn-light {
    background-color: #e9ecef;
    color: #344767;
    box-shadow: none;
}

.soft-btn-light:hover {
    background-color: #dde1e6;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.soft-btn-warning {
    background: linear-gradient(310deg, #f53939, #fbcf33);
    color: #fff;
}

.soft-btn-danger {
    background: linear-gradient(310deg, #ea0606, #ff667c);
    color: #fff;
}

.soft-btn-primary {
    background: linear-gradient(310deg, #2152ff, #21d4fd);
    color: #fff;
}

/* Soft Alert */
.soft-alert-danger {
    background-image: linear-gradient(310deg, #fdd1d1 0%, #ffe4e4 100%);
    color: #b70000;
    border: none;
    border-radius: 10px;
}

/* includes/navbar.tpl */
/* Soft UI Navbar Variables & Styles */
:root {
    --soft-nav-text: #344767;
    --soft-nav-muted: #8392ab;
    --soft-nav-hover-bg: #f8f9fa;
    --soft-nav-primary: #3b82f6;
    --soft-nav-primary-bg: rgba(59, 130, 246, 0.08);
    --soft-dropdown-shadow: 0 8px 26px -4px rgba(20, 20, 20, 0.08), 0 2px 8px -2px rgba(20, 20, 20, 0.04);
    --soft-radius-md: 12px;
    --soft-radius-lg: 16px;
}

.custom-nav-item {
    position: relative;
    list-style: none;
}

.custom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px;
    color: var(--soft-nav-text);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--soft-radius-md);
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.custom-nav-link:hover, .custom-nav-item:hover > .custom-nav-link {
    background-color: var(--soft-nav-primary-bg);
    color: var(--soft-nav-primary);
}

.nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-clientsnum {
    margin: 4px 0 0 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--soft-nav-muted);
    transition: color 0.3s ease;
}

.custom-nav-link:hover .custom-clientsnum {
    color: var(--soft-nav-primary);
    opacity: 0.8;
}

/* Dropdown Soft UI Style */
.custom-dropdown-menu {
    position: absolute;
    top: 110%;
    right: 0; /* Align to right for RTL, use left: 0 for LTR */
    min-width: 220px;
    background: #ffffff;
    border: none;
    border-radius: var(--soft-radius-lg);
    box-shadow: var(--soft-dropdown-shadow);
    padding: 12px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1050;
}

/* Show dropdown on hover (Desktop) */
.custom-nav-item:hover .custom-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: var(--soft-nav-text);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--soft-radius-md);
    transition: all 0.2s ease;
    text-decoration: none !important;
    gap: 10px;
}

.custom-dropdown-item i {
    font-size: 1.1rem;
    color: var(--soft-nav-muted);
    transition: color 0.2s ease;
    width: 24px;
    text-align: center;
}

.custom-dropdown-item:hover {
    background-color: var(--soft-nav-hover-bg);
    color: var(--soft-nav-primary);
    transform: translateX(-4px); /* RTL slide effect */
}

.custom-dropdown-item:hover i {
    color: var(--soft-nav-primary);
}

.custom-divider {
    height: 0;
    margin: 8px 0;
    overflow: hidden;
    border-top: 1px dashed rgba(131, 146, 171, 0.2);
}

/* Soft Badges */
.custom-nav-item .badge {
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.custom-nav-item .badge-primary {
    background-color: var(--soft-nav-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.custom-nav-item .badge-info {
    background-color: #e1f0ff;
    color: var(--soft-nav-primary);
}

/* includes/navbarmin.tpl */
/* Soft UI Navbar Variables & Styles */
.custom-nav-item.hp-nav-compact {
    position: relative;
    list-style: none;
}

:where(.hp-nav-compact) .custom-nav-link {
    display: flex;
    flex-direction: row; /* تغییر از column به row برای قرارگیری در یک خط */
    align-items: center; /* وسط‌چین کردن عمودی */
    gap: 8px; /* ایجاد فاصله بین حساب و خوش‌آمدید */
    padding: 3px 16px;
    color: var(--soft-nav-text);
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--soft-radius-md);
    transition: all 0.3s ease;
    text-decoration: none !important;
}

:where(.hp-nav-compact) .custom-nav-link:hover,
.custom-nav-item.hp-nav-compact:hover > .custom-nav-link {
    background-color: var(--soft-nav-primary-bg);
    color: var(--soft-nav-primary);
}

:where(.hp-nav-compact) .nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(.hp-nav-compact) .custom-clientsnum {
    margin: 0; /* حذف مارجین (margin: 4px 0 0 0 قبلی پاک شود) */
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--soft-nav-muted);
    transition: color 0.3s ease;
}

:where(.hp-nav-compact) .custom-nav-link:hover .custom-clientsnum {
    color: var(--soft-nav-primary);
    opacity: 0.8;
}

:where(.hp-nav-compact) .custom-dropdown-menu {
    position: absolute !important; /* قفل کردن پوزیشن */
    top: 110% !important;
    left: 0 !important; 
    right: auto !important;
    min-width: 220px !important; /* جلوگیری از کاهش عرض */
    width: max-content !important; /* اطمینان از حفظ عرض محتوا */
    background: #ffffff;
    border: none;
    border-radius: var(--soft-radius-lg);
    box-shadow: var(--soft-dropdown-shadow);
    padding: 12px;
    margin: 0 !important; /* جلوگیری از مارجین جاوااسکریپت */
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) !important; /* جلوگیری از transform جاوااسکریپت */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1050;
}

.custom-nav-item.hp-nav-compact:hover .custom-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) !important; /* اعمال دقیق موقعیت در حالت هاور */
}

:where(.hp-nav-compact) .custom-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: var(--soft-nav-text);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--soft-radius-md);
    transition: all 0.2s ease;
    text-decoration: none !important;
    gap: 10px;
}

:where(.hp-nav-compact) .custom-dropdown-item i {
    font-size: 1.1rem;
    color: var(--soft-nav-muted);
    transition: color 0.2s ease;
    width: 24px;
    text-align: center;
}

:where(.hp-nav-compact) .custom-dropdown-item:hover {
    background-color: var(--soft-nav-hover-bg);
    color: var(--soft-nav-primary);
    transform: translateX(-4px); /* RTL slide effect */
}

:where(.hp-nav-compact) .custom-dropdown-item:hover i {
    color: var(--soft-nav-primary);
}

:where(.hp-nav-compact) .custom-divider {
    height: 0;
    margin: 8px 0;
    overflow: hidden;
    border-top: 1px dashed rgba(131, 146, 171, 0.2);
}

/* Soft Badges */
.custom-nav-item.hp-nav-compact .badge {
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
}

.custom-nav-item.hp-nav-compact .badge-primary {
    background-color: var(--soft-nav-primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.custom-nav-item.hp-nav-compact .badge-info {
    background-color: #e1f0ff;
    color: var(--soft-nav-primary);
}

/* includes/pwstrength.tpl */
/* Soft UI Password Strength Bar */
.soft-progress {
    height: 8px; /* ارتفاع ظریف و مدرن */
    border-radius: 10px;
    background-color: #e9ecef;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    margin-top: 10px;
}

.soft-progress .progress-bar {
    border-radius: 10px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

/* گرادیانت‌های نرم برای وضعیت‌های مختلف قدرت رمز عبور */
.soft-progress .bg-danger { 
    background: linear-gradient(310deg, #ea0606, #ff667c) !important; 
    box-shadow: 0 2px 6px rgba(234, 6, 6, 0.3);
}
.soft-progress .bg-warning { 
    background: linear-gradient(310deg, #f53939, #fbcf33) !important; 
    box-shadow: 0 2px 6px rgba(251, 207, 51, 0.3);
}
.soft-progress .bg-success { 
    background: linear-gradient(310deg, #17ad37, #98ec2d) !important; 
    box-shadow: 0 2px 6px rgba(23, 173, 55, 0.3);
}

.soft-password-tips {
    margin-top: 15px;
}

/* includes/sidebar.tpl */
:root{
    --sb-bg:var(--hp-surface);
    --sb-soft:var(--hp-surface-soft);
    --sb-border:var(--hp-line);
    --sb-border-soft:#edf1f6;
    --sb-text:var(--hp-ink);
    --sb-text-2:var(--hp-ink-secondary);
    --sb-muted:var(--hp-muted);
    --sb-muted-2:#94a3b8;
    --sb-blue:var(--hp-primary);
    --sb-blue-dark:var(--hp-primary-hover);
    --sb-blue-soft:var(--hp-primary-soft);
    --sb-blue-line:#bfdbfe;
    --sb-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);
    --sb-green:#16a34a;
    --sb-green-soft:#f0fdf4;
    --sb-green-line:#bbf7d0;
    --sb-red:#ef334f;
    --sb-red-soft:#fff1f2;
    --sb-red-line:#fecdd3;
    --sb-radius-xl:20px;
    --sb-radius-lg:14px;
    --sb-radius-md:11px;
    --sb-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --sb-shadow-md:0 16px 38px rgba(15,23,42,.08),0 4px 13px rgba(15,23,42,.03);
    --sb-transition:220ms cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   Card shell
   ========================================================= */
.soft-sidebar-card{
    position:relative;
    overflow:hidden;
    direction:rtl;
    text-align:right;
    border:1px solid var(--sb-border)!important;
    border-radius:var(--sb-radius-xl)!important;
    background:var(--sb-bg)!important;
    box-shadow:var(--sb-shadow-sm)!important;
    transition:border-color var(--sb-transition),box-shadow var(--sb-transition);
}
.soft-sidebar-card::before{
    content:"";
    position:absolute;
    top:0;right:0;left:0;
    height:2px;
    z-index:3;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.32),transparent);
}
.soft-sidebar-card:hover{
    border-color:#d5dfeb!important;
    box-shadow:var(--sb-shadow-md)!important;
}

/* =========================================================
   Header
   ========================================================= */
.soft-sidebar-card > .card-header{
    padding:16px 17px!important;
    border:0!important;
    border-bottom:1px solid var(--sb-border-soft)!important;
    background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)!important;
}
.soft-sidebar-card > .card-header .card-title{
    width:100%;
    margin:0!important;
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--sb-text)!important;
    font-size:.98rem!important;
    line-height:1.55;
    font-weight:900!important;
}
.soft-sidebar-card > .card-header .card-title > i:not(.card-minimise){
    width:34px;height:34px;flex:0 0 34px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--sb-blue-line);
    border-radius:10px;
    color:var(--sb-blue)!important;
    background:var(--sb-blue-soft);
    font-size:.76rem!important;
}
.soft-sidebar-card > .card-header .card-minimise{
    width:30px;height:30px;
    margin-right:auto;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--sb-border);
    border-radius:9px;
    color:var(--sb-muted-2)!important;
    background:#fff;
    font-size:.72rem!important;
    cursor:pointer;
    transition:color var(--sb-transition),border-color var(--sb-transition),background var(--sb-transition);
}
.soft-sidebar-card > .card-header .card-minimise:hover{
    color:var(--sb-blue)!important;
    border-color:var(--sb-blue-line);
    background:var(--sb-blue-soft);
}

/* =========================================================
   Dynamic BodyHtml
   ========================================================= */
.soft-sidebar-card > .collapsable-card-body > .card-body{
    padding:14px!important;
    color:var(--sb-text-2);
    font-size:.86rem;
    line-height:1.8;
}

/* =========================================================
   Interactive sidebar links only
   ========================================================= */
.soft-sidebar-card > .collapsable-card-body > .list-group[role="tablist"]{
    padding:9px!important;
    gap:4px;
}
.soft-sidebar-card > .collapsable-card-body > .list-group[role="tablist"] > a.list-group-item{
    min-height:44px;
    margin:0!important;
    padding:9px 11px!important;
    border:1px solid transparent!important;
    border-radius:var(--sb-radius-md)!important;
    color:var(--sb-text-2)!important;
    background:transparent!important;
    font-size:.87rem!important;
    line-height:1.55;
    font-weight:650!important;
    text-decoration:none!important;
    transition:transform var(--sb-transition),color var(--sb-transition),border-color var(--sb-transition),background var(--sb-transition),box-shadow var(--sb-transition);
}
.soft-sidebar-card > .collapsable-card-body > .list-group[role="tablist"] > a.list-group-item:hover:not(.disabled){
    transform:translateX(-2px);
    color:var(--sb-text)!important;
    border-color:#e1e8f0!important;
    background:#f8fafc!important;
}
.soft-sidebar-card > .collapsable-card-body > .list-group[role="tablist"] > a.list-group-item.active{
    color:var(--sb-blue)!important;
    border-color:var(--sb-blue-line)!important;
    background:linear-gradient(90deg,#eff6ff 0%,#f7faff 100%)!important;
    box-shadow:inset -3px 0 0 var(--sb-blue);
    font-weight:850!important;
}

/* linked menu internals */
.sidebar-menu-item-wrapper{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
}
.sidebar-menu-item-icon-wrapper{
    width:32px;height:32px;flex:0 0 32px;
    margin-left:8px;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:9px;
    color:var(--sb-muted);
    background:#f8fafc;
    font-size:.76rem;
}
a.list-group-item:hover .sidebar-menu-item-icon-wrapper{
    color:var(--sb-blue);
    background:var(--sb-blue-soft);
}
a.list-group-item.active .sidebar-menu-item-icon-wrapper{
    color:var(--sb-blue)!important;
    border:1px solid var(--sb-blue-line);
    background:#fff!important;
}
.sidebar-menu-item-label{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sidebar-menu-item-badge{
    flex:0 0 auto;
    margin-right:8px;
}

/* =========================================================
   STATIC / informational child items
   This is the key fix for Ticket Information.
   ========================================================= */
.soft-sidebar-card > .collapsable-card-body > .list-group[role="tablist"] > div.sidebar-static-item{
    margin:0 0 8px!important;
    padding:0!important;
    border:1px solid var(--sb-border-soft)!important;
    border-radius:12px!important;
    background:#f8fafc!important;
    color:var(--sb-text)!important;
}
.soft-sidebar-card > .collapsable-card-body > .list-group[role="tablist"] > div.sidebar-static-item:last-child{
    margin-bottom:0!important;
}
.sidebar-static-item-wrapper{
    position:relative;
    min-height:64px;
    width:100%;
    padding:11px 12px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
        "content badge";
    gap:10px;
    align-items:center;
}
.sidebar-static-item-content{
    grid-area:content;
    min-width:0;
    color:var(--sb-text);
    font-size:.84rem;
    line-height:1.75;
    font-weight:750;
}
/* WHMCS often returns title + value HTML; force meaningful elements to stack */
.sidebar-static-item-content > *{
    max-width:100%;
}
.sidebar-static-item-content strong,
.sidebar-static-item-content b{
    display:block!important;
    margin:0 0 3px!important;
    color:var(--sb-muted)!important;
    font-size:.74rem!important;
    line-height:1.5!important;
    font-weight:800!important;
}
.sidebar-static-item-content br{
    display:block;
    content:"";
    margin-top:3px;
}
.sidebar-static-item-badge{
    grid-area:badge;
    align-self:center;
    justify-self:start;
}
.sidebar-static-item-badge .badge{
    min-height:27px;
    padding:0 10px!important;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    float:none!important;
    border:1px solid var(--sb-green-line)!important;
    border-radius:9px!important;
    color:#15803d!important;
    background:var(--sb-green-soft)!important;
    box-shadow:none!important;
    font-size:.70rem!important;
    line-height:1!important;
    font-weight:900!important;
}
.sidebar-static-item-icon{
    margin-left:6px;
    color:var(--sb-blue);
}

/* Ticket Information card: clearer breathing room */
.soft-sidebar-ticket-info > .collapsable-card-body > .list-group[role="tablist"]{
    padding:10px!important;
}
.soft-sidebar-ticket-info .sidebar-static-item-wrapper{
    min-height:70px;
    padding:12px 13px;
}
.soft-sidebar-ticket-info .sidebar-static-item-content{
    font-size:.86rem;
    line-height:1.85;
}
.soft-sidebar-ticket-info > .card-footer{
    padding:10px!important;
    border-top:1px solid var(--sb-border-soft)!important;
    background:#fbfcfe!important;
}
/* keep WHMCS status full-width but clean */
.soft-sidebar-ticket-info > .card-footer .badge,
.soft-sidebar-ticket-info > .card-footer .label,
.soft-sidebar-ticket-info > .card-footer > div,
.soft-sidebar-ticket-info > .card-footer > span{
    max-width:100%;
}

/* =========================================================
   CC Recipients — dedicated, not generic
   ========================================================= */
.soft-sidebar-cc > .collapsable-card-body > .card-body{
    padding:12px!important;
    background:#fff;
}

/* remove empty recipient placeholders */
.soft-sidebar-cc > .collapsable-card-body > .card-body > :empty{
    display:none!important;
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    border:0!important;
}
.soft-sidebar-cc .card-body .list-group:empty,
.soft-sidebar-cc .card-body ul:empty{
    display:none!important;
}

/* existing recipients */
.soft-sidebar-cc .card-body .list-group{
    margin:0 0 10px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}
.soft-sidebar-cc .card-body .list-group-item{
    min-height:42px;
    margin:0 0 6px!important;
    padding:8px 10px!important;
    border:1px solid var(--sb-border-soft)!important;
    border-radius:10px!important;
    color:var(--sb-text-2)!important;
    background:#f8fafc!important;
    font-size:.79rem!important;
}

/* form/add row */
.soft-sidebar-cc .card-body form{
    width:100%;
    margin:0!important;
    padding:0!important;
}
.soft-sidebar-cc .card-body .input-group{
    width:100%!important;
    margin:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    direction:rtl;
}
.soft-sidebar-cc .card-body .input-group-prepend,
.soft-sidebar-cc .card-body .input-group-append{
    margin:0!important;
}
.soft-sidebar-cc .card-body input[type="text"],
.soft-sidebar-cc .card-body input[type="email"],
.soft-sidebar-cc .card-body .input-group .form-control{
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 12px!important;
    border:1px solid var(--sb-border)!important;
    border-left:0!important;
    border-radius:0 10px 10px 0!important;
    color:var(--sb-text)!important;
    background:#fff!important;
    box-shadow:none!important;
    font-family:inherit!important;
    font-size:.82rem!important;
    font-weight:600!important;
}
.soft-sidebar-cc .card-body input:focus,
.soft-sidebar-cc .card-body .form-control:focus{
    position:relative;
    z-index:2;
    outline:0!important;
    border-color:var(--sb-blue)!important;
    box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}

/* Add button: button, submit, anchor or input-group-text */
.soft-sidebar-cc .card-body .input-group button,
.soft-sidebar-cc .card-body .input-group input[type="submit"],
.soft-sidebar-cc .card-body .input-group a,
.soft-sidebar-cc .card-body .input-group .input-group-text,
.soft-sidebar-cc .card-body form > button,
.soft-sidebar-cc .card-body form > input[type="submit"]{
    min-width:78px!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0 13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid var(--sb-blue)!important;
    border-radius:10px 0 0 10px!important;
    color:#fff!important;
    background:var(--sb-gradient)!important;
    box-shadow:0 7px 16px rgba(37,99,235,.16)!important;
    font-family:inherit!important;
    font-size:.78rem!important;
    line-height:1!important;
    font-weight:900!important;
    text-decoration:none!important;
    cursor:pointer;
    white-space:nowrap;
}

/* Remove recipient button */
.soft-sidebar-cc .card-body .btn-danger,
.soft-sidebar-cc .card-body .btn-outline-danger,
.soft-sidebar-cc .card-body [class*="remove"].btn{
    width:30px!important;
    min-width:30px!important;
    height:30px!important;
    min-height:30px!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid var(--sb-red-line)!important;
    border-radius:8px!important;
    color:var(--sb-red)!important;
    background:#fff!important;
    box-shadow:none!important;
}

/* =========================================================
   Badges in linked menu/header
   ========================================================= */
.soft-sidebar-card > .card-header .badge,
.soft-sidebar-card > .collapsable-card-body > .list-group[role="tablist"] > a .badge{
    min-width:27px;
    min-height:24px;
    padding:0 8px!important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--sb-blue-line);
    border-radius:8px!important;
    color:var(--sb-blue)!important;
    background:var(--sb-blue-soft)!important;
    box-shadow:none!important;
    font-size:.68rem!important;
    font-weight:900!important;
}

/* =========================================================
   Footer + mobile select
   ========================================================= */
.soft-sidebar-card > .card-footer{
    padding:12px 16px!important;
    border:0!important;
    border-top:1px solid var(--sb-border-soft)!important;
    color:var(--sb-muted);
    background:#fbfcfe!important;
    font-size:.80rem;
    line-height:1.7;
}
.soft-mobile-select{
    width:100%;
    min-height:48px;
    padding:0 13px!important;
    border:1px solid var(--sb-border)!important;
    border-radius:12px!important;
    outline:0;
    color:var(--sb-text)!important;
    background:#f8fafc!important;
    box-shadow:none!important;
    font-family:inherit;
    font-size:.87rem;
    font-weight:650;
}
.soft-mobile-select:focus{
    border-color:var(--sb-blue)!important;
    background:#fff!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px){
    .soft-sidebar-card{border-radius:17px!important;}
    .soft-sidebar-card > .card-header{padding:14px!important;}
    .soft-sidebar-card > .card-header .card-title{font-size:.93rem!important;}
    .sidebar-static-item-wrapper{min-height:60px;padding:10px 11px;}
    .soft-sidebar-cc .card-body .input-group{flex-wrap:nowrap!important;}
}
@media(max-width:420px){
    .soft-sidebar-cc .card-body .input-group{
        flex-direction:column!important;
        gap:7px;
    }
    .soft-sidebar-cc .card-body input[type="text"],
    .soft-sidebar-cc .card-body input[type="email"],
    .soft-sidebar-cc .card-body .input-group .form-control{
        width:100%!important;
        border-left:1px solid var(--sb-border)!important;
        border-radius:10px!important;
    }
    .soft-sidebar-cc .card-body .input-group button,
    .soft-sidebar-cc .card-body .input-group input[type="submit"],
    .soft-sidebar-cc .card-body .input-group a,
    .soft-sidebar-cc .card-body .input-group .input-group-text{
        width:100%!important;
        border-radius:10px!important;
    }
}
@media(prefers-reduced-motion:reduce){
    .soft-sidebar-card,
    .soft-sidebar-card a.list-group-item{
        transition:none!important;
    }
}

/* knowledgebase.tpl */
:root:where(html[data-hp-page="knowledgebase"]) {
    --kb-card:var(--hp-surface);
    --kb-soft:var(--hp-surface-soft);
    --kb-border:var(--hp-line);
    --kb-divider:#edf1f6;

    --kb-text:var(--hp-ink);
    --kb-text-2:var(--hp-ink-secondary);
    --kb-muted:var(--hp-muted);
    --kb-muted-2:#94a3b8;

    --kb-blue:var(--hp-primary);
    --kb-blue-dark:var(--hp-primary-hover);
    --kb-blue-light:#60a5fa;
    --kb-blue-soft:var(--hp-primary-soft);
    --kb-blue-line:#bfdbfe;
    --kb-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --kb-green:#059669;
    --kb-green-soft:#ecfdf5;
    --kb-green-line:#a7f3d0;

    --kb-orange:#d97706;
    --kb-orange-soft:#fff7ed;
    --kb-orange-line:#fed7aa;

    --kb-radius-xl:24px;
    --kb-radius-lg:17px;
    --kb-radius-md:12px;

    --kb-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --kb-shadow-md:0 18px 44px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);
    --kb-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --kb-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-wrapper,
:where(html[data-hp-page="knowledgebase"]) .phc-kb-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-wrapper {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--kb-text-2);
}

/* =========================================================
   Knowledgebase header + search
   ========================================================= */
:where(html[data-hp-page="knowledgebase"]) .phc-kb-manager {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;

    border:1px solid var(--kb-border);
    border-radius:var(--kb-radius-xl);

    background:#fff;
    box-shadow:var(--kb-shadow-panel);
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;
    background:var(--kb-gradient);
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-header {
    min-height:104px;
    padding:20px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;

    border-bottom:1px solid var(--kb-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-heading {
    min-width:280px;

    display:flex;
    align-items:center;
    gap:13px;
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-main-icon {
    position:relative;

    width:52px;
    height:52px;
    flex:0 0 52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kb-blue-line);
    border-radius:15px;

    color:#fff;
    background:var(--kb-gradient);

    box-shadow:0 10px 22px rgba(37,99,235,.18);

    font-size:.98rem;
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-main-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-title {
    margin:0 0 4px!important;

    color:var(--kb-text)!important;
    font-size:1.08rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-subtitle {
    margin:0!important;
    max-width:560px;

    color:var(--kb-muted)!important;
    font-size:.80rem!important;
    line-height:1.75;
    font-weight:600;
}

/* Search */
:where(html[data-hp-page="knowledgebase"]) .phc-search-card {
    width:100%;
    max-width:430px;
    margin:0!important;
    padding:0!important;

    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-card form {
    margin:0;
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-input-group {
    position:relative;

    width:100%;
    height:48px;
    padding:0!important;

    display:flex;
    align-items:center;

    border:1px solid var(--kb-border)!important;
    border-radius:12px!important;

    background:#f8fafc!important;

    transition:
        border-color var(--kb-transition),
        background var(--kb-transition),
        box-shadow var(--kb-transition);
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-input-group:hover {
    border-color:#cbd5e1!important;
    background:#fff!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-input-group:focus-within {
    border-color:var(--kb-blue)!important;
    background:#fff!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-icon {
    position:absolute;
    right:14px;

    margin:0!important;

    color:var(--kb-muted-2)!important;
    font-size:.84rem!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-input-group:focus-within .phc-search-icon {
    color:var(--kb-blue)!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-input {
    flex:1;
    height:100%;

    padding:0 42px 0 10px!important;

    border:0!important;
    outline:0!important;

    color:var(--kb-text)!important;
    background:transparent!important;

    font-family:inherit!important;
    font-size:.84rem!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-input::placeholder {
    color:var(--kb-muted-2)!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-btn {
    min-width:86px;
    height:38px;
    margin-left:5px;
    padding:0 14px!important;

    border:1px solid var(--kb-blue)!important;
    border-radius:9px!important;

    color:#fff!important;
    background:var(--kb-gradient)!important;

    font-family:inherit!important;
    font-size:.74rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:0 7px 14px rgba(37,99,235,.14)!important;

    transition:
        transform var(--kb-transition),
        box-shadow var(--kb-transition);
}

:where(html[data-hp-page="knowledgebase"]) .phc-search-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(37,99,235,.20)!important;
}

/* =========================================================
   Section heading
   ========================================================= */
:where(html[data-hp-page="knowledgebase"]) .phc-kb-section-header {
    margin:0 0 12px;
    padding:0 2px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-section-heading {
    display:flex;
    align-items:center;
    gap:10px;
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-section-icon {
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kb-blue-line);
    border-radius:11px;

    color:var(--kb-blue);
    background:var(--kb-blue-soft);

    font-size:.78rem;
}

:where(html[data-hp-page="knowledgebase"]) .phc-kb-section-icon.is-popular {
    color:var(--kb-orange);
    border-color:var(--kb-orange-line);
    background:var(--kb-orange-soft);
}

:where(html[data-hp-page="knowledgebase"]) .phc-section-title {
    margin:0!important;

    display:block!important;

    color:var(--kb-text)!important;
    font-size:.96rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-section-subtitle {
    color:var(--kb-muted);
    font-size:.71rem;
    line-height:1.6;
}

/* =========================================================
   Categories
   ========================================================= */
:where(html[data-hp-page="knowledgebase"]) .phc-kb-categories {
    margin-bottom:20px;
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-card-wrap {
    position:relative;
    height:100%;
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-card-link {
    display:block;
    height:100%;

    color:inherit!important;
    text-decoration:none!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-card {
    position:relative;
    min-height:112px;
    height:100%;
    padding:14px 15px;

    display:flex;
    align-items:center;
    gap:12px;

    overflow:hidden;

    border:1px solid var(--kb-border);
    border-radius:15px;

    background:
        linear-gradient(145deg,#fff 0%,#fff 72%,#f8fbff 140%);

    box-shadow:var(--kb-shadow-sm);

    transition:
        transform var(--kb-transition),
        border-color var(--kb-transition),
        box-shadow var(--kb-transition);
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-card::after {
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    left:-52px;
    bottom:-58px;

    border-radius:50%;
    background:rgba(37,99,235,.055);

    pointer-events:none;
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-card:hover {
    transform:translateY(-2px);

    border-color:var(--kb-blue-line);

    box-shadow:0 13px 26px rgba(37,99,235,.07);
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-icon {
    position:relative;
    z-index:2;

    width:44px;
    height:44px;
    flex:0 0 44px;
    margin:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kb-blue-line);
    border-radius:12px;

    color:var(--kb-blue);
    background:var(--kb-blue-soft);

    font-size:.85rem;

    transition:
        transform var(--kb-transition),
        color var(--kb-transition),
        background var(--kb-transition);
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-card:hover .phc-cat-icon {
    transform:scale(1.05);

    color:#fff;
    background:var(--kb-gradient);
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-info {
    position:relative;
    z-index:2;

    min-width:0;
    flex:1;
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-title {
    margin:0!important;

    color:var(--kb-text)!important;
    font-size:.87rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-count {
    min-height:25px;
    padding:0 8px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kb-green-line);
    border-radius:8px!important;

    color:var(--kb-green)!important;
    background:var(--kb-green-soft)!important;

    font-size:.66rem!important;
    line-height:1;
    font-weight:850!important;

    white-space:nowrap;
}

:where(html[data-hp-page="knowledgebase"]) .phc-cat-desc {
    margin:6px 0 0!important;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    color:var(--kb-muted)!important;

    font-size:.72rem!important;
    line-height:1.7!important;
}

/* Admin edit */
:where(html[data-hp-page="knowledgebase"]) .phc-admin-edit-wrap {
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:4;
}

:where(html[data-hp-page="knowledgebase"]) .btn-hyper-warning {
    min-height:30px;
    padding:0 9px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid var(--kb-orange-line)!important;
    border-radius:8px!important;

    color:var(--kb-orange)!important;
    background:#fff!important;

    font-family:inherit!important;
    font-size:.66rem!important;
    line-height:1;
    font-weight:850!important;

    box-shadow:0 4px 10px rgba(217,119,6,.06)!important;

    transition:
        transform var(--kb-transition),
        color var(--kb-transition),
        border-color var(--kb-transition),
        background var(--kb-transition);
}

:where(html[data-hp-page="knowledgebase"]) .btn-hyper-warning:hover {
    transform:translateY(-1px);

    color:#fff!important;
    border-color:var(--kb-orange)!important;
    background:linear-gradient(135deg,#f59e0b,#d97706)!important;
}

/* =========================================================
   Popular articles
   ========================================================= */
:where(html[data-hp-page="knowledgebase"]) .phc-popular-articles {
    margin-top:4px;
}

:where(html[data-hp-page="knowledgebase"]) .phc-articles-list {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-item {
    position:relative;
    min-height:84px;
    margin:0!important;
    padding:12px 14px!important;

    display:flex;
    align-items:center;
    gap:11px;

    overflow:hidden;

    border:1px solid var(--kb-border)!important;
    border-radius:14px!important;

    color:inherit!important;
    background:#fff!important;

    text-decoration:none!important;

    box-shadow:var(--kb-shadow-sm)!important;

    transition:
        transform var(--kb-transition),
        border-color var(--kb-transition),
        box-shadow var(--kb-transition);
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-item::before {
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;
    background:var(--kb-gradient);
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-item:hover {
    transform:translateY(-1px);

    border-color:var(--kb-blue-line)!important;

    box-shadow:0 12px 24px rgba(37,99,235,.065)!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-icon {
    width:40px;
    height:40px;
    flex:0 0 40px;
    margin:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kb-blue-line);
    border-radius:11px;

    color:var(--kb-blue)!important;
    background:var(--kb-blue-soft)!important;

    font-size:.80rem!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-content {
    min-width:0;
    flex:1;
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-title {
    margin:0 0 3px!important;

    color:var(--kb-text)!important;

    font-size:.84rem!important;
    line-height:1.55;
    font-weight:900!important;

    transition:color var(--kb-transition);
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-item:hover .phc-article-title {
    color:var(--kb-blue)!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-text {
    margin:0!important;

    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;

    color:var(--kb-muted)!important;

    font-size:.71rem!important;
    line-height:1.7!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-edit {
    flex:0 0 auto;
    margin:0!important;
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-chevron {
    width:30px;
    height:30px;
    flex:0 0 30px;
    margin:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kb-border);
    border-radius:8px;

    color:var(--kb-muted-2)!important;
    background:#f8fafc;

    font-size:.64rem;

    transition:
        color var(--kb-transition),
        border-color var(--kb-transition),
        background var(--kb-transition),
        transform var(--kb-transition);
}

:where(html[data-hp-page="knowledgebase"]) .phc-article-item:hover .phc-article-chevron {
    transform:translateX(-1px);

    color:var(--kb-blue)!important;
    border-color:var(--kb-blue-line);
    background:var(--kb-blue-soft);
}

/* =========================================================
   Alerts
   ========================================================= */
:where(html[data-hp-page="knowledgebase"]) .phc-kb-wrapper .alert {
    border-radius:13px!important;

    font-size:.80rem!important;
    line-height:1.75;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="knowledgebase"]) .phc-kb-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-kb-header {
        padding:18px;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-kb-heading {
        width:100%;
        min-width:0;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-search-card {
        max-width:100%;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="knowledgebase"]) .phc-kb-header {
        padding:15px;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-kb-main-icon {
        width:46px;
        height:46px;
        flex-basis:46px;

        border-radius:13px;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-cat-card {
        min-height:98px;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-article-item {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-article-content {
        flex:1 1 calc(100% - 54px);
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-article-edit {
        margin-right:51px!important;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-article-chevron {
        margin-right:auto!important;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="knowledgebase"]) .phc-kb-title {
        font-size:1rem!important;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-search-input-group {
        height:auto;
        padding:5px!important;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-search-icon {
        top:23px;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-search-input {
        height:42px;
        width:100%;
        flex:1 1 calc(100% - 10px);
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-search-btn {
        width:100%;
        height:38px;
        margin:2px 0 0;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-cat-head {
        align-items:flex-start;
        flex-direction:column;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-cat-card {
        align-items:flex-start;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-article-edit {
        width:100%;
        margin:5px 0 0!important;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-article-edit .btn-hyper-warning {
        width:100%;
    }

    :where(html[data-hp-page="knowledgebase"]) .phc-article-chevron {
        display:none;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="knowledgebase"]) .phc-search-input-group,
:where(html[data-hp-page="knowledgebase"]) .phc-search-btn,
:where(html[data-hp-page="knowledgebase"]) .phc-cat-card,
:where(html[data-hp-page="knowledgebase"]) .phc-cat-icon,
:where(html[data-hp-page="knowledgebase"]) .btn-hyper-warning,
:where(html[data-hp-page="knowledgebase"]) .phc-article-item,
:where(html[data-hp-page="knowledgebase"]) .phc-article-chevron {
        transition:none!important;
    }
}

/* knowledgebasearticle.tpl */
:root:where(html[data-hp-page="knowledgebasearticle"]) {
    --ka-card:var(--hp-surface);
    --ka-soft:var(--hp-surface-soft);
    --ka-border:var(--hp-line);
    --ka-divider:#edf1f6;

    --ka-text:var(--hp-ink);
    --ka-text-2:var(--hp-ink-secondary);
    --ka-muted:var(--hp-muted);
    --ka-muted-2:#94a3b8;

    --ka-blue:var(--hp-primary);
    --ka-blue-dark:var(--hp-primary-hover);
    --ka-blue-light:#60a5fa;
    --ka-blue-soft:var(--hp-primary-soft);
    --ka-blue-line:#bfdbfe;
    --ka-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --ka-green:#059669;
    --ka-green-soft:#ecfdf5;
    --ka-green-line:#a7f3d0;

    --ka-red:#dc2626;
    --ka-red-soft:#fef2f2;
    --ka-red-line:#fecaca;

    --ka-orange:#d97706;
    --ka-orange-soft:#fff7ed;
    --ka-orange-line:#fed7aa;

    --ka-radius-xl:24px;
    --ka-radius-lg:17px;
    --ka-radius-md:12px;

    --ka-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --ka-shadow-md:0 18px 44px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);
    --ka-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --ka-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-view-wrapper,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-view-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-view-wrapper {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--ka-text-2);
}

/* =========================================================
   Main article
   ========================================================= */
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-card {
    position:relative;
    overflow:hidden;
    margin-bottom:16px;

    border:1px solid var(--ka-border);
    border-radius:var(--ka-radius-xl);

    background:#fff;
    box-shadow:var(--ka-shadow-panel);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--ka-gradient);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-header {
    min-height:88px;
    padding:18px 20px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    border-bottom:1px solid var(--ka-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-heading {
    min-width:0;

    display:flex;
    align-items:center;
    gap:12px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-title-icon {
    position:relative;

    width:46px;
    height:46px;
    flex:0 0 46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ka-blue-line);
    border-radius:13px;

    color:#fff;
    background:var(--ka-gradient);

    box-shadow:0 9px 20px rgba(37,99,235,.16);

    font-size:.86rem;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-title-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-main-title {
    margin:0!important;

    color:var(--ka-text)!important;

    font-size:1.08rem!important;
    line-height:1.65;
    font-weight:900!important;

    word-break:break-word;
}

/* =========================================================
   Article body
   ========================================================= */
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body {
    padding:22px 22px 8px;

    color:var(--ka-text-2)!important;

    font-size:.86rem!important;
    line-height:2!important;

    overflow-wrap:anywhere;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body > :first-child {
    margin-top:0!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body > :last-child {
    margin-bottom:0!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h1,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h2,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h3,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h4,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h5,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h6 {
    margin-top:1.5em;
    margin-bottom:.65em;

    color:var(--ka-text)!important;

    line-height:1.7;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h2 {font-size:1.08rem!important}
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h3 {font-size:1rem!important}
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body h4 {font-size:.94rem!important}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body p {
    margin:0 0 13px;

    color:var(--ka-text-2)!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body a {
    color:var(--ka-blue)!important;
    font-weight:750;
    text-decoration:none!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body a:hover {
    text-decoration:underline!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body img {
    max-width:100%!important;
    height:auto!important;
    margin:14px auto!important;

    display:block;

    border:1px solid var(--ka-border);
    border-radius:13px;

    box-shadow:var(--ka-shadow-sm);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body ul,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body ol {
    margin:10px 0 14px;
    padding-right:22px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body li {
    margin-bottom:5px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body blockquote {
    margin:14px 0;
    padding:11px 14px;

    border:0!important;
    border-right:3px solid var(--ka-blue)!important;
    border-radius:10px;

    color:var(--ka-text-2);
    background:var(--ka-blue-soft);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body pre {
    direction:ltr;
    text-align:left;

    max-width:100%;
    padding:13px 14px;

    overflow:auto;

    border:1px solid var(--ka-border);
    border-radius:11px;

    color:#e2e8f0;
    background:#0f172a;

    font-size:.75rem;
    line-height:1.8;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body code {
    direction:ltr;

    padding:2px 6px;

    border:1px solid var(--ka-divider);
    border-radius:6px;

    color:#1d4ed8;
    background:#f8fafc;

    font-size:.78em;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body pre code {
    padding:0;
    border:0;

    color:inherit;
    background:transparent;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body table {
    width:100%;
    margin:14px 0;

    border-collapse:separate;
    border-spacing:0;

    overflow:hidden;

    border:1px solid var(--ka-border);
    border-radius:11px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body th,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body td {
    padding:9px 10px;

    border-bottom:1px solid var(--ka-divider);

    font-size:.78rem;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body th {
    color:var(--ka-text);
    background:#f8fafc;
    font-weight:900;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body tr:last-child td {
    border-bottom:0;
}

/* =========================================================
   Vote
   ========================================================= */
:where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-section {
    margin:18px 22px 0;
    padding:13px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;

    border:1px solid var(--ka-border);
    border-radius:14px;

    background:linear-gradient(135deg,#fff 0%,#f8fbff 100%);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-info {
    display:flex;
    align-items:center;
    gap:9px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-icon {
    width:36px;
    height:36px;
    flex:0 0 36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ka-blue-line);
    border-radius:10px;

    color:var(--ka-blue);
    background:var(--ka-blue-soft);

    font-size:.72rem;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-title {
    margin:0!important;

    color:var(--ka-text)!important;

    font-size:.79rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-section .btn-group {
    display:flex;
    gap:6px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-success,
:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-danger {
    min-height:36px;
    min-width:74px;
    padding:0 11px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid transparent!important;
    border-radius:9px!important;

    font-family:inherit!important;
    font-size:.69rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:none!important;

    transition:
        transform var(--ka-transition),
        box-shadow var(--ka-transition);
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-success {
    color:var(--ka-green)!important;
    border-color:var(--ka-green-line)!important;
    background:var(--ka-green-soft)!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-danger {
    color:var(--ka-red)!important;
    border-color:var(--ka-red-line)!important;
    background:var(--ka-red-soft)!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-success:hover,
:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-danger:hover {
    transform:translateY(-1px);
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-success:hover {
    box-shadow:0 7px 14px rgba(5,150,105,.10)!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-danger:hover {
    box-shadow:0 7px 14px rgba(220,38,38,.09)!important;
}

/* =========================================================
   Article meta
   ========================================================= */
:where(html[data-hp-page="knowledgebasearticle"]) .phc-meta-footer {
    margin:16px 22px 20px;
    padding-top:13px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:9px;

    border-top:1px dashed var(--ka-border);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-tag-badge {
    min-height:29px;
    padding:0 9px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--ka-blue-line);
    border-radius:9px;

    color:var(--ka-blue);
    background:var(--ka-blue-soft);

    font-size:.67rem;
    line-height:1;
    font-weight:850;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-useful-count {
    min-height:29px;
    padding:0 9px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--ka-green-line);
    border-radius:9px;

    color:var(--ka-green)!important;
    background:var(--ka-green-soft);

    font-size:.68rem!important;
    line-height:1;
    font-weight:850!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-useful-count i {
    color:var(--ka-green)!important;
}

/* =========================================================
   Related articles card
   ========================================================= */
:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-card {
    position:relative;
    overflow:hidden;
    margin-bottom:14px;
    padding:16px;

    border:1px solid var(--ka-border);
    border-radius:var(--ka-radius-xl);

    background:#fff;
    box-shadow:var(--ka-shadow-sm);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-card::before {
    content:"";
    position:absolute;
    top:0;
    right:18px;
    left:18px;
    height:2px;

    background:linear-gradient(90deg,transparent,rgba(37,99,235,.65),transparent);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-header {
    margin-bottom:12px;

    display:flex;
    align-items:center;
    gap:10px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-icon {
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ka-orange-line);
    border-radius:11px;

    color:var(--ka-orange);
    background:var(--ka-orange-soft);

    font-size:.76rem;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-title {
    margin:0!important;

    color:var(--ka-text)!important;

    font-size:.94rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-articles-list {
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-item {
    position:relative;
    min-height:76px;
    padding:10px 12px;

    display:flex;
    align-items:center;
    gap:10px;

    overflow:hidden;

    border:1px solid var(--ka-border);
    border-radius:12px;

    color:inherit!important;
    background:#fff;

    text-decoration:none!important;

    transition:
        transform var(--ka-transition),
        border-color var(--ka-transition),
        background var(--ka-transition),
        box-shadow var(--ka-transition);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-item::before {
    content:"";
    position:absolute;
    top:10px;
    bottom:10px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;
    background:var(--ka-gradient);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-item:hover {
    transform:translateY(-1px);

    border-color:var(--ka-blue-line);
    background:#fbfdff;

    box-shadow:0 9px 18px rgba(37,99,235,.055);
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-icon {
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ka-blue-line);
    border-radius:10px;

    color:var(--ka-blue);
    background:var(--ka-blue-soft);

    font-size:.74rem;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-content {
    min-width:0;
    flex:1;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-title {
    margin:0 0 2px!important;

    color:var(--ka-text)!important;

    font-size:.80rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-text {
    margin:0!important;

    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;

    color:var(--ka-muted)!important;

    font-size:.68rem!important;
    line-height:1.65!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-edit {
    flex:0 0 auto;
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-warning {
    min-height:30px;
    padding:0 8px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    border:1px solid var(--ka-orange-line)!important;
    border-radius:8px!important;

    color:var(--ka-orange)!important;
    background:#fff!important;

    font-family:inherit!important;
    font-size:.64rem!important;
    line-height:1;
    font-weight:850!important;

    transition:
        transform var(--ka-transition),
        color var(--ka-transition),
        border-color var(--ka-transition),
        background var(--ka-transition);
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-warning:hover {
    transform:translateY(-1px);

    color:#fff!important;
    border-color:var(--ka-orange)!important;
    background:linear-gradient(135deg,#f59e0b,#d97706)!important;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-chevron {
    width:28px;
    height:28px;
    flex:0 0 28px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ka-border);
    border-radius:8px;

    color:var(--ka-muted-2);
    background:#f8fafc;

    font-size:.60rem;
}

:where(html[data-hp-page="knowledgebasearticle"]) .phc-empty-state {
    padding:24px 16px;

    border:1px dashed var(--ka-border);
    border-radius:12px;

    color:var(--ka-muted);
    background:#f8fafc;

    font-size:.77rem;
    text-align:center;
}

/* =========================================================
   Back
   ========================================================= */
:where(html[data-hp-page="knowledgebasearticle"]) .phc-back-row {
    margin-top:2px;
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-light {
    min-height:38px;
    padding:0 12px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    margin:0!important;

    border:1px solid var(--ka-border)!important;
    border-radius:10px!important;

    color:var(--ka-muted)!important;
    background:#fff!important;

    font-size:.70rem!important;
    line-height:1;
    font-weight:850!important;

    text-decoration:none!important;

    transition:
        transform var(--ka-transition),
        color var(--ka-transition),
        border-color var(--ka-transition),
        background var(--ka-transition);
}

:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-light:hover {
    transform:translateY(-1px);

    color:var(--ka-blue)!important;
    border-color:var(--ka-blue-line)!important;
    background:var(--ka-blue-soft)!important;
}

/* Alerts */
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-view-wrapper .alert {
    margin-bottom:14px!important;

    border-radius:13px!important;

    font-size:.78rem!important;
    line-height:1.75;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-card,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-card {
        border-radius:19px;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-header {
        min-height:0;
        padding:15px;

        align-items:flex-start;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-heading {
        align-items:flex-start;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-title-icon {
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-main-title {
        font-size:.98rem!important;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body {
        padding:17px 15px 6px;

        font-size:.82rem!important;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-section {
        margin:14px 15px 0;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-meta-footer {
        margin:14px 15px 17px;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-related-card {
        padding:14px;
    }
}

@media(max-width:520px) {
    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-header {
        flex-direction:column;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-section {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-section form,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-section .btn-group {
        width:100%;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-success,
:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-danger {
        flex:1;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-meta-footer {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-tag-badge,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-useful-count {
        width:100%;
        justify-content:center;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-item {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-content {
        flex:1 1 calc(100% - 50px);
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-related-edit {
        width:100%;
        margin-right:48px;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-related-edit .btn-hyper-warning {
        width:100%;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-related-chevron {
        display:none;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-light {
        width:100%;
    }
}

@media print {
:where(html[data-hp-page="knowledgebasearticle"]) .phc-vote-section,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-meta-footer,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-related-card,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-back-row,
:where(html[data-hp-page="knowledgebasearticle"]) .bg-footer,
:where(html[data-hp-page="knowledgebasearticle"]) .top-button,
:where(html[data-hp-page="knowledgebasearticle"]) .sidebar {
        display:none!important;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-card {
        border:0!important;
        box-shadow:none!important;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-header {
        padding-right:0;
        padding-left:0;
    }

    :where(html[data-hp-page="knowledgebasearticle"]) .phc-article-body {
        padding-right:0;
        padding-left:0;
    }
}

@media(prefers-reduced-motion:reduce) {
:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-success,
:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-danger,
:where(html[data-hp-page="knowledgebasearticle"]) .phc-article-item,
:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-warning,
:where(html[data-hp-page="knowledgebasearticle"]) .btn-hyper-light {
        transition:none!important;
    }
}

/* knowledgebasecat.tpl */
:root:where(html[data-hp-page="knowledgebasecat"]) {
    --kbc-card:var(--hp-surface);
    --kbc-soft:var(--hp-surface-soft);
    --kbc-border:var(--hp-line);
    --kbc-divider:#edf1f6;

    --kbc-text:var(--hp-ink);
    --kbc-text-2:var(--hp-ink-secondary);
    --kbc-muted:var(--hp-muted);
    --kbc-muted-2:#94a3b8;

    --kbc-blue:var(--hp-primary);
    --kbc-blue-dark:var(--hp-primary-hover);
    --kbc-blue-light:#60a5fa;
    --kbc-blue-soft:var(--hp-primary-soft);
    --kbc-blue-line:#bfdbfe;
    --kbc-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --kbc-green:#059669;
    --kbc-green-soft:#ecfdf5;
    --kbc-green-line:#a7f3d0;

    --kbc-orange:#d97706;
    --kbc-orange-soft:#fff7ed;
    --kbc-orange-line:#fed7aa;

    --kbc-radius-xl:24px;
    --kbc-radius-lg:17px;
    --kbc-radius-md:12px;

    --kbc-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --kbc-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --kbc-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kb-cat-wrapper,
:where(html[data-hp-page="knowledgebasecat"]) .phc-kb-cat-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kb-cat-wrapper {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--kbc-text-2);
}

/* =========================================================
   Header + Search
   ========================================================= */
:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-manager {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;

    border:1px solid var(--kbc-border);
    border-radius:var(--kbc-radius-xl);

    background:#fff;
    box-shadow:var(--kbc-shadow-panel);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;
    background:var(--kbc-gradient);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-header {
    min-height:102px;
    padding:20px 22px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;

    border-bottom:1px solid var(--kbc-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-heading {
    min-width:280px;

    display:flex;
    align-items:center;
    gap:13px;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-main-icon {
    position:relative;

    width:52px;
    height:52px;
    flex:0 0 52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kbc-blue-line);
    border-radius:15px;

    color:#fff;
    background:var(--kbc-gradient);

    box-shadow:0 10px 22px rgba(37,99,235,.18);

    font-size:.98rem;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-main-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-title {
    margin:0 0 4px!important;

    color:var(--kbc-text)!important;
    font-size:1.08rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-subtitle {
    margin:0!important;
    max-width:540px;

    color:var(--kbc-muted)!important;
    font-size:.80rem!important;
    line-height:1.75;
    font-weight:600;
}

/* Search */
:where(html[data-hp-page="knowledgebasecat"]) .phc-search-card {
    width:100%;
    max-width:430px;
    margin:0!important;
    padding:0!important;

    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-card form {
    margin:0;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-input-group {
    position:relative;

    width:100%;
    height:48px;
    padding:0!important;

    display:flex;
    align-items:center;

    border:1px solid var(--kbc-border)!important;
    border-radius:12px!important;

    background:#f8fafc!important;

    transition:
        border-color var(--kbc-transition),
        background var(--kbc-transition),
        box-shadow var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-input-group:hover {
    border-color:#cbd5e1!important;
    background:#fff!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-input-group:focus-within {
    border-color:var(--kbc-blue)!important;
    background:#fff!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-icon {
    position:absolute;
    right:14px;

    margin:0!important;

    color:var(--kbc-muted-2)!important;
    font-size:.84rem!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-input-group:focus-within .phc-search-icon {
    color:var(--kbc-blue)!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-input {
    flex:1;
    height:100%;

    padding:0 42px 0 10px!important;

    border:0!important;
    outline:0!important;

    color:var(--kbc-text)!important;
    background:transparent!important;

    font-family:inherit!important;
    font-size:.84rem!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-input::placeholder {
    color:var(--kbc-muted-2)!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-btn {
    min-width:86px;
    height:38px;
    margin-left:5px;
    padding:0 14px!important;

    border:1px solid var(--kbc-blue)!important;
    border-radius:9px!important;

    color:#fff!important;
    background:var(--kbc-gradient)!important;

    font-family:inherit!important;
    font-size:.74rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:0 7px 14px rgba(37,99,235,.14)!important;

    transition:
        transform var(--kbc-transition),
        box-shadow var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-search-btn:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(37,99,235,.20)!important;
}

/* =========================================================
   Section Header
   ========================================================= */
:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-section-header {
    margin:0 0 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-section-heading {
    display:flex;
    align-items:center;
    gap:10px;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-section-icon {
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kbc-blue-line);
    border-radius:11px;

    color:var(--kbc-blue);
    background:var(--kbc-blue-soft);

    font-size:.78rem;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-section-title {
    margin:0!important;

    display:block!important;

    color:var(--kbc-text)!important;
    font-size:.96rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-section-subtitle {
    color:var(--kbc-muted);
    font-size:.71rem;
    line-height:1.6;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-tag-active {
    min-height:27px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--kbc-blue-line);
    border-radius:8px;

    color:var(--kbc-blue);
    background:var(--kbc-blue-soft);

    font-size:.67rem;
    font-weight:850;
}

/* =========================================================
   Categories
   ========================================================= */
:where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-categories {
    margin-bottom:20px;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card-wrap {
    position:relative;
    height:100%;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card-link {
    display:block;
    height:100%;

    color:inherit!important;
    text-decoration:none!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card {
    position:relative;
    min-height:104px;
    height:100%;
    padding:13px 14px;

    display:flex;
    align-items:center;
    gap:11px;

    overflow:hidden;

    border:1px solid var(--kbc-border);
    border-radius:14px;

    background:linear-gradient(145deg,#fff 0%,#fff 72%,#f8fbff 140%);

    box-shadow:var(--kbc-shadow-sm);

    transition:
        transform var(--kbc-transition),
        border-color var(--kbc-transition),
        box-shadow var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card::after {
    content:"";
    position:absolute;
    width:86px;
    height:86px;
    left:-50px;
    bottom:-56px;

    border-radius:50%;
    background:rgba(37,99,235,.055);

    pointer-events:none;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card:hover {
    transform:translateY(-2px);

    border-color:var(--kbc-blue-line);

    box-shadow:0 13px 26px rgba(37,99,235,.07);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-icon {
    position:relative;
    z-index:2;

    width:42px;
    height:42px;
    flex:0 0 42px;
    margin:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kbc-blue-line);
    border-radius:12px;

    color:var(--kbc-blue);
    background:var(--kbc-blue-soft);

    font-size:.82rem;

    transition:
        transform var(--kbc-transition),
        color var(--kbc-transition),
        background var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card:hover .phc-cat-icon {
    transform:scale(1.05);

    color:#fff;
    background:var(--kbc-gradient);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-info {
    position:relative;
    z-index:2;

    min-width:0;
    flex:1;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-title {
    margin:0!important;

    color:var(--kbc-text)!important;
    font-size:.85rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-count {
    min-height:25px;
    padding:0 8px!important;

    display:inline-flex;
    align-items:center;

    border:1px solid var(--kbc-green-line);
    border-radius:8px!important;

    color:var(--kbc-green)!important;
    background:var(--kbc-green-soft)!important;

    font-size:.66rem!important;
    line-height:1;
    font-weight:850!important;
    white-space:nowrap;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-desc {
    margin:6px 0 0!important;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    color:var(--kbc-muted)!important;

    font-size:.70rem!important;
    line-height:1.7!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-admin-edit-wrap {
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:4;
}

/* =========================================================
   Article List
   ========================================================= */
:where(html[data-hp-page="knowledgebasecat"]) .phc-articles-section {
    margin-top:4px;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-articles-list {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-item {
    position:relative;
    min-height:82px;
    padding:11px 13px;

    display:flex;
    align-items:center;
    gap:10px;

    overflow:hidden;

    border:1px solid var(--kbc-border);
    border-radius:13px;

    color:inherit!important;
    background:#fff;

    text-decoration:none!important;

    box-shadow:var(--kbc-shadow-sm);

    transition:
        transform var(--kbc-transition),
        border-color var(--kbc-transition),
        background var(--kbc-transition),
        box-shadow var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-item::before {
    content:"";
    position:absolute;
    top:10px;
    bottom:10px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;
    background:var(--kbc-gradient);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-item:hover {
    transform:translateY(-1px);

    border-color:var(--kbc-blue-line);
    background:#fbfdff;

    box-shadow:0 10px 20px rgba(37,99,235,.06);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-icon {
    width:40px;
    height:40px;
    flex:0 0 40px;
    margin:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kbc-blue-line);
    border-radius:11px;

    color:var(--kbc-blue);
    background:var(--kbc-blue-soft);

    font-size:.78rem;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-content {
    min-width:0;
    flex:1;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-title {
    margin:0 0 3px!important;

    color:var(--kbc-text)!important;

    font-size:.82rem!important;
    line-height:1.55;
    font-weight:900!important;

    transition:color var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-item:hover .phc-article-title {
    color:var(--kbc-blue)!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-text {
    margin:0!important;

    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;

    color:var(--kbc-muted)!important;

    font-size:.69rem!important;
    line-height:1.68!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-edit {
    flex:0 0 auto;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-chevron {
    width:28px;
    height:28px;
    flex:0 0 28px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kbc-border);
    border-radius:8px;

    color:var(--kbc-muted-2);
    background:#f8fafc;

    font-size:.60rem;

    transition:
        transform var(--kbc-transition),
        color var(--kbc-transition),
        border-color var(--kbc-transition),
        background var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-article-item:hover .phc-article-chevron {
    transform:translateX(-1px);

    color:var(--kbc-blue);
    border-color:var(--kbc-blue-line);
    background:var(--kbc-blue-soft);
}

/* =========================================================
   Admin / Footer buttons
   ========================================================= */
:where(html[data-hp-page="knowledgebasecat"]) .btn-hyper-warning {
    min-height:30px;
    padding:0 9px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid var(--kbc-orange-line)!important;
    border-radius:8px!important;

    color:var(--kbc-orange)!important;
    background:#fff!important;

    font-family:inherit!important;
    font-size:.65rem!important;
    line-height:1;
    font-weight:850!important;

    text-decoration:none!important;

    box-shadow:0 4px 10px rgba(217,119,6,.05)!important;

    transition:
        transform var(--kbc-transition),
        color var(--kbc-transition),
        border-color var(--kbc-transition),
        background var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .btn-hyper-warning:hover {
    transform:translateY(-1px);

    color:#fff!important;
    border-color:var(--kbc-orange)!important;
    background:linear-gradient(135deg,#f59e0b,#d97706)!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-footer-actions {
    margin-top:16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

:where(html[data-hp-page="knowledgebasecat"]) .btn-hyper-light {
    min-height:38px;
    padding:0 12px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--kbc-border)!important;
    border-radius:10px!important;

    color:var(--kbc-muted)!important;
    background:#fff!important;

    font-family:inherit!important;
    font-size:.70rem!important;
    line-height:1;
    font-weight:850!important;

    text-decoration:none!important;

    transition:
        transform var(--kbc-transition),
        color var(--kbc-transition),
        border-color var(--kbc-transition),
        background var(--kbc-transition);
}

:where(html[data-hp-page="knowledgebasecat"]) .btn-hyper-light:hover {
    transform:translateY(-1px);

    color:var(--kbc-blue)!important;
    border-color:var(--kbc-blue-line)!important;
    background:var(--kbc-blue-soft)!important;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-footer-actions .btn-hyper-warning {
    min-height:38px;
    padding:0 12px!important;
}

/* =========================================================
   Empty state
   ========================================================= */
:where(html[data-hp-page="knowledgebasecat"]) .phc-empty-state {
    padding:26px 16px;

    border:1px dashed var(--kbc-blue-line);
    border-radius:14px;

    color:var(--kbc-muted);
    background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);

    text-align:center;

    font-size:.76rem;
    line-height:1.7;
}

:where(html[data-hp-page="knowledgebasecat"]) .phc-empty-state i {
    width:42px;
    height:42px;
    margin:0 auto 9px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--kbc-blue-line);
    border-radius:12px;

    color:var(--kbc-blue)!important;
    background:var(--kbc-blue-soft);

    font-size:.84rem!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-header {
        padding:18px;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-heading {
        width:100%;
        min-width:0;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-search-card {
        max-width:100%;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-header {
        padding:15px;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-main-icon {
        width:46px;
        height:46px;
        flex-basis:46px;

        border-radius:13px;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card {
        min-height:96px;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-article-item {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-article-content {
        flex:1 1 calc(100% - 50px);
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-article-edit {
        margin-right:50px;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-footer-actions {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-footer-actions .btn-hyper-light,
:where(html[data-hp-page="knowledgebasecat"]) .phc-footer-actions .btn-hyper-warning {
        width:100%;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="knowledgebasecat"]) .phc-kbc-title {
        font-size:1rem!important;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-search-input-group {
        height:auto;
        padding:5px!important;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-search-icon {
        top:23px;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-search-input {
        height:42px;
        width:100%;
        flex:1 1 calc(100% - 10px);
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-search-btn {
        width:100%;
        height:38px;
        margin:2px 0 0;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card {
        align-items:flex-start;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-cat-head {
        align-items:flex-start;
        flex-direction:column;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-article-edit {
        width:100%;
        margin:5px 0 0!important;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-article-edit .btn-hyper-warning {
        width:100%;
    }

    :where(html[data-hp-page="knowledgebasecat"]) .phc-article-chevron {
        display:none;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="knowledgebasecat"]) .phc-search-input-group,
:where(html[data-hp-page="knowledgebasecat"]) .phc-search-btn,
:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-card,
:where(html[data-hp-page="knowledgebasecat"]) .phc-cat-icon,
:where(html[data-hp-page="knowledgebasecat"]) .phc-article-item,
:where(html[data-hp-page="knowledgebasecat"]) .phc-article-chevron,
:where(html[data-hp-page="knowledgebasecat"]) .btn-hyper-warning,
:where(html[data-hp-page="knowledgebasecat"]) .btn-hyper-light {
        transition:none!important;
    }
}

/* login.tpl */
:root:where(html[data-hp-page="login"]) {
    --login-bg:var(--hp-page);
    --login-card:var(--hp-surface);
    --login-border:var(--hp-line);
    --login-border-soft:#edf1f6;
    --login-text:var(--hp-ink);
    --login-muted:var(--hp-muted);
    --login-muted-2:#94a3b8;
    --login-primary:var(--hp-primary);
    --login-primary-dark:var(--hp-primary-hover);
    --login-success:#10b981;
    --login-radius-xl:28px;
    --login-radius-md:13px;
    --login-shadow:0 28px 70px rgba(15,23,42,.10);
    --login-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="login"]) * {box-sizing:border-box}

:where(html[data-hp-page="login"]) .alvand-login-b {
    min-height:100vh;
    padding:46px 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    direction:rtl;
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 10%,rgba(37,99,235,.085),transparent 28%),
        radial-gradient(circle at 85% 92%,rgba(99,102,241,.06),transparent 28%),
        var(--login-bg);
}

:where(html[data-hp-page="login"]) .alvand-login-b::before,
:where(html[data-hp-page="login"]) .alvand-login-b::after {
    content:"";
    position:absolute;
    pointer-events:none;
    border-radius:50%;
}

:where(html[data-hp-page="login"]) .alvand-login-b::before {
    width:280px;height:280px;top:-150px;left:-100px;
    border:1px solid rgba(37,99,235,.08);
    box-shadow:0 0 0 32px rgba(37,99,235,.018),0 0 0 64px rgba(37,99,235,.012);
}

:where(html[data-hp-page="login"]) .alvand-login-b::after {
    width:190px;height:190px;right:-70px;bottom:-70px;
    border:28px solid rgba(37,99,235,.025);
}

:where(html[data-hp-page="login"]) .alvand-login-card-b {
    width:min(620px,100%);
    position:relative;
    z-index:2;
    overflow:hidden;
    border:1px solid var(--login-border);
    border-radius:var(--login-radius-xl);
    background:var(--login-card);
    box-shadow:var(--login-shadow);
}

/* Hero */
:where(html[data-hp-page="login"]) .alvand-login-hero {
    position:relative;
    overflow:hidden;
    min-height:205px;
    padding:34px 38px 30px;
    color:#fff;
    background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 35%),linear-gradient(145deg,#0f172a 0%,#1e3a8a 50%,#2563eb 100%);
}

:where(html[data-hp-page="login"]) .alvand-login-hero::before {
    content:"";
    position:absolute;
    width:210px;height:210px;top:-90px;left:-70px;
    border-radius:50%;background:rgba(255,255,255,.055);
}

:where(html[data-hp-page="login"]) .alvand-login-hero::after {
    content:"";
    position:absolute;
    inset:auto 22px 18px auto;
    width:120px;height:120px;
    opacity:.22;
    background-image:radial-gradient(circle,rgba(255,255,255,.8) 1px,transparent 1px);
    background-size:14px 14px;
    mask-image:linear-gradient(to bottom,transparent,#000);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000);
}

:where(html[data-hp-page="login"]) .alvand-login-hero-inner {position:relative;z-index:2}

:where(html[data-hp-page="login"]) .alvand-login-brand-row {
    display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:30px;
}

:where(html[data-hp-page="login"]) .alvand-login-brand-logo {min-height:48px;display:flex;align-items:center}
:where(html[data-hp-page="login"]) .alvand-login-brand-logo img {max-width:165px;max-height:56px;object-fit:contain;}
:where(html[data-hp-page="login"]) .alvand-login-brand-fallback {font-size:1.2rem;font-weight:900;color:#fff}

:where(html[data-hp-page="login"]) .alvand-login-secure-badge {
    display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.82);font-size:.72rem;font-weight:800;white-space:nowrap;
}

:where(html[data-hp-page="login"]) .alvand-login-secure-badge i {
    width:8px;height:8px;display:block;border-radius:50%;background:#4ade80;
    box-shadow:0 0 0 4px rgba(74,222,128,.12);
}

:where(html[data-hp-page="login"]) .alvand-login-hero h1 {margin:0 0 8px;color:#fff;font-size:1.75rem;font-weight:900;line-height:1.5;letter-spacing:-.3px}
:where(html[data-hp-page="login"]) .alvand-login-hero p {margin:0;max-width:470px;color:rgba(255,255,255,.68);font-size:.87rem;line-height:1.9}

/* Body */
:where(html[data-hp-page="login"]) .alvand-login-body {padding:34px 38px 36px}
:where(html[data-hp-page="login"]) .alvand-login-body .alert {margin-bottom:18px;padding:12px 14px;border-radius:12px;box-shadow:none;font-size:.84rem;line-height:1.8}

:where(html[data-hp-page="login"]) .alvand-login-fields {display:grid;grid-template-columns:1fr 1fr;gap:14px}
:where(html[data-hp-page="login"]) .alvand-login-label {display:block;margin:0 2px 8px;color:#334155;font-size:.79rem;font-weight:800}
:where(html[data-hp-page="login"]) .alvand-login-input-wrap {position:relative}

:where(html[data-hp-page="login"]) .alvand-login-input {
    width:100%;height:56px;padding:0 47px 0 16px;border:1px solid var(--login-border);
    border-radius:var(--login-radius-md);outline:none;background:#f8fafc;color:var(--login-text);
    font-family:inherit;font-size:.91rem;direction:ltr;text-align:left;
    transition:background-color var(--login-transition),border-color var(--login-transition),box-shadow var(--login-transition);
}

:where(html[data-hp-page="login"]) .alvand-login-input:hover {background:#fff;border-color:#cbd5e1}
:where(html[data-hp-page="login"]) .alvand-login-input:focus {background:#fff;border-color:var(--login-primary);box-shadow:0 0 0 4px rgba(37,99,235,.09)}

:where(html[data-hp-page="login"]) .alvand-login-field-icon {
    position:absolute;top:50%;right:16px;width:18px;height:18px;transform:translateY(-50%);
    color:var(--login-muted-2);pointer-events:none;transition:color var(--login-transition);
}
:where(html[data-hp-page="login"]) .alvand-login-field-icon svg {width:18px;height:18px;display:block;stroke:currentColor}
:where(html[data-hp-page="login"]) .alvand-login-input-wrap:focus-within .alvand-login-field-icon {color:var(--login-primary)}
:where(html[data-hp-page="login"]) .alvand-login-password {padding-left:52px}

:where(html[data-hp-page="login"]) .alvand-login-password-toggle {
    position:absolute;top:50%;left:8px;width:39px;height:39px;padding:0;transform:translateY(-50%);
    display:flex;align-items:center;justify-content:center;z-index:10;border:0;border-radius:10px;
    outline:none;cursor:pointer;color:var(--login-muted-2);background:transparent;-webkit-appearance:none;appearance:none;
    transition:var(--login-transition);
}
:where(html[data-hp-page="login"]) .alvand-login-password-toggle:hover,
:where(html[data-hp-page="login"]) .alvand-login-password-toggle:focus {color:var(--login-primary);background:#edf4ff}
:where(html[data-hp-page="login"]) .alvand-login-password-toggle svg {width:19px;height:19px;display:block;pointer-events:none;stroke:currentColor}
:where(html[data-hp-page="login"]) .alvand-login-password-toggle .eye-off {display:none}
:where(html[data-hp-page="login"]) .alvand-login-password-toggle.is-visible .eye {display:none}
:where(html[data-hp-page="login"]) .alvand-login-password-toggle.is-visible .eye-off {display:block}

:where(html[data-hp-page="login"]) .alvand-login-options {display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0 22px}
:where(html[data-hp-page="login"]) .alvand-login-remember {display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--login-muted);font-size:.79rem;cursor:pointer;user-select:none}
:where(html[data-hp-page="login"]) .alvand-login-remember input {width:17px;height:17px;margin:0;accent-color:var(--login-primary)}
:where(html[data-hp-page="login"]) .alvand-login-forgot {color:var(--login-primary);font-size:.79rem;font-weight:800;text-decoration:none!important}
:where(html[data-hp-page="login"]) .alvand-login-forgot:hover {color:var(--login-primary-dark)}

:where(html[data-hp-page="login"]) .alvand-login-captcha {display: none;margin:0 0 20px;padding:12px;text-align:center;background:#fbfcfe;border:1px dashed #cbd5e1;border-radius:12px}

:where(html[data-hp-page="login"]) .alvand-login-actions {
    display:flex;
    align-items:stretch;
    gap:11px;
    width:100%;
}

:where(html[data-hp-page="login"]) .alvand-login-primary,
:where(html[data-hp-page="login"]) .alvand-login-register,
:where(html[data-hp-page="login"]) .alvand-login-mobile {
    min-height:53px;
    border-radius:12px;
    font-family:inherit;
    font-size:.88rem;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none!important;
    transition:var(--login-transition);
}

:where(html[data-hp-page="login"]) .alvand-login-primary {
    flex:1.35;
    border:0;
    cursor:pointer;
    color:#fff;
    background:linear-gradient(135deg,#3b82f6,var(--login-primary-dark));
    box-shadow:0 11px 24px -12px rgba(37,99,235,.85);
}

:where(html[data-hp-page="login"]) .alvand-login-primary:hover:not(:disabled) {
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 15px 28px -12px rgba(37,99,235,.92);
}

:where(html[data-hp-page="login"]) .alvand-login-primary:disabled {
    opacity:.7;
    cursor:not-allowed;
}

:where(html[data-hp-page="login"]) .alvand-login-register {
    flex:1;
    margin:0;
    color:#334155;
    background:#fff;
    border:1px solid var(--login-border);
}

:where(html[data-hp-page="login"]) .alvand-login-register:hover {
    color:var(--login-primary);
    background:#f8fbff;
    border-color:#bfdbfe;
    transform:translateY(-1px);
}

/* ورود با شماره موبایل */
:where(html[data-hp-page="login"]) .alvand-login-mobile {
    width:100%;
    margin-top:11px;
    color:#1e40af;
    background:#eff6ff;
    border:1px solid #dbeafe;
    position:relative;
}

:where(html[data-hp-page="login"]) .alvand-login-mobile:hover {
    color:var(--login-primary-dark);
    background:#eaf3ff;
    border-color:#bfdbfe;
    transform:translateY(-1px);
}

:where(html[data-hp-page="login"]) .alvand-login-mobile-icon {
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    border-radius:9px;
    color:var(--login-primary);
    background:#fff;
    border:1px solid #dbeafe;
}

:where(html[data-hp-page="login"]) .alvand-login-mobile-icon svg {
    width:15px;
    height:15px;
    display:block;
    stroke:currentColor;
}

:where(html[data-hp-page="login"]) .alvand-login-mobile-text {
    display:flex;
    align-items:center;
    gap:5px;
}

:where(html[data-hp-page="login"]) .alvand-login-linked {margin-top:24px;padding-top:20px;border-top:1px solid var(--login-border-soft)}
:where(html[data-hp-page="login"]) .alvand-login-linked .btn {min-height:43px;border-radius:10px!important;box-shadow:none!important}

:where(html[data-hp-page="login"]) .is-loading-btn {position:relative!important;pointer-events:none!important;color:transparent!important}
:where(html[data-hp-page="login"]) .is-loading-btn>* {opacity:0!important}
:where(html[data-hp-page="login"]) .is-loading-btn::after {
    content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
    border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:alvandLoginSpin .7s linear infinite;
}
:where(html[data-hp-page="login"]) .alvand-login-register.is-loading-btn::after,
:where(html[data-hp-page="login"]) .alvand-login-mobile.is-loading-btn::after {
    border-color:rgba(37,99,235,.16);
    border-top-color:var(--login-primary);
}
@keyframes alvandLoginSpin {to{transform:rotate(360deg)}}

:where(html[data-hp-page="login"]) .alvand-login-input:-webkit-autofill,
:where(html[data-hp-page="login"]) .alvand-login-input:-webkit-autofill:hover,
:where(html[data-hp-page="login"]) .alvand-login-input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 1000px #fff inset!important;
    -webkit-text-fill-color:var(--login-text)!important;
}

@media(max-width:620px) {
    :where(html[data-hp-page="login"]) .alvand-login-b {min-height:100dvh;padding:0;align-items:stretch;background:#fff}
    :where(html[data-hp-page="login"]) .alvand-login-card-b {width:100%;min-height:100dvh;border:0;border-radius:0;box-shadow:none}
    :where(html[data-hp-page="login"]) .alvand-login-hero {min-height:185px;padding:28px 20px 26px}
    :where(html[data-hp-page="login"]) .alvand-login-brand-row {margin-bottom:25px}
    :where(html[data-hp-page="login"]) .alvand-login-hero h1 {font-size:1.5rem}
    :where(html[data-hp-page="login"]) .alvand-login-body {padding:28px 20px 34px}
    :where(html[data-hp-page="login"]) .alvand-login-fields {grid-template-columns:1fr;gap:16px}
    :where(html[data-hp-page="login"]) .alvand-login-options {flex-direction:column;align-items:flex-start;gap:10px}
    :where(html[data-hp-page="login"]) .alvand-login-actions {gap:8px}
    :where(html[data-hp-page="login"]) .alvand-login-primary,
:where(html[data-hp-page="login"]) .alvand-login-register {min-height:51px;font-size:.79rem;padding:0 8px}
    :where(html[data-hp-page="login"]) .alvand-login-primary {flex:1.2}
    :where(html[data-hp-page="login"]) .alvand-login-register {flex:1}
    :where(html[data-hp-page="login"]) .alvand-login-mobile {min-height:51px;font-size:.82rem}
    :where(html[data-hp-page="login"]) .alvand-login-strip {grid-template-columns:1fr}
}

@media(max-width:380px) {:where(html[data-hp-page="login"]) .alvand-login-secure-badge {display:none}}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="login"]) .alvand-login-input,
:where(html[data-hp-page="login"]) .alvand-login-primary,
:where(html[data-hp-page="login"]) .alvand-login-register,
:where(html[data-hp-page="login"]) .alvand-login-password-toggle {transition:none!important}
}

/* masspay.tpl */
:where(html[data-hp-page="masspay"]) .alvand-masspay {
    --amp-primary: var(--hp-primary);
    --amp-primary-hover: var(--hp-primary-hover);
    --amp-primary-soft: var(--hp-primary-soft);
    --amp-primary-border: var(--hp-primary-line);

    --amp-text: #172033;
    --amp-text-2: #344054;
    --amp-muted: #7c8799;

    --amp-border: #e6eaf0;
    --amp-border-strong: #d8dee8;
    --amp-surface: var(--hp-surface);
    --amp-soft: var(--hp-surface-soft);

    --amp-success: #0f9f6e;
    --amp-success-soft: #ecfdf5;

    --amp-danger: #dc2626;
    --amp-danger-soft: #fff5f5;

    width: 100%;
    padding: 4px 0 24px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay,
:where(html[data-hp-page="masspay"]) .alvand-masspay * {
    box-sizing: border-box;
}

/* ============================================================
   Grid
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
    align-items: start;
}

/* ============================================================
   Base cards
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay__card {
    overflow: hidden;
    background: var(--amp-surface);
    border: 1px solid var(--amp-border);
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(17, 24, 39, .02),
        0 12px 32px rgba(17, 24, 39, .055);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__main {
    min-width: 0;
}

/* ============================================================
   Main header
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay__header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    background:
        linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--amp-border);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: var(--amp-primary);
    background: var(--amp-primary-soft);
    border: 1px solid var(--amp-primary-border);
    border-radius: 14px;
    font-size: 19px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__header-content {
    min-width: 0;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__title {
    margin: 0 0 4px;
    color: var(--amp-text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.7;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__description {
    margin: 0;
    color: var(--amp-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.9;
}

/* ============================================================
   Invoice list
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay__invoices {
    padding: 18px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__invoice {
    overflow: hidden;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--amp-border);
    border-radius: 15px;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__invoice:last-child {
    margin-bottom: 0;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__invoice:hover {
    border-color: #d8e2f0;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .045);
    transform: translateY(-1px);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__invoice-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    color: var(--amp-text);
    background: var(--amp-soft);
    border-bottom: 1px solid var(--amp-border);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__invoice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: var(--amp-primary);
    background: #fff;
    border: 1px solid var(--amp-primary-border);
    border-radius: 10px;
    font-size: 14px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__invoice-number {
    margin: 0;
    color: var(--amp-text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.7;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__items {
    width: 100%;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__items-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 10px 15px;
    color: #98a2b3;
    background: #fff;
    border-bottom: 1px solid #f0f2f5;
    font-size: 10px;
    font-weight: 700;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 13px 15px;
    border-bottom: 1px solid #f0f2f5;
    transition: background-color .18s ease;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__item:last-child {
    border-bottom: 0;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__item:hover {
    background: #fbfcfe;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__item-description {
    min-width: 0;
    color: #465267;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__item-amount {
    color: var(--amp-text);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

/* ============================================================
   Empty state
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay__empty {
    padding: 58px 20px;
    text-align: center;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    color: #98a2b3;
    background: var(--amp-soft);
    border: 1px solid var(--amp-border);
    border-radius: 18px;
    font-size: 24px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__empty-text {
    display: block;
    color: var(--amp-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   Summary
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay__aside {
    position: sticky;
    top: 24px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__summary {
    padding: 20px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 19px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--amp-border);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__summary-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: var(--amp-primary);
    background: var(--amp-primary-soft);
    border: 1px solid var(--amp-primary-border);
    border-radius: 10px;
    font-size: 14px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__summary-title {
    margin: 0;
    color: var(--amp-text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.7;
}

/* Summary rows */
:where(html[data-hp-page="masspay"]) .alvand-masspay__totals {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--amp-muted);
    font-size: 11px;
    font-weight: 500;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__total-value {
    color: var(--amp-text-2);
    font-weight: 700;
    white-space: nowrap;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__total-row--credit,
:where(html[data-hp-page="masspay"]) .alvand-masspay__total-row--credit .alvand-masspay__total-value {
    color: var(--amp-success);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__total-row--partial,
:where(html[data-hp-page="masspay"]) .alvand-masspay__total-row--partial .alvand-masspay__total-value {
    color: var(--amp-danger);
}

/* Grand total */
:where(html[data-hp-page="masspay"]) .alvand-masspay__grand-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 16px 0 2px;
    border-top: 1px dashed var(--amp-border-strong);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__grand-label {
    color: var(--amp-text);
    font-size: 13px;
    font-weight: 800;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__grand-value {
    color: var(--amp-primary);
    font-size: 17px;
    font-weight: 900;
    white-space: nowrap;
}

/* ============================================================
   Gateway
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay__gateway {
    margin-top: 20px;
    padding: 14px;
    background: var(--amp-soft);
    border: 1px solid var(--amp-border);
    border-radius: 13px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__gateway-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 9px;
    color: var(--amp-text-2);
    font-size: 11px;
    font-weight: 700;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__gateway-label i {
    color: #8491a3;
    font-size: 13px;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__select-wrap {
    position: relative;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__select {
    display: block;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 13px;
    padding-inline-end: 36px;
    color: var(--amp-text);
    background: #fff;
    border: 1px solid var(--amp-border-strong);
    border-radius: 10px;
    outline: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    box-shadow: none;
    appearance: auto;
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__select:hover {
    border-color: #c9d2df;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__select:focus {
    border-color: #8db1ff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}

/* ============================================================
   Payment button
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay__pay-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    padding: 11px 18px;
    color: #fff !important;
    background: var(--amp-primary) !important;
    border: 1px solid var(--amp-primary) !important;
    border-radius: 12px !important;
    outline: 0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-decoration: none !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .16) !important;
    cursor: pointer;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__pay-btn:hover,
:where(html[data-hp-page="masspay"]) .alvand-masspay__pay-btn:focus {
    color: #fff !important;
    background: var(--amp-primary-hover) !important;
    border-color: var(--amp-primary-hover) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .20) !important;
    transform: translateY(-1px);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__pay-btn:active {
    transform: translateY(0);
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 600;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay__secure i {
    font-size: 11px;
}

/* ============================================================
   Neutralize Bootstrap styles inside this page
   ============================================================ */

:where(html[data-hp-page="masspay"]) .alvand-masspay .btn.alvand-masspay__pay-btn {
    border-radius: 12px !important;
}

:where(html[data-hp-page="masspay"]) .alvand-masspay select.form-select.alvand-masspay__select,
:where(html[data-hp-page="masspay"]) .alvand-masspay select.form-control.alvand-masspay__select {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 13px !important;
    padding-inline-end: 36px !important;
    background-color: #fff !important;
    border: 1px solid var(--amp-border-strong) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1199.98px) {
    :where(html[data-hp-page="masspay"]) .alvand-masspay__grid {
        grid-template-columns: minmax(0, 1fr) 315px;
    }
}

@media (max-width: 991.98px) {
    :where(html[data-hp-page="masspay"]) .alvand-masspay__grid {
        grid-template-columns: 1fr;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__aside {
        position: static;
        top: auto;
    }
}

@media (max-width: 767.98px) {
    :where(html[data-hp-page="masspay"]) .alvand-masspay__card {
        border-radius: 18px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__header {
        padding: 19px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__header-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 17px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__title {
        font-size: 16px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__invoices {
        padding: 14px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__summary {
        padding: 18px;
    }
}

@media (max-width: 575.98px) {
    :where(html[data-hp-page="masspay"]) .alvand-masspay {
        padding-top: 0;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__grid {
        gap: 15px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__card {
        border-radius: 16px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__header {
        align-items: flex-start;
        padding: 17px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__description {
        font-size: 11px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__invoices {
        padding: 11px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__invoice {
        margin-bottom: 11px;
        border-radius: 13px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__invoice-head {
        padding: 12px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__items-head {
        display: none;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__item {
        display: block;
        padding: 12px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__item-description {
        margin-bottom: 7px;
        font-size: 11px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__item-amount {
        display: block;
        color: var(--amp-primary);
        font-size: 12px;
        text-align: start;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__summary {
        padding: 16px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__grand-value {
        font-size: 16px;
    }

    :where(html[data-hp-page="masspay"]) .alvand-masspay__pay-btn {
        min-height: 46px;
    }
}

/* password-reset-change-prompt.tpl */
:where(html:has(.alvand-pwchange)) .alvand-pwchange {
    --apw-primary: var(--hp-primary);
    --apw-primary-hover: var(--hp-primary-hover);
    --apw-primary-soft: var(--hp-primary-soft);
    --apw-primary-border: var(--hp-primary-line);

    --apw-text: #172033;
    --apw-text-2: #344054;
    --apw-muted: #7c8799;

    --apw-border: #e4e9f0;
    --apw-border-hover: #cbd5e1;
    --apw-surface: var(--hp-surface);
    --apw-soft: var(--hp-surface-soft);

    width: 100%;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange,
:where(html:has(.alvand-pwchange)) .alvand-pwchange * {
    box-sizing: border-box;
}

/* ---------------------------------------
   Header
--------------------------------------- */

:where(html:has(.alvand-pwchange)) .alvand-pwchange__header {
    max-width: 520px;
    margin: 0 auto 30px;
    text-align: center;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    color: var(--apw-primary);
    background: var(--apw-primary-soft);
    border: 1px solid var(--apw-primary-border);
    border-radius: 19px;
    font-size: 26px;
    line-height: 1;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__text {
    margin: 0;
    color: var(--apw-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 2;
}

/* ---------------------------------------
   Form
--------------------------------------- */

:where(html:has(.alvand-pwchange)) .alvand-pwchange__form {
    width: 100%;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__field {
    margin-bottom: 20px;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__label {
    display: flex;
    align-items: center;
    margin: 0 0 9px;
    color: var(--apw-text-2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}

/* Exact custom input shell */
:where(html:has(.alvand-pwchange)) .alvand-pwchange__input {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 50px;
    min-height: 50px;
    overflow: hidden;
    background: var(--apw-surface);
    border: 1px solid var(--apw-border);
    border-radius: 12px;
    box-shadow: 0 4px 13px rgba(17, 24, 39, .035);
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__input:hover {
    border-color: var(--apw-border-hover);
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__input:focus-within {
    border-color: #8db1ff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    width: 50px;
    min-width: 50px;
    height: 48px;
    margin: 0;
    padding: 0;
    color: var(--apw-primary);
    background: var(--apw-primary-soft);
    border: 0;
    border-radius: 0;
    font-size: 14px;
    line-height: 1;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__input-icon i {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: 15px;
    line-height: 1;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__control {
    display: block;
    flex: 1 1 0;
    width: 1%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 15px;
    color: var(--apw-text);
    background: #fff;
    border: 0;
    border-radius: 0;
    outline: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    direction: ltr;
    text-align: left;
    box-shadow: none;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__control:focus {
    outline: 0;
    box-shadow: none;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__control::placeholder {
    color: #a8b1bf;
    opacity: 1;
    letter-spacing: 2px;
}

/* WHMCS password match message */
:where(html:has(.alvand-pwchange)) #inputNewPassword2Msg {
    min-height: 0;
    margin-top: 7px;
    color: #7c8799;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
}

:where(html:has(.alvand-pwchange)) #inputNewPassword2Msg:empty {
    display: none;
}

:where(html:has(.alvand-pwchange)) #inputNewPassword2Msg.text-danger,
:where(html:has(.alvand-pwchange)) #inputNewPassword2Msg.has-error,
:where(html:has(.alvand-pwchange)) #inputNewPassword2Msg.invalid-feedback {
    display: block;
    color: #dc2626 !important;
}

/* ---------------------------------------
   Password strength
--------------------------------------- */

:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength {
    margin-top: 24px;
    padding: 17px;
    background: var(--apw-soft);
    border: 1px solid var(--apw-border);
    border-radius: 14px;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #697586;
    font-size: 12px;
    font-weight: 700;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength-head i {
    color: var(--apw-primary);
    font-size: 14px;
}

/* Normalize WHMCS pwstrength.tpl */
:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength .progress {
    height: 7px !important;
    margin: 0 !important;
    overflow: hidden;
    background: #e9edf3 !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength .progress-bar {
    border-radius: 999px;
    box-shadow: none !important;
    transition: width .25s ease;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength .password-strength-meter,
:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength .password-strength-meter-score {
    border-radius: 999px;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength .password-strength-meter {
    overflow: hidden;
    background: #e9edf3;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength .password-strength-meter-score {
    min-height: 7px;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength .text-muted,
:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength small,
:where(html:has(.alvand-pwchange)) .alvand-pwchange__strength p {
    color: #8a95a5 !important;
    font-size: 11px;
    line-height: 1.8;
}

/* ---------------------------------------
   Actions
--------------------------------------- */

:where(html:has(.alvand-pwchange)) .alvand-pwchange__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 10px 21px;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    outline: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn--primary {
    flex: 1 1 auto;
    color: #fff !important;
    background: var(--apw-primary) !important;
    border-color: var(--apw-primary) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .16) !important;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn--primary:hover,
:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn--primary:focus {
    color: #fff !important;
    background: var(--apw-primary-hover) !important;
    border-color: var(--apw-primary-hover) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .20) !important;
    transform: translateY(-1px);
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn--secondary {
    flex: 0 0 auto;
    min-width: 112px;
    color: #667085 !important;
    background: #fff !important;
    border-color: var(--apw-border) !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .035) !important;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn--secondary:hover,
:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn--secondary:focus {
    color: var(--apw-primary) !important;
    background: var(--apw-primary-soft) !important;
    border-color: var(--apw-primary-border) !important;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn:active {
    transform: translateY(0);
}

/* ---------------------------------------
   Prevent Bootstrap / previous PHC rules
   from overriding this page
--------------------------------------- */

:where(html:has(.alvand-pwchange)) .alvand-pwchange .phc-input-group,
:where(html:has(.alvand-pwchange)) .alvand-pwchange .input-group.phc-input-group {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--apw-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange .phc-input-group > .input-group-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--apw-primary) !important;
    background: var(--apw-primary-soft) !important;
    border: 0 !important;
    border-radius: 0 !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
}

:where(html:has(.alvand-pwchange)) .alvand-pwchange .phc-input-group > .form-control {
    flex: 1 1 0 !important;
    width: 1% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------------------------------------
   Responsive
--------------------------------------- */

@media (max-width: 575.98px) {
    :where(html:has(.alvand-pwchange)) .alvand-pwchange__header {
        margin-bottom: 25px;
    }

    :where(html:has(.alvand-pwchange)) .alvand-pwchange__icon {
        width: 62px;
        height: 62px;
        border-radius: 17px;
        font-size: 23px;
    }

    :where(html:has(.alvand-pwchange)) .alvand-pwchange__input,
:where(html:has(.alvand-pwchange)) .alvand-pwchange .phc-input-group,
:where(html:has(.alvand-pwchange)) .alvand-pwchange .input-group.phc-input-group {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }

    :where(html:has(.alvand-pwchange)) .alvand-pwchange__input-icon,
:where(html:has(.alvand-pwchange)) .alvand-pwchange .phc-input-group > .input-group-text {
        flex-basis: 47px !important;
        width: 47px !important;
        min-width: 47px !important;
        max-width: 47px !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    :where(html:has(.alvand-pwchange)) .alvand-pwchange__control,
:where(html:has(.alvand-pwchange)) .alvand-pwchange .phc-input-group > .form-control {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    :where(html:has(.alvand-pwchange)) .alvand-pwchange__strength {
        padding: 15px;
    }

    :where(html:has(.alvand-pwchange)) .alvand-pwchange__actions {
        flex-direction: column;
        gap: 9px;
    }

    :where(html:has(.alvand-pwchange)) .alvand-pwchange__btn--primary,
:where(html:has(.alvand-pwchange)) .alvand-pwchange__btn--secondary {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }
}

/* password-reset-container.tpl */
:where(html:has(.alvand-auth-page)) .alvand-auth-page {
    --aw-primary: var(--hp-primary);
    --aw-primary-hover: var(--hp-primary-hover);
    --aw-primary-soft: var(--hp-primary-soft);
    --aw-primary-soft-2: #f7faff;
    --aw-primary-border: #dbe7ff;

    --aw-text: #172033;
    --aw-text-2: #344054;
    --aw-muted: #7c8799;

    --aw-border: #e7ebf1;
    --aw-border-strong: #d8dee8;
    --aw-surface: var(--hp-surface);
    --aw-surface-soft: var(--hp-surface-soft);

    --aw-danger: #dc2626;
    --aw-danger-soft: #fff5f5;
    --aw-danger-border: #fee2e2;

    --aw-success: #0f9f6e;
    --aw-success-soft: #f0fdf8;
    --aw-success-border: #d1fae5;

    width: 100%;
    padding: 28px 0 18px;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-page,
:where(html:has(.alvand-auth-page)) .alvand-auth-page * {
    box-sizing: border-box;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-shell {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-card {
    position: relative;
    overflow: hidden;
    background: var(--aw-surface);
    border: 1px solid var(--aw-border);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(17, 24, 39, .07);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 34px;
    left: 34px;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, rgba(37,99,235,0), #2563eb 50%, rgba(37,99,235,0));
}

:where(html:has(.alvand-auth-page)) .alvand-auth-card-body {
    padding: 36px;
}

/* ---------------------------------------
   Main state layout
--------------------------------------- */

:where(html:has(.alvand-auth-page)) .alvand-auth-state {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin-bottom: 22px;
    border-radius: 20px;
    font-size: 28px;
    line-height: 1;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-icon--danger {
    color: var(--aw-danger);
    background: var(--aw-danger-soft);
    border: 1px solid var(--aw-danger-border);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-icon--success {
    color: var(--aw-success);
    background: var(--aw-success-soft);
    border: 1px solid var(--aw-success-border);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-title {
    margin: 0 0 8px;
    color: var(--aw-text);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.75;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-message {
    margin-top: 20px;
    padding: 17px 18px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 2;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-message--danger {
    color: #b42318;
    background: var(--aw-danger-soft);
    border: 1px solid var(--aw-danger-border);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-message--success {
    color: #536174;
    background: var(--aw-surface-soft);
    border: 1px solid var(--aw-border);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-message p {
    margin: 0;
    color: inherit;
}

/* ---------------------------------------
   Inner WHMCS form surface
--------------------------------------- */

:where(html:has(.alvand-auth-page)) .alvand-auth-inner {
    width: 100%;
}

/* Headings coming from WHMCS inner templates */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner h1,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner h2,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner h3,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner h4,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner h5,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner h6 {
    color: var(--aw-text);
    font-weight: 800;
    line-height: 1.75;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner h1 {
    font-size: 24px;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner h2 {
    font-size: 22px;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner h3,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner h4 {
    font-size: 19px;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner p {
    color: var(--aw-muted);
    font-size: 13px;
    line-height: 2;
}

/* Default Bootstrap panels/cards in included WHMCS templates */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .card,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .panel,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .well {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .card-body,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .panel-body,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .well {
    padding: 0;
}

/* Labels */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner label,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .control-label,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .col-form-label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--aw-text-2);
    font-size: 12px;
    font-weight: 700;
}

/* Form spacing */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .form-group,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .mb-3 {
    margin-bottom: 18px !important;
}

/* Inputs/selects/textareas */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .form-control,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="text"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="email"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="password"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="number"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="tel"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner select,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    color: var(--aw-text);
    background: #fff;
    border: 1px solid var(--aw-border-strong);
    border-radius: 12px;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner textarea {
    min-height: 110px;
    resize: vertical;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .form-control:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="text"]:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="email"]:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="password"]:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="number"]:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="tel"]:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner select:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner textarea:hover {
    border-color: #c6cfdb;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .form-control:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="text"]:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="email"]:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="password"]:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="number"]:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="tel"]:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner select:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner textarea:focus {
    background: #fff;
    border-color: #8db1ff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}

/* Input groups */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .input-group {
    border-radius: 12px;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .input-group-text,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .input-group-addon {
    color: #728096;
    background: var(--aw-surface-soft);
    border-color: var(--aw-border-strong);
}

/* Help text */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .help-block,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .form-text,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner small {
    color: #8b95a5;
    font-size: 11px;
    line-height: 1.8;
}

/* Alerts from WHMCS included templates */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .alert {
    margin: 0 0 20px;
    padding: 15px 17px;
    border-radius: 13px;
    border: 1px solid var(--aw-border);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.9;
    box-shadow: none;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .alert-danger {
    color: #b42318;
    background: var(--aw-danger-soft);
    border-color: var(--aw-danger-border);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .alert-success {
    color: #087a55;
    background: var(--aw-success-soft);
    border-color: var(--aw-success-border);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .alert-info,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .alert-warning {
    color: #475467;
    background: #f8fafc;
    border-color: var(--aw-border);
}

/* ---------------------------------------
   Buttons - replaces Bootstrap defaults
--------------------------------------- */

:where(html:has(.alvand-auth-page)) .alvand-auth-page .alvand-btn,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner button,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="submit"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 22px;
    border-radius: 12px !important;
    border: 1px solid transparent;
    outline: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none !important;
    box-shadow: none;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

/* Primary */
:where(html:has(.alvand-auth-page)) .alvand-auth-page .alvand-btn--primary,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-primary,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner button.btn-primary,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input.btn-primary[type="submit"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="submit"]:not(.btn-default):not(.btn-secondary) {
    color: #fff !important;
    background: var(--aw-primary) !important;
    border-color: var(--aw-primary) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .16) !important;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-page .alvand-btn--primary:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-page .alvand-btn--primary:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-primary:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-primary:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner button.btn-primary:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner button.btn-primary:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input.btn-primary[type="submit"]:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input.btn-primary[type="submit"]:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="submit"]:not(.btn-default):not(.btn-secondary):hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="submit"]:not(.btn-default):not(.btn-secondary):focus {
    color: #fff !important;
    background: var(--aw-primary-hover) !important;
    border-color: var(--aw-primary-hover) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .20) !important;
    transform: translateY(-1px);
}

/* Secondary/default buttons */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-default,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-secondary,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-light {
    color: #4d5b70 !important;
    background: #fff !important;
    border-color: var(--aw-border-strong) !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .04) !important;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-default:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-default:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-secondary:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-secondary:focus,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-light:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-light:focus {
    color: var(--aw-primary) !important;
    background: var(--aw-primary-soft-2) !important;
    border-color: var(--aw-primary-border) !important;
}

/* Full-width WHMCS buttons remain full width */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-block,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .w-100 {
    width: 100%;
}

/* Button groups / form action rows */
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .form-actions,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .text-center,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn-group {
    gap: 8px;
}

/* ---------------------------------------
   Success CTA
--------------------------------------- */

:where(html:has(.alvand-auth-page)) .alvand-success-action {
    margin-top: 24px;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-page .alvand-btn--primary {
    color: #fff !important;
    background: var(--aw-primary);
    border-color: var(--aw-primary);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .16);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-page .alvand-btn--primary:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-page .alvand-btn--primary:focus {
    color: #fff !important;
    background: var(--aw-primary-hover);
    border-color: var(--aw-primary-hover);
    box-shadow: 0 10px 22px rgba(37, 99, 235, .20);
    transform: translateY(-1px);
}

/* ---------------------------------------
   Footer return link
--------------------------------------- */

:where(html:has(.alvand-auth-page)) .alvand-auth-footer {
    display: flex;
    justify-content: center;
    padding-top: 18px;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 13px;
    color: #7d8899 !important;
    background: transparent;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: color .18s ease, background-color .18s ease;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-back i {
    color: #9aa5b3;
    font-size: 12px;
    transition: color .18s ease;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-back:hover,
:where(html:has(.alvand-auth-page)) .alvand-auth-back:focus {
    color: var(--aw-primary) !important;
    background: var(--aw-primary-soft);
}

:where(html:has(.alvand-auth-page)) .alvand-auth-back:hover i,
:where(html:has(.alvand-auth-page)) .alvand-auth-back:focus i {
    color: var(--aw-primary);
}

/* ---------------------------------------
   RTL/LTR safe alignment for inner forms
--------------------------------------- */

:where(html:has(.alvand-auth-page)) .alvand-auth-inner .checkbox,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .radio,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .form-check {
    color: var(--aw-text-2);
    font-size: 12px;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner a:not(.btn) {
    color: var(--aw-primary);
    text-decoration: none;
}

:where(html:has(.alvand-auth-page)) .alvand-auth-inner a:not(.btn):hover {
    color: var(--aw-primary-hover);
}

/* ---------------------------------------
   Responsive
--------------------------------------- */

@media (max-width: 767.98px) {
    :where(html:has(.alvand-auth-page)) .alvand-auth-page {
        padding-top: 16px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-shell {
        max-width: 100%;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-card {
        border-radius: 20px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-card::before {
        right: 22px;
        left: 22px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-card-body {
        padding: 28px 22px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-icon {
        width: 66px;
        height: 66px;
        margin-bottom: 18px;
        border-radius: 18px;
        font-size: 25px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-title {
        font-size: 19px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-page .alvand-btn,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner button,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="submit"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="button"] {
        min-height: 46px;
    }
}

@media (max-width: 575.98px) {
    :where(html:has(.alvand-auth-page)) .alvand-auth-card {
        border-radius: 18px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-card-body {
        padding: 24px 17px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-message {
        padding: 15px;
    }

    :where(html:has(.alvand-auth-page)) .alvand-success-action .alvand-btn {
        width: 100%;
    }

    :where(html:has(.alvand-auth-page)) .alvand-auth-inner .btn,
:where(html:has(.alvand-auth-page)) .alvand-auth-inner button[type="submit"],
:where(html:has(.alvand-auth-page)) .alvand-auth-inner input[type="submit"] {
        width: 100%;
    }
}

/* password-reset-email-prompt.tpl */
:where(html:has(.alvand-pwemail)) .alvand-pwemail {
    --ape-primary: var(--hp-primary);
    --ape-primary-hover: var(--hp-primary-hover);
    --ape-primary-soft: var(--hp-primary-soft);
    --ape-primary-border: var(--hp-primary-line);

    --ape-text: #172033;
    --ape-text-2: #344054;
    --ape-muted: #7c8799;

    --ape-border: #e4e9f0;
    --ape-border-hover: #cbd5e1;
    --ape-surface: var(--hp-surface);
    --ape-soft: var(--hp-surface-soft);

    --ape-danger: #dc2626;
    --ape-danger-soft: #fff5f5;
    --ape-danger-border: #fee2e2;

    width: 100%;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail,
:where(html:has(.alvand-pwemail)) .alvand-pwemail * {
    box-sizing: border-box;
}

/* ---------------------------------------
   Header
--------------------------------------- */

:where(html:has(.alvand-pwemail)) .alvand-pwemail__header {
    max-width: 520px;
    margin: 0 auto 30px;
    text-align: center;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    color: var(--ape-primary);
    background: var(--ape-primary-soft);
    border: 1px solid var(--ape-primary-border);
    border-radius: 19px;
    font-size: 25px;
    line-height: 1;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__title {
    margin: 0 0 7px;
    color: var(--ape-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.75;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__description {
    margin: 0;
    color: var(--ape-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 2;
}

/* ---------------------------------------
   Error alert
--------------------------------------- */

:where(html:has(.alvand-pwemail)) .alvand-pwemail__alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0 0 22px;
    padding: 14px 16px;
    color: #b42318;
    background: var(--ape-danger-soft);
    border: 1px solid var(--ape-danger-border);
    border-radius: 13px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.9;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__alert i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--ape-danger);
    font-size: 15px;
}

/* ---------------------------------------
   Form
--------------------------------------- */

:where(html:has(.alvand-pwemail)) .alvand-pwemail__form {
    width: 100%;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__field {
    margin-bottom: 22px;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__label {
    display: flex;
    align-items: center;
    margin: 0 0 9px;
    color: var(--ape-text-2);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
}

/* Custom email control - no Bootstrap input-group */
:where(html:has(.alvand-pwemail)) .alvand-pwemail__input {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 50px;
    min-height: 50px;
    overflow: hidden;
    background: var(--ape-surface);
    border: 1px solid var(--ape-border);
    border-radius: 12px;
    box-shadow: 0 4px 13px rgba(17, 24, 39, .035);
    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__input:hover {
    border-color: var(--ape-border-hover);
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__input:focus-within {
    border-color: #8db1ff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 50px;
    width: 50px;
    min-width: 50px;
    height: 48px;
    margin: 0;
    padding: 0;
    color: var(--ape-primary);
    background: var(--ape-primary-soft);
    border: 0;
    font-size: 14px;
    line-height: 1;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__input-icon i {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: 15px;
    line-height: 1;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__control {
    display: block;
    flex: 1 1 0;
    width: 1%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0 15px;
    color: var(--ape-text);
    background: #fff;
    border: 0;
    border-radius: 0;
    outline: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
    direction: ltr;
    text-align: left;
    box-shadow: none;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__control:focus {
    outline: 0;
    box-shadow: none;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__control::placeholder {
    color: #a8b1bf;
    opacity: 1;
}

/* ---------------------------------------
   Captcha
--------------------------------------- */

:where(html:has(.alvand-pwemail)) .alvand-pwemail__captcha {
    margin: 0 0 22px;
    padding: 17px;
    overflow: hidden;
    background: var(--ape-soft);
    border: 1px solid var(--ape-border);
    border-radius: 14px;
    text-align: center;
}

/* Keep WHMCS captcha functional, normalize only visual wrappers */
:where(html:has(.alvand-pwemail)) .alvand-pwemail__captcha .form-control {
    min-height: 46px;
    border: 1px solid var(--ape-border) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__captcha .form-control:focus {
    border-color: #8db1ff !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08) !important;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__captcha img {
    max-width: 100%;
    height: auto;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__captcha .btn {
    border-radius: 10px !important;
}

/* ---------------------------------------
   Buttons
--------------------------------------- */

:where(html:has(.alvand-pwemail)) .alvand-pwemail__btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 10px 20px;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    outline: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__btn--primary {
    width: 100%;
    color: #fff !important;
    background: var(--ape-primary) !important;
    border-color: var(--ape-primary) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .16) !important;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__btn--primary:hover,
:where(html:has(.alvand-pwemail)) .alvand-pwemail__btn--primary:focus {
    color: #fff !important;
    background: var(--ape-primary-hover) !important;
    border-color: var(--ape-primary-hover) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .20) !important;
    transform: translateY(-1px);
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__btn--secondary {
    flex: 1 1 0;
    color: #667085 !important;
    background: #fff !important;
    border-color: var(--ape-border) !important;
    box-shadow: 0 4px 12px rgba(17, 24, 39, .035) !important;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__btn--secondary:hover,
:where(html:has(.alvand-pwemail)) .alvand-pwemail__btn--secondary:focus {
    color: var(--ape-primary) !important;
    background: var(--ape-primary-soft) !important;
    border-color: var(--ape-primary-border) !important;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__btn:active {
    transform: translateY(0);
}

/* ---------------------------------------
   Divider
--------------------------------------- */

:where(html:has(.alvand-pwemail)) .alvand-pwemail__divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px 0;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__divider::before {
    content: "";
    width: 100%;
    height: 1px;
    background: var(--ape-border);
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__divider span {
    position: absolute;
    padding: 0 13px;
    color: #98a2b3;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* ---------------------------------------
   Secondary actions
--------------------------------------- */

:where(html:has(.alvand-pwemail)) .alvand-pwemail__secondary-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__secondary-actions .alvand-pwemail__btn i {
    color: #8793a5;
    font-size: 14px;
    transition: color .18s ease;
}

:where(html:has(.alvand-pwemail)) .alvand-pwemail__secondary-actions .alvand-pwemail__btn:hover i {
    color: var(--ape-primary);
}

/* ---------------------------------------
   Responsive
--------------------------------------- */

@media (max-width: 575.98px) {
    :where(html:has(.alvand-pwemail)) .alvand-pwemail__header {
        margin-bottom: 25px;
    }

    :where(html:has(.alvand-pwemail)) .alvand-pwemail__icon {
        width: 62px;
        height: 62px;
        border-radius: 17px;
        font-size: 23px;
    }

    :where(html:has(.alvand-pwemail)) .alvand-pwemail__title {
        font-size: 18px;
    }

    :where(html:has(.alvand-pwemail)) .alvand-pwemail__input {
        height: 48px;
        min-height: 48px;
    }

    :where(html:has(.alvand-pwemail)) .alvand-pwemail__input-icon {
        flex-basis: 47px;
        width: 47px;
        min-width: 47px;
        height: 46px;
    }

    :where(html:has(.alvand-pwemail)) .alvand-pwemail__control {
        height: 46px;
        min-height: 46px;
    }

    :where(html:has(.alvand-pwemail)) .alvand-pwemail__captcha {
        padding: 15px;
    }

    :where(html:has(.alvand-pwemail)) .alvand-pwemail__secondary-actions {
        flex-direction: column;
        gap: 9px;
    }

    :where(html:has(.alvand-pwemail)) .alvand-pwemail__btn--secondary {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* serverstatus.tpl */
:root:where(html[data-hp-page="serverstatus"]) {
    --ns-card:var(--hp-surface);
    --ns-soft:var(--hp-surface-soft);
    --ns-border:var(--hp-line);
    --ns-divider:#edf1f6;

    --ns-text:var(--hp-ink);
    --ns-text-2:var(--hp-ink-secondary);
    --ns-muted:var(--hp-muted);
    --ns-muted-2:#94a3b8;

    --ns-blue:var(--hp-primary);
    --ns-blue-dark:var(--hp-primary-hover);
    --ns-blue-light:#60a5fa;
    --ns-blue-soft:var(--hp-primary-soft);
    --ns-blue-line:#bfdbfe;
    --ns-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --ns-green:#059669;
    --ns-green-soft:#ecfdf5;
    --ns-green-line:#a7f3d0;

    --ns-orange:#d97706;
    --ns-orange-soft:#fff7ed;
    --ns-orange-line:#fed7aa;

    --ns-red:#dc2626;
    --ns-red-soft:#fef2f2;
    --ns-red-line:#fecaca;

    --ns-cyan:#0284c7;
    --ns-cyan-soft:#f0f9ff;
    --ns-cyan-line:#bae6fd;

    --ns-radius-xl:24px;
    --ns-radius-lg:17px;
    --ns-radius-md:12px;
    --ns-radius-sm:9px;

    --ns-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --ns-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --ns-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-status,
:where(html[data-hp-page="serverstatus"]) .phc-network-status * {
    box-sizing:border-box;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-status {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--ns-text-2);
}

/* =========================================================
   Top Status Alerts
   ========================================================= */
:where(html[data-hp-page="serverstatus"]) .phc-network-summary {
    position:relative;
    min-height:86px;
    margin-bottom:14px;
    padding:14px 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    overflow:hidden;

    border:1px solid var(--ns-border);
    border-radius:16px;

    background:#fff;

    box-shadow:var(--ns-shadow-sm);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary::after {
    content:"";
    position:absolute;
    width:105px;
    height:105px;
    left:-60px;
    bottom:-66px;
    border-radius:50%;
    pointer-events:none;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary--healthy {
    border-color:var(--ns-green-line);
    background:linear-gradient(135deg,#fff 0%,var(--ns-green-soft) 170%);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary--healthy::before {
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    right:0;
    width:3px;
    border-radius:3px 0 0 3px;
    background:var(--ns-green);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary--healthy::after {
    background:rgba(5,150,105,.06);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary--scheduled {
    border-color:var(--ns-cyan-line);
    background:linear-gradient(135deg,#fff 0%,var(--ns-cyan-soft) 170%);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary--scheduled::before {
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    right:0;
    width:3px;
    border-radius:3px 0 0 3px;
    background:var(--ns-cyan);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary--scheduled::after {
    background:rgba(2,132,199,.06);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary-main {
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:11px;

    min-width:0;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary-icon {
    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid;
    border-radius:12px;

    background:#fff;

    font-size:.82rem;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary--healthy .phc-network-summary-icon {
    color:var(--ns-green);
    border-color:var(--ns-green-line);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary--scheduled .phc-network-summary-icon {
    color:var(--ns-cyan);
    border-color:var(--ns-cyan-line);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary h6,
:where(html[data-hp-page="serverstatus"]) .phc-network-summary strong {
    margin:0 0 3px!important;

    color:var(--ns-text)!important;

    font-size:.85rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-summary p,
:where(html[data-hp-page="serverstatus"]) .phc-network-summary span {
    color:var(--ns-muted)!important;

    font-size:.72rem!important;
    line-height:1.7;
    font-weight:650;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-more {
    min-height:36px;
    padding:0 11px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    flex:0 0 auto;

    border:1px solid var(--ns-cyan-line);
    border-radius:9px;

    color:var(--ns-cyan)!important;
    background:#fff;

    font-size:.69rem;
    line-height:1;
    font-weight:900;

    text-decoration:none!important;

    transition:
        transform var(--ns-transition),
        color var(--ns-transition),
        border-color var(--ns-transition),
        background var(--ns-transition);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-more:hover {
    transform:translateY(-1px);

    color:#fff!important;
    border-color:var(--ns-cyan);
    background:linear-gradient(135deg,#38bdf8,#0284c7);
}

/* =========================================================
   Servers Manager
   ========================================================= */
:where(html[data-hp-page="serverstatus"]) .phc-server-manager {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;

    border:1px solid var(--ns-border);
    border-radius:var(--ns-radius-xl);

    background:#fff;
    box-shadow:var(--ns-shadow-panel);
}

:where(html[data-hp-page="serverstatus"]) .phc-server-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--ns-gradient);
}

:where(html[data-hp-page="serverstatus"]) .phc-server-header {
    min-height:88px;
    padding:17px 20px;

    display:flex;
    align-items:center;
    gap:12px;

    border-bottom:1px solid var(--ns-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="serverstatus"]) .phc-server-header-icon {
    position:relative;

    width:46px;
    height:46px;
    flex:0 0 46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ns-blue-line);
    border-radius:13px;

    color:#fff;
    background:var(--ns-gradient);

    box-shadow:0 9px 20px rgba(37,99,235,.16);

    font-size:.84rem;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-header-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-header h4 {
    margin:0 0 3px!important;

    color:var(--ns-text)!important;
    font-size:.98rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-header p {
    margin:0!important;

    color:var(--ns-muted)!important;
    font-size:.75rem!important;
    line-height:1.7;
}

/* Table */
:where(html[data-hp-page="serverstatus"]) .phc-server-table-wrap {
    padding:0;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-table {
    width:calc(100% - 36px)!important;
    max-width:calc(100% - 36px)!important;
    margin:10px 18px 12px!important;

    border-collapse:separate!important;
    border-spacing:0 7px!important;

    background:transparent!important;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-table thead th {
    padding:7px 9px 8px!important;

    border:0!important;

    color:var(--ns-muted-2)!important;
    background:transparent!important;

    font-size:.67rem!important;
    line-height:1.4;
    font-weight:850!important;
    white-space:nowrap;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-table tbody td {
    min-height:50px;
    padding:9px 10px!important;

    vertical-align:middle;

    border-top:1px solid var(--ns-border)!important;
    border-bottom:1px solid var(--ns-border)!important;

    color:var(--ns-text-2)!important;
    background:#fff!important;

    font-size:.76rem!important;
    line-height:1.55;

    transition:
        border-color var(--ns-transition),
        background var(--ns-transition);
}

:where(html[data-hp-page="serverstatus"]) .phc-server-table tbody td:first-child {
    border-right:1px solid var(--ns-border)!important;
    border-radius:0 12px 12px 0;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-table tbody td:last-child {
    border-left:1px solid var(--ns-border)!important;
    border-radius:12px 0 0 12px;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-table tbody tr:hover td {
    border-color:var(--ns-blue-line)!important;
    background:#fbfdff!important;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-name {
    display:flex;
    align-items:center;
    gap:8px;

    color:var(--ns-text)!important;

    font-weight:900!important;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-name-icon {
    width:30px;
    height:30px;
    flex:0 0 30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ns-blue-line);
    border-radius:9px;

    color:var(--ns-blue);
    background:var(--ns-blue-soft);

    font-size:.62rem;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-table td[id^="port"],
:where(html[data-hp-page="serverstatus"]) .phc-server-table td[id^="load"],
:where(html[data-hp-page="serverstatus"]) .phc-server-table td[id^="uptime"] {
    text-align:center;
    font-variant-numeric:tabular-nums;
}

:where(html[data-hp-page="serverstatus"]) .phc-server-table .fa-spinner-third {
    color:var(--ns-blue)!important;
    font-size:.78rem!important;
}

:where(html[data-hp-page="serverstatus"]) .phc-phpinfo-btn {
    min-height:31px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    border:1px solid var(--ns-border)!important;
    border-radius:8px!important;

    color:var(--ns-muted)!important;
    background:#f8fafc!important;

    font-size:.64rem!important;
    line-height:1;
    font-weight:850!important;

    text-decoration:none!important;

    transition:
        transform var(--ns-transition),
        color var(--ns-transition),
        border-color var(--ns-transition),
        background var(--ns-transition);
}

:where(html[data-hp-page="serverstatus"]) .phc-phpinfo-btn:hover {
    transform:translateY(-1px);

    color:var(--ns-blue)!important;
    border-color:var(--ns-blue-line)!important;
    background:var(--ns-blue-soft)!important;
}

/* server AJAX-generated markers where generic classes exist */
:where(html[data-hp-page="serverstatus"]) .phc-server-table .text-success,
:where(html[data-hp-page="serverstatus"]) .phc-server-table .text-danger,
:where(html[data-hp-page="serverstatus"]) .phc-server-table .text-warning {
    font-weight:900!important;
}

/* =========================================================
   Issues
   ========================================================= */
:where(html[data-hp-page="serverstatus"]) .phc-issues-section {
    margin-top:4px;
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-card {
    position:relative;
    overflow:hidden;
    margin-bottom:12px;

    border:1px solid var(--ns-border);
    border-radius:17px;

    background:#fff;

    box-shadow:var(--ns-shadow-sm);
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:2px;

    background:linear-gradient(90deg,transparent,rgba(217,119,6,.65),transparent);
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-header {
    padding:13px 15px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;

    border-bottom:1px solid var(--ns-divider);

    background:linear-gradient(180deg,#fff 0%,#fcfdff 100%);
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-heading {
    min-width:0;

    display:flex;
    align-items:center;
    gap:10px;
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-icon {
    width:40px;
    height:40px;
    flex:0 0 40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ns-orange-line);
    border-radius:11px;

    color:var(--ns-orange);
    background:var(--ns-orange-soft);

    font-size:.76rem;
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-title {
    margin:0 0 5px!important;

    color:var(--ns-text)!important;

    font-size:.85rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="serverstatus"]) .phc-status-badge {
    min-height:25px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--ns-border);
    border-radius:8px;

    color:var(--ns-muted)!important;
    background:#f8fafc;

    font-size:.64rem;
    line-height:1;
    font-weight:850;
}

:where(html[data-hp-page="serverstatus"]) .phc-priority-badge {
    min-height:31px;
    padding:0 9px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid;
    border-radius:9px;

    font-size:.66rem;
    line-height:1;
    font-weight:900;
}

:where(html[data-hp-page="serverstatus"]) .phc-priority-critical {
    color:var(--ns-red);
    border-color:var(--ns-red-line);
    background:var(--ns-red-soft);
}

:where(html[data-hp-page="serverstatus"]) .phc-priority-high {
    color:var(--ns-orange);
    border-color:var(--ns-orange-line);
    background:var(--ns-orange-soft);
}

:where(html[data-hp-page="serverstatus"]) .phc-priority-low {
    color:var(--ns-green);
    border-color:var(--ns-green-line);
    background:var(--ns-green-soft);
}

:where(html[data-hp-page="serverstatus"]) .phc-priority-normal {
    color:var(--ns-cyan);
    border-color:var(--ns-cyan-line);
    background:var(--ns-cyan-soft);
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-body {
    padding:15px;
}

:where(html[data-hp-page="serverstatus"]) .phc-affecting-box {
    margin-bottom:12px;
    padding:10px 11px;

    display:flex;
    align-items:center;
    gap:9px;

    border:1px solid var(--ns-border);
    border-radius:11px;

    background:#f8fafc;
}

:where(html[data-hp-page="serverstatus"]) .phc-affecting-icon {
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ns-blue-line);
    border-radius:10px;

    color:var(--ns-blue);
    background:var(--ns-blue-soft);

    font-size:.67rem;
}

:where(html[data-hp-page="serverstatus"]) .phc-affecting-box strong {
    display:block;
    margin-bottom:2px;

    color:var(--ns-text)!important;

    font-size:.72rem;
    line-height:1.5;
    font-weight:900;
}

:where(html[data-hp-page="serverstatus"]) .phc-affecting-box span {
    color:var(--ns-muted)!important;

    font-size:.68rem;
    line-height:1.6;
    font-weight:700;
}

:where(html[data-hp-page="serverstatus"]) .phc-you-affected {
    min-height:29px;
    margin-bottom:12px;
    padding:0 9px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--ns-orange-line);
    border-radius:9px;

    color:var(--ns-orange);
    background:var(--ns-orange-soft);

    font-size:.67rem;
    line-height:1;
    font-weight:850;
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-description {
    margin:0 0 13px!important;

    color:var(--ns-text-2)!important;

    font-size:.76rem!important;
    line-height:1.9!important;
    font-weight:600!important;

    text-align:justify;
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-meta {
    padding-top:11px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px 16px;

    border-top:1px solid var(--ns-divider);
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-meta-item {
    min-height:30px;

    display:flex;
    align-items:center;
    gap:6px;

    color:var(--ns-muted)!important;

    font-size:.67rem;
    line-height:1.5;
    font-weight:750;
}

:where(html[data-hp-page="serverstatus"]) .phc-issue-meta-item i {
    color:var(--ns-blue);
}

/* =========================================================
   Empty state
   ========================================================= */
:where(html[data-hp-page="serverstatus"]) .phc-network-empty {
    padding:28px 16px;

    border:1px dashed var(--ns-green-line);
    border-radius:15px;

    color:var(--ns-muted);
    background:linear-gradient(180deg,#fff 0%,var(--ns-green-soft) 180%);

    text-align:center;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-empty-icon {
    width:54px;
    height:54px;
    margin:0 auto 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ns-green-line);
    border-radius:15px;

    color:var(--ns-green);
    background:#fff;

    font-size:.95rem;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-empty h5 {
    margin:0 0 4px!important;

    color:var(--ns-text)!important;

    font-size:.84rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-empty p {
    margin:0!important;

    color:var(--ns-muted)!important;

    font-size:.72rem!important;
    line-height:1.7;
}

/* =========================================================
   Pagination
   ========================================================= */
:where(html[data-hp-page="serverstatus"]) .phc-network-pagination {
    margin-top:16px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

:where(html[data-hp-page="serverstatus"]) .phc-network-page-btn {
    min-height:36px;
    padding:0 11px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--ns-border);
    border-radius:9px;

    color:var(--ns-muted)!important;
    background:#fff;

    font-size:.68rem;
    line-height:1;
    font-weight:850;

    text-decoration:none!important;

    transition:
        transform var(--ns-transition),
        color var(--ns-transition),
        border-color var(--ns-transition),
        background var(--ns-transition);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-page-btn:hover:not(.disabled) {
    transform:translateY(-1px);

    color:var(--ns-blue)!important;
    border-color:var(--ns-blue-line);
    background:var(--ns-blue-soft);
}

:where(html[data-hp-page="serverstatus"]) .phc-network-page-btn.disabled {
    opacity:.42;
    pointer-events:none;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="serverstatus"]) .phc-server-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-table {
        width:calc(100% - 24px)!important;
        max-width:calc(100% - 24px)!important;
        margin:10px 12px 12px!important;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="serverstatus"]) .phc-network-summary {
        min-height:0;
        padding:13px 14px;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-network-summary--scheduled {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-network-more {
        width:100%;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-header {
        padding:15px;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-table {
        width:calc(100% - 20px)!important;
        max-width:calc(100% - 20px)!important;
        margin:10px!important;

        display:block;
        border-spacing:0!important;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-table thead {
        display:none!important;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-table tbody {
        display:block;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-table tbody tr {
        display:block;
        margin-bottom:10px;
        padding:7px 12px;

        border:1px solid var(--ns-border);
        border-radius:14px;

        background:#fff;
        box-shadow:var(--ns-shadow-sm);
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-table tbody td {
        width:100%;
        min-height:42px;
        padding:8px 0!important;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;

        border:0!important;
        border-bottom:1px dashed var(--ns-divider)!important;
        border-radius:0!important;

        background:transparent!important;

        text-align:left!important;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-table tbody td::before {
        content:attr(data-label);

        color:var(--ns-muted-2);

        font-size:.67rem;
        font-weight:850;

        text-align:right;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-table tbody td:last-child {
        border-bottom:0!important;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-server-name {
        justify-content:flex-end;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-issue-header {
        align-items:flex-start;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-priority-badge {
        margin-right:auto;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-issue-meta {
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="serverstatus"]) .phc-network-summary-main {
        align-items:flex-start;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-issue-heading {
        align-items:flex-start;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-priority-badge {
        width:100%;
        justify-content:center;
        margin:0;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-network-pagination {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="serverstatus"]) .phc-network-page-btn {
        width:100%;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="serverstatus"]) .phc-network-more,
:where(html[data-hp-page="serverstatus"]) .phc-server-table tbody td,
:where(html[data-hp-page="serverstatus"]) .phc-phpinfo-btn,
:where(html[data-hp-page="serverstatus"]) .phc-issue-card,
:where(html[data-hp-page="serverstatus"]) .phc-network-page-btn {
        transition:none!important;
    }
}

/* store/socialbee/index.tpl */
:root:where(html:has(.social-bee)) {
    --max-width: 1248px;
    --yellow: #f3c500;
}

:where(html:has(.social-bee)) body,
html:where(html:has(.social-bee)) {
    overflow-x: hidden;
}

:where(html:has(.social-bee)) .social-bee {
    width: 100%;
    overflow-x: hidden;
}

:where(html:has(.social-bee)) section#main-body {
    padding: 0;
}

:where(html:has(.social-bee)) .social-bee h2,
:where(html:has(.social-bee)) .social-bee p,
:where(html:has(.social-bee)) .social-bee span {
    line-height: 1.5;
}

:where(html:has(.social-bee)) .social-bee ul {
    line-height: 2;
    list-style-position: outside;
}

:where(html:has(.social-bee)) .social-bee button {
    cursor: pointer;
    transition: all 0.35s;
    box-shadow: none !important;
    outline: none !important;
    &:hover {
        opacity: 0.75;
    }
}

:where(html:has(.social-bee)) .social-bee {
    background: #fff;
}

:where(html:has(.social-bee)) .social-bee .lp-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90px;
}

:where(html:has(.social-bee)) .social-bee .hero {
    max-width: var(--max-width);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 90px;
    margin-bottom: 78px;
    color: #212533;

    & .content-block__text {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    & h2 {
        font-size: 40px;
        font-weight: 700;
        text-align: center;
        width: 772px;
    }

    & .hero__description {
        font-size: 18px;
        text-align: center;
        max-width: 512px;
    }

    & img {
        display: block;
        max-width: 100%;
    }
}

:where(html:has(.social-bee)) .social-bee .planner {
    width: 100%;
    min-height: 470px;
    margin-top: 60px;
    margin-bottom: 90px;
    padding-bottom: 32px;
    background-color: #212533;
    display: flex;
    justify-content: center;
    & img {
        display: block;
        margin-top: -140px;
        height: auto;
    }
}

:where(html:has(.social-bee)) .social-bee .content-block {
    max-width: var(--max-width);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;

    & img {
        display: block;
        height: fit-content;
        max-width: 60%;
    }

    & h2 {
        font-weight: 700;
        font-size: 32px;
        margin-bottom: 50px;
        position: relative;
        padding-top: 20px;
        color: #333333;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 186px;
            height: 8px;
            background-color: var(--yellow);
        }
    }

    & .content-block__text {
        max-width: 400px;

        & p {
            margin-bottom: 36px;
            line-height: 2;
        }

        & button {
            background-color: var(--yellow);
            padding: 16px 56px;
            border: none;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 600;
        }
    }
}

:where(html:has(.social-bee)) .social-bee .content-block.faq {
    padding-bottom: 120px;
    align-items: start;
    padding-top: 90px;
    border-top: 1px solid #ededed;

    & > div:first-child {
        flex-basis: 60%;
    }
}

:where(html:has(.social-bee)) .social-bee .action-buttons {
    height: 140px;
    margin-top: 90px;
    margin-bottom: 90px;
    background-color: #f5f5f5;
    width: 100%;
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;

    & button {
        font-size: 14px;
        border-radius: 50px;
        border: 2px solid transparent;
        padding: 12px 32px;
        max-height: fit-content;
        background-color: transparent;
    }

    & .active {
        background-color: #fff;
        border: 2px solid #e1e1e1;
    }
}

:where(html:has(.social-bee)) .social-bee .features.wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0px 16px 88px;
    border-bottom: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    align-items: center;

    & button {
        background-color: var(--yellow);
        padding: 16px 56px;
        border: none;
        border-radius: 50px;
        font-size: 18px;
        font-weight: 600;
    }
}

:where(html:has(.social-bee)) .social-bee .features {
    display: flex;
    row-gap: 90px;
    column-gap: 24px;
    justify-content: center;
    flex-wrap: wrap;

    & .features__item {
        max-width: 380px;
        text-align: center;

        & img {
            height: 188px;
            width: 188px;
        }

        & p {
            margin-top: 48px;
            line-height: 2;
        }
    }
}

:where(html:has(.social-bee)) .social-bee .pricing__header {
    max-width: 540px;
    margin: 0 auto -24px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    & h2 {
        font-size: 40px;
        font-weight: 800;
        max-width: 540px;
        color: #212533;
    }

    p {
        margin-top: 32px;
        font-size: 18px;
    }
}

@media (max-width: 1280px) {
    :where(html:has(.social-bee)) .social-bee .content-block {
        flex-direction: column;
        align-items: center;

        & img {
            max-width: 100%;
        }

        & .content-block__text {
            max-width: 100%;
        }
    }

    :where(html:has(.social-bee)) .social-bee .content-block.faq {
        align-items: start;
        gap: 0;
    }

    :where(html:has(.social-bee)) .social-bee .pricing-table {
        width: auto;
        min-width: 1024px;
    }
}

/* Media queries */

@media (max-width: 1024px) {
    :where(html:has(.social-bee)) .social-bee .hero {
        padding: 0 24px;
    }

    :where(html:has(.social-bee)) .social-bee .pricing__header {
        padding: 0 24px;
    }

    :where(html:has(.social-bee)) .social-bee .pricing-table {
        margin: 0 24px;
    }

    :where(html:has(.social-bee)) .social-bee .planner {
        min-height: auto;

        & img {
            display: block;
            max-width: 100%;
            height: fit-content;
        }
    }

    :where(html:has(.social-bee)) .social-bee .action-buttons {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    :where(html:has(.social-bee)) .social-bee .hero h2 {
        width: 100%;
        font-size: 28px;
        padding: 0 16px;
        box-sizing: border-box;
    }

    :where(html:has(.social-bee)) .social-bee .action-buttons {
        gap: 0;
        flex-wrap: wrap;
    }

    :where(html:has(.social-bee)) .social-bee .tab {
        max-height: fit-content;
    }

    :where(html:has(.social-bee)) .social-bee .tab input:checked ~ .tab__content {
        padding: 16px;
    }

    :where(html:has(.social-bee)) .social-bee .features .features__item p {
        margin-top: 24px;
    }
}

/* Accordion styles */

:where(html:has(.social-bee)) .social-bee .faq {
    padding-bottom: 90px;
}

:where(html:has(.social-bee)) .social-bee .tab {
    position: relative;
    max-height: 48px;
    margin-bottom: 12px;
}
:where(html:has(.social-bee)) .social-bee .tab:has(input:checked) {
    max-height: fit-content;
}
:where(html:has(.social-bee)) .social-bee .tab input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
:where(html:has(.social-bee)) .social-bee .tab__content {
    max-height: 0;
    overflow: hidden;
}
:where(html:has(.social-bee)) .social-bee .tab input:checked ~ .tab__content {
    max-height: fit-content;
    padding: 16px 32px;
}

/* Visual styles */

:where(html:has(.social-bee)) .social-bee .accordion {
    overflow: hidden;
}
:where(html:has(.social-bee)) .social-bee .tab__label,
:where(html:has(.social-bee)) .social-bee .tab__close {
    display: flex;
    background: var(--yellow);
    cursor: pointer;
}
:where(html:has(.social-bee)) .social-bee .tab__label {
    justify-content: space-between;
    padding: 0.8rem 1rem;

    & span {
        line-height: 1.5;
    }
}
:where(html:has(.social-bee)) .social-bee .tab__label::after {
    content: "\276F";
    width: 1em;
    height: 1em;
    margin-left: 10px;
    text-align: center;
    transform: rotate(90deg);
    transition: all 0.35s;
}
:where(html:has(.social-bee)) .social-bee .tab input:checked + .tab__label::after {
    transform: rotate(270deg);
}
:where(html:has(.social-bee)) .social-bee .tab__content ul {
    list-style: inside;

    & .faq__nested-list {
        padding-left: 32px;
        list-style: circle;
    }
}
:where(html:has(.social-bee)) .social-bee .tab__close {
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

/* Table styles */

:where(html:has(.social-bee)) .social-bee .pricing-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    max-height: none;
}

:where(html:has(.social-bee)) .hidden {
    display: none !important;
}

:where(html:has(.social-bee)) .social-bee .pricing-table {
    width: var(--max-width);
    min-width: 1024px;
    margin: 0 auto;
}

:where(html:has(.social-bee)) .social-bee .pricing-table__header-row {
    background-color: #f5f5f5;

    &.pricing-table__row:hover {
        background-color: #f5f5f5;
    }
}

:where(html:has(.social-bee)) .social-bee .pricing-table__row {
    display: flex;
    width: 100%;

    &:hover {
        background-color: #fdf9eb;
    }
}

:where(html:has(.social-bee)) .social-bee .pricing-table__cell {
    padding: 6px 12px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
    font-size: 14px;
}

:where(html:has(.social-bee)) .social-bee .pricing-table__header-cell {
    font-weight: bold;
    padding: 24px 15px;
}

:where(html:has(.social-bee)) .social-bee .pricing-table__feature-name {
    flex: 1.5;
    justify-content: flex-start;
    text-align: left;
    font-weight: normal;
}

:where(html:has(.social-bee)) .social-bee .pricing-table__feature-header {
    background-color: var(--yellow);
    color: #333;
    flex: 1.5;
}

:where(html:has(.social-bee)) .social-bee .pricing-table__icon.pricing-table__icon--check {
    color: green;
    font-weight: bold;
}

:where(html:has(.social-bee)) .social-bee .pricing-table__icon.pricing-table__icon--cross {
    color: red;
    font-weight: bold;
}

:where(html:has(.social-bee)) .social-bee .btn {
    background-color: var(--yellow);
    color: #333;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    max-width: 120px;
    margin: 10px auto;
}

:where(html:has(.social-bee)) .social-bee .btn.small-btn {
    font-weight: normal;
    font-size: 14px;
    padding: 8px 12px;
}

:where(html:has(.social-bee)) .social-bee ~ p {
    padding-top: 16px;
}

/* supportticketslist.tpl */
:root:where(html[data-hp-page="supportticketslist"]) {
    --phc-srv-bg:var(--hp-page);
    --phc-srv-card:var(--hp-surface);
    --phc-srv-card-soft:var(--hp-surface-soft);
    --phc-srv-border:var(--hp-line);
    --phc-srv-border-strong:#cbd5e1;
    --phc-srv-divider:#edf1f6;

    --phc-srv-text:var(--hp-ink);
    --phc-srv-text-2:var(--hp-ink-secondary);
    --phc-srv-muted:var(--hp-muted);
    --phc-srv-muted-2:#94a3b8;

    --phc-srv-blue:var(--hp-primary);
    --phc-srv-blue-dark:var(--hp-primary-hover);
    --phc-srv-blue-light:#60a5fa;
    --phc-srv-blue-soft:var(--hp-primary-soft);
    --phc-srv-blue-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --phc-srv-green:#10b981;
    --phc-srv-green-soft:#ecfdf5;
    --phc-srv-orange:#f59e0b;
    --phc-srv-orange-soft:#fff7ed;
    --phc-srv-red:#ef4444;
    --phc-srv-red-soft:#fef2f2;
    --phc-srv-slate:var(--hp-muted);
    --phc-srv-slate-soft:#f1f5f9;

    --phc-srv-radius-xl:24px;
    --phc-srv-radius-lg:18px;
    --phc-srv-radius-md:13px;

    --phc-srv-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --phc-srv-shadow-md:0 18px 42px rgba(15,23,42,.09),0 5px 15px rgba(15,23,42,.035);
    --phc-srv-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --phc-srv-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="supportticketslist"]) #ticketsManager .dataTables_filter {
    display:none!important;
}

/* =========================================================
   Department widgets — same visual family
   ========================================================= */
:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget {
    --widget-accent:var(--phc-srv-blue);
    --widget-soft:var(--phc-srv-blue-soft);
    --widget-edge:#bfdbfe;

    position:relative;
    min-height:132px;
    height:100%;
    padding:20px;
    overflow:hidden;

    display:flex;
    align-items:center;

    border:1px solid var(--phc-srv-border);
    border-radius:var(--phc-srv-radius-lg);
    background:linear-gradient(145deg,#fff 0%,#fff 68%,var(--widget-soft) 145%);
    box-shadow:var(--phc-srv-shadow-sm);

    transition:
        transform var(--phc-srv-transition),
        border-color var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget::before {
    content:"";
    position:absolute;
    top:0;
    right:18px;
    left:18px;
    height:3px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,var(--widget-accent),transparent);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget::after {
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    left:-72px;
    bottom:-100px;
    border-radius:50%;
    background:var(--widget-soft);
    opacity:.65;
    pointer-events:none;
    transition:transform var(--phc-srv-transition);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget:hover {
    transform:translateY(-4px);
    border-color:var(--widget-edge);
    box-shadow:var(--phc-srv-shadow-md);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget:hover::after {
    transform:scale(1.12);
}

:where(html[data-hp-page="supportticketslist"]) .phc-w-primary {
    --widget-accent:var(--phc-srv-blue);
    --widget-soft:var(--phc-srv-blue-soft);
    --widget-edge:#bfdbfe;
}

:where(html[data-hp-page="supportticketslist"]) .phc-w-success {
    --widget-accent:var(--phc-srv-green);
    --widget-soft:var(--phc-srv-green-soft);
    --widget-edge:#bbf7d0;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-icon {
    position:relative;
    z-index:2;
    width:52px;
    height:52px;
    flex:0 0 52px;
    margin-left:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--widget-edge);
    border-radius:16px;
    color:var(--widget-accent);
    background:var(--widget-soft);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);

    font-size:1.15rem;

    transition:
        transform var(--phc-srv-transition),
        color var(--phc-srv-transition),
        background var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget:hover .phc-srv-icon {
    transform:rotate(-4deg) scale(1.04);
    color:#fff;
    background:var(--widget-accent);
    box-shadow:0 10px 22px rgba(15,23,42,.12);
}

:where(html[data-hp-page="supportticketslist"]) .phc-w-primary:hover .phc-srv-icon {
    background:var(--phc-srv-blue-gradient);
    border-color:var(--phc-srv-blue);
    box-shadow:0 10px 24px rgba(37,99,235,.22);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget .media-body {
    position:relative;
    z-index:2;
    min-width:0;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget .media-body h5 {
    margin-bottom:5px!important;
    color:var(--phc-srv-text)!important;
    font-size:1.05rem!important;
    line-height:1.6;
    font-weight:900!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-widget .media-body p {
    margin:0!important;
    color:var(--phc-srv-muted)!important;
    font-size:.86rem!important;
    line-height:1.8!important;
    font-weight:550;
}

/* =========================================================
   Main manager — matches previous page
   ========================================================= */
:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager {
    position:relative;
    overflow:hidden;
    margin-top:20px;
    padding:0;

    border:1px solid var(--phc-srv-border);
    border-radius:var(--phc-srv-radius-xl);
    background:#fff;
    box-shadow:var(--phc-srv-shadow-panel);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:1px;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(37,99,235,.32),transparent);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-header {
    margin:0;
    padding:20px 22px;
    gap:15px;

    border-bottom:1px solid var(--phc-srv-divider);
    background:linear-gradient(180deg,#fff,#fbfcfe);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-header > div:first-child {
    position:relative;
    padding-right:54px;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-header > div:first-child::before {
    content:"\f590";
    position:absolute;
    top:50%;
    right:0;
    width:42px;
    height:42px;
    transform:translateY(-50%);

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #bfdbfe;
    border-radius:13px;
    color:#fff;
    background:var(--phc-srv-blue-gradient);
    box-shadow:0 8px 20px rgba(37,99,235,.20);

    font-family:"Font Awesome 5 Pro","Font Awesome 5 Free";
    font-weight:900;
    font-size:.9rem;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-header h5 {
    margin-bottom:4px!important;
    color:var(--phc-srv-text)!important;
    font-size:1.08rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-header p {
    color:var(--phc-srv-muted)!important;
    font-size:.82rem!important;
    line-height:1.7;
}

/* =========================================================
   Search
   ========================================================= */
:where(html[data-hp-page="supportticketslist"]) .phc-search-container {
    position:relative;
    width:100%;
    max-width:360px;
    margin:0;
}

:where(html[data-hp-page="supportticketslist"]) .phc-search-input {
    width:100%;
    height:46px;
    padding:0 44px 0 15px;

    outline:none;
    border:1px solid var(--phc-srv-border);
    border-radius:12px;
    background:#f8fafc;
    color:var(--phc-srv-text);

    font-family:inherit;
    font-size:.90rem!important;

    transition:
        background-color var(--phc-srv-transition),
        border-color var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="supportticketslist"]) .phc-search-input::placeholder {
    color:var(--phc-srv-muted-2);
}

:where(html[data-hp-page="supportticketslist"]) .phc-search-input:hover {
    background:#fff;
    border-color:#cbd5e1;
}

:where(html[data-hp-page="supportticketslist"]) .phc-search-input:focus {
    background:#fff;
    border-color:var(--phc-srv-blue);
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
}

:where(html[data-hp-page="supportticketslist"]) .phc-search-icon {
    position:absolute;
    top:50%;
    right:15px;
    z-index:2;
    transform:translateY(-50%);
    color:var(--phc-srv-muted-2);
    font-size:.9rem;
    pointer-events:none;
}

:where(html[data-hp-page="supportticketslist"]) .phc-search-container:focus-within .phc-search-icon {
    color:var(--phc-srv-blue);
}

/* =========================================================
   Table
   ========================================================= */
:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager .table-responsive {
    width:100%!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    box-sizing:border-box!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager .dataTables_wrapper,
:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager .dataTables_wrapper > .row,
:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager .dataTables_wrapper > .row > [class*="col-"] {
    box-sizing:border-box!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager .dataTables_wrapper {
    width:100%;
    padding:0;
    color:var(--phc-srv-muted);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager .dataTables_wrapper > .row {
    margin-right:0!important;
    margin-left:0!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager .dataTables_wrapper > .row > [class*="col-"] {
    padding-right:0!important;
    padding-left:0!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager table.phc-srv-table {
    width:calc(100% - 44px)!important;
    max-width:calc(100% - 44px)!important;
    margin:9px 22px 8px!important;
    border-collapse:separate!important;
    border-spacing:0 6px!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table thead th {
    padding:7px 16px 8px!important;
    border:0!important;
    color:#94a3b8!important;
    background:transparent!important;

    font-size:.84rem!important;
    font-weight:850!important;
    line-height:1.4!important;
    vertical-align:middle!important;
    white-space:nowrap;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td {
    height:50px!important;
    padding:8px 14px!important;

    vertical-align:middle!important;

    border-top:1px solid #e4eaf2!important;
    border-bottom:1px solid #e4eaf2!important;

    background:#fff!important;
    color:var(--phc-srv-text-2);

    font-size:.90rem!important;
    line-height:1.55!important;

    transition:
        background-color var(--phc-srv-transition),
        border-color var(--phc-srv-transition),
        box-shadow var(--phc-srv-transition);
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td:first-child {
    border-right:1px solid #e4eaf2!important;
    border-radius:0 13px 13px 0!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td:last-child {
    border-left:1px solid #e4eaf2!important;
    border-radius:13px 0 0 13px!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody tr:hover td {
    background:#fbfdff!important;
    border-top-color:#c9dcff!important;
    border-bottom-color:#c9dcff!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody tr:hover td:first-child {
    border-right-color:#c9dcff!important;
    box-shadow:inset -3px 0 0 var(--phc-srv-blue)!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody tr:hover td:last-child {
    border-left-color:#c9dcff!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody tr.unread-ticket td {
    background:#f5f9ff!important;
    border-top-color:#cfe0ff!important;
    border-bottom-color:#cfe0ff!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody tr.unread-ticket td:first-child {
    border-right-color:#cfe0ff!important;
    box-shadow:inset -4px 0 0 var(--phc-srv-blue)!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody tr.unread-ticket td:last-child {
    border-left-color:#cfe0ff!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table strong.text-dark {
    color:var(--phc-srv-text)!important;
    font-size:.91rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-table .text-muted {
    color:var(--phc-srv-muted)!important;
}

/* =========================================================
   Status badges
   ========================================================= */
:where(html[data-hp-page="supportticketslist"]) .status-badge {
    min-width:82px;
    min-height:27px;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid #dbe2ea;
    border-radius:8px;

    color:#475569;
    background:#f8fafc;

    font-size:.72rem!important;
    line-height:1;
    font-weight:900!important;
}

:where(html[data-hp-page="supportticketslist"]) .status-badge::before {
    content:"";
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:currentColor;
}

:where(html[data-hp-page="supportticketslist"]) .status-open,
:where(html[data-hp-page="supportticketslist"]) .status-customer-reply,
:where(html[data-hp-page="supportticketslist"]) .status-answered {
    color:#047857!important;
    border-color:#a7f3d0!important;
    background:#ecfdf5!important;
}

:where(html[data-hp-page="supportticketslist"]) .status-in-progress,
:where(html[data-hp-page="supportticketslist"]) .status-on-hold {
    color:#b45309!important;
    border-color:#fde68a!important;
    background:#fffbeb!important;
}

:where(html[data-hp-page="supportticketslist"]) .status-closed {
    color:#475569!important;
    border-color:#cbd5e1!important;
    background:#f1f5f9!important;
}

:where(html[data-hp-page="supportticketslist"]) .status-custom {
    color:#fff!important;
    border-color:transparent!important;
}

:where(html[data-hp-page="supportticketslist"]) .status-custom::before {
    background:#fff;
}

/* =========================================================
   Manage button
   ========================================================= */

/* =========================================================
   Dedicated DataTables footer — same as previous page
   ========================================================= */
:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer {
    width:100%;
    min-height:62px;
    padding:11px 22px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    border-top:1px solid var(--phc-srv-divider);
    background:#fff;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer-meta {
    min-width:0;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer-pages {
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_length,
:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_info,
:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate {
    float:none!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_length label {
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:var(--phc-srv-muted)!important;
    font-size:.72rem!important;
    white-space:nowrap;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_length select {
    width:58px!important;
    min-width:58px!important;
    height:34px!important;
    margin:0!important;
    padding:0 7px!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;
    outline:0!important;

    color:var(--phc-srv-text-2)!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.72rem!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_info {
    color:var(--phc-srv-muted)!important;
    font-size:.72rem!important;
    line-height:34px!important;
    white-space:nowrap;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate ul.pagination {
    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:5px!important;

    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-item {
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-link {
    min-width:34px!important;
    height:34px!important;
    margin:0!important;
    padding:0 9px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;

    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-family:inherit!important;
    font-size:.72rem!important;
    font-weight:850!important;
    line-height:1!important;
    text-decoration:none!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-item.next .page-link {
    min-width:56px!important;
    padding:0 12px!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-item.active .page-link {
    color:#fff!important;
    border-color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-gradient)!important;
    box-shadow:0 7px 15px rgba(37,99,235,.20)!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    transform:translateY(-1px)!important;
    color:var(--phc-srv-blue)!important;
    border-color:#bfdbfe!important;
    background:#f8fbff!important;
    box-shadow:0 5px 12px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-item.disabled .page-link {
    opacity:.46!important;
    cursor:default!important;
    color:#94a3b8!important;
    border-color:#e5eaf1!important;
    background:#f8fafc!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate > .paginate_button,
:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate > span > .paginate_button {
    min-width:34px!important;
    height:34px!important;
    margin:0 2px!important;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #dce4ee!important;
    border-radius:9px!important;
    color:#475569!important;
    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.025)!important;

    font-size:.72rem!important;
    font-weight:850!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .paginate_button.current {
    color:#fff!important;
    border-color:var(--phc-srv-blue)!important;
    background:var(--phc-srv-blue-gradient)!important;
}

:where(html[data-hp-page="supportticketslist"]) .phc-srv-manager .phc-dt-empty-row {
    display:none!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="supportticketslist"]) .phc-srv-manager {
        border-radius:20px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-header {
        padding:18px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-header > div:first-child {
        width:100%;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-search-container {
        max-width:100%;
        margin-top:12px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-manager table.phc-srv-table {
        width:calc(100% - 28px)!important;
        max-width:calc(100% - 28px)!important;
        margin:12px 14px 8px!important;
        display:block;
        border-spacing:0!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table thead {
        display:none!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody {
        display:block;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody tr {
        display:block;
        margin-bottom:12px;
        padding:6px 14px 12px;

        overflow:hidden;
        border:1px solid var(--phc-srv-border);
        border-radius:15px;
        background:#fff;
        box-shadow:0 5px 16px rgba(15,23,42,.035);
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td {
        width:100%;
        height:auto!important;
        min-height:43px;
        padding:9px 0!important;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        border:0!important;
        border-bottom:1px dashed #e5eaf1!important;
        border-radius:0!important;
        background:transparent!important;

        text-align:left!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td::before {
        content:attr(data-label);
        color:var(--phc-srv-muted-2);
        font-size:.74rem!important;
        font-weight:800;
        text-align:right;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td:first-child {
        min-height:auto;
        margin:0 -14px 3px;
        padding:13px 14px!important;

        display:block;
        border-bottom:1px solid var(--phc-srv-divider)!important;
        background:#f8fafc!important;
        text-align:right!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td:first-child::before,
:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td:last-child::before {
        display:none;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td:last-child {
        padding:12px 0 0!important;
        border-bottom:0!important;
        justify-content:center;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-dt-footer {
        min-height:0;
        padding:10px 14px 13px;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-dt-footer-meta {
        width:100%;
        justify-content:center;
        gap:10px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-dt-footer-pages {
        width:100%;
        justify-content:center;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate ul.pagination {
        max-width:100%;
        flex-wrap:wrap!important;
    }
}

@media(max-width:575.98px) {
    :where(html[data-hp-page="supportticketslist"]) .phc-srv-widget {
        min-height:116px;
        padding:16px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-icon {
        width:46px;
        height:46px;
        flex-basis:46px;
        border-radius:14px;
        font-size:1.05rem;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-manager {
        margin-top:12px;
        border-radius:18px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-header {
        padding:16px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-header > div:first-child {
        padding-right:49px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-header > div:first-child::before {
        width:38px;
        height:38px;
        border-radius:12px;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-search-input {
        height:44px;
        font-size:.84rem!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-manager table.phc-srv-table {
        width:calc(100% - 20px)!important;
        max-width:calc(100% - 20px)!important;
        margin:10px!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td {
        font-size:.86rem!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td::before {
        font-size:.70rem!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_info {
        width:100%!important;
        text-align:center!important;
        line-height:1.6!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-link {
        min-width:31px!important;
        height:31px!important;
        padding:0 7px!important;
        font-size:.68rem!important;
    }

    :where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-item.previous .page-link,
:where(html[data-hp-page="supportticketslist"]) .phc-dt-footer .dataTables_paginate .page-item.next .page-link {
        min-width:47px!important;
        padding:0 8px!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="supportticketslist"]) .phc-srv-widget,
:where(html[data-hp-page="supportticketslist"]) .phc-srv-icon,
:where(html[data-hp-page="supportticketslist"]) .phc-search-input,
:where(html[data-hp-page="supportticketslist"]) .phc-srv-table tbody td {
        transition:none!important;
    }
}

/* supportticketsubmit-confirm.tpl */
:root:where(html[data-hp-page="supportticketsubmit-confirm"]) {
    --success-bg:var(--hp-page);
    --success-card:var(--hp-surface);
    --success-border:var(--hp-line);
    --success-border-soft:#edf1f6;

    --success-text:var(--hp-ink);
    --success-text-2:var(--hp-ink-secondary);
    --success-muted:var(--hp-muted);

    --success-blue:var(--hp-primary);
    --success-blue-dark:var(--hp-primary-hover);
    --success-blue-light:#60a5fa;
    --success-blue-soft:var(--hp-primary-soft);
    --success-blue-line:#bfdbfe;
    --success-blue-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --success-green:#059669;
    --success-green-dark:#047857;
    --success-green-soft:#ecfdf5;
    --success-green-line:#a7f3d0;

    --success-radius-xl:26px;
    --success-radius-lg:18px;
    --success-radius-md:13px;

    --success-shadow:0 22px 60px rgba(15,23,42,.085),0 5px 18px rgba(15,23,42,.035);
    --success-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-card,
:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-card * {
    box-sizing:border-box;
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-card {
    position:relative;
    width:100%;
    max-width:680px;
    overflow:hidden;
    margin:0 auto;
    padding:38px 32px 30px;

    border:1px solid var(--success-border);
    border-radius:var(--success-radius-xl);
    background:
        radial-gradient(circle at 8% 5%,rgba(96,165,250,.08),transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    box-shadow:var(--success-shadow);

    text-align:center;
    direction:rtl;
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:var(--success-blue-gradient);
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-card::after {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    left:-105px;
    bottom:-118px;
    border-radius:50%;
    background:var(--success-blue-soft);
    opacity:.75;
    pointer-events:none;
}

/* ===== Success icon ===== */
:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-icon-wrapper {
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-icon {
    width:86px;
    height:86px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--success-green-line);
    border-radius:24px;

    color:#ffffff;
    background:linear-gradient(135deg,#34d399 0%,#10b981 52%,#059669 100%);
    box-shadow:
        0 17px 32px rgba(5,150,105,.20),
        inset 0 1px 0 rgba(255,255,255,.18);

    font-size:2rem;

    animation:phcSuccessFloat 3s ease-in-out infinite;
}

@keyframes phcSuccessFloat {
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-4px);}
}

/* ===== Title ===== */
:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-title {
    position:relative;
    z-index:2;

    margin:0 0 18px!important;

    color:var(--success-text);
    font-size:1.32rem;
    line-height:1.65;
    font-weight:900;
}

/* ===== Ticket created panel ===== */
:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-alert {
    position:relative;
    z-index:2;

    max-width:470px;
    margin:0 auto 20px;
    padding:16px 18px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;

    border:1px solid var(--success-green-line);
    border-radius:16px;
    background:
        linear-gradient(180deg,#f3fff9 0%,var(--success-green-soft) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-alert::before {
    content:"";
    position:absolute;
    top:12px;
    right:0;
    bottom:12px;
    width:3px;
    border-radius:3px 0 0 3px;
    background:linear-gradient(180deg,#34d399,#059669);
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-alert-text {
    color:#166534;
    font-size:.88rem;
    line-height:1.65;
    font-weight:800;
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-ticket-id {
    min-height:42px;
    padding:0 15px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(5,150,105,.16);
    border-radius:11px;

    color:var(--success-green-dark)!important;
    background:#ffffff;
    box-shadow:0 5px 14px rgba(5,150,105,.06);

    font-size:1.25rem;
    line-height:1;
    font-weight:950;
    letter-spacing:.03em;
    direction:ltr;
    text-decoration:none!important;

    transition:
        transform var(--success-transition),
        color var(--success-transition),
        border-color var(--success-transition),
        box-shadow var(--success-transition);
}

:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-ticket-id:hover {
    transform:translateY(-1px);
    color:var(--success-green)!important;
    border-color:var(--success-green-line);
    box-shadow:0 8px 18px rgba(5,150,105,.10);
}

/* ===== Description ===== */
:where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-desc {
    position:relative;
    z-index:2;

    max-width:520px;
    margin:0 auto 24px!important;

    color:var(--success-muted);
    font-size:.91rem;
    line-height:1.9;
    font-weight:550;
}

/* ===== Action ===== */

/* ===== Responsive ===== */
@media(max-width:767.98px) {
    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-card {
        padding:32px 20px 25px;
        border-radius:21px;
    }

    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-icon {
        width:76px;
        height:76px;
        border-radius:21px;
        font-size:1.75rem;
    }

    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-title {
        font-size:1.16rem;
    }

    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-alert {
        padding:14px 15px;
    }

    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-ticket-id {
        font-size:1.12rem;
    }

    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-desc {
        font-size:.86rem;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-card {
        padding:28px 15px 22px;
        border-radius:18px;
    }

    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-title {
        font-size:1.05rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-icon {
        animation:none!important;
    }

    :where(html[data-hp-page="supportticketsubmit-confirm"]) .phc-success-ticket-id{
        transition:none!important;
    }
}

/* supportticketsubmit-stepone.tpl */
:root:where(html[data-hp-page="supportticketsubmit-stepone"]) {
    --dept-bg:var(--hp-page);
    --dept-card:var(--hp-surface);
    --dept-card-soft:var(--hp-surface-soft);
    --dept-border:var(--hp-line);
    --dept-border-soft:#edf1f6;

    --dept-text:var(--hp-ink);
    --dept-text-2:var(--hp-ink-secondary);
    --dept-muted:var(--hp-muted);
    --dept-muted-2:#94a3b8;

    --dept-blue:var(--hp-primary);
    --dept-blue-dark:var(--hp-primary-hover);
    --dept-blue-light:#60a5fa;
    --dept-blue-soft:var(--hp-primary-soft);
    --dept-blue-line:#bfdbfe;
    --dept-blue-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --dept-green:#059669;
    --dept-green-soft:#ecfdf5;
    --dept-orange:#d97706;
    --dept-orange-soft:#fff7ed;
    --dept-sky:#0284c7;
    --dept-sky-soft:#f0f9ff;

    --dept-radius-xl:24px;
    --dept-radius-lg:18px;
    --dept-radius-md:13px;

    --dept-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --dept-shadow-md:0 18px 42px rgba(15,23,42,.085),0 5px 15px rgba(15,23,42,.035);
    --dept-transition:220ms cubic-bezier(.2,.8,.2,1);
}

/* ===== Page header ===== */
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-header {
    position:relative;
    overflow:hidden;
    margin-bottom:24px;
    padding:22px 24px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    border:1px solid var(--dept-border);
    border-radius:var(--dept-radius-xl);
    background:
        radial-gradient(circle at 5% 10%,rgba(96,165,250,.09),transparent 25%),
        linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    box-shadow:var(--dept-shadow-sm);

    text-align:right;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-header::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:4px;
    background:var(--dept-blue-gradient);
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-header::after {
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    left:-90px;
    bottom:-105px;
    border-radius:50%;
    background:var(--dept-blue-soft);
    opacity:.75;
    pointer-events:none;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-title {
    position:relative;
    z-index:2;
    margin:0 0 7px!important;

    display:flex;
    align-items:center;
    gap:11px;

    color:var(--dept-text);
    font-size:1.35rem;
    line-height:1.55;
    font-weight:900;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-title i {
    width:44px;
    height:44px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dept-blue-line);
    border-radius:13px;
    color:#fff;
    background:var(--dept-blue-gradient);
    box-shadow:0 9px 20px rgba(37,99,235,.20);

    font-size:1rem;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-desc {
    position:relative;
    z-index:2;
    margin:0!important;
    padding-right:55px;

    color:var(--dept-muted);
    font-size:.93rem;
    line-height:1.8;
    font-weight:600;
}

/* ===== Department grid ===== */
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-col {
    margin-bottom:16px!important;
}

/* ===== Department card ===== */
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card {
    --card-accent:var(--dept-blue);
    --card-soft:var(--dept-blue-soft);
    --card-line:var(--dept-blue-line);

    position:relative;
    min-height:128px;
    height:100%;
    overflow:hidden;
    padding:20px 20px 20px 58px;

    display:flex;
    align-items:center;
    gap:16px;

    border:1px solid var(--dept-border);
    border-radius:var(--dept-radius-lg);
    background:
        linear-gradient(145deg,#ffffff 0%,#ffffff 70%,var(--card-soft) 150%);
    box-shadow:var(--dept-shadow-sm);

    text-decoration:none!important;

    transition:
        transform var(--dept-transition),
        border-color var(--dept-transition),
        box-shadow var(--dept-transition),
        background var(--dept-transition);
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card::before {
    content:"";
    position:absolute;
    top:15px;
    right:0;
    bottom:15px;
    width:3px;
    border-radius:3px 0 0 3px;
    background:var(--card-accent);
    opacity:.8;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card::after {
    content:"←";
    position:absolute;
    top:50%;
    left:19px;
    transform:translateY(-50%);

    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--dept-border);
    border-radius:9px;
    color:var(--dept-muted-2);
    background:#fff;

    font-family:inherit;
    font-size:1rem;
    font-weight:800;
    line-height:1;

    transition:
        transform var(--dept-transition),
        color var(--dept-transition),
        border-color var(--dept-transition),
        background var(--dept-transition);
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card:hover {
    transform:translateY(-3px);
    border-color:var(--card-line);
    box-shadow:var(--dept-shadow-md);
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card:hover::after {
    transform:translate(-3px,-50%);
    color:#fff;
    border-color:var(--card-accent);
    background:var(--card-accent);
}

/* ===== Icon ===== */
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-icon {
    position:relative;
    z-index:2;
    width:54px;
    height:54px;
    min-width:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--card-line);
    border-radius:15px;
    color:var(--card-accent);
    background:var(--card-soft);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);

    font-size:1.15rem;

    transition:
        transform var(--dept-transition),
        color var(--dept-transition),
        background var(--dept-transition),
        box-shadow var(--dept-transition);
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card:hover .phc-dept-icon {
    transform:scale(1.04) rotate(-3deg);
    color:#fff;
    background:var(--card-accent);
    box-shadow:0 10px 20px rgba(15,23,42,.12);
}

/* ===== Content ===== */
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-content {
    position:relative;
    z-index:2;
    flex-grow:1;
    min-width:0;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-title {
    margin:0 0 5px!important;
    color:var(--dept-text);

    font-size:1.05rem;
    line-height:1.6;
    font-weight:900;

    transition:color var(--dept-transition);
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card:hover .phc-dept-title {
    color:var(--card-accent);
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-desc {
    margin:0!important;
    color:var(--dept-muted);

    font-size:.88rem;
    line-height:1.75;
    font-weight:550;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* ===== Auto accent colors — no purple ===== */
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-col:nth-child(4n+1) .phc-dept-card {
    --card-accent:var(--dept-blue);
    --card-soft:var(--dept-blue-soft);
    --card-line:#bfdbfe;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-col:nth-child(4n+2) .phc-dept-card {
    --card-accent:var(--dept-sky);
    --card-soft:var(--dept-sky-soft);
    --card-line:#bae6fd;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-col:nth-child(4n+3) .phc-dept-card {
    --card-accent:var(--dept-green);
    --card-soft:var(--dept-green-soft);
    --card-line:#a7f3d0;
}

:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-col:nth-child(4n+4) .phc-dept-card {
    --card-accent:var(--dept-orange);
    --card-soft:var(--dept-orange-soft);
    --card-line:#fed7aa;
}

/* ===== Alert ===== */
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-col + .alert,
:where(html[data-hp-page="supportticketsubmit-stepone"]) .row[dir="rtl"] .alert {
    border-radius:14px;
    font-size:.9rem;
}

/* ===== Accessibility ===== */
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card:focus-visible {
    outline:0;
    border-color:var(--card-accent);
    box-shadow:0 0 0 4px rgba(37,99,235,.10),var(--dept-shadow-md);
}

/* ===== Responsive ===== */
@media(max-width:767.98px) {
    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-header {
        padding:18px;
        border-radius:19px;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-title {
        font-size:1.15rem;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-title i {
        width:40px;
        height:40px;
        border-radius:12px;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-desc {
        padding-right:51px;
        font-size:.86rem;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card {
        min-height:116px;
        padding:17px 17px 17px 51px;
        gap:13px;
        border-radius:16px;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-icon {
        width:49px;
        height:49px;
        min-width:49px;
        border-radius:14px;
        font-size:1rem;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-title {
        font-size:.98rem;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-desc {
        font-size:.82rem;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card::after {
        left:14px;
        width:28px;
        height:28px;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-header {
        padding:16px;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-page-desc {
        padding-right:0;
        margin-top:5px!important;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card {
        min-height:108px;
        padding:15px 14px 15px 45px;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-icon {
        width:45px;
        height:45px;
        min-width:45px;
    }

    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card::after {
        left:10px;
        width:26px;
        height:26px;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card,
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-card::after,
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-icon,
:where(html[data-hp-page="supportticketsubmit-stepone"]) .phc-dept-title {
        transition:none!important;
    }
}

/* supportticketsubmit-steptwo.tpl */
:root:where(html[data-hp-page="supportticketsubmit-steptwo"]) {
    --ticket-page:var(--hp-page);
    --ticket-card:var(--hp-surface);
    --ticket-soft:var(--hp-surface-soft);
    --ticket-border:var(--hp-line);
    --ticket-border-soft:#edf1f6;

    --ticket-text:var(--hp-ink);
    --ticket-text-2:var(--hp-ink-secondary);
    --ticket-muted:var(--hp-muted);
    --ticket-muted-2:#94a3b8;

    --ticket-blue:var(--hp-primary);
    --ticket-blue-dark:var(--hp-primary-hover);
    --ticket-blue-light:#60a5fa;
    --ticket-blue-soft:var(--hp-primary-soft);
    --ticket-blue-line:#bfdbfe;
    --ticket-blue-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --ticket-green:#059669;
    --ticket-green-soft:#ecfdf5;
    --ticket-green-line:#a7f3d0;

    --ticket-red:#dc2626;
    --ticket-red-soft:#fef2f2;
    --ticket-red-line:#fecaca;

    --ticket-orange:#d97706;
    --ticket-orange-soft:#fff7ed;

    --ticket-radius-xl:24px;
    --ticket-radius-lg:18px;
    --ticket-radius-md:13px;

    --ticket-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --ticket-shadow-md:0 18px 44px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);
    --ticket-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card * {
    box-sizing:border-box;
}

/* ===== Main cards ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card {
    position:relative;
    overflow:hidden;
    margin-bottom:20px;
    padding:22px;

    border:1px solid var(--ticket-border);
    border-radius:var(--ticket-radius-xl);
    background:
        linear-gradient(180deg,#ffffff 0%,#fdfefe 100%);
    box-shadow:var(--ticket-shadow-sm);

    transition:
        border-color var(--ticket-transition),
        box-shadow var(--ticket-transition);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:linear-gradient(90deg,transparent,var(--ticket-blue),transparent);
    opacity:.85;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card:hover {
    border-color:#d5dfeb;
    box-shadow:var(--ticket-shadow-md);
}

/* ===== Section title ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-card-title {
    margin:0 0 20px!important;
    padding-bottom:15px;

    display:flex;
    align-items:center;
    gap:10px;

    border-bottom:1px solid var(--ticket-border-soft);
    color:var(--ticket-text);

    font-size:1.08rem;
    line-height:1.6;
    font-weight:900;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-card-title i {
    width:38px;
    height:38px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ticket-blue-line);
    border-radius:11px;
    color:#fff;
    background:var(--ticket-blue-gradient);
    box-shadow:0 8px 18px rgba(37,99,235,.18);

    font-size:.85rem;
}

/* ===== Form grid ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card .row {
    margin-right:-7px;
    margin-left:-7px;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card .row > [class*="col-"] {
    padding-right:7px;
    padding-left:7px;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-group {
    margin-bottom:18px;
}

/* ===== Labels ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-label {
    margin-bottom:8px;

    display:flex;
    align-items:center;
    gap:7px;

    color:var(--ticket-text-2);
    font-size:.91rem;
    line-height:1.6;
    font-weight:850;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-label i {
    width:27px;
    height:27px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid #dbeafe;
    border-radius:8px;
    color:var(--ticket-blue);
    background:var(--ticket-blue-soft);

    font-size:.72rem;
}

/* ===== Inputs ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-control {
    width:100%;
    min-height:50px;
    padding:0 14px;

    border:1px solid var(--ticket-border)!important;
    border-radius:var(--ticket-radius-md)!important;
    outline:0!important;

    color:var(--ticket-text)!important;
    background:var(--ticket-soft)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;

    font-family:inherit;
    font-size:.91rem;
    font-weight:600;

    transition:
        background-color var(--ticket-transition),
        border-color var(--ticket-transition),
        box-shadow var(--ticket-transition);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) select.phc-form-control {
    cursor:pointer;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) textarea.phc-form-control {
    min-height:220px;
    padding:14px 15px;
    line-height:1.85;
    resize:vertical;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-control:hover {
    border-color:#cbd5e1!important;
    background:#fff!important;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-control:focus {
    border-color:var(--ticket-blue)!important;
    background:#fff!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-control:disabled,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-control.disabled {
    color:var(--ticket-muted)!important;
    border-color:#e5e7eb!important;
    background:#f1f5f9!important;
    cursor:not-allowed;
}

/* LTR fields */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #inputEmail {
    text-align:left;
}

/* ===== Markdown editor compatibility ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .md-editor,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .markdown-editor {
    border-radius:var(--ticket-radius-md);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .md-editor > .md-header {
    padding:8px;
    border:1px solid var(--ticket-border);
    border-bottom:0;
    border-radius:12px 12px 0 0;
    background:#f8fafc;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .md-editor > textarea {
    border-radius:0 0 12px 12px!important;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .md-editor .btn {
    border-radius:8px!important;
}

/* ===== Attachments ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap {
    position:relative;
    padding:18px;

    border:1px dashed #b9c8da;
    border-radius:16px;
    background:
        linear-gradient(180deg,#fbfdff 0%,#f8fafc 100%);

    transition:
        border-color var(--ticket-transition),
        background var(--ticket-transition),
        box-shadow var(--ticket-transition);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap:hover {
    border-color:#93b9f7;
    background:#fbfdff;
    box-shadow:0 8px 20px rgba(37,99,235,.045);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap > .phc-label {
    margin-bottom:12px;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .input-group {
    direction:rtl;
    margin-bottom:8px!important;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .custom-file {
    min-width:0;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .input-group-append {
    margin:0!important;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .custom-file-label {
    min-height:44px;
    height:44px;
    padding:11px 13px;

    border:1px solid var(--ticket-border);
    border-left:0;
    border-radius:0 11px 11px 0;

    color:var(--ticket-muted);
    background:#fff;

    font-size:.84rem;
    line-height:1.5;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .custom-file-label::after {
    height:42px;
    padding:10px 12px;
    border-right:1px solid var(--ticket-border);
    color:var(--ticket-text-2);
    background:#f8fafc;
    line-height:1.5;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-add-file {
    min-height:44px;
    padding:0 15px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--ticket-blue-line)!important;
    border-radius:11px 0 0 11px!important;

    color:var(--ticket-blue)!important;
    background:var(--ticket-blue-soft)!important;

    font-size:.82rem;
    font-weight:850;

    transition:
        color var(--ticket-transition),
        border-color var(--ticket-transition),
        background var(--ticket-transition);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-add-file:hover {
    color:#fff!important;
    border-color:var(--ticket-blue)!important;
    background:var(--ticket-blue-gradient)!important;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .text-muted {
    margin-top:10px!important;
    color:var(--ticket-muted)!important;
    font-size:.80rem;
    line-height:1.75;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .text-muted i {
    color:var(--ticket-orange);
}

/* ===== Custom fields ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer {
    position:relative;
    overflow:hidden;
    margin-top:18px;
    margin-bottom:18px;
    padding:17px 17px 3px;

    border:1px solid var(--ticket-border);
    border-radius:16px;
    background:
        linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
    box-shadow:0 6px 18px rgba(15,23,42,.035);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer::before {
    content:"اطلاعات تکمیلی";
    display:flex;
    align-items:center;
    margin:0 0 14px;
    padding:0 0 11px;

    border-bottom:1px solid var(--ticket-border-soft);
    color:var(--ticket-text);

    font-size:.94rem;
    line-height:1.6;
    font-weight:900;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer::after {
    content:"";
    position:absolute;
    top:14px;
    right:0;
    bottom:14px;
    width:3px;
    border-radius:3px 0 0 3px;
    background:var(--ticket-blue-gradient);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-group {
    position:relative;
    z-index:2;
    margin-bottom:14px;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer label {
    display:block;
    margin-bottom:8px;
    color:var(--ticket-text-2);
    font-size:.9rem;
    line-height:1.65;
    font-weight:800;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-control {
    min-height:48px;
    border:1px solid var(--ticket-border)!important;
    border-radius:12px!important;
    color:var(--ticket-text);
    background:#f8fafc;
    box-shadow:none;
    font-family:inherit;
    font-size:.9rem;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-control:hover {
    border-color:#cbd5e1!important;
    background:#fff;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-control:focus {
    border-color:var(--ticket-blue)!important;
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}

/* Custom Field های checkbox/radio */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer input[type="checkbox"],
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer input[type="radio"] {
    margin-left:7px;
    accent-color:var(--ticket-blue);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .checkbox,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .radio {
    min-height:42px;
    margin:0 0 11px!important;
    padding:10px 12px;

    display:flex;
    align-items:center;

    border:1px solid var(--ticket-border-soft);
    border-radius:11px;
    background:#f8fafc;
}


/* ===== Custom Field checkbox — left aligned modern control ===== */

/* برای فیلدهای checkbox فضای سمت چپ رزرو می‌کنیم */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-group:has(input[type="checkbox"]) {
    position:relative;
    min-height:64px;
    margin-bottom:12px;
    padding:13px 58px 13px 14px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    border:1px solid var(--ticket-border-soft);
    border-radius:12px;
    background:#f8fafc;
}

/* متن سوال */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-group:has(input[type="checkbox"]) > label {
    width:100%;
    margin:0!important;
    padding:0!important;

    color:var(--ticket-text-2);
    font-size:.91rem;
    line-height:1.8;
    font-weight:850;
}

/* wrapperهای احتمالی WHMCS نباید ردیف جدید بسازند */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-group:has(input[type="checkbox"]) .checkbox,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-group:has(input[type="checkbox"]) .checkbox-inline,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-group:has(input[type="checkbox"]) .form-check,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-group:has(input[type="checkbox"]) .controls {
    margin:0!important;
    padding:0!important;
    min-height:0!important;
    border:0!important;
    background:transparent!important;
}

/* خود checkbox سمت چپ کارت */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer input[type="checkbox"] {
    position:absolute!important;
    top:50%!important;
    left:16px!important;
    right:auto!important;

    width:24px!important;
    height:24px!important;
    margin:0!important;
    transform:translateY(-50%);

    appearance:none;
    -webkit-appearance:none;

    border:2px solid #cbd5e1!important;
    border-radius:7px!important;

    background:#fff!important;
    box-shadow:0 2px 6px rgba(15,23,42,.04);

    cursor:pointer;
    outline:0;

    transition:
        border-color var(--ticket-transition),
        background-color var(--ticket-transition),
        box-shadow var(--ticket-transition);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer input[type="checkbox"]:hover {
    border-color:#93b9f7!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.06);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer input[type="checkbox"]:checked {
    border-color:var(--ticket-blue)!important;
    background-color:var(--ticket-blue)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4 9-9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
    background-size:16px 16px!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    box-shadow:0 5px 12px rgba(37,99,235,.18);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer input[type="checkbox"]:focus-visible {
    border-color:var(--ticket-blue)!important;
    box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
}

/* اگر مرورگر :has را پشتیبانی نکند، حداقل checkbox همچنان سمت چپ قرار گیرد */
@supports not selector(:has(*)) {
    :where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer .form-group {
        position:relative;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer input[type="checkbox"] {
        position:relative!important;
        top:auto!important;
        left:auto!important;
        transform:none!important;
        float:left;
        margin-top:4px!important;
    }
}


/* ===== Captcha block ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card .text-center.margin-bottom.my-4 {
    margin:20px 0!important;
    padding:15px;

    border:1px solid var(--ticket-border-soft);
    border-radius:14px;
    background:#f8fafc;
}

/* ===== Action area ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card .d-flex.justify-content-center.gap-3.mt-4 {
    margin-top:22px!important;
    padding-top:18px;
    gap:10px!important;
    border-top:1px solid var(--ticket-border-soft);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-submit,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-cancel {
    min-width:160px;
    min-height:48px;
    padding:0 20px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;

    border-radius:12px!important;

    font-family:inherit;
    font-size:.88rem;
    font-weight:900;

    transition:
        transform var(--ticket-transition),
        box-shadow var(--ticket-transition),
        filter var(--ticket-transition);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-submit {
    border:0!important;
    color:#fff!important;
    background:var(--ticket-blue-gradient)!important;
    box-shadow:0 11px 23px -12px rgba(37,99,235,.92);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-submit:hover {
    transform:translateY(-2px);
    color:#fff!important;
    box-shadow:0 16px 28px -12px rgba(37,99,235,.96);
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-cancel {
    border:1px solid var(--ticket-red-line)!important;
    color:var(--ticket-red)!important;
    background:var(--ticket-red-soft)!important;
    box-shadow:none;
}

:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-cancel:hover {
    transform:translateY(-2px);
    color:#fff!important;
    border-color:var(--ticket-red)!important;
    background:linear-gradient(135deg,#ef4444,#dc2626)!important;
    box-shadow:0 12px 22px -12px rgba(220,38,38,.75);
}

/* ===== Alerts ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card .alert {
    margin-bottom:18px;
    border-radius:13px;
    font-size:.88rem;
    line-height:1.75;
}

/* ===== Auto-answer suggestions ===== */
:where(html[data-hp-page="supportticketsubmit-steptwo"]) #autoAnswerSuggestions:not(.w-hidden) {
    margin:16px 0;
    padding:16px;
    border:1px solid #fde68a;
    border-radius:14px;
    background:#fffbeb;
}

/* ===== Responsive ===== */
@media(max-width:767.98px) {
    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card {
        padding:17px;
        border-radius:19px;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-card-title {
        margin-bottom:17px!important;
        padding-bottom:12px;
        font-size:1rem;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-card-title i {
        width:35px;
        height:35px;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card .row {
        margin-right:-5px;
        margin-left:-5px;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card .row > [class*="col-"] {
        padding-right:5px;
        padding-left:5px;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-label {
        font-size:.87rem;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-control {
        min-height:48px;
        font-size:.87rem;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) textarea.phc-form-control {
        min-height:190px;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap {
        padding:14px;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) #customFieldsContainer {
        padding:14px 14px 2px;
        border-radius:14px;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card .d-flex.justify-content-center.gap-3.mt-4 {
        flex-direction:column;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-submit,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-cancel {
        width:100%;
        min-width:0;
    }
}

@media(max-width:420px) {
    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .input-group {
        display:flex;
        flex-direction:column;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .custom-file {
        width:100%;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .custom-file-label {
        border-left:1px solid var(--ticket-border);
        border-radius:10px!important;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-add-file {
        width:100%;
        margin-top:8px;
        border-radius:10px!important;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card {
        padding:14px;
        border-radius:16px;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-card-title {
        font-size:.95rem;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-label {
        font-size:.84rem;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-control {
        font-size:.84rem;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap .custom-file-label {
        font-size:.78rem;
    }

    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-add-file {
        padding:0 11px;
        font-size:.76rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-ticket-card,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-form-control,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-attachment-wrap,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-add-file,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-submit,
:where(html[data-hp-page="supportticketsubmit-steptwo"]) .phc-btn-cancel {
        transition:none!important;
    }
}

/* upgrade.tpl */
:root:where(html[data-hp-page="upgrade"]) {
    --up-card:var(--hp-surface);
    --up-soft:var(--hp-surface-soft);
    --up-border:var(--hp-line);
    --up-divider:#edf1f6;

    --up-text:var(--hp-ink);
    --up-text-2:var(--hp-ink-secondary);
    --up-muted:var(--hp-muted);
    --up-muted-2:#94a3b8;

    --up-blue:var(--hp-primary);
    --up-blue-dark:var(--hp-primary-hover);
    --up-blue-light:#60a5fa;
    --up-blue-soft:var(--hp-primary-soft);
    --up-blue-line:#bfdbfe;
    --up-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --up-green:#059669;
    --up-green-soft:#ecfdf5;
    --up-green-line:#a7f3d0;

    --up-orange:#d97706;
    --up-orange-soft:#fff7ed;
    --up-orange-line:#fed7aa;

    --up-red:#dc2626;
    --up-red-soft:#fef2f2;
    --up-red-line:#fecaca;

    --up-radius-xl:24px;
    --up-radius-lg:17px;
    --up-radius-md:12px;
    --up-radius-sm:9px;

    --up-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --up-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --up-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-page,
:where(html[data-hp-page="upgrade"]) .phc-upgrade-page * {
    box-sizing:border-box;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-page {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--up-text-2);
}

/* =========================
   Main shell
   ========================= */
:where(html[data-hp-page="upgrade"]) .phc-upgrade-shell {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;
    padding:0;

    border:1px solid var(--up-border);
    border-radius:var(--up-radius-xl);

    background:#fff;
    box-shadow:var(--up-shadow-panel);
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-shell::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--up-gradient);
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-body {
    padding:18px;
}

/* =========================
   Error state
   ========================= */
:where(html[data-hp-page="upgrade"]) .phc-upgrade-alert {
    margin:0 0 14px;
    padding:13px 14px;

    display:flex;
    align-items:center;
    gap:10px;

    border:1px solid var(--up-orange-line);
    border-radius:14px;

    color:#9a5b08;
    background:linear-gradient(135deg,#fff 0%,var(--up-orange-soft) 150%);

    font-size:.78rem;
    line-height:1.75;
    font-weight:750;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-alert-icon {
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--up-orange-line);
    border-radius:11px;

    color:var(--up-orange);
    background:#fff;

    font-size:.76rem;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-error-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}

:where(html[data-hp-page="upgrade"]) .phc-btn-light,
:where(html[data-hp-page="upgrade"]) .phc-btn-primary {
    min-height:38px;
    padding:0 12px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border-radius:10px!important;

    font-family:inherit!important;
    font-size:.71rem!important;
    line-height:1!important;
    font-weight:900!important;

    text-decoration:none!important;

    transition:
        transform var(--up-transition),
        color var(--up-transition),
        border-color var(--up-transition),
        background var(--up-transition),
        box-shadow var(--up-transition);
}

:where(html[data-hp-page="upgrade"]) .phc-btn-light {
    color:var(--up-muted)!important;
    border:1px solid var(--up-border)!important;
    background:#fff!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="upgrade"]) .phc-btn-light:hover {
    transform:translateY(-1px);

    color:var(--up-blue)!important;
    border-color:var(--up-blue-line)!important;
    background:var(--up-blue-soft)!important;
}

:where(html[data-hp-page="upgrade"]) .phc-btn-primary {
    color:#fff!important;
    border:1px solid var(--up-blue)!important;
    background:var(--up-gradient)!important;

    box-shadow:0 8px 16px rgba(37,99,235,.14)!important;
}

:where(html[data-hp-page="upgrade"]) .phc-btn-primary:hover {
    transform:translateY(-1px);
    color:#fff!important;
    box-shadow:0 11px 20px rgba(37,99,235,.18)!important;
}

/* =========================
   Page intro
   ========================= */
:where(html[data-hp-page="upgrade"]) .phc-upgrade-intro {
    margin-bottom:15px;
    padding:14px 15px;

    display:flex;
    align-items:center;
    gap:12px;

    border:1px solid var(--up-blue-line);
    border-radius:15px;

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(135deg,#fff 0%,#f8fbff 100%);
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-intro-icon {
    position:relative;

    width:46px;
    height:46px;
    flex:0 0 46px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--up-blue-line);
    border-radius:13px;

    color:#fff;
    background:var(--up-gradient);

    box-shadow:0 9px 20px rgba(37,99,235,.16);

    font-size:.83rem;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-intro h4 {
    margin:0 0 3px!important;

    color:var(--up-text)!important;
    font-size:.96rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-intro p {
    margin:0!important;

    color:var(--up-muted)!important;
    font-size:.72rem!important;
    line-height:1.7;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-current {
    color:var(--up-text)!important;
    font-weight:900;
}

/* =========================
   Section header
   ========================= */
:where(html[data-hp-page="upgrade"]) .phc-upgrade-section-head {
    margin:0 0 10px;

    display:flex;
    align-items:center;
    gap:9px;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-section-icon {
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--up-blue-line);
    border-radius:10px;

    color:var(--up-blue);
    background:var(--up-blue-soft);

    font-size:.68rem;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-section-head h5 {
    margin:0!important;

    color:var(--up-text)!important;
    font-size:.84rem!important;
    line-height:1.5;
    font-weight:900!important;
}

/* =========================
   Package cards
   ========================= */
:where(html[data-hp-page="upgrade"]) .phc-package-list {
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
}

:where(html[data-hp-page="upgrade"]) .phc-package-card {
    position:relative;
    min-height:108px;
    padding:13px 14px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 285px;
    align-items:center;
    gap:14px;

    overflow:hidden;

    border:1px solid var(--up-border);
    border-radius:14px;

    background:#fff;
    box-shadow:var(--up-shadow-sm);

    transition:
        transform var(--up-transition),
        border-color var(--up-transition),
        box-shadow var(--up-transition);
}

:where(html[data-hp-page="upgrade"]) .phc-package-card::before {
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;
    background:var(--up-gradient);
}

:where(html[data-hp-page="upgrade"]) .phc-package-card:hover {
    transform:translateY(-1px);

    border-color:var(--up-blue-line);

    box-shadow:0 12px 24px rgba(37,99,235,.065);
}

:where(html[data-hp-page="upgrade"]) .phc-package-info {
    min-width:0;

    display:flex;
    align-items:flex-start;
    gap:11px;
}

:where(html[data-hp-page="upgrade"]) .phc-package-icon {
    width:40px;
    height:40px;
    flex:0 0 40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--up-blue-line);
    border-radius:11px;

    color:var(--up-blue);
    background:var(--up-blue-soft);

    font-size:.76rem;
}

:where(html[data-hp-page="upgrade"]) .phc-package-name {
    margin:0 0 4px!important;

    color:var(--up-text)!important;

    font-size:.84rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="upgrade"]) .phc-package-desc {
    margin:0!important;

    color:var(--up-muted)!important;

    font-size:.70rem!important;
    line-height:1.7;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

:where(html[data-hp-page="upgrade"]) .phc-package-order {
    padding:10px;

    border:1px solid var(--up-divider);
    border-radius:11px;

    background:#f8fafc;
}

:where(html[data-hp-page="upgrade"]) .phc-package-price {
    margin-bottom:7px;

    color:var(--up-text);

    font-size:.82rem;
    line-height:1.5;
    font-weight:900;
}

:where(html[data-hp-page="upgrade"]) .phc-package-price--free {
    color:var(--up-green);
}

:where(html[data-hp-page="upgrade"]) .phc-package-cycle-label {
    color:var(--up-muted);

    font-size:.66rem;
    line-height:1.5;
}

:where(html[data-hp-page="upgrade"]) .phc-package-order select,
:where(html[data-hp-page="upgrade"]) .phc-config-new select {
    width:100%;
    min-height:40px;
    padding:0 10px!important;

    border:1px solid var(--up-border)!important;
    border-radius:9px!important;
    outline:0!important;

    color:var(--up-text)!important;
    background:#fff!important;

    font-family:inherit!important;
    font-size:.72rem!important;

    box-shadow:none!important;

    transition:
        border-color var(--up-transition),
        box-shadow var(--up-transition);
}

:where(html[data-hp-page="upgrade"]) .phc-package-order select:focus,
:where(html[data-hp-page="upgrade"]) .phc-config-new select:focus {
    border-color:var(--up-blue)!important;
    box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="upgrade"]) .phc-package-order .phc-btn-primary {
    width:100%;
    min-height:37px;
}

/* =========================
   Config options
   ========================= */
:where(html[data-hp-page="upgrade"]) .phc-config-error {
    margin-bottom:12px;
    padding:11px 12px;

    border:1px solid var(--up-red-line);
    border-radius:12px;

    color:#991b1b;
    background:var(--up-red-soft);

    font-size:.74rem;
    line-height:1.75;
    font-weight:700;
}

:where(html[data-hp-page="upgrade"]) .phc-config-list {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
}

:where(html[data-hp-page="upgrade"]) .phc-config-row {
    min-height:86px;
    padding:11px 12px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);
    align-items:center;
    gap:10px;

    border:1px solid var(--up-border);
    border-radius:13px;

    background:#fff;

    box-shadow:0 5px 16px rgba(15,23,42,.035);
}

:where(html[data-hp-page="upgrade"]) .phc-config-current,
:where(html[data-hp-page="upgrade"]) .phc-config-new {
    min-width:0;
}

:where(html[data-hp-page="upgrade"]) .phc-config-label {
    display:block;
    margin-bottom:4px;

    color:var(--up-muted);

    font-size:.65rem;
    line-height:1.5;
    font-weight:800;
}

:where(html[data-hp-page="upgrade"]) .phc-config-value {
    color:var(--up-text);

    font-size:.76rem;
    line-height:1.6;
    font-weight:900;

    word-break:break-word;
}

:where(html[data-hp-page="upgrade"]) .phc-config-arrow {
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--up-divider);
    border-radius:9px;

    color:var(--up-muted-2);
    background:#f8fafc;

    font-size:.63rem;
}

:where(html[data-hp-page="upgrade"]) .phc-config-badge {
    min-height:25px;
    padding:0 7px;

    display:inline-flex;
    align-items:center;
    gap:4px;

    border:1px solid;
    border-radius:8px;

    font-size:.64rem;
    line-height:1;
    font-weight:850;
}

:where(html[data-hp-page="upgrade"]) .phc-config-badge--yes {
    color:var(--up-green);
    border-color:var(--up-green-line);
    background:var(--up-green-soft);
}

:where(html[data-hp-page="upgrade"]) .phc-config-badge--no {
    color:var(--up-muted);
    border-color:#cbd5e1;
    background:#f1f5f9;
}

:where(html[data-hp-page="upgrade"]) .phc-config-badge--qty {
    color:var(--up-blue);
    border-color:var(--up-blue-line);
    background:var(--up-blue-soft);
}

/* Switch */
:where(html[data-hp-page="upgrade"]) .phc-config-switch {
    display:flex;
    align-items:center;
    gap:8px;
}

:where(html[data-hp-page="upgrade"]) .phc-config-switch .form-check-input {
    width:44px!important;
    height:24px!important;
    margin:0!important;

    cursor:pointer;
}

:where(html[data-hp-page="upgrade"]) .phc-config-switch label {
    margin:0!important;

    color:var(--up-text-2);

    font-size:.70rem;
    line-height:1.5;
    font-weight:750;
}

/* Quantity */
:where(html[data-hp-page="upgrade"]) .phc-qty-box {
    width:100%;
    max-width:220px;
    min-height:40px;
    padding:4px 8px;

    display:flex;
    align-items:center;
    gap:6px;

    border:1px solid var(--up-border);
    border-radius:9px;

    background:#fff;
}

:where(html[data-hp-page="upgrade"]) .phc-qty-box input {
    width:62px!important;
    min-height:30px;

    border:0!important;
    outline:0!important;

    color:var(--up-text)!important;
    background:transparent!important;

    text-align:center;

    font-family:inherit!important;
    font-size:.74rem!important;
    font-weight:900!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="upgrade"]) .phc-qty-box span {
    color:var(--up-muted);

    font-size:.68rem;
    line-height:1.4;
    white-space:nowrap;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-submit {
    margin-top:13px;

    display:flex;
    justify-content:center;
}

:where(html[data-hp-page="upgrade"]) .phc-upgrade-submit .phc-btn-primary {
    min-width:160px;
}

/* =========================
   Responsive
   ========================= */
@media(max-width:991px) {
    :where(html[data-hp-page="upgrade"]) .phc-package-card {
        grid-template-columns:minmax(0,1fr) 245px;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="upgrade"]) .phc-upgrade-shell {
        border-radius:19px;
    }

    :where(html[data-hp-page="upgrade"]) .phc-upgrade-body {
        padding:14px;
    }

    :where(html[data-hp-page="upgrade"]) .phc-upgrade-intro {
        align-items:flex-start;
        padding:13px;
    }

    :where(html[data-hp-page="upgrade"]) .phc-package-card {
        grid-template-columns:1fr;
        gap:10px;
    }

    :where(html[data-hp-page="upgrade"]) .phc-config-row {
        grid-template-columns:1fr;
        gap:8px;
    }

    :where(html[data-hp-page="upgrade"]) .phc-config-arrow {
        transform:rotate(90deg);
        margin:0 auto;
    }

    :where(html[data-hp-page="upgrade"]) .phc-upgrade-submit .phc-btn-primary {
        width:100%;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="upgrade"]) .phc-upgrade-intro {
        flex-direction:column;
    }

    :where(html[data-hp-page="upgrade"]) .phc-upgrade-intro-icon {
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    :where(html[data-hp-page="upgrade"]) .phc-upgrade-error-actions {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="upgrade"]) .phc-upgrade-error-actions .phc-btn-light,
:where(html[data-hp-page="upgrade"]) .phc-upgrade-error-actions .phc-btn-primary {
        width:100%;
    }

    :where(html[data-hp-page="upgrade"]) .phc-config-switch {
        align-items:flex-start;
    }

    :where(html[data-hp-page="upgrade"]) .phc-qty-box {
        max-width:100%;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="upgrade"]) .phc-btn-light,
:where(html[data-hp-page="upgrade"]) .phc-btn-primary,
:where(html[data-hp-page="upgrade"]) .phc-package-card,
:where(html[data-hp-page="upgrade"]) .phc-package-order select,
:where(html[data-hp-page="upgrade"]) .phc-config-new select {
        transition:none!important;
    }
}

/* upgradesummary.tpl */
:root:where(html[data-hp-page="upgradesummary"]) {
    --uo-card:var(--hp-surface);
    --uo-soft:var(--hp-surface-soft);
    --uo-border:var(--hp-line);
    --uo-divider:#edf1f6;

    --uo-text:var(--hp-ink);
    --uo-text-2:var(--hp-ink-secondary);
    --uo-muted:var(--hp-muted);
    --uo-muted-2:#94a3b8;

    --uo-blue:var(--hp-primary);
    --uo-blue-dark:var(--hp-primary-hover);
    --uo-blue-light:#60a5fa;
    --uo-blue-soft:var(--hp-primary-soft);
    --uo-blue-line:#bfdbfe;
    --uo-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --uo-green:#059669;
    --uo-green-soft:#ecfdf5;
    --uo-green-line:#a7f3d0;

    --uo-orange:#d97706;
    --uo-orange-soft:#fff7ed;
    --uo-orange-line:#fed7aa;

    --uo-red:#dc2626;
    --uo-red-soft:#fef2f2;
    --uo-red-line:#fecaca;

    --uo-cyan:#0284c7;
    --uo-cyan-soft:#f0f9ff;
    --uo-cyan-line:#bae6fd;

    --uo-radius-xl:24px;
    --uo-radius-lg:17px;
    --uo-radius-md:12px;

    --uo-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --uo-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --uo-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-order,
:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-order * {
    box-sizing:border-box;
}

:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-order {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--uo-text-2);
}

/* =========================================================
   Main shell
   ========================================================= */
:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-order-shell {
    position:relative;
    overflow:hidden;
    margin-bottom:18px;

    border:1px solid var(--uo-border);
    border-radius:var(--uo-radius-xl);

    background:#fff;
    box-shadow:var(--uo-shadow-panel);
}

:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-order-shell::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--uo-gradient);
}

/* =========================================================
   Notices
   ========================================================= */
:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-notices {
    padding:16px 18px 0;
}

:where(html[data-hp-page="upgradesummary"]) .phc-order-alert {
    margin-bottom:9px;
    padding:11px 12px;

    display:flex;
    align-items:center;
    gap:9px;

    border:1px solid;
    border-radius:12px;

    font-size:.73rem;
    line-height:1.75;
    font-weight:750;
}

:where(html[data-hp-page="upgradesummary"]) .phc-order-alert-icon {
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid currentColor;
    border-radius:10px;

    background:rgba(255,255,255,.72);

    font-size:.70rem;

    opacity:.92;
}

:where(html[data-hp-page="upgradesummary"]) .phc-order-alert--danger {
    color:#b91c1c;
    border-color:var(--uo-red-line);
    background:linear-gradient(135deg,#fff 0%,var(--uo-red-soft) 150%);
}

:where(html[data-hp-page="upgradesummary"]) .phc-order-alert--info {
    color:var(--uo-cyan);
    border-color:var(--uo-cyan-line);
    background:linear-gradient(135deg,#fff 0%,var(--uo-cyan-soft) 150%);
}

:where(html[data-hp-page="upgradesummary"]) .phc-order-alert--warning {
    color:#9a5b08;
    border-color:var(--uo-orange-line);
    background:linear-gradient(135deg,#fff 0%,var(--uo-orange-soft) 150%);
}

/* =========================================================
   Current configuration
   ========================================================= */
:where(html[data-hp-page="upgradesummary"]) .phc-current-config {
    min-height:88px;
    padding:15px 18px;

    display:flex;
    align-items:center;
    gap:11px;

    border-top:1px solid var(--uo-divider);
    border-bottom:1px solid var(--uo-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.08),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="upgradesummary"]) .phc-current-config-icon {
    position:relative;

    width:44px;
    height:44px;
    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--uo-blue-line);
    border-radius:12px;

    color:#fff;
    background:var(--uo-gradient);

    box-shadow:0 9px 20px rgba(37,99,235,.15);

    font-size:.78rem;
}

:where(html[data-hp-page="upgradesummary"]) .phc-current-config-label {
    display:block;
    margin-bottom:2px;

    color:var(--uo-muted);

    font-size:.66rem;
    line-height:1.5;
    font-weight:800;
}

:where(html[data-hp-page="upgradesummary"]) .phc-current-config h5 {
    margin:0!important;

    color:var(--uo-text)!important;

    font-size:.88rem!important;
    line-height:1.6;
    font-weight:900!important;
}

:where(html[data-hp-page="upgradesummary"]) .phc-current-domain {
    color:var(--uo-muted);
    font-size:.72rem;
    font-weight:650;
}

/* =========================================================
   Main content
   ========================================================= */
:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-order-content {
    padding:16px 18px 18px;
}

/* =========================================================
   Upgrade summary
   ========================================================= */
:where(html[data-hp-page="upgradesummary"]) .phc-summary-card {
    margin-bottom:16px;
    overflow:hidden;

    border:1px solid var(--uo-border);
    border-radius:15px;

    background:#fff;

    box-shadow:var(--uo-shadow-sm);
}

:where(html[data-hp-page="upgradesummary"]) .phc-summary-header {
    padding:11px 14px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    gap:12px;

    border-bottom:1px solid var(--uo-divider);

    color:var(--uo-muted-2);
    background:#f8fafc;

    font-size:.67rem;
    line-height:1.4;
    font-weight:850;
}

:where(html[data-hp-page="upgradesummary"]) .phc-summary-list {
    display:grid;
    grid-template-columns:1fr;
}

:where(html[data-hp-page="upgradesummary"]) .phc-summary-row {
    min-height:58px;
    padding:10px 14px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    align-items:center;
    gap:12px;

    border-bottom:1px solid var(--uo-divider);
}

:where(html[data-hp-page="upgradesummary"]) .phc-summary-row:last-child {
    border-bottom:0;
}

:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-change {
    min-width:0;

    display:flex;
    align-items:center;
    gap:8px;

    color:var(--uo-text-2);

    font-size:.74rem;
    line-height:1.6;
}

:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-change-old {
    color:var(--uo-muted);
}

:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-change-arrow {
    width:27px;
    height:27px;
    flex:0 0 27px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--uo-blue-line);
    border-radius:8px;

    color:var(--uo-blue);
    background:var(--uo-blue-soft);

    font-size:.57rem;
}

:where(html[data-hp-page="upgradesummary"]) .phc-upgrade-change-new {
    color:var(--uo-blue);
    font-weight:900;
}

:where(html[data-hp-page="upgradesummary"]) .phc-summary-price {
    color:var(--uo-text);

    font-size:.76rem;
    font-weight:900;

    text-align:center;
    font-variant-numeric:tabular-nums;
}

/* Totals */
:where(html[data-hp-page="upgradesummary"]) .phc-total-row {
    min-height:45px;
    padding:8px 14px;

    display:grid;
    grid-template-columns:minmax(0,1fr) 180px;
    align-items:center;
    gap:12px;

    border-top:1px solid var(--uo-divider);

    font-size:.71rem;
}

:where(html[data-hp-page="upgradesummary"]) .phc-total-label {
    color:var(--uo-muted);
    font-weight:800;
}

:where(html[data-hp-page="upgradesummary"]) .phc-total-value {
    color:var(--uo-text);
    font-weight:900;

    text-align:center;
    font-variant-numeric:tabular-nums;
}

:where(html[data-hp-page="upgradesummary"]) .phc-total-row--discount {
    color:var(--uo-green);
    background:var(--uo-green-soft);
}

:where(html[data-hp-page="upgradesummary"]) .phc-total-row--discount .phc-total-label,
:where(html[data-hp-page="upgradesummary"]) .phc-total-row--discount .phc-total-value {
    color:var(--uo-green);
}

:where(html[data-hp-page="upgradesummary"]) .phc-total-row--final {
    min-height:56px;

    border-top:1px solid var(--uo-blue-line);

    background:linear-gradient(135deg,#fff 0%,var(--uo-blue-soft) 150%);
}

:where(html[data-hp-page="upgradesummary"]) .phc-total-row--final .phc-total-label,
:where(html[data-hp-page="upgradesummary"]) .phc-total-row--final .phc-total-value {
    color:var(--uo-blue);

    font-size:.86rem;
    font-weight:950;
}

/* =========================================================
   Bottom cards
   ========================================================= */
:where(html[data-hp-page="upgradesummary"]) .phc-checkout-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

:where(html[data-hp-page="upgradesummary"]) .phc-checkout-card {
    min-height:176px;
    padding:13px 14px;

    border:1px solid var(--uo-border);
    border-radius:14px;

    background:linear-gradient(145deg,#fff 0%,#fbfdff 100%);

    box-shadow:var(--uo-shadow-sm);
}

:where(html[data-hp-page="upgradesummary"]) .phc-checkout-title {
    margin:0 0 11px!important;

    display:flex;
    align-items:center;
    gap:8px;

    color:var(--uo-text)!important;

    font-size:.80rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html[data-hp-page="upgradesummary"]) .phc-checkout-title-icon {
    width:32px;
    height:32px;
    flex:0 0 32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--uo-blue-line);
    border-radius:9px;

    color:var(--uo-blue);
    background:var(--uo-blue-soft);

    font-size:.64rem;
}

/* Promo */
:where(html[data-hp-page="upgradesummary"]) .phc-promo-group {
    min-height:44px;
    padding:4px;

    display:flex;
    align-items:center;

    border:1px solid var(--uo-border);
    border-radius:10px;

    background:#fff;

    transition:
        border-color var(--uo-transition),
        box-shadow var(--uo-transition);
}

:where(html[data-hp-page="upgradesummary"]) .phc-promo-group:focus-within {
    border-color:var(--uo-blue);
    box-shadow:0 0 0 3px rgba(37,99,235,.07);
}

:where(html[data-hp-page="upgradesummary"]) .phc-promo-icon {
    width:34px;
    flex:0 0 34px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--uo-muted-2);

    font-size:.68rem;
}

:where(html[data-hp-page="upgradesummary"]) .phc-promo-group input {
    flex:1;
    min-width:0;
    height:34px;
    padding:0 6px!important;

    border:0!important;
    outline:0!important;

    color:var(--uo-text)!important;
    background:transparent!important;

    font-family:inherit!important;
    font-size:.72rem!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="upgradesummary"]) .phc-promo-group input:disabled {
    color:var(--uo-muted)!important;
    opacity:.9;
}

:where(html[data-hp-page="upgradesummary"]) .phc-promo-btn {
    min-width:78px;
    height:34px;
    padding:0 9px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;

    border:1px solid;
    border-radius:8px;

    font-family:inherit;
    font-size:.65rem;
    line-height:1;
    font-weight:900;

    cursor:pointer;

    transition:
        transform var(--uo-transition),
        box-shadow var(--uo-transition);
}

:where(html[data-hp-page="upgradesummary"]) .phc-promo-btn--apply {
    color:#fff;
    border-color:var(--uo-blue);
    background:var(--uo-gradient);
}

:where(html[data-hp-page="upgradesummary"]) .phc-promo-btn--remove {
    color:#fff;
    border-color:var(--uo-red);
    background:linear-gradient(135deg,#ef4444,#dc2626);
}

:where(html[data-hp-page="upgradesummary"]) .phc-promo-btn:hover {
    transform:translateY(-1px);
}

/* Payment */
:where(html[data-hp-page="upgradesummary"]) .phc-payment-select {
    width:100%;
    min-height:44px;
    margin-bottom:10px;
    padding:0 11px!important;

    border:1px solid var(--uo-border)!important;
    border-radius:10px!important;
    outline:0!important;

    color:var(--uo-text)!important;
    background:#fff!important;

    font-family:inherit!important;
    font-size:.73rem!important;

    box-shadow:none!important;

    transition:
        border-color var(--uo-transition),
        box-shadow var(--uo-transition);
}

:where(html[data-hp-page="upgradesummary"]) .phc-payment-select:focus {
    border-color:var(--uo-blue)!important;
    box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="upgradesummary"]) .phc-order-submit {
    width:100%;
    min-height:44px;
    padding:0 14px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--uo-blue);
    border-radius:10px;

    color:#fff;
    background:var(--uo-gradient);

    font-family:inherit;
    font-size:.75rem;
    line-height:1;
    font-weight:950;

    box-shadow:0 9px 18px rgba(37,99,235,.16);

    cursor:pointer;

    transition:
        transform var(--uo-transition),
        box-shadow var(--uo-transition);
}

:where(html[data-hp-page="upgradesummary"]) .phc-order-submit:hover {
    transform:translateY(-1px);
    box-shadow:0 12px 22px rgba(37,99,235,.21);
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:900px) {
    :where(html[data-hp-page="upgradesummary"]) .phc-checkout-grid {
        grid-template-columns:1fr;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-checkout-card {
        min-height:auto;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="upgradesummary"]) .phc-upgrade-order-shell {
        border-radius:19px;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-upgrade-notices {
        padding:13px 13px 0;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-current-config {
        padding:13px;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-upgrade-order-content {
        padding:13px;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-summary-header {
        display:none;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-summary-row {
        grid-template-columns:1fr;
        gap:7px;

        padding:11px 12px;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-summary-price {
        padding-top:7px;

        border-top:1px dashed var(--uo-divider);

        text-align:right;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-summary-price::before {
        content:"قیمت: ";

        color:var(--uo-muted-2);

        font-size:.65rem;
        font-weight:800;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-total-row {
        grid-template-columns:minmax(0,1fr) auto;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="upgradesummary"]) .phc-current-config {
        align-items:flex-start;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-upgrade-change {
        align-items:flex-start;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-promo-group {
        align-items:stretch;
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-promo-icon {
        height:34px;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-promo-group input {
        flex:1 1 calc(100% - 40px);
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-promo-btn {
        width:100%;
        margin-top:3px;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-total-row {
        gap:8px;
    }

    :where(html[data-hp-page="upgradesummary"]) .phc-total-row--final .phc-total-label,
:where(html[data-hp-page="upgradesummary"]) .phc-total-row--final .phc-total-value {
        font-size:.78rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="upgradesummary"]) .phc-promo-group,
:where(html[data-hp-page="upgradesummary"]) .phc-promo-btn,
:where(html[data-hp-page="upgradesummary"]) .phc-payment-select,
:where(html[data-hp-page="upgradesummary"]) .phc-order-submit {
        transition:none!important;
    }
}

/* user-invite-accept.tpl */
:root:where(html[data-hp-page="user-invite-accept"]) {
    --iv-card:var(--hp-surface);
    --iv-soft:var(--hp-surface-soft);
    --iv-border:var(--hp-line);
    --iv-divider:#edf1f6;

    --iv-text:var(--hp-ink);
    --iv-text-2:var(--hp-ink-secondary);
    --iv-muted:var(--hp-muted);
    --iv-muted-2:#94a3b8;

    --iv-blue:var(--hp-primary);
    --iv-blue-dark:var(--hp-primary-hover);
    --iv-blue-light:#60a5fa;
    --iv-blue-soft:var(--hp-primary-soft);
    --iv-blue-line:#bfdbfe;
    --iv-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --iv-green:#059669;
    --iv-green-soft:#ecfdf5;
    --iv-green-line:#a7f3d0;

    --iv-red:#dc2626;
    --iv-red-soft:#fef2f2;
    --iv-red-line:#fecaca;

    --iv-radius-xl:24px;
    --iv-radius-lg:17px;
    --iv-radius-md:12px;

    --iv-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --iv-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --iv-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-page,
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-page * {
    box-sizing:border-box;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-page {
    max-width:980px;
    margin:18px auto 28px;

    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--iv-text-2);
}

/* =========================================================
   Main shell
   ========================================================= */
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-shell {
    position:relative;
    overflow:hidden;

    border:1px solid var(--iv-border);
    border-radius:var(--iv-radius-xl);

    background:#fff;
    box-shadow:var(--iv-shadow-panel);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-shell::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--iv-gradient);
}

/* =========================================================
   Invite Intro
   ========================================================= */
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero {
    padding:22px 24px 18px;

    display:flex;
    align-items:flex-start;
    gap:14px;

    border-bottom:1px solid var(--iv-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero-icon {
    position:relative;

    width:52px;
    height:52px;
    flex:0 0 52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--iv-blue-line);
    border-radius:15px;

    color:#fff;
    background:var(--iv-gradient);

    box-shadow:0 10px 22px rgba(37,99,235,.18);

    font-size:.96rem;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero h2 {
    margin:0 0 6px!important;

    color:var(--iv-text)!important;

    font-size:1.02rem!important;
    line-height:1.7;
    font-weight:900!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero p {
    margin:0 0 5px!important;

    color:var(--iv-muted)!important;

    font-size:.76rem!important;
    line-height:1.8;
    font-weight:650;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero p:last-child {
    margin-bottom:0!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero strong {
    color:var(--iv-text)!important;
    font-weight:900!important;
}

/* =========================================================
   Body
   ========================================================= */
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-content {
    padding:18px;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-page .alert {
    margin-bottom:14px!important;

    border-radius:12px!important;

    font-size:.75rem!important;
    line-height:1.75;
}

/* =========================================================
   Logged-in Accept
   ========================================================= */
:where(html[data-hp-page="user-invite-accept"]) .phc-accept-box {
    padding:16px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    border:1px solid var(--iv-green-line);
    border-radius:14px;

    background:linear-gradient(135deg,#fff 0%,var(--iv-green-soft) 160%);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-accept-info {
    display:flex;
    align-items:center;
    gap:10px;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-accept-icon {
    width:38px;
    height:38px;
    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--iv-green-line);
    border-radius:11px;

    color:var(--iv-green);
    background:#fff;

    font-size:.72rem;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-accept-info span {
    color:#065f46;

    font-size:.75rem;
    line-height:1.7;
    font-weight:750;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-btn-accept {
    min-height:38px;
    padding:0 13px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--iv-green);
    border-radius:10px;

    color:#fff;
    background:linear-gradient(135deg,#10b981,#059669);

    font-family:inherit;
    font-size:.71rem;
    line-height:1;
    font-weight:900;

    box-shadow:0 8px 16px rgba(5,150,105,.14);

    cursor:pointer;

    transition:
        transform var(--iv-transition),
        box-shadow var(--iv-transition);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-btn-accept:hover {
    transform:translateY(-1px);
    box-shadow:0 11px 20px rgba(5,150,105,.19);
}

/* =========================================================
   Guest Grid
   ========================================================= */
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box {
    position:relative;
    min-height:100%;
    padding:15px;

    border:1px solid var(--iv-border);
    border-radius:15px;

    background:linear-gradient(145deg,#fff 0%,#fbfdff 100%);

    box-shadow:var(--iv-shadow-sm);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box::before {
    content:"";
    position:absolute;
    top:12px;
    bottom:12px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;
    background:var(--iv-gradient);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box-header {
    margin-bottom:13px;

    display:flex;
    align-items:center;
    gap:9px;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box-icon {
    width:36px;
    height:36px;
    flex:0 0 36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--iv-blue-line);
    border-radius:10px;

    color:var(--iv-blue);
    background:var(--iv-blue-soft);

    font-size:.70rem;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box h2 {
    margin:0!important;

    color:var(--iv-text)!important;

    font-size:.88rem!important;
    line-height:1.55;
    font-weight:900!important;
}

/* =========================================================
   Forms
   ========================================================= */
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box form {
    margin:0;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .form-group {
    margin-bottom:11px!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box label {
    margin-bottom:5px!important;

    color:var(--iv-muted)!important;

    font-size:.68rem!important;
    line-height:1.4;
    font-weight:800!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .form-control {
    min-height:42px;
    padding:0 10px!important;

    border:1px solid var(--iv-border)!important;
    border-radius:10px!important;
    outline:0!important;

    color:var(--iv-text)!important;
    background:#f8fafc!important;

    font-family:inherit!important;
    font-size:.74rem!important;

    box-shadow:none!important;

    transition:
        border-color var(--iv-transition),
        background var(--iv-transition),
        box-shadow var(--iv-transition);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .form-control:hover {
    border-color:#cbd5e1!important;
    background:#fff!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .form-control:focus {
    border-color:var(--iv-blue)!important;
    background:#fff!important;

    box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .form-control::placeholder {
    color:var(--iv-muted-2)!important;
}

/* Password group */
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .input-group {
    direction:rtl;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .input-group > .form-control {
    border-radius:0 10px 10px 0!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .input-group-append {
    margin-right:0!important;
    margin-left:0!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .generate-password {
    min-width:76px;
    min-height:42px;
    padding:0 10px!important;

    border:1px solid var(--iv-border)!important;
    border-right:0!important;
    border-radius:10px 0 0 10px!important;

    color:var(--iv-blue)!important;
    background:#fff!important;

    font-family:inherit!important;
    font-size:.65rem!important;
    font-weight:850!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .generate-password:hover {
    background:var(--iv-blue-soft)!important;
}

/* Strength */
:where(html[data-hp-page="user-invite-accept"]) .password-strength-meter {
    margin-top:8px;
}

:where(html[data-hp-page="user-invite-accept"]) .password-strength-meter .progress {
    height:7px!important;
    margin:0!important;

    overflow:hidden;

    border-radius:999px;

    background:#e8edf4!important;
}

:where(html[data-hp-page="user-invite-accept"]) .password-strength-meter .progress-bar {
    border-radius:999px;
}

:where(html[data-hp-page="user-invite-accept"]) #passwordStrengthTextLabel {
    margin:5px 0 0!important;

    color:var(--iv-muted)!important;

    font-size:.64rem!important;
    line-height:1.5;
}

/* TOS */
:where(html[data-hp-page="user-invite-accept"]) .phc-tos {
    margin-top:4px;
    padding:9px 10px;

    border:1px solid var(--iv-border);
    border-radius:10px;

    background:#f8fafc;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-tos .form-check {
    margin:0!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-tos label {
    margin:0!important;

    color:var(--iv-text-2)!important;

    font-size:.68rem!important;
    line-height:1.7;
    font-weight:700!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-tos a {
    color:var(--iv-blue)!important;
    font-weight:850;
}

/* Submit */
:where(html[data-hp-page="user-invite-accept"]) .phc-form-submit {
    width:100%;
    min-height:40px;
    padding:0 13px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--iv-blue)!important;
    border-radius:10px!important;

    color:#fff!important;
    background:var(--iv-gradient)!important;

    font-family:inherit!important;
    font-size:.72rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:0 8px 16px rgba(37,99,235,.14)!important;

    transition:
        transform var(--iv-transition),
        box-shadow var(--iv-transition);
}

:where(html[data-hp-page="user-invite-accept"]) .phc-form-submit:hover {
    transform:translateY(-1px);
    box-shadow:0 11px 20px rgba(37,99,235,.19)!important;
}

/* captcha integration */
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .captcha-container,
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .recaptcha-container,
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .form-group.row {
    max-width:100%;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box iframe {
    max-width:100%;
}

/* =========================================================
   Invalid invite
   ========================================================= */
:where(html[data-hp-page="user-invite-accept"]) .phc-invalid-invite {
    padding:34px 20px;

    text-align:center;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invalid-icon {
    width:62px;
    height:62px;
    margin:0 auto 13px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--iv-red-line);
    border-radius:17px;

    color:var(--iv-red);
    background:var(--iv-red-soft);

    font-size:1rem;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invalid-invite h2 {
    margin:0 0 8px!important;

    color:var(--iv-text)!important;

    font-size:1rem!important;
    line-height:1.6;
    font-weight:900!important;
}

:where(html[data-hp-page="user-invite-accept"]) .phc-invalid-invite p {
    margin:0!important;

    color:var(--iv-muted)!important;

    font-size:.76rem!important;
    line-height:1.75;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-page {
        margin-top:10px;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-shell {
        border-radius:19px;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero {
        padding:16px;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-content {
        padding:13px;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-grid {
        grid-template-columns:1fr;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-accept-box {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-btn-accept {
        width:100%;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero {
        align-items:flex-start;
        flex-direction:column;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-hero-icon {
        width:46px;
        height:46px;
        flex-basis:46px;

        border-radius:13px;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-box {
        padding:13px;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .input-group {
        flex-wrap:wrap;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .input-group > .form-control {
        width:100%;
        flex:1 1 100%;

        border-radius:10px!important;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .input-group-append {
        width:100%;
        margin-top:5px;
    }

    :where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .generate-password {
        width:100%;

        border:1px solid var(--iv-border)!important;
        border-radius:10px!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="user-invite-accept"]) .phc-btn-accept,
:where(html[data-hp-page="user-invite-accept"]) .phc-invite-box .form-control,
:where(html[data-hp-page="user-invite-accept"]) .phc-form-submit {
        transition:none!important;
    }
}

/* user-password.tpl */
:root:where(html[data-hp-page="user-password"]) {
    --cp-card:var(--hp-surface);
    --cp-soft:var(--hp-surface-soft);
    --cp-border:var(--hp-line);
    --cp-divider:#edf1f6;

    --cp-text:var(--hp-ink);
    --cp-text-2:var(--hp-ink-secondary);
    --cp-muted:var(--hp-muted);
    --cp-muted-2:#94a3b8;

    --cp-blue:var(--hp-primary);
    --cp-blue-dark:var(--hp-primary-hover);
    --cp-blue-light:#60a5fa;
    --cp-blue-soft:var(--hp-primary-soft);
    --cp-blue-line:#bfdbfe;
    --cp-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --cp-green:#059669;
    --cp-green-soft:#ecfdf5;
    --cp-green-line:#a7f3d0;

    --cp-radius-xl:24px;
    --cp-radius-lg:17px;
    --cp-radius-md:12px;

    --cp-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --cp-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --cp-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="user-password"]) .phc-password-page,
:where(html[data-hp-page="user-password"]) .phc-password-page * {
    box-sizing:border-box;
}

:where(html[data-hp-page="user-password"]) .phc-password-page {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--cp-text-2);
}

/* =========================================================
   Shell
   ========================================================= */
:where(html[data-hp-page="user-password"]) .phc-password-card {
    position:relative;
    overflow:hidden;
    margin-bottom:20px;

    border:1px solid var(--cp-border);
    border-radius:var(--cp-radius-xl);

    background:#fff;
    box-shadow:var(--cp-shadow-panel);
}

:where(html[data-hp-page="user-password"]) .phc-password-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--cp-gradient);
}

/* =========================================================
   Header
   ========================================================= */
:where(html[data-hp-page="user-password"]) .phc-password-header {
    min-height:92px;
    padding:18px 22px;

    display:flex;
    align-items:center;
    gap:13px;

    border-bottom:1px solid var(--cp-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.10),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="user-password"]) .phc-password-header-icon {
    position:relative;

    width:50px;
    height:50px;
    flex:0 0 50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--cp-blue-line);
    border-radius:14px;

    color:#fff;
    background:var(--cp-gradient);

    box-shadow:0 10px 22px rgba(37,99,235,.18);

    font-size:.90rem;
}

:where(html[data-hp-page="user-password"]) .phc-password-header-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:9px;
}

:where(html[data-hp-page="user-password"]) .phc-password-header h3 {
    margin:0 0 3px!important;

    color:var(--cp-text)!important;
    font-size:1.03rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="user-password"]) .phc-password-header p {
    margin:0!important;

    color:var(--cp-muted)!important;

    font-size:.78rem!important;
    line-height:1.7;
    font-weight:600;
}

/* =========================================================
   Body
   ========================================================= */
:where(html[data-hp-page="user-password"]) .phc-password-body {
    padding:18px 20px 20px;
}

:where(html[data-hp-page="user-password"]) .phc-password-page .alert {
    margin-bottom:14px!important;

    border-radius:12px!important;

    font-size:.76rem!important;
    line-height:1.75;
}

/* =========================================================
   Fields
   ========================================================= */
:where(html[data-hp-page="user-password"]) .phc-password-form {
    max-width:880px;
}

:where(html[data-hp-page="user-password"]) .phc-field-row {
    margin-bottom:13px;
    padding:12px 13px;

    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    align-items:start;
    gap:12px;

    border:1px solid var(--cp-border);
    border-radius:13px;

    background:linear-gradient(145deg,#fff 0%,#fbfdff 100%);

    box-shadow:0 4px 14px rgba(15,23,42,.025);
}

:where(html[data-hp-page="user-password"]) .phc-field-row--password {
    grid-template-columns:180px minmax(0,1fr) 210px;
}

:where(html[data-hp-page="user-password"]) .phc-field-label {
    padding-top:11px;

    color:var(--cp-text)!important;

    font-size:.73rem!important;
    line-height:1.5;
    font-weight:850!important;
}

:where(html[data-hp-page="user-password"]) .phc-field-main {
    min-width:0;
}

:where(html[data-hp-page="user-password"]) .phc-password-input {
    position:relative;

    width:100%;
    min-height:44px;

    display:flex;
    align-items:center;

    overflow:hidden;

    border:1px solid var(--cp-border);
    border-radius:10px;

    background:#f8fafc;

    transition:
        border-color var(--cp-transition),
        background var(--cp-transition),
        box-shadow var(--cp-transition);
}

:where(html[data-hp-page="user-password"]) .phc-password-input:hover {
    border-color:#cbd5e1;
    background:#fff;
}

:where(html[data-hp-page="user-password"]) .phc-password-input:focus-within {
    border-color:var(--cp-blue);
    background:#fff;

    box-shadow:0 0 0 3px rgba(37,99,235,.07);
}

:where(html[data-hp-page="user-password"]) .phc-password-input-icon {
    width:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--cp-muted-2);

    font-size:.70rem;
}

:where(html[data-hp-page="user-password"]) .phc-password-input:focus-within .phc-password-input-icon {
    color:var(--cp-blue);
}

:where(html[data-hp-page="user-password"]) .phc-password-input .form-control {
    min-width:0;
    height:42px;
    padding:0 8px!important;

    border:0!important;
    outline:0!important;

    color:var(--cp-text)!important;
    background:transparent!important;

    font-family:inherit!important;
    font-size:.74rem!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="user-password"]) .phc-password-input .form-control::placeholder {
    color:var(--cp-muted-2)!important;
}

/* =========================================================
   Password strength include
   ========================================================= */
:where(html[data-hp-page="user-password"]) .phc-field-main .password-strength-meter {
    margin-top:8px;
}

:where(html[data-hp-page="user-password"]) .phc-field-main .password-strength-meter .progress {
    height:7px!important;
    margin:0!important;

    overflow:hidden;

    border-radius:999px;

    background:#e8edf4!important;
}

:where(html[data-hp-page="user-password"]) .phc-field-main .password-strength-meter .progress-bar {
    border-radius:999px;
}

:where(html[data-hp-page="user-password"]) .phc-field-main .password-strength-meter p,
:where(html[data-hp-page="user-password"]) .phc-field-main #passwordStrengthTextLabel {
    margin:5px 0 0!important;

    color:var(--cp-muted)!important;

    font-size:.64rem!important;
    line-height:1.5;
}

/* =========================================================
   Generate password
   ========================================================= */
:where(html[data-hp-page="user-password"]) .phc-generate-wrap {
    display:flex;
    align-items:flex-start;
}

:where(html[data-hp-page="user-password"]) .phc-generate-password {
    width:100%;
    min-height:44px;
    padding:0 11px!important;

    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--cp-blue-line)!important;
    border-radius:10px!important;

    color:var(--cp-blue)!important;
    background:var(--cp-blue-soft)!important;

    font-family:inherit!important;
    font-size:.68rem!important;
    line-height:1;
    font-weight:850!important;

    box-shadow:none!important;

    transition:
        transform var(--cp-transition),
        color var(--cp-transition),
        border-color var(--cp-transition),
        background var(--cp-transition);
}

:where(html[data-hp-page="user-password"]) .phc-generate-password:hover {
    transform:translateY(-1px);

    color:#fff!important;
    border-color:var(--cp-blue)!important;
    background:var(--cp-gradient)!important;
}

:where(html[data-hp-page="user-password"]) .phc-generate-password i {
    color:inherit!important;
}

/* =========================================================
   Confirm message
   ========================================================= */
:where(html[data-hp-page="user-password"]) #inputNewPassword2Msg {
    margin-top:5px!important;

    color:var(--cp-muted)!important;

    font-size:.65rem!important;
    line-height:1.6;
}

/* =========================================================
   Actions
   ========================================================= */
:where(html[data-hp-page="user-password"]) .phc-password-actions {
    margin-top:16px;
    padding-top:14px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;

    border-top:1px solid var(--cp-divider);
}

:where(html[data-hp-page="user-password"]) .phc-password-save,
:where(html[data-hp-page="user-password"]) .phc-password-reset {
    min-height:40px;
    padding:0 14px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border-radius:10px!important;

    font-family:inherit!important;
    font-size:.71rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:none!important;

    transition:
        transform var(--cp-transition),
        color var(--cp-transition),
        border-color var(--cp-transition),
        background var(--cp-transition),
        box-shadow var(--cp-transition);
}

:where(html[data-hp-page="user-password"]) .phc-password-save {
    min-width:150px;

    color:#fff!important;
    border:1px solid var(--cp-blue)!important;
    background:var(--cp-gradient)!important;

    box-shadow:0 8px 16px rgba(37,99,235,.14)!important;
}

:where(html[data-hp-page="user-password"]) .phc-password-save:hover {
    transform:translateY(-1px);

    box-shadow:0 11px 20px rgba(37,99,235,.19)!important;
}

:where(html[data-hp-page="user-password"]) .phc-password-reset {
    min-width:90px;

    color:var(--cp-muted)!important;
    border:1px solid var(--cp-border)!important;
    background:#fff!important;
}

:where(html[data-hp-page="user-password"]) .phc-password-reset:hover {
    transform:translateY(-1px);

    color:var(--cp-blue)!important;
    border-color:var(--cp-blue-line)!important;
    background:var(--cp-blue-soft)!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html[data-hp-page="user-password"]) .phc-field-row,
:where(html[data-hp-page="user-password"]) .phc-field-row--password {
        grid-template-columns:150px minmax(0,1fr);
    }

    :where(html[data-hp-page="user-password"]) .phc-generate-wrap {
        grid-column:2;
    }
}

@media(max-width:767.98px) {
    :where(html[data-hp-page="user-password"]) .phc-password-card {
        border-radius:19px;
    }

    :where(html[data-hp-page="user-password"]) .phc-password-header {
        min-height:0;
        padding:15px;
    }

    :where(html[data-hp-page="user-password"]) .phc-password-body {
        padding:13px;
    }

    :where(html[data-hp-page="user-password"]) .phc-field-row,
:where(html[data-hp-page="user-password"]) .phc-field-row--password {
        grid-template-columns:1fr;
        gap:7px;

        padding:11px;
    }

    :where(html[data-hp-page="user-password"]) .phc-field-label {
        padding-top:0;
    }

    :where(html[data-hp-page="user-password"]) .phc-generate-wrap {
        grid-column:auto;
    }

    :where(html[data-hp-page="user-password"]) .phc-password-actions {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="user-password"]) .phc-password-save,
:where(html[data-hp-page="user-password"]) .phc-password-reset {
        width:100%;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="user-password"]) .phc-password-header {
        align-items:flex-start;
    }

    :where(html[data-hp-page="user-password"]) .phc-password-header-icon {
        width:44px;
        height:44px;
        flex-basis:44px;

        border-radius:13px;
    }

    :where(html[data-hp-page="user-password"]) .phc-password-header h3 {
        font-size:.96rem!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="user-password"]) .phc-password-input,
:where(html[data-hp-page="user-password"]) .phc-generate-password,
:where(html[data-hp-page="user-password"]) .phc-password-save,
:where(html[data-hp-page="user-password"]) .phc-password-reset {
        transition:none!important;
    }
}

/* user-profile.tpl */
:root:where(html[data-hp-page="user-profile"]) {
    --pf-card:var(--hp-surface);
    --pf-soft:var(--hp-surface-soft);
    --pf-border:var(--hp-line);
    --pf-divider:#edf1f6;

    --pf-text:var(--hp-ink);
    --pf-text-2:var(--hp-ink-secondary);
    --pf-muted:var(--hp-muted);
    --pf-muted-2:#94a3b8;

    --pf-blue:var(--hp-primary);
    --pf-blue-dark:var(--hp-primary-hover);
    --pf-blue-light:#60a5fa;
    --pf-blue-soft:var(--hp-primary-soft);
    --pf-blue-line:#bfdbfe;
    --pf-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --pf-green:#059669;
    --pf-green-soft:#ecfdf5;
    --pf-green-line:#a7f3d0;

    --pf-orange:#d97706;
    --pf-orange-soft:#fff7ed;
    --pf-orange-line:#fed7aa;

    --pf-radius-xl:24px;
    --pf-radius-lg:17px;
    --pf-radius-md:12px;

    --pf-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --pf-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --pf-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="user-profile"]) .phc-profile-wrapper,
:where(html[data-hp-page="user-profile"]) .phc-profile-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-wrapper {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--pf-text-2);
}

/* =========================================================
   Shared card
   ========================================================= */
:where(html[data-hp-page="user-profile"]) .phc-profile-card {
    position:relative;
    overflow:hidden;

    margin-bottom:16px;
    padding:0!important;

    border:1px solid var(--pf-border)!important;
    border-radius:var(--pf-radius-xl)!important;

    background:#fff!important;

    box-shadow:var(--pf-shadow-panel)!important;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--pf-gradient);
}

:where(html[data-hp-page="user-profile"]) .phc-profile-card:hover {
    transform:none!important;
}

/* =========================================================
   Header
   ========================================================= */
:where(html[data-hp-page="user-profile"]) .phc-profile-header {
    min-height:82px;
    padding:16px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    border-bottom:1px solid var(--pf-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="user-profile"]) .phc-profile-heading {
    min-width:0;

    display:flex;
    align-items:center;
    gap:11px;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-icon {
    position:relative;

    width:44px;
    height:44px;
    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--pf-blue-line);
    border-radius:12px;

    color:#fff;
    background:var(--pf-gradient);

    box-shadow:0 9px 20px rgba(37,99,235,.16);

    font-size:.78rem;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-icon::after {
    content:"";
    position:absolute;
    inset:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-title {
    margin:0!important;
    padding:0!important;

    display:block!important;

    border:0!important;

    color:var(--pf-text)!important;

    font-size:.94rem!important;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-subtitle {
    margin-top:2px;

    color:var(--pf-muted);

    font-size:.68rem;
    line-height:1.6;
    font-weight:650;
}

/* =========================================================
   Verification status
   ========================================================= */
:where(html[data-hp-page="user-profile"]) .phc-verification-badge {
    min-height:29px;
    padding:0 9px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid;
    border-radius:9px;

    font-size:.65rem;
    line-height:1;
    font-weight:900;

    white-space:nowrap;
}

:where(html[data-hp-page="user-profile"]) .phc-verification-badge--warning {
    color:var(--pf-orange);
    border-color:var(--pf-orange-line);
    background:var(--pf-orange-soft);
}

:where(html[data-hp-page="user-profile"]) .phc-verification-badge--success {
    color:var(--pf-green);
    border-color:var(--pf-green-line);
    background:var(--pf-green-soft);
}

/* =========================================================
   Body / form
   ========================================================= */
:where(html[data-hp-page="user-profile"]) .phc-profile-body {
    padding:16px 18px 18px;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-wrapper .alert {
    margin-bottom:14px!important;

    border-radius:12px!important;

    font-size:.75rem!important;
    line-height:1.75;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
}

:where(html[data-hp-page="user-profile"]) .phc-profile-form-grid--single {
    grid-template-columns:minmax(0,1fr);
    max-width:560px;
}

:where(html[data-hp-page="user-profile"]) .phc-form-group {
    margin:0!important;
}

:where(html[data-hp-page="user-profile"]) .phc-form-group label {
    display:block;
    margin:0 0 5px!important;

    color:var(--pf-muted)!important;

    font-size:.67rem!important;
    line-height:1.45;
    font-weight:850!important;
}

:where(html[data-hp-page="user-profile"]) .phc-input-wrapper {
    position:relative;
}

:where(html[data-hp-page="user-profile"]) .phc-input-wrapper .phc-icon {
    position:absolute;
    top:50%;
    right:13px;
    z-index:2;

    transform:translateY(-50%);

    color:var(--pf-muted-2)!important;

    font-size:.68rem!important;

    transition:color var(--pf-transition);
}

:where(html[data-hp-page="user-profile"]) .phc-input {
    width:100%;
    min-height:43px!important;
    padding:0 38px 0 10px!important;

    border:1px solid var(--pf-border)!important;
    border-radius:10px!important;
    outline:0!important;

    color:var(--pf-text)!important;
    background:#f8fafc!important;

    font-family:inherit!important;
    font-size:.73rem!important;

    box-shadow:none!important;

    transition:
        border-color var(--pf-transition),
        background var(--pf-transition),
        box-shadow var(--pf-transition);
}

:where(html[data-hp-page="user-profile"]) .phc-input:hover {
    border-color:#cbd5e1!important;
    background:#fff!important;
}

:where(html[data-hp-page="user-profile"]) .phc-input:focus {
    border-color:var(--pf-blue)!important;
    background:#fff!important;

    box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}

:where(html[data-hp-page="user-profile"]) .phc-input-wrapper:focus-within .phc-icon {
    color:var(--pf-blue)!important;
}

:where(html[data-hp-page="user-profile"]) .phc-input:disabled {
    color:var(--pf-muted)!important;
    border-color:#e5e7eb!important;
    background:#f1f5f9!important;

    cursor:not-allowed;
}

:where(html[data-hp-page="user-profile"]) .phc-input:disabled + * {
    opacity:.8;
}

/* =========================================================
   Locked field note
   ========================================================= */
:where(html[data-hp-page="user-profile"]) .phc-field-note {
    margin-top:5px;

    display:flex;
    align-items:center;
    gap:5px;

    color:var(--pf-muted-2);

    font-size:.62rem;
    line-height:1.5;
    font-weight:700;
}

/* =========================================================
   Actions
   ========================================================= */
:where(html[data-hp-page="user-profile"]) .phc-form-actions {
    margin-top:14px!important;
    padding-top:13px;

    display:flex;
    align-items:center;
    gap:7px;

    border-top:1px solid var(--pf-divider);
}

:where(html[data-hp-page="user-profile"]) .btn-hyper-primary,
:where(html[data-hp-page="user-profile"]) .btn-hyper-light {
    min-height:38px;
    padding:0 13px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border-radius:10px!important;

    font-family:inherit!important;
    font-size:.69rem!important;
    line-height:1;
    font-weight:900!important;

    text-decoration:none!important;

    box-shadow:none!important;

    transition:
        transform var(--pf-transition),
        color var(--pf-transition),
        border-color var(--pf-transition),
        background var(--pf-transition),
        box-shadow var(--pf-transition);
}

:where(html[data-hp-page="user-profile"]) .btn-hyper-primary {
    min-width:145px;

    color:#fff!important;
    border:1px solid var(--pf-blue)!important;
    background:var(--pf-gradient)!important;

    box-shadow:0 8px 16px rgba(37,99,235,.14)!important;
}

:where(html[data-hp-page="user-profile"]) .btn-hyper-primary:hover {
    transform:translateY(-1px);

    color:#fff!important;

    box-shadow:0 11px 20px rgba(37,99,235,.18)!important;
}

:where(html[data-hp-page="user-profile"]) .btn-hyper-light {
    min-width:88px;

    color:var(--pf-muted)!important;
    border:1px solid var(--pf-border)!important;
    background:#fff!important;
}

:where(html[data-hp-page="user-profile"]) .btn-hyper-light:hover {
    transform:translateY(-1px);

    color:var(--pf-blue)!important;
    border-color:var(--pf-blue-line)!important;
    background:var(--pf-blue-soft)!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="user-profile"]) .phc-profile-card {
        border-radius:19px!important;
    }

    :where(html[data-hp-page="user-profile"]) .phc-profile-header {
        min-height:0;
        padding:14px;
    }

    :where(html[data-hp-page="user-profile"]) .phc-profile-body {
        padding:13px;
    }

    :where(html[data-hp-page="user-profile"]) .phc-profile-form-grid,
:where(html[data-hp-page="user-profile"]) .phc-profile-form-grid--single {
        grid-template-columns:1fr;
        max-width:none;
    }

    :where(html[data-hp-page="user-profile"]) .phc-form-actions {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="user-profile"]) .btn-hyper-primary,
:where(html[data-hp-page="user-profile"]) .btn-hyper-light {
        width:100%;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="user-profile"]) .phc-profile-header {
        align-items:flex-start;
        flex-direction:column;
    }

    :where(html[data-hp-page="user-profile"]) .phc-profile-heading {
        width:100%;
    }

    :where(html[data-hp-page="user-profile"]) .phc-profile-icon {
        width:42px;
        height:42px;
        flex-basis:42px;
    }

    :where(html[data-hp-page="user-profile"]) .phc-verification-badge {
        width:100%;
        justify-content:center;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="user-profile"]) .phc-input,
:where(html[data-hp-page="user-profile"]) .btn-hyper-primary,
:where(html[data-hp-page="user-profile"]) .btn-hyper-light {
        transition:none!important;
    }
}

/* user-security.tpl */
:root:where(html[data-hp-page="user-security"]) {
    --sec-card:var(--hp-surface);--sec-soft:var(--hp-surface-soft);--sec-border:var(--hp-line);--sec-divider:#edf1f6;
    --sec-text:var(--hp-ink);--sec-text-2:var(--hp-ink-secondary);--sec-muted:var(--hp-muted);--sec-muted-2:#94a3b8;
    --sec-blue:var(--hp-primary);--sec-blue-dark:var(--hp-primary-hover);--sec-blue-light:#60a5fa;
    --sec-blue-soft:var(--hp-primary-soft);--sec-blue-line:#bfdbfe;
    --sec-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);
    --sec-green:#059669;--sec-green-soft:#ecfdf5;--sec-green-line:#a7f3d0;
    --sec-orange:#d97706;--sec-orange-soft:#fff7ed;--sec-orange-line:#fed7aa;
    --sec-red:#dc2626;--sec-red-soft:#fef2f2;--sec-red-line:#fecaca;
    --sec-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --sec-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);
    --sec-transition:220ms cubic-bezier(.2,.8,.2,1);
}
:where(html[data-hp-page="user-security"]) .phc-security-page,
:where(html[data-hp-page="user-security"]) .phc-security-page * {box-sizing:border-box}
:where(html[data-hp-page="user-security"]) .phc-security-page {direction:rtl;text-align:right;font-family:inherit;color:var(--sec-text-2)}

:where(html[data-hp-page="user-security"]) .phc-security-page>.alert {margin-bottom:14px!important;border-radius:12px!important;font-size:.75rem!important;line-height:1.75}

:where(html[data-hp-page="user-security"]) .phc-security-intro {position:relative;overflow:hidden;margin-bottom:14px;padding:14px 16px;display:flex;align-items:center;gap:10px;border:1px solid var(--sec-blue-line);border-radius:15px;background:radial-gradient(circle at 7% 0%,rgba(96,165,250,.1),transparent 30%),linear-gradient(135deg,#fff 0%,#f8fbff 100%);box-shadow:var(--sec-shadow-sm)}
:where(html[data-hp-page="user-security"]) .phc-security-intro:before {content:"";position:absolute;top:10px;bottom:10px;right:0;width:3px;border-radius:3px 0 0 3px;background:var(--sec-gradient)}
:where(html[data-hp-page="user-security"]) .phc-security-intro-icon {width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sec-blue-line);border-radius:11px;color:var(--sec-blue);background:var(--sec-blue-soft);font-size:.75rem}
:where(html[data-hp-page="user-security"]) .phc-security-intro p {margin:0!important;color:var(--sec-muted)!important;font-size:.76rem!important;line-height:1.75;font-weight:650}

:where(html[data-hp-page="user-security"]) .phc-security-card {position:relative;overflow:hidden;margin-bottom:14px;border:1px solid var(--sec-border);border-radius:24px;background:#fff;box-shadow:var(--sec-shadow-panel)}
:where(html[data-hp-page="user-security"]) .phc-security-card:before {content:"";position:absolute;top:0;right:0;left:0;height:3px;z-index:3;background:var(--sec-gradient)}
:where(html[data-hp-page="user-security"]) .phc-security-header {min-height:78px;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--sec-divider);background:radial-gradient(circle at 7% 0%,rgba(96,165,250,.08),transparent 30%),linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
:where(html[data-hp-page="user-security"]) .phc-security-heading {min-width:0;display:flex;align-items:center;gap:10px}
:where(html[data-hp-page="user-security"]) .phc-security-icon {width:42px;height:42px;flex:0 0 42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sec-blue-line);border-radius:12px;color:#fff;background:var(--sec-gradient);box-shadow:0 8px 18px rgba(37,99,235,.15);font-size:.74rem}
:where(html[data-hp-page="user-security"]) .phc-security-title {margin:0 0 2px!important;color:var(--sec-text)!important;font-size:.91rem!important;line-height:1.55;font-weight:900!important}
:where(html[data-hp-page="user-security"]) .phc-security-subtitle {margin:0!important;color:var(--sec-muted)!important;font-size:.67rem!important;line-height:1.6;font-weight:650}
:where(html[data-hp-page="user-security"]) .phc-security-body {padding:15px 18px 17px}

/* Dynamic linkedaccounts.tpl output */
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope {color:var(--sec-text-2)}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .card,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .panel,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .list-group,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .provider {border-color:var(--sec-border)!important;border-radius:12px!important;box-shadow:none!important}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .card,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .panel {margin-bottom:9px!important;background:#fff!important}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .card-body,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .panel-body {padding:11px 12px!important}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .list-group-item {padding:10px 11px!important;border-color:var(--sec-divider)!important;color:var(--sec-text-2)!important;background:#fff!important;font-size:.72rem!important}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .btn,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope button {min-height:34px;padding:0 10px!important;border-radius:9px!important;font-family:inherit!important;font-size:.65rem!important;font-weight:850!important;box-shadow:none!important}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .btn-primary,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .btn-success {color:#fff!important;border-color:var(--sec-blue)!important;background:var(--sec-gradient)!important}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .btn-default,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .btn-light,
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope .btn-secondary {color:var(--sec-muted)!important;border:1px solid var(--sec-border)!important;background:#fff!important}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-scope img {max-width:42px;height:auto}
:where(html[data-hp-page="user-security"]) .phc-linkedaccounts-separator {height:1px;margin:12px 0;background:var(--sec-divider)}

:where(html[data-hp-page="user-security"]) .phc-security-form {max-width:760px}
:where(html[data-hp-page="user-security"]) .phc-security-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
:where(html[data-hp-page="user-security"]) .phc-security-grid .phc-form-group--full {grid-column:1/-1}
:where(html[data-hp-page="user-security"]) .phc-form-group {margin:0 0 10px!important}
:where(html[data-hp-page="user-security"]) .phc-form-group label {display:block;margin:0 0 5px!important;color:var(--sec-muted)!important;font-size:.67rem!important;line-height:1.55;font-weight:850!important}
:where(html[data-hp-page="user-security"]) .phc-control-wrap {position:relative}
:where(html[data-hp-page="user-security"]) .phc-control-icon {position:absolute;top:50%;right:13px;z-index:2;transform:translateY(-50%);color:var(--sec-muted-2);font-size:.67rem;pointer-events:none}
:where(html[data-hp-page="user-security"]) .phc-security-page .form-control,
:where(html[data-hp-page="user-security"]) .phc-security-page .custom-select {width:100%;min-height:43px;padding:0 38px 0 10px!important;border:1px solid var(--sec-border)!important;border-radius:10px!important;outline:0!important;color:var(--sec-text)!important;background:#f8fafc!important;font-family:inherit!important;font-size:.72rem!important;box-shadow:none!important;transition:border-color var(--sec-transition),background var(--sec-transition),box-shadow var(--sec-transition)}
:where(html[data-hp-page="user-security"]) .phc-security-page select.form-control,
:where(html[data-hp-page="user-security"]) .phc-security-page .custom-select {padding-left:30px!important}
:where(html[data-hp-page="user-security"]) .phc-security-page .form-control:hover,
:where(html[data-hp-page="user-security"]) .phc-security-page .custom-select:hover {border-color:#cbd5e1!important;background:#fff!important}
:where(html[data-hp-page="user-security"]) .phc-security-page .form-control:focus,
:where(html[data-hp-page="user-security"]) .phc-security-page .custom-select:focus {border-color:var(--sec-blue)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(37,99,235,.07)!important}
:where(html[data-hp-page="user-security"]) .phc-control-wrap:focus-within .phc-control-icon {color:var(--sec-blue)}
:where(html[data-hp-page="user-security"]) .phc-security-actions {margin-top:4px;padding-top:13px;display:flex;align-items:center;gap:7px;border-top:1px solid var(--sec-divider)}
:where(html[data-hp-page="user-security"]) .phc-security-save,
:where(html[data-hp-page="user-security"]) .phc-security-reset {min-height:38px;padding:0 13px!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px!important;font-family:inherit!important;font-size:.69rem!important;line-height:1;font-weight:900!important;box-shadow:none!important}
:where(html[data-hp-page="user-security"]) .phc-security-save {min-width:145px;color:#fff!important;border:1px solid var(--sec-blue)!important;background:var(--sec-gradient)!important;box-shadow:0 8px 16px rgba(37,99,235,.14)!important}
:where(html[data-hp-page="user-security"]) .phc-security-reset {min-width:88px;color:var(--sec-muted)!important;border:1px solid var(--sec-border)!important;background:#fff!important}

:where(html[data-hp-page="user-security"]) .phc-twofa-status {margin-bottom:11px;padding:10px 11px;display:flex;align-items:center;gap:7px;border:1px solid;border-radius:11px;font-size:.72rem;line-height:1.65;font-weight:750}
:where(html[data-hp-page="user-security"]) .phc-twofa-status--enabled {color:#065f46;border-color:var(--sec-green-line);background:var(--sec-green-soft)}
:where(html[data-hp-page="user-security"]) .phc-twofa-status--disabled {color:#9a5b08;border-color:var(--sec-orange-line);background:var(--sec-orange-soft)}
:where(html[data-hp-page="user-security"]) .phc-twofa-status strong {font-weight:950!important}
:where(html[data-hp-page="user-security"]) .phc-security-card .alert {margin-bottom:11px!important;padding:10px 11px!important;border-radius:11px!important;font-size:.70rem!important;line-height:1.7}
:where(html[data-hp-page="user-security"]) .phc-twofa-actions {display:flex;align-items:center;flex-wrap:wrap;gap:7px}
:where(html[data-hp-page="user-security"]) .phc-twofa-btn {min-height:38px;padding:0 12px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;border:1px solid!important;border-radius:10px!important;font-family:inherit!important;font-size:.68rem!important;line-height:1;font-weight:900!important;text-decoration:none!important;box-shadow:none!important;transition:transform var(--sec-transition)}
:where(html[data-hp-page="user-security"]) .phc-twofa-btn--enable {color:var(--sec-green)!important;border-color:var(--sec-green-line)!important;background:var(--sec-green-soft)!important}
:where(html[data-hp-page="user-security"]) .phc-twofa-btn--disable {color:var(--sec-red)!important;border-color:var(--sec-red-line)!important;background:var(--sec-red-soft)!important}
:where(html[data-hp-page="user-security"]) .phc-twofa-btn:hover {transform:translateY(-1px)}
:where(html[data-hp-page="user-security"]) .phc-security-page .w-hidden {display:none!important}

@media(max-width:767.98px) {
    :where(html[data-hp-page="user-security"]) .phc-security-card {border-radius:19px}
    :where(html[data-hp-page="user-security"]) .phc-security-header {min-height:0;padding:14px}
    :where(html[data-hp-page="user-security"]) .phc-security-body {padding:13px}
    :where(html[data-hp-page="user-security"]) .phc-security-grid {grid-template-columns:1fr}
    :where(html[data-hp-page="user-security"]) .phc-security-grid .phc-form-group--full {grid-column:auto}
    :where(html[data-hp-page="user-security"]) .phc-security-actions {align-items:stretch;flex-direction:column}
    :where(html[data-hp-page="user-security"]) .phc-security-save,
:where(html[data-hp-page="user-security"]) .phc-security-reset {width:100%}
}
@media(max-width:480px) {
    :where(html[data-hp-page="user-security"]) .phc-security-intro,
:where(html[data-hp-page="user-security"]) .phc-security-header {align-items:flex-start}
    :where(html[data-hp-page="user-security"]) .phc-twofa-actions {align-items:stretch;flex-direction:column}
    :where(html[data-hp-page="user-security"]) .phc-twofa-btn {width:100%}
}
@media(prefers-reduced-motion:reduce) {:where(html[data-hp-page="user-security"]) .phc-security-page .form-control,
:where(html[data-hp-page="user-security"]) .phc-security-page .custom-select,
:where(html[data-hp-page="user-security"]) .phc-twofa-btn {transition:none!important}}

/* viewannouncement.tpl */
:root:where(html[data-hp-page="viewannouncement"]) {
    --ann-card:var(--hp-surface);
    --ann-soft:var(--hp-surface-soft);
    --ann-border:var(--hp-line);
    --ann-divider:#edf1f6;

    --ann-text:var(--hp-ink);
    --ann-text-2:var(--hp-ink-secondary);
    --ann-muted:var(--hp-muted);
    --ann-muted-2:#94a3b8;

    --ann-blue:var(--hp-primary);
    --ann-blue-dark:var(--hp-primary-hover);
    --ann-blue-light:#60a5fa;
    --ann-blue-soft:var(--hp-primary-soft);
    --ann-blue-line:#bfdbfe;
    --ann-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --ann-orange:#d97706;
    --ann-orange-soft:#fff7ed;
    --ann-orange-line:#fed7aa;

    --ann-radius-xl:24px;
    --ann-radius-lg:17px;
    --ann-radius-md:12px;

    --ann-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --ann-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --ann-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="viewannouncement"]) .phc-announcement-view,
:where(html[data-hp-page="viewannouncement"]) .phc-announcement-view * {
    box-sizing:border-box;
}

:where(html[data-hp-page="viewannouncement"]) .phc-announcement-view {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--ann-text-2);
}

/* =========================================================
   Main Card
   ========================================================= */
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-card {
    position:relative;
    overflow:hidden;
    margin-bottom:14px;

    border:1px solid var(--ann-border)!important;
    border-radius:var(--ann-radius-xl)!important;

    background:#fff!important;

    box-shadow:var(--ann-shadow-panel)!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--ann-gradient);
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-card:hover {
    box-shadow:var(--ann-shadow-panel)!important;
}

/* =========================================================
   Header
   ========================================================= */
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-header {
    position:relative;
    min-height:98px;
    padding:18px 20px!important;

    display:flex;
    align-items:flex-start;
    gap:12px;

    border-bottom:1px solid var(--ann-divider)!important;

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="viewannouncement"]) .soft-icon-wrap {
    position:relative;

    width:48px!important;
    height:48px!important;
    flex:0 0 48px;

    margin:0!important;
    float:none!important;

    display:flex!important;
    align-items:center;
    justify-content:center;

    border:1px solid var(--ann-orange-line);
    border-radius:13px!important;

    color:var(--ann-orange)!important;
    background:var(--ann-orange-soft)!important;

    font-size:.86rem!important;

    box-shadow:none!important;

    transition:
        transform var(--ann-transition),
        color var(--ann-transition),
        border-color var(--ann-transition),
        background var(--ann-transition);
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-card:hover .soft-icon-wrap {
    transform:none!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-head-content {
    min-width:0;
    flex:1;
}

:where(html[data-hp-page="viewannouncement"]) .soft-title {
    margin:0 0 8px!important;

    color:var(--ann-text)!important;

    font-size:1.05rem!important;
    line-height:1.75!important;
    font-weight:900!important;

    word-break:break-word;
}

:where(html[data-hp-page="viewannouncement"]) .soft-meta {
    min-height:29px;
    padding:0 9px!important;

    display:inline-flex!important;
    align-items:center;
    gap:5px!important;

    border:1px solid var(--ann-blue-line);
    border-radius:9px!important;

    color:var(--ann-blue)!important;
    background:var(--ann-blue-soft)!important;

    font-size:.66rem!important;
    line-height:1;
    font-weight:850!important;
}

/* =========================================================
   Body
   ========================================================= */
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body {
    padding:20px!important;

    color:var(--ann-text-2)!important;

    font-size:.85rem!important;
    line-height:2!important;

    overflow-wrap:anywhere;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body > :first-child {
    margin-top:0!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body > :last-child {
    margin-bottom:0!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body p {
    margin:0 0 13px;

    color:var(--ann-text-2)!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h1,
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h2,
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h3,
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h4,
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h5,
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h6 {
    margin-top:1.5em;
    margin-bottom:.65em;

    color:var(--ann-text)!important;

    line-height:1.7;
    font-weight:900!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h2 {
    font-size:1.08rem!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h3 {
    font-size:1rem!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body h4 {
    font-size:.94rem!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body a {
    color:var(--ann-blue)!important;
    font-weight:800;
    text-decoration:none!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body a:hover {
    text-decoration:underline!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body img {
    max-width:100%!important;
    height:auto!important;

    margin:14px auto!important;

    display:block;

    border:1px solid var(--ann-border);
    border-radius:13px!important;

    box-shadow:var(--ann-shadow-sm)!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body ul,
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body ol {
    margin:10px 0 14px;
    padding-right:22px;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body li {
    margin-bottom:5px;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body blockquote {
    margin:14px 0!important;
    padding:11px 14px!important;

    border:0!important;
    border-right:3px solid var(--ann-blue)!important;
    border-radius:10px!important;

    color:var(--ann-text-2)!important;
    background:var(--ann-blue-soft)!important;

    font-style:normal!important;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body pre {
    direction:ltr;
    text-align:left;

    max-width:100%;
    padding:13px 14px;

    overflow:auto;

    border:1px solid var(--ann-border);
    border-radius:11px;

    color:#e2e8f0;
    background:#0f172a;

    font-size:.74rem;
    line-height:1.8;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body code {
    direction:ltr;

    padding:2px 6px;

    border:1px solid var(--ann-divider);
    border-radius:6px;

    color:var(--ann-blue-dark);
    background:#f8fafc;

    font-size:.80em;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body pre code {
    padding:0;

    border:0;

    color:inherit;
    background:transparent;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body table {
    width:100%;
    margin:14px 0;

    border-collapse:separate;
    border-spacing:0;

    overflow:hidden;

    border:1px solid var(--ann-border);
    border-radius:11px;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body th,
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body td {
    padding:9px 10px;

    border-bottom:1px solid var(--ann-divider);

    font-size:.77rem;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body th {
    color:var(--ann-text);
    background:#f8fafc;
    font-weight:900;
}

:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body tr:last-child td {
    border-bottom:0;
}

/* =========================================================
   Back
   ========================================================= */
:where(html[data-hp-page="viewannouncement"]) .phc-announcement-actions {
    margin-top:2px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="viewannouncement"]) .soft-announcement-card {
        border-radius:19px!important;
    }

    :where(html[data-hp-page="viewannouncement"]) .soft-announcement-header {
        min-height:0;
        padding:15px!important;
    }

    :where(html[data-hp-page="viewannouncement"]) .soft-announcement-body {
        padding:16px 15px!important;

        font-size:.82rem!important;
    }

    :where(html[data-hp-page="viewannouncement"]) .soft-icon-wrap {
        width:43px!important;
        height:43px!important;
        flex-basis:43px;
    }

    :where(html[data-hp-page="viewannouncement"]) .soft-title {
        font-size:.98rem!important;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="viewannouncement"]) .soft-announcement-header {
        align-items:flex-start;
    }
}

@media print {
    :where(html[data-hp-page="viewannouncement"]) .phc-announcement-actions,
:where(html[data-hp-page="viewannouncement"]) .bg-footer,
:where(html[data-hp-page="viewannouncement"]) .top-button,
:where(html[data-hp-page="viewannouncement"]) .sidebar {
        display:none!important;
    }

    :where(html[data-hp-page="viewannouncement"]) .soft-announcement-card {
        border:0!important;
        box-shadow:none!important;
    }

    :where(html[data-hp-page="viewannouncement"]) .soft-announcement-header,
:where(html[data-hp-page="viewannouncement"]) .soft-announcement-body {
        padding-right:0!important;
        padding-left:0!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="viewannouncement"]) .soft-icon-wrap{
        transition:none!important;
    }
}

/* viewemail.tpl */
:root:where(html[data-hp-page="viewemail"]) {
    --em-card:var(--hp-surface);
    --em-soft:var(--hp-surface-soft);
    --em-border:var(--hp-line);
    --em-divider:#edf1f6;

    --em-text:var(--hp-ink);
    --em-text-2:var(--hp-ink-secondary);
    --em-muted:var(--hp-muted);
    --em-muted-2:#94a3b8;

    --em-blue:var(--hp-primary);
    --em-blue-dark:var(--hp-primary-hover);
    --em-blue-light:#60a5fa;
    --em-blue-soft:var(--hp-primary-soft);
    --em-blue-line:#bfdbfe;
    --em-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --em-radius-xl:24px;
    --em-radius-lg:17px;
    --em-radius-md:12px;

    --em-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --em-shadow-panel:0 20px 55px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);

    --em-transition:220ms cubic-bezier(.2,.8,.2,1);
}

html:where(html[data-hp-page="viewemail"]),
:where(html[data-hp-page="viewemail"]) body {
    min-height:100%;
}

:where(html[data-hp-page="viewemail"]) body#popup-backdrop {
    min-height:100vh;
    margin:0;
    padding:16px;

    display:flex;
    flex-direction:column;

    direction:rtl;
    text-align:right;

    color:var(--em-text-2);
    background:#f8fafc!important;
}

:where(html[data-hp-page="viewemail"]) body#popup-backdrop,
:where(html[data-hp-page="viewemail"]) body#popup-backdrop * {
    box-sizing:border-box;
}

/* =====================================================
   Main shell
   ===================================================== */
:where(html[data-hp-page="viewemail"]) .phc-email-popup {
    position:relative;
    width:100%;
    max-width:1180px;
    min-height:calc(100vh - 32px);
    margin:auto;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid var(--em-border);
    border-radius:var(--em-radius-xl);

    background:#fff;

    box-shadow:var(--em-shadow-panel);
}

:where(html[data-hp-page="viewemail"]) .phc-email-popup::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:4;

    background:var(--em-gradient);
}

/* =====================================================
   Header
   ===================================================== */
:where(html[data-hp-page="viewemail"]) .phc-email-header {
    padding:17px 19px 15px;

    border-bottom:1px solid var(--em-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="viewemail"]) .phc-email-heading {
    display:flex;
    align-items:flex-start;
    gap:11px;
}

:where(html[data-hp-page="viewemail"]) .phc-email-icon {
    position:relative;

    width:44px;
    height:44px;
    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--em-blue-line);
    border-radius:12px;

    color:#fff;
    background:var(--em-gradient);

    box-shadow:0 9px 20px rgba(37,99,235,.16);

    font-size:.78rem;
}

:where(html[data-hp-page="viewemail"]) .phc-email-subject {
    min-width:0;
    flex:1;

    margin:0!important;

    color:var(--em-text)!important;

    font-size:.98rem!important;
    line-height:1.7;
    font-weight:900!important;

    word-break:break-word;
}

/* =====================================================
   Attachments
   ===================================================== */
:where(html[data-hp-page="viewemail"]) .phc-attachments {
    margin-top:12px;
    padding-top:11px;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;

    border-top:1px dashed var(--em-divider);
}

:where(html[data-hp-page="viewemail"]) .phc-attachments-label {
    min-height:28px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    color:var(--em-muted);

    font-size:.66rem;
    line-height:1;
    font-weight:850;
}

:where(html[data-hp-page="viewemail"]) .phc-attachment-chip {
    min-height:30px;
    max-width:310px;
    padding:0 9px;

    display:inline-flex;
    align-items:center;
    gap:6px;

    border:1px solid var(--em-border);
    border-radius:9px;

    color:var(--em-text-2);
    background:#fff;

    box-shadow:0 3px 9px rgba(15,23,42,.025);

    font-size:.66rem;
    line-height:1;
    font-weight:750;
}

:where(html[data-hp-page="viewemail"]) .phc-attachment-chip i {
    color:var(--em-blue);
}

:where(html[data-hp-page="viewemail"]) .phc-attachment-name {
    max-width:260px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* =====================================================
   Message area
   ===================================================== */
:where(html[data-hp-page="viewemail"]) .phc-email-body {
    min-height:0;
    padding:14px;

    display:flex;
    flex:1;

    background:#fff;
}

:where(html[data-hp-page="viewemail"]) .email-iframe-container {
    width:100%;
    min-height:0;

    display:flex;
    flex:1;

    overflow:hidden;

    border:1px solid var(--em-border);
    border-radius:14px;

    background:#fff;

    box-shadow:inset 0 1px 3px rgba(15,23,42,.025);
}

:where(html[data-hp-page="viewemail"]) .email-iframe-container iframe {
    width:100%!important;
    min-height:520px;
    height:auto!important;
    flex:1;

    display:block;

    border:0!important;
    border-radius:0!important;

    background:#fff!important;

    box-shadow:none!important;
}

/* =====================================================
   Footer
   ===================================================== */
:where(html[data-hp-page="viewemail"]) .phc-email-footer {
    padding:12px 14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-top:1px solid var(--em-divider);

    background:#fbfdff;
}

:where(html[data-hp-page="viewemail"]) .phc-email-close {
    min-width:132px;
    min-height:38px;
    padding:0 12px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--em-border)!important;
    border-radius:10px!important;

    color:var(--em-muted)!important;
    background:#fff!important;

    font-size:.69rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:none!important;

    transition:
        transform var(--em-transition),
        color var(--em-transition),
        border-color var(--em-transition),
        background var(--em-transition);
}

:where(html[data-hp-page="viewemail"]) .phc-email-close:hover {
    transform:translateY(-1px);

    color:var(--em-blue)!important;
    border-color:var(--em-blue-line)!important;
    background:var(--em-blue-soft)!important;
}

/* =====================================================
   Responsive
   ===================================================== */
@media(max-width:767.98px) {
    :where(html[data-hp-page="viewemail"]) body#popup-backdrop {
        padding:8px;
    }

    :where(html[data-hp-page="viewemail"]) .phc-email-popup {
        min-height:calc(100vh - 16px);
        border-radius:18px;
    }

    :where(html[data-hp-page="viewemail"]) .phc-email-header {
        padding:14px;
    }

    :where(html[data-hp-page="viewemail"]) .phc-email-body {
        padding:9px;
    }

    :where(html[data-hp-page="viewemail"]) .email-iframe-container iframe {
        min-height:460px;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="viewemail"]) .phc-email-heading {
        align-items:flex-start;
    }

    :where(html[data-hp-page="viewemail"]) .phc-email-icon {
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    :where(html[data-hp-page="viewemail"]) .phc-email-subject {
        font-size:.90rem!important;
    }

    :where(html[data-hp-page="viewemail"]) .phc-attachments {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="viewemail"]) .phc-attachment-chip {
        width:100%;
        max-width:none;
    }

    :where(html[data-hp-page="viewemail"]) .phc-attachment-name {
        max-width:calc(100vw - 90px);
    }

    :where(html[data-hp-page="viewemail"]) .phc-email-close {
        width:100%;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="viewemail"]) .phc-email-close {
        transition:none!important;
    }
}

/* viewinvoice.tpl */
:root:where(html[data-hp-page="viewinvoice"]) {
        --inv-page: var(--hp-page);
        --inv-surface: var(--hp-surface);
        --inv-surface-2: var(--hp-surface-soft);
        --inv-line: var(--hp-line);
        --inv-line-soft: #edf1f6;

        --inv-text: var(--hp-ink);
        --inv-text-2: var(--hp-ink-secondary);
        --inv-muted: var(--hp-muted);
        --inv-muted-2: #94a3b8;

        --inv-blue: var(--hp-primary);
        --inv-blue-dark: var(--hp-primary-hover);
        --inv-blue-soft: var(--hp-primary-soft);
        --inv-blue-line: #cfe0ff;
        --inv-blue-gradient: linear-gradient(135deg, #60a5fa 0%, #2563eb 52%, #1d4ed8 100%);

        --inv-green: #059669;
        --inv-green-soft: #ecfdf5;
        --inv-green-line: #a7f3d0;

        --inv-amber: #d97706;
        --inv-amber-soft: #fffbeb;
        --inv-amber-line: #fde68a;

        --inv-red: #dc2626;
        --inv-red-soft: #fef2f2;
        --inv-red-line: #fecaca;

        --inv-radius-xl: 22px;
        --inv-radius-lg: 16px;
        --inv-radius-md: 12px;

        --inv-shadow-sm: 0 6px 20px rgba(15,23,42,.045), 0 2px 7px rgba(15,23,42,.025);
        --inv-shadow-md: 0 18px 48px rgba(15,23,42,.08), 0 4px 14px rgba(15,23,42,.035);
        --inv-transition: 220ms cubic-bezier(.2,.8,.2,1);

        /* compatibility with existing inline references */
        --soft-bg: var(--inv-surface);
        --soft-border: var(--inv-line);
        --soft-shadow: var(--inv-shadow-sm);
        --soft-shadow-hover: var(--inv-shadow-md);
        --soft-radius-lg: var(--inv-radius-xl);
        --soft-radius-md: var(--inv-radius-lg);
        --soft-radius-pill: 999px;
        --soft-text-main: var(--inv-text);
        --soft-text-muted: var(--inv-muted);
        --soft-primary: var(--inv-blue);
        --soft-primary-bg: var(--inv-blue-soft);
        --soft-success: var(--inv-green);
        --soft-success-bg: var(--inv-green-soft);
        --soft-warning: var(--inv-amber);
        --soft-danger: var(--inv-red);
        --soft-danger-bg: var(--inv-red-soft);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper,
:where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper * {
        box-sizing: border-box;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper {
        direction: rtl;
        text-align: right;
        color: var(--inv-text);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    /* =========================================================
       GENERAL CARDS
       ========================================================= */
    :where(html[data-hp-page="viewinvoice"]) .soft-card {
        position: relative;
        overflow: hidden;
        margin-bottom: 18px;
        padding: 20px;

        border: 1px solid var(--inv-line);
        border-radius: var(--inv-radius-xl);
        background: var(--inv-surface);
        box-shadow: var(--inv-shadow-sm);

        transition:
            border-color var(--inv-transition),
            box-shadow var(--inv-transition),
            transform var(--inv-transition);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-card:hover {
        border-color: #d6dfeb;
        box-shadow: var(--inv-shadow-md);
    }

    /* =========================================================
       INVOICE SUMMARY — NEW LIGHT FINANCE DESIGN
       ========================================================= */
    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type {
        padding: 0;
        overflow: hidden;
        border: 1px solid #d9e2ee;
        border-radius: 24px;
        background: #ffffff;
        box-shadow: 0 20px 55px rgba(15,23,42,.085), 0 4px 14px rgba(15,23,42,.03);
    }

    /* accent line */
    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 5px;
        z-index: 4;
        background: var(--inv-blue-gradient);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .row {
        margin: 0;
        padding: 24px 26px;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 250px;
        gap: 18px 22px;
        align-items: stretch !important;

        color: var(--inv-text);
        background:
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .row > .col-md-6 {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
        position: relative;
        z-index: 2;
    }

    /* Main invoice information */
    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .row > .col-md-6:first-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type h3 {
        margin: 0 0 16px !important;
        display: flex;
        align-items: center;
        gap: 11px;

        color: var(--inv-text) !important;
        font-size: 1.48rem !important;
        line-height: 1.5;
        font-weight: 950 !important;
        letter-spacing: -.015em;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type h3 i {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border: 1px solid #bfdbfe;
        border-radius: 14px;
        color: #ffffff !important;
        background: var(--inv-blue-gradient);
        box-shadow: 0 10px 23px rgba(37,99,235,.20);

        font-size: 1rem;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type .text-muted {
        margin: 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 9px;

        color: var(--inv-muted) !important;
        font-size: .85rem;
        line-height: 1.6;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type .text-muted span {
        min-height: 40px;
        padding: 0 12px;

        display: inline-flex;
        align-items: center;
        gap: 7px;

        border: 1px solid var(--inv-line);
        border-radius: 11px;
        color: var(--inv-text-2);
        background: #f8fafc;

        font-weight: 700;
        white-space: nowrap;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type .text-muted i {
        color: var(--inv-blue) !important;
        font-size: .8rem;
    }

    /* Status panel */
    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .row > .col-md-6:last-child {
        width: 250px !important;
        max-width: 250px !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        padding: 15px 16px !important;

        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;

        border: 1px solid var(--inv-line);
        border-radius: 17px;
        background:
            linear-gradient(145deg, #f8fafc 0%, #f4f7fb 100%);
        box-shadow: inset 0 1px 0 #ffffff;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-badge {
        min-height: 38px;
        padding: 0 13px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        border: 1px solid transparent;
        border-radius: 10px;

        font-size: .80rem;
        font-weight: 900;
        line-height: 1;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-badge i {
        font-size: .82rem;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-badge.unpaid {
        color: var(--inv-red);
        background: var(--inv-red-soft);
        border-color: var(--inv-red-line);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-badge.paid {
        color: var(--inv-green);
        background: var(--inv-green-soft);
        border-color: var(--inv-green-line);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-badge.draft,
:where(html[data-hp-page="viewinvoice"]) .soft-badge.collections,
:where(html[data-hp-page="viewinvoice"]) .soft-badge.refunded,
:where(html[data-hp-page="viewinvoice"]) .soft-badge.cancelled {
        color: #475569;
        background: #f8fafc;
        border-color: #dbe2ea;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-badge.pending {
        color: var(--inv-amber);
        background: var(--inv-amber-soft);
        border-color: var(--inv-amber-line);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .row .text-success {
        margin: 0 !important;
        color: var(--inv-green) !important;
        font-size: .80rem !important;
        font-weight: 800 !important;
        line-height: 1.6;
    }

    /* Payment gateway area */
    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .border-top {
        margin: 0 !important;
        padding: 20px 25px 23px !important;
        border-top: 1px solid var(--inv-line-soft) !important;
        background: #ffffff;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .border-top h6 {
        margin-bottom: 14px !important;
        color: var(--inv-text) !important;
        font-size: .96rem;
        font-weight: 900 !important;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .border-top h6 i {
        margin-left: 6px;
        color: var(--inv-blue);
    }

    /* =========================================================
       BILL TO / PAY TO
       ========================================================= */
    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .row.wow.fadeInUp {
        margin-right: -8px;
        margin-left: -8px;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .row.wow.fadeInUp > [class*="col-"] {
        padding-right: 8px;
        padding-left: 8px;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-info-box {
        position: relative;
        min-height: 188px;
        height: 100%;
        overflow: hidden;
        padding: 18px 19px;

        border: 1px solid var(--inv-line);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: var(--inv-shadow-sm);

        transition:
            transform var(--inv-transition),
            border-color var(--inv-transition),
            box-shadow var(--inv-transition);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-info-box::before {
        content: "";
        position: absolute;
        right: 0;
        top: 17px;
        bottom: 17px;
        width: 3px;
        border-radius: 3px 0 0 3px;
        background: var(--inv-blue-gradient);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-info-box:hover {
        transform: translateY(-2px);
        border-color: #c9d9ee;
        box-shadow: 0 14px 32px rgba(15,23,42,.07);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-info-title {
        margin-bottom: 13px;
        padding-bottom: 11px;

        display: flex;
        align-items: center;
        gap: 8px;

        border-bottom: 1px solid var(--inv-line-soft);
        color: var(--inv-text);

        font-size: .98rem;
        font-weight: 900;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-info-title i {
        width: 34px;
        height: 34px;
        margin-left: 0 !important;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border: 1px solid #dbeafe;
        border-radius: 10px;
        color: var(--inv-blue) !important;
        background: var(--inv-blue-soft);

        font-size: .78rem;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-info-box p {
        margin-bottom: 6px;
        color: var(--inv-muted);
        font-size: .84rem;
        line-height: 1.7;
        word-break: break-word;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-info-box .text-dark {
        color: var(--inv-text) !important;
    }

    /* =========================================================
       SECTION CARDS
       ========================================================= */
    :where(html[data-hp-page="viewinvoice"]) .soft-card:not(:first-of-type) {
        padding: 18px;
        border-radius: 20px;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-card > h5 {
        margin: 0 0 15px !important;
        padding-bottom: 12px;

        display: flex;
        align-items: center;
        gap: 9px;

        border-bottom: 1px solid var(--inv-line-soft);
        color: var(--inv-text) !important;

        font-size: 1rem;
        line-height: 1.55;
        font-weight: 900 !important;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-card > h5 i {
        width: 34px;
        height: 34px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border: 1px solid #dbeafe;
        border-radius: 10px;
        color: var(--inv-blue) !important;
        background: var(--inv-blue-soft);

        font-size: .76rem;
    }

    /* =========================================================
       TABLES — FINANCE STYLE
       ========================================================= */
    :where(html[data-hp-page="viewinvoice"]) .soft-card .table-responsive {
        overflow-x: auto;
        border: 1px solid var(--inv-line);
        border-radius: 15px;
        background: #ffffff;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-table {
        width: 100%;
        margin: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-table th {
        padding: 12px 15px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--inv-line) !important;

        color: var(--inv-muted) !important;
        background: #f8fafc !important;

        font-size: .79rem;
        font-weight: 850;
        white-space: nowrap;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-table th:first-child,
:where(html[data-hp-page="viewinvoice"]) .soft-table th:last-child {
        border-radius: 0 !important;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-table td {
        padding: 13px 15px !important;
        vertical-align: middle;

        border: 0 !important;
        border-bottom: 1px solid var(--inv-line-soft) !important;

        color: var(--inv-text-2);
        background: #ffffff;

        font-size: .87rem;
        line-height: 1.7;

        transition: background-color var(--inv-transition);
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-table tbody tr:hover td {
        background: #fbfdff;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-table tr:last-child td {
        border-bottom: 0 !important;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-row-highlight td {
        color: #b45309 !important;
        background: #fffaf0 !important;
        font-weight: 850;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-row-total td {
        color: #047857 !important;
        background: #ecfdf5 !important;
        font-size: .96rem;
        font-weight: 900;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-table .text-success {
        color: var(--inv-green) !important;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-table .text-danger {
        color: var(--inv-red) !important;
    }

    /* =========================================================
       GATEWAYS
       ========================================================= */
    :where(html[data-hp-page="viewinvoice"]) .premium-gateway-wrapper {
        display: flex;
        flex-direction: column;
        gap: 11px;
        margin-top: 13px;
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
        align-items: stretch;
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card {
        min-width: 195px;
        min-height: 54px;
        padding: 0 14px;

        display: flex;
        align-items: center;

        border: 1px solid var(--inv-line);
        border-radius: 12px;
        background: #f8fafc;

        cursor: pointer;
        order: 2;

        transition:
            transform var(--inv-transition),
            border-color var(--inv-transition),
            background var(--inv-transition),
            box-shadow var(--inv-transition);
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card:hover {
        transform: translateY(-1px);
        border-color: #bfd5f7;
        background: #ffffff;
        box-shadow: 0 8px 18px rgba(37,99,235,.055);
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card.active-gateway {
        order: 1;
        border-color: #8db8f9;
        background: var(--inv-blue-soft);
        box-shadow: inset 0 0 0 1px rgba(37,99,235,.035);
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-name {
        flex-grow: 1;
        margin-right: 10px;
        color: var(--inv-text-2);
        font-size: .84rem;
        font-weight: 850;
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card.active-gateway .pgw-name {
        color: var(--inv-blue);
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-radio {
        width: 18px;
        height: 18px;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 2px solid #cbd5e1;
        border-radius: 50%;
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card.active-gateway .pgw-radio {
        border-color: var(--inv-blue);
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card.active-gateway .pgw-radio::after {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--inv-blue);
    }

    :where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper {
        order: 3;
    }

    :where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper input,
:where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper button,
:where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper .btn {
        min-width: 195px;
        min-height: 54px;
        height: 54px;
        padding: 0 18px !important;

        border: 0 !important;
        border-radius: 12px !important;

        color: #ffffff !important;
        background: linear-gradient(135deg, #34d399, #059669) !important;
        box-shadow: 0 10px 22px -12px rgba(5,150,105,.88);

        font-size: .84rem;
        font-weight: 900;

        cursor: pointer;
        transition: transform var(--inv-transition), box-shadow var(--inv-transition);
    }

    :where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper input:hover,
:where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper button:hover,
:where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 15px 26px -12px rgba(5,150,105,.94);
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-spinner {
        width: 20px;
        height: 20px;
        border: 2.5px solid rgba(37, 99, 235, 0.2);
        border-top-color: var(--inv-blue);
        border-radius: 50%;
        animation: pgw-spin 0.8s linear infinite;
        display: none;
    }

    @keyframes pgw-spin {
        to { transform: rotate(360deg); }
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card.is-loading {
        pointer-events: none;
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card.is-loading .pgw-radio {
        display: none;
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-card.is-loading .pgw-spinner {
        display: block;
    }

    :where(html[data-hp-page="viewinvoice"]) .pgw-container-loading .pgw-card:not(.is-loading) {
        opacity: .5;
        pointer-events: none;
    }

    /* =========================================================
       CREDIT FORM
       ========================================================= */
    :where(html[data-hp-page="viewinvoice"]) .soft-input {
        min-height: 48px;
        padding: 0 15px !important;

        border: 1px solid var(--inv-line) !important;
        border-radius: 0 11px 11px 0 !important;

        color: var(--inv-text) !important;
        background: #f8fafc !important;
        box-shadow: none !important;

        font-size: .86rem;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-input:focus {
        outline: 0;
        background: #ffffff !important;
        border-color: var(--inv-blue) !important;
        box-shadow: 0 0 0 4px rgba(37,99,235,.08) !important;
    }

    :where(html[data-hp-page="viewinvoice"]) .soft-input-btn {
        min-height: 48px !important;
        border-radius: 11px 0 0 11px !important;
    }

    /* =========================================================
       ACTION BUTTONS
       ========================================================= */

    :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .d-flex.flex-wrap.justify-content-center {
        gap: 10px;
        margin-top: 22px !important;
        margin-bottom: 10px !important;
    }

    /* Notes */
    :where(html[data-hp-page="viewinvoice"]) .soft-card .bg-light.rounded {
        padding: 15px !important;

        border: 1px solid var(--inv-line-soft);
        border-radius: 12px !important;

        color: var(--inv-muted) !important;
        background: #f8fafc !important;

        font-size: .86rem;
        line-height: 1.8;
    }

    /* =========================================================
       RESPONSIVE
       ========================================================= */
    @media (max-width: 991.98px) {
        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .row {
            grid-template-columns: 1fr;
            padding: 20px !important;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .row > .col-md-6:last-child {
            width: 100% !important;
            max-width: 100% !important;
            margin-right: 0 !important;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-info-box {
            min-height: 0;
        }
    }

    @media (max-width: 767.98px) {
        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type > .row {
            padding: 17px !important;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type h3 {
            font-size: 1.30rem !important;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type .text-muted {
            font-size: .79rem;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type .text-muted span {
            width: 100%;
            justify-content: flex-start;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .row.wow.fadeInUp {
            margin-right: -6px;
            margin-left: -6px;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .row.wow.fadeInUp > [class*="col-"] {
            padding-right: 6px;
            padding-left: 6px;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-card,
:where(html[data-hp-page="viewinvoice"]) .soft-card:not(:first-of-type) {
            padding: 15px;
            border-radius: 17px;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-info-box {
            padding: 16px;
        }

        :where(html[data-hp-page="viewinvoice"]) .pgw-grid {
            flex-direction: column;
        }

        :where(html[data-hp-page="viewinvoice"]) .pgw-card,
:where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper,
:where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper input,
:where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper button,
:where(html[data-hp-page="viewinvoice"]) #pay-button-wrapper .btn {
            width: 100%;
            min-width: 0;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-table {
            min-width: 580px;
        }
    }

    @media (max-width: 575.98px) {
        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .soft-card:first-of-type h3 {
            font-size: 1.18rem !important;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-info-title,
:where(html[data-hp-page="viewinvoice"]) .soft-card > h5 {
            font-size: .94rem;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-info-box p,
:where(html[data-hp-page="viewinvoice"]) .soft-table td {
            font-size: .80rem;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-table th {
            font-size: .74rem;
        }

        :where(html[data-hp-page="viewinvoice"]) .soft-invoice-wrapper > .d-flex.flex-wrap.justify-content-center {
            flex-direction: column;
        }
    }

/* ========================================================
       استایل‌های فاکتور رسمی دارایی (فقط برای حالت چاپ)
       ======================================================== */
    :where(html[data-hp-page="viewinvoice"]) #official-tax-invoice-view {
        display: none; /* در حالت عادی سایت مخفی است */
    }

    :where(html[data-hp-page="viewinvoice"]) #official-tax-invoice-view {
        direction: rtl; text-align: right; background: #fff; color: #000;
        font-family: Tahoma, Arial, sans-serif; padding: 20px; width: 100%;
    }
    :where(html[data-hp-page="viewinvoice"]) .official-header { text-align: center; margin-bottom: 20px; border-bottom: 2px solid #000; padding-bottom: 10px; }
    :where(html[data-hp-page="viewinvoice"]) .official-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 0.85rem; }
    :where(html[data-hp-page="viewinvoice"]) .official-table th,
:where(html[data-hp-page="viewinvoice"]) .official-table td { border: 1px solid #000; padding: 8px; vertical-align: middle; }
    :where(html[data-hp-page="viewinvoice"]) .official-table th { background-color: #f2f2f2; text-align: center; font-weight: bold; }
    :where(html[data-hp-page="viewinvoice"]) .section-title { background-color: #e0e0e0; font-weight: bold; text-align: center; padding: 5px; border: 1px solid #000; border-bottom: none; }
    :where(html[data-hp-page="viewinvoice"]) .official-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    :where(html[data-hp-page="viewinvoice"]) .official-info-grid > div { border: 1px solid #000; padding: 10px; }
    :where(html[data-hp-page="viewinvoice"]) .official-info-grid > div:first-child { border-left: none; }

    /* تنظیمات مخصوص پرینتر */
    @media print {
        :where(html[data-hp-page="viewinvoice"]) body * { visibility: hidden; }
        :where(html[data-hp-page="viewinvoice"]) #official-tax-invoice-view,
:where(html[data-hp-page="viewinvoice"]) #official-tax-invoice-view * { visibility: visible; }
        :where(html[data-hp-page="viewinvoice"]) #official-tax-invoice-view { display: block !important; position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; }
        :where(html[data-hp-page="viewinvoice"]) #beautiful-invoice-view { display: none !important; }
        :where(html[data-hp-page="viewinvoice"]) .no-print { display: none !important; }
    }

/* viewquote.tpl */
:root:where(html[data-hp-page="viewquote"]) {
    --qt-card:var(--hp-surface);
    --qt-soft:var(--hp-surface-soft);
    --qt-border:var(--hp-line);
    --qt-divider:#edf1f6;

    --qt-text:var(--hp-ink);
    --qt-text-2:var(--hp-ink-secondary);
    --qt-muted:var(--hp-muted);
    --qt-muted-2:#94a3b8;

    --qt-blue:var(--hp-primary);
    --qt-blue-dark:var(--hp-primary-hover);
    --qt-blue-light:#60a5fa;
    --qt-blue-soft:var(--hp-primary-soft);
    --qt-blue-line:#bfdbfe;
    --qt-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --qt-green:#059669;
    --qt-green-soft:#ecfdf5;
    --qt-green-line:#a7f3d0;

    --qt-orange:#d97706;
    --qt-orange-soft:#fff7ed;
    --qt-orange-line:#fed7aa;

    --qt-red:#dc2626;
    --qt-red-soft:#fef2f2;
    --qt-red-line:#fecaca;

    --qt-slate:#475569;
    --qt-slate-soft:#f1f5f9;
    --qt-slate-line:#cbd5e1;

    --qt-radius-xl:24px;
    --qt-radius-lg:17px;
    --qt-radius-md:12px;

    --qt-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --qt-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --qt-transition:220ms cubic-bezier(.2,.8,.2,1);
}

html:where(html[data-hp-page="viewquote"]),
:where(html[data-hp-page="viewquote"]) body {
    min-height:100%;
}

:where(html[data-hp-page="viewquote"]) body {
    margin:0;
    padding:18px 0 26px;

    direction:rtl;
    text-align:right;
    font-family:inherit;

    color:var(--qt-text-2)!important;
    background:#f8fafc!important;
}

:where(html[data-hp-page="viewquote"]) body,
:where(html[data-hp-page="viewquote"]) body * {
    box-sizing:border-box;
}

:where(html[data-hp-page="viewquote"]) .invoice-container {
    width:calc(100% - 28px)!important;
    max-width:1120px!important;
    margin:0 auto!important;
    padding:0!important;
}

/* =====================================================
   Main quote shell
   ===================================================== */
:where(html[data-hp-page="viewquote"]) .phc-quote-shell {
    position:relative;
    overflow:hidden;

    border:1px solid var(--qt-border);
    border-radius:var(--qt-radius-xl);

    background:#fff;

    box-shadow:var(--qt-shadow-panel);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-shell::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--qt-gradient);
}

/* =====================================================
   Top header
   ===================================================== */
:where(html[data-hp-page="viewquote"]) .phc-quote-header {
    padding:20px 22px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;

    border-bottom:1px solid var(--qt-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-brand {
    min-width:0;

    display:flex;
    align-items:flex-start;
    gap:13px;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-brand-icon {
    position:relative;

    width:50px;
    height:50px;
    flex:0 0 50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--qt-blue-line);
    border-radius:14px;

    color:#fff;
    background:var(--qt-gradient);

    box-shadow:0 10px 22px rgba(37,99,235,.17);

    font-size:.88rem;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-logo {
    max-width:220px;
    max-height:62px;
    margin-bottom:8px;

    display:block;
    object-fit:contain;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-company {
    margin:0 0 5px!important;

    color:var(--qt-text)!important;

    font-size:1.02rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-number {
    margin:0!important;

    color:var(--qt-muted)!important;

    font-size:.76rem!important;
    line-height:1.5;
    font-weight:800!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-number strong {
    color:var(--qt-text)!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-state {
    min-width:210px;

    display:flex;
    align-items:flex-end;
    flex-direction:column;
    gap:8px;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-status {
    min-height:31px;
    padding:0 10px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid;
    border-radius:9px;

    font-size:.67rem;
    line-height:1;
    font-weight:950;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-status--delivered {
    color:var(--qt-blue);
    border-color:var(--qt-blue-line);
    background:var(--qt-blue-soft);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-status--accepted {
    color:var(--qt-green);
    border-color:var(--qt-green-line);
    background:var(--qt-green-soft);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-status--hold {
    color:var(--qt-orange);
    border-color:var(--qt-orange-line);
    background:var(--qt-orange-soft);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-status--lost,
:where(html[data-hp-page="viewquote"]) .phc-quote-status--dead {
    color:var(--qt-red);
    border-color:var(--qt-red-line);
    background:var(--qt-red-soft);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-accept {
    min-height:38px;
    padding:0 12px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;

    border:1px solid var(--qt-green)!important;
    border-radius:10px!important;

    color:#fff!important;
    background:linear-gradient(135deg,#10b981,#059669)!important;

    font-family:inherit!important;
    font-size:.69rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:0 8px 16px rgba(5,150,105,.14)!important;

    transition:
        transform var(--qt-transition),
        box-shadow var(--qt-transition);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-accept:hover {
    transform:translateY(-1px);
    box-shadow:0 11px 20px rgba(5,150,105,.19)!important;
}

/* =====================================================
   Content
   ===================================================== */
:where(html[data-hp-page="viewquote"]) .phc-quote-content {
    padding:18px 20px 20px;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-content .alert,
:where(html[data-hp-page="viewquote"]) .phc-quote-content .panel,
:where(html[data-hp-page="viewquote"]) .phc-quote-content .card {
    border-radius:13px!important;
}

/* Panels from WHMCS */
:where(html[data-hp-page="viewquote"]) .phc-quote-content .panel {
    overflow:hidden;

    border:1px solid var(--qt-border)!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-content .panel-heading {
    padding:10px 12px!important;

    border-bottom:1px solid var(--qt-divider)!important;

    background:#f8fafc!important;

    color:var(--qt-text)!important;

    font-size:.75rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-content .panel-body {
    padding:12px!important;

    color:var(--qt-text-2)!important;
    background:#fff!important;

    font-size:.74rem!important;
    line-height:1.75!important;
}

/* =====================================================
   Party / dates grid
   ===================================================== */
:where(html[data-hp-page="viewquote"]) .phc-quote-info-grid {
    margin-bottom:14px;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-info-card {
    min-height:118px;
    padding:12px 13px;

    border:1px solid var(--qt-border);
    border-radius:13px;

    background:linear-gradient(145deg,#fff 0%,#fbfdff 100%);

    box-shadow:var(--qt-shadow-sm);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-info-head {
    margin-bottom:7px;

    display:flex;
    align-items:center;
    gap:7px;

    color:var(--qt-muted);

    font-size:.66rem;
    line-height:1.4;
    font-weight:900;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-info-icon {
    width:30px;
    height:30px;
    flex:0 0 30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--qt-blue-line);
    border-radius:9px;

    color:var(--qt-blue);
    background:var(--qt-blue-soft);

    font-size:.60rem;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-info-card address {
    margin:0!important;

    color:var(--qt-text-2)!important;

    font-size:.72rem!important;
    line-height:1.78!important;
    font-style:normal!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-info-card address strong {
    color:var(--qt-text)!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-dates {
    margin-bottom:14px;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

:where(html[data-hp-page="viewquote"]) .phc-date-card {
    min-height:72px;
    padding:10px 12px;

    display:flex;
    align-items:center;
    gap:9px;

    border:1px solid var(--qt-border);
    border-radius:12px;

    background:#fff;
}

:where(html[data-hp-page="viewquote"]) .phc-date-icon {
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--qt-blue-line);
    border-radius:10px;

    color:var(--qt-blue);
    background:var(--qt-blue-soft);

    font-size:.66rem;
}

:where(html[data-hp-page="viewquote"]) .phc-date-label {
    display:block;
    margin-bottom:2px;

    color:var(--qt-muted);

    font-size:.63rem;
    line-height:1.4;
    font-weight:800;
}

:where(html[data-hp-page="viewquote"]) .phc-date-value {
    color:var(--qt-text);

    font-size:.74rem;
    line-height:1.5;
    font-weight:900;
}

/* =====================================================
   Proposal / notes spacing
   ===================================================== */
:where(html[data-hp-page="viewquote"]) .phc-proposal-wrap,
:where(html[data-hp-page="viewquote"]) .phc-notes-wrap {
    margin-bottom:14px;
}

/* =====================================================
   Items / totals
   ===================================================== */
:where(html[data-hp-page="viewquote"]) .phc-quote-items {
    margin-bottom:14px;
    overflow:hidden;

    border:1px solid var(--qt-border);
    border-radius:15px;

    background:#fff;

    box-shadow:var(--qt-shadow-sm);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-items-head {
    padding:11px 14px;

    display:flex;
    align-items:center;
    gap:8px;

    border-bottom:1px solid var(--qt-divider);

    background:#f8fafc;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-items-head-icon {
    width:32px;
    height:32px;
    flex:0 0 32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--qt-blue-line);
    border-radius:9px;

    color:var(--qt-blue);
    background:var(--qt-blue-soft);

    font-size:.64rem;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-items-head h3 {
    margin:0!important;

    color:var(--qt-text)!important;

    font-size:.80rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-table-wrap {
    overflow-x:auto;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-table {
    width:100%;
    margin:0!important;

    border-collapse:collapse!important;

    background:#fff;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-table thead td {
    padding:10px 12px!important;

    border-bottom:1px solid var(--qt-divider)!important;

    color:var(--qt-muted-2)!important;
    background:#fff!important;

    font-size:.65rem!important;
    line-height:1.4;
    font-weight:900!important;
    white-space:nowrap;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-table tbody td {
    padding:10px 12px!important;

    border-top:0!important;
    border-bottom:1px solid var(--qt-divider)!important;

    color:var(--qt-text-2)!important;
    background:#fff!important;

    font-size:.72rem!important;
    line-height:1.65;

    vertical-align:middle;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-table tbody tr:last-child td {
    border-bottom:0!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-table .phc-total-label {
    color:var(--qt-muted)!important;

    font-weight:850!important;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-table .phc-total-value {
    color:var(--qt-text)!important;

    font-weight:900!important;
    font-variant-numeric:tabular-nums;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-table .phc-grand-total td {
    padding-top:12px!important;
    padding-bottom:12px!important;

    border-top:1px solid var(--qt-blue-line)!important;

    color:var(--qt-blue)!important;
    background:linear-gradient(135deg,#fff 0%,var(--qt-blue-soft) 160%)!important;

    font-size:.82rem!important;
    font-weight:950!important;
}

/* =====================================================
   Tax note + actions
   ===================================================== */
:where(html[data-hp-page="viewquote"]) .phc-quote-taxnote {
    margin:0 0 12px!important;

    color:var(--qt-muted)!important;

    font-size:.66rem!important;
    line-height:1.6;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-action-group {
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
}

:where(html[data-hp-page="viewquote"]) .phc-quote-action-btn {
    min-height:36px;
    padding:0 11px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid var(--qt-border)!important;
    border-radius:9px!important;

    color:var(--qt-muted)!important;
    background:#fff!important;

    font-family:inherit!important;
    font-size:.67rem!important;
    line-height:1;
    font-weight:850!important;

    text-decoration:none!important;

    box-shadow:none!important;

    transition:
        transform var(--qt-transition),
        color var(--qt-transition),
        border-color var(--qt-transition),
        background var(--qt-transition);
}

:where(html[data-hp-page="viewquote"]) .phc-quote-action-btn:hover {
    transform:translateY(-1px);

    color:var(--qt-blue)!important;
    border-color:var(--qt-blue-line)!important;
    background:var(--qt-blue-soft)!important;
}

:where(html[data-hp-page="viewquote"]) .phc-back-client {
    min-height:36px;
    padding:0 11px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid var(--qt-border);
    border-radius:9px;

    color:var(--qt-muted)!important;
    background:#fff;

    font-size:.67rem;
    line-height:1;
    font-weight:850;

    text-decoration:none!important;
}

/* =====================================================
   Invalid quote
   ===================================================== */
:where(html[data-hp-page="viewquote"]) .phc-invalid-quote {
    padding:24px;
}

/* =====================================================
   Modal
   ===================================================== */
:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .modal-content {
    overflow:hidden;

    border:1px solid var(--qt-border)!important;
    border-radius:17px!important;

    box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .modal-header {
    padding:14px 16px!important;

    border-bottom:1px solid var(--qt-divider)!important;

    background:#f8fafc!important;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .modal-title {
    margin:0!important;

    color:var(--qt-text)!important;

    font-size:.88rem!important;
    font-weight:900!important;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .close {
    color:var(--qt-muted)!important;
    opacity:.7;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .modal-body {
    padding:16px!important;

    color:var(--qt-text-2)!important;

    font-size:.74rem!important;
    line-height:1.75;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal #quoteAcceptAgreeTos {
    margin:8px 0!important;
    padding:10px 11px;

    border:1px solid var(--qt-border);
    border-radius:10px;

    background:#f8fafc;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal #quoteAcceptAgreeTos a {
    color:var(--qt-blue)!important;
    font-weight:850;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .modal-footer {
    padding:11px 14px!important;

    border-top:1px solid var(--qt-divider)!important;

    background:#fbfdff!important;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .modal-footer .btn {
    min-height:36px;
    padding:0 12px!important;

    border-radius:9px!important;

    font-family:inherit!important;
    font-size:.67rem!important;
    font-weight:900!important;

    box-shadow:none!important;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .modal-footer .btn-default {
    color:var(--qt-muted)!important;
    border:1px solid var(--qt-border)!important;
    background:#fff!important;
}

:where(html[data-hp-page="viewquote"]) #acceptQuoteModal .modal-footer .btn-primary {
    color:#fff!important;
    border:1px solid var(--qt-blue)!important;
    background:var(--qt-gradient)!important;
}

/* =====================================================
   Responsive
   ===================================================== */
@media(max-width:767.98px) {
    :where(html[data-hp-page="viewquote"]) body {
        padding:8px 0 16px;
    }

    :where(html[data-hp-page="viewquote"]) .invoice-container {
        width:calc(100% - 16px)!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-shell {
        border-radius:19px;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-header {
        padding:15px;
        flex-direction:column;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-state {
        width:100%;
        min-width:0;

        align-items:stretch;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-status,
:where(html[data-hp-page="viewquote"]) .phc-quote-accept {
        width:100%;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-content {
        padding:13px;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-info-grid,
:where(html[data-hp-page="viewquote"]) .phc-quote-dates {
        grid-template-columns:1fr;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table thead {
        display:none;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table,
:where(html[data-hp-page="viewquote"]) .phc-quote-table tbody {
        display:block;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table tbody tr {
        display:grid;
        grid-template-columns:1fr auto;
        gap:6px 10px;

        padding:10px 11px;

        border-bottom:1px solid var(--qt-divider);
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table tbody td {
        padding:0!important;

        display:block;

        border:0!important;

        background:transparent!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table tbody td:first-child {
        grid-column:1 / -1;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table tbody td:nth-child(2) {
        text-align:right!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table tbody td:nth-child(3) {
        text-align:left!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table tbody tr.phc-total-row,
:where(html[data-hp-page="viewquote"]) .phc-quote-table tbody tr.phc-grand-total {
        grid-template-columns:1fr auto;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-table tbody tr.phc-total-row td:first-child,
:where(html[data-hp-page="viewquote"]) .phc-quote-table tbody tr.phc-grand-total td:first-child {
        grid-column:auto;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-actions {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-action-group,
:where(html[data-hp-page="viewquote"]) .phc-back-client {
        width:100%;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-action-group .phc-quote-action-btn {
        flex:1;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="viewquote"]) .phc-quote-brand {
        align-items:flex-start;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-brand-icon {
        width:44px;
        height:44px;
        flex-basis:44px;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-logo {
        max-width:170px;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-company {
        font-size:.94rem!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-action-group {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-action-btn {
        width:100%;
    }
}

/* =====================================================
   Print
   ===================================================== */
@media print {
    :where(html[data-hp-page="viewquote"]) body {
        padding:0!important;
        background:#fff!important;
    }

    :where(html[data-hp-page="viewquote"]) .invoice-container {
        width:100%!important;
        max-width:none!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-shell {
        border:0!important;
        box-shadow:none!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-shell::before {
        display:none!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-header,
:where(html[data-hp-page="viewquote"]) .phc-quote-content {
        padding-right:0!important;
        padding-left:0!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-accept,
:where(html[data-hp-page="viewquote"]) .phc-quote-actions,
:where(html[data-hp-page="viewquote"]) .d-print-none {
        display:none!important;
    }

    :where(html[data-hp-page="viewquote"]) .phc-quote-info-card,
:where(html[data-hp-page="viewquote"]) .phc-date-card,
:where(html[data-hp-page="viewquote"]) .phc-quote-items {
        box-shadow:none!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="viewquote"]) .phc-quote-accept,
:where(html[data-hp-page="viewquote"]) .phc-quote-action-btn {
        transition:none!important;
    }
}

/* viewticket-nonet.tpl */
:root:where(html:has(.phc-ticket-view)) {
    --tk-card:var(--hp-surface);
    --tk-soft:var(--hp-surface-soft);
    --tk-border:var(--hp-line);
    --tk-divider:#edf1f6;

    --tk-text:var(--hp-ink);
    --tk-text-2:var(--hp-ink-secondary);
    --tk-muted:var(--hp-muted);
    --tk-muted-2:#94a3b8;

    --tk-blue:var(--hp-primary);
    --tk-blue-dark:var(--hp-primary-hover);
    --tk-blue-light:#60a5fa;
    --tk-blue-soft:var(--hp-primary-soft);
    --tk-blue-line:#bfdbfe;
    --tk-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --tk-green:#059669;
    --tk-green-soft:#ecfdf5;
    --tk-green-line:#a7f3d0;

    --tk-orange:#d97706;
    --tk-orange-soft:#fff7ed;
    --tk-orange-line:#fed7aa;

    --tk-red:#dc2626;
    --tk-red-soft:#fef2f2;
    --tk-red-line:#fecaca;

    --tk-slate:#475569;
    --tk-slate-soft:#f1f5f9;
    --tk-slate-line:#cbd5e1;

    --tk-radius-xl:24px;
    --tk-radius-lg:17px;
    --tk-radius-md:12px;

    --tk-shadow-sm:0 8px 24px rgba(15,23,42,.05),0 2px 8px rgba(15,23,42,.025);
    --tk-shadow-panel:0 20px 55px rgba(15,23,42,.075),0 4px 14px rgba(15,23,42,.03);

    --tk-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html:has(.phc-ticket-view)) .phc-ticket-view,
:where(html:has(.phc-ticket-view)) .phc-ticket-view * {
    box-sizing:border-box;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-view {
    direction:rtl;
    text-align:right;
    font-family:inherit;
    color:var(--tk-text-2);
}

/* =========================================================
   Ticket header
   ========================================================= */
:where(html:has(.phc-ticket-view)) .phc-ticket-card {
    position:relative;
    overflow:hidden;
    margin-bottom:14px;

    border:1px solid var(--tk-border);
    border-radius:var(--tk-radius-xl);

    background:#fff;
    box-shadow:var(--tk-shadow-panel);
}

:where(html:has(.phc-ticket-view)) .phc-ticket-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    z-index:3;

    background:var(--tk-gradient);
}

:where(html:has(.phc-ticket-view)) .phc-ticket-head {
    padding:18px 20px 15px;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;

    border-bottom:1px solid var(--tk-divider);

    background:
        radial-gradient(circle at 7% 0%,rgba(96,165,250,.09),transparent 30%),
        linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}

:where(html:has(.phc-ticket-view)) .phc-ticket-heading {
    min-width:0;

    display:flex;
    align-items:flex-start;
    gap:12px;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-main-icon {
    position:relative;

    width:48px;
    height:48px;
    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--tk-blue-line);
    border-radius:13px;

    color:#fff;
    background:var(--tk-gradient);

    box-shadow:0 9px 20px rgba(37,99,235,.16);

    font-size:.82rem;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-title-wrap {
    min-width:0;
}

:where(html:has(.phc-ticket-view)) .ticket-tit,
:where(html:has(.phc-ticket-view)) .phc-ticket-title {
    margin:0 0 5px!important;

    color:var(--tk-text)!important;

    font-size:1.02rem!important;
    line-height:1.7;
    font-weight:900!important;

    word-break:break-word;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-id {
    min-height:27px;
    padding:0 8px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--tk-border);
    border-radius:8px;

    color:var(--tk-muted);
    background:#fff;

    font-size:.64rem;
    line-height:1;
    font-weight:850;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-actions {
    display:flex;
    align-items:center;
    gap:6px;
    flex:0 0 auto;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-action {
    min-height:36px;
    padding:0 10px!important;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:5px;

    border:1px solid!important;
    border-radius:9px!important;

    font-family:inherit!important;
    font-size:.66rem!important;
    line-height:1;
    font-weight:900!important;

    text-decoration:none!important;

    box-shadow:none!important;

    transition:
        transform var(--tk-transition),
        box-shadow var(--tk-transition);
}

:where(html:has(.phc-ticket-view)) .phc-ticket-action--reply {
    color:#fff!important;
    border-color:var(--tk-green)!important;
    background:linear-gradient(135deg,#10b981,#059669)!important;

    box-shadow:0 7px 14px rgba(5,150,105,.12)!important;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-action--close {
    color:#fff!important;
    border-color:var(--tk-blue)!important;
    background:var(--tk-gradient)!important;

    min-width:38px;
    padding:0 9px!important;

    box-shadow:0 7px 14px rgba(37,99,235,.12)!important;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-action--disabled {
    min-width:38px;

    color:var(--tk-red)!important;
    border-color:var(--tk-red-line)!important;
    background:var(--tk-red-soft)!important;

    opacity:.65;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-action:hover:not(:disabled) {
    transform:translateY(-1px);
}

/* =========================================================
   Ticket meta
   ========================================================= */
:where(html:has(.phc-ticket-view)) .phc-ticket-meta {
    padding:13px 18px;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;

    background:#fff;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-meta-item {
    min-height:58px;
    padding:9px 10px;

    display:flex;
    align-items:center;
    gap:8px;

    border:1px solid var(--tk-border);
    border-radius:11px;

    background:#f8fafc;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-meta-icon {
    width:32px;
    height:32px;
    flex:0 0 32px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--tk-blue-line);
    border-radius:9px;

    color:var(--tk-blue);
    background:var(--tk-blue-soft);

    font-size:.62rem;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-meta-label {
    display:block;
    margin-bottom:2px;

    color:var(--tk-muted-2);

    font-size:.60rem;
    line-height:1.4;
    font-weight:850;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-meta-value {
    display:block;

    color:var(--tk-text);

    font-size:.70rem;
    line-height:1.45;
    font-weight:900;

    word-break:break-word;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-meta-value--ltr {
    direction:ltr;
    text-align:right;
}

/* status / priority */
:where(html:has(.phc-ticket-view)) .phc-ticket-status,
:where(html:has(.phc-ticket-view)) .phc-ticket-priority {
    min-height:25px;
    padding:0 7px;

    display:inline-flex;
    align-items:center;

    border:1px solid var(--tk-blue-line);
    border-radius:8px;

    color:var(--tk-blue);
    background:var(--tk-blue-soft);

    font-size:.63rem;
    line-height:1;
    font-weight:900;
}

/* =========================================================
   Alerts
   ========================================================= */
:where(html:has(.phc-ticket-view)) .phc-ticket-alerts {
    padding:0 18px 14px;
}

:where(html:has(.phc-ticket-view)) .phc-ticket-alerts .alert {
    margin-bottom:8px!important;

    border-radius:11px!important;

    font-size:.72rem!important;
    line-height:1.7;
}

/* =========================================================
   Replies
   ========================================================= */
:where(html:has(.phc-ticket-view)) .ticket-replies {
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

:where(html:has(.phc-ticket-view)) .reply {
    position:relative;
    overflow:hidden;

    display:grid;
    grid-template-columns:180px minmax(0,1fr);

    border:1px solid var(--tk-border);
    border-radius:15px;

    background:#fff;

    box-shadow:var(--tk-shadow-sm);
}

:where(html:has(.phc-ticket-view)) .reply::before {
    content:"";
    position:absolute;
    top:10px;
    bottom:10px;
    right:0;
    width:3px;

    border-radius:3px 0 0 3px;
}

:where(html:has(.phc-ticket-view)) .replies-admin::before {
    background:var(--tk-gradient);
}

:where(html:has(.phc-ticket-view)) .replies-client::before {
    background:linear-gradient(180deg,#10b981,#059669);
}

:where(html:has(.phc-ticket-view)) .replies-user-info {
    padding:13px 12px;

    display:flex;
    align-items:center;
    flex-direction:column;

    border-left:1px solid var(--tk-divider);

    text-align:center;

    background:#fbfdff;
}

:where(html:has(.phc-ticket-view)) .replies-user-image {
    width:48px!important;
    height:48px!important;

    margin:0 0 8px!important;

    display:block;

    border:2px solid #fff;
    border-radius:13px!important;

    object-fit:cover;

    box-shadow:0 5px 14px rgba(15,23,42,.10);
}

:where(html:has(.phc-ticket-view)) .replies-user-title {
    width:100%;

    color:var(--tk-text)!important;

    font-size:.74rem!important;
    line-height:1.5;
    font-weight:900!important;

    overflow-wrap:anywhere;
}

:where(html:has(.phc-ticket-view)) .replies-user-type {
    min-height:25px;
    margin-top:5px;
    padding:0 7px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid;
    border-radius:8px;

    font-size:.61rem!important;
    line-height:1;
    font-weight:850!important;
}

:where(html:has(.phc-ticket-view)) .replies-admin .replies-user-type {
    color:var(--tk-blue)!important;
    border-color:var(--tk-blue-line);
    background:var(--tk-blue-soft);
}

:where(html:has(.phc-ticket-view)) .replies-client .replies-user-type {
    color:var(--tk-green)!important;
    border-color:var(--tk-green-line);
    background:var(--tk-green-soft);
}

:where(html:has(.phc-ticket-view)) .replies-date {
    margin-top:7px;

    color:var(--tk-muted-2)!important;

    font-size:.59rem!important;
    line-height:1.5;
    font-weight:700!important;

    direction:ltr;
}

:where(html:has(.phc-ticket-view)) .replies-info {
    min-width:0;
    padding:14px 16px;
}

:where(html:has(.phc-ticket-view)) .replies-content {
    color:var(--tk-text-2)!important;

    font-size:.78rem!important;
    line-height:1.95!important;

    overflow-wrap:anywhere;
}

:where(html:has(.phc-ticket-view)) .replies-content > :first-child {
    margin-top:0!important;
}

:where(html:has(.phc-ticket-view)) .replies-content > :last-child {
    margin-bottom:0!important;
}

:where(html:has(.phc-ticket-view)) .replies-content p {
    margin-bottom:10px!important;
}

:where(html:has(.phc-ticket-view)) .replies-content a {
    color:var(--tk-blue)!important;
    font-weight:800;
}

:where(html:has(.phc-ticket-view)) .replies-content img {
    max-width:100%!important;
    height:auto!important;

    border:1px solid var(--tk-border);
    border-radius:11px;

    box-shadow:var(--tk-shadow-sm);
}

:where(html:has(.phc-ticket-view)) .replies-content blockquote {
    margin:12px 0!important;
    padding:9px 12px!important;

    border:0!important;
    border-right:3px solid var(--tk-blue)!important;
    border-radius:9px;

    background:var(--tk-blue-soft);
}

/* =========================================================
   Attachments in replies
   ========================================================= */
:where(html:has(.phc-ticket-view)) .replies-content hr {
    margin:13px 0!important;

    border:0!important;
    border-top:1px dashed var(--tk-divider)!important;
}

:where(html:has(.phc-ticket-view)) .attachments {
    margin-top:10px;
}

:where(html:has(.phc-ticket-view)) .attachments strong {
    display:block;
    margin-bottom:7px;

    color:var(--tk-text)!important;

    font-size:.67rem!important;
    line-height:1.5;
    font-weight:900!important;
}

:where(html:has(.phc-ticket-view)) .attachments ul {
    margin:0!important;
    padding:0!important;

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;

    list-style:none!important;
}

:where(html:has(.phc-ticket-view)) .attachments li {
    min-height:30px;
    max-width:100%;
    padding:0 8px!important;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--tk-border);
    border-radius:9px;

    color:var(--tk-muted)!important;
    background:#f8fafc;

    font-size:.64rem!important;
    line-height:1.4;

    list-style:none!important;
}

:where(html:has(.phc-ticket-view)) .attachments li i {
    color:var(--tk-blue);
}

:where(html:has(.phc-ticket-view)) .attachments li a {
    max-width:360px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:var(--tk-blue)!important;

    text-decoration:none!important;
}

/* =========================================================
   Reply Modal
   ========================================================= */
:where(html:has(.phc-ticket-view)) .ticket-modals .modal-content {
    overflow:hidden;

    border:1px solid var(--tk-border)!important;
    border-radius:18px!important;

    background:#fff!important;

    box-shadow:0 24px 60px rgba(15,23,42,.18)!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .modal-content::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;

    background:var(--tk-gradient);
}

:where(html:has(.phc-ticket-view)) .ticket-modals .card-body {
    padding:17px!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .form-group {
    margin-bottom:13px!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals label {
    display:block;
    margin-bottom:5px!important;

    color:var(--tk-muted)!important;

    font-size:.68rem!important;
    line-height:1.5;
    font-weight:850!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .form-control,
:where(html:has(.phc-ticket-view)) .ticket-modals .custom-file {
    border-radius:10px!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals textarea.form-control {
    min-height:150px;
    padding:10px 11px!important;

    border:1px solid var(--tk-border)!important;
    border-radius:10px!important;

    color:var(--tk-text)!important;
    background:#f8fafc!important;

    font-family:inherit!important;
    font-size:.74rem!important;
    line-height:1.8;

    box-shadow:none!important;

    resize:vertical;
}

:where(html:has(.phc-ticket-view)) .ticket-modals textarea.form-control:focus {
    border-color:var(--tk-blue)!important;
    background:#fff!important;

    box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}

:where(html:has(.phc-ticket-view)) #btnTicketAttachmentsAdd {
    min-width:34px;
    min-height:32px;
    padding:0 8px!important;

    border:1px solid var(--tk-blue-line)!important;
    border-radius:8px!important;

    color:var(--tk-blue)!important;
    background:var(--tk-blue-soft)!important;

    box-shadow:none!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .attachment-group {
    margin-bottom:6px!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .custom-file {
    overflow:hidden;

    border:1px solid var(--tk-border);
    background:#f8fafc;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .custom-file-label {
    height:40px!important;
    padding:10px 11px!important;

    border:0!important;
    border-radius:0!important;

    color:var(--tk-muted)!important;
    background:#f8fafc!important;

    font-size:.67rem!important;
    line-height:1.4;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .alert-warning {
    margin:8px 0 0!important;
    padding:9px 10px!important;

    border:1px solid var(--tk-orange-line)!important;
    border-radius:9px!important;

    color:#9a5b08!important;
    background:var(--tk-orange-soft)!important;

    font-size:.64rem!important;
    line-height:1.6;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .modal-footer {
    margin:13px -17px -17px!important;
    padding:11px 17px!important;

    display:flex;
    justify-content:flex-start;
    gap:6px;

    border-top:1px solid var(--tk-divider)!important;

    background:#fbfdff;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .modal-footer .btn,
:where(html:has(.phc-ticket-view)) .ticket-modals .modal-footer input.btn {
    min-height:37px;
    padding:0 13px!important;

    border-radius:9px!important;

    font-family:inherit!important;
    font-size:.68rem!important;
    line-height:1;
    font-weight:900!important;

    box-shadow:none!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .modal-footer .btn-primary {
    color:#fff!important;
    border:1px solid var(--tk-blue)!important;
    background:var(--tk-gradient)!important;
}

:where(html:has(.phc-ticket-view)) .ticket-modals .modal-footer .btn-danger {
    color:var(--tk-muted)!important;
    border:1px solid var(--tk-border)!important;
    background:#fff!important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:991px) {
    :where(html:has(.phc-ticket-view)) .phc-ticket-meta {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    :where(html:has(.phc-ticket-view)) .reply {
        grid-template-columns:150px minmax(0,1fr);
    }
}

@media(max-width:767.98px) {
    :where(html:has(.phc-ticket-view)) .phc-ticket-card {
        border-radius:19px;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-head {
        padding:15px;
        flex-direction:column;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-actions {
        width:100%;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-action--reply {
        flex:1;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-meta {
        padding:11px 13px;

        grid-template-columns:1fr;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-alerts {
        padding:0 13px 12px;
    }

    :where(html:has(.phc-ticket-view)) .reply {
        grid-template-columns:1fr;
    }

    :where(html:has(.phc-ticket-view)) .replies-user-info {
        padding:10px 12px;

        align-items:center;
        flex-direction:row;
        flex-wrap:wrap;
        gap:7px;

        border-left:0;
        border-bottom:1px solid var(--tk-divider);

        text-align:right;
    }

    :where(html:has(.phc-ticket-view)) .replies-user-image {
        width:42px!important;
        height:42px!important;
        margin:0!important;
    }

    :where(html:has(.phc-ticket-view)) .replies-user-title {
        width:auto;
        flex:1;
    }

    :where(html:has(.phc-ticket-view)) .replies-user-type {
        margin-top:0;
    }

    :where(html:has(.phc-ticket-view)) .replies-date {
        width:100%;
        margin:0 49px 0 0;

        text-align:right;
    }

    :where(html:has(.phc-ticket-view)) .replies-info {
        padding:13px;
    }

    :where(html:has(.phc-ticket-view)) .ticket-modals .modal-dialog {
        margin:8px!important;
    }
}

@media(max-width:480px) {
    :where(html:has(.phc-ticket-view)) .phc-ticket-heading {
        align-items:flex-start;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-main-icon {
        width:43px;
        height:43px;
        flex-basis:43px;
    }

    :where(html:has(.phc-ticket-view)) .ticket-tit,
:where(html:has(.phc-ticket-view)) .phc-ticket-title {
        font-size:.94rem!important;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-actions {
        align-items:stretch;
        flex-wrap:wrap;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-action--reply {
        width:100%;
        flex:1 1 100%;
    }

    :where(html:has(.phc-ticket-view)) .phc-ticket-action--close,
:where(html:has(.phc-ticket-view)) .phc-ticket-action--disabled {
        flex:1;
    }

    :where(html:has(.phc-ticket-view)) .attachments ul {
        align-items:stretch;
        flex-direction:column;
    }

    :where(html:has(.phc-ticket-view)) .attachments li {
        width:100%;
    }

    :where(html:has(.phc-ticket-view)) .attachments li a {
        max-width:calc(100vw - 100px);
    }

    :where(html:has(.phc-ticket-view)) .ticket-modals .modal-footer {
        flex-direction:column;
    }

    :where(html:has(.phc-ticket-view)) .ticket-modals .modal-footer .btn,
:where(html:has(.phc-ticket-view)) .ticket-modals .modal-footer input.btn {
        width:100%;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html:has(.phc-ticket-view)) .phc-ticket-action {
        transition:none!important;
    }
}

/* viewticket.tpl */
:root:where(html[data-hp-page="viewticket"]) {
    --vt-bg:var(--hp-page);
    --vt-card:var(--hp-surface);
    --vt-soft:var(--hp-surface-soft);
    --vt-border:var(--hp-line);
    --vt-border-soft:#edf1f6;

    --vt-text:var(--hp-ink);
    --vt-text-2:var(--hp-ink-secondary);
    --vt-muted:var(--hp-muted);
    --vt-muted-2:#94a3b8;

    --vt-blue:var(--hp-primary);
    --vt-blue-dark:var(--hp-primary-hover);
    --vt-blue-light:#60a5fa;
    --vt-blue-soft:var(--hp-primary-soft);
    --vt-blue-line:#bfdbfe;
    --vt-gradient:linear-gradient(135deg,#60a5fa 0%,#2563eb 52%,#1d4ed8 100%);

    --vt-green:#059669;
    --vt-green-soft:#ecfdf5;
    --vt-green-line:#a7f3d0;

    --vt-red:#dc2626;
    --vt-red-soft:#fef2f2;
    --vt-red-line:#fecaca;

    --vt-orange:#d97706;
    --vt-orange-soft:#fff7ed;
    --vt-orange-line:#fed7aa;

    --vt-radius-xl:24px;
    --vt-radius-lg:18px;
    --vt-radius-md:13px;

    --vt-shadow-sm:0 8px 24px rgba(15,23,42,.055),0 2px 8px rgba(15,23,42,.025);
    --vt-shadow-md:0 18px 44px rgba(15,23,42,.085),0 5px 16px rgba(15,23,42,.035);
    --vt-transition:220ms cubic-bezier(.2,.8,.2,1);
}

:where(html[data-hp-page="viewticket"]) .soft-ticket-wrapper,
:where(html[data-hp-page="viewticket"]) .soft-ticket-wrapper * {
    box-sizing:border-box;
}

:where(html[data-hp-page="viewticket"]) .soft-ticket-wrapper {
    direction:rtl;
    text-align:right;
    color:var(--vt-text);
    -webkit-font-smoothing:antialiased;
}

/* =========================================================
   Main ticket info
   ========================================================= */
:where(html[data-hp-page="viewticket"]) .soft-card {
    position:relative;
    overflow:hidden;
    margin-bottom:22px;
    padding:22px;

    border:1px solid var(--vt-border);
    border-radius:var(--vt-radius-xl);
    background:#fff;
    box-shadow:var(--vt-shadow-sm);

    transition:
        border-color var(--vt-transition),
        box-shadow var(--vt-transition);
}

:where(html[data-hp-page="viewticket"]) .soft-card::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:3px;
    background:linear-gradient(90deg,transparent,var(--vt-blue),transparent);
    opacity:.85;
}

:where(html[data-hp-page="viewticket"]) .soft-card:hover {
    border-color:#d5dfeb;
    box-shadow:var(--vt-shadow-md);
}

:where(html[data-hp-page="viewticket"]) .soft-ticket-title {
    margin:0 0 20px!important;
    padding-bottom:15px;

    display:flex;
    align-items:center;
    gap:11px;

    border-bottom:1px solid var(--vt-border-soft);
    color:var(--vt-text);

    font-size:1.24rem;
    line-height:1.65;
    font-weight:900;
}

:where(html[data-hp-page="viewticket"]) .soft-ticket-title i {
    width:40px;
    height:40px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--vt-blue-line);
    border-radius:12px;
    color:#fff!important;
    background:var(--vt-gradient);
    box-shadow:0 8px 18px rgba(37,99,235,.18);

    font-size:.84rem;
}

/* =========================================================
   Ticket metadata
   ========================================================= */
:where(html[data-hp-page="viewticket"]) .soft-card .row {
    margin-right:-7px;
    margin-left:-7px;
}

:where(html[data-hp-page="viewticket"]) .soft-card .row > [class*="col-"] {
    padding-right:7px;
    padding-left:7px;
}

:where(html[data-hp-page="viewticket"]) .soft-list-item {
    min-height:54px;
    padding:11px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    border:1px solid var(--vt-border);
    border-radius:12px;
    background:#f8fafc;

    transition:
        border-color var(--vt-transition),
        background var(--vt-transition),
        transform var(--vt-transition);
}

:where(html[data-hp-page="viewticket"]) .soft-list-item:hover {
    transform:translateY(-1px);
    border-color:#d2def0;
    background:#fff;
}

:where(html[data-hp-page="viewticket"]) .soft-list-label {
    color:var(--vt-muted);
    font-size:.83rem;
    font-weight:700;
}

:where(html[data-hp-page="viewticket"]) .soft-list-value {
    color:var(--vt-text-2);
    font-size:.89rem;
    font-weight:900;
}

/* تاریخ ثبت که inline سبز دارد */
:where(html[data-hp-page="viewticket"]) .soft-list-item[style*="f0fdf4"] {
    border-color:var(--vt-green-line)!important;
    background:var(--vt-green-soft)!important;
}

:where(html[data-hp-page="viewticket"]) .soft-list-value.text-primary {
    color:var(--vt-blue)!important;
}

:where(html[data-hp-page="viewticket"]) .soft-list-value.text-success {
    color:var(--vt-green)!important;
}

:where(html[data-hp-page="viewticket"]) .soft-list-value.text-danger {
    color:var(--vt-red)!important;
}

/* =========================================================
   Top action buttons
   ========================================================= */

:where(html[data-hp-page="viewticket"]) .soft-card .btn-secondary {
    color:#64748b!important;
    border:1px solid #dbe2ea!important;
    background:#f1f5f9!important;
    box-shadow:none!important;
}

/* =========================================================
   Replies timeline
   ========================================================= */
:where(html[data-hp-page="viewticket"]) .soft-ticket-replies {
    position:relative;
    margin-top:26px!important;
}

:where(html[data-hp-page="viewticket"]) .soft-ticket-replies::before {
    content:"";
    position:absolute;
    top:14px;
    right:22px;
    bottom:18px;
    width:2px;
    z-index:0;
    background:linear-gradient(180deg,#bfdbfe 0%,#e2e8f0 100%);
}

:where(html[data-hp-page="viewticket"]) .soft-reply-card {
    position:relative;
    z-index:1;
    overflow:hidden;
    margin:0 0 16px;
    padding:18px 20px 18px 20px;

    border:1px solid var(--vt-border);
    border-radius:18px;
    background:#fff;
    box-shadow:0 6px 18px rgba(15,23,42,.04);

    transition:
        border-color var(--vt-transition),
        box-shadow var(--vt-transition);
}

:where(html[data-hp-page="viewticket"]) .soft-reply-card:hover {
    box-shadow:0 13px 30px rgba(15,23,42,.065);
}

:where(html[data-hp-page="viewticket"]) .soft-reply-admin {
    border-color:#cfe0ff;
    background:
        linear-gradient(145deg,#f7faff 0%,#ffffff 68%);
}

:where(html[data-hp-page="viewticket"]) .soft-reply-client {
    border-color:#e1e7ef;
    background:#fff;
}

/* accent strip */
:where(html[data-hp-page="viewticket"]) .soft-reply-admin::before,
:where(html[data-hp-page="viewticket"]) .soft-reply-client::before {
    content:"";
    position:absolute;
    top:15px;
    right:0;
    bottom:15px;
    width:3px;
    border-radius:3px 0 0 3px;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-admin::before {
    background:var(--vt-blue);
}

:where(html[data-hp-page="viewticket"]) .soft-reply-client::before {
    background:#94a3b8;
}

/* =========================================================
   Reply header
   ========================================================= */
:where(html[data-hp-page="viewticket"]) .soft-reply-header {
    margin-bottom:14px;
    padding-bottom:13px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    border-bottom:1px solid var(--vt-border-soft);
}

:where(html[data-hp-page="viewticket"]) .soft-reply-user {
    min-width:0;
    display:flex;
    align-items:center;
    gap:11px;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-avatar {
    width:42px;
    height:42px;
    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    font-size:.9rem;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-admin .soft-reply-avatar {
    color:var(--vt-blue);
    border:1px solid var(--vt-blue-line);
    background:var(--vt-blue-soft);
}

:where(html[data-hp-page="viewticket"]) .soft-reply-client .soft-reply-avatar {
    color:#64748b;
    border:1px solid #dbe2ea;
    background:#f1f5f9;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-name {
    display:block;
    margin-bottom:2px;

    color:var(--vt-text);
    font-size:.91rem;
    line-height:1.55;
    font-weight:900;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-type {
    color:var(--vt-muted);
    font-size:.74rem;
    line-height:1.5;
    font-weight:650;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-date {
    min-height:32px;
    padding:0 10px;

    display:inline-flex;
    align-items:center;
    gap:5px;

    border:1px solid var(--vt-border);
    border-radius:9px;

    color:var(--vt-muted);
    background:#f8fafc;

    font-size:.75rem;
    font-weight:700;
    white-space:nowrap;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-admin .soft-reply-date {
    border-color:#dbeafe;
    background:#fff;
}

/* =========================================================
   Reply body
   ========================================================= */
:where(html[data-hp-page="viewticket"]) .soft-reply-body {
    color:var(--vt-text-2);
    font-size:.90rem;
    line-height:1.95;
    word-break:break-word;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-body p:last-child {
    margin-bottom:0;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-body a {
    color:var(--vt-blue);
    text-decoration:none;
}

:where(html[data-hp-page="viewticket"]) .soft-reply-body a:hover {
    text-decoration:underline;
}

/* =========================================================
   Attachments inside replies
   ========================================================= */
:where(html[data-hp-page="viewticket"]) .soft-attachments {
    margin-top:16px;
    padding:14px;

    border:1px solid var(--vt-border);
    border-radius:13px;
    background:#f8fafc;
}

:where(html[data-hp-page="viewticket"]) .soft-attachments strong {
    color:var(--vt-text-2);
    font-size:.84rem;
    font-weight:850;
}

:where(html[data-hp-page="viewticket"]) .soft-attachments strong i {
    margin-left:5px;
    color:var(--vt-blue);
}

:where(html[data-hp-page="viewticket"]) .soft-attachments ul {
    margin:10px 0 0!important;
    padding:0!important;
    list-style:none;
}

:where(html[data-hp-page="viewticket"]) .soft-attachments li {
    margin-bottom:7px;
}

:where(html[data-hp-page="viewticket"]) .soft-attachments li:last-child {
    margin-bottom:0;
}

:where(html[data-hp-page="viewticket"]) .soft-attachments a {
    min-height:36px;
    padding:0 10px;

    display:inline-flex;
    align-items:center;
    gap:7px;

    border:1px solid #dbeafe;
    border-radius:9px;

    color:var(--vt-blue)!important;
    background:#fff;

    font-size:.80rem;
    font-weight:750;
    text-decoration:none!important;

    transition:
        border-color var(--vt-transition),
        background var(--vt-transition);
}

:where(html[data-hp-page="viewticket"]) .soft-attachments a:hover {
    border-color:var(--vt-blue-line);
    background:var(--vt-blue-soft);
}

/* =========================================================
   Alerts
   ========================================================= */
:where(html[data-hp-page="viewticket"]) .soft-ticket-wrapper .alert {
    border-radius:13px;
    font-size:.86rem;
    line-height:1.75;
}

/* =========================================================
   Reply modal
   ========================================================= */
:where(html[data-hp-page="viewticket"]) .modal-content.soft-modal {
    overflow:hidden;

    border:1px solid var(--vt-border)!important;
    border-radius:20px!important;
    background:#fff;
    box-shadow:0 25px 65px rgba(15,23,42,.18)!important;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .modal-header {
    padding:17px 20px!important;
    align-items:center;

    border-bottom:1px solid var(--vt-border-soft)!important;
    background:
        linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

:where(html[data-hp-page="viewticket"]) .soft-modal .modal-title {
    margin:0;

    display:flex;
    align-items:center;

    color:var(--vt-text)!important;
    font-size:1rem;
    line-height:1.55;
    font-weight:900!important;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .modal-title i {
    width:34px;
    height:34px;
    margin-left:8px!important;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--vt-blue-line);
    border-radius:10px;

    color:var(--vt-blue)!important;
    background:var(--vt-blue-soft);

    font-size:.75rem;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .close {
    width:34px;
    height:34px;
    margin:0!important;
    padding:0!important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--vt-border)!important;
    border-radius:9px;

    color:#64748b;
    background:#fff;

    opacity:1!important;
    font-size:1.2rem;
    line-height:1;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .modal-body {
    padding:20px!important;
}

:where(html[data-hp-page="viewticket"]) .soft-modal label {
    margin-bottom:8px;
    color:var(--vt-text-2);
    font-size:.87rem;
    font-weight:850!important;
}

:where(html[data-hp-page="viewticket"]) .form-control.soft-input {
    width:100%;
    min-height:50px;
    padding:0 14px;

    border:1px solid var(--vt-border)!important;
    border-radius:12px!important;

    color:var(--vt-text);
    background:#f8fafc;

    font-family:inherit;
    font-size:.88rem;

    box-shadow:none!important;
}

:where(html[data-hp-page="viewticket"]) textarea.form-control.soft-input {
    min-height:170px;
    padding:13px 14px;
    line-height:1.85;
}

:where(html[data-hp-page="viewticket"]) .form-control.soft-input:focus {
    border-color:var(--vt-blue)!important;
    background:#fff;
    box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}

/* markdown inside modal */
:where(html[data-hp-page="viewticket"]) .soft-modal .md-editor {
    overflow:hidden;
    border:1px solid var(--vt-border);
    border-radius:13px;
    background:#fff;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .md-editor > .md-header {
    padding:8px;
    border:0;
    border-bottom:1px solid var(--vt-border-soft);
    background:#f8fafc;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .md-editor > textarea {
    border:0!important;
    border-radius:0!important;
}

/* inline attachment box in modal */
:where(html[data-hp-page="viewticket"]) .soft-modal .form-group[style*="f8f9fa"] {
    padding:16px!important;

    border:1px solid var(--vt-border)!important;
    border-radius:14px!important;
    background:#f8fafc!important;
}

/* RTL file field */
:where(html[data-hp-page="viewticket"]) .soft-modal .attachment-group {
    direction:rtl;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .attachment-group .custom-file {
    min-width:0;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .custom-file-label {
    height:44px;
    padding:10px 13px;

    border:1px solid var(--vt-border)!important;
    border-left:0!important;
    border-radius:0 10px 10px 0!important;

    color:var(--vt-muted);
    background:#fff;

    font-size:.81rem;
    line-height:1.55;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .custom-file-label::after {
    height:42px;
    padding:9px 11px;

    border:0!important;
    border-right:1px solid var(--vt-border)!important;

    color:var(--vt-text-2);
    background:#f8fafc;

    line-height:1.55;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .input-group-append {
    margin:0!important;
}

:where(html[data-hp-page="viewticket"]) .soft-modal #btnTicketAttachmentsAdd {
    width:48px;
    min-width:48px;
    height:44px;
    min-height:44px;
    padding:0!important;

    border-radius:10px 0 0 10px!important;
    box-shadow:none!important;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .alert {
    border:1px solid var(--vt-orange-line);
    color:#b45309!important;
    background:var(--vt-orange-soft)!important;
}

/* modal footer-ish action area */
:where(html[data-hp-page="viewticket"]) .soft-modal .d-flex.justify-content-end {
    gap:9px!important;
}

:where(html[data-hp-page="viewticket"]) .soft-modal .btn-light {
    min-width:110px;
    color:#475569!important;
    border:1px solid var(--vt-border)!important;
    background:#f8fafc!important;
}

:where(html[data-hp-page="viewticket"]) .soft-modal button[type="submit"] {
    min-width:145px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:767.98px) {
    :where(html[data-hp-page="viewticket"]) .soft-card {
        padding:17px;
        border-radius:19px;
    }

    :where(html[data-hp-page="viewticket"]) .soft-ticket-title {
        font-size:1.08rem;
    }

    :where(html[data-hp-page="viewticket"]) .soft-list-item {
        min-height:50px;
    }

    :where(html[data-hp-page="viewticket"]) .soft-ticket-replies {
        margin-top:20px!important;
    }

    :where(html[data-hp-page="viewticket"]) .soft-ticket-replies::before {
        display:none;
    }

    :where(html[data-hp-page="viewticket"]) .soft-reply-card {
        padding:15px;
        border-radius:16px;
    }

    :where(html[data-hp-page="viewticket"]) .soft-reply-header {
        align-items:flex-start;
        flex-direction:column;
        gap:9px;
    }

    :where(html[data-hp-page="viewticket"]) .soft-reply-date {
        align-self:flex-start;
    }

    :where(html[data-hp-page="viewticket"]) .soft-reply-body {
        font-size:.85rem;
    }

    :where(html[data-hp-page="viewticket"]) .soft-modal .modal-body {
        padding:16px!important;
    }
}

@media(max-width:480px) {
    :where(html[data-hp-page="viewticket"]) .soft-card {
        padding:14px;
        border-radius:16px;
    }

    :where(html[data-hp-page="viewticket"]) .soft-ticket-title {
        font-size:1rem;
    }

    :where(html[data-hp-page="viewticket"]) .soft-ticket-title i {
        width:36px;
        height:36px;
    }

    :where(html[data-hp-page="viewticket"]) .soft-list-item {
        min-height:auto;
        padding:10px 11px;

        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

    :where(html[data-hp-page="viewticket"]) .soft-reply-user {
        align-items:flex-start;
    }

    :where(html[data-hp-page="viewticket"]) .soft-reply-avatar {
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    :where(html[data-hp-page="viewticket"]) .soft-modal .attachment-group {
        display:flex;
        flex-direction:column;
    }

    :where(html[data-hp-page="viewticket"]) .soft-modal .custom-file {
        width:100%;
    }

    :where(html[data-hp-page="viewticket"]) .soft-modal .custom-file-label {
        border-left:1px solid var(--vt-border)!important;
        border-radius:10px!important;
    }

    :where(html[data-hp-page="viewticket"]) .soft-modal #btnTicketAttachmentsAdd {
        width:100%;
        margin-top:8px;
        border-radius:10px!important;
    }

    :where(html[data-hp-page="viewticket"]) .soft-modal .d-flex.justify-content-end {
        flex-direction:column-reverse;
    }

    :where(html[data-hp-page="viewticket"]) .soft-modal .d-flex.justify-content-end .btn {
        width:100%;
        margin-right:0!important;
    }
}

@media(prefers-reduced-motion:reduce) {
    :where(html[data-hp-page="viewticket"]) .soft-card,
:where(html[data-hp-page="viewticket"]) .soft-list-item,
:where(html[data-hp-page="viewticket"]) .soft-reply-card,
:where(html[data-hp-page="viewticket"]) .soft-attachments a {
        transition:none!important;
    }
}

/* whmcsco/tpl/clents-slider.tpl */
.phc-promo-slider {
    --phs-radius: 1.25rem;
    --phs-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    --phs-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.12);

    border-radius: var(--phs-radius);
    overflow: hidden;
    box-shadow: var(--phs-shadow);
    transition: all 0.4s ease;
    margin-bottom: 2rem;
    position: relative;
    background-color: #ffffff;
}

.phc-promo-slider:hover {
    transform: translateY(-5px);
    box-shadow: var(--phs-shadow-hover);
}

.phc-promo-slider .carousel-item a {
    display: block;
    width: 100%;
}

.phc-promo-slider .carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 1.5s ease;
}

.phc-promo-slider:hover .carousel-item img {
    transform: scale(1.03);
}

.phc-slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    width: 44px;
    height: 44px;
    background-color: #ffffff;
    color: #1e293b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
    cursor: pointer;
    text-decoration: none;
}

.phc-control-prev { right: 1.5rem; }
.phc-control-next { left: 1.5rem; }

.phc-slider-control i {
    font-size: 1.1rem;
    color: #334155;
}

.phc-promo-slider:hover .phc-slider-control {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.phc-slider-control:hover {
    background-color: #f8fafc;
    color: #0f172a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.phc-promo-slider .carousel-indicators {
    bottom: 1rem;
    margin-bottom: 0;
    gap: 8px;
    z-index: 15;
}

.phc-promo-slider .carousel-indicators li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.phc-promo-slider .carousel-indicators li.active {
    width: 24px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .phc-promo-slider {
        --phs-radius: 1rem;
    }
    .phc-slider-control {
        opacity: 0.9;
        transform: translateY(-50%) scale(0.85);
        width: 36px;
        height: 36px;
    }
    .phc-control-prev { right: 0.5rem; }
    .phc-control-next { left: 0.5rem; }
}
.phc-promo-slider {
    display: flex;
    flex-direction: column;
}

.phc-promo-slider .carousel-inner {
    flex-grow: 1; 
    height: 100%;
}

.phc-promo-slider .carousel-item {
    height: 100%;
}

.phc-promo-slider .carousel-item a {
    display: block;
    width: 100%;
    height: 100%; 
}

.phc-promo-slider .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s ease;
}

/* whmcsco/tpl/nav-logedin.tpl */
/* --- پایه منوی پریمیوم --- */
.phc-navbar {
    --phn-text: #475569;
    --phn-hover-text: #3b82f6;
    --phn-hover-bg: rgba(59, 130, 246, 0.08);
    --phn-dropdown-bg: var(--hp-surface);
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    direction: rtl;
}

.phc-navbar li {
    position: relative;
}

/* لینک‌های اصلی */
.phc-navbar .phc-nav-link {
    color: var(--phn-text) !important;
    font-weight: 500;
    border-radius: 0.5rem;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

/* تنظیمات آیکون‌های اصلی */
.phc-navbar .phc-nav-link i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.phc-navbar .phc-nav-link:hover,
.phc-navbar .dropdown.show > .phc-nav-link {
    color: var(--phn-hover-text) !important;
    background-color: var(--phn-hover-bg) !important;
}

/* مخفی کردن فلش پیش‌فرض قالب */
.phc-navbar .caret { display: none !important; }

/* --- تضمین فلکس بودن آیتم‌های منو برای تراز عمودی --- */
.phc-navbar .dropdown > a {
    display: flex !important;
    align-items: center !important;
}

/* --- فلش اصلی بازشو (موبایل و پیش‌فرض) --- */
.phc-navbar .dropdown > a::after {
    content: "";
    display: block;
    border: solid rgb(157 157 157);
    border-width: 0 2px 2px 0;
    padding: 3.5px;
    transform: rotate(45deg); /* فلش رو به پایین v */

    margin-right: auto !important; /* در موبایل به انتهای کادر میرود */
    margin-left: 0.5rem !important;
    margin-top: auto !important;
    margin-bottom: auto !important;

    top: 0 !important;
    align-self: center !important; 

    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.6;
}

.phc-navbar .dropdown.show > a::after,
.phc-navbar .dropdown.open > a::after {
    transform: rotate(-135deg) translate(-2px, -2px) !important; 
    top: 0 !important;
    opacity: 1;
}

.phc-navbar .phc-highlight-success { color: #10b981 !important; }
.phc-navbar .phc-highlight-warning { color: #f59e0b !important; }
.phc-navbar .phc-highlight-primary { color: #3b82f6 !important; } /* رنگ اختصاصی فروشگاه */

/* =========================================
   استایل موبایل
   ========================================= */
@media (max-width: 991px) {
    .phc-navbar {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.3rem !important;
        padding: 0.5rem !important;
    }

    .phc-navbar > li {
        width: 100% !important;
    }

    .phc-navbar .phc-nav-link {
        padding: 0.8rem 1rem !important;
        width: 100% !important;
        border-radius: 0.6rem !important;
    }

    .phc-navbar .dropdown-menu {
        /* تغییرات مهم برای حالت آکاردئونی موبایل */
        position: static !important; 
        display: none; 
        border: none !important; 
        box-shadow: none !important; 
        background: transparent !important; 
        padding: 0 !important;
        margin: 0.5rem 1rem 0 0 !important; /* تورفتگی از سمت راست */
        width: auto !important;
        min-width: 0 !important;
        transform: none !important;
    }

    .phc-navbar .dropdown-menu .dropdown-item {
        color: #64748b !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0.6rem 0.8rem !important;
        font-size: 0.85rem !important;
        border-radius: 0.4rem !important;
        background-color: transparent !important;
        transition: all 0.2s;
    }

    .phc-navbar .dropdown-menu .dropdown-item::before {
        content: "";
        display: inline-block;
        border: solid #cbd5e1;
        border-width: 0 1.5px 1.5px 0;
        padding: 2.5px;
        transform: rotate(135deg); 
        margin-left: 0.6rem;
        transition: all 0.2s ease;
    }

    .phc-navbar .dropdown-menu .dropdown-item:hover {
        background-color: rgba(0,0,0,0.03) !important;
        color: var(--phn-hover-text) !important;
    }

    .phc-navbar .dropdown-menu .dropdown-item:hover::before {
        border-color: var(--phn-hover-text);
    }

    .phc-navbar .dropdown-menu .dropdown-item i {
        display: none !important;
    }

    .phc-navbar .dropdown.open .dropdown-menu,
    .phc-navbar .dropdown.show .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
    }
}


/* =========================================
   استایل دسکتاپ
   ========================================= */
@media (min-width: 992px) {
    .phc-navbar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 0px !important;
        width: 100%; /* نیاز است تا کل عرض را برای هل دادن پر کند */
    }

    .phc-navbar > li {
        margin: 0 !important;
        padding: 0 2px !important;
        flex-grow: 0 !important;
    }

    /* ----- استایل ویژه برای چسباندن دکمه به سمت چپ ----- */
    .phc-navbar .push-left {
        margin-right: auto !important; 
    }

    .phc-navbar .phc-nav-link {
        padding: 0.5rem 0.6rem !important;
    }

    /* اصلاح جایگاه فلش در دسکتاپ */
    .phc-navbar .dropdown > a::after {
        margin-right: 0.3rem !important; /* نزدیک شدن فلش به متن */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        top: -2px !important; /* کشیدن فلش کمی به سمت بالا برای تراز دقیق با متن */
    }

    /* اصلاح حالت باز شده فلش در دسکتاپ */
    .phc-navbar .dropdown.show > a::after,
    .phc-navbar .dropdown:hover > a::after {
        transform: rotate(-135deg) translate(-1px, -2px) !important;
        top: 0 !important; 
    }

    .phc-navbar .dropdown::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 15px; 
        background: transparent;
        z-index: 999;
    }

    .phc-navbar .dropdown-menu {
        position: absolute !important;
        top: calc(100% + 12px) !important;
        right: 0 !important;
        left: auto !important;
        /* تغییر مهم: جلوگیری از تاثیر کلاس show بوت استرپ هنگام کلیک */
        display: none !important; 
        border: 1px solid #e2e8f0 !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1) !important;
        background: var(--phn-dropdown-bg) !important;
        padding: 0.5rem !important;
        min-width: 220px !important;
        z-index: 1000;
        /* تغییر مهم: خنثی کردن استایل‌های درون‌خطی جاوااسکریپت بوت استرپ */
        transform: none !important;
        margin: 0 !important;
    }

    .phc-navbar .dropdown:hover .dropdown-menu {
        display: block !important;
        animation: fadeIn 0.2s ease;
    }

    .phc-navbar .dropdown-menu .dropdown-item {
        color: var(--phn-text) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-size: 0.9rem;
        border-radius: 0.4rem;
        padding: 0.5rem 0.8rem !important;
        white-space: normal !important;
        transition: all 0.2s;
    }

    .phc-navbar .dropdown-menu .dropdown-item::before {
        content: "";
        display: inline-block;
        border: solid #94a3b8;
        border-width: 0 1.5px 1.5px 0;
        padding: 2.5px;
        transform: rotate(135deg); 
        margin-left: 0.6rem;
        transition: all 0.2s ease;
    }

    .phc-navbar .dropdown-menu .dropdown-item:hover {
        background-color: var(--phn-hover-bg) !important;
        color: var(--phn-hover-text) !important;
    }

    .phc-navbar .dropdown-menu .dropdown-item:hover::before {
        border-color: var(--phn-hover-text);
    }

    .phc-navbar .dropdown-menu .dropdown-item i {
        display: none !important;
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* AlvandNetwork visual identity, based on the main site's style.css. */
@font-face {
  font-family: IRANYekan;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/IRANYekanXVF.woff") format("woff");
}

:root {
  --hp-font: IRANYekan, system-ui, -apple-system, sans-serif;
  --hp-page: #f3f7ff;
  --hp-surface: #fff;
  --hp-surface-soft: #f8fafc;
  --hp-ink: #0f172a;
  --hp-ink-secondary: #334155;
  --hp-muted: #64748b;
  --hp-line: #e2e8f0;
  --hp-primary: #2563eb;
  --hp-primary-hover: #1d4ed8;
  --hp-primary-line: #dbeafe;
  --hp-primary-soft: #eff6ff;
  --hp-indigo: #4f46e5;
  --hp-violet: #7c3aed;
  --hp-gradient: linear-gradient(115deg, var(--hp-primary), var(--hp-indigo));
  --hp-control-radius: 12px;
  --hp-card-radius: 24px;
  --hp-card-shadow: 0 11px 30px -20px rgba(25, 55, 113, .24);
  --hp-focus: 0 0 0 .2rem rgba(37, 99, 235, .21);
  --hp-background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.015) 0%, transparent 50%),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  --hp-text-size: .9375rem;
  --hp-text-leading: 1.75;
  --hp-text-tracking: -.01em;
}

body {
  min-height: 100vh;
  font-family: var(--hp-font);
  color: var(--hp-ink);
  font-size: var(--hp-text-size);
  font-weight: 400;
  line-height: var(--hp-text-leading);
  letter-spacing: var(--hp-text-tracking);
  -webkit-font-smoothing: antialiased;
}

/* One viewport-sized backdrop, matching alvandnetwork.com/assets/css/style.css. */
body.primary-bg-color {
  height: auto;
  background: var(--hp-page);
  isolation: isolate;
}

body.primary-bg-color::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--hp-background);
  pointer-events: none;
}

.hp-page-grid {
  position: fixed;
  inset: 0;
  background-image:
      linear-gradient(rgba(15, 23, 42, 0.015) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 23, 42, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 85%);
  pointer-events: none;
  z-index: -1;
}

[dir="rtl"] body {
  text-align: right;
}

a {
  color: var(--hp-primary);
}

a:hover {
  color: var(--hp-primary-hover);
}

img, video {
  max-width: 100%;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 3px;
}

section#main-body {
  min-width: 0;
  min-height: 52vh;
  background: transparent;
}

.primary-content,
.moduleoutput,
.tab-pane {
  min-width: 0;
  max-width: 100%;
}

#main-body .primary-content {
  overflow-wrap: anywhere;
}

/* Bootstrap 4 and WHMCS components inherited by module templates. */
.btn,
.form-control,
.custom-select,
.form-select,
.input-group-text {
  font-family: inherit;
  border-radius: var(--hp-control-radius);
}

.btn {
  font-weight: 400;
}

.btn-primary,
.moduleoutput .modulebutton,
.phc-btn-primary {
  color: #fff;
  border-color: transparent;
  background: var(--hp-gradient);
}

.btn-primary:not(.disabled):not(:disabled):hover,
.btn-primary:not(.disabled):not(:disabled):active,
.show > .btn-primary.dropdown-toggle,
.moduleoutput .modulebutton:hover,
.phc-btn-primary:hover {
  color: #fff;
  border-color: var(--hp-primary-hover);
  background: var(--hp-primary-hover);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: var(--hp-focus);
}

.btn-outline-primary {
  color: var(--hp-primary-hover);
  border-color: #b9d0f8;
}

.btn-outline-primary:hover {
  color: var(--hp-primary-hover);
  border-color: var(--hp-primary);
  background-color: var(--hp-primary-soft);
}

.btn-default {
  color: var(--hp-ink-secondary);
  border: 1px solid var(--hp-line);
  background: var(--hp-surface);
}

.btn-default:hover {
  color: var(--hp-primary-hover);
  border-color: var(--hp-primary-line);
  background: var(--hp-primary-soft);
}

.form-control,
.custom-select,
.form-select {
  color: var(--hp-ink);
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid #cbd5e1;
  background-color: var(--hp-surface);
}

.form-select {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  min-height: calc(1.5em + .75rem + 2px);
}

.input-group-text {
  color: var(--hp-ink-secondary);
  border-color: #cbd5e1;
  background-color: var(--hp-surface-soft);
}

.form-control:focus,
.custom-select:focus,
.form-select:focus {
  border-color: var(--hp-primary);
  box-shadow: var(--hp-focus);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled,
.form-select:disabled {
  background-color: #f1f5f9;
}

[dir="rtl"] .custom-select {
  padding-right: .75rem;
  padding-left: 1.75rem;
  background-position: left .75rem center;
}

[dir="rtl"] .input-group > .input-group-prepend {
  margin-left: -1px;
  margin-right: 0;
}

[dir="rtl"] .input-group > .input-group-append {
  margin-right: -1px;
  margin-left: 0;
}

[dir="rtl"] .input-group > :is(.form-control, .custom-select, .form-select):not(:last-child),
[dir="rtl"] .input-group > .input-group-prepend > :is(.btn, .input-group-text) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--hp-control-radius);
  border-bottom-right-radius: var(--hp-control-radius);
}

[dir="rtl"] .input-group > :is(.form-control, .custom-select, .form-select):not(:first-child),
[dir="rtl"] .input-group > .input-group-append > :is(.btn, .input-group-text) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: var(--hp-control-radius);
  border-bottom-left-radius: var(--hp-control-radius);
}

[dir="rtl"] .input-group > :is(.form-control, .custom-select, .form-select):not(:first-child):not(:last-child) {
  border-radius: 0;
}

.card,
.panel,
.well,
.modal-content {
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-card-radius);
  background-color: var(--hp-surface);
  box-shadow: var(--hp-card-shadow);
}

.card-header,
.card-footer,
.panel-heading,
.panel-footer,
.modal-header,
.modal-footer {
  border-color: var(--hp-line);
  background-color: var(--hp-surface-soft);
}

.card-header:first-child,
.panel-heading:first-child,
.modal-header:first-child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

.card-footer:last-child,
.panel-footer:last-child,
.modal-footer:last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

.panel-heading,
.panel-footer,
.panel-body,
.well {
  padding: 1rem;
}

.panel-heading {
  border-bottom: 1px solid var(--hp-line);
}

.panel-footer {
  border-top: 1px solid var(--hp-line);
}

.panel-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.alert, .list-group, .dropdown-menu {
  border-radius: var(--hp-control-radius);
}

.dropdown-menu {
  max-width: min(30rem, calc(100vw - 2rem));
  border-color: var(--hp-line);
  box-shadow: var(--hp-card-shadow);
}

[dir="rtl"] .dropdown-menu {
  text-align: right;
}

.dropdown-item {
  white-space: normal;
}

.dropdown-item:is(:hover, :focus),
.list-group-item-action:is(:hover, :focus) {
  color: var(--hp-primary-hover);
  background: var(--hp-primary-soft);
}

.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link {
  color: #fff;
  border-color: var(--hp-primary);
  background: var(--hp-primary);
}

.table {
  color: var(--hp-ink-secondary);
}

.table:not(.table-dark) :is(th, td) {
  border-color: var(--hp-line);
}

.table:not(.table-dark) thead:not(.thead-dark) th {
  background-color: var(--hp-surface-soft);
  color: var(--hp-ink);
}

.table-hover tbody tr:hover {
  background-color: var(--hp-primary-soft);
}

.table-responsive,
.moduleoutput .table-responsive,
.dataTables_wrapper .listtable {
  max-width: 100%;
  overflow-x: auto;
}

.badge,
.label {
  padding: .4em .65em;
  border-radius: 999px;
  white-space: normal;
}

.label {
  display: inline-block;
  line-height: 1.35;
  font-weight: 700;
  color: var(--hp-ink);
  background-color: var(--hp-surface-soft);
}

.badge-primary, .label-primary { color: #fff; background-color: var(--hp-primary); }
.badge-success, .label-success { color: #065f46; background-color: #d1fae5; }
.badge-info, .label-info { color: #155e75; background-color: #cffafe; }
.badge-warning, .label-warning { color: #92400e; background-color: #fef3c7; }
.badge-danger, .label-danger { color: #991b1b; background-color: #fee2e2; }

.bg-primary-soft { background-color: var(--hp-primary-soft); }
.bg-light-soft { background-color: var(--hp-surface-soft); }
.bg-info-soft { background-color: #ecfeff; }
.bg-success-soft { background-color: #ecfdf5; }
.bg-warning-soft { background-color: #fffbeb; }
.bg-danger-soft { background-color: #fef2f2; }

.phc-icon-box,
.phc-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--hp-control-radius);
}

.moduleoutput img,
.moduleoutput iframe,
.primary-content iframe {
  max-width: 100%;
}

.moduleoutput .table {
  margin-bottom: 0;
}

/* Client header: glass surface and controls shared with the main site. */
.alh-header {
  /* Stay in document flow: the header leaves the viewport on scroll. */
  position: relative;
  top: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  z-index: 1030;
}

.alh-topbar {
  background: transparent;
  border-bottom: 0;
}

.alh-main {
  padding: 8px 0 12px;
}

.alh-main .alh-header-card {
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 12px 30px -21px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .72);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .alh-main .alh-header-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .44));
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
}

.alh-header-main {
  min-height: 72px;
  padding-inline: 24px;
}

.alh-brand img {
  width: 132px;
  height: auto;
  max-width: 100%;
}

.alh-nav-shell {
  padding: 5px 14px 7px;
  border-color: rgba(219, 229, 245, .65);
}

.alh-nav-link {
  border-radius: 12px;
  color: #192846 !important;
  font-size: .8rem;
  font-weight: 650;
}

.alh-nav-item:is(:hover, :focus-within, .is-current) > .alh-nav-link {
  background-color: #edf3ff;
  border-color: #dbe5f5;
  color: #204fb7 !important;
}

.alh-header .alh-nav-icon {
  background: transparent;
  border-color: transparent;
  color: #516483;
}

.alh-account,
.alh-action-btn,
.alh-mobile-trigger {
  border-radius: 12px;
}

.alh-header .alh-account,
.alh-header .alh-action-btn {
  background: rgba(255, 255, 255, .55);
  border-color: #dbe5f5;
}

.alh-header .alh-account:is(:hover, :focus-visible),
.alh-header .alh-action-btn:is(:hover, :focus-visible) {
  background: #edf3ff;
  color: #204fb7 !important;
}

.alh-header .alh-login-btn,
.alh-header .alh-nav-extra-link.alh-nav-cta-primary,
.alh-drawer .alh-drawer-cta-primary {
  color: #fff !important;
  background: linear-gradient(135deg, #316fdf, #595ce5) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, .3);
}

.alh-header .alh-login-btn {
  border-radius: 18px;
}

.alh-header .alh-account-avatar {
  background: linear-gradient(135deg, #316fdf, #595ce5);
  border-radius: 50%;
}

button.alh-nav-link {
  cursor: pointer;
}

.alh-has-dropdown.alh-hover-open .alh-nav-chevron {
  transform: rotate(180deg);
}

.alh-header .alh-mega {
  top: calc(100% + 8px);
  width: 288px;
  max-height: min(440px, 62vh);
  overflow-y: auto;
  padding: 7px 10px;
  border: 1px solid #dbe5f5;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff, #f4f7ff);
  box-shadow: 0 20px 48px -18px rgba(25, 40, 70, .34);
}

.alh-mega-grid {
  row-gap: 4px;
}

.alh-mega-grid > hr {
  width: auto;
  margin: 2px 6px;
}

.alh-mega-link {
  min-height: 40px;
  padding: 3px 8px;
  gap: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .64);
}

.alh-mega-link:is(:hover, :focus-visible, .is-current) {
  border-color: #dbe5f5;
  background: #edf3ff;
}

.alh-mega-link-icon {
  border-radius: 10px;
}

.alh-mega-link-copy strong {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.6;
}

.alh-header .alh-user-menu,
.alh-header .alh-notification-menu {
  border-radius: 18px !important;
}

.alh-drawer {
  background: var(--hp-surface-soft);
}

/* Dashboard, auth and footer use the same surfaces and actions as the site. */
.alvand-login-hero,
.login-brand-side {
  background:
    radial-gradient(ellipse at top left, rgba(124, 58, 237, .1), transparent 58%),
    radial-gradient(ellipse at bottom right, rgba(37, 99, 235, .12), transparent 62%),
    var(--hp-surface-soft);
  border: 1px solid var(--hp-primary-line);
  box-shadow: var(--hp-card-shadow);
  color: var(--hp-ink);
}

/* The homepage console treatment spans the full dashboard introduction. */
.alvand-home-26 .av-hero {
  --hp-console-line: rgba(173, 200, 255, .2);
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  align-items: center;
  min-height: 0;
  padding: clamp(14px, 1.9vw, 26px);
  gap: clamp(14px, 3vw, 38px);
  margin-bottom: 16px;
  border-radius: 23px;
  border-color: var(--hp-console-line);
  background:
    radial-gradient(ellipse at top right, rgba(72, 106, 211, .25), transparent 62%),
    radial-gradient(ellipse at bottom left, rgba(115, 92, 224, .25), transparent 60%),
    linear-gradient(148deg, #182749, #0b152d 70%, #121c3c);
  color: #edf5ff;
  box-shadow: 0 22px 42px -28px rgba(22, 45, 94, .65), inset 0 1px rgba(255, 255, 255, .08);
  isolation: isolate;
}

.alvand-home-26 .av-hero::before {
  opacity: 1;
  background-image:
    linear-gradient(rgba(184, 206, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 206, 255, .055) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 98%);
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 98%);
}

.alvand-home-26 .av-hero::after {
  display: none;
}

.alvand-home-26 .av-hero-main {
  min-width: 0;
  padding: 0;
}

.alvand-home-26 .av-hero-badge {
  min-height: 24px;
  margin-bottom: 8px;
  border-color: var(--hp-console-line);
  background: rgba(96, 165, 250, .1);
  color: #bcd5ff;
  font-size: 11px;
  font-weight: 650;
}

.alvand-home-26 .av-hero-badge i {
  color: #93c5fd;
}

.alvand-home-26 .av-hero-title {
  margin-bottom: 5px;
  color: #f8fafc;
  font-size: clamp(17px, 1.6vw, 24px);
  font-weight: 750;
  line-height: 1.65;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.alvand-home-26 .av-hero-title span {
  color: #a5c9ff;
  background: linear-gradient(110deg, #99d5ff, #a5b9ff 58%, #c4b5fd);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.alvand-home-26 .av-hero-desc {
  margin: 0;
  color: #c0cee5;
  font-size: .8rem;
  font-weight: 450;
  line-height: 1.8;
}

.alvand-home-26 .av-hero-side {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  gap: 8px;
  border-radius: 16px;
  border-color: var(--hp-console-line);
  background: rgba(132, 166, 244, .085);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.alvand-home-26 .av-credit-head {
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.alvand-home-26 .av-credit-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.alvand-home-26 .av-credit-label {
  margin: 0;
  color: #b5c5df;
  font-size: 11px;
  font-weight: 450;
}

.alvand-home-26 .av-credit-value {
  color: #fff;
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  font-weight: 750;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.alvand-home-26 :is(.av-credit-icon, .av-credit-shortcut-icon) {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: .8rem;
}

.alvand-home-26 .av-credit-shortcut.status-center {
  min-height: 34px;
  padding: 3px 7px;
  border-radius: 10px;
}

.alvand-home-26 .av-credit-shortcut-copy strong {
  color: #edf5ff;
  font-size: 12px;
  font-weight: 650;
}

.alvand-home-26 .av-credit-shortcut:hover {
  background: rgba(96, 165, 250, .19);
  border-color: rgba(147, 197, 253, .36);
  transform: none;
}

@media (max-width: 767.98px) {
  .alvand-home-26 .av-hero {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 18px;
  }
}

.alvand-login-hero::before,
.alvand-login-hero::after {
  opacity: .26;
}

.alvand-login-hero h1,
.alvand-login-brand-fallback,
.login-brand-side .brand-title {
  color: var(--hp-ink);
}

.alvand-login-hero p,
.login-brand-side .brand-subtitle {
  color: var(--hp-muted);
}

.alvand-login-secure-badge {
  border: 1px solid var(--hp-primary-line);
  background: rgba(255, 255, 255, .88);
  color: var(--hp-primary-hover) !important;
  box-shadow: var(--hp-card-shadow);
}

/* Dashboard typography follows the hierarchy of the public website. */
.alvand-home-26 .av-stat-label {
  font-size: .75rem;
  font-weight: 650;
}

.alvand-home-26 .av-stat-value {
  font-size: clamp(1.1rem, 1.65vw, 1.45rem);
  font-weight: 750;
  line-height: 1.4;
}

.alvand-home-26 :is(.av-stat-foot, .av-service-label) {
  font-size: 11px;
  font-weight: 550;
}

.alvand-home-26 .av-panel-copy h5 {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.6;
}

.alvand-home-26 .av-panel-copy p {
  font-size: .72rem;
  font-weight: 450;
  line-height: 1.8;
}

.alvand-home-26 :is(.av-service-name, .av-ticket-title) {
  font-family: var(--hp-font);
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.6;
}

.alvand-home-26 :is(.av-stat, .av-panel, .av-ticket-panel),
.alvand-login-card-b {
  border-color: var(--hp-line);
  box-shadow: var(--hp-card-shadow);
}

.alvand-login-primary,
.premium-login-container .btn-submit,
.phc-register-wrapper .phc-btn-primary {
  background: var(--hp-gradient);
  border-color: transparent;
}

.alvand-login-b,
.phc-register-wrapper {
  background: transparent;
}

.alvand-login-captcha {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
}

.alvand-login-captcha:not(:has(input, iframe, .recaptcha-container)) {
  display: none;
}

#footer.bg-footer {
  margin-top: 14px;
  padding: 7px 0 !important;
  border-top-color: var(--hp-line);
  background: transparent !important;
}

.bg-footer::before {
  display: none;
}

.hp-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 14px;
}

.bg-footer .hp-footer-brand p {
  margin: 0;
  padding: 0;
  color: var(--hp-muted);
  font-size: .72rem !important;
  font-weight: 450;
  line-height: 1.6;
}

.hp-footer-links {
  gap: 2px 7px;
}

.hp-footer-links .nav-link {
  padding: 3px 6px;
  border-radius: 7px;
  font-size: .74rem;
  font-weight: 550;
  line-height: 1.6;
}

.hp-footer-links .nav-link:hover {
  background: var(--hp-primary-soft);
}

@media (max-width: 991.98px) {
  .alh-header-main {
    min-height: 62px;
    padding-inline: 10px;
  }

  .alh-main .alh-header-card {
    border-radius: 18px;
  }
}

@media (max-width: 767.98px) {
  .moduleoutput > .table:not(.table-responsive) {
    display: block;
    overflow-x: auto;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_paginate {
    max-width: 100%;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_filter label {
    max-width: 100%;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .alvand-login-actions {
    flex-wrap: wrap;
  }

  html[data-hp-page="oauth"] section#content {
    margin: 16px;
  }

  html[data-hp-page="oauth"] .content-padded {
    padding: 20px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alh-header,
  .alh-drawer,
  .premium-login-container {
    animation: none;
    transition: none;
  }
}

@media print {
  body.primary-bg-color::before,
  .hp-page-grid,
  #header,
  #footer {
    display: none !important;
  }
}

/* Shared utilities and remaining component details. */

.hp-invited-users-row.hp-invited-users-row {
  background: #f8fafc;
  border-radius: 8px;
  border-bottom: none;
}

.hp-invited-users-label.hp-invited-users-label {
  color: #475569;
}

.hp-initially-hidden.hp-initially-hidden {
  display: none;
}

.hp-form-line.hp-form-line {
  border-color: #f1f3f5 !important;
}

.hp-icon-45.hp-icon-45 {
  width: 45px;
  height: 45px;
}

.hp-text-emphasis.hp-text-emphasis {
  font-size: 1.1rem;
}

.hp-selector-surface.hp-selector-surface {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

.hp-icon-70-xl.hp-icon-70-xl {
  width: 70px;
  height: 70px;
  font-size: 2rem;
}

.hp-alert-affiliate.hp-alert-affiliate {
  background-color: #e6f8ec;
  color: #008a3d;
}

.hp-icon-60.hp-icon-60 {
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
}

.hp-border-dashed.hp-border-dashed {
  border: 2px dashed #e9ecef !important;
}

.hp-affiliate-balance.hp-affiliate-balance {
  border-color: #f1f3f5 !important;
  background-color: #f8fbfa;
}

.hp-affiliate-amount.hp-affiliate-amount {
  font-size: 1.8rem;
}

.hp-affiliate-withdraw.hp-affiliate-withdraw {
  font-size: 1.1rem;
  border-radius: 50px;
}

.hp-icon-80-xl.hp-icon-80-xl {
  width: 80px;
  height: 80px;
  font-size: 2.5rem;
}

.hp-affiliate-terms.hp-affiliate-terms {
  max-width: 500px;
}

.hp-affiliate-activate.hp-affiliate-activate {
  border-radius: 50px;
  font-size: 1.2rem;
}

.hp-icon-80-round.hp-icon-80-round {
  width: 80px;
  height: 80px;
  font-size: 2.5rem;
  border-radius: 50%;
}

.hp-narrow-content.hp-narrow-content {
  max-width: 600px;
}

.hp-icon-50-lg.hp-icon-50-lg {
  width: 50px;
  height: 50px;
  font-size: 1.5rem;
}

.hp-gap-10px.hp-gap-10px {
  gap: 10px;
}

.hp-gap-15px.hp-gap-15px {
  gap: 15px;
}

.hp-site-border.hp-site-border {
  border: 1px solid #e2e8f0;
}

.hp-icon-profile-success.hp-icon-profile-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.hp-icon-profile-warning.hp-icon-profile-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.hp-field-help.hp-field-help {
  font-size: 0.8rem;
}

.hp-icon-profile-marketing.hp-icon-profile-marketing {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}

.hp-soft-surface.hp-soft-surface {
  background: #f8fafc;
}

.hp-icon-profile-contact.hp-icon-profile-contact {
  background: #ffffff;
  color: #3b82f6;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.hp-profile-heading.hp-profile-heading {
  font-size: 1.15rem;
}

.hp-profile-lead.hp-profile-lead {
  font-size: 0.9rem;
}

.hp-min-width-140.hp-min-width-140 {
  min-width: 140px;
}

.hp-icon-55.hp-icon-55 {
  width: 55px;
  height: 55px;
  font-size: 1.5rem;
}

.hp-addon-image.hp-addon-image {
  max-height: 120px;
  opacity: 0.8;
}

.hp-icon-45-lg.hp-icon-45-lg {
  width: 45px;
  height: 45px;
  font-size: 1.25rem;
}

.hp-tab-motion.hp-tab-motion {
  transition: all 0.3s ease;
}

.hp-control-height-40.hp-control-height-40 {
  height: 40px;
}

.hp-icon-40.hp-icon-40 {
  width: 40px;
  height: 40px;
}

.hp-icon-54.hp-icon-54 {
  width: 54px;
  height: 54px;
}

.hp-dns-priority.hp-dns-priority {
  width: 80px;
}

.hp-table-select-column.hp-table-select-column {
  width: 50px;
}

.hp-table-date-column.hp-table-date-column {
  width: 180px;
}

.hp-table-actions-column.hp-table-actions-column {
  width: 150px;
}



.hp-text-justified.hp-text-justified {
  text-align: justify;
}



.hp-icon-40-lg.hp-icon-40-lg {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.hp-pill.hp-pill {
  border-radius: 50px;
}

.hp-icon-70.hp-icon-70 {
  width: 70px;
  height: 70px;
  font-size: 1.75rem;
}

.hp-service-password-button.hp-service-password-button {
  border-radius: var(--hp-control-radius) 0 0 var(--hp-control-radius);
  background: var(--hp-surface-soft);
}

.hp-icon-50.hp-icon-50 {
  width: 50px;
  height: 50px;
}

.hp-sso-status-dot.hp-sso-status-dot {
  font-size: 8px;
}

.hp-sso-switch.hp-sso-switch {
  width: 3rem;
  height: 1.5rem;
}

.hp-register-generate-password.hp-register-generate-password {
  padding: 10px;
  font-size: 0.9rem;
}

.hp-register-password-progress.hp-register-password-progress {
  height: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #cbd5e1;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.hp-register-password-label.hp-register-password-label {
  font-weight: 600;
}

.hp-register-marketing.hp-register-marketing {
  background: rgba(37, 99, 235, 0.04);
  border-radius: 16px;
  padding: 22px;
  margin-top: 15px;
  border: 1px solid rgba(37, 99, 235, 0.1);
}

.hp-register-marketing-title.hp-register-marketing-title {
  color: var(--hp-primary);
  font-size: 1.05rem;
  font-weight: 800;
}

.hp-register-marketing-copy.hp-register-marketing-copy {
  margin-bottom: 15px;
  font-weight: 600;
  line-height: 1.6;
}

.hp-register-marketing-option.hp-register-marketing-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hp-ink);
}

.hp-register-marketing-check.hp-register-marketing-check {
  width: 20px;
  height: 20px;
  accent-color: var(--hp-primary);
  cursor: pointer;
}

.hp-register-terms.hp-register-terms {
  color: var(--hp-primary);
  text-decoration: none;
  font-weight: 700;
}

.hp-domain-logo.hp-domain-logo {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-domain-logo-img.hp-domain-logo-img {
  max-height: 100%;
  object-fit: contain;
}

.hp-domain-currency.hp-domain-currency {
  min-width: 200px;
}

.hp-password-copy-icon.hp-password-copy-icon {
  filter: brightness(0) invert(1);
}

.hp-nav-chevron.hp-nav-chevron {
  font-size: 10px;
  margin-right: 5px;
  opacity: 0.6;
}

.hp-nav-label.hp-nav-label {
  cursor: default;
}

.hp-sidebar-badge.hp-sidebar-badge {
  margin-right: auto !important;
}

.hp-sitejet-preview.hp-sitejet-preview {
  min-height: 130px;
  border: 1px solid #ddd;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}

.hp-sitejet-actions.hp-sitejet-actions {
  gap: 6px;
  min-width: 250px;
}

.hp-payment-frame.hp-payment-frame {
  min-height: 600px;
}

.hp-payment-sticky.hp-payment-sticky {
  top: 2rem;
}


.hp-account-table.hp-account-table {
  display: table;
}

.hp-ox-progress.hp-ox-progress {
  height: 10px;
  margin-top: 10px;
}

.hp-monitor-header-bg.hp-monitor-header-bg {
  background-image: url('../../../assets/img/marketconnect/threesixtymonitoring/section-header-bg.png');
}

.hp-monitor-section-bg.hp-monitor-section-bg {
  background-image: url('../../../assets/img/marketconnect/threesixtymonitoring/section-monitoring-bg.png');
}

.hp-monitor-modal-bg.hp-monitor-modal-bg {
  background-image: url('../../../assets/img/marketconnect/threesixtymonitoring/modal-bg.png');
}

.hp-ticket-department-copy.hp-ticket-department-copy {
  line-height: 1.6;
}

.hp-ticket-department-list-item.hp-ticket-department-list-item {
  margin-bottom: 25px;
}

.hp-upgrade-icon.hp-upgrade-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.hp-usage-icon.hp-usage-icon {
  width: 35px;
  height: 35px;
}

.hp-invoice-heading.hp-invoice-heading {
  color: var(--soft-text-main);
}

.hp-invoice-paid-date.hp-invoice-paid-date {
  font-weight: 600;
  font-size: 0.9rem;
}

.hp-invoice-credit-card.hp-invoice-credit-card {
  background: rgba(59, 130, 246, 0.03);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.hp-official-heading.hp-official-heading {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0;
}

.hp-official-date-row.hp-official-date-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 0.9rem;
}

.hp-official-info-divider.hp-official-info-divider {
  border-bottom: 1px solid #000;
}

.hp-official-tax-label.hp-official-tax-label {
  text-align: left;
  background: #f9f9f9;
}

.hp-official-tax-amount.hp-official-tax-amount {
  text-align: center;
  background: #f9f9f9;
}

.hp-official-total-label.hp-official-total-label {
  text-align: left;
  font-weight: bold;
  background: #f2f2f2;
}

.hp-official-total-amount.hp-official-total-amount {
  text-align: center;
  font-weight: bold;
  background: #f2f2f2;
}

.hp-official-signature-row.hp-official-signature-row {
  margin-top: 50px;
  border: none;
}

.hp-official-signature.hp-official-signature {
  border: none;
  text-align: center;
}

.hp-ticket-customer-item.hp-ticket-customer-item {
  background: #f0fdf4;
}

.hp-ticket-attachments.hp-ticket-attachments {
  background: #f8f9fa;
  border-radius: var(--soft-radius-md);
}

.hp-ticket-attachment-add {
  border-radius: 10px 0 0 10px !important;
}

.hp-ticket-attachment-tip.hp-ticket-attachment-tip {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border-radius: var(--soft-radius-md);
  font-size: 0.85rem;
}

/* Decorative bars used by the account counters. */
.hp-stat-progress {
  display: block;
  width: 100%;
  height: .28rem;
  margin-top: .5rem;
  appearance: none;
  color: var(--hp-primary);
  border: 0;
  border-radius: 999px;
  background: var(--hp-line) !important;
}
.hp-stat-progress.bg-success { color: #059669; }
.hp-stat-progress.bg-warning { color: #d97706; }
.hp-stat-progress::-webkit-progress-bar { border-radius: inherit; background: var(--hp-line); }
.hp-stat-progress::-webkit-progress-value { border-radius: inherit; background: currentColor; }
.hp-stat-progress::-moz-progress-bar { border-radius: inherit; background: currentColor; }

/* Order and account actions share four treatments and two sizes. */
.hp-btn {
  --hp-btn-fill: #fff;
  --hp-btn-ink: var(--hp-ink-secondary);
  --hp-btn-line: var(--hp-line);
  --hp-btn-hover: var(--hp-primary-soft);
  --hp-btn-hover-ink: var(--hp-primary-hover);
  --hp-btn-hover-line: var(--hp-primary-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: .3rem .75rem;
  border: 1px solid var(--hp-btn-line);
  border-radius: 10px;
  background: var(--hp-btn-fill);
  color: var(--hp-btn-ink);
  font: 650 .8rem/1.5 var(--hp-font);
  text-align: center;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.hp-btn-sm {
  min-height: 32px;
  padding: .22rem .65rem;
  font-size: .75rem;
}

.hp-btn-primary {
  --hp-btn-fill: var(--hp-gradient);
  --hp-btn-ink: #fff;
  --hp-btn-line: transparent;
  --hp-btn-hover: var(--hp-primary-hover);
  --hp-btn-hover-ink: #fff;
  --hp-btn-hover-line: transparent;
}

.hp-btn-danger {
  --hp-btn-fill: #fff1f2;
  --hp-btn-ink: #a11636;
  --hp-btn-line: #fecdd3;
  --hp-btn-hover: #ffe4e6;
  --hp-btn-hover-ink: #881337;
  --hp-btn-hover-line: #fda4af;
}

.hp-btn-success {
  --hp-btn-fill: #ecfdf5;
  --hp-btn-ink: #065f46;
  --hp-btn-line: #a7f3d0;
  --hp-btn-hover: #d1fae5;
  --hp-btn-hover-ink: #064e3b;
  --hp-btn-hover-line: #6ee7b7;
}

.hp-btn:hover:not(:disabled, .disabled, [aria-disabled="true"]) {
  color: var(--hp-btn-hover-ink);
  background: var(--hp-btn-hover);
  border-color: var(--hp-btn-hover-line);
  text-decoration: none;
}

.hp-btn:is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: .65;
  cursor: default;
}

.av-hero .hp-btn {
  --hp-btn-fill: rgba(96, 165, 250, .13);
  --hp-btn-ink: #eef5ff;
  --hp-btn-line: rgba(173, 200, 255, .25);
  --hp-btn-hover: rgba(96, 165, 250, .24);
  --hp-btn-hover-ink: #fff;
  --hp-btn-hover-line: rgba(173, 200, 255, .38);
}

.av-hero .hp-btn:focus-visible {
  outline-color: #bfdbfe;
}

/* The clipping and shape are constant, even while decorations animate. */
.alvand-home-26 :is(.av-stat, .av-service, .av-ticket-row),
.soft-srv-widget,
.phc-srv-widget,
.soft-stat-card {
  isolation: isolate;
  overflow: hidden;
  transform-style: flat;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.alvand-home-26 :is(.av-stat, .av-service, .av-ticket-row):hover,
:is(.soft-srv-widget, .phc-srv-widget, .soft-stat-card):hover {
  transform: none;
  border-color: #c9daf5;
  box-shadow: var(--hp-card-shadow);
}

.alvand-home-26 .av-stat {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.alvand-home-26 .av-stat::before {
  inset: 0;
}

.alvand-home-26 .av-panel.card,
.alvand-home-26 .av-ticket-panel.card {
  border-radius: 20px;
  overflow: hidden;
}

.alvand-home-26 .av-main-grid > .av-panel {
  height: auto;
  max-height: none;
}

.alvand-home-26 .av-services {
  min-height: 0;
  max-height: none;
  padding: 3px;
  margin: -3px;
  overflow: visible;
}

.alvand-home-26 .av-services.has-overflow {
  max-height: 296px;
  overflow: auto;
  padding: 3px 3px 8px;
  scrollbar-gutter: stable;
}

.alvand-home-26 .av-service {
  flex-shrink: 0;
  min-width: 0;
}

@media (min-width: 992px) {
  .alvand-home-26 .av-service {
    grid-template-columns: minmax(150px, 1.4fr) minmax(106px, 1.2fr) minmax(80px, .8fr) minmax(108px, 1fr) auto;
    gap: 10px;
  }

  .alvand-home-26 .av-service.service-hosting {
    grid-template-columns: minmax(150px, 1.4fr) minmax(160px, 2fr) minmax(108px, 1fr) auto;
  }
}

@media (max-width: 767.98px) {
  .alvand-home-26 .av-services.has-overflow {
    max-height: none;
    overflow: visible;
  }

  .alvand-home-26 .av-service .hp-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hp-enter {
    animation: hp-surface-in .28s ease-out both;
  }

  #fullpage-overlay .hp-loader {
    animation: hp-loader-spin .85s linear infinite;
  }

  .av-status-notice-loading::before {
    animation: hp-loader-spin 1.05s linear infinite;
  }
}

@keyframes hp-surface-in {
  from { opacity: .78; }
  to { opacity: 1; }
}

@keyframes hp-loader-spin {
  to { transform: rotate(1turn); }
}

#fullpage-overlay {
  display: flex;
}

#fullpage-overlay .inner-wrapper {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  gap: 9px;
  padding: 16px 20px;
  color: var(--hp-ink-secondary);
  border-color: var(--hp-line);
  box-shadow: var(--hp-card-shadow);
}

#fullpage-overlay .msg {
  margin: 0;
  padding: 0;
  font-weight: 600;
}

.hp-loader,
.av-status-notice-loading::before {
  width: 23px;
  height: 23px;
  display: block;
  border: 2px solid #dbe5f5;
  border-top-color: var(--hp-primary);
  border-right-color: var(--hp-violet);
  border-radius: 50%;
}

.av-status-notice-loading::before {
  content: "";
  align-self: end;
  margin-bottom: 7px;
}

@media (prefers-reduced-motion: reduce) {
  :is(.hp-btn, .hp-enter, .av-stat, .av-service, .av-ticket-row, .soft-srv-widget, .phc-srv-widget, .soft-stat-card),
  :is(.av-stat, .av-service, .soft-srv-widget, .phc-srv-widget, .soft-stat-card)::before,
  :is(.av-stat, .av-service, .soft-srv-widget, .phc-srv-widget, .soft-stat-card)::after {
    animation: none;
    transition: none;
  }
}