.vjs-svg-icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  fill: currentColor;
  height: 1.8em;
  width: 1.8em;
}

.vjs-svg-icon:before {
  content: none !important;
}

.vjs-control:focus .vjs-svg-icon, .vjs-svg-icon:hover {
  filter: drop-shadow(0 0 0.25em #fff);
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-modal-dialog, .vjs-button > .vjs-icon-placeholder:before, .vjs-modal-dialog .vjs-modal-dialog-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .vjs-button > .vjs-icon-placeholder:before {
  text-align: center;
}

@font-face {
  font-family: VideoJS;
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABUgAAsAAAAAItAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV33Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADwwAABdk9R/WHmhlYWQAABGcAAAAKwAAADYn8kSnaGhlYQAAEcgAAAAdAAAAJA+RCL1obXR4AAAR6AAAABMAAAC8Q44AAGxvY2EAABH8AAAAYAAAAGB7SIHGbWF4cAAAElwAAAAfAAAAIAFAAI9uYW1lAAASfAAAASUAAAIK1cf1oHBvc3QAABOkAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7xDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADbZCycAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1gUV5auc6urCmxEGrq6VRD6ATQP5dHPKK8GRIyoKApoEBUDAiGzGmdUfKNRM4qLZrUZdGKcGN/GZJKd0SyOWTbfbmZ2NxqzM5IxRtNZd78vwYlJdtREoO7sudVNq6PmmxmKqrqPU+eee173P80Bh39Cu9DOEY4DHZBK3i20D/QRLcfxbE5sEVtwLpZzclw4ibFIkSCJUcZ4MBpMnnzwuKNsGWBL5i3qy6kO2dVpvUpKbkAP9fq62rdeGJ+TM/7C1nbIutfuWrWk5ci4zMxxR1qW/N+9JsmCGXj9VKWhFx/6tr/nz78INDm2C9yPF/fDcxLuyKxLBZ1ZBz2QTi+RSkiH5RrDQJ/GgGQadX9m0YSURs7GpSG905Zsk41uj14yul1OtieZ7QUk5GRG/YiS7PYYPSAZNRed9sq3+bOpz00rKb7pe/ZEZvbALxZAHT3AFoH8GXP3rt67QFn40kt8W13FjLTDb48c+fSi5/7h0P4dL5yz7DPtbmgmYxfQA9RL2+EOfTcvdp+1vmuBpvOll1As1S6ak0IvJzC7sKWJFtJgBd2uWcg+0Zyg7dzQfhcjXRgXGZRf5/a4A58IDU777Nl252AUk4m2ByRRjqTNqIDCEJeAnU3iCFwrkrNwXEzg4yFevBwypzxkcX+AIfk3VEKl3XmWbT8788SzvpvFJaiOezL6QyuSr9VNf97csNu0z3LuhR0wATUxZAfVBwVOy+nQFhxYdWaXlXe4HC4zWGWzzsrLDtmhI9pOWOHv7PTT7XybH1Z0+v2d5Abd3kmG+TsH23CS/KwTxx/JkzEwx6jcQOUc42LLwHJ/J93uZ9ygh3HuZGwqsY9dWDHQ58dxNqyqKRQTYdxwTubiOSs3FiMDkq0WSZQgCT0GBDOg2lxOAd1FlPVGs4AKBAcYHHaP2wPkHaivmLF5zYqnIZrvcHx5gN4k/6tchNW1DtdgNL2KrxEkS/kfnIHoVnp1VjmjpTf5r0lTzLj0mdS28tX+XGorU364eMPmnWVl8J36nlKGw3CZhjEiuMw8h8mKvhGD+4/lElBWjAhLJMg6fTw4zPZ8cOmcGQBm2Qxml1nAm13CpYGq1JKUlJJUzQn1PTAO0mgv6VMMpA/DuRfSWEu4lDIxdbAtdWIKvnn2Vk766CWfz9fpY0sH/UpdP50rfszaVpdVRmvIejEdLMk45s4Bu0EWHjeOySmFyZSiMahvZdNSn29peoI/YexYfKQTLeurTXXwEVLeSfInTWHkkMaeUx7sBvOCSTSj3AlcKjfueyS36tCrXDlgRtF0etFq9jhc1kfKuBT/OwMr0F4UUTTh1AN0g20+H/ScPcsIEsYu9d/zN5PmjprPtNwI1ZZcDK6iC97Mcjp2y2aX36f+QbpGHrgRuHlXJ+Zf6PFRL2uQSp8vxHeF2IoRb8Rd2rhMzsNxSRmEuKK4JFnkojhMcx6jzqHzGMGFcW+MhBj0bhf6cowN+45I4LHvwT6fteu7M42wGRI/pxcg6/MZdEvt1U1XaulHFXuLmqov/MukvRVL35/b3ODM1+4aPjtzeK7zmUkV2h3DN54HaQ9GzJvxHRb6Ks2gB81fwqraT+A7GvZJrRLRofU6G0urNL+zFw3v0FaVDFxsKEZW56F31r6ip6vOL+FCObBPuIMRiXld9RaMdLzRIOGhPey2T9vA/35DmZPK9IWaT9d/WgOGMieYqJ/dzjLIhZU118gbysxrNUGefxD6UO/hyNNllpFTOIbx32kSFQctnweV5PxTMHLjRqiAN+fQE9gL+Xy5WB6MOS4GJJuYbDUHhcKDhHGRbLzOpjsjdM1+iwAZLGeieehACX2hhI7SjK/ZUTNrvVje31TxJiFBGYViWFkCn9PMeX9fS6qVbzfCj4fOCTzDnuWy2c4xA7mdNkA3RS9FH2VeqzdCBlixxbzXjvkHU1I8BOYFb1pZvPIHSSIj4svT8xpzcxtXN+ZKyjdDvbz08niiF3PqV9Tn5NST8vg48MTaY8E5xqSSIsWoWHo+LtAzxdH/GDUyp37CBEYfso04F/NlMTcDJUTpECLY0HFGQHImE8xsEUdgnrQlixIvGhJA1BvxpDHGxEMBYFeNOHcBJlSjwe2JcSfbBEsGOPPBHg/6SBBOCsLLw0SpUxod0Z1bFMfLkbQ3UiZxEyd0Dx8t+SRBu18Q9msFbI4e3p1THEfkSEh7kEJ5orR10qTWDvbgPWn5aWvCYyOAjwgXyjJi34uMjo58L25cmRAeQZWI2PA1QQLsPESAH8WGFwZZ4SPoR73BHPzIPMJj9AreBzKUmrH4todT18ANvi1oc3YGjUT/0j+ExUwq8PI9BLaCQIpvewwYu2evAG/Vo/5avPdY7o+BemLLXw3y+AdkzP9bpIxB1wm5EYq8fesHbPEPtm6HrHvtx4jcGPR8fDDpkZBefIjB46QnlUNRltv4Z/pO/J6dxEjhYAtmoMeq+GozvUVvNYOW3m6GCIhoprcfr97B8AcIQYsfD8ljUvGNjvkrpj0ETA48ZMIxCeqsRIsQALE0gi2GB+glSOfbOjW3GSBM9yPq8/rpJXrJDz0BPxV6xdN4uiCGDQed3WhgFkBUZEFsmeyyBpzXrm7UGTBZG8Lh5aubFufk5eUsbrrFGr7McYdbltxa0nKYqRKbQjvikXYkTGM0f2xuyM3Ly21oXnWfvf6I1BmZwfh7EWWIYsg2nHhsDhOnczhJcmI6eBAmy3jZ3RiJmKQR/JA99FcwsfaVbNDDyi1rL9NPj9hfo61wjM6BjzOLijLpeTgk/pL+ip6tfYWupzeOgPny2tcUu9J/9mhxJlgyi985NFRbvCVewXUNXLJaW0RxZqtRYtnfYdcYomXQWdnJHQA3jiEEkeTQWcWxdDP9IvvVWvo2TK553XEMEq+s69/QDU1Q7p0zxwsm9qS379whr8NI2PJqLUyGyfNeX3eFfnJU2U+uHR9cVV1IqgurqwuV44XVp0h2qN55X5XJwtk59yP0IZuHrqBOBIuIYhkcoT6Kx79Pu2HS/IPZIMOqLWs/pteOOk4NPgEb6QAIdAPsyZk5Mwd+wVaHMexJv719W7xCu2l37UG6lvYdBcvHa08p89741zd63phTRGqL5ggo6SlvdbWXzCqsPq78NnSu7wnKy2HNZbVoRCI7UJEOyRj+sPE002tOOY7Qa5fXboFWkLNeqYUSZRocp9XwSUZxcQZ9Hw6LV2pOoVmvHQEDbGIENEG5i6bLgMSM4n8+FNLTtAds99DaWEvgcf4o5SyYe9x+kF6/tGoTPAdRmS/XQIEy//QxKC2oqioAI3tS5auvxCtzT6y6RK8fhChYcwCJaMJhxc0vqSxQ/qmgsrKAlBZUHlauheTpvd9uj5DnLzJct6qfq5fXbYHVIGcfrIVJihbaVLu1wW7Vbs8zK0A8e9Jvb91S9cVMjPrazD6gpfeZTXzYbCFMcppVRsGMpp55OWgx1/3JeAxW1Y7AORgM/m3rWrsdLkQVmEVSU16cX/e7uvkvpqRiQsG06XJ0t64Tf+l0nG1dt025gyOIZlvq5u9KSU1N2TW/rsWnnMRPyTDkctbhvIcNvYIXWyLzdwYLoYesUbaQG4iK2cWO2gdpeUYLqDD0MUTOPhDIGnZEs58yArR86FznuWEsU4YDi2x26dA4klkn8Qa6vhk2QUfX4Jxm/ngX9r7ogn1dmlmwqZmuhxtdg9XN/DEcUgqb+9hMyNansfaQET2mcROCmGEMVqxm5u+h6kN2MOwgqykV2wH9yQG9DvVFU38Pogaf4FVuE62KI/oJ02RDdWW2w5dqQwU/8+N1q1DlvsL863u61KLE7x/o8w0VJQM/Y/SQ3unIrqxueEa1BqT5VFNsO7p39/UC771a77RowpaKe9nvJQIT1Pog5LGx8XblBKmCNGTf3xMogAQvPnz9PYKX/08sVDTG1OKUlOLUgS/UaZtm1NAaYTsl7i9ZQ+L6O4Rl0OGa577LuWvc+C+x96/vYh0lLBuM+7XwI/dTLtdT7v4d6rRTWDnku0IBrqFnZ5bVIqKP8lasJlithWnaLhTsr8qFJBulF/70p4undou36HeTJ5+jv1fCybeQ8nH3+Xv6aENczmOFlab+hqMDg1rLOt12A+tiUFrYDwQ6c3RUJp601nzegTNX6WlYAI2zSUV945F6zU56ZmZVQaWspWcIADxJ9GmljQUnL2p2Dpr5T8H+5KJFu+vqBq8qvyHRzStLHPEO5SPYCV9nZe0yZT2RcH0oHvegSzNEJ0oGWU8iQWM12dgPEugngVceGIwZgPFp0BiT1a0a3R5Rcot7ihfA1J/20v96jX7zmTX9s583H0kwx6WnLd09cXrR9LGroOa9sHNbdyz8wcKk5lqhaVFJZNwmqtw884MXNdvJujpBa3xzuSaZH9sxa06Z7x+HJSduPbdYHv/DgmEhfbehvlmGN7JUkcG78GDM12CeyFFTPNqVeNxC1gzjz+c2nVo63Xxs8rKJWXoBJM0tmEbfGm4qzpoOH3xpzQfyxLzW1gnE9NHo6tol1eMEic4ZVPrjnVi0kqAe2sQ2bgqupScaq8WGlUWgWHI51SKJl/UYT6zccNsCSkBtiVZLsiefuFSDYT3Fi8Zk7EUnmjTRYtsFeuDDJS05MW79M3mr3mla+d8dzac31KTPmBYfFiYSUef48PhPjm9ryZsSGZZkdNvzq0Y9rdNcwDq5Dg5C3QW+7UN64IKptvS3tvHbvu5c9pv1Exau21rc9LIpwpQwUjTq8576yeVDz5+4WZ1nXT43wV60rPLJbDp/UksNrP3iQ2SA63Pst058gOYDbhRnRUw8l/sRt4HbxPzO4WYpInCpuVgSbVh6JXuwnnJngKTTCwaPWmG5Xbhpm1U0Yt3FyBGpGYemPM77p2TD904JjgJ2QFpFLeYpGx8X15Qx1Zk31p5ki9ZLUuXE0lmuJlcakJMVLeFS1iIvrB8drY0aloilakqCZwzwRORtxlgwxS4IThggJd4TDxoiaAIT80fFPGrCPPru+puFn504P/ybr4ihA/6dKASLshEJic7xE8tmzu3KzA7TABBe8y5fNbWo3ilQn/SuFKM16b2l5bOeayqfGhYmhIulU+fVNDdWVv4NMzX10MBHyPR5uhWUu8D9P1VnIMt4nGNgZGBgAOJ/1bf64vltvjJwszOAwAOlmqvINEc/WJyDgQlEAQA+dgnjAHicY2BkYGBnAAGOPgaG//85+hkYGVCBPgBGJwNkAAAAeJxjYGBgYB/EmKMPtxwAhg4B0gAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAe4CLgKKAtAC/ANiA4wDqAPgBDAEsATaBQgFWgXABggGLgZwBqwG9gdOB4oH0ggqCHAIhgicCMgJJAlWCYgJrAnyCkAKdgrkC7J4nGNgZGBg0GdoZmBnAAEmIOYCQgaG/2A+AwAaqwHQAHicXZBNaoNAGIZfE5PQCKFQ2lUps2oXBfOzzAESyDKBQJdGR2NQR3QSSE/QE/QEPUUPUHqsvsrXjTMw83zPvPMNCuAWP3DQDAejdm1GjzwS7pMmwi75XngAD4/CQ/oX4TFe4Qt7uMMbOzjuDc0EmXCP/C7cJ38Iu+RP4QEe8CU8pP8WHmOPX2EPz87TPo202ey2OjlnQSXV/6arOjWFmvszMWtd6CqwOlKHq6ovycLaWMWVydXKFFZnmVFlZU46tP7R2nI5ncbi/dDkfDtFBA2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkXlT2zAQxf1C4thJAwRajt4HRy8VMwwfSJHXsQZZcnUQ+PYoTtwpM+wf2t9brWZ2n5JBsol58nJcYYAdDDFCijEy5JhgileYYRd72MccBzjEa7zBEY5xglO8xTu8xwd8xCd8xhd8xTec4RwXuMR3/MBP/MJvMPzBFYpk2Cr+OF0fTEgrFI1aHhxN740KDbEmeJpsWZlVj40s+45aLuv9KijlhCXSjLQnu/d/4UH6sWul1mRzFxZeekUuE7z10mg3qMtM1FGQddPSrLQyvJR6OaukItYXDp6pCJrmz0umqkau5pZ2hFmm7m+ImG5W2t0kZoJXUtPhVnYTbbdOBdeCVGqpJe7XKTqSbRK7zbdwXfR0U+SVsStuS3Y76em6+Ic3xYiHUppc04Nn0lMzay3dSxNcp8auDlWlaCi48yetFD7Y9USsx87G45cuop1ZxQUtjLnL4j53FO0a+5X08UXqQ7NQNo92R0XOz7sxWEnxN2TneJI8Acttu4Q=) format("woff");
  font-weight: 400;
  font-style: normal;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder, .vjs-icon-play {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .vjs-icon-play:before {
  content: "\f101";
}

.vjs-icon-play-circle {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-play-circle:before {
  content: "\f102";
}

.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder, .vjs-icon-pause {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before, .vjs-icon-pause:before {
  content: "\f103";
}

.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder, .vjs-icon-volume-mute {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before, .vjs-icon-volume-mute:before {
  content: "\f104";
}

.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder, .vjs-icon-volume-low {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before, .vjs-icon-volume-low:before {
  content: "\f105";
}

.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder, .vjs-icon-volume-mid {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before, .vjs-icon-volume-mid:before {
  content: "\f106";
}

.video-js .vjs-mute-control .vjs-icon-placeholder, .vjs-icon-volume-high {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-mute-control .vjs-icon-placeholder:before, .vjs-icon-volume-high:before {
  content: "\f107";
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder, .vjs-icon-fullscreen-enter {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-icon-fullscreen-enter:before {
  content: "\f108";
}

.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder, .vjs-icon-fullscreen-exit {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-icon-fullscreen-exit:before {
  content: "\f109";
}

.vjs-icon-spinner {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-spinner:before {
  content: "\f10a";
}

.video-js .vjs-subs-caps-button .vjs-icon-placeholder, .video-js .vjs-subtitles-button .vjs-icon-placeholder, .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, .vjs-icon-subtitles {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js .vjs-subtitles-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, .vjs-icon-subtitles:before {
  content: "\f10b";
}

.video-js .vjs-captions-button .vjs-icon-placeholder, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder, .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, .vjs-icon-captions {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-captions-button .vjs-icon-placeholder:before, .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before, .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, .vjs-icon-captions:before {
  content: "\f10c";
}

.vjs-icon-hd {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-hd:before {
  content: "\f10d";
}

.video-js .vjs-chapters-button .vjs-icon-placeholder, .vjs-icon-chapters {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-chapters-button .vjs-icon-placeholder:before, .vjs-icon-chapters:before {
  content: "\f10e";
}

.vjs-icon-downloading {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-downloading:before {
  content: "\f10f";
}

.vjs-icon-file-download {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-file-download:before {
  content: "\f110";
}

.vjs-icon-file-download-done {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-file-download-done:before {
  content: "\f111";
}

.vjs-icon-file-download-off {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-file-download-off:before {
  content: "\f112";
}

.vjs-icon-share {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-share:before {
  content: "\f113";
}

.vjs-icon-cog {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-cog:before {
  content: "\f114";
}

.vjs-icon-square {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-square:before {
  content: "\f115";
}

.video-js .vjs-play-progress, .video-js .vjs-volume-level, .vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-play-progress:before, .video-js .vjs-volume-level:before, .vjs-icon-circle:before, .vjs-seek-to-live-control .vjs-icon-placeholder:before {
  content: "\f116";
}

.vjs-icon-circle-outline {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-circle-outline:before {
  content: "\f117";
}

.vjs-icon-circle-inner-circle {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-circle-inner-circle:before {
  content: "\f118";
}

.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder, .vjs-icon-cancel {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before, .vjs-icon-cancel:before {
  content: "\f119";
}

.vjs-icon-repeat {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-repeat:before {
  content: "\f11a";
}

.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder, .vjs-icon-replay {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before, .vjs-icon-replay:before {
  content: "\f11b";
}

.video-js .vjs-skip-backward-5 .vjs-icon-placeholder, .vjs-icon-replay-5 {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before, .vjs-icon-replay-5:before {
  content: "\f11c";
}

.video-js .vjs-skip-backward-10 .vjs-icon-placeholder, .vjs-icon-replay-10 {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before, .vjs-icon-replay-10:before {
  content: "\f11d";
}

.video-js .vjs-skip-backward-30 .vjs-icon-placeholder, .vjs-icon-replay-30 {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before, .vjs-icon-replay-30:before {
  content: "\f11e";
}

.video-js .vjs-skip-forward-5 .vjs-icon-placeholder, .vjs-icon-forward-5 {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before, .vjs-icon-forward-5:before {
  content: "\f11f";
}

.video-js .vjs-skip-forward-10 .vjs-icon-placeholder, .vjs-icon-forward-10 {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before, .vjs-icon-forward-10:before {
  content: "\f120";
}

.video-js .vjs-skip-forward-30 .vjs-icon-placeholder, .vjs-icon-forward-30 {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before, .vjs-icon-forward-30:before {
  content: "\f121";
}

.video-js .vjs-audio-button .vjs-icon-placeholder, .vjs-icon-audio {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-audio-button .vjs-icon-placeholder:before, .vjs-icon-audio:before {
  content: "\f122";
}

.vjs-icon-next-item {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-next-item:before {
  content: "\f123";
}

.vjs-icon-previous-item {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-previous-item:before {
  content: "\f124";
}

.vjs-icon-shuffle {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-shuffle:before {
  content: "\f125";
}

.vjs-icon-cast {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-cast:before {
  content: "\f126";
}

.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder, .vjs-icon-picture-in-picture-enter {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before, .vjs-icon-picture-in-picture-enter:before {
  content: "\f127";
}

.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder, .vjs-icon-picture-in-picture-exit {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before, .vjs-icon-picture-in-picture-exit:before {
  content: "\f128";
}

.vjs-icon-facebook {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-facebook:before {
  content: "\f129";
}

.vjs-icon-linkedin {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-linkedin:before {
  content: "\f12a";
}

.vjs-icon-twitter {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-twitter:before {
  content: "\f12b";
}

.vjs-icon-tumblr {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-tumblr:before {
  content: "\f12c";
}

.vjs-icon-pinterest {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.vjs-icon-pinterest:before {
  content: "\f12d";
}

.video-js .vjs-descriptions-button .vjs-icon-placeholder, .vjs-icon-audio-description {
  font-family: VideoJS;
  font-weight: 400;
  font-style: normal;
}

.video-js .vjs-descriptions-button .vjs-icon-placeholder:before, .vjs-icon-audio-description:before {
  content: "\f12e";
}

.video-js {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  color: #fff;
  background-color: #000;
  position: relative;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  word-break: initial;
}

.video-js:-moz-full-screen {
  position: absolute;
}

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.video-js[tabindex="-1"] {
  outline: 0;
}

.video-js *, .video-js :after, .video-js :before {
  box-sizing: inherit;
}

.video-js ul {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.video-js.vjs-1-1, .video-js.vjs-16-9, .video-js.vjs-4-3, .video-js.vjs-9-16, .video-js.vjs-fluid {
  width: 100%;
  max-width: 100%;
}

.video-js.vjs-1-1:not(.vjs-audio-only-mode), .video-js.vjs-16-9:not(.vjs-audio-only-mode), .video-js.vjs-4-3:not(.vjs-audio-only-mode), .video-js.vjs-9-16:not(.vjs-audio-only-mode), .video-js.vjs-fluid:not(.vjs-audio-only-mode) {
  height: 0;
}

.video-js.vjs-16-9:not(.vjs-audio-only-mode) {
  padding-top: 56.25%;
}

.video-js.vjs-4-3:not(.vjs-audio-only-mode) {
  padding-top: 75%;
}

.video-js.vjs-9-16:not(.vjs-audio-only-mode) {
  padding-top: 177.7777777778%;
}

.video-js.vjs-1-1:not(.vjs-audio-only-mode) {
  padding-top: 100%;
}

.video-js.vjs-fill:not(.vjs-audio-only-mode) {
  width: 100%;
  height: 100%;
}

.video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-js.vjs-audio-only-mode .vjs-tech {
  display: none;
}

body.vjs-full-window, body.vjs-pip-window {
  padding: 0;
  margin: 0;
  height: 100%;
}

.vjs-full-window .video-js.vjs-fullscreen, body.vjs-pip-window .video-js {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.video-js.vjs-fullscreen:not(.vjs-ios-native-fs), body.vjs-pip-window .video-js {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
  display: block;
}

.video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

.vjs-pip-container .vjs-pip-text {
  position: absolute;
  bottom: 10%;
  font-size: 2em;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 0.5em;
  text-align: center;
  width: 100%;
}

.vjs-layout-small.vjs-pip-container .vjs-pip-text, .vjs-layout-tiny.vjs-pip-container .vjs-pip-text, .vjs-layout-x-small.vjs-pip-container .vjs-pip-text {
  bottom: 0;
  font-size: 1.4em;
}

.vjs-hidden {
  display: none !important;
}

.vjs-disabled {
  opacity: 0.5;
  cursor: default;
}

.video-js .vjs-offscreen {
  height: 1px;
  left: -9999px;
  position: absolute;
  top: 0;
  width: 1px;
}

.vjs-lock-showing {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.vjs-no-js {
  padding: 20px;
  color: #fff;
  background-color: #000;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 300px;
  height: 150px;
  margin: 0 auto;
}

.vjs-no-js a, .vjs-no-js a:visited {
  color: #66a8cc;
}

.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.63332em;
  width: 3em;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  margin-top: -0.81666em;
  margin-left: -1.5em;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: 0.3em;
  transition: all 0.4s;
}

.vjs-big-play-button .vjs-svg-icon {
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.video-js .vjs-big-play-button:focus, .video-js:hover .vjs-big-play-button {
  border-color: #fff;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  transition: all 0s;
}

.vjs-controls-disabled .vjs-big-play-button, .vjs-error .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button {
  display: none;
}

.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking, .vjs-scrubbing, .vjs-error) .vjs-big-play-button {
  display: block;
}

.video-js button {
  background: 0 0;
  border: none;
  color: inherit;
  display: inline-block;
  font-size: inherit;
  line-height: inherit;
  text-transform: none;
  text-decoration: none;
  transition: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.vjs-control .vjs-button {
  width: 100%;
  height: 100%;
}

.video-js .vjs-control.vjs-close-button {
  cursor: pointer;
  height: 3em;
  position: absolute;
  right: 0;
  top: 0.5em;
  z-index: 2;
}

.video-js .vjs-modal-dialog {
  background: rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
  overflow: auto;
}

.video-js .vjs-modal-dialog > * {
  box-sizing: border-box;
}

.vjs-modal-dialog .vjs-modal-dialog-content {
  font-size: 1.2em;
  line-height: 1.5;
  padding: 20px 24px;
  z-index: 1;
}

.vjs-menu-button {
  cursor: pointer;
}

.vjs-menu-button.vjs-disabled {
  cursor: default;
}

.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
  display: none;
}

.vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  overflow: auto;
}

.vjs-menu .vjs-menu-content > * {
  box-sizing: border-box;
}

.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
  display: none;
}

.vjs-menu li {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0.2em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
}

.js-focus-visible .vjs-menu li.vjs-menu-item:hover, .vjs-menu li.vjs-menu-item:focus, .vjs-menu li.vjs-menu-item:hover {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.js-focus-visible .vjs-menu li.vjs-selected:hover, .vjs-menu li.vjs-selected, .vjs-menu li.vjs-selected:focus, .vjs-menu li.vjs-selected:hover {
  background-color: #fff;
  color: #2b333f;
}

.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon, .vjs-menu li.vjs-selected .vjs-svg-icon, .vjs-menu li.vjs-selected:focus .vjs-svg-icon, .vjs-menu li.vjs-selected:hover .vjs-svg-icon {
  fill: #000;
}

.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible), .video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible) {
  background: 0 0;
}

.vjs-menu li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: 700;
  cursor: default;
}

.vjs-menu-button-popup .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  width: 10em;
  left: -3em;
  height: 0;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}

.vjs-pip-window .vjs-menu-button-popup .vjs-menu {
  left: unset;
  right: 1em;
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
  position: absolute;
  width: 100%;
  bottom: 1.5em;
  max-height: 15em;
}

.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 5em;
}

.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 10em;
}

.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 14em;
}

.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content, .vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  max-height: 25em;
}

.vjs-menu-button-popup .vjs-menu.vjs-lock-showing, .vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu {
  display: block;
}

.video-js .vjs-menu-button-inline {
  transition: all 0.4s;
  overflow: hidden;
}

.video-js .vjs-menu-button-inline:before {
  width: 2.222222222em;
}

.video-js .vjs-menu-button-inline.vjs-slider-active, .video-js .vjs-menu-button-inline:focus, .video-js .vjs-menu-button-inline:hover {
  width: 12em;
}

.vjs-menu-button-inline .vjs-menu {
  opacity: 0;
  height: 100%;
  width: auto;
  position: absolute;
  left: 4em;
  top: 0;
  padding: 0;
  margin: 0;
  transition: all 0.4s;
}

.vjs-menu-button-inline.vjs-slider-active .vjs-menu, .vjs-menu-button-inline:focus .vjs-menu, .vjs-menu-button-inline:hover .vjs-menu {
  display: block;
  opacity: 1;
}

.vjs-menu-button-inline .vjs-menu-content {
  width: auto;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.video-js .vjs-control-bar {
  display: none;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js:not(.vjs-controls-disabled, .vjs-using-native-controls, .vjs-error) .vjs-control-bar.vjs-lock-showing {
  display: flex !important;
}

.vjs-audio-only-mode .vjs-control-bar, .vjs-has-started .vjs-control-bar {
  display: flex;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.1s, opacity 0.1s;
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition: visibility 1s, opacity 1s;
}

.vjs-controls-disabled .vjs-control-bar, .vjs-error .vjs-control-bar, .vjs-using-native-controls .vjs-control-bar {
  display: none !important;
}

.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar, .vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.video-js .vjs-control {
  position: relative;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 4em;
  flex: none;
}

.video-js .vjs-control.vjs-visible-text {
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.vjs-button > .vjs-icon-placeholder:before {
  font-size: 1.8em;
  line-height: 1.67;
}

.vjs-button > .vjs-icon-placeholder {
  display: block;
}

.vjs-button > .vjs-svg-icon {
  display: inline-block;
}

.video-js .vjs-control:focus, .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before {
  text-shadow: 0 0 1em #fff;
}

.video-js :not(.vjs-visible-text) > .vjs-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.video-js .vjs-custom-control-spacer {
  display: none;
}

.video-js .vjs-progress-control {
  cursor: pointer;
  flex: auto;
  display: flex;
  align-items: center;
  min-width: 4em;
  touch-action: none;
}

.video-js .vjs-progress-control.disabled {
  cursor: default;
}

.vjs-live .vjs-progress-control {
  display: none;
}

.vjs-liveui .vjs-progress-control {
  display: flex;
  align-items: center;
}

.video-js .vjs-progress-holder {
  flex: auto;
  transition: all 0.2s;
  height: 0.3em;
}

.video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0 10px;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.6666666667em;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
  font-size: 1em;
}

.video-js .vjs-progress-holder .vjs-load-progress, .video-js .vjs-progress-holder .vjs-load-progress div, .video-js .vjs-progress-holder .vjs-play-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 0;
}

.video-js .vjs-play-progress {
  background-color: #fff;
}

.video-js .vjs-play-progress:before {
  font-size: 0.9em;
  position: absolute;
  right: -0.5em;
  line-height: 0.35em;
  z-index: 1;
}

.vjs-svg-icons-enabled .vjs-play-progress:before {
  content: none !important;
}

.vjs-play-progress .vjs-svg-icon {
  position: absolute;
  top: -0.35em;
  right: -0.4em;
  width: 0.9em;
  height: 0.9em;
  pointer-events: none;
  line-height: 0.15em;
  z-index: 1;
}

.video-js .vjs-load-progress {
  background: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-load-progress div {
  background: rgba(115, 133, 159, 0.75);
}

.video-js .vjs-time-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
  color: #000;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
  display: none;
}

.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip, .video-js .vjs-progress-control:hover .vjs-time-tooltip {
  display: block;
  font-size: 0.6em;
  visibility: visible;
}

.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
  font-size: 1em;
}

.video-js .vjs-progress-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #000;
  z-index: 1;
}

.video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.vjs-mouse-display .vjs-time-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-js .vjs-slider {
  position: relative;
  cursor: pointer;
  padding: 0;
  margin: 0 0.45em 0 0.45em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-slider.disabled {
  cursor: default;
}

.video-js .vjs-slider:focus {
  text-shadow: 0 0 1em #fff;
  box-shadow: 0 0 1em #fff;
}

.video-js .vjs-mute-control {
  cursor: pointer;
  flex: none;
}

.video-js .vjs-volume-control {
  cursor: pointer;
  margin-right: 1em;
  display: flex;
}

.video-js .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
}

.video-js .vjs-volume-panel .vjs-volume-control {
  visibility: visible;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin-left: -1px;
}

.video-js .vjs-volume-panel {
  transition: width 1s;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active, .video-js .vjs-volume-panel .vjs-volume-control:active, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, .video-js .vjs-volume-panel:active .vjs-volume-control, .video-js .vjs-volume-panel:focus .vjs-volume-control {
  visibility: visible;
  opacity: 1;
  position: relative;
  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
  margin-right: 0;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical, .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical {
  left: -3.5em;
  transition: left 0s;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active {
  width: 10em;
  transition: width 0.1s;
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
  width: 4em;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  height: 8em;
  width: 3em;
  left: -3000em;
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
}

.video-js .vjs-volume-panel {
  display: flex;
}

.video-js .vjs-volume-bar {
  margin: 1.35em 0.45em;
}

.vjs-volume-bar.vjs-slider-horizontal {
  width: 5em;
  height: 0.3em;
}

.vjs-volume-bar.vjs-slider-vertical {
  width: 0.3em;
  height: 5em;
  margin: 1.35em auto;
}

.video-js .vjs-volume-level {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.video-js .vjs-volume-level:before {
  position: absolute;
  font-size: 0.9em;
  z-index: 1;
}

.vjs-slider-vertical .vjs-volume-level {
  width: 0.3em;
}

.vjs-slider-vertical .vjs-volume-level:before {
  top: -0.5em;
  left: -0.3em;
  z-index: 1;
}

.vjs-svg-icons-enabled .vjs-volume-level:before {
  content: none;
}

.vjs-volume-level .vjs-svg-icon {
  position: absolute;
  width: 0.9em;
  height: 0.9em;
  pointer-events: none;
  z-index: 1;
}

.vjs-slider-horizontal .vjs-volume-level {
  height: 0.3em;
}

.vjs-slider-horizontal .vjs-volume-level:before {
  line-height: 0.35em;
  right: -0.5em;
}

.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon {
  right: -0.3em;
  transform: translateY(-50%);
}

.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon {
  top: -0.55em;
  transform: translateX(-50%);
}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
  width: 4em;
}

.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
  height: 100%;
}

.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
  width: 100%;
}

.video-js .vjs-volume-vertical {
  width: 3em;
  height: 8em;
  bottom: 8em;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-volume-horizontal .vjs-menu {
  left: -2em;
}

.video-js .vjs-volume-tooltip {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.3em;
  color: #000;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  padding: 6px 8px 8px 8px;
  pointer-events: none;
  position: absolute;
  top: -3.4em;
  visibility: hidden;
  z-index: 1;
}

.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip, .video-js .vjs-volume-control:hover .vjs-volume-tooltip {
  display: block;
  font-size: 1em;
  visibility: visible;
}

.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip, .video-js .vjs-volume-vertical:hover .vjs-volume-tooltip {
  left: 1em;
  top: -12px;
}

.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
  font-size: 1em;
}

.video-js .vjs-volume-control .vjs-mouse-display {
  display: none;
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
  z-index: 1;
}

.video-js .vjs-volume-horizontal .vjs-mouse-display {
  width: 1px;
  height: 100%;
}

.video-js .vjs-volume-control:hover .vjs-mouse-display {
  display: block;
}

.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.vjs-mouse-display .vjs-volume-tooltip {
  color: #fff;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
}

.vjs-poster {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

.vjs-has-started .vjs-poster, .vjs-using-native-controls .vjs-poster {
  display: none;
}

.vjs-audio.vjs-has-started .vjs-poster, .vjs-has-started.vjs-audio-poster-mode .vjs-poster, .vjs-pip-container.vjs-has-started .vjs-poster {
  display: block;
}

.vjs-poster img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.video-js .vjs-live-control {
  display: flex;
  align-items: flex-start;
  flex: auto;
  font-size: 1em;
  line-height: 3em;
}

.video-js.vjs-liveui .vjs-live-control, .video-js:not(.vjs-live) .vjs-live-control {
  display: none;
}

.video-js .vjs-seek-to-live-control {
  align-items: center;
  cursor: pointer;
  flex: none;
  display: inline-flex;
  height: 100%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: 1em;
  line-height: 3em;
  width: auto;
  min-width: 4em;
}

.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control, .video-js:not(.vjs-live) .vjs-seek-to-live-control {
  display: none;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
  cursor: auto;
}

.vjs-seek-to-live-control .vjs-icon-placeholder {
  margin-right: 0.5em;
  color: #888;
}

.vjs-svg-icons-enabled .vjs-seek-to-live-control {
  line-height: 0;
}

.vjs-seek-to-live-control .vjs-svg-icon {
  width: 1em;
  height: 1em;
  pointer-events: none;
  fill: #888;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
  color: red;
}

.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon {
  fill: red;
}

.video-js .vjs-time-control {
  flex: none;
  font-size: 1em;
  line-height: 3em;
  min-width: 2em;
  width: auto;
  padding-left: 1em;
  padding-right: 1em;
}

.video-js .vjs-current-time, .video-js .vjs-duration, .vjs-live .vjs-time-control, .vjs-live .vjs-time-divider {
  display: none;
}

.vjs-time-divider {
  display: none;
  line-height: 3em;
}

.video-js .vjs-play-control {
  cursor: pointer;
}

.video-js .vjs-play-control .vjs-icon-placeholder {
  flex: none;
}

.vjs-text-track-display {
  position: absolute;
  bottom: 3em;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}

.vjs-error .vjs-text-track-display {
  display: none;
}

.video-js.vjs-controls-disabled .vjs-text-track-display, .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}

.video-js .vjs-text-track {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
}

.vjs-subtitles {
  color: #fff;
}

.vjs-captions {
  color: #fc6;
}

.vjs-tt-cue {
  display: block;
}

video::-webkit-media-text-track-display {
  transform: translateY(-3em);
}

.video-js.vjs-controls-disabled video::-webkit-media-text-track-display, .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
  transform: translateY(-1.5em);
}

.video-js .vjs-picture-in-picture-control {
  cursor: pointer;
  flex: none;
}

.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control, .vjs-pip-window .vjs-picture-in-picture-control {
  display: none;
}

.video-js .vjs-fullscreen-control {
  cursor: pointer;
  flex: none;
}

.video-js.vjs-audio-only-mode .vjs-fullscreen-control, .vjs-pip-window .vjs-fullscreen-control {
  display: none;
}

.vjs-playback-rate .vjs-playback-rate-value, .vjs-playback-rate > .vjs-menu-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.vjs-playback-rate .vjs-playback-rate-value {
  pointer-events: none;
  font-size: 1.5em;
  line-height: 2;
  text-align: center;
}

.vjs-playback-rate .vjs-menu {
  width: 4em;
  left: 0;
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
  font-size: 1.4em;
  text-align: center;
}

.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  text-align: left;
  border: 0.6em solid rgba(43, 51, 63, 0.7);
  box-sizing: border-box;
  background-clip: padding-box;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  visibility: hidden;
}

.vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: vjs-spinner-show 0s linear 0.3s forwards;
}

.vjs-error .vjs-loading-spinner {
  display: none;
}

.vjs-loading-spinner:after, .vjs-loading-spinner:before {
  content: "";
  position: absolute;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 1;
  border: inherit;
  border-color: transparent;
  border-top-color: #fff;
}

.vjs-seeking .vjs-loading-spinner:after, .vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:before {
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

.vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before {
  border-top-color: #fff;
}

.vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after {
  border-top-color: #fff;
  animation-delay: 0.44s;
}

@keyframes vjs-spinner-show {
  to {
    visibility: visible;
  }
}
@keyframes vjs-spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes vjs-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: #fff;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}
.video-js.vjs-audio-only-mode .vjs-captions-button {
  display: none;
}

.vjs-chapters-button .vjs-menu ul {
  width: 24em;
}

.video-js.vjs-audio-only-mode .vjs-descriptions-button {
  display: none;
}

.vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-svg-icon {
  width: 1.5em;
  height: 1.5em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -0.1em;
}

.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: "\f10c";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-audio-only-mode .vjs-subs-caps-button {
  display: none;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder, .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  vertical-align: middle;
  display: inline-block;
  margin-bottom: -0.1em;
}

.video-js .vjs-audio-button + .vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before, .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
  font-family: VideoJS;
  content: " \f12e";
  font-size: 1.5em;
  line-height: inherit;
}

.video-js.vjs-layout-small .vjs-current-time, .video-js.vjs-layout-small .vjs-duration, .video-js.vjs-layout-small .vjs-playback-rate, .video-js.vjs-layout-small .vjs-remaining-time, .video-js.vjs-layout-small .vjs-time-divider, .video-js.vjs-layout-small .vjs-volume-control, .video-js.vjs-layout-tiny .vjs-current-time, .video-js.vjs-layout-tiny .vjs-duration, .video-js.vjs-layout-tiny .vjs-playback-rate, .video-js.vjs-layout-tiny .vjs-remaining-time, .video-js.vjs-layout-tiny .vjs-time-divider, .video-js.vjs-layout-tiny .vjs-volume-control, .video-js.vjs-layout-x-small .vjs-current-time, .video-js.vjs-layout-x-small .vjs-duration, .video-js.vjs-layout-x-small .vjs-playback-rate, .video-js.vjs-layout-x-small .vjs-remaining-time, .video-js.vjs-layout-x-small .vjs-time-divider, .video-js.vjs-layout-x-small .vjs-volume-control {
  display: none;
}

.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
  width: auto;
  width: initial;
}

.video-js.vjs-layout-tiny .vjs-progress-control, .video-js.vjs-layout-x-small .vjs-progress-control {
  display: none;
}

.video-js.vjs-layout-x-small .vjs-custom-control-spacer {
  flex: auto;
  display: block;
}

.vjs-modal-dialog.vjs-text-track-settings {
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.75);
  color: #fff;
  height: 70%;
}

.vjs-error .vjs-text-track-settings {
  display: none;
}

.vjs-text-track-settings .vjs-modal-dialog-content {
  display: table;
}

.vjs-text-track-settings .vjs-track-settings-colors, .vjs-text-track-settings .vjs-track-settings-controls, .vjs-text-track-settings .vjs-track-settings-font {
  display: table-cell;
}

.vjs-text-track-settings .vjs-track-settings-controls {
  text-align: right;
  vertical-align: bottom;
}

@supports (display: grid) {
  .vjs-text-track-settings .vjs-modal-dialog-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding: 20px 24px 0 24px;
  }
  .vjs-track-settings-controls .vjs-default-button {
    margin-bottom: 20px;
  }
  .vjs-text-track-settings .vjs-track-settings-controls {
    grid-column: 1/-1;
  }
  .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content, .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content, .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content {
    grid-template-columns: 1fr;
  }
}
.vjs-text-track-settings select {
  font-size: inherit;
}

.vjs-track-setting > select {
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.vjs-text-track-settings fieldset {
  margin: 10px;
  border: none;
}

.vjs-text-track-settings fieldset span {
  display: inline-block;
  padding: 0 0.6em 0.8em;
}

.vjs-text-track-settings fieldset span > select {
  max-width: 7.3em;
}

.vjs-text-track-settings legend {
  color: #fff;
  font-weight: 700;
  font-size: 1.2em;
}

.vjs-text-track-settings .vjs-label {
  margin: 0 0.5em 0.5em 0;
}

.vjs-track-settings-controls button:active, .vjs-track-settings-controls button:focus {
  outline-style: solid;
  outline-width: medium;
  background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
}

.vjs-track-settings-controls button:hover {
  color: rgba(43, 51, 63, 0.75);
}

.vjs-track-settings-controls button {
  background-color: #fff;
  background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
  color: #2b333f;
  cursor: pointer;
  border-radius: 2px;
}

.vjs-track-settings-controls .vjs-default-button {
  margin-right: 1em;
}

.vjs-title-bar {
  background: rgba(0, 0, 0, 0.9);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
  font-size: 1.2em;
  line-height: 1.5;
  transition: opacity 0.1s;
  padding: 0.666em 1.333em 4em;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.vjs-error .vjs-title-bar {
  display: none;
}

.vjs-title-bar-description, .vjs-title-bar-title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vjs-title-bar-title {
  font-weight: 700;
  margin-bottom: 0.333em;
}

.vjs-playing.vjs-user-inactive .vjs-title-bar {
  opacity: 0;
  transition: opacity 1s;
}

.video-js .vjs-skip-forward-5 {
  cursor: pointer;
}

.video-js .vjs-skip-forward-10 {
  cursor: pointer;
}

.video-js .vjs-skip-forward-30 {
  cursor: pointer;
}

.video-js .vjs-skip-backward-5 {
  cursor: pointer;
}

.video-js .vjs-skip-backward-10 {
  cursor: pointer;
}

.video-js .vjs-skip-backward-30 {
  cursor: pointer;
}

@media print {
  .video-js > :not(.vjs-tech):not(.vjs-poster) {
    visibility: hidden;
  }
}
.vjs-resize-manager {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: -1000;
}

.js-focus-visible .video-js :focus:not(.focus-visible) {
  outline: 0;
}

.video-js :focus:not(:focus-visible) {
  outline: 0;
}
@charset "UTF-8";
/*=== IMAGES ============= */
/*===COLORS===================================================================*/
/*===COLORS - END=============================================================*/
:root {
  --square-size: 100px;
  --square-margin: 5px;
}
@media screen and (min-width: 414px) {
  :root {
    --square-size: 120px;
  }
}
@media screen and (min-width: 768px) {
  :root {
    --square-size: 150px;
  }
}
@media screen and (min-width: 1024px) {
  :root {
    --square-size: 200px;
    --square-margin: 10px;
  }
}

/*===MEDIA QUERY =============================================================*/
/*Typical breakpoints*/
/*320 | 375 | 414 | 568 | 768 | 1024 | 1280 | 1366 | 1600 | 1920*/
/*... in landscape*/
/*L568 | L667 | L768 | L1024 | L1280*/
/*... heights */
/*H568 | H640 | H667 | H731 | H736 | H812 | H823 | H1024 | H1366 */
/*===MEDIA QUERY - END =======================================================*/
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url(fa-regular-400.woff2);
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url(fa-solid-900.woff2);
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

#vMedia div#sharedFiles div.fileItem > a.miniature .noImageIcon,
#vMedia #files div.fileItem > a.miniature .noImageIcon {
  position: relative;
}
#vMedia div#sharedFiles div.fileItem > a.miniature .noImageIcon > span.fileExtension,
#vMedia #files div.fileItem > a.miniature .noImageIcon > span.fileExtension {
  color: #bdbdbd;
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  text-transform: uppercase;
}

#vMedia div#sharedFiles h1 > div.buttonsWrapper,
#vMedia #files h1 > div.buttonsWrapper {
  grid-area: buttons;
  display: flex;
  gap: 1rem;
}
#vMedia div#sharedFiles h1 > div.buttonsWrapper > button,
#vMedia #files h1 > div.buttonsWrapper > button {
  background-color: transparent;
  border: none;
  outline: none;
  color: #f2f2f2;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  font-size: 14px;
  opacity: 1;
  transition: opacity 300ms;
  cursor: pointer;
}
#vMedia div#sharedFiles h1 > div.buttonsWrapper > button.inactive,
#vMedia #files h1 > div.buttonsWrapper > button.inactive {
  opacity: 0.6;
  transition: opacity 300ms;
}

div.orderOwnerPromptWrapper, div.orderInfoPromptWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  height: 100%;
  position: relative;
}
div.orderOwnerPromptWrapper > strong, div.orderInfoPromptWrapper > strong {
  grid-area: title;
  margin-top: 1rem;
  font-size: 1rem;
}
@media only screen and (min-width: 768px) {
  div.orderOwnerPromptWrapper > strong, div.orderInfoPromptWrapper > strong {
    font-size: 1.25rem;
  }
}
div.orderOwnerPromptWrapper > p, div.orderInfoPromptWrapper > p {
  grid-area: message;
  font-size: 0.75rem;
  padding: 0 0.75rem;
}
@media only screen and (min-width: 768px) {
  div.orderOwnerPromptWrapper > p, div.orderInfoPromptWrapper > p {
    font-size: 1rem;
  }
}
div.orderOwnerPromptWrapper > div.buttonsWrapper, div.orderInfoPromptWrapper > div.buttonsWrapper {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  div.orderOwnerPromptWrapper > div.buttonsWrapper, div.orderInfoPromptWrapper > div.buttonsWrapper {
    flex-direction: row;
  }
}
div.orderOwnerPromptWrapper > div.buttonsWrapper > button, div.orderInfoPromptWrapper > div.buttonsWrapper > button {
  border: 2px solid #333;
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  div.orderOwnerPromptWrapper > div.buttonsWrapper > button, div.orderInfoPromptWrapper > div.buttonsWrapper > button {
    padding: 5px 15px;
    font-size: 1rem;
  }
}
@media only screen and (min-width: 1024px) {
  div.orderOwnerPromptWrapper > div.buttonsWrapper > button, div.orderInfoPromptWrapper > div.buttonsWrapper > button {
    padding: 10px 30px;
  }
}
div.orderOwnerPromptWrapper > div.buttonsWrapper > button:not(:first-child), div.orderInfoPromptWrapper > div.buttonsWrapper > button:not(:first-child) {
  margin-left: 0;
  margin-top: 0.5rem;
}
@media only screen and (min-width: 768px) {
  div.orderOwnerPromptWrapper > div.buttonsWrapper > button:not(:first-child), div.orderInfoPromptWrapper > div.buttonsWrapper > button:not(:first-child) {
    margin-left: 0.5rem;
    margin-top: 0;
  }
}
@media only screen and (min-width: 1024px) {
  div.orderOwnerPromptWrapper > div.buttonsWrapper > button:not(:first-child), div.orderInfoPromptWrapper > div.buttonsWrapper > button:not(:first-child) {
    margin-left: 1rem;
  }
}

#searchView div.collectionHeader > div.sort-wrapper, customers-search > div.customersSearchHeader > div.sort-wrapper, section.packages-list-component section.packagesToolbar > div.sort-wrapper, section.ordersToolbar div.sort-wrapper {
  grid-area: sort;
  display: flex;
  position: relative;
}
#searchView div.collectionHeader > div.sort-wrapper > button.sortBy, customers-search > div.customersSearchHeader > div.sort-wrapper > button.sortBy, section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortBy, section.ordersToolbar div.sort-wrapper > button.sortBy, #searchView div.collectionHeader > div.sort-wrapper > button.sortByDesc, customers-search > div.customersSearchHeader > div.sort-wrapper > button.sortByDesc, section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortByDesc, section.ordersToolbar div.sort-wrapper > button.sortByDesc {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: #bdbdbd;
  padding: 0;
}
#searchView div.collectionHeader > div.sort-wrapper > button.sortBy, customers-search > div.customersSearchHeader > div.sort-wrapper > button.sortBy, section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortBy, section.ordersToolbar div.sort-wrapper > button.sortBy {
  width: 100%;
  grid-area: sort;
  overflow: hidden;
}
#searchView div.collectionHeader > div.sort-wrapper > button.sortBy.active, customers-search > div.customersSearchHeader > div.sort-wrapper > button.sortBy.active, section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortBy.active, section.ordersToolbar div.sort-wrapper > button.sortBy.active {
  position: relative;
  z-index: 4;
}
#searchView div.collectionHeader > div.sort-wrapper > button.sortBy > span, customers-search > div.customersSearchHeader > div.sort-wrapper > button.sortBy > span, section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortBy > span, section.ordersToolbar div.sort-wrapper > button.sortBy > span {
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
}
#searchView div.collectionHeader > div.sort-wrapper > button.sortBy > span:not(.separator), customers-search > div.customersSearchHeader > div.sort-wrapper > button.sortBy > span:not(.separator), section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortBy > span:not(.separator), section.ordersToolbar div.sort-wrapper > button.sortBy > span:not(.separator) {
  width: 100%;
  text-overflow: ellipsis;
  margin-right: 0.25rem;
}
#searchView div.collectionHeader > div.sort-wrapper > button.sortByDesc, customers-search > div.customersSearchHeader > div.sort-wrapper > button.sortByDesc, section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortByDesc, section.ordersToolbar div.sort-wrapper > button.sortByDesc {
  grid-area: sortDesc;
}
#searchView div.collectionHeader > div.sort-wrapper > button.sortByDesc.active, customers-search > div.customersSearchHeader > div.sort-wrapper > button.sortByDesc.active, section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortByDesc.active, section.ordersToolbar div.sort-wrapper > button.sortByDesc.active {
  position: relative;
  z-index: 4;
}

a.svSelectGlass {
  display: none;
  position: fixed;
  background: rgba(37, 37, 37, 0.2);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 1002;
  cursor: auto;
}
a.active.svSelectGlass {
  display: block;
}

.content {
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .content {
    font-size: 1.2rem;
  }
}
.content h1, .content h2, .content h3 {
  margin: 5px 0;
}
.content h1 {
  font-size: 1rem;
}
.content h2 {
  font-size: 0.9rem;
}
.content h3 {
  font-size: 0.8rem;
}
.content b, .content strong {
  font-weight: bold;
}
.content p {
  margin: 18px 0;
}
.content small {
  font-size: 0.8rem;
  font-style: italic;
}
.content blockquote {
  margin: 0;
}
.content ul {
  display: inline-block;
  padding-left: 20px;
}
.content ul li {
  list-style-type: square;
}
.content table {
  width: 100%;
}
.content table th, .content table td {
  padding: 2px 3px;
}
.content .checkbox {
  display: block;
  width: 150px;
  margin: 20px auto 10px;
  float: none;
}
.content .checkbox.long {
  width: 250px;
}
.content .checkbox a {
  color: #fff;
  font-weight: bold;
  text-decoration: underline !important;
}

.termsList a {
  display: block;
  padding: 10px;
  color: #333;
  font-size: 17px;
  border-bottom: 1px solid #c6c6c6;
  margin: 0 10px;
}
.termsList a:hover {
  background-color: #f8f8f8;
}
.termsList a .termDesc {
  font-size: 15px;
}
.termsList a.selected {
  font-weight: bold;
}

/*

DOCS: http://bulma.io/documentation/grid/columns/

*/
.column {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 10px;
}

.columns.is-mobile > .column.is-narrow {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

.columns.is-mobile > .column.is-full {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 100%;
}

.columns.is-mobile > .column.is-three-quarters {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 75%;
}

.columns.is-mobile > .column.is-two-thirds {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 66.6666%;
}

.columns.is-mobile > .column.is-half {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 50%;
}

.columns.is-mobile > .column.is-one-third {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 33.3333%;
}

.columns.is-mobile > .column.is-one-quarter {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 25%;
}

.columns.is-mobile > .column.is-offset-three-quarters {
  margin-left: 75%;
}

.columns.is-mobile > .column.is-offset-two-thirds {
  margin-left: 66.6666%;
}

.columns.is-mobile > .column.is-offset-half {
  margin-left: 50%;
}

.columns.is-mobile > .column.is-offset-one-third {
  margin-left: 33.3333%;
}

.columns.is-mobile > .column.is-offset-one-quarter {
  margin-left: 25%;
}

.columns.is-mobile > .column.is-1 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 8.33333%;
}

.columns.is-mobile > .column.is-offset-1 {
  margin-left: 8.33333%;
}

.columns.is-mobile > .column.is-2 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 16.66667%;
}

.columns.is-mobile > .column.is-offset-2 {
  margin-left: 16.66667%;
}

.columns.is-mobile > .column.is-3 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 25%;
}

.columns.is-mobile > .column.is-offset-3 {
  margin-left: 25%;
}

.columns.is-mobile > .column.is-4 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 33.33333%;
}

.columns.is-mobile > .column.is-offset-4 {
  margin-left: 33.33333%;
}

.columns.is-mobile > .column.is-5 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 41.66667%;
}

.columns.is-mobile > .column.is-offset-5 {
  margin-left: 41.66667%;
}

.columns.is-mobile > .column.is-6 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 50%;
}

.columns.is-mobile > .column.is-offset-6 {
  margin-left: 50%;
}

.columns.is-mobile > .column.is-7 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 58.33333%;
}

.columns.is-mobile > .column.is-offset-7 {
  margin-left: 58.33333%;
}

.columns.is-mobile > .column.is-8 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 66.66667%;
}

.columns.is-mobile > .column.is-offset-8 {
  margin-left: 66.66667%;
}

.columns.is-mobile > .column.is-9 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 75%;
}

.columns.is-mobile > .column.is-offset-9 {
  margin-left: 75%;
}

.columns.is-mobile > .column.is-10 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 83.33333%;
}

.columns.is-mobile > .column.is-offset-10 {
  margin-left: 83.33333%;
}

.columns.is-mobile > .column.is-11 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 91.66667%;
}

.columns.is-mobile > .column.is-offset-11 {
  margin-left: 91.66667%;
}

.columns.is-mobile > .column.is-12 {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  width: 100%;
}

.columns.is-mobile > .column.is-offset-12 {
  margin-left: 100%;
}

@media screen and (max-width: 768px) {
  .column.is-narrow-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
  }
  .column.is-full-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.6666%;
  }
  .column.is-half-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .column.is-one-third-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .column.is-offset-three-quarters-mobile {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds-mobile {
    margin-left: 66.6666%;
  }
  .column.is-offset-half-mobile {
    margin-left: 50%;
  }
  .column.is-offset-one-third-mobile {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter-mobile {
    margin-left: 25%;
  }
  .column.is-1-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1-mobile {
    margin-left: 8.33333%;
  }
  .column.is-2-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2-mobile {
    margin-left: 16.66667%;
  }
  .column.is-3-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .column.is-offset-3-mobile {
    margin-left: 25%;
  }
  .column.is-4-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4-mobile {
    margin-left: 33.33333%;
  }
  .column.is-5-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5-mobile {
    margin-left: 41.66667%;
  }
  .column.is-6-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .column.is-offset-6-mobile {
    margin-left: 50%;
  }
  .column.is-7-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7-mobile {
    margin-left: 58.33333%;
  }
  .column.is-8-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8-mobile {
    margin-left: 66.66667%;
  }
  .column.is-9-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .column.is-offset-9-mobile {
    margin-left: 75%;
  }
  .column.is-10-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10-mobile {
    margin-left: 83.33333%;
  }
  .column.is-11-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11-mobile {
    margin-left: 91.66667%;
  }
  .column.is-12-mobile {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
  .column.is-offset-12-mobile {
    margin-left: 100%;
  }
}
@media screen and (min-width: 769px) {
  .column.is-narrow, .column.is-narrow-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
  }
  .column.is-full, .column.is-full-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters, .column.is-three-quarters-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds, .column.is-two-thirds-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.6666%;
  }
  .column.is-half, .column.is-half-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .column.is-one-third, .column.is-one-third-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter, .column.is-one-quarter-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet {
    margin-left: 66.6666%;
  }
  .column.is-offset-half, .column.is-offset-half-tablet {
    margin-left: 50%;
  }
  .column.is-offset-one-third, .column.is-offset-one-third-tablet {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet {
    margin-left: 25%;
  }
  .column.is-1, .column.is-1-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1, .column.is-offset-1-tablet {
    margin-left: 8.33333%;
  }
  .column.is-2, .column.is-2-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2, .column.is-offset-2-tablet {
    margin-left: 16.66667%;
  }
  .column.is-3, .column.is-3-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .column.is-offset-3, .column.is-offset-3-tablet {
    margin-left: 25%;
  }
  .column.is-4, .column.is-4-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4, .column.is-offset-4-tablet {
    margin-left: 33.33333%;
  }
  .column.is-5, .column.is-5-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5, .column.is-offset-5-tablet {
    margin-left: 41.66667%;
  }
  .column.is-6, .column.is-6-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .column.is-offset-6, .column.is-offset-6-tablet {
    margin-left: 50%;
  }
  .column.is-7, .column.is-7-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7, .column.is-offset-7-tablet {
    margin-left: 58.33333%;
  }
  .column.is-8, .column.is-8-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8, .column.is-offset-8-tablet {
    margin-left: 66.66667%;
  }
  .column.is-9, .column.is-9-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .column.is-offset-9, .column.is-offset-9-tablet {
    margin-left: 75%;
  }
  .column.is-10, .column.is-10-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10, .column.is-offset-10-tablet {
    margin-left: 83.33333%;
  }
  .column.is-11, .column.is-11-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11, .column.is-offset-11-tablet {
    margin-left: 91.66667%;
  }
  .column.is-12, .column.is-12-tablet {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
  .column.is-offset-12, .column.is-offset-12-tablet {
    margin-left: 100%;
  }
}
@media screen and (min-width: 980px) {
  .column.is-narrow-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
  }
  .column.is-full-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.6666%;
  }
  .column.is-half-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .column.is-one-third-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .column.is-offset-three-quarters-desktop {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds-desktop {
    margin-left: 66.6666%;
  }
  .column.is-offset-half-desktop {
    margin-left: 50%;
  }
  .column.is-offset-one-third-desktop {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter-desktop {
    margin-left: 25%;
  }
  .column.is-1-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1-desktop {
    margin-left: 8.33333%;
  }
  .column.is-2-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2-desktop {
    margin-left: 16.66667%;
  }
  .column.is-3-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .column.is-offset-3-desktop {
    margin-left: 25%;
  }
  .column.is-4-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4-desktop {
    margin-left: 33.33333%;
  }
  .column.is-5-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5-desktop {
    margin-left: 41.66667%;
  }
  .column.is-6-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .column.is-offset-6-desktop {
    margin-left: 50%;
  }
  .column.is-7-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7-desktop {
    margin-left: 58.33333%;
  }
  .column.is-8-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8-desktop {
    margin-left: 66.66667%;
  }
  .column.is-9-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .column.is-offset-9-desktop {
    margin-left: 75%;
  }
  .column.is-10-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10-desktop {
    margin-left: 83.33333%;
  }
  .column.is-11-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11-desktop {
    margin-left: 91.66667%;
  }
  .column.is-12-desktop {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
  .column.is-offset-12-desktop {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1180px) {
  .column.is-narrow-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
  }
  .column.is-full-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
  .column.is-three-quarters-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .column.is-two-thirds-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.6666%;
  }
  .column.is-half-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .column.is-one-third-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.3333%;
  }
  .column.is-one-quarter-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .column.is-offset-three-quarters-widescreen {
    margin-left: 75%;
  }
  .column.is-offset-two-thirds-widescreen {
    margin-left: 66.6666%;
  }
  .column.is-offset-half-widescreen {
    margin-left: 50%;
  }
  .column.is-offset-one-third-widescreen {
    margin-left: 33.3333%;
  }
  .column.is-offset-one-quarter-widescreen {
    margin-left: 25%;
  }
  .column.is-1-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 8.33333%;
  }
  .column.is-offset-1-widescreen {
    margin-left: 8.33333%;
  }
  .column.is-2-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 16.66667%;
  }
  .column.is-offset-2-widescreen {
    margin-left: 16.66667%;
  }
  .column.is-3-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .column.is-offset-3-widescreen {
    margin-left: 25%;
  }
  .column.is-4-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
  }
  .column.is-offset-4-widescreen {
    margin-left: 33.33333%;
  }
  .column.is-5-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 41.66667%;
  }
  .column.is-offset-5-widescreen {
    margin-left: 41.66667%;
  }
  .column.is-6-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .column.is-offset-6-widescreen {
    margin-left: 50%;
  }
  .column.is-7-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 58.33333%;
  }
  .column.is-offset-7-widescreen {
    margin-left: 58.33333%;
  }
  .column.is-8-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.66667%;
  }
  .column.is-offset-8-widescreen {
    margin-left: 66.66667%;
  }
  .column.is-9-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .column.is-offset-9-widescreen {
    margin-left: 75%;
  }
  .column.is-10-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 83.33333%;
  }
  .column.is-offset-10-widescreen {
    margin-left: 83.33333%;
  }
  .column.is-11-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 91.66667%;
  }
  .column.is-offset-11-widescreen {
    margin-left: 91.66667%;
  }
  .column.is-12-widescreen {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
  .column.is-offset-12-widescreen {
    margin-left: 100%;
  }
}
.columns {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -10px;
}

.columns:last-child {
  margin-bottom: -10px;
}

.columns:not(:last-child) {
  margin-bottom: 10px;
}

.columns.is-centered {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.columns.is-gapless {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}

.columns.is-gapless:last-child {
  margin-bottom: 0;
}

.columns.is-gapless:not(:last-child) {
  margin-bottom: 20px;
}

.columns.is-gapless > .column {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 769px) {
  .columns.is-grid {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .columns.is-grid > .column {
    -webkit-flex-basis: 33.3333%;
    -ms-flex-preferred-size: 33.3333%;
    flex-basis: 33.3333%;
    max-width: 33.3333%;
    padding: 10px;
    width: 33.3333%;
  }
  .columns.is-grid > .column + .column {
    margin-left: 0;
  }
}
.columns.is-mobile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.columns.is-multiline {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.columns.is-vcentered {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

@media screen and (min-width: 769px) {
  .columns:not(.is-desktop) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media screen and (min-width: 980px) {
  .columns.is-desktop {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
.tile {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  -ms-grid-row-align: stretch;
  align-items: stretch;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
}

.tile.is-ancestor {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -10px;
}

.tile.is-ancestor:last-child {
  margin-bottom: -10px;
}

.tile.is-ancestor:not(:last-child) {
  margin-bottom: 10px;
}

.tile.is-child {
  margin: 0 !important;
}

.tile.is-parent {
  padding: 10px;
}

.tile.is-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.tile.is-vertical > .tile.is-child:not(:last-child) {
  margin-bottom: 20px !important;
}

@media screen and (min-width: 769px) {
  .tile:not(.is-child) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .tile.is-1 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 8.33333%;
  }
  .tile.is-2 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 16.66667%;
  }
  .tile.is-3 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 25%;
  }
  .tile.is-4 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 33.33333%;
  }
  .tile.is-5 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 41.66667%;
  }
  .tile.is-6 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 50%;
  }
  .tile.is-7 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 58.33333%;
  }
  .tile.is-8 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 66.66667%;
  }
  .tile.is-9 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 75%;
  }
  .tile.is-10 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 83.33333%;
  }
  .tile.is-11 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 91.66667%;
  }
  .tile.is-12 {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}
/*CUSTOM EXTEND*/
.columns {
  width: 100%;
  margin: 0px !important;
}

.column-vertical-center {
  align-self: center;
}

.column-to-right {
  text-align: right;
}

.column-to-left {
  text-align: left;
}

.column-to-center {
  text-align: center;
}

.column input {
  margin: 0px;
}

.tile-margin {
  margin: 10px;
}

.max-size-600 {
  max-width: 600px;
}

html {
  height: -webkit-fill-available;
  font-size: 16px;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
  --base-font-size: 0.625rem;
}
@media only screen and (min-width: 768px) {
  html {
    --base-font-size: 0.75rem;
  }
}
@media only screen and (min-width: 1600px) {
  html {
    --base-font-size: 0.875rem;
  }
}
@media only screen and (min-width: 2560px) {
  html {
    --base-font-size: 1rem;
  }
}

body {
  min-height: 100dvh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  max-width: 100dvw;
  overflow-x: hidden;
  font-size: 16px;
  background-color: #fff;
  background-position: 0 85px;
  /*letter-spacing: 1px;*/
  color: #333;
  display: block !important;
  background-size: cover;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
  font-family: "latoregular", sans-serif;
}
html.safari body {
  touch-action: none;
  margin: 0;
  border: initial;
  height: 100dvh;
  -webkit-overflow-scrolling: auto;
}

* {
  -webkit-font-smoothing: subpixel-antialiased;
}

textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

body > div > section main {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  -webkit-overflow-scrolling: auto;
  position: relative;
}
body > div > section main::-webkit-scrollbar {
  width: 5px;
}
body > div > section main::-webkit-scrollbar-thumb {
  background-color: #666666;
}
body > div > section main.disableScroll {
  overflow: hidden !important;
}
body > div > section main section {
  width: 100%;
}
/* ===GRID=================================================================== */
.fastGrid, .button {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.fastGrid > *, .button > * {
  display: table-row;
}

.fastGrid > * > *, .button > * > * {
  display: table-cell;
  vertical-align: top;
}

.fastGrid.middle > * > *, .middle.button > * > * {
  vertical-align: middle;
}

.fast-sm-hide {
  display: none;
}
@media only screen and (min-width: 768px) {
  .fast-sm-hide {
    display: table-cell;
  }
}

.column_1_2 {
  width: 50%;
}

.column_1_4 {
  width: 25%;
}

.column_1_3 {
  width: 33.33%;
}

.column_2_3 {
  width: 75%;
}

/* ===GLOBAL================================================================= */
.clearfix {
  clear: both;
}

a {
  text-decoration: none !important;
  outline: none;
  cursor: pointer;
}

/*body, html {
    -ms-overflow-style: none !important;
    overflow: hidden ;
    touch-action: none ;
    -ms-touch-action: none ;
}*/
*::selection {
  background: #009D4F !important;
  color: #fff;
}

*::-moz-selection {
  background: #009D4F !important;
  color: #fff;
}

*:not([draggable]) {
  -webkit-user-select: none;
  -ms-user-select: none;
}

div.customerDescriptionModal, #customerView .customerGrid *, #productView div.infobox .user-select *, .modal *, .bigmodal *, div.productTile, div.productTile * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

input, .user-select, .user-select * {
  -webkit-user-select: auto !important;
  -webkit-user-drag: auto !important;
  -moz-user-select: -moz-all !important;
  -ms-user-select: text !important;
}

*:not([draggable]), *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

img {
  border: none !important;
  outline: none;
}

img:-moz-broken {
  -moz-force-broken-image-icon: 0 !important;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

/* Windows Phone IE select arrow disable */
select::-ms-expand {
  display: none;
}

/* orher OSes select arrow disable */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: "";
}

.customSelect {
  position: relative;
  display: inline-block;
}
.customSelect:after {
  position: absolute;
  right: 0;
  top: 0;
  width: 23px;
  content: "\f0dc";
  font-family: "Font Awesome 5 Free";
  line-height: 30px;
  pointer-events: none;
}
.customSelect select {
  padding: 5px 25px 5px 5px;
  border-radius: 5px;
  background: #fff;
  border: none;
}

.ellipsis, .calculator .sizesGroups > ul > li > a > div > div, .calculator div.calculatorGrid section.childGrid > div.col .lSize > span > span, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lSize > span > span, #customerView .customerOrdersGrid > div > div.nameColumn p.subtitle .amount, #gesture-area .catalog > div > div .name p, div.bigmodal.customers div.customersList > a.row > span, div.bigmodal.customers div.customersList > div.first-row > a > span, .sizesList a, .customer-statistics .breakdown .column div, .customer-statistics .breakdown .column .header, .customer-statistics .stats-details .total > span, div.categoryMultiselect > a.toggle > span, div.svSelect > a.toggle > span, .customer-list > div.customer-list-data > div.customer-grid > span, .customer-list-headers a, section.oL div.ordersTableHead > *, section.ordersToolbar sv-radio-switch > div.svRadioSwitchWrapper > div > label > span, section#brandsSection > div.brandsLinksWrapper > a > span.brandTooltip > span, #fileDetailsWrapper #fileDetails #fileInfo > h1, #vMedia div#sharedFiles div.fileItem > div.description > div.filename,
#vMedia #files div.fileItem > div.description > div.filename, .cleanList > .row > div, a.accordion, ul.list-block li a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visuallyHidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.orderType, #customerView .customerOrdersGrid > div > div.orderTypeLabelColumn > div, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select > div.orderTypeLabel {
  padding: 2px 5px;
  border-radius: 5px;
  text-align: center;
  max-width: 40px;
  align-self: center;
}
.orderType.preorderLabel, #customerView .customerOrdersGrid > div > div.orderTypeLabelColumn > div.preorderLabel, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select > div.preorderLabel.orderTypeLabel {
  background-color: #009d4e;
  color: #fff;
}
.orderType.directLabel, #customerView .customerOrdersGrid > div > div.orderTypeLabelColumn > div.directLabel, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select > div.directLabel.orderTypeLabel {
  background-color: #292929;
  color: #fff;
}

/* === FORMS ================================================================ */
input {
  display: block;
  width: 90%;
  border-radius: 5px;
  box-shadow: inset 0 0 2px 0 #474747;
  background: #fff;
  -webkit-appearance: none;
  border: 0;
  padding: 8px 8px;
  margin: 10px auto 0;
  font-weight: normal;
  font-size: 1rem;
  color: #000;
  /*font-weight: bold;*/
}
input:focus {
  outline: none;
}

/* do not group these rules */
*::-webkit-input-placeholder {
  color: #D9D9DC;
  font-weight: normal;
  font-size: 1rem;
}

*:-moz-placeholder {
  /* FF 4-18 */
  color: #D9D9DC;
}

*::-moz-placeholder {
  /* FF 19+ */
  color: #D9D9DC;
}

*:-ms-input-placeholder {
  /* IE 10+ */
  color: #D9D9DC;
}

input[type=submit]:disabled, input[type=button]:disabled {
  color: rgba(0, 0, 0, 0.5);
}

button {
  display: inline-block;
  width: auto;
  -webkit-appearance: none;
  margin: 10px auto;
  background: #EFEFF4;
  color: #000;
  padding: 10px 30px;
  border: 0;
  font-weight: normal;
  transition: all 300ms;
}
button:hover {
  background: rgb(185.75, 185.75, 185.75);
  transition: all 300ms;
}
button:disabled {
  color: rgb(208.7777777778, 208.7777777778, 223.2222222222);
}
button:disabled:hover {
  background: #EFEFF4;
}

span.small {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: lighter;
}

span.xsmall {
  display: flex;
  align-items: center;
  font-size: 0.5rem;
  font-weight: lighter;
  line-height: 1;
}

/* === BUTTONS ============================================================== */
.icon-button {
  display: inline-block;
  height: 45px;
  width: 50px;
  font-size: 1.3rem;
  line-height: 3.5rem;
  color: #BEBEBE;
  text-align: center;
}

.button {
  width: 90%;
  margin: 10px auto;
}
.button.left {
  margin-left: 0 !important;
}
.button.left-margin {
  margin-left: 10px !important;
}
.button.right-margin {
  margin-right: 10px !important;
}
.button.right {
  margin-right: 0 !important;
}
.button.small {
  width: 100px;
}
.button.roundButton i, .button.bottomButton i {
  display: inline-block;
  width: 20px;
  height: 14px;
}
.button.roundButton i:before, .button.bottomButton i:before {
  position: absolute;
}
.button.roundButton {
  max-width: 180px;
}
.button.roundButton > div > div {
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #666666;
  background: #fff;
  font-weight: lighter;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
}
.button.roundButton.disabledButton {
  pointer-events: none;
}
.button.roundButton.disabledButton > div > div {
  color: gray;
  box-shadow: 0 0 0 1px rgb(170.5, 170.5, 170.5);
}
.button.roundButton.downloadTermsButton {
  max-width: 240px;
  min-width: 100px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.button.roundButton.downloadTermsButton > div {
  width: 100%;
}
@media only screen and (min-width: 568px) {
  .button.roundButton.downloadTermsButton > div {
    width: auto;
  }
}
.button.roundButton.downloadTermsButton > div > div {
  width: 100%;
  margin: 0;
}
@media only screen and (min-width: 568px) {
  .button.roundButton.downloadTermsButton > div > div {
    margin-left: 0;
    margin-right: auto;
    width: auto;
  }
}
.button.roundButton.signOrderButton {
  margin-top: 20px;
  margin-bottom: 20px;
  font-weight: bold;
  width: 300px;
}
.button.roundButton.signOrderButton > div > div {
  box-shadow: none;
  background-color: #c6c6c6;
  margin: 0;
  width: 100%;
}
@media only screen and (min-width: 568px) {
  .button.roundButton.signOrderButton > div > div {
    margin-left: auto;
    margin-right: 0;
    width: auto;
  }
}
.button.roundButton.signOrderButton > div > div span {
  padding: 0 30px;
  text-transform: uppercase;
}
.button.roundButton.signOrderButton > div {
  width: 100%;
}
@media only screen and (min-width: 568px) {
  .button.roundButton.signOrderButton > div {
    width: auto;
  }
}
.button.roundButton.signOrderButton > div div:hover {
  background-color: #666666;
  color: #fff;
}
.button.roundButton.signOrderButtonDisabled {
  cursor: not-allowed;
  pointer-events: none;
}
.button.roundButton.signOrderButtonDisabled > div > div {
  color: #fff;
  background-color: rgb(223.5, 223.5, 223.5);
  box-shadow: none;
}
.button.bottomButton {
  max-width: 140px;
  /*        &.added > div > div  {
              color: $footerBottomButtonAdded !important;
              box-shadow: 0 0 0 1px $footerBottomButtonAdded !important;
          }*/
}
.button.bottomButton > div > div {
  border-radius: 5px;
  box-shadow: 0 0 0 1px #BEBEBE;
  background-color: #353535;
  font-weight: lighter;
  text-align: left;
  padding: 5px 10px;
  color: #BEBEBE;
}
.button.bottomButton.no-shadow > div > div {
  box-shadow: none;
}
.button.bottomButton.no-shadow:hover > div > div {
  background-color: transparent;
}
.button.bottomButton:hover > div > div {
  background-color: rgb(78.5, 78.5, 78.5);
}
.button.bottomButton.w-80 {
  /* class for bottom button on main view */
  width: 80px;
}
@media only screen and (min-width: 768px) {
  .button.bottomButton.w-80 {
    margin-right: 0;
  }
}
.button.bottomButton.w-100 {
  /* class for bottom button on main view */
  width: 100px;
}
@media only screen and (min-width: 768px) {
  .button.bottomButton.w-100 {
    margin-right: 0;
  }
}
.button.bottomButton.buttonIsActive > div > div {
  /*display: none;*/
  background-color: #ccc;
  color: #fff;
}
.button.black {
  width: 140px;
}
.button.black > div > div {
  background: #000;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 4px;
}
.button.black > div > div:hover {
  background-color: #000;
}
.button.calculatorButton {
  max-width: 70px;
  margin-left: 0;
  margin-bottom: 7px;
  margin-top: 0;
}
.button.calculatorButton.bottom-space {
  margin-bottom: 20px;
}
.button.calculatorButton > div > div {
  border-radius: 3px;
  box-shadow: 0 0 0 1px #000;
  background: transparent;
  font-weight: lighter;
  text-align: center;
  padding: 2px 5px;
  font-size: 0.8rem;
}
.button > div > div {
  background: #EFEFF4;
  color: #000;
  text-align: center;
  vertical-align: middle;
  padding: 10px 0;
  transition: all 300ms;
}
.button > div > div:hover {
  background: rgb(236.75, 236.75, 236.75);
  transition: all 300ms;
}

.fSearch {
  position: relative;
}
.fSearch input:-webkit-autofill,
.fSearch input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}
.fSearch > input[type=search] {
  -webkit-appearance: none;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 50px;
  background-color: #e0e0e0;
  border: none;
  border-bottom: solid 1px #999999;
  box-shadow: inset 0 0 2px 0 #474747;
  outline: none;
  color: #000;
  border-radius: 5px;
  width: 100%;
  margin: 0;
}
.fSearch > input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 10px;
  width: 10px;
  background: url(85dc8802d078a93f9012.svg) center center no-repeat;
  background-size: contain;
  cursor: pointer;
}
.fSearch > input[type=search]:focus + label {
  color: #000;
}
.fSearch > input[type=search]:focus-visible {
  box-shadow: none;
  outline: none;
}
.fSearch > input[type=search].ng-dirty.ng-invalid {
  box-shadow: none;
}
.fSearch > label {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 1.25rem;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #c6c6c6;
  pointer-events: none;
  transition: all 200ms;
}

.fSearch-container {
  display: flex;
  align-items: center;
}
.fSearch-container > i {
  font-size: 1.5rem;
  color: #666666;
  margin-right: 10px;
  transition: all 200ms;
}

/* === LOADER =============================================================== */
.loader {
  display: flex;
  align-items: flex-end;
  height: 120px;
  width: 120px;
  margin: 60px auto auto auto;
  padding-bottom: 10px;
  border-radius: 6px;
  background-color: #F7F7F7;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center 20px;
  text-align: center;
  color: #000;
}
.loader.appLoader {
  margin-top: 50px;
}
.loader.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}
.loader > span {
  margin: 0 auto;
}

.fixedNewLoader {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newLoader, .fixedNewLoader > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 120px;
  width: 120px;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-repeat: no-repeat;
  background-position: center 20px;
  text-align: center;
  color: #c6c6c6;
  margin: 0 auto;
}

.newLoader.runApp {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 100;
  margin-left: -60px;
}
.newLoader.runApp > span {
  pointer-events: none;
  position: absolute;
  display: flex;
  top: 100%;
  width: 100dvw;
  text-align: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 500ms;
}
.newLoader.runApp > span.active {
  opacity: 1;
}

.bigloader {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000000;
  background-color: rgba(0, 0, 0, 0.7);
  background-image: none;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right top;
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  backdrop-filter: saturate(180%) blur(15px);
}
.bigloader.show {
  display: block;
}
.bigloader > div {
  display: block;
  min-height: 300px;
  width: 320px;
  margin: 100px auto 0;
  border-radius: 3px;
  background-color: #F7F7F7;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center 20px;
  text-align: center;
  color: #000;
  padding-top: 68px;
}
.bigloader > div span, .bigloader > div pre {
  float: left;
  width: 100%;
}
.bigloader > div pre {
  text-align: left;
}
.bigloader .loadingTable {
  margin-top: 30px;
  font-size: 12px;
  text-align: left;
  color: #666;
  padding: 0 20px;
}
.bigloader .loadingTable > div > div {
  padding: 5px;
}
.bigloader .loadingTable .percentage {
  text-align: right;
}
.bigloader .loadingTable span {
  color: #999;
  font-size: 10px;
}

/* === gridLayout al'a iOS ================================================== */
@media only screen and (min-width: 768px) {
  .gridLayout {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
}
.gridLayout > div {
  display: block;
  float: left;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .gridLayout > div {
    display: table-cell;
    width: 50%;
  }
}
.gridLayout .column-30, .gridLayout .column-70, .gridLayout .column-50 {
  width: 100%;
  height: auto;
  overflow: auto;
}
.gridLayout .column-30.column-30, .gridLayout .column-70.column-30, .gridLayout .column-50.column-30 {
  background: #E5E5E5;
  padding-bottom: 10px;
}
.gridLayout .column-30.column-70, .gridLayout .column-70.column-70, .gridLayout .column-50.column-70 {
  background: #f0f0f0;
}
@media only screen and (min-width: 768px) {
  .gridLayout .column-30, .gridLayout .column-70, .gridLayout .column-50 {
    height: 100%;
    overflow-y: scroll;
  }
  .gridLayout .column-30.column-30, .gridLayout .column-70.column-30, .gridLayout .column-50.column-30 {
    width: 30%;
  }
  .gridLayout .column-30.column-50, .gridLayout .column-70.column-50, .gridLayout .column-50.column-50 {
    width: 50%;
  }
  .gridLayout .column-30.column-70, .gridLayout .column-70.column-70, .gridLayout .column-50.column-70 {
    width: 70%;
  }
  .gridLayout .column-30.column-fix-300, .gridLayout .column-70.column-fix-300, .gridLayout .column-50.column-fix-300 {
    width: 300px;
    float: left;
  }
  .gridLayout .column-30.column-fix, .gridLayout .column-70.column-fix, .gridLayout .column-50.column-fix {
    width: calc(70% + 30% - 300px);
  }
}

div.list-block-header {
  padding: 5px 20px;
  background: #eee;
  margin-bottom: -9px;
}

#pleaseSelectSeason {
  margin: 0;
  min-width: 320px;
}

ul.list-block {
  padding: 0 0 0 20px;
  background: #fff;
  box-shadow: 0 1px 0 0 #C8C7CC, 0 -1px 0 0 #C8C7CC;
  margin: 10px 0 0;
}
ul.list-block li {
  list-style-type: none;
}
ul.list-block li.active a {
  font-weight: normal;
}
ul.list-block li a {
  color: #000;
  width: 100%;
  padding: 15px 0;
  display: block;
  box-shadow: 0 1px 0 0 #C8C7CC;
  font-weight: 300;
  font-size: 0.9rem;
  transition: color 300ms;
}
ul.list-block li a i {
  font-size: 0.7rem;
  margin-left: 2px;
  margin-right: 4px;
  display: inline-block;
  width: 13px;
}
ul.list-block li a:hover span {
  color: #adadad;
  transition: color 300ms;
}

a.accordion {
  margin: 5px 0;
  display: block;
  color: #000;
  width: 100%;
  padding: 15px 0 0 20px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.9rem;
  transition: color 300ms;
}
a.accordion i {
  font-size: 0.7rem;
  margin-left: 2px;
  margin-right: 4px;
  display: inline-block;
  width: 13px;
}

div.cartGrid div.cartPicture > div.thumbFrame > div,
div.cartGrid a.cartPicture > div.thumbFrame > div, .cleanList .thumb > div {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
div.cartGrid div.cartPicture > div.thumbFrame > div.status-loading,
div.cartGrid a.cartPicture > div.thumbFrame > div.status-loading, .cleanList .thumb > div.status-loading {
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 40px 40px;
}
div.cartGrid div.cartPicture > div.thumbFrame > div.status-error,
div.cartGrid a.cartPicture > div.thumbFrame > div.status-error, .cleanList .thumb > div.status-error {
  background-image: url(76c5b952a644e9554e27.svg);
  background-size: 40px 40px;
}

.cleanList {
  font-weight: lighter;
}
.cleanList.sortable {
  cursor: grab;
}
.cleanList.sortable.ui-sortable-helper {
  border: 1px solid #ddd;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
}
.cleanList.isCurrent {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.05);
}
.cleanList .first-row > div {
  height: 40px;
  color: #000;
}
.cleanList .first-row > div.toggleSorting {
  cursor: pointer;
}
.cleanList .first-row > div:first-child {
  padding-left: 5px;
  align-items: center;
}
.cleanList .sortorder {
  /*display: inlin-block !important;*/
}
.cleanList .sortorder:after {
  content: "▼";
}
.cleanList .sortorder.reverse:after {
  content: "▲";
}
.cleanList .padding-left {
  padding-left: 5px;
}
.cleanList .center {
  text-align: center;
}
.cleanList .left {
  text-align: left;
}
.cleanList .right {
  text-align: right;
}
.cleanList > .productNoExists > div {
  box-shadow: inset 0 5px 0 0 rgba(255, 0, 0, 0.5), inset 0px -5px 0 0 rgba(255, 0, 0, 0.5) !important;
}
.cleanList > .productNoExists > div:first-child {
  box-shadow: inset 5px 5px 0 0 rgba(255, 0, 0, 0.5), inset 0px -5px 0 0 rgba(255, 0, 0, 0.5) !important;
}
.cleanList > .productNoExists > div:last-child {
  box-shadow: inset -5px 5px 0 0 rgba(255, 0, 0, 0.5), inset 0px -5px 0 0 rgba(255, 0, 0, 0.5) !important;
}
.cleanList .descriptionCell {
  line-height: 1.3em !important;
  overflow-y: hidden;
  overflow-x: auto;
  text-overflow: initial;
  white-space: normal !important;
  word-break: break-word;
}
.cleanList .descriptionCell.noExistsWrapper {
  grid-column: 1/span 3;
}
.cleanList .descriptionCell ul {
  padding: 0;
  margin: 3px 0;
}
.cleanList .descriptionCell li {
  list-style-type: none;
  font-size: 0.8em;
}
.cleanList .noExists {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: #e03e2e;
  height: 100%;
}
.cleanList .isBlocked > div > span {
  color: #e03e2e !important;
}
.cleanList .removeColumn {
  text-align: center;
  vertical-align: top;
}
.cleanList .removeColumn i {
  margin-top: 0 !important;
}
.cleanList .removeColumn:hover {
  cursor: pointer;
}
.cleanList .removeColumn:hover > i:before {
  color: #e03e2e !important;
}
.cleanList .pseudoCheckbox i:before {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin-top: 0 !important;
}
@media only screen and (min-width: 768px) {
  .cleanList > .row.smartphone {
    display: none;
  }
}
.cleanList > .row.full {
  display: none;
}
@media only screen and (min-width: 768px) {
  .cleanList > .row.full {
    display: table-row;
  }
}
.cleanList > .row.pointer {
  cursor: pointer;
}
.cleanList > .row > div {
  float: left;
  width: 33.33%;
  height: 40px;
  line-height: 1.4rem;
  color: #000;
}
.cleanList > .row > div.sm-border {
  box-shadow: inset 0 -1px 0 0 #DDDCDF;
}
.cleanList > .row > div.w-100 {
  width: 100%;
}
.cleanList > .row > div .order-name {
  line-height: 1rem;
}
@media only screen and (min-width: 768px) {
  .cleanList > .row > div {
    float: none;
    display: table-cell;
    height: 35px;
    box-shadow: inset 0 -1px 0 0 #DDDCDF;
    width: auto;
  }
  .cleanList .w-40 {
    width: 40% !important;
  }
  .cleanList .w-50 {
    width: 50% !important;
  }
  .cleanList .w-60 {
    width: 60% !important;
  }
  .cleanList .thin {
    width: 2% !important;
  }
  .cleanList .small {
    width: 5% !important;
  }
  .cleanList .narrow {
    width: 9% !important;
  }
  .cleanList .wider {
    width: 15% !important;
  }
  .cleanList .my-content {
    line-height: 1.2rem !important;
    padding: 4px 0;
  }
}
.cleanList .thumbFrame {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 105px !important;
}
.cleanList .row:hover > div, .cleanList .row.touch > div, .cleanList .opened, .cleanList .selected {
  background: rgb(241.9, 241.9, 241.9);
}
@media only screen and (min-width: 768px) {
  .cleanList .row:hover > div.opened, .cleanList .row.touch > div.opened, .cleanList .opened.opened, .cleanList .selected.opened {
    background: transparent;
  }
}
.cleanList i:before {
  display: inline-block;
  margin-top: 11px;
  /*position: absolute;*/
  font-size: 1.2rem;
  color: #000;
}

.ios-left-padding {
  width: 100%;
  padding-left: 5px;
}

.header-border {
  box-shadow: 0 1px 0 0 #787878;
  margin-bottom: 1px;
}

.centerInput {
  font-weight: lighter;
}
.centerInput .input {
  width: 62%;
}
.centerInput .input input {
  margin-bottom: 10px;
  background: #FAFAFA;
}

/* === Notify =============================================================== */
@media only screen and (min-width: 768px) {
  .empty {
    min-height: calc(100dvh - 50px - 55px);
  }
}
.empty .fastGrid, .empty .button {
  height: 100%;
}

/* === Remarks ============================================================== */
.currentRemarks {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* === Pagination =========================================================== */
.pagination-controls {
  padding: 0 0 5px 0;
  width: 100%;
}
.pagination-controls.margin {
  margin-top: 10px;
}
@media only screen and (min-width: 480px) {
  .pagination-controls {
    padding: 10px 0 5px 10px;
  }
}

ul.pagination {
  height: 40px;
  line-height: 37px;
  margin-bottom: 10px;
  background: hsl(0, 0%, 102.8431372549%);
  padding: 0;
}
ul.pagination > li {
  height: 40px;
}
ul.pagination > li > a {
  width: 90%;
  height: 100%;
  display: block;
  text-align: center;
  color: #000;
  margin: 0 auto;
}
ul.pagination > li > a:hover {
  background: #474747;
  color: #fff;
}
ul.pagination > li.active a {
  background: rgb(134.75, 134.75, 134.75);
  color: #fff;
  font-weight: bold;
  pointer-events: none;
}
ul.pagination > li.disabled a {
  color: rgb(147.5, 147.5, 147.5);
  pointer-events: none;
}

/* === Sidebar ============================================================== */
h1.menuHeader, h1.menuHeader > a {
  color: #999;
  font-size: 1rem;
  text-indent: 20px;
}

h1.menuHeader {
  background: #fff;
  padding: 20px 0;
  margin: 0;
}
h1.menuHeader > a, h1.menuHeader > span {
  color: #000;
  font-family: "latoregular", sans-serif;
  font-weight: lighter;
}

/* === Sold Out ============================================================= */
div.soldOutImage {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
div.soldOutImage.status-soldOut {
  background-image: url(7bbb06b01850a788d6ca.svg);
}

/* ===  rounded switch ====================================================== */
.checkboxSwitch {
  --switch-size: 30px;
  --switch-margin-size: 1px;
}
@media only screen and (min-width: 568px) {
  .checkboxSwitch {
    --switch-size: 60px;
    --switch-margin-size: 2px;
  }
}
.checkboxSwitch {
  position: relative;
  display: inline-block;
  width: var(--switch-size);
  height: calc(var(--switch-size) / 2 + var(--switch-margin-size) * 2);
  margin: var(--switch-margin-size);
}
.checkboxSwitch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #eee;
  transition: 400ms;
  box-shadow: inset 0 0 var(--switch-margin-size) rgba(0, 0, 0, 0.1);
  border-radius: calc(var(--switch-size) / 2 + var(--switch-margin-size) * 2);
}
.checkboxSwitch .slider:before {
  --circle-size: calc(var(--switch-size) / 2 - var(--switch-margin-size) * 2);
  position: absolute;
  content: "";
  height: var(--circle-size);
  width: var(--circle-size);
  left: calc(var(--switch-margin-size) * 2);
  bottom: calc(var(--switch-margin-size) * 2);
  background-color: white;
  transition: 400ms;
  box-shadow: 0 0 var(--switch-margin-size) rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.checkboxSwitch input {
  display: none !important;
}
.checkboxSwitch input:checked + .slider {
  background-color: #009d4e;
}
.checkboxSwitch input:focus + .slider {
  box-shadow: 0 0 1px #009d4e;
}
.checkboxSwitch input:checked + .slider:before {
  --translate-x: calc(var(--switch-size) / 2 - var(--switch-margin-size) * 2);
  transform: translateX(var(--translate-x));
}

/* ===  trim text to 3 lines ================================================ */
.line-clamp3 {
  position: relative;
  line-height: 1.2em;
  height: 3.6em; /* exactly three lines */
}

.line-clamp3:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
}

@supports (-webkit-line-clamp: 3) {
  .line-clamp3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 3.6em; /* I needed this to get it to work */
    height: auto;
  }
  .line-clamp3:after {
    display: none;
  }
}
/* ===  trim text to 3 lines = END =========================================== */
/* === DEBUG ================================================================ */
section.debug {
  background: lightgoldenrodyellow;
  border: dashed 3px red;
  color: #000;
  max-height: 60px;
  transition: all 1000ms;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
}
section.debug.active {
  max-height: 1000px;
}
section.debug > a {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  background: orange;
}
section.debug > a > i {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  opacity: 0;
  transition: all 500ms;
}
section.debug > a > i.active {
  opacity: 1;
}
section.debug > a + * {
  max-width: calc(100% - 40px);
}

pre.debug {
  text-align: left;
  font-size: 12px;
}
pre.debug:before, pre.debug:after {
  content: "DEBUG DEBUG DEBUG";
  display: block;
  background: yellow;
  color: red;
  font-weight: bold;
  padding: 5px;
  width: 100%;
  border: dotted 3px red;
  text-align: center;
}
html#production pre.debug {
  display: none;
}

#debugToggle {
  display: block;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  color: #e03e2e;
}
#debugToggle > i {
  font-size: 24px;
  line-height: 28px;
}

.th-col-box {
  height: 100%;
  width: 27% !important;
}
.th-col-box > div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-gap: 0 5px;
}
.th-col-box > div > div:nth-child(3) {
  white-space: normal;
}

#createNewOrderTooltip,
#hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip {
  position: absolute;
  bottom: 30px;
  right: 10px;
  background: #fff;
  transition: transform 300ms;
  transform: translateX(120%);
  z-index: 1000;
  color: #333;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(51, 51, 51, 0.5);
}
.active#createNewOrderTooltip,
.active#hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip {
  transform: none;
}

#createNewOrderTooltip > a.tooltipBodyA > h1,
#hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip > a.tooltipBodyA > h1 {
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  text-transform: uppercase;
}

#createNewOrderTooltip > a.tooltipBodyA > h2,
#hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip > a.tooltipBodyA > h2 {
  margin: 0;
  text-align: right;
  font-size: 0.875rem;
  font-weight: normal;
}

#ordersView #createNewOrderTooltip,
#ordersView #hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip {
  bottom: 85px;
}

#packagesView #createNewOrderTooltip,
#packagesView #hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip {
  bottom: 85px;
}

#productView #createNewOrderTooltip,
#productView #hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip {
  bottom: 85px;
}

#createNewOrderTooltip > a.tooltipBodyA,
#hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip > a.tooltipBodyA {
  display: block;
  color: #333;
}
#createNewOrderTooltip > a.closeTooltip,
#hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip > a.closeTooltip {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: #828282;
  font-size: 1.25rem;
  border-radius: 50%;
  transform: translate(-30%, -30%);
}
#createNewOrderTooltip > a.closeTooltip > i,
#hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip > a.closeTooltip > i {
  display: flex;
}

#createNewOrderTooltip {
  display: block;
}
#createNewOrderTooltip:after {
  content: "";
  position: absolute;
  bottom: -15px;
  right: 45px;
  width: 30px;
  height: 30px;
  transform: rotate(-45deg) rotate(180deg);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, white 50.5%, white);
  box-shadow: 5px -5px 10px -5px rgba(51, 51, 51, 0.5);
}

#hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip {
  width: calc(100% - 20px);
}
@media only screen and (min-width: 768px) {
  #hasProductsWithOnlyZeroQuantitiesOrExceptionsTooltip {
    width: auto;
  }
}

.ngViewContainer {
  background: #fff;
}
html.safari .ngViewContainer {
  height: 100dvh;
  overflow: hidden;
}

html.safari .ngViewContainer {
  height: 100dvh;
  overflow: hidden;
}

.ngViewContainer > section, .ngViewContainer > ng-include > section {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100dvh;
}
html.safari .ngViewContainer > section, html.safari .ngViewContainer > ng-include > section {
  height: 100dvh;
}

#inactiveShadow {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 100000000;
  pointer-events: none;
  transition: all 300ms;
}
#inactiveShadow.active {
  background: rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
#inactiveShadow > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 32px;
  position: absolute;
  top: 0;
  right: 0;
  background: #292929;
  color: #c6c6c6;
  font-size: 0.75rem;
  text-align: center;
  transition: all 300ms;
  transform: translateY(-100%);
  box-shadow: inset 0 -1px 0 #000;
}
#inactiveShadow.active > div {
  transform: translateY(0);
}

#inactiveShadow > div i#sleepIcon {
  width: 1em;
  height: 1em;
  display: inline-flex;
  margin-right: 0.5em;
  background: url(50d5dc0535f6671ceef2.svg) center center no-repeat;
  background-size: contain;
  filter: invert(35%) sepia(84%) saturate(1098%) hue-rotate(120deg) brightness(96%) contrast(102%);
  transform: scale(1.5);
}

div.sv-tooltip-container > div.tooltip-list-wrapper, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover, div.chooseLangWrapper > div, #header > div.right-nav > div.infoWrapper > div.infoPopup, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover {
  display: none;
  position: absolute;
  right: 10px;
  background: #2f2f2f;
  width: 200px;
  z-index: 10;
  border-radius: 10px;
  border: solid 1px #444444;
  font-size: 0.75rem;
  top: 100px;
}
@media only screen and (min-width: 768px) {
  div.sv-tooltip-container > div.tooltip-list-wrapper, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover, div.chooseLangWrapper > div, #header > div.right-nav > div.infoWrapper > div.infoPopup, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover {
    top: 60px;
  }
}
div.sv-tooltip-container > div.active.tooltip-list-wrapper, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.active.groupActionsPopover, div.chooseLangWrapper > div.active, #header > div.right-nav > div.infoWrapper > div.active.infoPopup, footer#packageFooter > div.packageActionsWrapper > div.active.groupActionsPopover, footer#orderFooter div.orderActionsWrapper > div.active.groupActionsPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.active.groupActionsPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.active.groupActionsPopover {
  display: block;
}
div.sv-tooltip-container > div.tooltip-list-wrapper:after, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover:after, div.chooseLangWrapper > div:after, #header > div.right-nav > div.infoWrapper > div.infoPopup:after, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover:after, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover:after, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover:after, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover:after {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: #2f2f2f;
  transform: rotate(45deg);
  border-top: solid 1px #444444;
  border-left: solid 1px #444444;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > a, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > a, div.chooseLangWrapper > div > a, #header > div.right-nav > div.infoWrapper > div.infoPopup > a, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > a, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > a, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > a, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > a {
  display: block;
  margin: 0 15px;
  padding: 12px 10px;
  text-decoration: none;
  color: #f8f8f8;
  border-bottom: solid 1px #444444;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > a:last-child, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > a:last-child, div.chooseLangWrapper > div > a:last-child, #header > div.right-nav > div.infoWrapper > div.infoPopup > a:last-child, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > a:last-child, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > a:last-child, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > a:last-child, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > a:last-child {
  border: none;
}

.marketplaceMode #header .headerItems a#splashMediaButtonButton span {
  border: none;
}

#header {
  font-family: "pt_sansregular", sans-serif;
  height: 50px;
  box-sizing: content-box;
  overflow: visible;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: inset 0 -1px 0 0 #444444;
  background-color: #252525;
}
@media only screen and (min-width: 768px) {
  #header {
    flex-wrap: nowrap;
    flex-direction: row;
  }
}
@media only screen and (min-width: 1024px) {
  #header {
    padding: 0;
  }
}
#header.orderHeader {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
#header.orderHeader.orderViewHeader barcode-scanner {
  display: none;
}
#header.orderHeader > div.right-nav {
  width: auto;
}
#header.orderHeader > div.right-nav > .headerSummaryDesktop {
  display: none;
}
@media only screen and (min-width: 1024px) {
  #header.orderHeader > div.right-nav > .headerSummaryDesktop {
    display: block;
  }
}
@media only screen and (min-width: 1024px) {
  #header.orderHeader > div.right-nav > div.infoWrapper {
    display: none;
  }
}
#header a.showHeaderBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 100%;
  color: #c6c6c6;
  text-decoration: none;
  font-size: 1.5rem;
}
@media only screen and (min-width: 768px) {
  #header a.showHeaderBtn {
    display: none;
  }
}
#header a.showHeaderBtn > i::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
#header > div {
  display: flex;
}
#header > div.left-nav a.backButton,
#header > div a.backButton {
  width: 40px !important;
  text-align: center;
  display: none;
}
@media only screen and (min-width: 728px) {
  #header > div.left-nav a.backButton,
  #header > div a.backButton {
    display: flex !important;
  }
}
#header > div.left-nav a.backButton:before,
#header > div a.backButton:before {
  font-size: 18px;
  line-height: 50px;
  color: #c6c6c6;
}
#header > div.left-nav {
  width: 40%;
  align-items: center;
}
#header > div.center-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
}
#header > div.center-nav.orderTitle {
  font-size: 0.875rem;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #header > div.center-nav.orderTitle {
    font-size: 1rem;
  }
}
#header > div.center-nav.orderTitle > div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #f8f8f8 transparent;
}
#header > div.center-nav.orderTitle > div::-webkit-scrollbar {
  width: 5px;
}
#header > div.center-nav.orderTitle > div::-webkit-scrollbar-thumb {
  background-color: #f8f8f8;
}
#header > div.center-nav div.orderTitleFirstLine {
  padding: 0 5px;
}
#header > div.center-nav div.orderTitleSecondLine {
  font-weight: lighter;
  text-align: center;
  display: flex;
  justify-content: center;
}
#header > div.right-nav {
  display: flex;
  width: 40%;
  align-items: center;
  justify-content: flex-end;
  color: #fff;
  font-size: 0.875rem;
}
@media only screen and (min-width: 768px) {
  #header > div.right-nav {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 1024px) {
  #header > div.right-nav {
    font-weight: bold;
  }
}
#header > div.right-nav a {
  color: #f8f8f8;
}
#header > div.right-nav #infoMessage {
  display: block;
  position: absolute;
  top: 62px;
  right: 150px;
  padding: 10px;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #666666, 2px 2px 3px 0 #666666;
  color: #666666;
  background-color: #fff;
}
#header > div.right-nav #infoMessage:after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-25px, -6px) rotate(45deg);
  background-color: white;
  border-top: #666666 solid 1px;
  border-left: #666666 solid 1px;
}
#header > div.right-nav #infoMessage.showAndHideInfoMessage {
  animation: showAndHidden 5s forwards;
}
@keyframes showAndHidden {
  0% {
    pointer-events: none;
    opacity: 0;
  }
  10% {
    pointer-events: auto;
    opacity: 1;
  }
  80% {
    pointer-events: auto;
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  100% {
    pointer-events: none;
    display: none;
  }
}
#header > div.right-nav #infoMessage:hover {
  cursor: pointer;
}
#header > div.right-nav div.summary {
  padding: 3px 5px;
}
#header > div.right-nav div.summary > a {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#header > div.right-nav div.summary > a > div.summaryIcon {
  margin: 0 5px;
  padding: 5px;
}
#header > div.right-nav div.summary > a > div.summaryIcon > i {
  font-size: 1.5rem;
  position: relative;
  display: flex;
  align-items: center;
}
#header > div.right-nav div.summary > a > div.summaryIcon > i.desktop {
  display: none;
}
@media only screen and (min-width: 1024px) {
  #header > div.right-nav div.summary > a > div.summaryIcon > i.desktop {
    display: flex;
  }
}
#header > div.right-nav div.summary > a > div.summaryIcon > i.mobile {
  font-size: 0.875rem;
}
@media only screen and (min-width: 1024px) {
  #header > div.right-nav div.summary > a > div.summaryIcon > i.mobile {
    display: none;
  }
}
#header > div.right-nav div.summary > a > div.summaryIcon > i.order-icon.basketDot:after {
  left: 15px;
  bottom: -3px;
}
#header > div.right-nav div.summary > a > div.summaryIcon > i.package-icon {
  background-image: url(a5192e191456db75a164.svg);
  padding: 0 15px;
}
#header > div.right-nav div.summary > a > div.summaryIcon > i.package-icon.basketDot:after {
  left: 18px;
  bottom: -2px;
}
#header > div.right-nav div.summary > a > div.summaryIcon > i.basketDot:after {
  content: "";
  background-color: #009d4e;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #292929;
  box-sizing: content-box;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div {
  justify-content: flex-end;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount {
  display: flex;
  justify-content: flex-end;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p {
  margin: 0;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p:nth-child(1) {
  margin: 0 10px 0 0;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p span.totalWpPrice.unreached {
  color: #EB5757;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p span.totalWpPrice.reached {
  color: #219653;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p a.target {
  margin: 0 2px;
  padding: 2px 5px;
  border-radius: 5px;
  border: solid 2px #e03e2e;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p a.target:hover {
  color: #fff;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p a.target > span:nth-child(1) {
  display: none;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p a.target > span:nth-child(2) {
  display: inline;
  color: #e03e2e;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p a.target.set {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: none;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p a.target.set > span:nth-child(1) {
  display: inline;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p a.target.set > span:nth-child(2) {
  display: none;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p .blockForCustomer {
  pointer-events: none;
  cursor: pointer;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p .blockForCustomer .targetTextLink {
  text-decoration: none;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.itemAmount > p .targetTextLink {
  text-decoration: underline;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.discountInfo {
  display: flex;
  text-align: right;
}
#header > div.right-nav div.summary > a > div.summaryInfo > div.discountInfo > p {
  margin: 0;
  font-weight: normal;
}
#header > div div.headerItems, #header > div.left-nav {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  flex-direction: column;
  width: 100%;
  padding: 0 10px;
  justify-content: center;
  align-items: center;
  z-index: 1000000;
  background: #333;
  box-shadow: 0 15px 10px -10px #000;
}
#header > div div.headerItems.active, #header > div.left-nav.active {
  display: flex;
}
@media only screen and (min-width: 768px) {
  #header > div div.headerItems, #header > div.left-nav {
    position: static;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background: none;
    box-shadow: none;
    width: auto;
  }
}
#header > div div.headerItems:after, #header > div.left-nav:after {
  left: 15px;
}
#header > div div.headerItems > a, #header > div.left-nav > a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #c6c6c6;
  text-decoration: none;
  font-size: 1.125rem;
  padding: 0 10px;
  width: 100%;
  height: 50px;
}
#header > div div.headerItems > a:not(:last-child), #header > div.left-nav > a:not(:last-child) {
  border-bottom: 1px solid #999;
}
@media only screen and (min-width: 768px) {
  #header > div div.headerItems > a:not(:last-child), #header > div.left-nav > a:not(:last-child) {
    border-bottom: none;
  }
}
#header > div div.headerItems > a.backButton.colorText.icon-arrow-left-outline + a:nth-of-type(2) > span, #header > div.left-nav > a.backButton.colorText.icon-arrow-left-outline + a:nth-of-type(2) > span {
  border: none;
}
@media only screen and (min-width: 768px) {
  #header > div div.headerItems > a, #header > div.left-nav > a {
    padding: 0;
    border: none;
    width: auto;
  }
  #header > div div.headerItems > a:last-child, #header > div.left-nav > a:last-child {
    border: none;
  }
  #header > div div.headerItems > a.colorText.textMenuItem.ng-hide + a:nth-of-type(2) > span, #header > div.left-nav > a.colorText.textMenuItem.ng-hide + a:nth-of-type(2) > span {
    border: none;
  }
  #header > div div.headerItems > a:not(:first-child) > span, #header > div.left-nav > a:not(:first-child) > span {
    border-left: 1px solid #fff;
  }
  #header > div div.headerItems > a:hover > span, #header > div.left-nav > a:hover > span {
    text-decoration: underline;
    color: #fff;
  }
}
#header > div div.headerItems > a.active > span, #header > div.left-nav > a.active > span {
  font-weight: bold;
  text-decoration: underline;
}
#header > div div.headerItems > a:focus-visible, #header > div.left-nav > a:focus-visible {
  box-shadow: inset 0 0 0 2px #f8f8f8;
}
html.safari #header > div div.headerItems > a:focus:not(:active), html.safari #header > div.left-nav > a:focus:not(:active) {
  box-shadow: inset 0 0 0 2px #f8f8f8;
}

#header > div div.headerItems > a > span, #header > div.left-nav > a > span {
  display: block;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 200;
  color: #f8f8f8;
  padding: 0 8px;
  border-radius: 1px;
  letter-spacing: -0.05em;
}
#header > div div.headerItems > a.active > span, #header > div.left-nav > a.active > span {
  transition: all 100ms;
}
#header > div .totalOrdersQuantity, #header > div .ordersListLoading, #header > div .totalCustomersQuantity, #header > div .customersListIsLoading {
  margin-left: 0.25rem;
}
#header #headerLeft {
  min-width: 50px;
}
@media only screen and (min-width: 568px) {
  #header #headerLeft {
    min-width: 160px;
  }
}
#header #headerCenter {
  display: flex;
  align-items: center;
  width: calc(100% - 100px);
}
@media only screen and (min-width: 375px) {
  #header #headerCenter {
    width: 50%;
  }
}
@media only screen and (min-width: 568px) {
  #header #headerCenter {
    padding: 0 10px;
  }
}
#header #brandLogo {
  width: 140px;
  height: 32px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media only screen and (min-width: 768px) {
  #header #brandLogo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 50%);
  }
}
#header #mediaBookLogo {
  width: 100%;
  max-width: 180px;
  height: 32px;
  background: url(11cde71cba3a808a1a1b.svg) center center no-repeat;
  background-size: contain;
  margin: 2px auto;
}
@media only screen and (min-width: 375px) {
  #header #mediaBookLogo {
    max-width: 230px;
  }
}
@media only screen and (min-width: 414px) {
  #header #mediaBookLogo {
    background-size: 175px;
  }
}
@media only screen and (min-width: 768px) {
  #header #mediaBookLogo {
    margin: 0;
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translate(-50%, 50%);
  }
}

#obHeader {
  display: grid;
  grid-template-areas: "logo . search user";
  --user-size: 45px;
  --search-size: 150px;
  grid-template-columns: minmax(auto, 110px) auto minmax(auto, var(--search-size)) minmax(auto, var(--user-size));
  align-items: center;
}
@media only screen and (min-width: 414px) {
  #obHeader {
    --user-size: 60px;
    --search-size: 220px;
  }
}
#obHeader #obLogo {
  grid-area: logo;
  width: 100%;
  height: 13px;
  background: url(11cde71cba3a808a1a1b.svg) center center no-repeat;
  background-size: contain;
  margin-left: 10px;
}
@media only screen and (min-width: 414px) {
  #obHeader #obLogo {
    margin-left: 30px;
  }
}
#obHeader sv-search {
  grid-area: search;
}
#obHeader #obSearch {
  grid-area: search;
  display: grid;
  grid-template-columns: 35px auto 35px;
  grid-template-rows: 1fr;
  grid-gap: 5px;
  align-items: center;
  background: #4f4f4f;
  border-radius: 30px;
}
#obHeader #obSearch input:-webkit-autofill,
#obHeader #obSearch input:-webkit-autofill:focus {
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 20px 20px #4f4f4f;
  caret-color: rgba(255, 255, 255, 0.5);
}
#obHeader #obSearch > input {
  width: 100%;
  color: rgba(255, 255, 255, 0.5);
  background-color: transparent;
  padding: 0.5rem 0;
  grid-column: 2/span 1;
  grid-row: 1/span 1;
}
#obHeader #obSearch > label {
  padding: 0 0.5rem;
  grid-column: 1/span 1;
  grid-row: 1/span 1;
}
#obHeader #obSearch > label > i {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}
#obHeader #obSearch > button[type=reset] {
  opacity: 0;
  pointer-events: none;
  grid-column: 3/span 1;
  grid-row: 1/span 1;
  -webkit-appearance: none;
  background: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  transition: opacity 200ms;
}
#obHeader #obSearch > button[type=reset].active {
  opacity: 1;
  pointer-events: auto;
}
#obHeader #obSearch > button[type=reset] > i {
  color: #f8f8f8;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
#obHeader #obUser {
  grid-area: user;
}

[data-icon]:before {
  font-family: "smartview360" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^=icon-]:before,
[class*=" icon-"]:before {
  font-family: "smartview360" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-chevron-left:before {
  content: "g";
}

.icon-chevron-right:before {
  content: "h";
}

.icon-remove-delete:before, .fa-times:before {
  content: "i";
}

.icon-arrow-down:before {
  content: "k";
}

.icon-user-circle-outline:before {
  content: "A";
}

.icon-user-circle:before {
  content: "B";
}

.icon-contact-2:before {
  content: "E";
}

.icon-circle-filled-outline:before {
  content: "I";
}

.icon-circle-filled:before {
  content: "J";
}

.icon-check-mark-circle:before {
  content: "K";
}

.icon-check-mark-circle-outline:before {
  content: "L";
}

.icon-globe:before {
  content: "T";
}

.icon-square-upload-outline:before {
  content: "V";
}

.icon-photos-outline:before {
  content: "W";
}

.icon-document:before {
  content: "0";
}

.icon-align-left:before {
  content: "2";
}

.icon-users:before {
  content: "3";
}

.icon-television:before {
  content: "4";
}

.icon-arrow-right-outline:before {
  content: "6";
}

.icon-arrow-up-outline:before {
  content: "7";
}

.icon-arrow-down-outline:before {
  content: "8";
}

.icon-arrow-left-outline:before {
  content: "9";
}

.icon-notepad:before {
  content: "!";
}

.icon-plus-circle:before {
  content: "&";
}

.icon-plus-circle-outline:before {
  content: "'";
}

.icon-plus-outline:before {
  content: "(";
}

.icon-minus-circle:before {
  content: ")";
}

.icon-map:before {
  content: ",";
}

.icon-calendar:before {
  content: "-";
}

.icon-calculator:before {
  content: ".";
}

.icon-info-outline:before {
  content: ";";
}

.icon-trash-bin-outline:before {
  content: "=";
}

.icon-search:before, .fa-search:before {
  content: ">";
}

.icon-search-3:before {
  content: "?";
}

.icon-home:before {
  content: "]";
}

.icon-package:before {
  content: "^";
}

.icon-media:before {
  content: "_";
}

.icon-log-out:before {
  content: "`";
}

.icon-shopping-bag:before {
  content: "{";
}

.icon-price-tag:before {
  content: "|";
}

.icon-share:before {
  content: "}";
}

.icon-notepad-selected:before {
  content: "~";
}

.icon-heart:before {
  content: "\\";
}

.icon-heart-o:before {
  content: "\e000";
}

.icon-check-mark:before, .fa-check:before {
  content: "a";
}

.icon-square-o:before {
  content: "c";
}

.icon-sort-desc:before {
  content: "d";
}

.icon-check-square-o:before {
  content: "e";
}

.icon-sort-asc:before {
  content: "f";
}

.icon-folder-open:before {
  content: "j";
}

.icon-group:before {
  content: "k";
}

.icon-archive:before {
  content: "l";
}

.icon-files:before {
  content: "m";
}

.icon-trash-bin:before {
  content: "n";
}

.icon-albums:before {
  content: "b";
}

.icon-package-box:before {
  content: "o";
}

.icon-folder-checked:before {
  content: "r";
}

.icon-star:before {
  content: "p";
}

.icon-plus:before, .fa-plus:before {
  content: "s";
}

.icon-minus:before {
  content: "t";
}

.icon-cloud-download:before, .fa-cloud-download:before {
  content: "u";
}

.icon-file-pdf-o:before, .fa-file-pdf-o:before {
  content: "v";
}

.icon-filter:before, .fa-filter:before {
  content: "w";
}

.icon-status-open:before {
  content: "x";
}

.icon-status-close-request:before {
  content: "y";
}

.icon-status-closed:before {
  content: "z";
}

.icon-status-issue:before {
  content: "C";
}

.icon-status-signed:before {
  content: "G";
}

.icon-status-sent:before {
  content: "F";
}

.icon-sorting-asc:before {
  content: "H";
}

.icon-sorting-desc:before {
  content: "M";
}

.icon-sorting-none:before {
  content: "N";
}

.icon-chevron-circle-right:before {
  content: "O";
}

.icon-chevron-circle-left:before {
  content: "P";
}

.icon-download:before {
  content: "Q";
}

.icon-check-on:before {
  content: "R";
}

.icon-check-off:before {
  content: "S";
}

.icon-clone:before {
  content: "U";
}

.icon-pie-chart:before {
  content: "X";
}

.icon-chevron-down:before {
  content: "Z";
}

.icon-history:before {
  content: "1";
}

.icon-eye-slash:before {
  content: "5";
}

.icon-eye:before {
  content: '"';
}

.icon-asterisk:before {
  content: "#";
}

.icon-target:before {
  content: "$";
}

.icon-branch:before {
  content: "%";
}

.icon-half:before {
  content: "*";
}

.icon-pending:before {
  content: "D";
}

.icon-dot:before {
  content: "+";
}

.icon-subtract:before {
  content: "/";
}

.icon-android-create:before {
  content: ":";
}

.icon-exclamation-mark:before {
  content: "<";
}

.icon-move-to:before {
  content: "@";
}

.icon-union:before {
  content: "[";
}

.icon-more-options:before {
  content: "\e001";
}

.icon-battery-full:before {
  content: "\e002";
}

.icon-done:before {
  content: "\e003";
}

.icon-union-1:before {
  content: "\e004";
}

.icon-trash-bin-1:before {
  content: "\e005";
}

.icon-share-1:before {
  content: "\e006";
}

.icon-status-cancelled:before {
  content: "Y";
}

.icon-status-closed-1:before {
  content: "\e007";
}

.icon-status-closing-request:before {
  content: "\e008";
}

.icon-copy:before {
  content: "\e009";
}

.icon-filter-1:before {
  content: "\e00a";
}

.icon-sound-on:before {
  content: "\e00c";
}

.icon-android-send:before {
  content: "\e00b";
}

.icon-sound-off:before {
  content: "\e00d";
}

.icon-step-backward:before {
  content: "\e00e";
}

.icon-step-forward:before {
  content: "\e00f";
}

.icon-scanner-icon:before {
  content: "\e010";
}

.icon-bolt:before {
  content: "\e011";
}

.icon-package-icon:before {
  content: "\e012";
}

.icon-pause:before {
  content: "\e013";
}

.icon-play:before {
  content: "\e014";
}

.icon-avatar:before {
  content: "\e015";
}

.icon-globe-regular:before {
  content: "\e016";
}

.icon-cog:before {
  content: "\e017";
}

.icon-briefcase:before {
  content: "\e018";
}

.icon-success-tick:before {
  content: "\e019";
}

.icon-pending-envelope:before {
  content: "\e01a";
}

.icon-brandlist:before {
  content: "\e01b";
}

.icon-clear-all:before {
  content: "\e01c";
}

.icon-linkedin-icon:before {
  content: "q";
}

.icon-question-mark-circle:before {
  content: "\e01d";
}

.icon-locked:before {
  content: "\e01e";
}

#headerRight {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media only screen and (min-width: 375px) {
  #headerRight {
    width: auto;
  }
}
@media only screen and (min-width: 768px) {
  #headerRight {
    width: auto;
  }
}
@media only screen and (min-width: 1024px) {
  #headerRight {
    align-items: center;
  }
}
#brandsView #headerRight {
  width: 50px;
}
@media only screen and (min-width: 375px) {
  #brandsView #headerRight {
    width: auto;
  }
}

#headerRight > div {
  width: 100%;
  padding-right: 10px;
}

#headerUser {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #c6c6c6;
  text-align: right;
  margin: 0 auto 0 auto;
  height: 50px;
}
@media only screen and (min-width: 768px) {
  #headerUser {
    margin: 0;
  }
}
#headerUser:focus-visible {
  box-shadow: inset 0 -3px 0 0 #F2F2F2;
}
html.safari #headerUser:focus:not(:active) {
  box-shadow: inset 0 -3px 0 0 #F2F2F2;
}

#headerUser #headerUserData {
  display: none;
}
@media only screen and (min-width: 568px) {
  #headerUser #headerUserData {
    display: block;
  }
}
#headerUser #headerUserData p {
  margin: 0;
}
#headerUser #headerUserData p.name {
  font-weight: bold;
}
#headerUser #headerUserData p.email {
  font-size: 0.75rem;
}
#headerUser #avatar {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background: url(424ceb759bc7beafcf4e.svg) center center no-repeat;
  background-size: contain;
}
@media only screen and (min-width: 568px) {
  #headerUser #avatar {
    margin-left: 20px;
  }
}

#headerMenu {
  display: none;
  position: absolute;
  right: 10px;
  background: #2f2f2f;
  width: 200px;
  border-radius: 10px;
  border: solid 1px #444444;
  font-size: 0.75rem;
  top: 60px;
  z-index: 1000000;
}
@media only screen and (min-width: 375px) {
  #brandsView #headerMenu {
    top: 60px;
  }
}

#headerMenu.active {
  display: block;
}
#headerMenu:after {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: #2f2f2f;
  transform: rotate(45deg);
  border-top: solid 1px #444444;
  border-left: solid 1px #444444;
}
#headerMenu > a {
  display: block;
  margin: 0 15px;
  padding: 12px 10px;
  text-decoration: none;
  font-weight: normal;
  color: #f8f8f8;
  border-bottom: solid 1px #444444;
}
#headerMenu > a:last-child {
  border: none;
}
#headerMenu > a:focus-visible {
  font-weight: bold;
}
html.safari #headerMenu > a:focus:not(:active) {
  font-weight: bold;
}

footer {
  min-height: 55px;
  width: 100%;
  box-sizing: border-box;
  background: #292929;
  font-size: 0.875rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 10px;
  padding: 0 10px;
  align-items: center;
  height: 55px;
  background: #292929;
  box-shadow: inset 0 1px 0 0 #444444;
  overflow: visible;
}
footer select-language {
  height: 100%;
}
footer > div, footer > ng-include {
  min-height: 55px;
  height: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer > div:first-child, footer > ng-include:first-child {
  justify-content: flex-start;
}
footer > div:last-child, footer > ng-include:last-child {
  justify-content: flex-end;
}
footer > div.footerButtons2 a, footer > ng-include.footerButtons2 a {
  margin-right: 5px;
}
footer > div.footerButtons2 a:last-child, footer > ng-include.footerButtons2 a:last-child {
  margin-right: 0;
}
footer > div {
  gap: 0.5rem;
}
footer .brandLogo {
  padding: 10px 0;
}
footer .brandLogo > a {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  float: left;
  overflow: auto;
  min-height: 35px;
}
footer div.pagination {
  width: 45px;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer > div > a.svButton, #showOrderView > header footer > div > a#downloadPDF {
  white-space: nowrap;
}
footer a.footerBrandLogo {
  min-width: 32px;
}
@media only screen and (min-width: 768px) {
  footer a.footerBrandLogo {
    min-width: 120px;
  }
}
footer a.footerBtn.footerBtn {
  margin: 0;
  padding: 0.25rem 0.5rem;
}
@media only screen and (min-width: 768px) {
  footer a.footerBtn.footerBtn.onlyMobileIcon > i {
    display: none;
  }
}
footer a.footerBtn.footerBtn > span {
  display: none;
}
@media only screen and (min-width: 768px) {
  footer a.footerBtn.footerBtn > span {
    display: inline;
  }
}
footer a.footerBtn.footerBtn > span.desktopIcon {
  display: none;
}
@media only screen and (min-width: 768px) {
  footer a.footerBtn.footerBtn > span.desktopIcon {
    display: inline;
    margin-right: 0.25rem;
  }
}
footer a.footerBtn.footerBtn > i {
  font-size: 1rem;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  footer a.footerBtn.footerBtn > i {
    margin-right: 0.5rem;
  }
}

#customersFooter,
#introFooter,
#mainFooter,
#mediaFooter {
  grid-template-areas: "lang logo links";
  grid-template-columns: 1fr auto 1fr;
}
#customersFooter select-language,
#introFooter select-language,
#mainFooter select-language,
#mediaFooter select-language {
  width: fit-content;
  grid-area: lang;
}
#customersFooter > div.svFooterLogoWrapper,
#introFooter > div.svFooterLogoWrapper,
#mainFooter > div.svFooterLogoWrapper,
#mediaFooter > div.svFooterLogoWrapper {
  display: flex;
  justify-content: center;
}
#customersFooter > div.svFooterLogoWrapper > div.svFooterLogo,
#introFooter > div.svFooterLogoWrapper > div.svFooterLogo,
#mainFooter > div.svFooterLogoWrapper > div.svFooterLogo,
#mediaFooter > div.svFooterLogoWrapper > div.svFooterLogo {
  grid-area: logo;
  background: url(013a11ad1131735cd58e.svg) center center no-repeat;
  background-size: contain;
  width: 120px;
  height: 25px;
  filter: brightness(0) invert(1);
}
#customersFooter > nav,
#introFooter > nav,
#mainFooter > nav,
#mediaFooter > nav {
  grid-area: links;
  display: grid;
  justify-content: flex-end;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  align-items: center;
}
@media only screen and (min-width: 414px) {
  #customersFooter > nav,
  #introFooter > nav,
  #mainFooter > nav,
  #mediaFooter > nav {
    grid-template-rows: auto;
    grid-template-columns: auto auto;
  }
}
#customersFooter > nav > a,
#introFooter > nav > a,
#mainFooter > nav > a,
#mediaFooter > nav > a {
  display: block;
  color: #f8f8f8;
  text-decoration: none;
  white-space: nowrap;
}
@media only screen and (min-width: 414px) {
  #customersFooter > nav > a,
  #introFooter > nav > a,
  #mainFooter > nav > a,
  #mediaFooter > nav > a {
    padding-right: 20px;
    margin-left: 20px;
    box-shadow: 1px 0 0 0 #f8f8f8;
  }
}
#customersFooter > nav > a:last-child,
#introFooter > nav > a:last-child,
#mainFooter > nav > a:last-child,
#mediaFooter > nav > a:last-child {
  box-shadow: none;
}
#customersFooter > nav > a:focus-visible,
#introFooter > nav > a:focus-visible,
#mainFooter > nav > a:focus-visible,
#mediaFooter > nav > a:focus-visible {
  text-decoration: underline !important;
  transform: scale(1.1);
}
html.safari #customersFooter > nav > a:focus:not(:active),
html.safari #introFooter > nav > a:focus:not(:active),
html.safari #mainFooter > nav > a:focus:not(:active),
html.safari #mediaFooter > nav > a:focus:not(:active) {
  text-decoration: underline !important;
  transform: scale(1.1);
}

#customersFooter > div > .martketplaceJoinRequestButton,
#introFooter > div > .martketplaceJoinRequestButton,
#mainFooter > div > .martketplaceJoinRequestButton,
#mediaFooter > div > .martketplaceJoinRequestButton {
  text-transform: none;
}
#customersFooter > div > .martketplaceJoiningFormButton,
#introFooter > div > .martketplaceJoiningFormButton,
#mainFooter > div > .martketplaceJoiningFormButton,
#mediaFooter > div > .martketplaceJoiningFormButton {
  background-color: #f2f2f2;
  color: #333;
  text-transform: none;
  min-width: unset;
  padding: 0.5rem 1rem;
}

#mainFooter {
  grid-template-columns: repeat(3, auto);
}
@media only screen and (min-width: 568px) {
  #mainFooter {
    grid-template-columns: 1fr auto 1fr;
  }
}
#mainFooter > div.left-footer > a.brandsBtn {
  width: fit-content;
  grid-area: brands;
  display: flex;
  justify-content: space-evenly;
  padding: 0.25rem 0.5rem;
  margin-right: 0;
}
#mainFooter > div.left-footer > a.brandsBtn > div.brandListIcon {
  width: 20px;
  height: 20px;
  background-image: url(db6cbf321285e0f9442c.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media only screen and (min-width: 768px) {
  #mainFooter > div.left-footer > a.brandsBtn > div.brandListIcon {
    margin-right: 0;
  }
}
#mainFooter .brandsBtn {
  width: 100%;
}

#collectionFooter .svButton:not(.svOrange), #collectionFooter #showOrderView > header #downloadPDF:not(.svOrange), #showOrderView > header #collectionFooter #downloadPDF:not(.svOrange), #collectionFooter section.packages-list-component section.packagesToolbar > button.closeModal:not(.svOrange), section.packages-list-component #collectionFooter section.packagesToolbar > button.closeModal:not(.svOrange) {
  min-width: 35px;
}
@media only screen and (min-width: 768px) {
  #collectionFooter .svButton:not(.svOrange), #collectionFooter #showOrderView > header #downloadPDF:not(.svOrange), #showOrderView > header #collectionFooter #downloadPDF:not(.svOrange), #collectionFooter section.packages-list-component section.packagesToolbar > button.closeModal:not(.svOrange), section.packages-list-component #collectionFooter section.packagesToolbar > button.closeModal:not(.svOrange) {
    min-width: 125px;
  }
}
@media only screen and (min-width: 768px) {
  #collectionFooter .optionsBtn > i {
    display: none;
  }
}
#collectionFooter .optionsBtn > span {
  display: none;
}
@media only screen and (min-width: 768px) {
  #collectionFooter .optionsBtn > span {
    display: inline;
  }
}

#ordersFooter,
#packagesFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

#packagesFooter {
  justify-content: flex-end;
  align-items: center;
}
#packagesFooter > a.svButton, #showOrderView > header #packagesFooter > a#downloadPDF {
  margin-left: auto;
  grid-column: 3/span 1;
}

#productFooter a.footerBrandLogo {
  width: 100%;
}

#orderFooter {
  padding: 0 0.25rem;
  grid-template-columns: 1fr auto 1fr;
}
@media only screen and (min-width: 414px) {
  #orderFooter {
    padding: 0 0.5rem;
  }
}
@media only screen and (min-width: 568px) {
  #orderFooter {
    height: 55px;
  }
}
#orderFooter a.footerBrandLogo {
  min-width: 100px;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  #orderFooter a.footerBrandLogo {
    width: 300px;
  }
}
#orderFooter > div {
  font-size: 0.75rem;
}
@media only screen and (min-width: 414px) {
  #orderFooter > div {
    font-size: 0.875rem;
  }
}
#orderFooter > div:first-child {
  display: grid;
  grid-gap: 0.25rem;
}
@media only screen and (min-width: 568px) {
  #orderFooter > div:first-child {
    display: flex;
  }
}
#orderFooter > div.footerButtons2 {
  display: grid;
  grid-gap: 0.25rem;
}
@media only screen and (min-width: 568px) {
  #orderFooter > div.footerButtons2 {
    display: flex;
  }
}
#orderFooter > div > a.svButton, #showOrderView > header #orderFooter > div > a#downloadPDF {
  min-width: auto;
  padding: 0 10px;
}
#orderFooter > div > a.svButton > i, #showOrderView > header #orderFooter > div > a#downloadPDF > i {
  padding: 0;
}
@media only screen and (min-width: 1024px) {
  #orderFooter > div > a.svButton, #showOrderView > header #orderFooter > div > a#downloadPDF {
    min-width: 125px;
  }
}
#orderFooter > div.footerButtons2 {
  display: flex;
  align-items: center;
}
#orderFooter a.footerBrandLogo {
  min-width: 32px;
}
@media only screen and (min-width: 568px) {
  #orderFooter a.footerBrandLogo {
    min-width: 100px;
  }
}
#orderFooter a.closerOrderBtn > i {
  transform: scale(1.25);
}

#showOrderFooter {
  grid-template-columns: auto auto auto;
  grid-template-areas: "brandlogo";
}

#orderviewFooter {
  align-items: center;
}
#orderviewFooter a.footerBrandLogo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.footerBrandLogo {
  display: flex;
  margin: 2px auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 300ms;
  height: 100%;
  max-height: 35px;
  width: 100%;
}
a.footerBrandLogo.status-footer-default-brand-logo, #orderFooter a.footerBrandLogo.status-footer-default-brand-logo {
  grid-area: logo;
  background: url(013a11ad1131735cd58e.svg) center center no-repeat;
  background-size: contain;
  width: 120px;
  height: 25px;
  filter: brightness(0) invert(1);
}
@media only screen and (min-width: 768px) {
  a.footerBrandLogo {
    width: 300px;
    margin: auto;
  }
}
a.footerBrandLogo:focus-visible {
  transform: scale(1.1);
  box-shadow: inset 0 0 0 3px #f8f8f8;
}
html.safari a.footerBrandLogo:focus:not(:active) {
  transform: scale(1.1);
  box-shadow: inset 0 0 0 3px #f8f8f8;
}

#dynamicFilters > div.filter > div > button[type=reset], form.search > button[type=reset] {
  -webkit-appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #f8f8f8;
  background: transparent;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  aspect-ratio: 1;
  color: #f8f8f8;
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
}
#dynamicFilters > div.filter > div > button.active[type=reset], form.search > button.active[type=reset] {
  opacity: 1;
  pointer-events: auto;
}
#dynamicFilters > div.filter > div > button[type=reset] > i, form.search > button[type=reset] > i {
  display: flex;
  font-size: 12px;
}

form.search {
  display: grid;
  grid-template-columns: 50px auto 50px;
  grid-template-rows: 1fr;
  grid-gap: 15px;
  width: 100%;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  form.search {
    grid-template-columns: 50px auto 50px 50px;
  }
}
form.search > i, form.search > input, form.search > button[type=submit] {
  transition: all 200ms;
}
form.search > i, form.search > a {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #666666;
  transition: all 200ms;
  z-index: 2;
}
form.search > a {
  grid-column: 3/span 1;
  visibility: hidden;
  opacity: 0;
  transition: 300ms ease-in-out;
}
form.search > a.active {
  visibility: visible;
  opacity: 1;
  transition: 300ms ease-in-out;
}
form.search > input {
  grid-column: 1/span 3;
  grid-row: 1/span 1;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  padding-left: 10px;
  background: #333;
  color: #d9d9d9;
  z-index: 1;
}
form.search > input::-webkit-search-results-button {
  display: none;
}
form.search > input::placeholder {
  color: #666666;
}
form.search > button[type=reset] {
  grid-column: 3/span 1;
  grid-row: 1/span 1;
  z-index: 2;
  align-self: center;
  justify-self: center;
  margin-left: 7px;
}
form.search > button[type=submit] {
  grid-column: 4/span 1;
  grid-row: 1/span 1;
  justify-content: center;
  align-items: center;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #009d4e;
  outline: 0;
  font-size: 1.5rem;
  border-radius: 5px;
  display: none;
}
@media only screen and (min-width: 768px) {
  form.search > button[type=submit] {
    display: flex;
  }
}
form.search > button[type=submit]:disabled {
  background: #333;
}
form.search > button[type=submit] > i {
  display: flex;
  color: #fff;
}

article.calculatorHorizontal section.seasonsPanel, section.lots-pyramid section.seasonsPanel {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding: 5px;
  border-bottom: 1px solid #cdcdcd;
  padding-bottom: 0 !important;
  background: #f5f5f5;
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-5.seasonsPanel, section.lots-pyramid section.dw-5.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-5.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-5.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-5.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-5.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-5.seasonsPanel > a, section.lots-pyramid section.dw-5.seasonsPanel > a {
  font-size: 1em;
}
article.calculatorHorizontal section.dw-6.seasonsPanel, section.lots-pyramid section.dw-6.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-6.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-6.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-6.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-6.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-6.seasonsPanel > a, section.lots-pyramid section.dw-6.seasonsPanel > a {
  font-size: 0.9em;
}
article.calculatorHorizontal section.dw-7.seasonsPanel, section.lots-pyramid section.dw-7.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-7.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-7.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-7.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-7.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-7.seasonsPanel > a, section.lots-pyramid section.dw-7.seasonsPanel > a {
  font-size: 0.8em;
}
article.calculatorHorizontal section.dw-8.seasonsPanel, section.lots-pyramid section.dw-8.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-8.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-8.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-8.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-8.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-8.seasonsPanel > a, section.lots-pyramid section.dw-8.seasonsPanel > a {
  font-size: 0.7em;
}
article.calculatorHorizontal section.dw-9.seasonsPanel, section.lots-pyramid section.dw-9.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-9.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-9.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-9.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-9.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-9.seasonsPanel > a, section.lots-pyramid section.dw-9.seasonsPanel > a {
  font-size: 0.6em;
}
article.calculatorHorizontal section.dw-10.seasonsPanel, section.lots-pyramid section.dw-10.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-10.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-10.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-10.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-10.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-10.seasonsPanel > a, section.lots-pyramid section.dw-10.seasonsPanel > a {
  font-size: 0.5em;
}
article.calculatorHorizontal section.dw-11.seasonsPanel, section.lots-pyramid section.dw-11.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-11.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-11.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-11.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-11.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-11.seasonsPanel > a, section.lots-pyramid section.dw-11.seasonsPanel > a {
  font-size: 0.5em;
}
article.calculatorHorizontal section.dw-12.seasonsPanel, section.lots-pyramid section.dw-12.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-12.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-12.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-12.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-12.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-12.seasonsPanel > a, section.lots-pyramid section.dw-12.seasonsPanel > a {
  font-size: 0.5em;
}
article.calculatorHorizontal section.dw-13.seasonsPanel, section.lots-pyramid section.dw-13.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-13.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-13.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-13.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-13.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-13.seasonsPanel > a, section.lots-pyramid section.dw-13.seasonsPanel > a {
  font-size: 0.5em;
}
article.calculatorHorizontal section.dw-14.seasonsPanel, section.lots-pyramid section.dw-14.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-14.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-14.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-14.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-14.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-14.seasonsPanel > a, section.lots-pyramid section.dw-14.seasonsPanel > a {
  font-size: 0.5em;
}
article.calculatorHorizontal section.dw-15.seasonsPanel, section.lots-pyramid section.dw-15.seasonsPanel {
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section.dw-15.seasonsPanel::-webkit-scrollbar, section.lots-pyramid section.dw-15.seasonsPanel::-webkit-scrollbar {
  height: 5px;
}
article.calculatorHorizontal section.dw-15.seasonsPanel::-webkit-scrollbar-thumb, section.lots-pyramid section.dw-15.seasonsPanel::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.dw-15.seasonsPanel > a, section.lots-pyramid section.dw-15.seasonsPanel > a {
  font-size: 0.5em;
}
article.calculatorHorizontal section.seasonsPanel .seasonsPanelitem, section.lots-pyramid section.seasonsPanel .seasonsPanelitem {
  color: #333;
  font-family: "latoregular", sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  box-sizing: border-box;
  user-select: none;
  background-color: transparent;
  text-decoration: none !important;
  outline: none;
  height: 40px;
  min-width: 180px;
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 16px;
  padding: 0 5px;
  border-radius: 3px;
  cursor: pointer;
}
article.calculatorHorizontal section.seasonsPanel .seasonsPanelitem.active, section.lots-pyramid section.seasonsPanel .seasonsPanelitem.active {
  background-color: #ddd;
}
article.calculatorHorizontal section.seasonsPanel .seasonsPanelitem .calendarIcon, section.lots-pyramid section.seasonsPanel .seasonsPanelitem .calendarIcon {
  width: 30px;
  height: 30px;
  font-size: 25px;
  line-height: 30px;
  margin: 0 5px;
}
article.calculatorHorizontal section.seasonsPanel div.addDW, section.lots-pyramid section.seasonsPanel div.addDW {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
article.calculatorHorizontal section.seasonsPanel div.addDW.single, section.lots-pyramid section.seasonsPanel div.addDW.single {
  margin: 10px 0 0 auto;
}
article.calculatorHorizontal section.seasonsPanel div.addDW > a, section.lots-pyramid section.seasonsPanel div.addDW > a {
  color: #474747;
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  box-shadow: inset 0 0 0 2px #474747;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  margin: 0 10px 2px 10px;
  font-size: 1rem;
}
@media only screen and (min-width: 414px) {
  article.calculatorHorizontal section.seasonsPanel div.addDW > a, section.lots-pyramid section.seasonsPanel div.addDW > a {
    font-size: 1.25rem;
  }
}
article.calculatorHorizontal section.seasonsPanel div.addDW > a:hover, section.lots-pyramid section.seasonsPanel div.addDW > a:hover {
  background-color: #fff;
}

.bigmodal.settings #modalWindow > section.modalHeader, div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader, div.bigmodal.customers div.simpleWindow > section.modalHeader, div.bigmodal.agents div.simpleWindow > section.modalHeader, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader,
div.bigmodal.buyers div.simpleWindow > section.modalHeader,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader,
div.bigmodal.customer div.simpleWindow > section.modalHeader, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader,
div.bigmodal.delivery div.simpleWindow > section.modalHeader, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader,
div.bigmodal.order_target div.simpleWindow > section.modalHeader,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader,
div.bigmodal.packages div.simpleWindow > section.modalHeader,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader,
div.bigmodal.remarks div.simpleWindow > section.modalHeader,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader,
div.bigmodal.seasons div.simpleWindow > section.modalHeader,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader, .bigmodal #modalWindow > section.modalHeader, .bigmodal #modalWindow > header {
  background: #333;
  color: #fff;
  text-align: center;
  height: 40px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 0 10px;
}
.bigmodal.settings #modalWindow > section.modalHeader > a.back, div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > a.back, div.bigmodal.customers div.simpleWindow > section.modalHeader > a.back, div.bigmodal.agents div.simpleWindow > section.modalHeader > a.back, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.customer div.simpleWindow > section.modalHeader > a.back, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > a.back, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.packages div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > a.back, .bigmodal #modalWindow > section.modalHeader > a.back, .bigmodal #modalWindow > header > a.back, .bigmodal.settings #modalWindow > section.modalHeader > a.reset, div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > a.reset, div.bigmodal.customers div.simpleWindow > section.modalHeader > a.reset, div.bigmodal.agents div.simpleWindow > section.modalHeader > a.reset, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.customer div.simpleWindow > section.modalHeader > a.reset, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > a.reset, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.packages div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > a.reset,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > a.reset, .bigmodal #modalWindow > section.modalHeader > a.reset, .bigmodal #modalWindow > header > a.reset, .bigmodal.settings #modalWindow > section.modalHeader > a.accept, div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.customers div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.agents div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.customer div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.packages div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > a.accept, .bigmodal #modalWindow > section.modalHeader > a.accept, .bigmodal #modalWindow > header > a.accept, .bigmodal.settings #modalWindow > section.modalHeader > h1, div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > h1, div.bigmodal.customers div.simpleWindow > section.modalHeader > h1, div.bigmodal.agents div.simpleWindow > section.modalHeader > h1, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > h1,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > h1,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > h1,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > h1,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > h1,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > h1,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > h1,
div.bigmodal.customer div.simpleWindow > section.modalHeader > h1, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > h1,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > h1,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > h1,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > h1, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > h1,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > h1,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > h1,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > h1,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > h1,
div.bigmodal.packages div.simpleWindow > section.modalHeader > h1,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > h1,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > h1,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > h1,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > h1,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > h1,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > h1,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > h1,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > h1,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > h1,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > h1, .bigmodal #modalWindow > section.modalHeader > h1, .bigmodal #modalWindow > header > h1 {
  display: flex;
  align-items: center;
  margin: 0;
  color: #fff;
}
div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > a.back, div.bigmodal.customers div.simpleWindow > section.modalHeader > a.back, div.bigmodal.agents div.simpleWindow > section.modalHeader > a.back, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.customer div.simpleWindow > section.modalHeader > a.back, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > a.back, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.packages div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > a.back,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > a.back, .bigmodal #modalWindow > section.modalHeader > a.back, .bigmodal #modalWindow > header > a.back {
  grid-column: 1/span 1;
  justify-content: flex-start;
}
div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > a.back > span, div.bigmodal.customers div.simpleWindow > section.modalHeader > a.back > span, div.bigmodal.agents div.simpleWindow > section.modalHeader > a.back > span, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.customer div.simpleWindow > section.modalHeader > a.back > span, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > a.back > span, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.packages div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > a.back > span,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > a.back > span, .bigmodal #modalWindow > section.modalHeader > a.back > span, .bigmodal #modalWindow > header > a.back > span, div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > a.back > i, div.bigmodal.customers div.simpleWindow > section.modalHeader > a.back > i, div.bigmodal.agents div.simpleWindow > section.modalHeader > a.back > i, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.customer div.simpleWindow > section.modalHeader > a.back > i, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > a.back > i, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.packages div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > a.back > i,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > a.back > i, .bigmodal #modalWindow > section.modalHeader > a.back > i, .bigmodal #modalWindow > header > a.back > i {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.bigmodal.settings #modalWindow > section.modalHeader > h1, div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > h1, div.bigmodal.customers div.simpleWindow > section.modalHeader > h1, div.bigmodal.agents div.simpleWindow > section.modalHeader > h1, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > h1,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > h1,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > h1,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > h1,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > h1,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > h1,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > h1,
div.bigmodal.customer div.simpleWindow > section.modalHeader > h1, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > h1,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > h1,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > h1,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > h1, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > h1,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > h1,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > h1,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > h1,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > h1,
div.bigmodal.packages div.simpleWindow > section.modalHeader > h1,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > h1,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > h1,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > h1,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > h1,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > h1,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > h1,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > h1,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > h1,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > h1,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > h1, .bigmodal #modalWindow > section.modalHeader > h1, .bigmodal #modalWindow > header > h1 {
  grid-column: 2/span 1;
  justify-content: center;
  font-weight: normal;
  font-size: 1rem;
}
div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.customers div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.agents div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.customer div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > a.accept, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.packages div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > a.accept,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > a.accept, .bigmodal #modalWindow > section.modalHeader > a.accept, .bigmodal #modalWindow > header > a.accept {
  grid-column: 3/span 1;
  justify-content: flex-end;
}
div.bigmodal.custom_calendar div.simpleWindow > section.modalHeader > a.accept.disabled, div.bigmodal.customers div.simpleWindow > section.modalHeader > a.accept.disabled, div.bigmodal.agents div.simpleWindow > section.modalHeader > a.accept.disabled, div.bigmodal.agents_chain div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.buyers div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.ccdw div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.collection_filter div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.product_search_filter div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.customer div.simpleWindow > section.modalHeader > a.accept.disabled, div.bigmodal.customers_chain div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.customer_target div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.datepicker div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.delivery div.simpleWindow > section.modalHeader > a.accept.disabled, div.bigmodal.delivery_chain div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.delivery_window div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.order_target div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.order_activities div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.order_statistics div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.packages div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.paymentTerms div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.productRemarks div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.customerRemarks div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.remarks div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.required_acceptance div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.seasons div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.seasons_chain div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.preview_pdf div.simpleWindow > section.modalHeader > a.accept.disabled,
div.bigmodal.pricelist div.simpleWindow > section.modalHeader > a.accept.disabled, .bigmodal #modalWindow > section.modalHeader > a.accept.disabled, .bigmodal #modalWindow > header > a.accept.disabled {
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
div.bigmodal.custom_calendar div.simpleWindow > section.withReset.modalHeader, div.bigmodal.customers div.simpleWindow > section.withReset.modalHeader, div.bigmodal.agents div.simpleWindow > section.withReset.modalHeader, div.bigmodal.agents_chain div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.buyers div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.ccdw div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.ccdw_edit div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.collection_filter div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.product_search_filter div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.customer div.simpleWindow > section.withReset.modalHeader, div.bigmodal.customers_chain div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.customer_target div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.datepicker div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.delivery div.simpleWindow > section.withReset.modalHeader, div.bigmodal.delivery_chain div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.delivery_window div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.order_target div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.order_activities div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.order_statistics div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.packages div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.paymentTerms div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.productRemarks div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.customerRemarks div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.remarks div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.remarks_per_product div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.required_acceptance div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.seasons div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.seasons_chain div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.preview_pdf div.simpleWindow > section.withReset.modalHeader,
div.bigmodal.pricelist div.simpleWindow > section.withReset.modalHeader, .bigmodal #modalWindow > section.withReset.modalHeader, .bigmodal #modalWindow > header.withReset {
  grid-template-columns: 1fr 1fr minmax(200px, auto) 1fr 1fr;
}
div.bigmodal.custom_calendar div.simpleWindow > section.withReset.modalHeader > a.reset, div.bigmodal.customers div.simpleWindow > section.withReset.modalHeader > a.reset, div.bigmodal.agents div.simpleWindow > section.withReset.modalHeader > a.reset, div.bigmodal.agents_chain div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.buyers div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.ccdw div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.ccdw_edit div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.collection_filter div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.product_search_filter div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.customer div.simpleWindow > section.withReset.modalHeader > a.reset, div.bigmodal.customers_chain div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.customer_target div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.datepicker div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.delivery div.simpleWindow > section.withReset.modalHeader > a.reset, div.bigmodal.delivery_chain div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.delivery_window div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.order_target div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.order_activities div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.order_statistics div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.packages div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.paymentTerms div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.productRemarks div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.customerRemarks div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.remarks div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.remarks_per_product div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.required_acceptance div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.seasons div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.seasons_chain div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.preview_pdf div.simpleWindow > section.withReset.modalHeader > a.reset,
div.bigmodal.pricelist div.simpleWindow > section.withReset.modalHeader > a.reset, .bigmodal #modalWindow > section.withReset.modalHeader > a.reset, .bigmodal #modalWindow > header.withReset > a.reset {
  grid-column: 2/span 1;
}
div.bigmodal.custom_calendar div.simpleWindow > section.withReset.modalHeader > h1, div.bigmodal.customers div.simpleWindow > section.withReset.modalHeader > h1, div.bigmodal.agents div.simpleWindow > section.withReset.modalHeader > h1, div.bigmodal.agents_chain div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.buyers div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.ccdw div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.ccdw_edit div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.collection_filter div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.product_search_filter div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.customer div.simpleWindow > section.withReset.modalHeader > h1, div.bigmodal.customers_chain div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.customer_target div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.datepicker div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.delivery div.simpleWindow > section.withReset.modalHeader > h1, div.bigmodal.delivery_chain div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.delivery_window div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.order_target div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.order_activities div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.order_statistics div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.packages div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.paymentTerms div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.productRemarks div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.customerRemarks div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.remarks div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.remarks_per_product div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.required_acceptance div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.seasons div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.seasons_chain div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.preview_pdf div.simpleWindow > section.withReset.modalHeader > h1,
div.bigmodal.pricelist div.simpleWindow > section.withReset.modalHeader > h1, .bigmodal #modalWindow > section.withReset.modalHeader > h1, .bigmodal #modalWindow > header.withReset > h1 {
  grid-column: 3/span 1;
}
div.bigmodal.custom_calendar div.simpleWindow > section.withReset.modalHeader > a.accept, div.bigmodal.customers div.simpleWindow > section.withReset.modalHeader > a.accept, div.bigmodal.agents div.simpleWindow > section.withReset.modalHeader > a.accept, div.bigmodal.agents_chain div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.buyers div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.ccdw div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.ccdw_edit div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.collection_filter div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.product_search_filter div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.customer div.simpleWindow > section.withReset.modalHeader > a.accept, div.bigmodal.customers_chain div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.customer_target div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.datepicker div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.delivery div.simpleWindow > section.withReset.modalHeader > a.accept, div.bigmodal.delivery_chain div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.delivery_window div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.order_target div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.order_activities div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.order_statistics div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.packages div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.paymentTerms div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.productRemarks div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.customerRemarks div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.remarks div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.remarks_per_product div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.required_acceptance div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.seasons div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.seasons_chain div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.preview_pdf div.simpleWindow > section.withReset.modalHeader > a.accept,
div.bigmodal.pricelist div.simpleWindow > section.withReset.modalHeader > a.accept, .bigmodal #modalWindow > section.withReset.modalHeader > a.accept, .bigmodal #modalWindow > header.withReset > a.accept {
  grid-column: 4/span 2;
}

div.bigmodal.customers div.customersList > a.row, div.bigmodal.customers div.simpleWindow > section.modalMain div.aList > a, div.bigmodal.agents div.simpleWindow > section.modalMain div.aList > a, div.bigmodal.agents_chain div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.buyers div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.ccdw div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.collection_filter div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.product_search_filter div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.customer div.simpleWindow > section.modalMain div.aList > a, div.bigmodal.customers_chain div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.customer_target div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.datepicker div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.delivery div.simpleWindow > section.modalMain div.aList > a, div.bigmodal.delivery_chain div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.delivery_window div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.order_target div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.order_activities div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.order_statistics div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.packages div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.paymentTerms div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.productRemarks div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.customerRemarks div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.remarks div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.required_acceptance div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.seasons div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.seasons_chain div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.preview_pdf div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.pricelist div.simpleWindow > section.modalMain div.aList > a, delivery-search section.modalMain div.aList > a {
  font-weight: lighter;
  height: 2.5em;
  line-height: 1.25;
  padding: 0 10px;
  box-shadow: inset 0 -1px 0 0 #dddcdf;
  color: #000;
}

div.bigmodal.customers div.simpleWindow > section.modalMain div.aList, div.bigmodal.agents div.simpleWindow > section.modalMain div.aList, div.bigmodal.agents_chain div.simpleWindow > section.modalMain div.aList,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalMain div.aList,
div.bigmodal.buyers div.simpleWindow > section.modalMain div.aList,
div.bigmodal.ccdw div.simpleWindow > section.modalMain div.aList,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalMain div.aList,
div.bigmodal.collection_filter div.simpleWindow > section.modalMain div.aList,
div.bigmodal.product_search_filter div.simpleWindow > section.modalMain div.aList,
div.bigmodal.customer div.simpleWindow > section.modalMain div.aList, div.bigmodal.customers_chain div.simpleWindow > section.modalMain div.aList,
div.bigmodal.customer_target div.simpleWindow > section.modalMain div.aList,
div.bigmodal.datepicker div.simpleWindow > section.modalMain div.aList,
div.bigmodal.delivery div.simpleWindow > section.modalMain div.aList, div.bigmodal.delivery_chain div.simpleWindow > section.modalMain div.aList,
div.bigmodal.delivery_window div.simpleWindow > section.modalMain div.aList,
div.bigmodal.order_target div.simpleWindow > section.modalMain div.aList,
div.bigmodal.order_activities div.simpleWindow > section.modalMain div.aList,
div.bigmodal.order_statistics div.simpleWindow > section.modalMain div.aList,
div.bigmodal.packages div.simpleWindow > section.modalMain div.aList,
div.bigmodal.paymentTerms div.simpleWindow > section.modalMain div.aList,
div.bigmodal.productRemarks div.simpleWindow > section.modalMain div.aList,
div.bigmodal.customerRemarks div.simpleWindow > section.modalMain div.aList,
div.bigmodal.remarks div.simpleWindow > section.modalMain div.aList,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalMain div.aList,
div.bigmodal.required_acceptance div.simpleWindow > section.modalMain div.aList,
div.bigmodal.seasons div.simpleWindow > section.modalMain div.aList,
div.bigmodal.seasons_chain div.simpleWindow > section.modalMain div.aList,
div.bigmodal.preview_pdf div.simpleWindow > section.modalMain div.aList,
div.bigmodal.pricelist div.simpleWindow > section.modalMain div.aList, delivery-search section.modalMain div.aList {
  display: flex;
  flex-direction: column;
}
div.bigmodal.customers div.simpleWindow > section.modalMain div.aList > a, div.bigmodal.agents div.simpleWindow > section.modalMain div.aList > a, div.bigmodal.agents_chain div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.buyers div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.ccdw div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.collection_filter div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.product_search_filter div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.customer div.simpleWindow > section.modalMain div.aList > a, div.bigmodal.customers_chain div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.customer_target div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.datepicker div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.delivery div.simpleWindow > section.modalMain div.aList > a, div.bigmodal.delivery_chain div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.delivery_window div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.order_target div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.order_activities div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.order_statistics div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.packages div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.paymentTerms div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.productRemarks div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.customerRemarks div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.remarks div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.required_acceptance div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.seasons div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.seasons_chain div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.preview_pdf div.simpleWindow > section.modalMain div.aList > a,
div.bigmodal.pricelist div.simpleWindow > section.modalMain div.aList > a, delivery-search section.modalMain div.aList > a {
  display: grid;
  grid-gap: 10px;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  align-items: center;
  justify-content: space-between;
  min-height: 2.5em;
  height: auto;
}
div.bigmodal.customers div.simpleWindow > section.modalMain div.aList.firstColSmall > a, div.bigmodal.agents div.simpleWindow > section.modalMain div.aList.firstColSmall > a, div.bigmodal.agents_chain div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.brand_terms_and_conditions div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.buyers div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.ccdw div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.ccdw_edit div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.collection_filter div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.product_search_filter div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.customer div.simpleWindow > section.modalMain div.aList.firstColSmall > a, div.bigmodal.customers_chain div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.customer_target div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.datepicker div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.delivery div.simpleWindow > section.modalMain div.aList.firstColSmall > a, div.bigmodal.delivery_chain div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.delivery_window div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.order_target div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.order_activities div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.order_statistics div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.packages div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.paymentTerms div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.productRemarks div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.customerRemarks div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.remarks div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.remarks_per_product div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.required_acceptance div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.seasons div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.seasons_chain div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.preview_pdf div.simpleWindow > section.modalMain div.aList.firstColSmall > a,
div.bigmodal.pricelist div.simpleWindow > section.modalMain div.aList.firstColSmall > a, delivery-search section.modalMain div.aList.firstColSmall > a {
  grid-template-columns: 50px;
}

.bigmodal.settings #modalWindow section.accountSettings input[type=text],
.bigmodal.settings #modalWindow section.accountSettings textarea, user-settings div.window section.accountSettings input[type=text],
user-settings div.window section.accountSettings textarea, .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=text], .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=text], user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=text], change-password div.personalSettingsWrapper div.passwordInputs > input[type=text], .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=password], .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=password], user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=password], change-password div.personalSettingsWrapper div.passwordInputs > input[type=password] {
  width: 100%;
  margin: 0;
  padding: 8px;
  color: #353535;
  box-shadow: inset 0 0 0 1px #ababab;
  border-radius: 5px;
}
.bigmodal.settings #modalWindow section.accountSettings input[type=text]::placeholder,
.bigmodal.settings #modalWindow section.accountSettings textarea::placeholder, user-settings div.window section.accountSettings input[type=text]::placeholder,
user-settings div.window section.accountSettings textarea::placeholder, .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=text]::placeholder, .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=text]::placeholder, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=text]::placeholder, change-password div.personalSettingsWrapper div.passwordInputs > input[type=text]::placeholder, .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=password]::placeholder, .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=password]::placeholder, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=password]::placeholder, change-password div.personalSettingsWrapper div.passwordInputs > input[type=password]::placeholder {
  color: #a9a9a9;
}
.bigmodal.settings #modalWindow section.accountSettings input[type=text]:focus,
.bigmodal.settings #modalWindow section.accountSettings textarea:focus, user-settings div.window section.accountSettings input[type=text]:focus,
user-settings div.window section.accountSettings textarea:focus, .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=text]:focus, .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=text]:focus, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=text]:focus, change-password div.personalSettingsWrapper div.passwordInputs > input[type=text]:focus, .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=password]:focus, .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=password]:focus, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=password]:focus, change-password div.personalSettingsWrapper div.passwordInputs > input[type=password]:focus {
  outline: none;
}

.bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs, .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs, user-settings div.window div.personalSettingsWrapper div.settingsInputs, change-password div.personalSettingsWrapper div.passwordInputs {
  display: grid;
  grid-gap: 20px 15px;
  overflow: hidden;
  margin: 5px;
}
@media only screen and (min-width: 568px) {
  .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs, .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs, user-settings div.window div.personalSettingsWrapper div.settingsInputs, change-password div.personalSettingsWrapper div.passwordInputs {
    margin: 30px 15px;
  }
}
.bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > label, .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > label, user-settings div.window div.personalSettingsWrapper div.settingsInputs > label, change-password div.personalSettingsWrapper div.passwordInputs > label {
  grid-column: 1/span 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  color: #353535;
}
.bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=text], .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=text], user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=text], change-password div.personalSettingsWrapper div.passwordInputs > input[type=text], .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=password], .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=password], user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=password], change-password div.personalSettingsWrapper div.passwordInputs > input[type=password] {
  grid-column: 2/span 1;
}

user-settings, change-password {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2002;
  width: fit-content;
  height: fit-content;
}
user-settings > div.cover, change-password > div.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block !important;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: saturate(70%) blur(2px);
  backdrop-filter: saturate(70%) blur(2px);
  z-index: -1;
}
user-settings div.window, change-password div.window {
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
}
user-settings div.window > section.modalHeader, change-password div.window > section.modalHeader {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 0 10px;
  background: #474747;
  color: #fff;
  text-align: center;
  height: 40px;
}
user-settings div.window > section.modalHeader > a.back, change-password div.window > section.modalHeader > a.back, user-settings div.window > section.modalHeader > a.accept, change-password div.window > section.modalHeader > a.accept, user-settings div.window > section.modalHeader > h1, change-password div.window > section.modalHeader > h1 {
  display: flex;
  align-items: center;
  margin: 0;
  color: #fff;
}
user-settings div.window > section.modalHeader > a.back:focus-visible, change-password div.window > section.modalHeader > a.back:focus-visible, user-settings div.window > section.modalHeader a.accept:focus-visible, change-password div.window > section.modalHeader a.accept:focus-visible {
  font-weight: bold;
}
html.safari user-settings div.window > section.modalHeader > a.back:focus:not(:active), html.safari change-password div.window > section.modalHeader > a.back:focus:not(:active), html.safari user-settings div.window > section.modalHeader a.accept:focus:not(:active), html.safari change-password div.window > section.modalHeader a.accept:focus:not(:active) {
  font-weight: bold;
}

user-settings div.window > section.modalHeader > a.back, change-password div.window > section.modalHeader > a.back {
  grid-column: 1/span 1;
  justify-content: flex-start;
}
user-settings div.window > section.modalHeader > a.back > span, change-password div.window > section.modalHeader > a.back > span, user-settings div.window > section.modalHeader > a.back > i, change-password div.window > section.modalHeader > a.back > i {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
user-settings div.window > section.modalHeader > h1, change-password div.window > section.modalHeader > h1 {
  grid-column: 2/span 1;
  justify-content: center;
  font-weight: normal;
  font-size: 1rem;
}
user-settings div.window > section.modalHeader > a.accept, change-password div.window > section.modalHeader > a.accept {
  grid-column: 3/span 1;
  justify-content: flex-end;
}
user-settings div.window > section.modalHeader > a.accept.disabled, change-password div.window > section.modalHeader > a.accept.disabled {
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
user-settings div.window > section.modalMain, change-password div.window > section.modalMain {
  background: #F2F2F2;
  max-height: calc(100dvh - 105px);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
user-settings div.window > section.modalMain::-webkit-scrollbar, change-password div.window > section.modalMain::-webkit-scrollbar {
  width: 5px;
}
user-settings div.window > section.modalMain::-webkit-scrollbar-thumb, change-password div.window > section.modalMain::-webkit-scrollbar-thumb {
  background-color: #666666;
}
user-settings div.window p.subHeader, change-password div.window p.subHeader {
  background: #e4e4e4;
  color: #000;
  text-align: center;
  margin: 0;
  padding: 0.5em 0;
  border-bottom: 1px solid #c6c6c6;
}

#orderView div.window:not(.orderEmailForm), div#orderEmailWrapper div.window.orderEmailForm, div#orderEmailWrapper div.window.orderEmailPreview, div.window.details,
div.window.customers,
div.window.confirmEmail,
div.window.prepareEmail,
div.window.summary, div.window {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95dvw;
  max-height: 95dvh;
  background-color: #f2f2f2;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  z-index: 1000000;
}
@media only screen and (min-width: 768px) {
  #orderView div.window:not(.orderEmailForm), div#orderEmailWrapper div.window.orderEmailForm, div#orderEmailWrapper div.window.orderEmailPreview, div.window.details,
  div.window.customers,
  div.window.confirmEmail,
  div.window.prepareEmail,
  div.window.summary, div.window {
    width: 540px;
  }
}
#orderView div.window:not(.orderEmailForm) > section, div#orderEmailWrapper div.window.orderEmailForm > section, div#orderEmailWrapper div.window.orderEmailPreview > section, div.window.details > section,
div.window.customers > section,
div.window.confirmEmail > section,
div.window.prepareEmail > section,
div.window.summary > section, div.window > section {
  padding: 1.5rem 1rem;
}
#orderView div.window:not(.orderEmailForm) > section.modalHeader, div#orderEmailWrapper div.window.orderEmailForm > section.modalHeader, div#orderEmailWrapper div.window.orderEmailPreview > section.modalHeader, div.window > section.modalHeader {
  height: auto;
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  grid-gap: 0 1rem;
}
@media only screen and (min-width: 768px) {
  #orderView div.window:not(.orderEmailForm) > section.modalHeader, div#orderEmailWrapper div.window.orderEmailForm > section.modalHeader, div#orderEmailWrapper div.window.orderEmailPreview > section.modalHeader, div.window > section.modalHeader {
    grid-template-columns: 0.5fr 4fr 0.5fr;
  }
}
#orderView div.window:not(.orderEmailForm) > section.modalHeader > a, div#orderEmailWrapper div.window.orderEmailForm > section.modalHeader > a, div#orderEmailWrapper div.window.orderEmailPreview > section.modalHeader > a, div.window > section.modalHeader > a {
  font-size: 0.875rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #333;
}
#orderView div.window:not(.orderEmailForm) > section.modalHeader > a > i, div#orderEmailWrapper div.window.orderEmailForm > section.modalHeader > a > i, div#orderEmailWrapper div.window.orderEmailPreview > section.modalHeader > a > i, div.window > section.modalHeader > a > i {
  font-size: 1.125rem;
  margin-right: 0.25rem;
}
#orderView div.window:not(.orderEmailForm) > section.modalHeader > h2, div#orderEmailWrapper div.window.orderEmailForm > section.modalHeader > h2, div#orderEmailWrapper div.window.orderEmailPreview > section.modalHeader > h2, div.window > section.modalHeader > h2 {
  margin: 0;
  font-size: 1rem;
  color: #333;
  grid-column: 2/span 1;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain, div.window > section.modalMain {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain::-webkit-scrollbar, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain::-webkit-scrollbar, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain::-webkit-scrollbar, div.window > section.modalMain::-webkit-scrollbar {
  width: 5px;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain::-webkit-scrollbar-thumb, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain::-webkit-scrollbar-thumb, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain::-webkit-scrollbar-thumb, div.window > section.modalMain::-webkit-scrollbar-thumb {
  background-color: #666666;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain > div.successIcon, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain > div.successIcon, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain > div.successIcon, div.window > section.modalMain > div.successIcon {
  width: 170px;
  height: 270px;
  margin: 2rem auto;
  background-image: url(a642ce97aa33dadc7509.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain > div.requestInformation > h2, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain > div.requestInformation > h2, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain > div.requestInformation > h2, div.window > section.modalMain > div.requestInformation > h2, #orderView div.window:not(.orderEmailForm) > section.modalMain > div.requestInformation > p, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain > div.requestInformation > p, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain > div.requestInformation > p, div.window > section.modalMain > div.requestInformation > p {
  color: #333;
  text-align: center;
  font-size: 1rem;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormCompanyAddressForm, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormCompanyAddressForm, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormCompanyAddressForm, div.window > section.modalMain form.joiningFormCompanyAddressForm, #orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormDeliveryAddressForm, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormDeliveryAddressForm, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormDeliveryAddressForm, div.window > section.modalMain form.joiningFormDeliveryAddressForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0 1rem;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper, div.window > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper, #orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper, div.window > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper {
  grid-column: 1/span 2;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper.zipCodeWrapper, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper.zipCodeWrapper, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper.zipCodeWrapper, div.window > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper.zipCodeWrapper, #orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper.zipCodeWrapper, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper.zipCodeWrapper, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper.zipCodeWrapper, div.window > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper.zipCodeWrapper {
  grid-column: 1/span 1;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper.cityWrapper, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper.cityWrapper, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper.cityWrapper, div.window > section.modalMain form.joiningFormCompanyAddressForm > div.inputWrapper.cityWrapper, #orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper.cityWrapper, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper.cityWrapper, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper.cityWrapper, div.window > section.modalMain form.joiningFormDeliveryAddressForm > div.inputWrapper.cityWrapper {
  grid-column: 2/span 1;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormMessage > p, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormMessage > p, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormMessage > p, div.window > section.modalMain form.joiningFormMessage > p {
  text-align: center;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain form.joiningFormMessage textarea, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain form.joiningFormMessage textarea, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain form.joiningFormMessage textarea, div.window > section.modalMain form.joiningFormMessage textarea {
  border-radius: 4px;
  padding: 0.625rem 0.5rem;
  line-height: 140%;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper, div.window > section.modalMain div.inputWrapper {
  margin: 1rem 0;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper:first-child, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper:first-child, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper:first-child, div.window > section.modalMain div.inputWrapper:first-child {
  margin-top: 0;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper:last-child, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper:last-child, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper:last-child, div.window > section.modalMain div.inputWrapper:last-child {
  margin-bottom: 0;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper label, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper label, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper label, div.window > section.modalMain div.inputWrapper label, #orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper input, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper input, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper input, div.window > section.modalMain div.inputWrapper input, #orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper textarea, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper textarea, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper textarea, div.window > section.modalMain div.inputWrapper textarea {
  font-size: 0.875rem;
  color: #333;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper label, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper label, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper label, div.window > section.modalMain div.inputWrapper label {
  display: block;
  margin-bottom: 0.5rem;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper textarea, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper textarea, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper textarea, div.window > section.modalMain div.inputWrapper textarea {
  width: 100%;
  height: 100px;
  padding: 0.5rem;
  resize: none;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper input, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper input, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper input, div.window > section.modalMain div.inputWrapper input {
  width: 100%;
  height: 40px;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper textarea.ng-touched.ng-invalid, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper textarea.ng-touched.ng-invalid, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper textarea.ng-touched.ng-invalid, div.window > section.modalMain div.inputWrapper textarea.ng-touched.ng-invalid, #orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper input.ng-touched.ng-invalid, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper input.ng-touched.ng-invalid, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper input.ng-touched.ng-invalid, div.window > section.modalMain div.inputWrapper input.ng-touched.ng-invalid {
  border: 1px solid #eb5757;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain div.inputWrapper small, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain div.inputWrapper small, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain div.inputWrapper small, div.window > section.modalMain div.inputWrapper small {
  font-size: 0.75rem;
  font-weight: bold;
  color: #eb5757;
}
#orderView div.window:not(.orderEmailForm) > section.modalMain p, div#orderEmailWrapper div.window.orderEmailForm > section.modalMain p, div#orderEmailWrapper div.window.orderEmailPreview > section.modalMain p, div.window > section.modalMain p {
  color: #333;
}
#orderView div.window:not(.orderEmailForm) > section.modalFooter, div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter, div.window > section.modalFooter {
  border-top: 1px solid #999999;
  height: auto;
  background-color: transparent;
  padding: 1rem;
}
#orderView div.window:not(.orderEmailForm) > section.modalFooter > div.buttonsWrapper, div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter > div.buttonsWrapper, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter > div.buttonsWrapper, div.window > section.modalFooter > div.buttonsWrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#orderView div.window:not(.orderEmailForm) > section.modalFooter > div.buttonsWrapper > button, div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter > div.buttonsWrapper > button, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter > div.buttonsWrapper > button, div.window > section.modalFooter > div.buttonsWrapper > button {
  min-width: 100px;
}
#orderView div.window:not(.orderEmailForm) > section.modalFooter > div.buttonsWrapper > button.cancelBtn, div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter > div.buttonsWrapper > button.cancelBtn, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter > div.buttonsWrapper > button.cancelBtn, div.window > section.modalFooter > div.buttonsWrapper > button.cancelBtn {
  border-width: 1px;
}
#orderView div.secondaryModalType.window:not(.orderEmailForm), div#orderEmailWrapper div.secondaryModalType.window.orderEmailForm, div#orderEmailWrapper div.secondaryModalType.window.orderEmailPreview, div.secondaryModalType.window {
  -webkit-box-shadow: 0px 0px 20px -5px rgb(0, 0, 0);
  -moz-box-shadow: 0px 0px 20px -5px rgb(0, 0, 0);
  box-shadow: 0px 0px 20px -5px rgb(0, 0, 0);
}
#orderView div.secondaryModalType.window:not(.orderEmailForm) > section, div#orderEmailWrapper div.secondaryModalType.window.orderEmailForm > section, div#orderEmailWrapper div.secondaryModalType.window.orderEmailPreview > section, div.secondaryModalType.window > section {
  background-color: #fff;
}
#orderView div.secondaryModalType.window:not(.orderEmailForm) > section.modalHeader, div#orderEmailWrapper div.secondaryModalType.window.orderEmailForm > section.modalHeader, div#orderEmailWrapper div.secondaryModalType.window.orderEmailPreview > section.modalHeader, div.secondaryModalType.window > section.modalHeader {
  padding: 0.75rem 0;
  background-color: #333;
}
#orderView div.secondaryModalType.window:not(.orderEmailForm) > section.modalHeader > h2, div#orderEmailWrapper div.secondaryModalType.window.orderEmailForm > section.modalHeader > h2, div#orderEmailWrapper div.secondaryModalType.window.orderEmailPreview > section.modalHeader > h2, div.secondaryModalType.window > section.modalHeader > h2 {
  font-size: 0.875rem;
  color: #F2F2F2;
  font-weight: normal;
}
#orderView div.secondaryModalType.window:not(.orderEmailForm) > section.modalMain, div#orderEmailWrapper div.secondaryModalType.window.orderEmailForm > section.modalMain, div#orderEmailWrapper div.secondaryModalType.window.orderEmailPreview > section.modalMain, div.secondaryModalType.window > section.modalMain {
  padding: 0;
}
#orderView div.secondaryModalType.window:not(.orderEmailForm) > section.modalFooter > div.buttonsWrapper > button, div#orderEmailWrapper div.secondaryModalType.window.orderEmailForm > section.modalFooter > div.buttonsWrapper > button, div#orderEmailWrapper div.secondaryModalType.window.orderEmailPreview > section.modalFooter > div.buttonsWrapper > button, div.secondaryModalType.window > section.modalFooter > div.buttonsWrapper > button {
  background-color: #fff;
  transition: 300ms ease-in-out;
  font-weight: bold;
  border-width: 2px;
}
#orderView div.secondaryModalType.window:not(.orderEmailForm) > section.modalFooter > div.buttonsWrapper > button:hover, div#orderEmailWrapper div.secondaryModalType.window.orderEmailForm > section.modalFooter > div.buttonsWrapper > button:hover, div#orderEmailWrapper div.secondaryModalType.window.orderEmailPreview > section.modalFooter > div.buttonsWrapper > button:hover, div.secondaryModalType.window > section.modalFooter > div.buttonsWrapper > button:hover {
  background-color: #F2F2F2;
  transition: 300ms ease-in-out;
}

#orderView div.window:not(.orderEmailForm) i.fa::before, div#orderEmailWrapper div.window.orderEmailForm i.fa::before, div#orderEmailWrapper div.window.orderEmailPreview i.fa::before, div.window i.fa::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

#orderView div.window:not(.orderEmailForm) button, div.window.details button,
div.window.customers button,
div.window.confirmEmail button,
div.window.prepareEmail button,
div.window.summary button, div.window button,
#orderView div.window:not(.orderEmailForm) a.modal-button,
div.window a.modal-button {
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  border: 1px solid #333;
  color: #333;
}
#orderView div.window:not(.orderEmailForm) button.acceptBtn, div.window button.acceptBtn,
#orderView div.window:not(.orderEmailForm) a.modal-button.acceptBtn,
div.window a.modal-button.acceptBtn {
  background-color: #209654;
  color: #f2f2f2;
  border: none;
}
#orderView div.window:not(.orderEmailForm) button.acceptBtn:disabled:hover, div.window button.acceptBtn:disabled:hover,
#orderView div.window:not(.orderEmailForm) a.modal-button.acceptBtn:disabled:hover,
div.window a.modal-button.acceptBtn:disabled:hover {
  background-color: #209654;
}
#orderView div.window:not(.orderEmailForm) button.secondaryButton, div.window button.secondaryButton,
#orderView div.window:not(.orderEmailForm) a.modal-button.secondaryButton,
div.window a.modal-button.secondaryButton {
  background-color: #4F4F4F;
  color: #f2f2f2;
}
#orderView div.window:not(.orderEmailForm) button:disabled, div.window button:disabled,
#orderView div.window:not(.orderEmailForm) a.modal-button:disabled,
div.window a.modal-button:disabled {
  opacity: 0.5;
}

#orderView div.orderEmailForm section.modalContent > form, div.window.details section.modalContent > form.mediaDetails {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderEmailForm section.modalContent > form, div.window.details section.modalContent > form.mediaDetails {
    padding: 1rem 2rem;
  }
}
#orderView div.orderEmailForm section.modalContent > form > div, div.window.details section.modalContent > form.mediaDetails > div {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.25rem;
  align-items: center;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderEmailForm section.modalContent > form > div, div.window.details section.modalContent > form.mediaDetails > div {
    grid-template-columns: 30% auto;
    grid-gap: 0.5rem;
  }
}
#orderView div.orderEmailForm section.modalContent > form > div:not(:first-child), div.window.details section.modalContent > form.mediaDetails > div:not(:first-child) {
  margin-top: 1.5rem;
}
#orderView div.orderEmailForm section.modalContent > form > div > label, div.window.details section.modalContent > form.mediaDetails > div > label {
  grid-row: 1/span 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderEmailForm section.modalContent > form > div > label, div.window.details section.modalContent > form.mediaDetails > div > label {
    grid-row: unset;
    grid-column: 1/span 1;
    text-align: right;
  }
}
#orderView div.orderEmailForm section.modalContent > form > div > input, div.window.details section.modalContent > form.mediaDetails > div > input, #orderView div.orderEmailForm section.modalContent > form > div > textarea, div.window.details section.modalContent > form.mediaDetails > div > textarea {
  width: 100%;
  grid-row: 2/span 1;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderEmailForm section.modalContent > form > div > input, div.window.details section.modalContent > form.mediaDetails > div > input, #orderView div.orderEmailForm section.modalContent > form > div > textarea, div.window.details section.modalContent > form.mediaDetails > div > textarea {
    grid-row: unset;
    grid-column: 2/span 1;
  }
}
#orderView div.orderEmailForm section.modalContent > form > div > textarea, div.window.details section.modalContent > form.mediaDetails > div > textarea {
  width: 100%;
  box-shadow: inset 0 0 2px 0 #474747;
  border: none;
  outline: none;
  border-radius: 5px;
  min-height: 150px;
  padding: 0.5rem;
  resize: none;
}

div.modal.alertModal, div.alertModal.bigmodal {
  background-color: #fff;
  max-width: 95%;
  border: none;
  padding: 24px 16px 32px 16px;
  border-radius: 8px;
}
@media only screen and (min-width: 768px) {
  div.modal.alertModal, div.alertModal.bigmodal {
    max-width: 550px;
  }
}
div.modal.alertModal h1, div.alertModal.bigmodal h1, div.modal.alertModal h2, div.alertModal.bigmodal h2 {
  user-select: text;
}
div.modal.alertModal > div.iconWrapper, div.alertModal.bigmodal > div.iconWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
div.modal.alertModal > div.iconWrapper .danger, div.alertModal.bigmodal > div.iconWrapper .danger {
  color: #eb5757;
}
div.modal.alertModal > div.iconWrapper > i, div.alertModal.bigmodal > div.iconWrapper > i {
  color: #f2994a;
  font-size: 1.75rem;
  position: relative;
}
div.modal.alertModal > div.iconWrapper > i::after, div.alertModal.bigmodal > div.iconWrapper > i::after {
  content: "";
  background-color: #f2f2f2;
  display: block;
  position: absolute;
  width: 20%;
  height: 70%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 10px;
}
div.modal.alertModal > div.iconWrapper > i::before, div.alertModal.bigmodal > div.iconWrapper > i::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
div.modal.alertModal > h1, div.alertModal.bigmodal > h1, div.modal.alertModal > h2, div.alertModal.bigmodal > h2 {
  color: #000;
  margin: 0;
  font-weight: 400;
}
div.modal.alertModal > h1, div.alertModal.bigmodal > h1 {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: 700;
}
div.modal.alertModal > h2, div.alertModal.bigmodal > h2 {
  font-size: 1rem;
  margin-top: 0.5rem;
  line-height: 1.4rem;
}
div.modal.alertModal > nav, div.alertModal.bigmodal > nav {
  box-shadow: none;
  margin-top: 1rem;
}
div.modal.alertModal > nav > div, div.alertModal.bigmodal > nav > div {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-height: 36px;
}
div.modal.alertModal > nav > div > div, div.alertModal.bigmodal > nav > div > div {
  box-shadow: none;
}
div.modal.alertModal > nav > div > div:not(:first-child), div.alertModal.bigmodal > nav > div > div:not(:first-child) {
  margin-left: 0.5rem;
}
div.modal.alertModal > nav > div > div > a.buttonPrimary, div.alertModal.bigmodal > nav > div > div > a.buttonPrimary {
  background-color: #333333;
  color: #fff;
  transition: background-color 0.2s ease-in-out;
}
div.modal.alertModal > nav > div > div > a.buttonPrimary:hover, div.alertModal.bigmodal > nav > div > div > a.buttonPrimary:hover {
  background-color: #828282;
  opacity: 1;
  border: 1.5px solid #828282;
}
div.modal.alertModal > nav > div > div > a.buttonDanger, div.alertModal.bigmodal > nav > div > div > a.buttonDanger {
  background-color: #eb5757;
  color: #fff;
  transition: background-color 0.2s ease-in-out;
  border: none;
}
div.modal.alertModal > nav > div > div > a.buttonDanger:hover, div.alertModal.bigmodal > nav > div > div > a.buttonDanger:hover {
  background-color: #F28F8F;
  opacity: 1;
}
div.modal.alertModal > nav > div > div > a, div.alertModal.bigmodal > nav > div > div > a {
  border: 1.5px solid #333333;
  padding: 0.625rem 2.375rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  line-height: 1.225rem;
  font-weight: 700;
  cursor: pointer;
}
div.modal.alertModal > nav > div > div > a:hover, div.alertModal.bigmodal > nav > div > div > a:hover {
  opacity: 0.55;
  text-shadow: none;
}

delivery-search #deliverySearchHeader, customers-search > div.customersSearchHeader, section.ordersToolbar, div.agentsSearchHeader {
  justify-content: center;
  align-items: center;
  grid-gap: 10px;
  padding: 10px;
}
@media only screen and (min-width: 1024px) {
  delivery-search #deliverySearchHeader, customers-search > div.customersSearchHeader, section.ordersToolbar, div.agentsSearchHeader {
    grid-column-gap: 1rem;
    align-content: center;
  }
}
delivery-search #deliverySearchHeader > div.filtersLabel, customers-search > div.customersSearchHeader > div.filtersLabel, section.ordersToolbar > div.filtersLabel, div.agentsSearchHeader > div.filtersLabel {
  display: none;
  grid-area: filtersLabel;
  font-size: 0.875rem;
}
@media only screen and (min-width: 1024px) {
  delivery-search #deliverySearchHeader > div.filtersLabel, customers-search > div.customersSearchHeader > div.filtersLabel, section.ordersToolbar > div.filtersLabel, div.agentsSearchHeader > div.filtersLabel {
    display: block;
  }
}
delivery-search #deliverySearchHeader > sv-radio-switch, customers-search > div.customersSearchHeader > sv-radio-switch, section.ordersToolbar > sv-radio-switch, div.agentsSearchHeader > sv-radio-switch {
  justify-self: flex-start;
  grid-area: radioSwitch;
}

customers-search > div.customersSearchHeader > sv-select > div.svSelect.selected > a.toggle.toggle, section.ordersToolbar sv-select.filters1 > div.svSelect.selected > a.toggle.toggle,
section.ordersToolbar sv-select.filters2 > div.svSelect.selected > a.toggle.toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 0 0 1px #009d4e;
  color: #009d4e;
}
customers-search > div.customersSearchHeader > sv-select > div.svSelect.selected > a.toggle.toggle > span, section.ordersToolbar sv-select.filters1 > div.svSelect.selected > a.toggle.toggle > span,
section.ordersToolbar sv-select.filters2 > div.svSelect.selected > a.toggle.toggle > span {
  height: auto;
}
customers-search > div.customersSearchHeader > sv-select > div.svSelect.selected > a.toggle.toggle > small.floatingLabel, section.ordersToolbar sv-select.filters1 > div.svSelect.selected > a.toggle.toggle > small.floatingLabel,
section.ordersToolbar sv-select.filters2 > div.svSelect.selected > a.toggle.toggle > small.floatingLabel {
  font-size: 0.625rem;
  display: block;
}
customers-search > div.customersSearchHeader > sv-select > div.svSelect > a.toggle.toggle, section.ordersToolbar sv-select.filters1 > div.svSelect > a.toggle.toggle,
section.ordersToolbar sv-select.filters2 > div.svSelect > a.toggle.toggle {
  position: static;
  padding: 0 30px 0 10px;
  background-position-y: center !important;
  overflow: hidden;
}
customers-search > div.customersSearchHeader > sv-select > div.svSelect > a.toggle.toggle > span, section.ordersToolbar sv-select.filters1 > div.svSelect > a.toggle.toggle > span,
section.ordersToolbar sv-select.filters2 > div.svSelect > a.toggle.toggle > span {
  font-size: 0.875rem;
  display: block;
  height: fit-content;
  margin: auto 0;
}
customers-search > div.customersSearchHeader > sv-select > div.svSelect > a.toggle.toggle > small.floatingLabel, section.ordersToolbar sv-select.filters1 > div.svSelect > a.toggle.toggle > small.floatingLabel,
section.ordersToolbar sv-select.filters2 > div.svSelect > a.toggle.toggle > small.floatingLabel {
  display: none;
}
customers-search > div.customersSearchHeader > sv-select > div.svSelect > a.toggle.toggle + div, section.ordersToolbar sv-select.filters1 > div.svSelect > a.toggle.toggle + div,
section.ordersToolbar sv-select.filters2 > div.svSelect > a.toggle.toggle + div {
  padding: 5px 0;
  transform: translateY(0);
}
customers-search > div.customersSearchHeader > sv-select > div.svSelect > a.toggle.toggle + div > a.value, section.ordersToolbar sv-select.filters1 > div.svSelect > a.toggle.toggle + div > a.value,
section.ordersToolbar sv-select.filters2 > div.svSelect > a.toggle.toggle + div > a.value {
  justify-content: space-between;
  align-items: center;
}
customers-search > div.customersSearchHeader > sv-select > div.svSelect > a.toggle.toggle + div > a.value > span.icon, section.ordersToolbar sv-select.filters1 > div.svSelect > a.toggle.toggle + div > a.value > span.icon,
section.ordersToolbar sv-select.filters2 > div.svSelect > a.toggle.toggle + div > a.value > span.icon {
  margin-left: 1em;
  display: flex;
  align-items: center;
}

article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator, .calculator div.swiper-items-calculator {
  height: 210px;
  float: left;
  overflow: hidden;
  max-width: 38px;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.horizontal.swiper-items-calculator > div.swiper-wrapper, .calculator div.horizontal.swiper-items-calculator > div.swiper-wrapper {
  flex-direction: row;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.horizontal.swiper-items-calculator > div.swiper-wrapper > div.swiper-slide, .calculator div.horizontal.swiper-items-calculator > div.swiper-wrapper > div.swiper-slide {
  margin: 0 2px;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator .swiper-wrapper, .calculator div.swiper-items-calculator .swiper-wrapper {
  display: flex;
  flex-direction: column-reverse;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator .swiper-slide, .calculator div.swiper-items-calculator .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  font-size: 0.8125rem;
  background: #fff;
  color: #fff;
  margin: 2px 0;
  cursor: not-allowed;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator .swiper-slide.checked, .calculator div.swiper-items-calculator .swiper-slide.checked {
  background: rgb(96.5, 96.5, 96.5) !important;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator .swiper-slide.inRange, .calculator div.swiper-items-calculator .swiper-slide.inRange {
  background: rgb(96.5, 96.5, 96.5) !important;
  color: transparent;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator .swiper-slide.available, .calculator div.swiper-items-calculator .swiper-slide.available {
  border: 1px solid rgb(208.75, 208.75, 208.75);
  cursor: pointer;
}

#vMedia .btn {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
}
#vMedia .btn.blue {
  background-color: #5677fc;
}
#vMedia .btn.red {
  background-color: #e51c23;
}
#vMedia .btn.green {
  background-color: #259b24;
}
#vMedia .fi {
  display: flex;
  justify-content: center;
}
#vMedia .fi > input, #vMedia .fi > select, #vMedia .fi > button, #vMedia .fi > div.inputWrapper > input {
  width: 280px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: 3px;
  border: none;
  padding: 0 5px;
}
@media only screen and (min-width: 768px) {
  #vMedia .fi > input, #vMedia .fi > select, #vMedia .fi > button, #vMedia .fi > div.inputWrapper > input {
    padding: 0 15px;
  }
}
#vMedia .fi > input.ng-dirty.ng-invalid, #vMedia .fi > div.inputWrapper > input.ng-dirty.ng-invalid {
  box-shadow: inset 0 -3px 0 0 #e03e2e;
}
#vMedia .fi > button {
  cursor: pointer;
  background-color: #666666;
  color: #c6c6c6;
  font-weight: bold;
  border-radius: 7px;
}
#vMedia .fSearch {
  position: relative;
}
#vMedia .fSearch > label {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1.5rem;
  margin-left: -40px;
  transform: translateX(40px);
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #c6c6c6;
}
#vMedia .fUpload > input, #vMedia #uploadFilesWrapper > form #filesUploadWrapper > input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
#vMedia .fUpload > input + label, #vMedia #uploadFilesWrapper > form #filesUploadWrapper > input + label {
  color: #fff;
  background-color: #009d4e;
  display: inline-block;
  cursor: pointer;
  padding: 10px;
  border-radius: 7px;
  width: 200px;
}
#vMedia .fUpload > input:focus + label, #vMedia #uploadFilesWrapper > form #filesUploadWrapper > input:focus + label, #vMedia .fUpload > input + label:hover, #vMedia #uploadFilesWrapper > form #filesUploadWrapper > input + label:hover {
  background-color: rgb(0, 106, 52.6624203822);
}
#vMedia .fUpload > input:focus + label, #vMedia #uploadFilesWrapper > form #filesUploadWrapper > input:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}
#vMedia .fUpload > input + label *, #vMedia #uploadFilesWrapper > form #filesUploadWrapper > input + label * {
  pointer-events: none;
}
@keyframes spinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
#vMedia .mainLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: rgba(255, 0, 0, 0.5) !important;
  background: none !important;
  pointer-events: none;
  transform: translateY(-100%);
  transition: all 200ms;
}
#vMedia .mainLoader.active {
  pointer-events: auto;
  transform: none;
}
#vMedia .mainLoader > div {
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: rgba(41, 41, 41, 0.5) !important;
}
#vMedia .mainLoader > div > div {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 100px;
  left: 100px;
  animation: spinnerRotate 1000ms linear infinite;
  background: url(f27a03b1a32d00d0b239.svg) center center no-repeat;
}
#vMedia .switch {
  position: relative;
  display: inline-block;
  padding: 2px;
}
#vMedia .switch > input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#vMedia .switch > input[type=checkbox]:checked + label:after {
  transform: translateX(17px);
}
@media only screen and (min-width: 568px) {
  #vMedia .switch > input[type=checkbox]:checked + label:after {
    transform: translateX(24px);
  }
}
#vMedia .switch > input[type=checkbox]:checked + label:before {
  background: #009d4e;
}
#vMedia .switch > label {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-left: 45px;
  height: 24px;
}
@media only screen and (min-width: 568px) {
  #vMedia .switch > label {
    padding-left: 65px;
    height: 34px;
  }
}
#vMedia .switch > label:before, #vMedia .switch > label:after {
  content: "";
  display: block;
  position: absolute;
}
#vMedia .switch > label:before {
  left: 0;
  top: 0;
  border-radius: 24px;
  width: 41px;
  height: 24px;
  background: #eee;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 568px) {
  #vMedia .switch > label:before {
    border-radius: 34px;
    width: 60px;
    height: 34px;
  }
}
#vMedia .switch > label:after {
  left: 2px;
  top: 0;
  width: 24px;
  height: 24px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transition: all 400ms;
  background-color: #fff;
}
@media only screen and (min-width: 568px) {
  #vMedia .switch > label:after {
    width: 34px;
    height: 34px;
  }
}

[class^=fa-]:before,
[class*=" fa-"]:before {
  font-family: "smartview360" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  font: normal normal normal 14px/1 "smartview360";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-bars:before {
  content: "\f0c9";
}

.fa-chevron-left:before {
  content: "\f053";
}

.fa-exclamation-triangle:before {
  content: "\f071";
}

#vMedia {
  --header-height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  background-color: #292929;
  color: #c6c6c6;
  height: 100dvh;
}
html.safari #vMedia {
  height: 100dvh;
}

#vMedia.blur {
  filter: blur(5px);
  pointer-events: none;
}
#vMedia > header {
  flex-shrink: 0;
}
#vMedia > header #mediaBookLogo {
  display: none;
}
#vMedia > div.newLoader {
  margin: auto;
}
#vMedia > div#noMediaContainer {
  margin-top: 20dvh;
}
#vMedia > div#noMediaContainer > div#noMediaImage {
  height: 300px;
  background-image: url(264714b41cbe72fdf141.svg);
  background-repeat: no-repeat;
  background-position-x: center;
}
#vMedia > div#noMediaContainer > div#noMediaMessage {
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
}
#vMedia > main {
  position: relative;
  min-height: calc(100dvh - 93px - 55px);
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "categories" "filters" "files";
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #vMedia > main {
    min-height: calc(100dvh - 73px - 55px);
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "filters filters" "categories files";
  }
}
html.safari #vMedia > main {
  min-height: calc(100dvh - 93px - 55px);
}
@media only screen and (min-width: 768px) {
  html.safari #vMedia > main {
    min-height: calc(100dvh - 73px - 55px);
  }
}

html.safari #vMedia > main {
  min-height: calc(100dvh - 93px - 55px);
}
@media only screen and (min-width: 768px) {
  html.safari #vMedia > main {
    min-height: calc(100dvh - 73px - 55px);
  }
}

#vMedia > main h1,
#vMedia > main h2 {
  font-size: 0.875rem;
  font-weight: normal;
  color: #666666;
}
#vMedia > main > #categories {
  width: 100%;
  grid-area: categories;
  box-shadow: inset -1px 0 0 0 #444444;
}
@media only screen and (min-width: 768px) {
  #vMedia > main > #categories {
    min-width: 310px;
    max-width: 350px;
  }
}
#vMedia > main > div#sharedMediaFilters {
  grid-area: filters;
  background-color: #252525;
  box-shadow: inset 0 -1px 0 0 #444444;
}
@media only screen and (min-width: 768px) {
  #vMedia > main > div#sharedMediaFilters {
    height: var(--header-height);
  }
}
#vMedia > main > div#sharedMediaFilters > div {
  padding: 1rem;
}
#vMedia > main > div#sharedMediaFilters > div > span.label {
  font-size: 14px;
  color: #bdbdbd;
}
#vMedia > main > div#sharedMediaFilters > div > span.filter {
  font-size: 12px;
  color: #fff;
}
#vMedia > main > #filters {
  grid-area: filters;
  background-color: #252525;
  box-shadow: inset 0 -1px 0 0 #444444;
}
@media only screen and (min-width: 768px) {
  #vMedia > main > #filters {
    height: var(--header-height);
  }
}
@media only screen and (min-width: 768px) {
  #vMedia > main > #filters > h2 {
    display: none;
  }
}
#vMedia > main > #filters > div.filtersWrapper {
  grid-gap: 1rem;
  grid-template-areas: "search sort";
  grid-template-columns: 1fr auto;
  padding: 0.5rem 1rem;
  align-items: center;
  justify-items: end;
  position: absolute;
  background-color: #252525;
  z-index: 10001;
}
@media only screen and (min-width: 768px) {
  #vMedia > main > #filters > div.filtersWrapper {
    display: grid;
    position: static;
  }
}
@media only screen and (min-width: 1024px) {
  #vMedia > main > #filters > div.filtersWrapper {
    grid-template-areas: "fileBtn info . search sort";
    grid-template-columns: auto auto 1fr auto auto;
  }
}
#vMedia > main > #filters > div.filtersWrapper.mobileActive {
  width: 100%;
  display: grid;
}
#vMedia > main > #filters > div.filtersWrapper #mediaSearchForm {
  grid-area: search;
  margin: 0;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  #vMedia > main > #filters > div.filtersWrapper #mediaSearchForm {
    margin: 0 14px 0 7px;
  }
}
#vMedia > main > #filters > div.filtersWrapper div.sortButtonsWrapper {
  grid-area: sort;
  justify-self: flex-start;
}
#vMedia > main > #filters > div.filtersWrapper sv-search {
  width: 100%;
  grid-area: search;
}
@media only screen and (min-width: 768px) {
  #vMedia > main > #filters > div.filtersWrapper sv-search {
    width: auto;
  }
}
#vMedia > main > #filesWrapper, #vMedia > main > div#sharedFiles {
  grid-area: files;
}
#vMedia #menu {
  width: 50%;
  max-width: 384px;
  position: relative;
  align-items: center;
  padding: 0 5px;
  background: #292929;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #vMedia #menu {
    width: 25%;
    padding: 0 10px;
  }
}
@media only screen and (min-width: 1200px) {
  #vMedia #menu {
    padding: 0 20px;
  }
}
@media only screen and (min-width: 1600px) {
  #vMedia #menu {
    padding: 0 60px;
  }
}
#vMedia #menu.collapsed {
  display: flex;
  width: 32px;
  padding: 0;
}
#vMedia #menu.collapsed h1 {
  display: none;
}
#vMedia #menu.collapsed ul {
  pointer-events: none;
}
#vMedia #menu.collapsed ul > li {
  display: none;
}
#vMedia #menu.collapsed ul > li.active {
  display: block;
  transform-origin: 0 -100%;
  transform: translateX(-25px) rotate(-90deg) translateX(35px);
}
#vMedia #menu h1 {
  padding: 10px 0;
}
#vMedia #menu ul {
  list-style: none;
  padding-left: 10px;
}
#vMedia #menu ul > li {
  font-size: 0.75rem;
  line-height: 3em;
}
#vMedia #menu ul > li.active > a {
  border-bottom: 1px solid #c6c6c6;
}
#vMedia #menu ul > li > a {
  text-decoration: none;
  color: #c6c6c6;
}
@media only screen and (min-width: 768px) {
  #vMedia #categories,
  #vMedia #filters {
    --header-height: 55px;
  }
}
#vMedia #categories > h1, #vMedia #categories > h2,
#vMedia #filters > h1,
#vMedia #filters > h2 {
  margin: 0;
  padding: 0.75rem 0.5rem;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  #vMedia #categories > h1, #vMedia #categories > h2,
  #vMedia #filters > h1,
  #vMedia #filters > h2 {
    padding: 1rem 0.5rem 0.5rem 0.5rem;
  }
}
#vMedia #categories > h1 > a, #vMedia #categories > h2 > a,
#vMedia #filters > h1 > a,
#vMedia #filters > h2 > a {
  display: flex;
  align-items: center;
  color: #f2f2f2;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  #vMedia #categories > h1 > a, #vMedia #categories > h2 > a,
  #vMedia #filters > h1 > a,
  #vMedia #filters > h2 > a {
    cursor: auto;
    pointer-events: none;
  }
}
#vMedia #categories > h1 > a > i, #vMedia #categories > h2 > a > i,
#vMedia #filters > h1 > a > i,
#vMedia #filters > h2 > a > i {
  font-size: 0.75rem;
  margin-right: 0.75rem;
}
@media only screen and (min-width: 768px) {
  #vMedia #categories > h1 > a > i, #vMedia #categories > h2 > a > i,
  #vMedia #filters > h1 > a > i,
  #vMedia #filters > h2 > a > i {
    display: none;
  }
}
#vMedia #categories > h1 > a > span, #vMedia #categories > h2 > a > span,
#vMedia #filters > h1 > a > span,
#vMedia #filters > h2 > a > span {
  font-size: 14px;
  font-weight: 700;
  color: #bdbdbd;
}
#vMedia #categories > div#sharedMediaList,
#vMedia #filters > div#sharedMediaList {
  display: none;
}
#vMedia #categories > #categoriesList, #vMedia #categories > .filtersWrapper,
#vMedia #filters > #categoriesList,
#vMedia #filters > .filtersWrapper {
  display: none;
}
#vMedia #categories {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  position: relative;
  width: 100%;
  max-height: 300px;
  align-items: center;
  background: #252525;
}
#vMedia #categories::-webkit-scrollbar {
  width: 5px;
}
#vMedia #categories::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 768px) {
  #vMedia #categories {
    max-height: initial;
    overflow: hidden;
    overflow-y: scroll;
  }
}
#vMedia #categories.mobileActive {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}
#vMedia #categories #categoriesList {
  z-index: 10002;
}
#vMedia #categories div#sharedMediaList {
  z-index: 10003;
}
#vMedia #categories #categoriesList,
#vMedia #categories div#sharedMediaList {
  width: 100%;
  background: #252525;
  position: absolute;
  overflow: auto;
  max-height: 50dvh;
  box-shadow: 0 5px 10px -5px #000;
  padding-left: 0.75rem;
}
@media only screen and (min-width: 768px) {
  #vMedia #categories #categoriesList,
  #vMedia #categories div#sharedMediaList {
    position: static;
    display: block;
    margin-bottom: 10px;
    overflow: visible;
    max-height: unset;
    box-shadow: none;
    padding-left: 0;
  }
}
#vMedia #categories #categoriesList.mobileActive,
#vMedia #categories div#sharedMediaList.mobileActive {
  display: block;
}
#vMedia #categories #categoriesList > a,
#vMedia #categories div#sharedMediaList > a {
  position: relative;
  display: block;
  color: #f2f2f2;
  text-decoration: none;
  line-height: 1.5em;
  border-bottom: solid 1px #666666;
  padding: 3px 0;
  font-size: 0.75rem;
  margin-left: 10px;
}
@media only screen and (min-width: 414px) {
  #vMedia #categories #categoriesList > a,
  #vMedia #categories div#sharedMediaList > a {
    padding: 6px 0;
  }
}
@media only screen and (min-width: 768px) {
  #vMedia #categories #categoriesList > a,
  #vMedia #categories div#sharedMediaList > a {
    padding: 9px 0 9px 18px;
    font-size: 0.875rem;
    margin-left: 20px;
    margin-right: 20px;
  }
}
#vMedia #categories #categoriesList > a:last-child,
#vMedia #categories div#sharedMediaList > a:last-child {
  border-bottom: none;
}
#vMedia #categories #categoriesList > a > span,
#vMedia #categories div#sharedMediaList > a > span {
  font-weight: 400;
  font-size: 14px;
  color: #f2f2f2;
}
#vMedia #categories #categoriesList > a > div,
#vMedia #categories div#sharedMediaList > a > div {
  font-weight: 400;
  font-size: 12px;
  color: #828282;
}
#vMedia #categories #categoriesList > a.active,
#vMedia #categories div#sharedMediaList > a.active {
  color: #f8f8f8;
}
#vMedia #categories #categoriesList > a.active:before,
#vMedia #categories div#sharedMediaList > a.active:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  background: #f8f8f8;
  transform: translateY(-50%);
  height: 65%;
  left: -6px;
  width: 2px;
}
@media only screen and (min-width: 768px) {
  #vMedia #categories #categoriesList > a.active:before,
  #vMedia #categories div#sharedMediaList > a.active:before {
    left: 1px;
    width: 5px;
  }
}
#vMedia #categories #categoriesList > a.active > span,
#vMedia #categories div#sharedMediaList > a.active > span {
  font-weight: bold;
}
#vMedia #categories #categoriesList > a.l-0,
#vMedia #categories div#sharedMediaList > a.l-0 {
  margin-left: 20px;
}
#vMedia #categories #categoriesList > a.l-1,
#vMedia #categories div#sharedMediaList > a.l-1 {
  margin-left: 30px;
}
#vMedia #categories #categoriesList > a.l-2,
#vMedia #categories div#sharedMediaList > a.l-2 {
  margin-left: 40px;
}
#vMedia #categories #categoriesList > a.l-3,
#vMedia #categories div#sharedMediaList > a.l-3 {
  margin-left: 50px;
}
#vMedia #categories #categoriesList > a.l-4,
#vMedia #categories div#sharedMediaList > a.l-4 {
  margin-left: 60px;
}
#vMedia #categories #addCategoryWrapper {
  padding: 5px 0;
  display: none;
}
@media only screen and (min-width: 414px) {
  #vMedia #categories #addCategoryWrapper {
    padding: 10px 0;
  }
}
@media only screen and (min-width: 768px) {
  #vMedia #categories #addCategoryWrapper {
    display: flex;
    padding: 0;
  }
}
#vMedia #categories #addCategoryWrapper.mobileActive {
  display: flex;
}
#vMedia #categories #addCategory {
  background: #009d4e;
  color: #fff;
  width: auto;
  max-width: 280px;
  margin: 5px 15px;
  text-align: left;
  font-size: 1rem;
  padding-left: 15px;
  padding-right: 15px;
}
@media only screen and (min-width: 768px) {
  #vMedia #categories #addCategory {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 1100px) {
  #vMedia #categories #addCategory {
    width: 280px;
  }
}
#vMedia #uploadFilesWrapper {
  position: relative;
  max-width: 750px;
  margin: 0 0 0 15px;
  padding: 0;
  background: #292929;
  border-radius: 7px;
  box-shadow: inset 0 0 5px 0 #000;
  font-size: 0.875rem;
  height: 0;
  overflow: hidden;
  transition: all 300ms;
}
#vMedia #uploadFilesWrapper.active {
  height: auto;
  padding: 20px;
  margin: 20px 15px 20px 15px;
}
#vMedia #uploadFilesWrapper.dragenter {
  box-shadow: inset 0 0 5px 0 #000, 0 0 0 10px #009d4e;
}
#vMedia #uploadFilesWrapper.dragenter * {
  pointer-events: none;
}
#vMedia #uploadFilesWrapper > a {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 10px;
  font-size: 0.75rem;
  text-decoration: none;
  color: #666666;
}
#vMedia #uploadFilesWrapper > form > p {
  text-align: center;
  padding: 10px 0 0 0;
}
#vMedia #uploadFilesWrapper > form #filesUploadWrapper {
  text-align: center;
  margin: 20px 0;
}
#vMedia #uploadFilesWrapper > form #fileList {
  max-height: 150px;
  margin: auto;
  overflow-y: auto;
  padding: 5px 0;
  text-align: center;
}
#vMedia #uploadFilesWrapper > form #fileList > ul {
  padding: 0;
  list-style: none;
}
#vMedia #uploadFilesWrapper > form #fileList span {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 3px 5px;
  margin: 3px;
  border-radius: 3px;
  font-size: 12px;
}
#vMedia #uploadFilesWrapper > form button {
  background: #009d4e;
  color: #fff;
  width: 200px;
}
#vMedia div#sharedFilesWrapper,
#vMedia #filesWrapper {
  width: 100%;
  overflow: hidden;
  height: 100%;
  padding: 5px 3px 0 3px;
  background: #333;
  position: relative;
}
@media only screen and (min-width: 555px) {
  #vMedia div#sharedFilesWrapper,
  #vMedia #filesWrapper {
    padding: 0 3px 0 3px;
  }
}
#vMedia div#sharedFilesWrapper > div#noSharedMedia,
#vMedia #filesWrapper > div#noSharedMedia {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#vMedia div#sharedFilesWrapper > div#noSharedMedia > h2,
#vMedia #filesWrapper > div#noSharedMedia > h2 {
  color: #ddd;
  padding: 0 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}
#vMedia div#sharedFilesWrapper > div#noSharedMedia > div.emptyIcon,
#vMedia #filesWrapper > div#noSharedMedia > div.emptyIcon {
  --empty-icon-width: 200px;
  --empty-icon-height: 225px;
  width: var(--empty-icon-width);
  height: var(--empty-icon-height);
  background-size: contain;
  background: url(52d40ace567015c8515f.svg) no-repeat center;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFilesWrapper > div#noSharedMedia > div.emptyIcon,
  #vMedia #filesWrapper > div#noSharedMedia > div.emptyIcon {
    --empty-icon-width: 200px;
    --empty-icon-height: 300px;
  }
}
#vMedia div#sharedFilesWrapper #mediaToolbar#mediaToolbar,
#vMedia #filesWrapper #mediaToolbar#mediaToolbar {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 1024px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar#mediaToolbar,
  #vMedia #filesWrapper #mediaToolbar#mediaToolbar {
    flex-direction: row;
    justify-content: space-between;
  }
}
#vMedia div#sharedFilesWrapper #mediaToolbar.active > div.mediaToolbarHeader > a > i,
#vMedia #filesWrapper #mediaToolbar.active > div.mediaToolbarHeader > a > i {
  transform: rotate(0);
  transition: 300ms ease-in-out;
}
#vMedia div#sharedFilesWrapper #mediaToolbar.active > div.mediaToolbarContent,
#vMedia #filesWrapper #mediaToolbar.active > div.mediaToolbarContent {
  display: grid;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader > a,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader > a {
  display: block;
}
@media only screen and (min-width: 1024px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader > a,
  #vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader > a {
    display: none;
  }
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader > a > i,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader > a > i {
  display: flex;
  align-items: center;
  transform: rotate(180deg);
  transition: 300ms ease-in-out;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader > div#infoWrapper,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader > div#infoWrapper {
  font-size: 0.875rem;
  text-align: left;
  color: #828282;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent {
  z-index: 1;
  display: none;
  grid-template-areas: "shareBtn downloadBtn";
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}
@media only screen and (min-width: 568px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent,
  #vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent {
    grid-template-areas: "shareBtn downloadBtn .";
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent,
  #vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent {
    grid-template-areas: "shareBtn downloadBtn";
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 1024px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent,
  #vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent {
    display: grid;
  }
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button {
  --toolbar-button-height: 30px;
  display: flex;
  align-items: center;
  border-radius: 7px;
  color: #fff;
  white-space: nowrap;
  font-size: 0.875rem;
  height: var(--toolbar-button-height);
  padding: 0 5px;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button,
  #vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button {
    --toolbar-button-height: 40px;
    white-space: nowrap;
    font-size: 1rem;
    padding: 0 15px;
  }
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#downloadButton:disabled, #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton:disabled,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#downloadButton:disabled,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton:disabled {
  background-color: #4F4F4F;
  color: #828282;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#downloadButton:disabled > i, #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton:disabled > i,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#downloadButton:disabled > i,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton:disabled > i {
  color: #828282;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#downloadButton,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#downloadButton {
  grid-area: downloadBtn;
  background-color: #009d4e;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton {
  grid-area: shareBtn;
  background-color: #f2994a;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton:disabled > i,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton:disabled > i {
  background-color: #828282;
  color: #4F4F4F;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton > i,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton > i {
  background-color: #fff;
  color: #f2994a;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton > i::before,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button#shareButton > i::before {
  height: auto;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button > i,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button > i {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarContent > button > i::before,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarContent > button > i::before {
  height: 0.875rem;
}
#vMedia div#sharedFiles {
  width: 100%;
  overflow: hidden;
  height: 100%;
  padding: 5px 3px 0 3px;
  background: #333;
  position: relative;
}
@media only screen and (min-width: 555px) {
  #vMedia div#sharedFiles {
    padding: 20px 3px 0 3px;
  }
}
#vMedia div#sharedFiles > section {
  width: 100%;
  padding: 0 0.5rem;
}
#vMedia div#sharedFiles > section > table {
  width: 100%;
}
#vMedia div#sharedFiles > section > table > thead > tr > th {
  padding: 18px 8px;
}
#vMedia div#sharedFiles > section > table > thead > tr > th.mobileHidden {
  display: none;
}
@media only screen and (min-width: 1208px) {
  #vMedia div#sharedFiles > section > table > thead > tr > th.mobileHidden {
    display: table-cell;
  }
}
#vMedia div#sharedFiles > section > table > thead > tr > th > div {
  color: #f2f2f2;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
}
#vMedia div#sharedFiles > section > table > thead > tr > th > div.actions, #vMedia div#sharedFiles > section > table > thead > tr > th > div.availableUntil, #vMedia div#sharedFiles > section > table > thead > tr > th > div.size {
  text-align: right;
}
#vMedia div#sharedFiles > section > table > thead > tr > th > div.sorting {
  display: flex;
  align-items: center;
  cursor: pointer;
}
#vMedia div#sharedFiles > section > table > thead > tr > th > div.sorting.availableUntil, #vMedia div#sharedFiles > section > table > thead > tr > th > div.sorting.size {
  justify-content: flex-end;
}
#vMedia div#sharedFiles > section > table > tbody > tr:nth-child(odd) {
  background-color: #252525;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td {
  padding: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #f2f2f2;
  vertical-align: top;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.mobileHidden {
  display: none;
}
@media only screen and (min-width: 1208px) {
  #vMedia div#sharedFiles > section > table > tbody > tr > td.mobileHidden {
    display: table-cell;
  }
}
#vMedia div#sharedFiles > section > table > tbody > tr > td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td > div.thumb {
  width: 64px;
  height: 64px;
  background: url(45c64a98d18b796e14bd.png);
  background-size: contain;
  border-radius: 3px;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.availableUntil, #vMedia div#sharedFiles > section > table > tbody > tr > td.size {
  text-align: right;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions {
  vertical-align: middle;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton {
  color: #fff;
  display: flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 6px;
  height: 40px;
  padding: 0 15px;
  font-size: 14px;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton.copyLinkButton, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton.copyLinkButton, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton.copyLinkButton {
  background-color: #EF8425;
  transition: background-color 0.5s;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton.copyLinkButton.copying, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton.copyLinkButton.copying, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton.copyLinkButton.copying {
  background-color: #4F4F4F;
  transition: background-color 0.5s;
  cursor: not-allowed;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton.downloadButton, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton.downloadButton, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton.downloadButton {
  background-color: #009d4e;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton.downloadButton.downloading, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton.downloadButton.downloading, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton.downloadButton.downloading {
  background-color: #4F4F4F;
  cursor: not-allowed;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton.deleteButton, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton.deleteButton, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton.deleteButton {
  background-color: #eb5757;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton.deleteButton.deleting, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton.deleteButton.deleting, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton.deleteButton.deleting {
  opacity: 0.5;
  cursor: not-allowed;
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton > i {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton > i {
    margin-right: 0.5rem;
  }
}
#vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton > span, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton > span, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton > span {
  display: none;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton > span, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton > span, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton > span {
    display: initial;
  }
}
#vMedia div#sharedFiles,
#vMedia #files {
  overflow-y: scroll;
  height: 100%;
  padding-bottom: 50px;
  scrollbar-width: thin;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
#vMedia div#sharedFiles::-webkit-scrollbar-thumb,
#vMedia #files::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles,
  #vMedia #files {
    padding-bottom: 80px;
  }
  html.safari #vMedia div#sharedFiles,
  html.safari #vMedia #files {
    padding-bottom: 130px;
  }
}
#vMedia div#sharedFiles > section,
#vMedia #files > section {
  padding: 0 0.5rem;
}
html.safari #vMedia div#sharedFiles > section,
html.safari #vMedia #files > section {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles > section,
  #vMedia #files > section {
    padding: 0 2rem;
  }
}
#vMedia div#sharedFiles h1,
#vMedia #files h1 {
  --header-height: 35px;
  font-size: 1rem;
  background-color: #444444;
  color: #999999;
  height: var(--header-height);
  line-height: var(---header-height);
  padding: 0 0.5rem;
  border-bottom: 2px solid #292929;
  border-radius: 3px;
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: auto 1fr;
  grid-template-areas: "buttons info";
  margin-top: 0;
  margin-bottom: 0.5rem;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles h1,
  #vMedia #files h1 {
    --header-height: 45px;
    margin-bottom: 1rem;
    grid-gap: 1rem;
    padding: 0 1rem;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "buttons info .";
  }
}
#vMedia div#sharedFiles h1 > div.buttonsWrapper,
#vMedia #files h1 > div.buttonsWrapper {
  gap: 0.5rem;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles h1 > div.buttonsWrapper,
  #vMedia #files h1 > div.buttonsWrapper {
    gap: 1rem;
  }
}
#vMedia div#sharedFiles h1 > div.buttonsWrapper > button,
#vMedia #files h1 > div.buttonsWrapper > button {
  text-decoration: none;
  white-space: nowrap;
}
#vMedia div#sharedFiles h1 > div.buttonsWrapper > button > i,
#vMedia #files h1 > div.buttonsWrapper > button > i {
  padding-top: 0.25rem;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles h1 > div.buttonsWrapper > button > i,
  #vMedia #files h1 > div.buttonsWrapper > button > i {
    display: none;
  }
}
#vMedia div#sharedFiles h1 > div.buttonsWrapper > button > span,
#vMedia #files h1 > div.buttonsWrapper > button > span {
  display: none;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles h1 > div.buttonsWrapper > button > span,
  #vMedia #files h1 > div.buttonsWrapper > button > span {
    display: inline;
  }
}
#vMedia div#sharedFiles h1 > div.groupInfo,
#vMedia #files h1 > div.groupInfo {
  grid-area: info;
  text-align: right;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles h1 > div.groupInfo,
  #vMedia #files h1 > div.groupInfo {
    text-align: center;
  }
}
#vMedia div#sharedFiles h1 > div.groupInfo > span,
#vMedia #files h1 > div.groupInfo > span {
  color: #f2f2f2;
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#vMedia div#sharedFiles h1 > div.groupInfo > span:first-child,
#vMedia #files h1 > div.groupInfo > span:first-child {
  flex: 1;
}
#vMedia div#sharedFiles .filesContainer,
#vMedia #files .filesContainer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
html.safari #vMedia div#sharedFiles .filesContainer,
html.safari #vMedia #files .filesContainer {
  display: block;
}
html.safari #vMedia div#sharedFiles .filesContainer > div,
html.safari #vMedia #files .filesContainer > div {
  float: left;
}

#vMedia div#sharedFiles div.fileItem,
#vMedia #files div.fileItem {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #f8f8f8;
  box-shadow: 0 0 0 5px #fff;
  border-radius: 3px;
  width: 220px;
  margin: 10px;
}
#vMedia div#sharedFiles div.fileItem:hover,
#vMedia #files div.fileItem:hover {
  box-shadow: 0 0 0 5px #fff, 3px 3px 5px 10px #292929;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles div.fileItem,
  #vMedia #files div.fileItem {
    margin: 20px;
  }
}
#vMedia div#sharedFiles div.fileItem > a.miniature,
#vMedia #files div.fileItem > a.miniature {
  display: block;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  height: 180px;
}
#vMedia div#sharedFiles div.fileItem > a.miniature.status-success,
#vMedia #files div.fileItem > a.miniature.status-success {
  animation: miniatureAnimation 500ms 1;
}
#vMedia div#sharedFiles div.fileItem > a.miniature.noImage,
#vMedia #files div.fileItem > a.miniature.noImage {
  background-color: #666666;
}
#vMedia div#sharedFiles div.fileItem > a.miniature.status-loading,
#vMedia #files div.fileItem > a.miniature.status-loading {
  background-color: #fff !important;
  background: url(cc5ad6f4c46fdb7d6a7a.svg) center center no-repeat;
  background-size: 64px;
}
#vMedia div#sharedFiles div.fileItem > a.miniature .noImageIcon,
#vMedia #files div.fileItem > a.miniature .noImageIcon {
  width: 100%;
  height: 100%;
  background: url(411f467ea5eecba64975.svg) center center no-repeat;
  background-size: 80px;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles div.fileItem > a.miniature .noImageIcon,
  #vMedia #files div.fileItem > a.miniature .noImageIcon {
    background-size: auto;
  }
}
#vMedia div#sharedFiles div.fileItem > a.miniature .noImageIcon > span.fileExtension,
#vMedia #files div.fileItem > a.miniature .noImageIcon > span.fileExtension {
  top: 42%;
  font-size: 1rem;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFiles div.fileItem > a.miniature .noImageIcon > span.fileExtension,
  #vMedia #files div.fileItem > a.miniature .noImageIcon > span.fileExtension {
    font-size: 1.5rem;
  }
}
#vMedia div#sharedFiles div.fileItem > div.description,
#vMedia #files div.fileItem > div.description {
  background: #fff;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
#vMedia div#sharedFiles div.fileItem > div.description > div.filename,
#vMedia #files div.fileItem > div.description > div.filename {
  font-size: 0.75rem;
  margin: 2px 0;
  color: #333;
  font-weight: bold;
}
#vMedia div#sharedFiles div.fileItem > div.description > div.filesize, #vMedia div#sharedFiles div.fileItem > div.description > div.updatedAt,
#vMedia #files div.fileItem > div.description > div.filesize,
#vMedia #files div.fileItem > div.description > div.updatedAt {
  font-size: 0.75rem;
  color: #333;
}
#vMedia div#sharedFiles div.fileItem > div.description > a.termsLink,
#vMedia #files div.fileItem > div.description > a.termsLink {
  color: #666666;
  font-size: 12px;
}
#vMedia div#sharedFiles div.fileItem > div.description > a.termsLink:hover,
#vMedia #files div.fileItem > div.description > a.termsLink:hover {
  color: #999999;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck,
#vMedia #files div.fileItem > div.fileCheck {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background: red;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #000;
  overflow: hidden;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > input[type=checkbox],
#vMedia #files div.fileItem > div.fileCheck > input[type=checkbox] {
  display: none;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > label,
#vMedia #files div.fileItem > div.fileCheck > label {
  display: grid;
  background: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 25px;
  color: #000;
  cursor: pointer;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > label > i,
#vMedia #files div.fileItem > div.fileCheck > label > i {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  display: flex;
  width: 100%;
  height: 100%;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > label > i.fa-plus,
#vMedia #files div.fileItem > div.fileCheck > label > i.fa-plus {
  opacity: 1;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > label > i.fa-check,
#vMedia #files div.fileItem > div.fileCheck > label > i.fa-check {
  opacity: 0;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > label > i:before,
#vMedia #files div.fileItem > div.fileCheck > label > i:before {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > input[type=checkbox]:checked + label,
#vMedia #files div.fileItem > div.fileCheck > input[type=checkbox]:checked + label {
  background: #000;
  color: #fff;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > input[type=checkbox]:checked + label > i.fa-plus,
#vMedia #files div.fileItem > div.fileCheck > input[type=checkbox]:checked + label > i.fa-plus {
  opacity: 0;
}
#vMedia div#sharedFiles div.fileItem > div.fileCheck > input[type=checkbox]:checked + label > i.fa-check,
#vMedia #files div.fileItem > div.fileCheck > input[type=checkbox]:checked + label > i.fa-check {
  opacity: 1;
}
#vMedia div#sharedFiles div.fileItem.fakeItem,
#vMedia #files div.fileItem.fakeItem {
  opacity: 0;
  padding: 0;
  height: 0;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
}
#vMedia div.sortButtonsWrapper {
  font-family: "latoregular", sans-serif;
  font-size: 0.75rem;
  position: relative;
  display: flex;
  justify-content: flex-end;
  z-index: 200;
}
@media only screen and (min-width: 768px) {
  #vMedia div.sortButtonsWrapper {
    padding: 10px;
  }
}
#vMedia div.sortButtonsWrapper a {
  text-decoration: none;
}
#vMedia div.sortButtonsWrapper a.toggleSorting {
  display: flex;
  color: #c6c6c6;
  font-weight: bold;
  align-items: center;
}
#vMedia div.sortButtonsWrapper a.toggleSorting > i {
  margin-right: 10px;
  font-size: 22px;
}
#vMedia div.sortButtonsWrapper ul.sortingButtons {
  position: absolute;
  top: 40px;
  right: 0;
  display: flex;
  min-width: 200px;
  flex-direction: column;
  margin: 0;
  padding: 5px 10px;
  background: #292929;
  border-radius: 10px;
  border: solid #444444 1px;
  z-index: 2;
  opacity: 0.95;
  -webkit-backdrop-filter: saturate(180%) blur(15px);
  backdrop-filter: saturate(180%) blur(15px);
}
@media only screen and (min-width: 768px) {
  #vMedia div.sortButtonsWrapper ul.sortingButtons {
    right: unset;
  }
}
#vMedia div.sortButtonsWrapper ul.sortingButtons:after {
  content: "";
  position: absolute;
  top: 0;
  right: 30px;
  width: 16px;
  height: 16px;
  background: #292929;
  transform: translate(16px, -8px) rotate(45deg);
  border: solid #444444 1px;
  border-right: none;
  border-bottom: none;
}
#vMedia div.sortButtonsWrapper ul.sortingButtons > li {
  display: block;
  border-bottom: solid #444444 1px;
}
#vMedia div.sortButtonsWrapper ul.sortingButtons > li:last-child {
  border-bottom: none;
}
#vMedia div.sortButtonsWrapper ul.sortingButtons > li.addSeparator {
  border-bottom: none;
  margin-bottom: 15px;
}
#vMedia div.sortButtonsWrapper ul.sortingButtons > li > a {
  display: block;
  padding: 5px 10px;
  margin: 5px 0;
  color: #c6c6c6;
  border-radius: 5px;
}
#vMedia div.sortButtonsWrapper ul.sortingButtons > li > a.active {
  background: #333;
}
#vMedia div.sortButtonsWrapper ul.sortingButtons > li > a:hover {
  background: rgba(255, 255, 255, 0.1);
}
#vMedia div.sortButtonsWrapper a.toggleSorting > i {
  margin-right: 5px;
  font-size: 18px;
  line-height: 20px;
}

#newCategoryForm div.fi label {
  line-height: 24px;
}
#newCategoryForm div.fi input {
  -webkit-appearance: none;
  border-bottom: solid 1px #999999;
  outline: none;
  color: #fff;
  background: none;
  border-radius: 0;
  height: 24px;
}

#smartviewApp #vMedia {
  min-height: 0;
}
#smartviewApp #vMedia > main {
  min-height: calc(100dvh - 50px - 55px);
}
#smartviewApp.safari #vMedia > main {
  min-height: calc(100dvh - 50px - 55px);
}

#smartviewApp #vMedia #downloadButton {
  display: flex;
}
#smartviewApp #vMedia #filesWrapper {
  padding-top: 15px;
}
#smartviewApp #fileDetailsWrapper #videoPreview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16/9;
}
@media only screen and (min-width: 768px) {
  #smartviewApp #fileDetailsWrapper #videoPreview {
    height: auto;
  }
}
#smartviewApp #fileDetailsWrapper #fileDetailsButtons > a:nth-child(2) {
  display: flex !important;
  align-items: center;
}

#fileDetailsWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.01);
  transition: all 300ms;
  opacity: 0;
}
#fileDetailsWrapper.active {
  transform: none;
  opacity: 1;
}
#fileDetailsWrapper #fileDetailsClose {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fileDetailsWrapper #fileDetails {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  height: 70%;
  border-radius: 6px;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background: #fff;
}
@media only screen and (min-width: 768px) {
  #fileDetailsWrapper #fileDetails {
    width: 80%;
    height: 87%;
    max-width: 1920px;
    max-height: 1080px;
  }
}
@media only screen and (min-width: 1024px) {
  #fileDetailsWrapper #fileDetails {
    width: 70%;
  }
}
@media only screen and (min-width: 1280px) {
  #fileDetailsWrapper #fileDetails {
    width: 40%;
  }
}
#fileDetailsWrapper #fileDetails > div {
  height: 100%;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper {
  margin: 5px;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 8px;
  background-color: #f8f8f8;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  #fileDetailsWrapper #fileDetails .filePreviewWrapper {
    margin: 10px;
  }
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  border-radius: 1.5em;
  background-color: rgba(41, 41, 41, 0.5);
  color: #fff;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton:hover {
  background-color: hsla(0, 0%, -3.9215686275%, 0.5);
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton:active {
  box-shadow: inset 0 0 5px #666666;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton.disabled {
  display: none;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton.nextButton {
  right: 1em;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton.nextButton i {
  transform: scale(0.7, 1.7) translateX(2px);
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton.prevButton {
  left: 1em;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton.prevButton i {
  transform: scale(0.7, 1.7) translateX(-2px);
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileContentWrapper .navButton i {
  display: flex;
  justify-content: center;
  position: absolute;
  color: #fff;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper .fileInfoClose {
  color: #666666;
  font-weight: 100;
  align-self: flex-end;
  margin: 0.5em 0.8em;
  text-align: right;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper #filePreview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper #filePreview.status-loading {
  background-image: url(cc5ad6f4c46fdb7d6a7a.svg);
  background-size: 64px;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper #filePreview.no-image {
  background-image: url(bfe60bf05c9fb2f8e3cf.svg) !important;
  background-size: 30%;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper #filePreview.no-image .fileNoPreviewExtension {
  width: 30%;
  aspect-ratio: 1;
  color: #c6c6c6;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper #filePreview.no-image .fileNoPreviewExtension svg {
  width: 100%;
  height: 100%;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper #filePreview.no-image .fileNoPreviewExtension svg h1 {
  margin-top: 1.8em;
  font-size: 1.7em;
  text-align: center;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper #filePreview.no-image .fileNoPreview {
  margin-top: 1.5em;
  color: #666666;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper #filePreview.no-image > *:not(.fileNoPreviewExtension) {
  flex: 1;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper div#pdfPreview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#fileDetailsWrapper #fileDetails .filePreviewWrapper div#pdfPreview > iframe {
  width: 100%;
  height: 100%;
}
#fileDetailsWrapper #fileDetails #fileInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-basis: fit-content;
  height: fit-content;
  padding: 0.5em;
  color: #666666;
}
@media only screen and (min-width: 768px) {
  #fileDetailsWrapper #fileDetails #fileInfo {
    padding: 0.5em 1em 2em 1em;
  }
}
#fileDetailsWrapper #fileDetails #fileInfo > h1 {
  margin: 0 0 0.4em 0;
  font-size: 1.5rem;
  font-weight: normal;
}
#fileDetailsWrapper #fileDetails #fileInfo p.size {
  margin: 0;
  font-size: 1rem;
}
#fileDetailsWrapper #fileDetails #fileInfo hr.line {
  height: 1px;
  width: 100%;
  margin: 1.5em 0;
  border: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.4), #666666, rgba(0, 0, 0, 0.4));
}
#fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons {
  display: flex;
  align-self: flex-end;
  justify-content: space-between;
}
#fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons .btn {
  display: flex;
  align-items: center;
  height: 30px;
  line-height: 30px;
  font-size: 0.75rem;
  background: #2f7feb;
  padding: 0 15px;
  font-weight: bold;
  border-radius: 7px;
  color: #fff;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  #fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons .btn {
    height: 40px;
    line-height: 40px;
  }
}
#fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons .btn.grey {
  background: #666666;
}
#fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons .btn > i {
  margin-right: 0.2em;
}
#fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons .btn > i:before {
  vertical-align: middle;
}
@media only screen and (min-width: 768px) {
  #fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons .btn > i {
    transform: scale(2);
  }
}
#fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons .btn > i + span {
  padding-left: 5px;
}
@media only screen and (min-width: 768px) {
  #fileDetailsWrapper #fileDetails #fileInfo #fileDetailsButtons .btn > i + span {
    padding-left: 15px;
    font-weight: 100;
    font-size: 1.1em;
  }
}
#fileDetailsWrapper #fileDetails #fileInfo h2 {
  font-size: 1rem;
  font-weight: normal;
  margin: 1em 0 0.1em 0;
}
#fileDetailsWrapper #fileDetails #fileInfo form.addNewForm {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#fileDetailsWrapper #fileDetails #fileInfo form.addNewForm > p {
  font-size: 0.875rem;
  margin: 0;
}
#fileDetailsWrapper #fileDetails #fileInfo form.addNewForm > div {
  display: flex;
  justify-content: space-between;
}
#fileDetailsWrapper #fileDetails #fileInfo form.addNewForm > div > input {
  width: calc(100% - 105px);
  height: 30px;
  font-size: 1rem;
  padding: 10px 7px 0 7px;
  border: none;
  border-bottom: solid 1px #c6c6c6;
}
@media only screen and (min-width: 568px) {
  #fileDetailsWrapper #fileDetails #fileInfo form.addNewForm > div > input {
    height: 40px;
    padding: 15px 7px 0 7px;
  }
}
#fileDetailsWrapper #fileDetails #fileInfo form.addNewForm > div > button {
  -webkit-appearance: none;
  border: none;
  width: 92px;
  height: 30px;
  line-height: 30px;
  font-size: 0.75rem;
  font-weight: bold;
  background: #009d4e;
  color: #fff;
  cursor: pointer;
  border-radius: 7px;
  padding: 0 15px;
}
@media only screen and (min-width: 568px) {
  #fileDetailsWrapper #fileDetails #fileInfo form.addNewForm > div > button {
    height: 40px;
    line-height: 40px;
  }
}
#fileDetailsWrapper #fileDetails #fileInfo #userTypes {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
#fileDetailsWrapper #fileDetails #fileInfo #userTypes div.switchWrapper {
  display: flex;
  flex-wrap: wrap;
  margin-right: 10px;
}
#fileDetailsWrapper #fileDetails #fileInfo #userTypes div.switchWrapper > input {
  background: red;
  width: 0;
  height: 0;
}
#fileDetailsWrapper #fileDetails #fileInfo #userTypes div.switchWrapper > input:checked ~ label {
  background: #009d4e;
  color: #fff;
}
#fileDetailsWrapper #fileDetails #fileInfo #userTypes div.switchWrapper > label {
  background: #c6c6c6;
  display: block;
  padding: 5px;
  text-align: center;
  font-size: 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  min-width: 80px;
}
#fileDetailsWrapper #fileDetails #fileInfo #visibility > div, #fileDetailsWrapper #fileDetails #fileInfo #groups > div {
  display: block;
}
#fileDetailsWrapper #fileDetails #fileInfo #visibility > div input[type=checkbox]:disabled:checked + label, #fileDetailsWrapper #fileDetails #fileInfo #groups > div input[type=checkbox]:disabled:checked + label {
  display: block;
  height: 1.5em;
  padding: 0;
}
#fileDetailsWrapper #fileDetails #fileInfo #visibility > div input[type=checkbox]:disabled:checked + label:before, #fileDetailsWrapper #fileDetails #fileInfo #visibility > div input[type=checkbox]:disabled:checked + label:after, #fileDetailsWrapper #fileDetails #fileInfo #groups > div input[type=checkbox]:disabled:checked + label:before, #fileDetailsWrapper #fileDetails #fileInfo #groups > div input[type=checkbox]:disabled:checked + label:after {
  content: "";
  display: none;
}
#fileDetailsWrapper #fileDetails #fileInfo #visibility > div input[type=checkbox]:disabled:checked + label > span:nth-child(2), #fileDetailsWrapper #fileDetails #fileInfo #groups > div input[type=checkbox]:disabled:checked + label > span:nth-child(2) {
  display: none;
}
#fileDetailsWrapper #fileDetails #fileInfo #visibility > div input[type=checkbox]:disabled + label, #fileDetailsWrapper #fileDetails #fileInfo #groups > div input[type=checkbox]:disabled + label {
  display: none;
}
#fileDetailsWrapper #fileDetails #fileInfo #visibility > div label, #fileDetailsWrapper #fileDetails #fileInfo #groups > div label {
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  #fileDetailsWrapper #fileDetails #fileInfo #visibility > div label, #fileDetailsWrapper #fileDetails #fileInfo #groups > div label {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media only screen and (min-width: 1400px) {
  #fileDetailsWrapper #fileDetails #fileInfo #visibility > div label, #fileDetailsWrapper #fileDetails #fileInfo #groups > div label {
    flex-direction: row;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) {
  #fileDetailsWrapper #fileDetails #fileInfo #visibility > div label > span, #fileDetailsWrapper #fileDetails #fileInfo #groups > div label > span {
    letter-spacing: -0.05em;
  }
}
@media only screen and (min-width: 1024px) {
  #fileDetailsWrapper #fileDetails #fileInfo #visibility > div label > span, #fileDetailsWrapper #fileDetails #fileInfo #groups > div label > span {
    letter-spacing: 0;
  }
}
#fileDetailsWrapper #fileDetails #fileInfo #visibility > div label > span:nth-child(1), #fileDetailsWrapper #fileDetails #fileInfo #groups > div label > span:nth-child(1) {
  margin-right: 0.35rem;
}

div.modalWrapper {
  position: fixed;
  z-index: 2002;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: block;
  border-radius: 3px;
  width: calc(100dvw - 20px);
  height: calc(100dvh - 20px);
}
@media only screen and (min-width: 768px) {
  div.modalWrapper {
    width: calc(100dvw - 50px);
    height: calc(100dvh - 50px);
  }
}
div.modalWrapper button.backToPackages {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  margin: 5px;
  padding: 5px 10px;
}
@media only screen and (min-width: 768px) {
  div.modalWrapper button.backToPackages {
    padding: 10px 30px;
    margin: 10px;
  }
}
div.modalWrapper .debugPackageId {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
}

add-package div.modalWrapper {
  z-index: 10000000;
}

main.packageIn.popup div.packageHeader {
  display: flex;
  align-items: flex-end;
}
main.packageIn.popup div.orderName {
  display: flex;
  padding-left: 10px;
  align-items: center;
  align-self: flex-end;
}
@media only screen and (min-width: 768px) {
  main.packageIn.popup div.orderName {
    padding-left: 150px;
  }
}
main.packageIn.popup div.orderName input {
  -webkit-appearance: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: none;
  color: #828282;
  width: auto;
}

.favouriteSwitch {
  display: block;
  position: absolute;
  top: 50px;
  right: 0;
  padding: 10px;
  z-index: 10;
}
.favouriteSwitch .favourite-switch-component > i {
  display: block;
  font-size: 1.375rem;
  color: #333;
  transition: all 300ms;
  transform: scale(1);
}
.favouriteSwitch .favourite-switch-component.active > i {
  color: #eb5757;
  text-shadow: none;
}
.favouriteSwitch .favourite-switch-component.isLoading > i {
  opacity: 0;
}
.favouriteSwitch .favourite-switch-component:hover i {
  transform: scale(1.2);
}

agents-list {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

div.agentsSearchHeader.agentsSearchHeader {
  padding: 0.5rem;
}

div.agentsSearchHeader {
  display: grid;
  grid-template-areas: "closeBtn title" "search search";
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  padding: 0.5rem;
}
@media only screen and (min-width: 768px) {
  div.agentsSearchHeader {
    grid-gap: 1rem;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "closeBtn title search";
  }
}
div.agentsSearchHeader > h1 {
  margin: 0;
  grid-area: title;
}
div.agentsSearchHeader > sv-search {
  grid-area: search;
}
div.agentsSearchHeader > a.closeModal {
  grid-area: closeBtn;
  color: #c2c2c2;
}

section.agents-list-component {
  height: 100%;
  overflow: hidden;
}
section.agents-list-component > div.searchResults {
  height: 100%;
}
section.agents-list-component > div.searchResults div.cleanList div.first-row > div, section.agents-list-component > div.searchResults div.cleanList > a.row > div {
  height: 35px;
  display: flex;
  align-items: center;
  padding: 0.5rem;
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  section.agents-list-component > div.searchResults div.cleanList div.first-row > div, section.agents-list-component > div.searchResults div.cleanList > a.row > div {
    font-size: 1rem;
  }
}
section.agents-list-component > div.searchResults > div.agentsHeader > div > div, section.agents-list-component > div.searchResults > div.agentsResults > div#agentsList > a {
  display: grid;
  grid-template-columns: calc(20% - 0.5rem) calc(30% - 0.5rem) calc(50% - 0.5rem);
  grid-gap: 0.75rem;
}
section.agents-list-component > div.searchResults > div.agentsHeader {
  padding: 0;
}
section.agents-list-component > div.searchResults > div.agentsResults {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  overflow: auto;
  height: calc(100% - 35px);
}
section.agents-list-component > div.searchResults > div.agentsResults::-webkit-scrollbar {
  width: 5px;
}
section.agents-list-component > div.searchResults > div.agentsResults::-webkit-scrollbar-thumb {
  background-color: #666666;
}
section.agents-list-component > div.searchResults > div.agentsResults > div#agentsList > a {
  box-shadow: inset 0 -1px 0 0 #DDDCDF;
}
section.agents-list-component > div.searchResults > div.agentsResults > div#agentsList > a:hover {
  background: rgb(241.9, 241.9, 241.9);
}
section.agents-list-component > div.searchResults > div.agentsResults > div#agentsList > a:hover > div {
  background-color: transparent;
}
section.agents-list-component > div.searchResults > div.agentsResults > div#agentsList > a:nth-child(odd) {
  background-color: #e4e4e4;
}
section.agents-list-component > div.searchResults > div.agentsResults > div#agentsList > a > div {
  width: 100%;
  box-shadow: none;
}

div.sv-tooltip-container > div.tooltip-list-wrapper, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover, div.chooseLangWrapper > div, #header > div.right-nav > div.infoWrapper > div.infoPopup, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover {
  display: none;
  position: absolute;
  right: 10px;
  background: #2f2f2f;
  width: 200px;
  z-index: 10;
  border-radius: 10px;
  border: solid 1px #444444;
  font-size: 0.75rem;
  top: 100px;
}
@media only screen and (min-width: 768px) {
  div.sv-tooltip-container > div.tooltip-list-wrapper, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover, div.chooseLangWrapper > div, #header > div.right-nav > div.infoWrapper > div.infoPopup, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover {
    top: 60px;
  }
}
div.sv-tooltip-container > div.active.tooltip-list-wrapper, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.active.groupActionsPopover, div.chooseLangWrapper > div.active, #header > div.right-nav > div.infoWrapper > div.active.infoPopup, footer#packageFooter > div.packageActionsWrapper > div.active.groupActionsPopover, footer#orderFooter div.orderActionsWrapper > div.active.groupActionsPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.active.groupActionsPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.active.groupActionsPopover {
  display: block;
}
div.sv-tooltip-container > div.tooltip-list-wrapper:after, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover:after, div.chooseLangWrapper > div:after, #header > div.right-nav > div.infoWrapper > div.infoPopup:after, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover:after, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover:after, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover:after, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover:after {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: #2f2f2f;
  transform: rotate(45deg);
  border-top: solid 1px #444444;
  border-left: solid 1px #444444;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > div > a, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > div > a, div.chooseLangWrapper > div > div > a, #header > div.right-nav > div.infoWrapper > div.infoPopup > div > a, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > div > a, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > div > a, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > div > a, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > div > a {
  display: block;
  margin: 0 15px;
  padding: 12px 10px;
  text-decoration: none;
  color: #f8f8f8;
  border-bottom: solid 1px #444444;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > div > a:last-child, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > div > a:last-child, div.chooseLangWrapper > div > div > a:last-child, #header > div.right-nav > div.infoWrapper > div.infoPopup > div > a:last-child, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > div > a:last-child, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > div > a:last-child, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > div > a:last-child, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > div > a:last-child {
  border: none;
}

footer#packageFooter > div.packageActionsWrapper, footer#orderFooter div.orderActionsWrapper, div.contextActions > div.buttons > div.groupActionWrapper, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions {
  --popover-height-item: 25px;
  letter-spacing: 0;
  word-spacing: 3px;
  position: relative;
  display: inline-block;
}
@media only screen and (min-width: 1024px) {
  footer#packageFooter > div.packageActionsWrapper, footer#orderFooter div.orderActionsWrapper, div.contextActions > div.buttons > div.groupActionWrapper, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions {
    --popover-height-item: 35px;
  }
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover {
  font-size: 0.75rem;
}
@media only screen and (min-width: 1024px) {
  footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover {
    width: 250px;
    font-size: 0.875rem;
  }
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover.balloonPopover, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover.balloonPopover, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover.balloonPopover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover.balloonPopover {
  display: block;
  top: calc(-3 * var(--popover-height-item) - 10px - 0.625rem);
  left: 0;
  border-radius: 5px;
  background-color: #333;
  padding: 0.5rem 0.375rem;
  z-index: 1000000;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover.balloonPopover::after, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover.balloonPopover::after, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover.balloonPopover::after, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover.balloonPopover::after {
  top: calc(3 * var(--popover-height-item) - 5px + 0.625rem);
  left: 15px;
  background-color: #333;
  border-top: none;
  border-left: none;
  border-bottom: solid 1px #444444;
  border-right: solid 1px #444444;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > a, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > a, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > a, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > a {
  width: 100%;
  height: var(--popover-height-item);
  border-bottom: none;
  margin: 0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: flex-start;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > a:hover, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > a:hover, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > a:hover, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > a:hover {
  background-color: #4F4F4F;
  border-radius: 2px;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > a.disabled, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > a.disabled, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > a.disabled, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > a.disabled {
  pointer-events: none;
  opacity: 0.75;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > a > i, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > a > i, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > a > i, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > a > i {
  display: flex;
  align-items: center;
  justify-self: center;
  margin-right: 1rem;
  font-size: 1rem;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover > a > span:last-child, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover > a > span:last-child, div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover > a > span:last-child, section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover > a > span:last-child {
  margin-left: 0.25rem;
}

@keyframes miniatureAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.ellipsis, .calculator .sizesGroups > ul > li > a > div > div, .calculator div.calculatorGrid section.childGrid > div.col .lSize > span > span, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lSize > span > span, #customerView .customerOrdersGrid > div > div.nameColumn p.subtitle .amount, #gesture-area .catalog > div > div .name p, div.bigmodal.customers div.customersList > a.row > span, div.bigmodal.customers div.customersList > div.first-row > a > span, .sizesList a, .customer-statistics .breakdown .column div, .customer-statistics .breakdown .column .header, .customer-statistics .stats-details .total > span, div.categoryMultiselect > a.toggle > span, div.svSelect > a.toggle > span, .customer-list > div.customer-list-data > div.customer-grid > span, .customer-list-headers a, section.oL div.ordersTableHead > *, section.ordersToolbar sv-radio-switch > div.svRadioSwitchWrapper > div > label > span, section#brandsSection > div.brandsLinksWrapper > a > span.brandTooltip > span, ul.list-block li a, a.accordion, .cleanList > .row > div, #vMedia div#sharedFiles div.fileItem > div.description > div.filename,
#vMedia #files div.fileItem > div.description > div.filename, #fileDetailsWrapper #fileDetails #fileInfo > h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calculatorLoader, article.calculatorHorizontal section.productsPanel2 > div.loader, .calculator div.calculatorGrid > div.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  background-position: center center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-out;
}
.calculatorLoader.active, article.calculatorHorizontal section.productsPanel2 > div.active.loader, .calculator div.calculatorGrid > div.active.loader {
  opacity: 95%;
  transition-duration: 0ms;
}

.hoverDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.muteBtn, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.prevVideoBtn, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.nextVideoBtn, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.muteBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.muteBtn, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.prevVideoBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.prevVideoBtn, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.nextVideoBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.nextVideoBtn {
  background-color: rgba(79, 79, 79, 0.75);
  background-repeat: no-repeat;
  background-size: 25px 25px;
  background-position: center center;
  border-radius: 50%;
  width: var(--button-size);
  height: var(--button-size);
  padding: 0;
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.muteBtn > i, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.prevVideoBtn > i, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.nextVideoBtn > i, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.muteBtn > i, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.muteBtn > i, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.prevVideoBtn > i, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.prevVideoBtn > i, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.nextVideoBtn > i, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.nextVideoBtn > i {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f2f2f2;
  font-size: 1rem;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.muteBtn > i, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.prevVideoBtn > i, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.nextVideoBtn > i, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.muteBtn > i, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.muteBtn > i, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.prevVideoBtn > i, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.prevVideoBtn > i, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.nextVideoBtn > i, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.nextVideoBtn > i {
    font-size: 1.5rem;
  }
}

#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div, section#brandsSection > h1.brandsIntroH1 > div.videoControls {
  display: grid;
  grid-template-areas: "prevVideoBtn muteBtn nextVideoBtn";
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.muteBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.muteBtn {
  grid-area: muteBtn;
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.prevVideoBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.prevVideoBtn {
  grid-area: prevVideoBtn;
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.nextVideoBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.nextVideoBtn {
  grid-area: nextVideoBtn;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.nextVideoBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.nextVideoBtn {
    justify-self: flex-end;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.prevVideoBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.prevVideoBtn, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.nextVideoBtn, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.nextVideoBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.prevVideoBtn > i, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.prevVideoBtn > i, #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div > button.nextVideoBtn > i, section#brandsSection > h1.brandsIntroH1 > div.videoControls > button.nextVideoBtn > i {
  width: fit-content;
}
#header > div.right-nav > div.infoWrapper {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
#header > div.right-nav > div.infoWrapper > a.infoBtn {
  margin-right: 0.25rem;
}
#header > div.right-nav > div.infoWrapper > a.infoBtn > i {
  font-size: 1.25rem;
  display: flex;
  align-content: center;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup {
  background-color: #252525;
  top: calc(50px + 10px);
  right: -10px;
  width: auto;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup div.summaryIcon {
  margin: 0;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup div.summary {
  padding: 0.25rem;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup div.summaryInfo {
  margin-left: 5px;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup div.summaryInfo > div.itemAmount {
  flex-direction: column;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup div.summaryInfo > div.itemAmount > p {
  white-space: nowrap;
  text-align: right;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup div.summaryInfo > div.itemAmount > p:first-child {
  margin: 0;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup div.summaryInfo > div.discountInfo > p {
  display: flex;
  flex-direction: column;
}
#header > div.right-nav > div.infoWrapper > div.infoPopup.infoPopup div.summaryInfo > div.discountInfo > p > span {
  white-space: nowrap;
}

div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter.modalFooter > button > i.icon-union, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter.modalFooter > button > i.icon-union, div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > button > i, div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > a > i {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#brandsSection {
  --brands-4-width: $brands4Width;
  --brand-size-mobile: 130px;
  --brand-size-mobile-2: 160px;
  --brand-size: 200px;
  --brand-margin-mobile: 10px;
  --brand-margin-mobile-2: 15px;
  --brand-margin: 20px;
}

section.debug {
  background: lightgoldenrodyellow;
  border: dashed 3px red;
  color: #000;
  max-height: 45px;
  transition: all 1000ms;
  overflow-y: scroll;
  display: flex;
  flex-direction: row;
}
section.debug.active {
  max-height: 1000px;
}
section.debug > a {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  background: orange;
}
section.debug > a > i {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 40px;
  opacity: 0;
  transition: all 500ms;
}
section.debug > a > i.active {
  opacity: 1;
}
section.debug > a + * {
  max-width: calc(100% - 40px);
}

pre.debug {
  text-align: left;
  font-size: 12px;
}
pre.debug:before, pre.debug:after {
  content: "DEBUG DEBUG DEBUG";
  display: block;
  background: yellow;
  color: red;
  font-weight: bold;
  padding: 5px;
  width: 100%;
  border: dotted 3px red;
  text-align: center;
}
html#production pre.debug {
  display: none;
}

brands-section {
  display: block;
  height: 0;
  margin: 0 0 1rem 0;
}
brands-section.active {
  height: unset;
}
brands-section.hideArrows a.aExpand {
  opacity: 0 !important;
}

section#brandsSection {
  font-family: "latoregular", sans-serif;
}
section#brandsSection > h1.brandsIntroH1 {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 55px;
  width: 100%;
  background: #444444;
  border-radius: 3px;
  margin: 0 auto;
  padding: 1px;
  color: #fff;
  font-size: 1.5rem;
  text-align: left;
  background: none;
  font-weight: bold;
  justify-content: center;
  padding-left: 0.625rem;
}
@media only screen and (min-width: 768px) {
  section#brandsSection > h1.brandsIntroH1.videoControls {
    grid-template-columns: auto auto 50px 1fr auto;
    padding-right: 0.625rem;
  }
}
@media screen and (max-height: 600px) {
  section#brandsSection > h1.brandsIntroH1 {
    justify-content: flex-start;
    max-width: calc(4 * var(--square-size) + 5 * var(--square-margin));
  }
}
@media screen and (max-height: 600px) and (min-width: 650px) {
  section#brandsSection > h1.brandsIntroH1 {
    max-width: calc(5 * var(--square-size) + 6 * var(--square-margin));
  }
}
@media screen and (max-height: 600px) and (min-width: 768px) {
  section#brandsSection > h1.brandsIntroH1 {
    max-width: calc(4 * var(--square-size) + 6 * var(--square-margin));
    margin: 0.5rem auto;
  }
}
@media screen and (max-height: 600px) and (min-width: 800px) {
  section#brandsSection > h1.brandsIntroH1 {
    max-width: calc(5 * var(--square-size) + 5 * var(--square-margin));
  }
}
@media screen and (max-height: 600px) and (min-width: 1024px) {
  section#brandsSection > h1.brandsIntroH1 {
    max-width: calc(4 * var(--square-size) + 5 * var(--square-margin));
  }
}
@media only screen and (min-width: 1110px) {
  section#brandsSection > h1.brandsIntroH1 {
    justify-content: flex-start;
  }
}
section#brandsSection > h1.brandsIntroH1.expanded > a.aExpand > i {
  transform: rotate(90deg);
}
section#brandsSection > h1.brandsIntroH1.marketplaceHeader {
  font-size: 1rem;
}
section#brandsSection > h1.brandsIntroH1 > span.brandName {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
}
section#brandsSection > h1.brandsIntroH1 > span.brandItemsCounter {
  grid-column: 2/span 1;
  grid-row: 1/span 1;
}
section#brandsSection > h1.brandsIntroH1 > a.aExpand {
  grid-column: 3/span 1;
  grid-row: 1/span 1;
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  position: relative;
  z-index: 5;
  opacity: 1;
  color: #999999;
}
section#brandsSection > h1.brandsIntroH1 > a.aExpand > span.expandText {
  margin: 0.5rem;
  font-size: 1rem;
  text-wrap: nowrap;
}
section#brandsSection > h1.brandsIntroH1 > a.aExpand > i {
  display: flex;
  width: auto;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  transform: rotate(0deg);
  transition: all 300ms;
  pointer-events: none;
}
section#brandsSection > h1.brandsIntroH1 > div.videoControls {
  display: none;
  grid-column: 5/span 1;
}
@media only screen and (min-width: 768px) {
  section#brandsSection > h1.brandsIntroH1 > div.videoControls {
    display: grid;
  }
}
section#brandsSection > h1.brandsIntroH1 > div.videoControls.singleAdvertisement {
  grid-template-columns: 1fr;
}
section#brandsSection > div.brandsLinksWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  padding: 0;
  max-height: calc(var(--square-margin) * 2 + var(--square-size));
  overflow: hidden;
}
#brandsWrapper.lessThan4 #brands > div {
  justify-content: center;
}
@media only screen and (min-width: 961px) {
  #brandsWrapper.lessThan4 #brands > div a.emptyBrand {
    display: none !important;
  }
}

#brandsView #brandsWrapper.scroll > #brands > div {
  align-content: flex-start;
}

section#brandsSection > div.brandsLinksWrapper.expanded {
  max-height: calc(var(--square-size) * (var(--squares-number) / 2 + 1));
}
section#brandsSection > div.brandsLinksWrapper.onlyMB {
  max-height: unset;
}
section#brandsSection > div.brandsLinksWrapper > a {
  position: relative;
  display: block;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: var(--square-size);
  height: var(--square-size);
  margin: var(--square-margin);
  transition: all 200ms;
  overflow: hidden;
  text-decoration: none;
  --viewport-multiplier: 1;
}
@media screen and (max-width: 768px) {
  section#brandsSection > div.brandsLinksWrapper > a {
    --viewport-multiplier: 0.5;
  }
}
section#brandsSection > div.brandsLinksWrapper > a:focus-visible {
  box-shadow: 0 0 0 5px #000, 0 0 0 7px #000;
}
html.safari section#brandsSection > div.brandsLinksWrapper > a:focus:not(:active) {
  box-shadow: 0 0 0 5px #000, 0 0 0 7px #000;
}

section#brandsSection > div.brandsLinksWrapper > a.rejected {
  filter: grayscale(1);
  cursor: not-allowed;
}
section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature {
  border: 5px solid #fff;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 100%;
  --missing-logo-name-size: 1.5rem;
}
section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature.status-error > .missing-logo-small-text, section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature.status-error > .missing-logo-normal-text, section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature.status-error > .missing-logo-big-text {
  display: flex;
}
section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature > .missing-logo-big-text, section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature > .missing-logo-normal-text, section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature > .missing-logo-small-text {
  display: none;
  text-overflow: ellipsis;
  background: none;
  font-family: "latoregular", sans-serif;
  color: #222222;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}
section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature > .missing-logo-small-text {
  font-size: calc(var(--missing-logo-name-size) * 0.5 * var(--viewport-multiplier));
}
section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature > .missing-logo-normal-text {
  font-size: calc(var(--missing-logo-name-size) * 1 * var(--viewport-multiplier));
}
section#brandsSection > div.brandsLinksWrapper > a div.brandMiniature > .missing-logo-big-text {
  font-size: calc(var(--missing-logo-name-size) * 1.5 * var(--viewport-multiplier));
}
section#brandsSection > div.brandsLinksWrapper > a.emptyBrand {
  height: 0;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  box-shadow: none;
  visibility: hidden;
}
section#brandsSection > div.brandsLinksWrapper > a.emptyBrand:last-child {
  padding-bottom: 10px;
}
section#brandsSection > div.brandsLinksWrapper > a > span.debugBrandId {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  height: 25px;
  width: 45px;
  line-height: 25px;
  background-color: #79B14C;
  color: #fff;
  text-align: center;
  font-size: 11px;
}
section#brandsSection > div.brandsLinksWrapper > a > span.brandTooltip {
  opacity: 0;
  position: absolute;
  bottom: 5px;
  left: 5px;
  min-width: calc(100% - 10px);
  min-height: calc(2em + 20px);
  width: calc(100% - 10px);
  background: rgba(37, 37, 37, 0.9);
  color: #f2f2f2;
  transform: translateY(100%);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: calc(0.75rem * var(--viewport-multiplier));
  transition: all 300ms;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
section#brandsSection > div.brandsLinksWrapper > a > span.brandTooltip > span {
  display: block;
}
section#brandsSection > div.brandsLinksWrapper > a > span.brandTooltip > span.name, section#brandsSection > div.brandsLinksWrapper > a > span.brandTooltip > span.rejectedOnLabel {
  font-size: calc(0.875rem * var(--viewport-multiplier));
}
section#brandsSection > div.brandsLinksWrapper > a > span.brandTooltip > span.brandMarketplaceStatus.unavailable {
  display: none;
}
section#brandsSection > div.brandsLinksWrapper > a > span.brandTooltip > span.brandMarketplaceStatus.cancelled {
  display: none;
}
section#brandsSection > div.brandsLinksWrapper > a:hover > span.brandTooltip {
  opacity: 1;
  transform: translateY(0);
}

.light-search > form.search {
  grid-template-columns: auto 1fr 50px 50px;
  grid-gap: 0;
}
@media only screen and (min-width: 768px) {
  .light-search > form.search {
    grid-template-columns: 50px auto 50px 50px;
    grid-gap: 0.5rem;
  }
}
.light-search > form.search > input {
  -webkit-appearance: none;
  background-color: #e0e0e0;
  color: #000;
  grid-column: 2/span 3;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 34px;
}
@media only screen and (min-width: 768px) {
  .light-search > form.search > input {
    padding-left: 10px;
    grid-column: 1/span 3;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    box-shadow: inset 0 0 2px 0 #474747;
    padding-right: 34px;
  }
}
.light-search > form.search > button[type=reset] {
  border-radius: 50%;
  background-color: #828282;
  height: 16px;
  width: 16px;
  grid-column: 4/span 1;
}
@media only screen and (min-width: 768px) {
  .light-search > form.search > button[type=reset] {
    grid-column: 3/span 1;
  }
}
.light-search > form.search > button[type=reset] > i {
  color: #e0e0e0;
  font-size: 0.625rem;
}
.light-search > form.search > button[type=submit] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  grid-column: 1/span 1;
  background-color: #e0e0e0;
  padding: 0 0.5rem;
}
@media only screen and (min-width: 768px) {
  .light-search > form.search > button[type=submit] {
    grid-column: 4/span 1;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #009d4e;
  }
}
.light-search > form.search > button[type=submit] > i {
  color: #000;
  font-size: 1.25rem;
}
@media only screen and (min-width: 768px) {
  .light-search > form.search > button[type=submit] > i {
    color: #fff;
  }
}
.light-search > form.search > button[type=submit]:disabled {
  opacity: 1;
  background-color: #e0e0e0;
}
@media only screen and (min-width: 768px) {
  .light-search > form.search > button[type=submit]:disabled {
    opacity: 1;
    background-color: #333333;
  }
}
.light-search > form.search > button[type=submit]:disabled > i {
  opacity: 0.3;
}

form.search {
  display: grid;
  grid-template-columns: 50px auto 50px 50px;
  grid-template-rows: 1fr;
  grid-gap: 15px;
  width: 100%;
  overflow: hidden;
}
@media only screen and (min-width: 1024px) {
  form.search {
    max-width: 300px;
  }
}
form.search > i, form.search > input, form.search > button[type=submit] {
  transition: all 200ms;
}
form.search > i, form.search > a {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #666666;
  transition: all 200ms;
  z-index: 2;
}
form.search > a {
  grid-column: 3/span 1;
  visibility: hidden;
  opacity: 0;
  transition: 300ms ease-in-out;
}
form.search > a.active {
  visibility: visible;
  opacity: 1;
  transition: 300ms ease-in-out;
}
form.search > input {
  grid-column: 1/span 3;
  grid-row: 1/span 1;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  padding: 8px 8px 8px 10px;
  background: #333;
  color: #e6e6e6;
  z-index: 1;
  border: none;
  border-radius: 5px;
  box-shadow: inset 0 0 2px 0 #474747;
  font-family: "latoregular", sans-serif;
}
form.search > input::-webkit-search-results-button {
  display: none;
}
form.search > input::placeholder {
  color: #666666;
}
form.search > input:focus-visible {
  box-shadow: none;
  outline: none;
}
form.search > input[type=search]::-webkit-search-decoration, form.search > input[type=search]::-webkit-search-cancel-button, form.search > input[type=search]::-webkit-search-results-button, form.search > input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
form.search > button[type=reset] {
  grid-column: 3/span 1;
  grid-row: 1/span 1;
  z-index: 2;
  align-self: center;
  justify-self: center;
  margin-left: 7px;
  border: none;
  cursor: pointer;
}
form.search > button[type=submit] {
  grid-column: 4/span 1;
  grid-row: 1/span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #009d4e;
  cursor: pointer;
  outline: 0;
  font-size: 1.5rem;
  border-radius: 5px;
  border: none;
}
form.search > button[type=submit]:disabled {
  background-color: #333;
  cursor: initial;
  opacity: 0.2;
}
form.search > button[type=submit] > i {
  display: flex;
  color: #fff;
}

section.packages-list-component section.packagesToolbar, .search-with-sort-toolbar, delivery-search #deliverySearchHeader, customers-search > div.customersSearchHeader, section.ordersToolbar, div.agentsSearchHeader {
  background: #292929;
  color: #f8f8f8;
  padding: 10px;
  z-index: 2;
}

.search-with-sort-toolbar {
  font-family: "latoregular", sans-serif;
  grid-area: toolbar;
  position: relative;
  background: #2f2f2f;
  display: grid;
  grid-template-areas: "search search" "sort sortDesc";
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-column-gap: 5px;
  row-gap: 15px;
  align-items: center;
  padding: 10px 0;
  z-index: unset;
}
@media only screen and (min-width: 414px) {
  .search-with-sort-toolbar {
    grid-template-areas: "search sort sortDesc";
    grid-template-columns: 5fr auto auto;
    grid-template-rows: auto;
  }
}
@media only screen and (min-width: 768px) {
  .search-with-sort-toolbar {
    grid-template-columns: 5fr 2fr auto auto;
    grid-template-areas: ". search sort sortDesc";
    padding: 0 20px 0 0;
  }
}
.search-with-sort-toolbar sv-search {
  grid-area: search;
}
.search-with-sort-toolbar button.sortBy,
.search-with-sort-toolbar button.sortByDesc {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: #bdbdbd;
  padding: 0;
  cursor: pointer;
}
.search-with-sort-toolbar button.sortBy.active,
.search-with-sort-toolbar button.sortByDesc.active {
  z-index: 10000;
}
.search-with-sort-toolbar button.sortBy {
  height: 100%;
  grid-area: sort;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8px;
}
@media only screen and (min-width: 414px) {
  .search-with-sort-toolbar button.sortBy {
    justify-content: flex-end;
    padding-left: 0;
  }
}
.search-with-sort-toolbar button.sortBy > span {
  white-space: nowrap;
}
.search-with-sort-toolbar button.sortByDesc {
  grid-area: sortDesc;
  padding-right: 15px;
}

change-password .modalHeader.modalHeader.modalHeader {
  background: #353535;
}
change-password .modalMain.modalMain {
  padding: 0;
}
change-password .modalFooter.modalFooter.modalFooter {
  background: #353535;
}
change-password div.personalSettingsWrapper div.passwordInputs {
  grid-template-columns: 1fr 2fr 40px;
}
change-password div.personalSettingsWrapper div.passwordInputs > p.error {
  grid-column: 2/span 1;
  margin: 0;
  color: #eb5757;
  transform: translateY(-1em);
  font-size: 0.875rem;
}
change-password div.personalSettingsWrapper div.passwordInputs > button.switch {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 3/span 1;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #a9a9a9;
  font-size: 1.5rem;
  background: transparent;
  border: 0;
}
change-password div.personalSettingsWrapper div.passwordInputs > password-validation-requirements {
  grid-column: 2/span 1;
}
change-password div.personalSettingsWrapper div.passwordInputs > button[type=submit] {
  grid-column: 2/span 1;
  margin: 0 auto 0 0;
  border-radius: 5px;
  cursor: pointer;
  background-color: #353535;
  color: #F2F2F2;
  transition: all 200ms;
}
change-password div.personalSettingsWrapper div.passwordInputs > button[type=submit]:disabled {
  opacity: 0.3;
  pointer-events: none;
}

@keyframes dotsPulse1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dotsPulse2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes dotsPulse3 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
:host > span {
  font-weight: bold;
}
:host > span:nth-child(1) {
  animation: dotsPulse1 2000ms infinite;
}
:host > span:nth-child(2) {
  animation: dotsPulse2 2000ms infinite;
}
:host > span:nth-child(3) {
  animation: dotsPulse3 2000ms infinite;
}

loading-dots {
  display: inline;
}
loading-dots > ng-container {
  display: contents;
}
loading-dots > ng-container > span {
  font-weight: bold;
}
loading-dots > ng-container > span:nth-child(1) {
  animation: dotsPulse1 2000ms infinite;
}
loading-dots > ng-container > span:nth-child(2) {
  animation: dotsPulse2 2000ms infinite;
}
loading-dots > ng-container > span:nth-child(3) {
  animation: dotsPulse3 2000ms infinite;
}

section.lots-pyramid {
  position: fixed;
  z-index: 100;
  bottom: 60px;
  right: 5px;
  max-width: 750px;
  width: 100%;
  border-radius: 0 0 7px 7px;
  border: solid 2px #333;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  section.lots-pyramid {
    width: calc(100% - 10px);
  }
}
@media only screen and (min-width: 568px) {
  section.lots-pyramid {
    bottom: 70px;
    right: 20px;
    width: calc(100% - 40px);
  }
}
section.lots-pyramid > div.componentHeader {
  position: relative;
  background: #333;
  height: 50px;
}
section.lots-pyramid > div.componentHeader > h1 {
  margin: 0;
  font-size: 1rem;
  line-height: 50px;
  color: #f8f8f8;
  text-align: center;
}
section.lots-pyramid > div.componentHeader > a.button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  margin: 0;
  position: absolute;
  right: 10px;
  top: 50%;
  width: auto;
  border: solid 1px #f8f8f8;
  border-radius: 3px;
  transform: translateY(-50%);
  line-height: 30px;
  font-size: 0.875rem;
  color: #f8f8f8;
}
section.lots-pyramid > div.componentHeader > a.button.cancel {
  left: 10px;
  right: auto;
}
section.lots-pyramid > div.componentBody {
  background: #f8f8f8;
  display: flex;
  justify-content: space-between;
}
section.lots-pyramid > div.componentBody > div.lotsSymbolWrapper > a {
  width: 70px;
  height: 27px;
  display: block;
  border: solid 1px #333;
  margin: 50px -10px 50px -10px;
  padding: 3px 10px;
  border-radius: 3px;
  color: #333;
  transform: rotate(-90deg);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (min-width: 568px) {
  section.lots-pyramid > div.componentBody > div.lotsSymbolWrapper > a {
    width: auto;
    height: auto;
    transform: none;
    margin: 10px 20px 0 20px;
  }
}
@media only screen and (min-width: 568px) {
  section.lots-pyramid > div.componentBody > div.lotsSymbolWrapper > a:first-child {
    margin: 40px 20px 0 20px;
  }
}
section.lots-pyramid > div.componentBody > div.selectLotGroup {
  min-width: 160px;
  max-width: 210px;
  max-height: 350px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  margin-bottom: 10px;
}
section.lots-pyramid > div.componentBody > div.selectLotGroup::-webkit-scrollbar {
  width: 5px;
}
section.lots-pyramid > div.componentBody > div.selectLotGroup::-webkit-scrollbar-thumb {
  background-color: #666666;
}
section.lots-pyramid > div.componentBody > div.selectLotGroup a {
  display: flex;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #818181;
  color: #555;
  background: #fff;
  padding: 5px;
  margin: 10px;
}
section.lots-pyramid > div.componentBody > div.selectLotGroup a.active {
  background-color: #484848;
  color: #fff;
  border-color: #222;
}
section.lots-pyramid > div.componentBody > div.selectLotGroup a > span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper {
  padding-left: 10px;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper::-webkit-scrollbar {
  height: 5px;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper::-webkit-scrollbar-thumb {
  background-color: #666666;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div {
  display: grid;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.grid {
  display: contents;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.grid > div {
  grid-column: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row1 {
  grid-row: 1/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row2 {
  grid-row: 2/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row3 {
  grid-row: 3/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row4 {
  grid-row: 4/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row5 {
  grid-row: 5/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row6 {
  grid-row: 6/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row7 {
  grid-row: 7/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row8 {
  grid-row: 8/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row9 {
  grid-row: 9/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row10 {
  grid-row: 10/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row11 {
  grid-row: 11/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row12 {
  grid-row: 12/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row13 {
  grid-row: 13/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row14 {
  grid-row: 14/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row15 {
  grid-row: 15/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row16 {
  grid-row: 16/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row17 {
  grid-row: 17/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row18 {
  grid-row: 18/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row19 {
  grid-row: 19/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row20 {
  grid-row: 20/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row21 {
  grid-row: 21/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row22 {
  grid-row: 22/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row23 {
  grid-row: 23/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row24 {
  grid-row: 24/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row25 {
  grid-row: 25/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row26 {
  grid-row: 26/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row27 {
  grid-row: 27/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row28 {
  grid-row: 28/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row29 {
  grid-row: 29/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.row30 {
  grid-row: 30/span 1;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.qq2 {
  background: red !important;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.td,
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.th {
  padding: 10px;
  border-bottom: solid 1px #333;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.td {
  text-align: center;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.td.sizeAmount {
  font-weight: bold;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.td.firstCol {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  min-width: 40px;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.th {
  text-transform: uppercase;
  font-weight: bold;
}
section.lots-pyramid > div.componentBody > div.lotsTableWrapper > div div.lastRow {
  margin-bottom: 15px;
}
section.lots-pyramid > div.componentBody > div.lotsZipWrapper {
  width: 50px;
  height: 100%;
  flex-shrink: 0;
}
section.lots-pyramid > div.componentBody > div.loader {
  position: absolute;
  width: 100%;
  height: 100%;
  max-height: 348px;
  margin: 0;
  background-position: center center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-out;
}
section.lots-pyramid > div.componentBody > div.loader.active {
  opacity: 95%;
  transition-duration: 0ms;
}
section.lots-pyramid .secondStock {
  margin-bottom: 5px;
}

section.num-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
}
section.num-selector.n-1 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-2 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-2 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-3 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-3 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-3 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-4 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-4 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-4 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-4 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-5 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-5 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-5 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-5 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-5 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-6 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-6 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-6 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-6 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-6 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-7 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-7 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-7 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-7 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-7 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-8 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-8 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-8 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-8 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-8 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-9 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-9 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-9 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-9 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-9 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-10 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-10 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-10 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-10 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-10 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-11 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-11 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-11 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-11 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-11 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-12 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-12 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-12 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-12 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-12 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-13 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-13 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-13 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-13 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-13 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-14 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-14 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-14 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-14 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-14 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-15 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-15 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-15 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-15 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-15 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-16 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-16 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-16 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-16 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-16 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-17 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-17 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-17 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-17 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-17 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-18 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-18 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-18 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-18 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-18 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-19 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-19 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-19 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-19 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-19 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-20 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-20 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-20 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-20 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-20 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-21 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-21 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-21 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-21 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-21 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-22 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-22 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-22 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-22 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-22 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-23 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-23 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-23 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-23 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-23 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-24 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-24 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-24 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-24 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-24 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-25 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-25 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-25 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-25 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-25 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-26 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-26 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-26 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-26 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-26 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-27 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-27 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-27 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-27 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-27 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-28 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-28 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-28 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-28 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-28 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-29 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-29 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-29 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-29 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-29 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-30 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-30 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-30 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-30 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-30 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-31 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-31 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-31 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-31 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-31 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-32 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-32 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-32 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-32 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-32 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-33 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-33 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-33 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-33 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-33 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-34 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-34 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-34 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-34 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-34 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-35 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-35 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-35 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-35 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-35 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-36 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-36 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-36 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-36 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-36 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-37 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-37 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-37 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-37 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-37 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-38 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-38 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-38 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-38 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-38 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-39 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-39 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-39 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-39 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-39 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-40 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-40 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-40 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-40 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-40 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-41 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-41 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-41 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-41 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-41 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-42 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-42 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-42 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-42 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-42 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-43 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-43 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-43 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-43 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-43 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-44 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-44 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-44 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-44 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-44 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-45 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-45 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-45 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-45 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-45 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-46 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-46 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-46 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-46 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-46 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-47 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-47 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-47 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-47 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-47 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-48 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-48 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-48 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-48 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-48 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-49 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-49 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-49 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-49 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-49 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-50 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-50 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-50 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-50 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-50 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-51 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-51 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-51 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-51 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-51 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-52 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-52 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-52 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-52 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-52 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-53 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-53 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-53 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-53 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-53 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-54 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-54 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-54 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-54 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-54 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-55 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-55 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-55 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-55 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-55 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-56 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-56 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-56 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-56 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-56 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-57 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-57 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-57 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-57 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-57 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-58 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-58 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-58 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-58 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-58 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-59 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-59 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-59 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-59 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-59 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-60 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-60 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-60 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-60 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-60 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-61 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-61 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-61 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-61 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-61 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-62 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-62 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-62 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-62 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-62 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-63 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-63 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-63 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-63 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-63 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-64 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-64 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-64 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-64 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-64 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-65 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-65 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-65 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-65 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-65 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-66 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-66 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-66 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-66 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-66 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-67 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-67 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-67 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-67 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-67 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-68 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-68 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-68 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-68 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-68 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-69 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-69 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-69 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-69 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-69 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-70 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-70 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-70 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-70 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-70 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-71 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-71 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-71 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-71 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-71 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-72 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-72 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-72 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-72 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-72 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-73 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-73 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-73 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-73 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-73 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-74 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-74 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-74 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-74 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-74 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-75 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-75 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-75 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-75 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-75 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-76 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-76 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-76 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-76 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-76 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-77 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-77 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-77 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-77 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-77 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-78 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-78 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-78 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-78 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-78 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-79 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-79 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-79 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-79 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-79 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-80 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-80 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-80 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-80 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-80 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-81 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-81 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-81 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-81 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-81 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-82 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-82 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-82 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-82 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-82 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-83 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-83 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-83 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-83 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-83 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-84 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-84 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-84 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-84 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-84 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-85 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-85 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-85 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-85 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-85 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-86 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-86 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-86 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-86 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-86 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-87 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-87 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-87 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-87 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-87 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-88 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-88 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-88 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-88 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-88 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-89 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-89 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-89 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-89 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-89 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-90 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-90 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-90 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-90 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-90 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-91 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-91 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-91 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-91 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-91 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-92 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-92 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-92 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-92 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-92 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-93 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-93 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-93 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-93 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-93 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-94 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-94 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-94 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-94 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-94 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-95 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-95 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-95 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-95 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-95 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-96 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-96 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-96 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-96 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-96 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-97 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-97 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-97 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-97 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-97 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-98 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-98 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-98 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-98 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-98 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-99 > div > a:nth-child(1) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-99 > div > a:nth-child(2) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-99 > div > a:nth-child(3) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-99 > div > a:nth-child(4) {
  background: #666666;
  color: #fff;
}
section.num-selector.n-99 > div > a:nth-child(5) {
  background: #666666;
  color: #fff;
}
section.num-selector > label > input[type=number] {
  width: 32px;
  height: 32px;
  padding: 2px 2px;
  text-align: center;
  margin: 0 0 2px 0;
  -moz-appearance: textfield;
}
section.num-selector > label > input[type=number]::-webkit-inner-spin-button, section.num-selector > label > input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
section.num-selector > div.stock {
  height: 32px;
  line-height: 32px;
}
section.num-selector > div > a, section.num-selector > button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  color: #333;
}
section.num-selector > div > a {
  border-radius: 3px;
  border: 1px solid #333;
  margin-bottom: 2px;
}
section.num-selector > button {
  -webkit-appearance: none;
  background: none;
}
section.num-selector > button:disabled {
  color: transparent;
}
orders-list {
  display: block;
}

section.orders-list-component {
  height: calc(100dvh - 50px - 55px);
  display: flex;
  flex-direction: column;
}
html.safari section.orders-list-component {
  height: calc(100dvh - 50px - 55px);
}

section.ordersToolbar {
  --label-height: 30px;
  --toolbar-padding: 10px;
  position: relative;
  padding: var(--toolbar-padding);
}
section.ordersToolbar.filtersActive > div.filtersWrapper {
  display: grid;
}
section.ordersToolbar.filtersActive > div.filtersLabel > button > i {
  transform: rotate(180deg);
}
@media only screen and (min-width: 1024px) {
  section.ordersToolbar > div.filtersWrapper:has(.orderTypeFilter) {
    grid-template-areas: "filtersLabel radioSwitch filters1 filters2 clearFilters . search";
  }
}
section.ordersToolbar > div.filtersLabel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--label-height);
}
section.ordersToolbar > div.filtersLabel > button {
  background-color: transparent;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  color: #f2f2f2;
}
@media only screen and (min-width: 768px) {
  section.ordersToolbar > div.filtersLabel > button {
    display: none;
  }
}
section.ordersToolbar > div.filtersLabel > button > i {
  display: flex;
  align-items: center;
}
section.ordersToolbar > div.filtersWrapper {
  grid-template-areas: "radioSwitch clearFilters" "search sort" "filters1 filters1" "filters2 filters2";
  grid-template-columns: calc(50% - var(--toolbar-padding) / 2) calc(50% - var(--toolbar-padding) / 2);
  grid-template-rows: auto auto;
  grid-gap: 0.5rem;
  align-items: center;
  position: absolute;
  background-color: #292929;
  width: 100%;
  left: 0;
  top: calc(var(--label-height) + 2 * var(--toolbar-padding));
  padding: 0 var(--toolbar-padding) var(--toolbar-padding) var(--toolbar-padding);
  display: none;
}
@media only screen and (min-width: 414px) {
  section.ordersToolbar > div.filtersWrapper {
    grid-template-areas: "radioSwitch radioSwitch radioSwitch clearFilters" "search search search sort" "filters1 filters1 filters2 filters2";
    grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}
@media only screen and (min-width: 568px) {
  section.ordersToolbar > div.filtersWrapper {
    grid-template-areas: "radioSwitch search sort" "filters1 filters2 clearFilters";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }
}
@media only screen and (min-width: 768px) {
  section.ordersToolbar > div.filtersWrapper {
    grid-template-areas: "radioSwitch radioSwitch search clearFilters" "filters1 filters1 filters2 filters2";
    grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) 20px;
    position: static;
    display: grid;
    padding: 0;
  }
}
@media only screen and (min-width: 1024px) {
  section.ordersToolbar > div.filtersWrapper {
    grid-template-areas: "filtersLabel filtersLabel filters1 filters2 clearFilters . search";
    grid-template-columns: auto auto 2fr 2fr 20px 2fr auto;
    grid-template-rows: 1fr;
  }
}
section.ordersToolbar h1 {
  margin: 0;
  grid-area: orders;
  font-size: 2rem;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  section.ordersToolbar h1 {
    text-align: left;
    justify-self: flex-start;
  }
}
section.ordersToolbar h1 > span {
  font-size: 0.875rem;
  color: #c6c6c6;
}
section.ordersToolbar sv-radio-switch {
  width: fit-content;
  max-width: 280px;
  overflow: hidden;
}
section.ordersToolbar sv-radio-switch > div.svRadioSwitchWrapper {
  justify-content: center;
}
section.ordersToolbar sv-radio-switch > div.svRadioSwitchWrapper > div {
  overflow: hidden;
}
section.ordersToolbar sv-radio-switch > div.svRadioSwitchWrapper > div > input {
  width: 0;
}
section.ordersToolbar sv-radio-switch > div.svRadioSwitchWrapper > div > label {
  overflow: hidden;
  box-shadow: none;
}
section.ordersToolbar sv-radio-switch > div.svRadioSwitchWrapper > div > label > span {
  display: block;
}
section.ordersToolbar sv-search.search {
  width: 100%;
  grid-area: search;
  display: flex;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  section.ordersToolbar div.sort-wrapper {
    display: none;
  }
}
section.ordersToolbar div.sort-wrapper > sv-sorting-tooltip > section.svSortingTooltip {
  top: 40px;
}
section.ordersToolbar button.toggleFilters {
  grid-area: button;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #c6c6c6;
  background: transparent;
  color: #c6c6c6;
  height: 35px;
  margin: 0;
  width: 80%;
  padding: 5px;
  overflow: hidden;
  text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
  section.ordersToolbar button.toggleFilters {
    margin: auto 0 auto auto;
    width: calc(100% - 30px);
  }
}
section.ordersToolbar button.toggleFilters > span {
  margin-right: 10px;
}
section.ordersToolbar button.toggleFilters > i {
  transform: translateY(-3px) scale(1.5);
}
section.ordersToolbar button.toggleFilters > i.icon-sort-asc {
  transform: translateY(8px) scale(1.5);
}
section.ordersToolbar sv-select.filters1,
section.ordersToolbar sv-select.filters2 {
  width: 100%;
  font-size: 0.875rem;
  --sv-select-height: 32px;
  height: var(--sv-select-height);
  overflow-y: visible;
}
section.ordersToolbar sv-select.filters1 {
  grid-area: filters1;
}
section.ordersToolbar sv-select.filters2 {
  grid-area: filters2;
}
section.ordersToolbar a.clearFilters {
  grid-area: clearFilters;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: normal !important;
  justify-self: flex-end;
  font-size: 0.75em;
  border-radius: 50%;
  border: 1px solid #c6c6c6;
  color: #c6c6c6;
}
section.ordersToolbar a.clearFilters > i:before {
  display: block;
}
section.ordersToolbar a.filterBtn {
  display: inline-flex;
  border-radius: 7px;
  color: #f8f8f8;
  min-width: 70px;
  padding: 5px;
  justify-content: center;
  margin: 0 5px;
}
section.ordersToolbar a.filterBtn.active {
  background: #f8f8f8;
  color: #333;
}

section.oL {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  section.oL {
    padding: 0 5px;
  }
}
section.oL a {
  color: #333;
}
section.oL div.ordersAgentInformation {
  border: 2px solid #999999;
  border-radius: 5px;
  margin: 2px;
  padding: 0 2px;
  text-align: center;
}
@media only screen and (min-width: 414px) {
  section.oL div.ordersAgentInformation {
    padding: 5px;
    margin: 10px 5px;
  }
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersAgentInformation {
    padding: 10px 5px;
  }
}
section.oL div.ordersAgentInformation > h2 {
  font-size: 0.875rem;
  margin: 0;
}
@media only screen and (min-width: 414px) {
  section.oL div.ordersAgentInformation > h2 {
    font-size: 1rem;
    margin: 0 0 10px 0;
  }
}
section.oL div.ordersAgentInformation > span {
  font-size: 0.75rem;
  line-height: 1.25em;
  display: block;
}
@media only screen and (min-width: 414px) {
  section.oL div.ordersAgentInformation > span {
    font-size: 0.875rem;
    line-height: 1.5em;
  }
}
section.oL div.ordersTableHead > a > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
section.oL > div.ordersTableBodyWrapper {
  flex-grow: 1;
}
section.oL div.ordersTableHead,
section.oL div.ordersTableBody {
  width: 100%;
  display: grid;
  grid-template-areas: "select name customer status actions" "select amount updated-at download actions";
  grid-template-columns: 1.5fr 3fr 4fr 30px 20px;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
  padding: 5px 0;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableHead,
  section.oL div.ordersTableBody {
    grid-template-areas: "select name customer amount status updated-at download actions";
    grid-template-columns: 1.5fr 3fr 4fr 2fr 1fr 3fr 30px 20px;
    grid-template-rows: 1fr;
    grid-gap: 2px;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead,
  section.oL div.ordersTableBody {
    grid-template-areas: "select name customer deliveryAddress agent amount status updated-at download actions";
    grid-template-columns: 1.5fr 2fr 4fr 3fr 2fr 2fr 2fr 2fr 120px 40px;
    grid-gap: 5px;
  }
}
@media only screen and (min-width: 1366px) {
  section.oL div.ordersTableHead,
  section.oL div.ordersTableBody {
    grid-template-columns: 1.5fr 2fr 5fr 5fr 3fr 2fr 2fr 2fr 120px 40px;
  }
}
section.oL div.ordersTableHead.hasTarget,
section.oL div.ordersTableBody.hasTarget {
  grid-template-areas: "select name customer target status actions" "select amount updated-at target download actions";
  grid-template-columns: 1.5fr 3fr 4fr 2fr 30px 20px;
}
@media only screen and (min-width: 414px) {
  section.oL div.ordersTableHead.hasTarget,
  section.oL div.ordersTableBody.hasTarget {
    grid-template-areas: "select name customer amount target status updated-at download actions";
    grid-template-columns: 1.5fr 3fr 4fr 2fr 2fr 1fr 3fr 30px 20px;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead.hasTarget,
  section.oL div.ordersTableBody.hasTarget {
    grid-template-areas: "select name customer deliveryAddress agent amount target status updated-at download actions";
    grid-template-columns: 1.5fr 2fr 3fr 4fr 2fr 2fr 2fr 2fr 2fr 120px 40px;
  }
}
@media only screen and (min-width: 1366px) {
  section.oL div.ordersTableHead.hasTarget,
  section.oL div.ordersTableBody.hasTarget {
    grid-template-columns: 1.5fr 2fr 5fr 5fr 2fr 2fr 2fr 2fr 2fr 120px 40px;
  }
}
section.oL div.ordersTableHead > .select,
section.oL div.ordersTableBody > .select {
  grid-area: select;
}
section.oL div.ordersTableHead > .name,
section.oL div.ordersTableBody > .name {
  grid-area: name;
}
section.oL div.ordersTableHead > .customer,
section.oL div.ordersTableBody > .customer {
  grid-area: customer;
}
section.oL div.ordersTableHead > .agent,
section.oL div.ordersTableBody > .agent {
  grid-area: agent;
}
section.oL div.ordersTableHead > .amount,
section.oL div.ordersTableBody > .amount {
  grid-area: amount;
}
section.oL div.ordersTableHead > .target,
section.oL div.ordersTableBody > .target {
  grid-area: target;
}
section.oL div.ordersTableHead > .items,
section.oL div.ordersTableBody > .items {
  grid-area: items;
}
section.oL div.ordersTableHead > .status,
section.oL div.ordersTableBody > .status {
  grid-area: status;
}
section.oL div.ordersTableHead > .updated-at,
section.oL div.ordersTableBody > .updated-at {
  grid-area: updated-at;
}
section.oL div.ordersTableHead > .download,
section.oL div.ordersTableBody > .download {
  grid-area: download;
}
section.oL div.ordersTableHead > .actions,
section.oL div.ordersTableBody > .actions {
  grid-area: actions;
}
section.oL div.ordersTableHead > a, section.oL div.ordersTableHead > div,
section.oL div.ordersTableBody > a,
section.oL div.ordersTableBody > div {
  font-size: 0.75rem;
  letter-spacing: -1px;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableHead > a, section.oL div.ordersTableHead > div,
  section.oL div.ordersTableBody > a,
  section.oL div.ordersTableBody > div {
    letter-spacing: 0;
  }
}
@media only screen and (min-width: 1366px) {
  section.oL div.ordersTableHead > a, section.oL div.ordersTableHead > div,
  section.oL div.ordersTableBody > a,
  section.oL div.ordersTableBody > div {
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1600px) {
  section.oL div.ordersTableHead > a, section.oL div.ordersTableHead > div,
  section.oL div.ordersTableBody > a,
  section.oL div.ordersTableBody > div {
    font-size: 1rem;
  }
}
section.oL div.ordersTableHead > .name,
section.oL div.ordersTableBody > .name {
  text-decoration: underline;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > .name,
  section.oL div.ordersTableBody > .name {
    justify-content: flex-start;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > .customer,
  section.oL div.ordersTableBody > .customer {
    justify-content: flex-start;
  }
}
section.oL div.ordersTableHead > .deliveryAddress.deliveryAddress,
section.oL div.ordersTableBody > .deliveryAddress.deliveryAddress {
  display: none;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > .deliveryAddress.deliveryAddress,
  section.oL div.ordersTableBody > .deliveryAddress.deliveryAddress {
    display: block;
  }
}
section.oL div.ordersTableHead > .agent.agent,
section.oL div.ordersTableBody > .agent.agent {
  overflow-x: hidden;
  display: none;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > .agent.agent,
  section.oL div.ordersTableBody > .agent.agent {
    justify-content: flex-end;
    display: flex;
  }
}
section.oL div.ordersTableHead > .amount.amount,
section.oL div.ordersTableBody > .amount.amount {
  text-align: right;
  justify-content: flex-end;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > .amount.amount,
  section.oL div.ordersTableBody > .amount.amount {
    writing-mode: unset;
  }
}
section.oL div.ordersTableHead > .target,
section.oL div.ordersTableBody > .target {
  text-align: right;
  justify-content: flex-start;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > .target,
  section.oL div.ordersTableBody > .target {
    justify-content: center;
  }
}
section.oL div.ordersTableHead > .items.items,
section.oL div.ordersTableBody > .items.items {
  text-align: right;
  justify-content: flex-start;
  display: none;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > .items.items,
  section.oL div.ordersTableBody > .items.items {
    justify-content: flex-end;
    display: flex;
  }
}
section.oL div.ordersTableHead > a.updated-at.updated-at,
section.oL div.ordersTableBody > a.updated-at.updated-at {
  text-align: right;
  justify-content: flex-start;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > a.updated-at.updated-at,
  section.oL div.ordersTableBody > a.updated-at.updated-at {
    justify-content: flex-end;
  }
}
section.oL div.ordersTableHead > a.status,
section.oL div.ordersTableBody > a.status {
  text-align: right;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > a.status,
  section.oL div.ordersTableBody > a.status {
    justify-content: flex-end;
  }
}
section.oL div.ordersTableHead {
  text-transform: uppercase;
  color: #666666;
  padding: 10px 5px;
  font-size: 0.875rem;
  display: none;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableHead {
    display: grid;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead {
    padding: 20px 10px 20px 5px;
  }
}
section.oL div.ordersTableHead > * {
  min-width: 0;
  overflow: hidden;
  word-break: break-all;
}
@media only screen and (min-width: 568px) {
  section.oL div.ordersTableHead > * {
    word-break: unset;
  }
}
section.oL div.ordersTableHead > .active {
  font-weight: bold;
}
section.oL div.ordersTableHead > div.select {
  display: flex;
  align-items: center;
  justify-content: center;
}
section.oL div.ordersTableHead > div.select > span {
  display: none;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > div.select > span {
    display: inline;
  }
}
section.oL div.ordersTableHead > div.deliveryAddress {
  grid-area: deliveryAddress;
}
section.oL div.ordersTableHead > a.agent {
  cursor: default;
}
section.oL div.ordersTableHead > div.amount {
  display: flex;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > div.amount {
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > a.items {
    justify-content: flex-end;
  }
}
section.oL div.ordersTableHead > div.status {
  display: flex;
  justify-content: center;
}
section.oL div.ordersTableHead > a.updated-at {
  justify-content: center;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > a.updated-at {
    justify-content: flex-end;
  }
}
section.oL div.ordersTableHead > div.download {
  text-align: center;
}
section.oL div.ordersTableHead > div.download > span {
  display: none;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableHead > div.download > span {
    display: inline;
  }
}
section.oL div.ordersTableHead a {
  color: #666666;
  display: flex;
  white-space: nowrap;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableHead a {
    justify-content: flex-start;
  }
}
section.oL div.ordersTableHead a > i {
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableHead a > i {
    margin-left: 0.5em;
  }
}
section.oL div.ordersTableHead a > span {
  letter-spacing: -0.0625rem;
  word-spacing: 0.125rem;
  text-transform: capitalize;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableHead a > span {
    letter-spacing: 0;
    text-transform: uppercase;
  }
}
section.oL div.ordersTableHead > div.actionsFakeHeader {
  grid-area: actions;
}
section.oL div.ordersTableBodyWrapper {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
section.oL div.ordersTableBodyWrapper::-webkit-scrollbar {
  width: 5px;
}
section.oL div.ordersTableBodyWrapper::-webkit-scrollbar-thumb {
  background-color: #666666;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody {
  align-items: center;
  border-radius: 5px;
  padding: 5px;
  min-height: 55px;
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody {
    font-size: 0.875rem;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody:nth-child(2n-1) {
  background: #e4e4e4;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody:nth-child(2n-1) > div.actions {
  background: #e4e4e4;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.selected {
  font-weight: bold;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 5px;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select i {
  display: flex;
  justify-content: center;
  font-size: 1rem;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select i {
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select {
    flex-direction: row;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select > a.pseudoCheckbox {
  height: auto;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.select > a.pseudoCheckbox {
    height: 100%;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a {
  justify-content: center;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a {
    justify-content: flex-end;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span {
  display: grid;
  justify-items: center;
  grid-template-areas: "year yearSeparator month monthSeparator day";
}
@media only screen and (min-width: 414px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span {
    grid-template-areas: "year year year" "month monthSeparator day";
  }
}
@media only screen and (min-width: 568px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span {
    grid-template-areas: "year yearSeparator month monthSeparator day";
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span > span.year {
  grid-area: year;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span > span.yearSeparator {
  grid-area: yearSeparator;
  display: inline;
}
@media only screen and (min-width: 568px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span > span.yearSeparator {
    display: inline;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span > span.month {
  grid-area: month;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span > span.monthSeparator {
  grid-area: monthSeparator;
  display: inline;
}
@media only screen and (min-width: 414px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span > span.monthSeparator {
    display: inline;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.updated-at > span > span.day {
  grid-area: day;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.name > a.name {
  word-break: break-all;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.customer {
  text-decoration: underline !important;
  flex-direction: column;
  word-break: break-all;
  justify-content: center;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.customer {
    overflow: visible;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.customer {
    word-break: normal;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.customer > span {
  align-self: flex-start;
  word-break: break-all;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.customer > span {
    word-break: normal;
    width: auto;
    overflow: visible;
    text-overflow: unset;
    white-space: unset;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.customer.redText {
  color: #e03e2e;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.customer > .customerIndex {
  font-weight: bold;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.deliveryAddress {
  grid-area: deliveryAddress;
  text-align: left;
  justify-content: flex-start;
  word-break: break-all;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.deliveryAddress {
    word-break: normal;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.amount {
  word-break: break-all;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.amount {
    align-items: flex-end;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.amount {
    word-break: normal;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.amount > span.amountItems {
  font-size: 0.75em;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.target {
  display: none;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.hasTarget .targetClosed {
  display: flex !important;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.hasTarget > a.target:not(.targetClosed) {
  display: flex;
  justify-content: flex-end;
  background: #fff;
  border: solid 1px #e03e2e;
  border-radius: 5px;
  padding: 5px 10px;
  height: auto;
  color: #e03e2e;
  font-weight: bold;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.hasTarget > a.target:not(.targetClosed) > span:nth-child(1) {
  display: block;
  margin: auto;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.hasTarget > a.target:not(.targetClosed) > span:nth-child(2) {
  display: none;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.hasTarget > a.target:not(.targetClosed).set {
  padding: 5px 5px;
  border: none;
  text-decoration: underline !important;
  background: none;
  font-weight: normal;
  color: #333;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.hasTarget > a.target:not(.targetClosed).set > span:nth-child(1) {
  display: none;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.hasTarget > a.target:not(.targetClosed).set > span:nth-child(2) {
  display: inline-block;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody.hasTarget > a.target:not(.targetClosed) > span {
  display: block;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status {
  justify-content: center;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status {
    justify-content: flex-start;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span {
    flex-direction: row;
    justify-content: flex-start;
    align-items: unset;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span.open > i {
  color: #009d4e;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span.closed > i {
  color: #009d4e;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span.cancelled > i {
  color: #eb5757;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span.closing_request > i {
  color: #000;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span > i {
  display: inline-flex;
  font-size: 0.75rem;
  margin: 0 0.25em;
}
@media only screen and (min-width: 414px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span > i {
    margin: 0 0.5em;
  }
}
@media only screen and (min-width: 768px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span > i {
    margin: 5px 10px 5px 1rem;
  }
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span > i {
    font-size: 1rem;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span > span {
  display: none;
  font-size: 0.75rem;
  margin: auto 0;
  text-decoration: underline;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > .status > span > span {
    display: inline-flex;
    font-size: 0.875rem;
    text-align: left;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.download.download {
  text-align: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0 0.25em;
  max-width: 120px;
  height: 24px;
  border-radius: 5px;
  margin: auto;
  font-size: 0.875rem;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.download.download.downloadNotAvailable {
  opacity: 0.5;
  cursor: not-allowed;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.download.download {
    padding: 0 1em;
    height: 32px;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.download.download > i {
  font-size: 0.75rem;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.download.download > i {
    font-size: 1rem;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.download.download > i:before {
  display: flex;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.download.download > span {
  margin-left: 0.5em;
  display: none;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > a.download.download > span {
    display: inline-block;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions {
  display: grid;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #fff;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover.balloonPopover.balloonPopover {
  display: none;
  top: 0;
  left: -205px;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover.balloonPopover.balloonPopover {
    left: -255px;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover.balloonPopover.balloonPopover::after {
  top: 15px;
  left: 194px;
  border-bottom: none;
  border-top: solid 1px #444444;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions > div.groupActionsPopover.balloonPopover.balloonPopover::after {
    left: 244px;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions.active > div.groupActionsPopover.balloonPopover.balloonPopover {
  display: block;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions i {
  display: flex;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions a.showActions {
  font-size: 1.75rem;
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions a.showActions > i {
  font-size: 1rem;
}
@media only screen and (min-width: 1024px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions a.showActions > i {
    font-size: 1.25rem;
  }
}
@media only screen and (min-width: 1600px) {
  section.oL div.ordersTableBodyWrapper > div.ordersTableBody > div.actions a.showActions > i {
    font-size: 1.5rem;
  }
}
section.oL div.ordersTableBodyWrapper > div.ordersTableBody a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

div.contextActions {
  --toolbar-item-size: 30px;
  display: grid;
  grid-template-areas: "buttons middle pag";
  grid-template-columns: auto auto 1fr;
  grid-gap: 1rem;
  margin-top: auto;
  padding: 5px;
  background: #fff;
  box-shadow: 0 -20px 10px -20px rgba(51, 51, 51, 0.2);
  border-top: 1px solid #F7F7F7;
  height: 30px;
  box-sizing: content-box;
}
@media only screen and (min-width: 768px) {
  div.contextActions {
    box-sizing: border-box;
    --toolbar-item-size: 35px;
    height: 55px;
    padding: 10px 5px;
    grid-template-columns: auto 1fr auto;
  }
}
html.safari div.contextActions {
  box-sizing: border-box;
}

div.contextActions > div.buttons {
  grid-area: buttons;
  display: flex;
}
div.contextActions > div.buttons a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-transform: none;
  line-height: 0.875em;
  padding: 0 0.5em;
  width: var(--toolbar-item-size);
  height: var(--toolbar-item-size);
}
@media only screen and (min-width: 1024px) {
  div.contextActions > div.buttons a {
    width: auto;
  }
}
div.contextActions > div.buttons a.selectAllButton {
  display: none;
}
@media only screen and (min-width: 1024px) {
  div.contextActions > div.buttons a.selectAllButton {
    display: inline-flex;
  }
}
div.contextActions > div.buttons a > i {
  padding: 0;
}
@media only screen and (min-width: 1024px) {
  div.contextActions > div.buttons a > i {
    margin-right: 0.25em;
  }
}
div.contextActions > div.buttons > div.groupActionWrapper {
  margin-left: 5px;
}
div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover.balloonPopover.balloonPopover {
  top: calc(-1 * var(--popover-height-item) - 10px - 0.625rem);
}
div.contextActions > div.buttons > div.groupActionWrapper > div.groupActionsPopover.balloonPopover.balloonPopover::after {
  top: calc(1 * var(--popover-height-item) + 2px + 0.625rem);
}
div.contextActions > div.buttons > a, div.contextActions > div.buttons > div.groupActionWrapper > a.groupActionsBtn {
  min-width: unset;
  text-transform: unset;
  border: 2px solid #333;
}
div.contextActions > div.buttons > a.disabled, div.contextActions > div.buttons > div.groupActionWrapper > a.groupActionsBtn.disabled {
  pointer-events: none;
  opacity: 0.5;
}
@media screen and (max-width: 768px) {
  div.contextActions > div.buttons > a, div.contextActions > div.buttons > div.groupActionWrapper > a.groupActionsBtn {
    height: 30px;
  }
}
@media only screen and (min-width: 1024px) {
  div.contextActions > div.buttons > a, div.contextActions > div.buttons > div.groupActionWrapper > a.groupActionsBtn {
    min-width: 125px;
  }
}
div.contextActions > div.buttons > a > i, div.contextActions > div.buttons > div.groupActionWrapper > a.groupActionsBtn > i {
  display: flex;
  align-items: center;
}
div.contextActions > div.buttons > a > span, div.contextActions > div.buttons > div.groupActionWrapper > a.groupActionsBtn > span {
  display: none;
}
@media only screen and (min-width: 1024px) {
  div.contextActions > div.buttons > a > span, div.contextActions > div.buttons > div.groupActionWrapper > a.groupActionsBtn > span {
    display: inline;
  }
}
div.contextActions > div.loader {
  grid-area: middle;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: transparent;
  background-size: contain;
  background-position: center;
  opacity: 0;
  transition: all 200ms;
  justify-self: center;
}
div.contextActions > div.loader.active {
  opacity: 1;
  transition: all 0ms;
}
div.contextActions > div.infoWrapper {
  grid-area: middle;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: var(--toolbar-item-size);
  justify-self: self-start;
}
div.contextActions > div.infoWrapper > div.selectedOrdersWrapper {
  color: #bdbdbd;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  div.contextActions > div.infoWrapper > div.selectedOrdersWrapper {
    font-size: 1rem;
  }
}
div.contextActions > div.infoWrapper > div.selectedOrdersWrapper > span.label {
  display: none;
}
@media only screen and (min-width: 768px) {
  div.contextActions > div.infoWrapper > div.selectedOrdersWrapper > span.label {
    display: inline;
  }
}
div.contextActions > div.infoWrapper > div.selectedOrdersWrapper > span:last-child {
  font-weight: bold;
}
div.contextActions > div.infoWrapper > div.selectedOrdersWrapper > i {
  display: flex;
}
@media only screen and (min-width: 768px) {
  div.contextActions > div.infoWrapper > div.selectedOrdersWrapper > i {
    display: none;
  }
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "selectedItems";
  align-items: center;
  grid-column-gap: 0.25rem;
}
@media only screen and (min-width: 768px) {
  div.contextActions > div.infoWrapper > div.totalItemsWrapper {
    grid-template-areas: "label selectedItems";
  }
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper.fulfill {
  grid-column-gap: 0.25rem;
  grid-template-rows: 50% 50%;
  grid-template-areas: "selectedItems" "totalPrice";
}
@media only screen and (min-width: 768px) {
  div.contextActions > div.infoWrapper > div.totalItemsWrapper.fulfill {
    grid-template-columns: auto 1fr;
    grid-template-areas: "label selectedItems" "totalPrice totalPrice";
  }
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > span {
  display: flex;
  align-items: center;
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > span.label {
  display: none;
}
@media only screen and (min-width: 768px) {
  div.contextActions > div.infoWrapper > div.totalItemsWrapper > span.label {
    font-weight: bold;
    grid-area: label;
    display: inline;
  }
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > span.selectedItems {
  grid-area: selectedItems;
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > span.selectedItems > span {
  font-size: 0.75rem;
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > span.selectedItems > span:first-child {
  margin-right: 0.25em;
}
@media only screen and (min-width: 768px) {
  div.contextActions > div.infoWrapper > div.totalItemsWrapper > span.selectedItems > span {
    font-size: 1rem;
  }
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > div.totalPrice {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  grid-area: totalPrice;
  text-align: right;
  display: flex;
  overflow-x: auto;
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > div.totalPrice::-webkit-scrollbar {
  height: 5px;
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > div.totalPrice::-webkit-scrollbar-thumb {
  background-color: #666666;
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > div.totalPrice > div {
  display: flex;
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > div.totalPrice > div > span {
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  div.contextActions > div.infoWrapper > div.totalItemsWrapper > div.totalPrice > div > span {
    font-size: 1rem;
  }
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > div.totalPrice > div > span:not(:first-child) {
  margin-left: 0.25rem;
}
div.contextActions > div.infoWrapper > div.totalItemsWrapper > div.totalPrice > div > span.comma {
  margin-left: 0;
}
div.contextActions > simple-pagination {
  grid-area: pag;
  margin: 0 0 0 auto;
  justify-self: flex-end;
  font-size: 0.75rem;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  div.contextActions > simple-pagination {
    font-size: 1rem;
  }
}
div.contextActions > simple-pagination > section.simplePagination {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  div.contextActions > simple-pagination > section.simplePagination {
    width: 200px;
  }
}

.targetGreenFlag {
  color: #219653;
}

.targetRedFlag {
  color: #EB5757;
}

.ordersToggleContainer {
  padding: 10px;
}
.ordersToggleContainer > div {
  padding: 15px;
  background: #f2f2f2;
  text-align: center;
  border-radius: 5px;
  color: #333;
}
.ordersToggleContainer > div > h2 {
  margin: 0;
  text-align: center;
}
.ordersToggleContainer > div > p {
  text-align: center;
}
.ordersToggleContainer > div > a {
  text-transform: none;
  padding: 0 15px;
  border-color: #333;
  color: #333;
  font-weight: normal;
}
.ordersToggleContainer > div > a.active {
  background: #474747;
  color: #f2f2f2;
}

.packages.status-loading {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  margin: auto;
  background-size: auto;
  background-size: 64px;
  background: rgba(102, 102, 102, 0.5) url(cc5ad6f4c46fdb7d6a7a.svg) no-repeat center center;
  border-radius: 5px;
}

#packagesView {
  grid-template-rows: 50px 1fr 55px;
}
#packagesView > main {
  overflow: hidden !important;
}

packages-list {
  height: 100%;
  display: block;
  background: #e0e0e0;
}

section.packages-list-component {
  height: 100%;
  display: grid;
  grid-template-areas: "toolbar" "main";
  grid-template-rows: 55px auto;
  overflow: hidden;
}
section.packages-list-component.select-only-mode section.packagesToolbar {
  grid-template-areas: "headerclose search sort";
  grid-template-columns: 5fr auto auto;
}
section.packages-list-component section.packagesToolbar {
  grid-area: toolbar;
  display: grid;
  grid-template-areas: "search sort";
  grid-template-columns: 5fr auto;
  grid-template-rows: auto;
  grid-column-gap: 0.5rem;
  align-items: center;
  z-index: 102;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesToolbar {
    grid-template-areas: "headerclose search sort";
    grid-template-columns: auto 5fr auto;
    padding-right: 20px;
    grid-column-gap: 1rem;
  }
}
section.packages-list-component section.packagesToolbar > sv-search {
  grid-area: search;
  display: flex;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesToolbar > sv-search {
    max-width: 300px;
    justify-self: end;
  }
}
section.packages-list-component section.packagesToolbar > sv-search > form > input {
  max-width: 100px;
}
@media only screen and (min-width: 568px) {
  section.packages-list-component section.packagesToolbar > sv-search > form > input {
    max-width: unset;
  }
}
section.packages-list-component section.packagesToolbar > button.closeModal {
  grid-area: headerclose;
  background-color: transparent;
  border: none !important;
  min-width: auto !important;
  text-transform: capitalize !important;
  width: fit-content;
}
section.packages-list-component section.packagesToolbar > button.closeModal > i.icon-remove-delete, section.packages-list-component section.packagesToolbar > button.closeModal > i.fa-times {
  margin-top: 4px;
}
section.packages-list-component section.packagesToolbar > button.closeModal > span {
  display: none;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesToolbar > button.closeModal > span {
    display: inline;
  }
}
section.packages-list-component section.packagesToolbar > div.sort-wrapper > button.sortBy > span {
  white-space: nowrap;
}
section.packages-list-component section.packagesMain {
  position: relative;
  grid-area: main;
  overflow-y: hidden;
  display: grid;
  grid-template-areas: "categories" "packages";
  grid-template-rows: auto 1fr;
  grid-gap: 0 10px;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesMain {
    grid-template-areas: "categories packages";
    grid-template-columns: 300px auto;
    grid-template-rows: 1fr;
  }
}
section.packages-list-component section.packagesMain > aside.categories {
  background: #fff;
  padding-left: 0;
  z-index: 101;
  position: relative;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.75);
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesMain > aside.categories {
    display: grid;
    grid-template-areas: "header" "list";
    grid-template-rows: 45px auto;
    padding-left: 5px;
    box-shadow: 2px 0 4px 0 rgba(0, 0, 0, 0.25);
  }
}
section.packages-list-component section.packagesMain > aside.categories.active {
  box-shadow: none;
}
section.packages-list-component section.packagesMain > aside.categories.active > nav.categories {
  transform: translateX(0);
}
section.packages-list-component section.packagesMain > aside.categories.active > h1 > button > i {
  transform: rotate(180deg);
}
section.packages-list-component section.packagesMain > aside.categories > h1 {
  grid-area: header;
  font-size: 0.875rem;
  font-weight: normal;
  padding: 0 10px;
  display: flex;
  align-items: center;
  margin-top: unset;
  margin: 0.5rem 0;
  height: 30px;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesMain > aside.categories > h1 {
    padding: 0 5px;
    height: auto;
  }
}
section.packages-list-component section.packagesMain > aside.categories > h1 > button {
  background-color: transparent;
  margin-right: 0;
  margin-left: auto;
  padding: 5px;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesMain > aside.categories > h1 > button {
    display: none;
  }
}
section.packages-list-component section.packagesMain > aside.categories > h1 > button > i {
  display: flex;
  align-items: center;
}
section.packages-list-component section.packagesMain > aside.categories > nav.categories {
  grid-area: list;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: absolute;
  left: 0;
  top: calc(30px + 1rem);
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.75);
  transform: translateX(-100%);
  max-height: 50dvh;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesMain > aside.categories > nav.categories {
    transform: translateX(0);
    box-shadow: none;
    max-height: unset;
    overflow: hidden;
    position: static;
  }
}
section.packages-list-component section.packagesMain > aside.categories > nav.categories > a {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  box-shadow: inset 0 -1px 0 0 #bdbdbd;
  padding: 5px;
  height: 50px;
  font-size: 0.875rem;
  color: #444444;
}
section.packages-list-component section.packagesMain > aside.categories > nav.categories > a:last-child {
  box-shadow: none;
}
section.packages-list-component section.packagesMain > aside.categories > nav.categories > a.active {
  background: #f2f2f2;
  font-weight: bold;
}
section.packages-list-component section.packagesMain > aside.categories > nav.categories > a:hover {
  background: #e0e0e0;
}
section.packages-list-component section.packagesMain > aside.categories > nav.categories > a > span.itemsCouter {
  font-size: 0.75rem;
}
section.packages-list-component section.packagesMain > section#packagesList {
  padding: 20px 10px 0 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 15px;
  justify-items: start;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #bdbdbd transparent;
}
section.packages-list-component section.packagesMain > section#packagesList::after {
  content: "";
  display: flex;
  height: 50px;
  width: 100%;
  grid-column: 1/-1;
}
section.packages-list-component section.packagesMain > section#packagesList::-webkit-scrollbar {
  width: 5px;
}
section.packages-list-component section.packagesMain > section#packagesList::-webkit-scrollbar-thumb {
  background-color: #bdbdbd;
}
section.packages-list-component section.packagesMain > section#packagesList > div {
  display: grid;
  grid-template-rows: 155px auto;
}
section.packages-list-component section.packagesMain > section.packagesEmpty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section.packages-list-component section.packagesMain > section.packagesEmpty > div.emptyIcon {
  width: 100%;
  max-width: 200px;
  height: 205px;
  background: url(52d40ace567015c8515f.svg) no-repeat;
  background-size: contain;
}
section.packages-list-component section.packagesMain > section.packagesEmpty > h2 {
  color: #bdbdbd;
}
section.packages-list-component section.packagesMain > section.packagesSearchEmpty, section.packages-list-component section.packagesMain > section.errorPackages {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section.packages-list-component section.packagesMain > section.packagesSearchEmpty > div.emptyIcon, section.packages-list-component section.packagesMain > section.errorPackages > div.emptyIcon {
  width: 100%;
  max-width: 200px;
  height: 205px;
  background: url(2d45201a231ef10640c0.svg) no-repeat;
  background-size: contain;
  background-position: center;
  margin-bottom: 50px;
}
section.packages-list-component section.packagesMain > section.packagesSearchEmpty > h2, section.packages-list-component section.packagesMain > section.errorPackages > h2 {
  margin-bottom: 0;
}
section.packages-list-component section.packagesMain > section.packagesSearchEmpty > p, section.packages-list-component section.packagesMain > section.errorPackages > p {
  color: #828282;
}
section.packages-list-component section.packagesMain > section.packagesSearchEmpty > p > span.bold, section.packages-list-component section.packagesMain > section.errorPackages > p > span.bold {
  font-weight: bold;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu {
  position: absolute;
  bottom: 0;
  right: 0;
  display: grid;
  grid-template-areas: "delete info1" "delete info2";
  grid-template-columns: auto 1fr;
  grid-gap: 0 10px;
  align-items: center;
  background: linear-gradient(to right, rgba(217, 217, 217, 0.75), rgba(242, 242, 242, 0.75));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  width: 100%;
  padding: 5px 10px;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu {
    grid-template-columns: 100px auto;
    width: calc(100% - 300px);
    padding: 10px 20px;
  }
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu.modalPackagesList {
  grid-template-areas: "add-to-order info1" "add-to-order info2";
  grid-template-columns: auto 1fr;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu.modalPackagesList > button.addToOrder {
  grid-area: add-to-order;
  background-color: transparent;
  font-size: inherit;
  min-width: 125px;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu.modalPackagesList > button.addToOrder:hover {
  background-color: #ababab;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu.modalPackagesList > button.addToOrder[disabled]:hover {
  background-color: transparent;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu.disabledShareButton {
  grid-template-areas: "delete info1" "delete info2";
  grid-template-columns: auto 1fr;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > button.frameButton {
  display: flex;
  height: 32px;
  width: auto;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  margin: 0;
  color: #292929;
  text-transform: none;
  min-width: 0;
  border-radius: 5px;
  border: 1px solid #292929;
  transition: opacity 300ms;
  opacity: 1;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > button.frameButton:disabled {
  opacity: 0.5;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > button.frameButton.share {
  grid-area: share;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > button.frameButton.delete {
  grid-area: delete;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > button.frameButton.delete > span {
  display: none;
}
@media only screen and (min-width: 768px) {
  section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > button.frameButton.delete > span {
    display: inline;
  }
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > button.frameButton > i {
  display: flex;
  font-size: 1.25rem;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > p {
  margin: 0;
  text-align: right;
  font-size: 0.875rem;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > p.info1 {
  grid-area: info1;
}
section.packages-list-component section.packagesMain > aside.packagesSelectedItemsMenu > p.info2 {
  grid-area: info2;
}
section.packages-list-component section.packagesMain > section.packagesLoading {
  display: flex;
  justify-content: center;
  align-items: center;
}
section.packages-list-component section.packagesMain > section.packagesLoading > div.loader {
  margin: auto;
}

div.packageItem {
  position: relative;
  height: 235px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 5px;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 8px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.2);
}
div.packageItem > a.locked {
  position: absolute;
  top: 20px;
  left: 0;
  padding: 5px 15px;
  background: rgba(41, 41, 41, 0.5);
  color: #fff;
}

div.packageMiniaturesWrapper {
  grid-row: 1/span 1;
  width: 100%;
  height: 155px;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
div.packageMiniaturesWrapper > a {
  background: #e4e4e4;
  display: block;
  height: 100%;
}
div.packageMiniaturesWrapper > a > div.packageMiniatures {
  height: 100%;
}
div.packageMiniaturesWrapper > a > div.packageMiniatures.emptyMiniatures {
  background-image: url(15694f9e909a3d5962e9.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
div.packageMiniaturesWrapper > div.sharedLabel {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0.25rem 0.75rem;
  background-color: #59595A;
  color: #fff;
  font-size: 0.875rem;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
}

div.packagesTextWrapper {
  grid-row: 2/span 1;
  display: grid;
  grid-template-areas: "dots dots" "header plus" "desc plus";
  grid-template-columns: auto 30px;
  overflow: hidden;
}
div.packagesTextWrapper > div.dots {
  grid-area: dots;
  display: flex;
  justify-content: center;
  align-items: center;
}
div.packagesTextWrapper > div.dots > a {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin: 5px 3px;
  background: #e0e0e0;
}
div.packagesTextWrapper > div.dots > a.active {
  background: #252525;
}
div.packagesTextWrapper > h2.header {
  grid-area: header;
  font-size: 0.875rem;
  margin: 0;
  height: -webkit-fill-available;
}
html.safari div.packagesTextWrapper > h2.header {
  height: unset;
}

div.packagesTextWrapper > p.desc {
  grid-area: desc;
  font-size: 0.75rem;
  margin: 0;
}
div.packagesTextWrapper > a.plus {
  grid-area: plus;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.75rem;
  color: #000;
  transition: all 100ms;
}
div.packagesTextWrapper > a.plus:active > i {
  transform: scale(0.5);
}
div.packagesTextWrapper > a.plus > i.icon-status-signed {
  transform: scale(0.8);
}

customers-search {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
customers-search > div.customersSearchHeader {
  grid-area: customersSearchHeader;
  background-color: #292929;
  color: #fff;
  display: grid;
  grid-template-areas: "filtersLabel filtersLabel" "B2BShopFilter B2BShopFilter" "headersearch sort";
  grid-template-columns: 1fr 1fr;
}
@media only screen and (min-width: 414px) {
  customers-search > div.customersSearchHeader {
    grid-template-columns: minmax(200px, 1fr) auto;
  }
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchHeader {
    grid-template-columns: auto minmax(200px, 0.5fr) 4fr auto;
    grid-template-areas: "filtersLabel B2BShopFilter . headersearch";
  }
}
customers-search > div.customersSearchHeader.headerModeModal {
  grid-template-columns: 1fr auto;
  grid-template-areas: "closeBtn closeBtn" "B2BShopFilter B2BShopFilter" "headersearch sort";
}
@media only screen and (min-width: 568px) {
  customers-search > div.customersSearchHeader.headerModeModal {
    grid-template-columns: auto auto minmax(200px, 2fr) 4fr auto auto;
    grid-template-areas: "closeBtn filtersLabel B2BShopFilter . headersearch sort";
  }
}
customers-search > div.customersSearchHeader > sv-select {
  --sv-select-height: 30px;
  grid-area: B2BShopFilter;
}
customers-search > div.customersSearchHeader > div.filtersLabel {
  grid-area: filtersLabel;
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchHeader > div.filtersLabel {
    display: block;
  }
}
customers-search > div.customersSearchHeader > sv-search {
  grid-area: headersearch;
}
customers-search > div.customersSearchHeader > sv-search button[type=reset] {
  color: #f2f2f2;
  padding: 0;
}
customers-search > div.customersSearchHeader .closeModal {
  grid-area: closeBtn;
  color: #c2c2c2;
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchHeader > div.sort-wrapper {
    display: none;
  }
}
customers-search > div#pleaseSelectCustomer {
  --please-select-customer-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F2F2F2;
  height: var(--please-select-customer-height);
}
@media only screen and (min-width: 768px) {
  customers-search > div#pleaseSelectCustomer {
    --please-select-customer-height: 100px;
  }
}
customers-search > div#pleaseSelectCustomer > p {
  margin: 0;
  font-size: 1rem;
  color: #333;
}
@media only screen and (min-width: 768px) {
  customers-search > div#pleaseSelectCustomer > p {
    font-size: 1.125rem;
  }
}
customers-search > section.customersRegionsTabs {
  display: flex;
  background-color: #292929;
  padding-left: 10px;
}
customers-search > section.customersRegionsTabs > div {
  width: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
customers-search > section.customersRegionsTabs > div::-webkit-scrollbar {
  height: 5px;
}
customers-search > section.customersRegionsTabs > div::-webkit-scrollbar-thumb {
  background-color: #666666;
}
customers-search > section.customersRegionsTabs > div::-webkit-scrollbar-track {
  background: #f8f8f8;
}
customers-search > section.customersRegionsTabs > div > a.regions-item {
  width: 10%;
  min-width: 70px;
  padding: 15px 5px;
  border-radius: 5px 5px 0 0;
  background-color: #e4e4e4;
  margin: 0 2px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: bold;
}
customers-search > section.customersRegionsTabs > div > a.regions-item.active {
  z-index: 2;
  background-color: #fff;
}
customers-search > section.customersRegionsTabs > div > a.regions-item > span.regions-counter {
  font-size: 0.75rem;
}
customers-search > div.customersSearchTable {
  grid-area: customersSearchTable;
  overflow-y: hidden;
  height: 100%;
}
customers-search > div.customersSearchTable.hasTabs {
  box-shadow: 0px -1px 5px 0px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 767px) {
  customers-search > div.customersSearchTable.multiselect > div.customer-list > div.customer-list-data > div.customer-grid {
    grid-template-columns: auto 1fr 1fr !important;
  }
}
customers-search > div.customersSearchTable.multiselect > div.customer-list > div.customer-list-data > div.customer-grid > a.fullLink {
  transform: translateX(0);
  width: 100%;
}
customers-search > div.customersSearchTable.multiselect div.contextActions {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "customersInfo pag" "buttons confirmBtn";
  height: auto;
  grid-gap: 0.5rem;
  padding: 0.25rem 0.5rem;
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchTable.multiselect div.contextActions {
    grid-template-areas: "customersInfo buttons middle pag confirmBtn";
    grid-template-columns: auto auto 1fr auto auto;
    grid-gap: 1rem;
  }
}
customers-search > div.customersSearchTable.multiselect div.contextActions > div.selectedCustomers {
  grid-area: customersInfo;
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}
customers-search > div.customersSearchTable.multiselect div.contextActions > div.selectedCustomers > span:not(:first-child) {
  margin-left: 0.25rem;
}
customers-search > div.customersSearchTable.multiselect div.contextActions > simple-pagination > section.simplePagination {
  grid-template-areas: "amount prev next";
}
customers-search > div.customersSearchTable.multiselect div.contextActions > div.buttons {
  width: 100%;
  grid-area: buttons;
  display: flex;
  align-items: center;
  justify-self: right;
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchTable.multiselect div.contextActions > div.buttons {
    width: auto;
  }
}
customers-search > div.customersSearchTable.multiselect div.contextActions > div.buttons > button {
  width: 100%;
  height: fit-content;
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchTable.multiselect div.contextActions > div.buttons > button {
    width: auto;
  }
}
customers-search > div.customersSearchTable.multiselect div.contextActions > div.loader {
  grid-area: middle;
  display: none;
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchTable.multiselect div.contextActions > div.loader {
    display: block;
  }
}
customers-search > div.customersSearchTable.multiselect div.contextActions > button.confirm-btn {
  grid-area: confirmBtn;
  background-color: #f2994a;
  border-color: #f2994a;
  color: #fff;
  height: fit-content;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchTable.multiselect div.contextActions > button.confirm-btn {
    margin: auto 0.5rem auto 0;
  }
}
customers-search > div.customersSearchTable.multiselect div.contextActions > button.confirm-btn > i {
  margin-left: 0.5rem;
}
customers-search > div.customersSearchTable.multiselect div.contextActions > button.confirm-btn > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
customers-search > div.customersSearchTable.multiselect div.contextActions > div.buttons > button, customers-search > div.customersSearchTable.multiselect div.contextActions > button {
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  customers-search > div.customersSearchTable.multiselect div.contextActions > div.buttons > button, customers-search > div.customersSearchTable.multiselect div.contextActions > button {
    font-size: 1rem;
  }
}
customers-search > div.customersSearchTable > section.customersListLoader {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
customers-search > div.customersSearchTable > section.customersListLoader > div.loader {
  margin: auto;
}

.customer-list-headers {
  display: none;
  overflow: hidden;
  box-shadow: 0 0 10px 0 #c6c6c6;
  align-items: center;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .customer-list-headers {
    display: flex;
  }
}
.customer-list-headers a.index {
  min-width: 50px;
}
.customer-list-headers a.city {
  min-width: 60px;
}
.customer-list-headers a > i {
  margin-left: 0.25em;
  display: block !important;
  line-height: unset;
}
.customer-list-headers a > i::before {
  display: block;
  line-height: unset;
}

.customer-list {
  --webshop-user-width: 55px;
  overflow-y: hidden;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  font-size: 0.625rem;
}
@media only screen and (min-width: 414px) {
  .customer-list {
    --webshop-user-width: 65px;
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 768px) {
  .customer-list {
    --webshop-user-width: 85px;
    font-size: 0.875rem;
    grid-template-rows: auto 1fr 55px;
  }
}
@media only screen and (min-width: 1024px) {
  .customer-list {
    font-size: 1rem;
  }
}
.customer-list > div.customer-list-data {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  overflow-y: auto;
  padding: 0.25rem 10px;
}
.customer-list > div.customer-list-data::-webkit-scrollbar {
  width: 5px;
}
.customer-list > div.customer-list-data::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 768px) {
  .customer-list > div.customer-list-data {
    padding: 0;
  }
}
.customer-list > div.customer-list-data > div.customer-grid {
  color: #333;
}
@media screen and (max-width: 767px) {
  .customer-list > div.customer-list-data > div.customer-grid {
    grid-template-rows: unset;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-areas: unset !important;
    position: relative;
    padding: 0.25rem;
    grid-gap: 0.25rem;
  }
}
.customer-list > div.customer-list-data > div.customer-grid:hover {
  background-color: #F2F2F2;
}
.customer-list > div.customer-list-data > div.customer-grid:nth-child(2n+1) {
  background: #e4e4e4;
  border-radius: 5px;
  overflow: hidden;
}
.customer-list > div.customer-list-data > div.customer-grid:nth-child(2n+1):hover {
  background-color: #c6c6c6;
}
.customer-list > div.customer-list-data > div.customer-grid.blocked {
  color: #e03e2e;
}
.customer-list > div.customer-list-data > div.customer-grid.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.customer-list > div.customer-list-data > div.customer-grid.disabled > a.fullLink {
  pointer-events: none;
  cursor: not-allowed;
}
.customer-list > div.customer-list-data > div.customer-grid > a.fullLink {
  padding: 15px;
  position: absolute;
  width: calc(100% - 25px);
  height: 100%;
  top: 0;
  left: 0;
}
.customer-list > div.customer-list-data > div.customer-grid > a.fullLink:focus-visible {
  box-shadow: inset 0 0 0 2px #333;
}
html.safari .customer-list > div.customer-list-data > div.customer-grid > a.fullLink:focus:not(:active) {
  box-shadow: inset 0 0 0 2px #333;
}

@media only screen and (min-width: 768px) {
  .customer-list > div.customer-list-data > div.customer-grid > a.fullLink {
    padding: 20px;
    transform: translateX(5px);
    grid-column: 1/var(--last-col);
    grid-row: 1;
    position: static;
    width: auto;
    height: auto;
  }
}
.customer-list > div.customer-list-data > div.customer-grid > span {
  display: block;
  margin: auto 0;
}
.customer-list > div.customer-list-data > div.customer-grid > span.index {
  min-width: 50px;
}
.customer-list > div.customer-list-data > div.customer-grid > span.city {
  min-width: 60px;
}
.customer-list > div.customer-list-data > div.customer-grid > span.customer-select {
  --input-size: 8px;
  grid-row: 1/span 2;
  margin: auto 0.25rem;
}
@media only screen and (min-width: 768px) {
  .customer-list > div.customer-list-data > div.customer-grid > span.customer-select {
    --input-size: 20px;
    grid-area: select;
    grid-row: 1/span 1;
    margin: auto 0;
  }
}
.customer-list > div.customer-list-data > div.customer-grid > span.customer-select input[type=checkbox] {
  display: none;
}
.customer-list > div.customer-list-data > div.customer-grid > span.customer-select input[type=checkbox] + label {
  display: inline-block;
  padding: 0 0 0 0;
  background: url(9fd8191ff391f00a9fea.svg) no-repeat;
  height: var(--input-size);
  width: var(--input-size);
  background-size: 100%;
}
.customer-list > div.customer-list-data > div.customer-grid > span.customer-select input[type=checkbox]:checked + label {
  display: inline-block;
  background: url(ff9142682876d395204d.svg) no-repeat;
  height: var(--input-size);
  width: var(--input-size);
  background-size: 100%;
}
.customer-list > div.customer-list-data > div.customer-grid > span.customer-select > span.customer-select-placeholder {
  width: var(--input-size);
  display: block;
}
@media only screen and (min-width: 768px) {
  .customer-list > div.customer-list-data > div.customer-grid > span.customer-select > span.customer-select-placeholder {
    display: none;
  }
}
.customer-list > div.customer-list-data > div.customer-grid > div.webshopUserIndicator {
  visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: webshop_user;
  grid-row: 1/span 2;
}
@media only screen and (min-width: 768px) {
  .customer-list > div.customer-list-data > div.customer-grid > div.webshopUserIndicator {
    grid-column: calc(var(--last-col) - 1) !important;
    grid-row: 1 !important;
  }
}
.customer-list > div.customer-list-data > div.customer-grid > div.webshopUserIndicator.labelVisible {
  visibility: visible;
}
.customer-list > div.customer-list-data > div.customer-grid > div.webshopUserIndicator.labelVisible > span {
  background-color: #219653;
}
.customer-list > div.customer-list-data > div.customer-grid > div.webshopUserIndicator > i {
  color: #219653;
}
@media only screen and (min-width: 768px) {
  .customer-list > div.customer-list-data > div.customer-grid > div.webshopUserIndicator > i {
    display: none;
  }
}
.customer-list > div.customer-list-data > div.customer-grid > div.webshopUserIndicator > span {
  display: none;
  border-radius: 5px;
  padding: 0.25em;
  text-align: center;
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .customer-list > div.customer-list-data > div.customer-grid > div.webshopUserIndicator > span {
    display: block;
  }
}
.customer-list > div.customer-list-data > div.customer-grid > a.info {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 1.375rem;
  grid-column: var(--last-col);
  grid-row: 1/span 2;
}
.customer-list > div.customer-list-data > div.customer-grid > a.info:focus-visible {
  box-shadow: inset 0 0 0 2px #333;
}
html.safari .customer-list > div.customer-list-data > div.customer-grid > a.info:focus:not(:active) {
  box-shadow: inset 0 0 0 2px #333;
}

@media only screen and (min-width: 768px) {
  .customer-list > div.customer-list-data > div.customer-grid > a.info {
    grid-row: 1;
  }
}
.customer-list > div.customer-list-data > div.customer-grid:focus {
  box-shadow: inset 0 0 0 5px #333;
}
.customer-list > div > a.customer-grid, .customer-list > div > div.customer-grid {
  display: grid;
  grid-gap: 5px;
  padding: 2px 5px;
}
.customer-list > div > a.customer-grid > .active, .customer-list > div > div.customer-grid > .active {
  font-weight: bold;
}
@media only screen and (min-width: 568px) {
  .customer-list > div > a.customer-grid, .customer-list > div > div.customer-grid {
    grid-gap: 10px;
    padding: 5px 10px;
  }
}
@media only screen and (min-width: 768px) {
  .customer-list > div > a.customer-grid, .customer-list > div > div.customer-grid {
    padding: 10px 30px;
  }
}
.customer-list > div > a.customer-grid > span, .customer-list > div > div.customer-grid > span {
  display: flex;
  justify-content: var(--col-align, flex-start);
  align-items: center;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .customer-list > div > a.customer-grid > span, .customer-list > div > div.customer-grid > span {
    grid-column: var(--col-start)/span 1;
    grid-row: 1/span 1;
  }
}
.customer-list > div > a.customer-grid > span.emptyData, .customer-list > div > div.customer-grid > span.emptyData {
  display: none;
}
@media only screen and (min-width: 768px) {
  .customer-list > div > a.customer-grid > span.emptyData, .customer-list > div > div.customer-grid > span.emptyData {
    display: flex;
  }
}
.customer-list > div > div.customer-grid {
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
}
.customer-list > div > div.customer-grid > a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.625rem 0;
}
.customer-list > div > div.customer-grid > a > span {
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.125rem 0;
}
.customer-list > div > div.customer-grid > a > i {
  display: flex;
  align-items: center;
}
.customer-list div.contextActions {
  padding: 0 10px;
  grid-template-areas: "middle pag";
  grid-template-columns: auto 1fr;
}
@media only screen and (min-width: 768px) {
  .customer-list div.contextActions {
    padding: 0;
  }
}
.customer-list div.contextActions > div {
  height: 30px;
}
@media only screen and (min-width: 768px) {
  .customer-list div.contextActions > div {
    height: 55px;
  }
}
.customer-list div.contextActions > div a {
  color: #3b3b3b;
}
.customer-list div.contextActions > simple-pagination {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .customer-list div.contextActions > simple-pagination {
    width: auto;
  }
}
.customer-list div.contextActions > simple-pagination > section.simplePagination {
  width: 100%;
  grid-template-areas: ". . amount prev next";
}
@media only screen and (min-width: 768px) {
  .customer-list div.contextActions > simple-pagination > section.simplePagination {
    width: 200px;
    grid-template-areas: "amount prev next";
  }
}
.customer-list a.webshop_user,
.customer-list span.webshop_user {
  width: var(--webshop-user-width);
}
.customer-list a.info,
.customer-list span.info {
  width: 12px;
}
@media only screen and (min-width: 414px) {
  .customer-list a.info,
  .customer-list span.info {
    width: 22px;
  }
}
.customer-list a.info > i,
.customer-list span.info > i {
  font-size: 0.75rem;
}
@media only screen and (min-width: 414px) {
  .customer-list a.info > i,
  .customer-list span.info > i {
    font-size: 1.375rem;
  }
}

div.notFound {
  padding: 15px;
}
div.notFound h1 {
  float: none;
}
div.notFound a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-width: 120px;
  max-width: 240px;
  margin: auto;
  color: #333;
}

delivery-search {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
delivery-search #deliverySearchHeader {
  grid-area: modalHeader;
  background-color: #292929;
  color: #fff;
  display: grid;
  grid-template-areas: "backBtn" "title" "headersearch";
  grid-template-columns: 1fr;
}
@media only screen and (min-width: 768px) {
  delivery-search #deliverySearchHeader {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "backBtn title headersearch";
  }
}
delivery-search #deliverySearchHeader > a.back {
  grid-area: backBtn;
  color: #fff;
}
delivery-search #deliverySearchHeader > h1 {
  grid-area: title;
  margin: 0;
}
delivery-search #deliverySearchHeader > sv-search {
  grid-area: headersearch;
}
delivery-search #deliverySearchHeader > sv-search button[type=reset] {
  color: #f2f2f2;
}
delivery-search section.modalMain {
  display: grid;
  grid-template-rows: 1fr auto;
}
delivery-search section.modalMain > div.aList {
  overflow: auto;
}
delivery-search section.modalMain > div.aList > a > span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
}
@media only screen and (min-width: 414px) {
  delivery-search section.modalMain > div.aList > a > span {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 768px) {
  delivery-search section.modalMain > div.aList > a > span {
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1024px) {
  delivery-search section.modalMain > div.aList > a > span {
    font-size: 1rem;
  }
}

marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "companyAddress" "deliveryAddress" "message";
}
@media only screen and (min-width: 768px) {
  marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "companyAddress deliveryAddress" "message message";
  }
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div > h3 {
  font-size: 0.875rem;
  color: #333;
  display: flex;
  align-items: center;
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div > h3 > a {
  margin-left: 1.5rem;
  text-decoration: none;
  color: #333;
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div > h3 > a > i {
  font-size: 1.125rem;
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div > div > p {
  font-size: 0.8125rem;
  margin: 0;
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div.companyAddress {
  grid-area: companyAddress;
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div.deliveryAddress {
  grid-area: deliveryAddress;
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div.message {
  grid-area: message;
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div.message p {
  white-space: pre-wrap;
}
marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div.deliveryAddress > h3 > span:first-child, marketplace-joining-form section.modalMain > div.joiningFormInfoWrapper > div.message > h3 > span:first-child {
  margin-right: 0.3125rem;
}

marketplace-joining-form-sent > div.window {
  min-height: unset;
}

marketplace-request-sent > div.window {
  min-height: unset;
}

marketplace-edit-joining-form section.modalMain form.joiningFormMessage > p {
  margin: 0;
  font-size: 0.875rem;
  color: #333;
}

@media only screen and (min-width: 768px) {
  marketplace-request-pending > div.window {
    min-height: 600px;
  }
}
marketplace-request-pending > div.window > section.modalMain {
  display: flex;
  justify-content: center;
  align-items: center;
}
marketplace-request-pending > div.window > section.modalMain > div.pendingIcon {
  width: 175px;
  height: 80px;
  background-image: url(c7189b9f6c4613611b0d.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

menu-tree {
  display: block;
}
menu-tree .menu-tree-component ul, menu-tree .menu-tree-component li {
  padding: 0;
  margin: 0;
}
menu-tree .menu-tree-component li {
  list-style: none;
}
menu-tree .menu-tree-component li.withoutName > a {
  min-height: 55px;
}
menu-tree .menu-tree-component > ul > li:first-child > ul > li:first-child > a {
  border-top: none;
}
menu-tree .menu-tree-component a {
  display: grid;
  grid-template-areas: "icon name" "icon counter";
  grid-template-columns: 30px auto;
  padding: 10px 5px;
  border-top: 1px solid #999999;
}
menu-tree .menu-tree-component a.level-0 {
  padding-left: 0px;
}
menu-tree .menu-tree-component a.level-1 {
  padding-left: 15px;
}
menu-tree .menu-tree-component a.level-2 {
  padding-left: 30px;
}
menu-tree .menu-tree-component a.level-3 {
  padding-left: 45px;
}
menu-tree .menu-tree-component a.level-4 {
  padding-left: 60px;
}
menu-tree .menu-tree-component a.level-5 {
  padding-left: 75px;
}
menu-tree .menu-tree-component a.level-6 {
  padding-left: 90px;
}
menu-tree .menu-tree-component a.level-7 {
  padding-left: 105px;
}
menu-tree .menu-tree-component a.level-8 {
  padding-left: 120px;
}
menu-tree .menu-tree-component a > i {
  display: flex;
  grid-area: icon;
  justify-content: center;
  align-items: center;
  color: #444444;
}
menu-tree .menu-tree-component a > span.categoryName {
  grid-area: name;
  font-weight: bold;
  color: #444444;
}
menu-tree .menu-tree-component a > span.categoryCounter {
  grid-area: counter;
  font-size: 0.875rem;
  color: #999999;
}
menu-tree .menu-tree-component .isSelected > li > a {
  background-color: #eee;
}
menu-tree .menu-tree-component ul {
  display: none;
}
menu-tree .menu-tree-component > ul, menu-tree .menu-tree-component > ul > li > ul, menu-tree .menu-tree-component ul.isOpen > li > ul, menu-tree .menu-tree-component ul.isOpen > li > ul > li > ul {
  display: block;
}
menu-tree .menu-tree-component > ul.isEmpty, menu-tree .menu-tree-component > ul > li > ul.isEmpty, menu-tree .menu-tree-component ul.isOpen > li > ul.isEmpty, menu-tree .menu-tree-component ul.isOpen > li > ul > li > ul.isEmpty {
  display: none;
}

category-tree {
  display: block;
}
category-tree .category-tree-component ul, category-tree .category-tree-component li {
  padding: 0;
  margin: 0;
}
category-tree .category-tree-component li {
  list-style: none;
}
category-tree .category-tree-component > ul > li:first-child > ul > li:first-child > a {
  border-top: none;
}
category-tree .category-tree-component a {
  display: grid;
  grid-template-areas: "icon name" "icon counter";
  grid-template-columns: 30px auto;
  padding: 10px 5px;
  border-top: 1px solid #999999;
}
category-tree .category-tree-component a.level-0 {
  padding-left: 0px;
}
category-tree .category-tree-component a.level-1 {
  padding-left: 15px;
}
category-tree .category-tree-component a.level-2 {
  padding-left: 30px;
}
category-tree .category-tree-component a.level-3 {
  padding-left: 45px;
}
category-tree .category-tree-component a.level-4 {
  padding-left: 60px;
}
category-tree .category-tree-component a.level-5 {
  padding-left: 75px;
}
category-tree .category-tree-component a.level-6 {
  padding-left: 90px;
}
category-tree .category-tree-component a.level-7 {
  padding-left: 105px;
}
category-tree .category-tree-component a.level-8 {
  padding-left: 120px;
}
category-tree .category-tree-component a > i {
  display: flex;
  grid-area: icon;
  justify-content: center;
  align-items: center;
  color: #444444;
}
category-tree .category-tree-component a > span.categoryName {
  grid-area: name;
  font-weight: bold;
  color: #444444;
}
category-tree .category-tree-component a > span.categoryCounter {
  grid-area: counter;
  font-size: 0.875rem;
  color: #999999;
}
category-tree .category-tree-component .isSelected > li > a {
  background-color: #eee;
}
category-tree .category-tree-component ul {
  display: none;
}
category-tree .category-tree-component > ul, category-tree .category-tree-component > ul > li > ul, category-tree .category-tree-component ul.isOpen > li > ul, category-tree .category-tree-component ul.isOpen > li > ul > li > ul {
  display: block;
}
category-tree .category-tree-component > ul.isEmpty, category-tree .category-tree-component > ul > li > ul.isEmpty, category-tree .category-tree-component ul.isOpen > li > ul.isEmpty, category-tree .category-tree-component ul.isOpen > li > ul > li > ul.isEmpty {
  display: none;
}

html {
  height: 100%;
  font-size: 16px;
}

body {
  height: 100%;
  font-family: "latoregular", sans-serif;
}

body > div.main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #333;
}
body > div.main > div {
  display: flex;
  min-height: 100%;
  flex: 1;
  flex-direction: column;
}

*:not(input)::selection {
  background: rgba(0, 0, 0, 0);
}

* {
  box-sizing: border-box;
}

*:not(input):not([draggable]) {
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -ms-touch-action: none !important;
}

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

a {
  outline: none;
  cursor: pointer;
}

input {
  user-select: auto !important;
}

::ng-deep div.cdk-overlay-container {
  z-index: 1000001;
}

section.simplePagination {
  width: 160px;
  height: 100%;
  display: grid;
  grid-template-areas: "amount prev next";
}
@media only screen and (min-width: 414px) {
  section.simplePagination {
    width: 200px;
  }
}
section.simplePagination > div.amount {
  grid-area: amount;
  display: flex;
  justify-content: center;
  align-items: center;
}
section.simplePagination > div.amount > span {
  margin: 0 0.15em;
}
section.simplePagination > a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
}
section.simplePagination > a.disabled {
  opacity: 0.5;
  pointer-events: none;
}
section.simplePagination > a:focus-visible {
  box-shadow: inset 0 0 0 3px #333;
}
html.safari section.simplePagination > a:focus:not(:active) {
  box-shadow: inset 0 0 0 3px #333;
}

section.simplePagination > a > i {
  display: flex;
}
section.simplePagination > a.prev {
  grid-area: prev;
}
section.simplePagination > a.next {
  grid-area: next;
}

section.svChart {
  display: flex;
  justify-content: center;
}

section.svDebug {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #009d4e;
  box-shadow: 0 0 10px 0 #000;
  color: #fff;
  z-index: 10000;
}
section.svDebug.active {
  width: auto;
  height: auto;
  padding: 0 10px 0 0;
}
section.svDebug > button.toggleActive {
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  background: #009d4e;
  color: #fff;
  cursor: pointer;
}
section.svDebug.active button.toggleActive {
  background: #fff;
  color: #009d4e;
}
section.svDebug p {
  margin: 0;
}
section.svDebug div.i {
  display: flex;
  align-items: center;
}
section.svDebug div.i input[type=checkbox] {
  width: 16px;
  height: 16px;
  background: #fff;
  -webkit-appearance: none;
  border-radius: 3px;
  margin: 10px;
  box-shadow: inset 0 0 0 3px rgb(0, 106, 52.6624203822);
  transition: all 300ms;
  cursor: pointer;
}
section.svDebug div.i input[type=checkbox]:checked {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 8px rgb(0, 106, 52.6624203822);
}
section.svDebug div.i select {
  cursor: pointer;
  background: #333;
  color: #fff;
  margin: 10px;
}
section.svDebug div.i label {
  cursor: pointer;
}

a.svGlass {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 300ms, transform 0ms;
  text-indent: -9999em;
  transform: translateY(-100%);
  cursor: auto;
  z-index: 1000;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
a.svGlass.active {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  transform: translateY(0);
}
a.svGlass.slightBlur {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

sv-sorting-tooltip {
  display: contents;
}

section.svSortingTooltip.mediabookAddFilterSpace {
  top: 100px;
}
@media only screen and (min-width: 414px) {
  section.svSortingTooltip.mediabookAddFilterSpace {
    top: 50px;
  }
}
@media only screen and (min-width: 768px) {
  section.svSortingTooltip.mediabookAddFilterSpace {
    top: calc(50px - 1rem + 10px);
    right: 32px;
  }
}

section.svSortingTooltip {
  position: absolute;
  width: auto;
  top: 50px;
  right: 0.625rem;
  z-index: 10000;
  background: #252525;
  color: navy;
  border-radius: 0.25rem;
  box-shadow: 0.063rem 0.063rem 0.125rem 0 #000;
}
section.svSortingTooltip.tick-mode {
  min-width: 200px;
}
section.svSortingTooltip.tick-mode > div {
  padding: 0.5rem;
}
section.svSortingTooltip.tick-mode > div > a {
  padding: 0;
}
section.svSortingTooltip.tick-mode > div > a.active > i {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}
section.svSortingTooltip.tick-mode > div > a::after {
  content: none;
}
section.svSortingTooltip.tick-mode > div > hr {
  width: 100%;
}
section.svSortingTooltip > div {
  padding: 1.875rem 1.875rem 1.875rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
}
section.svSortingTooltip > div a {
  display: flex;
  align-items: center;
  color: #f2f2f2;
  position: relative;
  padding-left: 3.125rem;
  height: 1.875rem;
  text-decoration: none;
}
section.svSortingTooltip > div a.disabled.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
section.svSortingTooltip > div a.disabled.disabled > i {
  display: none;
}
section.svSortingTooltip > div a:after {
  content: "";
  width: 0.313rem;
  height: 0.313rem;
  background: #f2f2f2;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 1.563rem;
  opacity: 0;
  transform: translateY(-50%);
}
section.svSortingTooltip > div a.active:after {
  opacity: 1;
}
section.svSortingTooltip > div a > i {
  display: none;
}
section.svSortingTooltip > div hr {
  background: #333;
  height: 0.063rem;
  border: none;
}
section.svSortingTooltip:after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 10.5%;
  border-width: 0.6rem;
  border-style: solid;
  border-color: transparent transparent rgba(37, 37, 37, 0.9) transparent;
}
section.svSortingTooltip.white-theme {
  background: rgba(224, 224, 224, 0.9);
}
section.svSortingTooltip.white-theme:after {
  border-color: transparent transparent rgba(224, 224, 224, 0.9) transparent;
}
section.svSortingTooltip.white-theme > div {
  padding: 1rem 0.75rem 1rem 1.25rem;
}
section.svSortingTooltip.white-theme > div:after {
  background: rgba(224, 224, 224, 0.9);
}
section.svSortingTooltip.white-theme > div a {
  color: #252525;
  padding-left: 0;
  padding-right: 3.125rem;
  font-size: 0.875rem;
}
section.svSortingTooltip.white-theme > div a:after {
  background-color: #252525;
  left: initial;
  right: 1.563rem;
}

div.svSelect.filtersBarMode > a.toggle.isSelected,
div.svSelect.darkFiltersBarMode > a.toggle.isSelected, section.ordersToolbar sv-select.filters1 > div.svSelect.selected > a.toggle.toggle,
section.ordersToolbar sv-select.filters2 > div.svSelect.selected > a.toggle.toggle, customers-search > div.customersSearchHeader > sv-select > div.svSelect.selected > a.toggle.toggle, div.categoryMultiselect > a.toggle, div.svSelect > a.toggle, div.categoryMultiselect.active > a.toggle, div.svSelect.active > a.toggle, div.svSelect.lightMode > a.toggle {
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center right 10px;
}

div.categoryMultiselect.active > a.toggle, div.svSelect.active > a.toggle, div.svSelect.lightMode > a.toggle {
  background-color: #f2f2f2;
  color: #000;
  background-image: url(5811ac00b11dd8648320.svg);
}

div.categoryMultiselect > a.toggle, div.svSelect > a.toggle {
  background-color: #3b3b3b;
  color: #f2f2f2;
  background-image: url(19acc254d529bcf0e20a.svg);
}

div.active.svSelect.filtersBarMode > a.toggle,
div.active.svSelect.darkFiltersBarMode > a.toggle {
  background-image: url(94ebc424e2c9e727cf00.svg);
}

div.svSelect.filtersBarMode > a.toggle.isSelected,
div.svSelect.darkFiltersBarMode > a.toggle.isSelected, section.ordersToolbar sv-select.filters1 > div.svSelect.selected > a.toggle.toggle,
section.ordersToolbar sv-select.filters2 > div.svSelect.selected > a.toggle.toggle, customers-search > div.customersSearchHeader > sv-select > div.svSelect.selected > a.toggle.toggle {
  background-image: url(93688a4a0e2777596e19.svg);
}

div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div > span.icon-css, div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > div.childSelectSectionWrapper > span.icon-css {
  filter: invert(35%) sepia(84%) saturate(1098%) hue-rotate(120deg) brightness(96%) contrast(102%);
}

div.svSelect > div > a.value > span.icon {
  filter: invert(50%) sepia(50%) saturate(549%) hue-rotate(93deg) brightness(86%) contrast(103%);
}

/* You can add global styles to this file, and also import other style files */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

* {
  box-sizing: border-box;
}

html, body {
  min-height: 100dvh;
  height: auto;
  margin: 0;
  background-color: #333;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 5px;
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background-color: #666666;
}

html.safari, html.safari > body {
  min-height: 100dvh;
}

html.safari > body {
  height: 100dvh;
}

.newLoader {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 120px;
  width: 120px;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-repeat: no-repeat;
  background-position: center 20px;
  text-align: center;
  color: #c6c6c6;
  margin: 0 auto;
}

.selectChainLoader {
  --loader-size: 60px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc(var(--loader-size) * 1.5);
  height: calc(var(--loader-size) * 1.5);
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: var(--loader-size) var(--loader-size);
  background-position: center center;
  background-image: url(cc5ad6f4c46fdb7d6a7a.svg);
  z-index: 10000;
  background-color: #F7F7F7;
  -webkit-backdrop-filter: blur(5px);
  border-radius: 5px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
}
@media screen and (width >= 768px) {
  .selectChainLoader {
    --loader-size: 100px;
  }
}
.selectChainLoader.active {
  display: block;
}

@keyframes miniatureAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
body.debugMode:after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
  position: absolute;
  top: 5px;
  left: 5px;
  pointer-events: none;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

button.mat-calendar-body-cell:hover > div.mat-calendar-body-cell-content {
  background-color: rgba(0, 157, 78, 0.45) !important;
}
button.mat-calendar-body-cell > div.mat-calendar-body-selected {
  background-color: #009d4e;
}
button.mat-calendar-body-cell > div.mat-calendar-body-active, button.mat-calendar-body-cell > div.mat-calendar-body-today {
  background-color: rgba(0, 157, 78, 0.45) !important;
}

div.svSelect.filtersBarMode,
div.svSelect.darkFiltersBarMode {
  width: fit-content;
}
div.svSelect.filtersBarMode > a.toggle,
div.svSelect.darkFiltersBarMode > a.toggle {
  font-size: 0.75rem;
  text-decoration: none;
  background-size: var(--sv-select-chevron-size);
  background-position: top 10px right 9px !important;
  padding: 0 1.75rem 0 0.5rem;
  width: fit-content;
  position: relative;
  border-radius: var(--sv-select-border-radius);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: 1px solid transparent;
}
div.svSelect.filtersBarMode > a.toggle.isSelected,
div.svSelect.darkFiltersBarMode > a.toggle.isSelected {
  background-size: var(--sv-select-chevron-size);
  color: #6fcf97;
  border: 1px solid #6fcf97;
}
div.svSelect.filtersBarMode > a.toggle > span,
div.svSelect.darkFiltersBarMode > a.toggle > span {
  display: block;
  height: unset;
  max-width: 8rem;
}
div.svSelect.filtersBarMode > a.toggle > small,
div.svSelect.darkFiltersBarMode > a.toggle > small {
  align-self: flex-start;
}
div.active.svSelect.filtersBarMode > a,
div.active.svSelect.darkFiltersBarMode > a, div.active.svSelect.filtersBarMode > div,
div.active.svSelect.darkFiltersBarMode > div {
  background: rgba(242, 242, 242, 0.8470588235) no-repeat;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
div.active.svSelect.filtersBarMode > a.toggle,
div.active.svSelect.darkFiltersBarMode > a.toggle {
  border-radius: var(--sv-select-border-radius);
  background-size: var(--sv-select-chevron-size);
}
@media only screen and (min-width: 568px) {
  div.active.svSelect.filtersBarMode > a.toggle,
  div.active.svSelect.darkFiltersBarMode > a.toggle {
    border-radius: var(--sv-select-border-radius) var(--sv-select-border-radius) 0 0;
  }
}
div.active.svSelect.filtersBarMode > div,
div.active.svSelect.darkFiltersBarMode > div {
  min-width: 12rem;
}
div.active.svSelect.filtersBarMode > div > a.value,
div.active.svSelect.darkFiltersBarMode > div > a.value {
  color: #333333;
  gap: 0.75rem;
}
div.active.svSelect.filtersBarMode > div > a.value > span,
div.active.svSelect.darkFiltersBarMode > div > a.value > span {
  white-space: nowrap;
}
div.svSelect.filtersBarMode > div,
div.svSelect.darkFiltersBarMode > div {
  border-radius: var(--sv-select-border-radius);
}
div.svSelect.filtersBarMode > div.active,
div.svSelect.darkFiltersBarMode > div.active {
  position: fixed;
  border-radius: var(--sv-select-border-radius);
  top: calc(100px + 1rem + 50px + 32px + 5px);
  right: 50%;
  width: fit-content;
  min-width: 85%;
  box-shadow: 10px 10px 10px -10px #000;
}
@media only screen and (min-width: 568px) {
  div.svSelect.filtersBarMode > div.active,
  div.svSelect.darkFiltersBarMode > div.active {
    position: absolute;
    border-radius: 0 var(--sv-select-border-radius) var(--sv-select-border-radius) var(--sv-select-border-radius);
    top: unset;
    right: unset;
    min-width: auto;
  }
}
div.svSelect.filtersBarMode > div.active.active.active,
div.svSelect.darkFiltersBarMode > div.active.active.active {
  transform: translate(50%, 0);
}
@media only screen and (min-width: 568px) {
  div.svSelect.filtersBarMode > div.active.active.active,
  div.svSelect.darkFiltersBarMode > div.active.active.active {
    transform: translateY(var(--sv-select-height));
  }
}
div.svSelect.filtersBarMode > div.active > div.svCalendarSwitch > div.availabilityCheckbox,
div.svSelect.darkFiltersBarMode > div.active > div.svCalendarSwitch > div.availabilityCheckbox {
  width: var(--sv-calendar-checkbox-width-mobile);
  height: var(--sv-calendar-checkbox-height-mobile);
  font-size: var(--sv-calendar-font-size-mobile);
}
@media only screen and (min-width: 568px) {
  div.svSelect.filtersBarMode > div.active > div.svCalendarSwitch > div.availabilityCheckbox,
  div.svSelect.darkFiltersBarMode > div.active > div.svCalendarSwitch > div.availabilityCheckbox {
    width: var(--sv-calendar-checkbox-width);
    height: var(--sv-calendar-checkbox-height);
    font-size: var(--sv-calendar-font-size);
  }
}
div.svSelect.filtersBarMode > div.active > sv-custom-calendar,
div.svSelect.darkFiltersBarMode > div.active > sv-custom-calendar {
  font-size: var(--sv-calendar-font-size-mobile);
}
@media only screen and (min-width: 568px) {
  div.svSelect.filtersBarMode > div.active > sv-custom-calendar,
  div.svSelect.darkFiltersBarMode > div.active > sv-custom-calendar {
    font-size: var(--sv-calendar-font-size);
  }
}

div.svSelect {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-template-rows: 1fr;
  height: var(--sv-select-height);
  z-index: 100;
}
div.svSelect.lightMode > a.toggle {
  background-color: #f2f2f2;
  color: #000;
}
div.svSelect.clearBtn {
  grid-template-columns: 1fr auto;
}
div.svSelect.clearBtn > a.toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: none;
}
div.svSelect.clearBtn > a.toggle.isSelected {
  border-right: none;
}
div.svSelect.clearBtn.selected > a.clearFilterBtn {
  border: 1px solid #6fcf97;
  border-left: none;
  color: #6fcf97;
}
div.svSelect.clearBtn.selected > a.clearFilterBtn > span.separator {
  display: inline-block;
}
div.svSelect.clearBtn.active > a.clearFilterBtn {
  border: none;
  color: #f2f2f2;
}
div.svSelect.active {
  z-index: 1000000;
}
div.svSelect.active > a.toggle {
  border-radius: 5px 5px 0 0;
  height: var(--sv-select-height);
}
div.svSelect.active > div.dropdownContent {
  display: block;
}
div.svSelect > a.toggle {
  background-position: top 10px right 10px !important;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  padding: 0 20px 0 10px;
  display: flex;
  align-items: flex-start;
  border-radius: 5px;
}
div.svSelect > a.toggle > span {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--sv-select-height);
}
div.svSelect > a.clearFilterBtn {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  background-color: #3b3b3b;
  color: #f2f2f2;
  padding: 0 0.25rem 0 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
div.svSelect > a.clearFilterBtn > span.separator {
  display: none;
  height: 70%;
  width: 1px;
  background-color: #59595A;
  border-radius: 1px;
}
div.svSelect > a.clearFilterBtn > span.fas {
  display: flex;
  align-items: center;
  margin-left: 0.25rem;
  font-size: 0.75rem;
}
div.svSelect > div {
  display: none;
  border-radius: 5px;
  position: relative;
}
div.svSelect > div.active {
  position: relative;
  overflow-y: auto;
  height: fit-content;
  max-height: 50dvh;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  scroll-snap-type: y mandatory;
  background: linear-gradient(rgba(242, 242, 242, 0.75), rgba(242, 242, 242, 0.85), rgba(242, 242, 242, 0.85), rgba(242, 242, 242, 0.75));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px #ddd, 10px 10px 10px -10px #000;
  border-radius: 0 0 5px 5px;
  padding: 20px 0;
  transform: translateY(var(--sv-select-height));
  z-index: 1000000;
}
div.svSelect > div.active::-webkit-scrollbar {
  width: 5px;
}
div.svSelect > div.active::-webkit-scrollbar-thumb {
  background-color: #666666;
}
div.svSelect > div.openOnTop {
  width: 100%;
  position: absolute;
  bottom: calc(var(--sv-select-height) * 2);
  box-shadow: inset 0 0 0 1px #ddd, 10px -10px 10px -10px #000;
}
div.svSelect > div > a.value {
  display: flex;
  align-items: center;
  padding: 0 10px;
  min-height: 32px;
  color: black;
  scroll-snap-align: start;
  text-decoration: none;
}
div.svSelect > div > a.value:hover {
  background: rgba(255, 255, 255, 0.5);
}
div.svSelect > div > a.value.selectAll {
  font-weight: bold;
}
div.svSelect > div > a.value > span.icon {
  display: flex;
  width: 16px;
  height: 16px;
  margin-left: auto;
  border-radius: 50%;
}

div.svSelect.filtersBarMode,
div.svSelect.darkFiltersBarMode {
  --sv-select-border-radius: 6px;
  --sv-select-chevron-size: 0.6rem;
}

div.svSelect.darkFiltersBarMode.active > a, div.svSelect.darkFiltersBarMode.active > div {
  background: #252525 no-repeat;
  color: #fff;
}
div.svSelect.darkFiltersBarMode.active > div > a.value {
  color: #f8f8f8;
}
div.svSelect.darkFiltersBarMode.active > div > a.value:hover {
  background: #353535;
}

div.svSelect.seasonsMode {
  text-indent: 0;
  margin: 0.125rem 0 0 0.3125rem;
}
div.svSelect.seasonsMode > a.toggle {
  background-color: unset;
  background-image: unset;
  text-decoration: none;
  z-index: unset;
  border: 1.5px solid #333;
  color: #333;
  padding: 0 1rem;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
}
div.svSelect.seasonsMode > a.toggle.isSelected {
  border: 1.5px solid #058A3E;
  color: #058A3E;
}
div.svSelect.seasonsMode > a.toggle.isLocked {
  border-color: #818181;
  color: #818181;
}
div.svSelect.seasonsMode > a.toggle.isLocked:hover {
  cursor: not-allowed;
}
div.svSelect.seasonsMode > a.toggle > span {
  height: 1.25rem;
  line-height: 1.25rem;
  display: block;
}
div.svSelect.seasonsMode > a.toggle > i {
  display: flex;
  justify-content: center;
  margin-left: 0.5rem;
}
div.svSelect.seasonsMode.active > a.toggle.toggle {
  border-bottom: unset;
  padding-left: 0.5rem;
}
div.svSelect.seasonsMode.active > a.toggle.toggle > i {
  font-size: 0.75rem;
}
div.svSelect.seasonsMode.active > div.active.active {
  border-top: unset;
}
div.svSelect.seasonsMode.active > a.toggle, div.svSelect.seasonsMode.active > div.active {
  box-shadow: none;
  background: #f4f4f4;
  border: 1px solid #c2c2c2;
}
div.svSelect.seasonsMode > div.active {
  padding: 0.3125rem 0 0;
}
div.svSelect.seasonsMode > div.active > a.value {
  display: flex;
  justify-content: space-between;
  height: 2.3125rem;
}
div.svSelect.seasonsMode > div.active > a.value > span {
  font-size: 0.875rem;
  font-weight: 400;
  color: #333;
}
div.svSelect.seasonsMode > div.active > a.value > span:first-child {
  flex-grow: 1;
}
div.svSelect.seasonsMode > div.active > a.value > span.icon {
  margin: 0;
  filter: unset;
  width: 1.2rem;
  height: 1.2rem;
}
div.svSelect.seasonsMode > div.active > a.value > span.icon:before {
  font-size: 1.2rem;
  color: #219653;
}

div.categoryMultiselect {
  position: relative;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-template-rows: 1fr;
  height: var(--sv-select-height);
}
div.categoryMultiselect.active {
  z-index: 1000003;
}
div.categoryMultiselect.active > a.toggle {
  border-radius: 5px 5px 0 0;
  height: var(--sv-select-height);
}
div.categoryMultiselect.active > div {
  display: block;
}
div.categoryMultiselect > a.toggle {
  background-position: top 10px right 10px !important;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1000001;
  padding: 0 20px 0 10px;
  display: flex;
  align-items: flex-start;
  border-radius: 5px;
}
div.categoryMultiselect > a.toggle > span {
  display: flex;
  align-items: center;
  margin-right: 3px;
  height: var(--sv-select-height);
}
div.categoryMultiselect > div {
  display: none;
  border-radius: 5px;
  position: relative;
}
div.categoryMultiselect > div.active {
  position: relative;
  overflow-y: auto;
  height: fit-content;
  max-height: 50dvh;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  scroll-snap-type: y mandatory;
  background: linear-gradient(rgba(242, 242, 242, 0.75), rgba(242, 242, 242, 0.85), rgba(242, 242, 242, 0.85), rgba(242, 242, 242, 0.75));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px #ddd, 10px 10px 10px -10px #000;
  border-radius: 0 0 5px 5px;
  padding: 20px 0;
  transform: translateY(var(--sv-select-height));
  z-index: 1000001;
}
div.categoryMultiselect > div.active::-webkit-scrollbar {
  width: 5px;
}
div.categoryMultiselect > div.active::-webkit-scrollbar-thumb {
  background-color: #666666;
}
div.categoryMultiselect > div.openOnTop {
  width: 100%;
  position: absolute;
  bottom: calc(var(--sv-select-height) * 2);
  box-shadow: inset 0 0 0 1px #ddd, 10px -10px 10px -10px #000;
}
div.categoryMultiselect > div > a.value {
  min-height: 20px;
  color: black;
  scroll-snap-align: start;
  text-decoration: none;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents {
  display: grid;
  grid-template-areas: "show-child childSelectSection childSelectSection";
  grid-template-columns: 0.5fr 2fr 1fr;
  padding: 5px 0;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents:hover {
  background: rgba(255, 255, 255, 0.5);
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > span.showChild {
  margin: auto;
  grid-area: show-child;
  max-width: 20px;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > div.childSelectSectionWrapper {
  grid-area: childSelectSection;
  display: grid;
  grid-template-areas: "name icona";
  grid-template-columns: 2fr 1fr;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > div.childSelectSectionWrapper > span.text {
  grid-area: name;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > div.childSelectSectionWrapper > span.icon-css {
  grid-area: icona;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: auto;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > div.childSelectSectionWrapper > span.icon-css.none:before {
  content: "x";
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > div.childSelectSectionWrapper > span.icon-css.dot:before {
  content: "+";
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > div.childSelectSectionWrapper > span.icon-css.minus:before {
  content: "*";
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestParents > div.childSelectSectionWrapper > span.icon-css.tick:before {
  content: "G";
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div {
  display: grid;
  grid-template-areas: ". name ico";
  grid-template-columns: 0.5fr 2fr 1fr;
  padding: 5px 0;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div:hover {
  background: rgba(255, 255, 255, 0.5);
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div > span.text {
  grid-area: name;
  margin: auto auto auto 15px;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div > span.icon-css {
  grid-area: ico;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: auto;
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div > span.icon-css.none:before {
  content: "x";
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div > span.icon-css.dot:before {
  content: "+";
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div > span.icon-css.minus:before {
  content: "*";
}
div.categoryMultiselect > div > a.value > div.fieldOfInterestChildren > div > span.icon-css.tick:before {
  content: "G";
}
div.categoryMultiselect > div > a.value.selectAll {
  font-weight: bold;
}

section.orderActivities {
  background: #f2f2f2;
  padding: 20px;
  display: flex;
}
section.orderActivities.emptyList {
  height: 100%;
}
section.orderActivities div.orderActivitiesList {
  width: 100%;
}
section.orderActivities div.orderActivitiesList > div {
  display: grid;
  grid-template-areas: "info date1" "updatedBy date2";
  grid-template-columns: 2fr 1fr;
  grid-row-gap: 0.5rem;
  border-radius: 10px;
  margin-bottom: 20px;
  background: #fff;
  padding: 20px;
}
section.orderActivities div.orderActivitiesList > div:last-child {
  margin-bottom: 0;
}
section.orderActivities div.orderActivitiesList > div:hover {
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.5);
}
section.orderActivities div.orderActivitiesList > div > div.key {
  grid-area: info;
  font-size: 1.125rem;
}
section.orderActivities div.orderActivitiesList > div > div.updatedBy {
  grid-area: updatedBy;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}
section.orderActivities div.orderActivitiesList > div > div .shipping-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
section.orderActivities div.orderActivitiesList > div > div .shipping-info-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
section.orderActivities div.orderActivitiesList > div > div.updatedAt {
  grid-area: date1;
  text-align: right;
  justify-content: flex-end;
}
section.orderActivities div.orderActivitiesList > div > div.relativeTime {
  grid-area: date2;
  text-align: right;
  justify-content: flex-end;
  font-size: 0.9rem;
}
section.orderActivities div.orderActivitiesList > div > div.openTrackingWrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  grid-column: 1/-1;
}
section.orderActivities div.orderActivitiesList > div > div.openTrackingWrapper.openTrackingButtonRow {
  flex-direction: row;
  justify-content: center;
}
section.orderActivities div.orderActivitiesList > div > div.openTrackingWrapper.openTrackingButtonRow .openTrackingButton {
  margin-top: 20px;
}
section.orderActivities div.orderActivitiesList > div > div .openTrackingButton {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 1/-1;
  margin-top: 20px;
}
section.orderActivities div.orderActivitiesList > div > div .openTrackingButton > a {
  padding: 0.625rem 2.375rem;
  border-radius: 8px;
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid #333333;
  font-weight: 800;
  line-height: 1.225rem;
  color: #333333;
  min-width: 180px;
}
section.orderActivities div.orderActivitiesList > div.noDataWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
section.orderActivities div.orderActivitiesList > div.noDataWrapper > div.noDataImage {
  width: 100%;
  height: 100%;
  background-image: url(6d18c4f1d26915a52c5a.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
section.orderActivities div.orderActivitiesList > div.noDataWrapper > h3, section.orderActivities div.orderActivitiesList > div.noDataWrapper > p {
  text-align: center;
  font-size: 1rem;
  color: #828282;
}
section.orderActivities div.orderActivitiesList > div.noDataWrapper > h3 {
  margin: 2rem 0 0.5rem 0;
}
section.orderActivities div.orderActivitiesList > div.noDataWrapper > p {
  margin: 0;
}
section.orderActivities div.orderActivitiesList > div.loader {
  margin: auto;
}

section.orderStatisticsBody {
  display: flex;
  flex-direction: column;
}

.detailsContainerWrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
.detailsContainerWrapper::-webkit-scrollbar {
  width: 5px;
}
.detailsContainerWrapper::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 1024px) {
  .detailsContainerWrapper {
    height: 100%;
    width: 106px;
    padding-left: 1px;
    flex-direction: column;
  }
}
.detailsContainerWrapper > div.detailsContainer {
  display: flex;
  flex-direction: row;
}
@media only screen and (min-width: 1024px) {
  .detailsContainerWrapper > div.detailsContainer {
    flex-direction: column;
  }
}
.detailsContainerWrapper .detailsHeader {
  display: none;
}
@media only screen and (min-width: 1024px) {
  .detailsContainerWrapper .detailsHeader {
    display: inline-block;
    font-size: 16px;
    color: #999999;
    text-align: center;
  }
}
.detailsContainerWrapper a.detailsItem {
  display: block;
  width: 100px;
  height: 100px;
  background-color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 1px;
}
@media only screen and (min-width: 1024px) {
  .detailsContainerWrapper a.detailsItem {
    margin-right: 0;
    margin-bottom: 1px;
  }
}
.detailsContainerWrapper a.detailsItem.status-loading {
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
.detailsContainerWrapper a.detailsItem.status-error {
  background-image: url(76c5b952a644e9554e27.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#dynamicFilters {
  position: relative;
  left: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: 30px;
  grid-gap: 0.5rem;
  transition: left 300ms;
}
@media only screen and (min-width: 414px) {
  #dynamicFilters {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 568px) {
  #dynamicFilters {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
@media only screen and (min-width: 768px) {
  #dynamicFilters {
    justify-content: flex-start;
  }
}
#dynamicFilters > div.filter {
  --dynamicFilterColumns: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
@media only screen and (min-width: 568px) {
  #dynamicFilters > div.filter {
    --dynamicFilterColumns: 4;
    min-width: min-content;
  }
}
#dynamicFilters > div.filter div.svSelect {
  width: 100%;
}
#dynamicFilters > div.filter div.svSelect > a.toggle {
  width: 100%;
  align-items: flex-start;
}
#dynamicFilters > div.filter > div {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  margin: 0 0 5px 0;
}
#dynamicFilters > div.filter > div > span {
  color: #f8f8f8;
}
#dynamicFilters > div.filter > sv-select {
  --sv-select-height: 30px;
  height: var(--sv-select-height);
}
#dynamicFilters > div.filter > sv-select > div.svSelect > a.toggle {
  overflow: hidden;
}
#dynamicFilters > div.filter > sv-select > div.svSelect > a.toggle > small, #dynamicFilters > div.filter > sv-select > div.svSelect > a.toggle > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.productsPreferences {
  position: absolute;
  bottom: 15px;
  left: 10px;
  z-index: var(--max-z-index, 2);
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  background: #333;
  color: #fff;
}
.productsPreferences > div.preferencesHeader {
  color: #828282;
  margin-bottom: 15px;
}
.productsPreferences > div.tileSizeLabel {
  margin: 15px auto;
}
.productsPreferences > div.checkboxRow {
  display: grid;
  grid-template-columns: 2fr 0.5fr;
  margin-bottom: 10px;
}
.productsPreferences > div.checkboxRow > span {
  margin: auto auto auto 0;
}
.productsPreferences > div.checkboxRow > label {
  margin: auto;
}
.productsPreferences > div.tilesSizeOptionsWrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  height: 40px;
}
.productsPreferences > div.tilesSizeOptionsWrapper > a.sizeDown {
  margin: auto auto auto 0;
  font-size: 1.5rem;
}
.productsPreferences > div.tilesSizeOptionsWrapper > a.sizeDown > span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.productsPreferences > div.tilesSizeOptionsWrapper > span.sizeMode {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  background-color: #252525;
  text-transform: uppercase;
}
.productsPreferences > div.tilesSizeOptionsWrapper > a.sizeUp {
  margin: auto 0 auto auto;
  font-size: 1.5rem;
}
.productsPreferences > div.tilesSizeOptionsWrapper > a.sizeUp > span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.productsPreferences:after {
  content: "";
  position: absolute;
  left: 25px;
  bottom: -10px;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
  border-radius: 0 0 8px 0;
  background: #333;
}

user-settings div.window div.brandSettings > input:disabled, user-settings .bigmodal.settings #modalWindow section.accountSettings input[type=text]:disabled, .bigmodal.settings #modalWindow section.accountSettings user-settings input[type=text]:disabled,
user-settings .bigmodal.settings #modalWindow section.accountSettings textarea:disabled,
.bigmodal.settings #modalWindow section.accountSettings user-settings textarea:disabled, user-settings div.window section.accountSettings input[type=text]:disabled,
user-settings div.window section.accountSettings textarea:disabled, user-settings .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=text]:disabled, .bigmodal.settings #modalWindow div.personalSettingsWrapper user-settings div.settingsInputs > input[type=text]:disabled, user-settings .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=text]:disabled, .bigmodal.settings #modalWindow div.passwordChangeWrapper user-settings div.passwordInputs > input[type=text]:disabled, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=text]:disabled, user-settings .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=password]:disabled, .bigmodal.settings #modalWindow div.personalSettingsWrapper user-settings div.settingsInputs > input[type=password]:disabled, user-settings .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=password]:disabled, .bigmodal.settings #modalWindow div.passwordChangeWrapper user-settings div.passwordInputs > input[type=password]:disabled, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=password]:disabled, user-settings change-password div.personalSettingsWrapper div.passwordInputs > input[type=text]:disabled, change-password div.personalSettingsWrapper user-settings div.passwordInputs > input[type=text]:disabled, user-settings change-password div.personalSettingsWrapper div.passwordInputs > input[type=password]:disabled, change-password div.personalSettingsWrapper user-settings div.passwordInputs > input[type=password]:disabled {
  color: #999999;
  background: no-repeat center right 10px url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path fill=\"%23999999\" d=\"M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z\"></path></svg>");
  background-size: 20px;
}
user-settings .bigmodal.settings #modalWindow section.accountSettings input[type=text], .bigmodal.settings #modalWindow section.accountSettings user-settings input[type=text],
user-settings .bigmodal.settings #modalWindow section.accountSettings textarea,
.bigmodal.settings #modalWindow section.accountSettings user-settings textarea, user-settings div.window section.accountSettings input[type=text],
user-settings div.window section.accountSettings textarea, user-settings .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=text], .bigmodal.settings #modalWindow div.personalSettingsWrapper user-settings div.settingsInputs > input[type=text], user-settings .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=text], .bigmodal.settings #modalWindow div.passwordChangeWrapper user-settings div.passwordInputs > input[type=text], user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=text], user-settings .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=password], .bigmodal.settings #modalWindow div.personalSettingsWrapper user-settings div.settingsInputs > input[type=password], user-settings .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=password], .bigmodal.settings #modalWindow div.passwordChangeWrapper user-settings div.passwordInputs > input[type=password], user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=password], user-settings change-password div.personalSettingsWrapper div.passwordInputs > input[type=text], change-password div.personalSettingsWrapper user-settings div.passwordInputs > input[type=text], user-settings change-password div.personalSettingsWrapper div.passwordInputs > input[type=password], change-password div.personalSettingsWrapper user-settings div.passwordInputs > input[type=password] {
  width: 100%;
  margin: 0;
  padding: 8px;
  color: #353535;
  box-shadow: inset 0 0 0 1px #ababab;
  border-radius: 5px;
}
user-settings .bigmodal.settings #modalWindow section.accountSettings input[type=text]::placeholder, .bigmodal.settings #modalWindow section.accountSettings user-settings input[type=text]::placeholder,
user-settings .bigmodal.settings #modalWindow section.accountSettings textarea::placeholder,
.bigmodal.settings #modalWindow section.accountSettings user-settings textarea::placeholder, user-settings div.window section.accountSettings input[type=text]::placeholder,
user-settings div.window section.accountSettings textarea::placeholder, user-settings .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=text]::placeholder, .bigmodal.settings #modalWindow div.personalSettingsWrapper user-settings div.settingsInputs > input[type=text]::placeholder, user-settings .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=text]::placeholder, .bigmodal.settings #modalWindow div.passwordChangeWrapper user-settings div.passwordInputs > input[type=text]::placeholder, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=text]::placeholder, user-settings .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=password]::placeholder, .bigmodal.settings #modalWindow div.personalSettingsWrapper user-settings div.settingsInputs > input[type=password]::placeholder, user-settings .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=password]::placeholder, .bigmodal.settings #modalWindow div.passwordChangeWrapper user-settings div.passwordInputs > input[type=password]::placeholder, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=password]::placeholder, user-settings change-password div.personalSettingsWrapper div.passwordInputs > input[type=text]::placeholder, change-password div.personalSettingsWrapper user-settings div.passwordInputs > input[type=text]::placeholder, user-settings change-password div.personalSettingsWrapper div.passwordInputs > input[type=password]::placeholder, change-password div.personalSettingsWrapper user-settings div.passwordInputs > input[type=password]::placeholder {
  color: #a9a9a9;
}
user-settings .bigmodal.settings #modalWindow section.accountSettings input[type=text]:focus, .bigmodal.settings #modalWindow section.accountSettings user-settings input[type=text]:focus,
user-settings .bigmodal.settings #modalWindow section.accountSettings textarea:focus,
.bigmodal.settings #modalWindow section.accountSettings user-settings textarea:focus, user-settings div.window section.accountSettings input[type=text]:focus,
user-settings div.window section.accountSettings textarea:focus, user-settings .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=text]:focus, .bigmodal.settings #modalWindow div.personalSettingsWrapper user-settings div.settingsInputs > input[type=text]:focus, user-settings .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=text]:focus, .bigmodal.settings #modalWindow div.passwordChangeWrapper user-settings div.passwordInputs > input[type=text]:focus, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=text]:focus, user-settings .bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs > input[type=password]:focus, .bigmodal.settings #modalWindow div.personalSettingsWrapper user-settings div.settingsInputs > input[type=password]:focus, user-settings .bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > input[type=password]:focus, .bigmodal.settings #modalWindow div.passwordChangeWrapper user-settings div.passwordInputs > input[type=password]:focus, user-settings div.window div.personalSettingsWrapper div.settingsInputs > input[type=password]:focus, user-settings change-password div.personalSettingsWrapper div.passwordInputs > input[type=text]:focus, change-password div.personalSettingsWrapper user-settings div.passwordInputs > input[type=text]:focus, user-settings change-password div.personalSettingsWrapper div.passwordInputs > input[type=password]:focus, change-password div.personalSettingsWrapper user-settings div.passwordInputs > input[type=password]:focus {
  outline: none;
}
user-settings div.personalSettingsWrapper.viewMode div.brandSettings > input, div.personalSettingsWrapper.viewMode user-settings div.brandSettings > input, user-settings div.personalSettingsWrapper.viewMode div.settingsInputs input[type=text], div.personalSettingsWrapper.viewMode div.settingsInputs user-settings input[type=text],
user-settings div.personalSettingsWrapper.viewMode div.settingsInputs input[type=email],
div.personalSettingsWrapper.viewMode div.settingsInputs user-settings input[type=email] {
  box-shadow: none !important;
  background: transparent;
}
user-settings div.window {
  max-height: 85dvh;
}
user-settings div.window div.mainSettings {
  display: flex;
  flex-direction: column;
}
user-settings div.window div.mainSettings > a {
  display: block;
  padding: 15px 20px;
  border-bottom: solid 1px #ababab;
  color: #333;
}
user-settings div.window div.mainSettings > a:last-child {
  border-bottom: none;
}
user-settings div.window div.personalSettingsWrapper div.settingsInputs {
  grid-template-columns: 0.95fr 2fr;
}
div.personalSettingsWrapper.viewMode div.settingsInputs input[type=text]:disabled,
div.personalSettingsWrapper.viewMode div.settingsInputs input[type=email]:disabled {
  background: none !important;
}

user-settings div.window div.personalSettingsWrapper label.userIcon > i {
  display: flex;
  font-size: 2rem;
  margin-right: 0.1em;
}
user-settings div.window section.accountSettings div.info {
  margin: 30px 15px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px 15px;
}
user-settings div.window section.accountSettings div.info > h3 {
  margin: 0;
  font-weight: normal;
  font-size: 1rem;
  text-align: right;
}
user-settings div.window section.accountSettings div.info > p {
  margin: 0;
}
user-settings div.window section.accountSettings div.inputs {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  grid-gap: 20px 15px;
  margin: 30px 15px;
}
user-settings div.window section.accountSettings p.label {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
user-settings div.window .bigmodal.settings #modalWindow section.accountSettings div.multiSwitch, .bigmodal.settings #modalWindow user-settings div.window section.accountSettings div.multiSwitch, user-settings div.window section.accountSettings div.multiSwitch {
  display: flex;
  border-radius: 10px;
  border: 1px solid #c6c6c6;
  padding: 1px;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
user-settings div.window .bigmodal.settings #modalWindow section.accountSettings div.multiSwitch::-webkit-scrollbar, .bigmodal.settings #modalWindow user-settings div.window section.accountSettings div.multiSwitch::-webkit-scrollbar, user-settings div.window section.accountSettings div.multiSwitch::-webkit-scrollbar {
  height: 5px;
}
user-settings div.window .bigmodal.settings #modalWindow section.accountSettings div.multiSwitch::-webkit-scrollbar-thumb, .bigmodal.settings #modalWindow user-settings div.window section.accountSettings div.multiSwitch::-webkit-scrollbar-thumb, user-settings div.window section.accountSettings div.multiSwitch::-webkit-scrollbar-thumb {
  background-color: #666666;
}
user-settings div.window .bigmodal.settings #modalWindow section.accountSettings div.multiSwitch > input[type=radio], .bigmodal.settings #modalWindow user-settings div.window section.accountSettings div.multiSwitch > input[type=radio], user-settings div.window section.accountSettings div.multiSwitch > input[type=radio] {
  display: none;
}
user-settings div.window .bigmodal.settings #modalWindow section.accountSettings div.multiSwitch > label, .bigmodal.settings #modalWindow user-settings div.window section.accountSettings div.multiSwitch > label, user-settings div.window section.accountSettings div.multiSwitch > label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  height: 35px;
  width: 100%;
  line-height: 1em;
  padding: 0 5px;
}
user-settings div.window .bigmodal.settings #modalWindow section.accountSettings div.multiSwitch > input[type=radio]:checked + label, .bigmodal.settings #modalWindow user-settings div.window section.accountSettings div.multiSwitch > input[type=radio]:checked + label, user-settings div.window section.accountSettings div.multiSwitch > input[type=radio]:checked + label {
  background: #c6c6c6;
}
user-settings div.window section.accountSettings div.multiSwitch {
  grid-column: 2/span 3;
}
user-settings div.window section.accountSettings input[type=text],
user-settings div.window section.accountSettings textarea {
  border: 0;
}
user-settings div.window section.accountSettings label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
user-settings div.window section.accountSettings input#asCompanyName,
user-settings div.window section.accountSettings textarea#asAddress,
user-settings div.window section.accountSettings input#asCountry {
  grid-column: 2/span 3;
}
user-settings div.window section.accountSettings textarea#asAddress {
  height: 6em;
}
user-settings div.window section.accountSettings input#asZipCode {
  grid-column: 2/span 1;
}
user-settings div.window section.accountSettings label[for=asCity] {
  grid-column: 3/span 1;
}
user-settings div.window section.accountSettings input#asCity {
  grid-column: 4/span 1;
}
user-settings div.window div.brandSettings {
  display: grid;
  grid-template-columns: auto 1fr 2fr;
  grid-auto-rows: 1fr;
  grid-gap: 10px 20px;
  padding: 10px 15px 20px 20px;
  margin: 10px 0 10px 0;
  border-bottom: 1px solid #c6c6c6;
}
user-settings div.window div.brandSettings:last-child {
  border-bottom: none;
}
user-settings div.window div.brandSettings > img.brandLogo {
  grid-row: 2/span 3;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 5px #fff, 0 0 5px 5px #333;
  background-size: contain;
  object-fit: contain;
}
@media only screen and (min-width: 414px) {
  user-settings div.window div.brandSettings > img.brandLogo {
    width: 100px;
    height: 100px;
  }
}
user-settings div.window div.brandSettings > label {
  grid-column: 2/span 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
user-settings div.window div.brandSettings > input {
  grid-column: 3/span 1;
  width: 100%;
  margin: 0;
}
div.personalSettingsWrapper.viewMode div.brandSettings > input:disabled {
  background: none;
  color: #000;
}

missing-element {
  height: 100%;
}

div.missingElement {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
}
div.missingElement > div {
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 20px;
  grid-template-rows: calc(50% - 10px) calc(50% - 10px);
}
div.missingElement > div > div.contentContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
div.missingElement > div > div.contentContainer > p {
  margin: 5px;
  text-align: center;
  color: #828282;
}
div.missingElement > div > div.contentContainer > p.noAvailableTitle {
  font-weight: bold;
}
div.missingElement > div > div.contentContainer > button.svButton, #showOrderView > header div.missingElement > div > div.contentContainer > button#downloadPDF {
  border-color: #333;
  color: #333;
  background-color: #f8f8f8;
  text-transform: none;
}
div.missingElement > div > div.contentContainer > button.svButton:hover, #showOrderView > header div.missingElement > div > div.contentContainer > button#downloadPDF:hover {
  background-color: #333;
  color: #f8f8f8;
}

div.loaderWrapper {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10%;
}
div.loaderWrapper > svg {
  filter: brightness(1.2);
}
div.loaderWrapper > p {
  color: #f8f8f8;
}

div.imageWrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

:host {
  width: 50%;
  height: 100%;
  margin-left: 20px;
}

div.chooseLangWrapper {
  width: inherit;
  height: inherit;
  position: relative;
  font-weight: 200;
  font-family: "latoregular", sans-serif;
}
div.chooseLangWrapper > a {
  position: relative;
  height: inherit;
  display: flex;
  align-items: center;
  min-height: inherit;
  color: #c6c6c6;
  padding-left: 30px;
  background-image: url(546fbc001a784f85e734.svg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px;
  text-decoration: none;
}
div.chooseLangWrapper > a:focus-visible {
  box-shadow: inset 0 -5px 0 0 #F2F2F2;
}
html.safari div.chooseLangWrapper > a:focus:not(:active) {
  box-shadow: inset 0 -5px 0 0 #F2F2F2;
}

div.chooseLangWrapper > a > i.globe {
  display: block;
  width: 48px;
  height: 48px;
  background: url(546fbc001a784f85e734.svg) center center no-repeat;
}
div.chooseLangWrapper > a > span {
  display: none;
}
@media only screen and (min-width: 568px) {
  div.chooseLangWrapper > a > span {
    display: inline;
  }
}
div.chooseLangWrapper > div {
  top: auto;
  bottom: 60px !important;
  left: 0 !important;
  z-index: 1000000;
}
div.chooseLangWrapper > div:after {
  top: auto;
  bottom: -5px;
  left: 15px;
  transform: rotate(-135deg);
  background-color: #292929;
}
div.chooseLangWrapper > div a {
  padding: 0;
}
div.chooseLangWrapper.active > div {
  display: block;
  position: absolute;
  bottom: 48px;
  left: 48px;
  width: 200px;
  background: #292929;
}
div.chooseLangWrapper.active > div > div {
  max-height: 50dvh;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  margin: 10px 0;
}
div.chooseLangWrapper.active > div > div::-webkit-scrollbar {
  width: 5px;
}
div.chooseLangWrapper.active > div > div::-webkit-scrollbar-thumb {
  background-color: #666666;
}
div.chooseLangWrapper.active > div > div > a {
  color: #f8f8f8;
  display: block;
  text-align: left;
  padding-left: 10px;
}

.modalMain:has(div#chooseOptionModal) {
  border-radius: 6px;
}

div#chooseOptionModal {
  position: fixed;
  display: contents;
  z-index: 1000000;
  background-color: #f2f2f2;
  width: 95%;
  max-height: 60vh;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  border-radius: 6px;
  overflow-y: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 768px) {
  div#chooseOptionModal {
    min-width: 450px;
    max-width: 600px;
  }
}
div#chooseOptionModal > div.header {
  height: 45px;
  background-color: #333;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  justify-content: center;
  align-content: center;
  padding: 0 1rem;
}
div#chooseOptionModal > div.header > a, div#chooseOptionModal > div.header > h2 {
  font-size: 0.875rem;
  color: #fff;
}
div#chooseOptionModal > div.header > a {
  display: flex;
  align-items: center;
}
div#chooseOptionModal > div.header > h2.title {
  margin: 0;
  padding: 0;
  font-weight: normal;
  text-align: center;
}
div#chooseOptionModal > div.content {
  width: 100%;
  max-height: calc(60vh - 45px);
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 1rem;
  overflow-y: auto;
}
div#chooseOptionModal > div.content > div.option {
  width: 100%;
  background-color: #fff;
  margin: 0.625rem 0;
  border-radius: 6px;
  cursor: pointer;
  padding: 0.75rem 0;
}
div#chooseOptionModal > div.content > div.option.selected {
  background-color: #009d4e;
}
div#chooseOptionModal > div.content > div.option.selected > span {
  color: #fff;
}
div#chooseOptionModal > div.content > div.option > span {
  color: #000;
  width: 100%;
  display: flex;
  justify-content: center;
}
div#chooseOptionModal > div.content > div.option > span.name {
  font-size: 0.875rem;
  font-weight: bold;
}
div#chooseOptionModal > div.content > div.option > span.subText {
  font-size: 0.75rem;
}

div.svDebugWidget {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  z-index: 1000010;
  font-size: 11px;
}
div.svDebugWidget > #widgetHeader {
  height: 20px;
  background-color: #5063ff;
  cursor: move;
  color: #ffffff;
}
div.svDebugWidget > #widgetHeader > button {
  border: 0;
}
div.svDebugWidget > #widgetHeader > button.toggleActive {
  display: inline;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  background-color: #5063ff;
  color: #ffffff;
  cursor: pointer;
}
div.svDebugWidget.active {
  width: 300px;
  height: fit-content;
  bottom: 65px;
}
div.svDebugWidget > #debugContent {
  color: white;
  background-color: rgba(0, 0, 0, 0.75);
  padding: 5px;
  font-family: monospace;
  box-shadow: 0 0 10px rgba(80, 99, 255, 0.5), 1px 5px 10px 2px rgba(0, 0, 0, 0.3);
}
div.svDebugWidget > #debugContent > #envInfo > span.envName.local {
  color: #8cafff;
}
div.svDebugWidget > #debugContent > #envInfo > span.envName.beta {
  color: #9dffb0;
}
div.svDebugWidget > #debugContent > #envInfo > span.envName.prod {
  color: #ff8a89;
}
div.svDebugWidget > #debugContent > #brandInfo > span.brandId.productSearch {
  color: #63ff80;
}

div.orderFilesZipWrapper {
  min-height: 400px;
}
div.orderFilesZipWrapper .disabled {
  opacity: 0.5;
  cursor: wait;
}
div.orderFilesZipWrapper > h3 {
  margin: 0;
  font-size: 0.75rem;
  padding: 0.5rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F2F2F2;
  font-weight: normal;
}
div.orderFilesZipWrapper > div {
  padding: 0.5rem 1rem;
}
div.orderFilesZipWrapper > div > div.optionWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.25rem 0;
}
div.orderFilesZipWrapper > div > div.optionWrapper > span {
  font-size: 0.875rem;
}
div.orderFilesZipWrapper > div > div.optionWrapper .errorMsg {
  color: #eb5757;
  font-size: 0.75rem;
}
div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper {
  display: flex;
  margin-left: 0.5rem;
}
div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > button, div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > a {
  background-color: #fff;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  transition: 300ms ease-in-out;
  border-width: 2px !important;
  font-weight: bold;
}
div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > button:hover, div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > a:hover {
  background-color: #F2F2F2;
  transition: 300ms ease-in-out;
}
div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > button:not(:first-child), div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > a:not(:first-child) {
  margin-left: 0.5rem;
}
div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > button.preview, div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > a.preview {
  border-color: #219653 !important;
  color: #219653 !important;
}
div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > button > *:not(:first-child), div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > a > *:not(:first-child) {
  margin-left: 0.25rem;
}
div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > button > i, div.orderFilesZipWrapper > div > div.optionWrapper > div.buttonsWrapper > a > i {
  display: flex;
}

div.svRadioSwitchWrapper {
  display: flex;
  border-radius: 10px;
  background-color: #333;
}
div.svRadioSwitchWrapper > div {
  cursor: pointer;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
}
div.svRadioSwitchWrapper > div::before {
  content: "";
  position: absolute;
  width: 2px;
  height: calc(100% - 0.5rem);
  background: linear-gradient(to right, #292929 0%, #292929 50%, #474747 51%, #474747 100%);
  top: 50%;
  right: -2px;
  transform: translate(-50%, -50%);
}
div.svRadioSwitchWrapper > div:last-child::before {
  display: none;
}
div.svRadioSwitchWrapper > div > input:checked + label {
  height: 28px;
  background-color: #fff;
  color: #333;
  border-radius: 8px;
  box-shadow: 2px 0 0 -1px #fff, -2px 0 0 -1px #fff;
}
div.svRadioSwitchWrapper > div > label {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.75rem;
}

#mdContainer {
  padding-inline: 1rem;
  background-color: #333;
  color: white;
  font-family: "latoregular";
}

@font-face {
  font-family: "LatoWoff2";
  src: url(lato-regular-webfont.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "LatoGoogleTtf";
  src: url(Lato-Regular-Google.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "LatoOfficialTtf";
  src: url(Lato-RegularOfficial.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "LatoOfficialWoff";
  src: url(Lato-RegularOfficial.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "LatoOfficialWoff2";
  src: url(Lato-RegularOfficial.woff2) format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "LatoOfficialWebTtf";
  src: url(Lato-RegularOfficialWeb.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
div#design-system-wrapper {
  background-color: #444444;
  color: #fff;
  padding: 1.5rem;
  height: 100%;
  min-height: 100vh;
}
div#design-system-wrapper > h1 {
  margin: 0;
}
div#design-system-wrapper > section > div.fonts-comparator > div.font-comparator-element > select {
  color: #444444;
}
div#design-system-wrapper > section > div.fonts-comparator > div.font-comparator-element > select > option {
  color: #444444;
}

div.fonts-comparator {
  display: flex;
  justify-content: space-evenly;
}

div.font-comparator-element {
  margin: 1rem;
}

div.design-system-sandbox.design-system-sandbox {
  padding: 1rem;
  font-family: var(--selected-font) !important;
}

div.button-sandbox-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem;
}

div.sv-360-button {
  padding: 8px 16px;
  color: #f2f2f2;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
}
div.sv-360-button.button1 {
  background-color: #4F4F4F;
}
div.sv-360-button.button2 {
  background-color: #333333;
}
div.sv-360-button.button3 {
  background-color: #4F4F4F;
}
div.sv-360-button.button4 {
  background-color: #e0e0e0;
  color: #bdbdbd;
}

div.sv-360-button-border {
  padding: 8px 16px;
  color: #f2f2f2;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  color: #333333;
  border: 1.5px solid #333333;
}
div.sv-360-button-border.button2 {
  background-color: #f2f2f2;
}
div.sv-360-button-border.button3 {
  color: #252525;
  border-color: #252525;
}
div.sv-360-button-border.button4 {
  color: #bdbdbd;
  border-color: #bdbdbd;
}

#searchInputWrapper > search-input {
  background-color: #333333;
}

#selectWrapper {
  background-color: #fff;
  padding: 1rem;
  margin: 1rem;
}
#selectWrapper > sv-select {
  --sv-select-height: 30px;
  height: var(--sv-select-height);
}

.modalButton,
#calendarButton {
  margin: 1rem;
}

#svGlassWrapper {
  padding-left: 1rem;
  background-color: #333333;
  height: 50px;
}
#svGlassWrapper select-language {
  height: 100%;
  margin: 0;
}

brands-section {
  height: 100%;
}

media-categories {
  font-family: var(--selected-font) !important;
}

div.chooseLangWrapper.chooseLangWrapper {
  font-family: unset;
}

::ng-deep div.chooseLangWrapper.chooseLangWrapper {
  font-family: unset;
}

::ng-deep section#brandsSection {
  font-family: var(--selected-font) !important;
}

section#brandsSection {
  font-family: var(--selected-font) !important;
}

::ng-deep section#brandsSection > h1 {
  font-family: var(--selected-font) !important;
}

::ng-deep section#brandsSection > div.brandsLinksWrapper > a > div.brandMiniature > div.missing-logo-big-text {
  font-family: var(--selected-font) !important;
}

section#brandsSection > div.brandsLinksWrapper > a > div.brandMiniature > div.missing-logo-big-text {
  font-family: var(--selected-font) !important;
}

::ng-deep section#brandsSection > div.brandsLinksWrapper > a > div.brandMiniature > div.missing-logo-normal-text {
  font-family: var(--selected-font) !important;
}

section#brandsSection > div.brandsLinksWrapper > a > div.brandMiniature > div.missing-logo-normal-text {
  font-family: var(--selected-font) !important;
}

div.orderInfoPromptWrapper > .order-info-prompt-close-btn {
  position: absolute;
  right: 0;
  top: 0;
}
div.orderInfoPromptWrapper > div.buttonsWrapper > button.reduceToAvailableBtn {
  background-color: #f2994a;
  border-color: #f2994a;
  color: #000;
}
div.orderInfoPromptWrapper > div.buttonsWrapper > button.reduce-missing-btn, div.orderInfoPromptWrapper > div.buttonsWrapper > button.forceCloseBtn {
  background-color: #eb5757;
  border-color: #eb5757;
  color: #000;
}

div.orderOwnerPromptWrapper > div.buttonsWrapper > button.changeOwnerBtn {
  background-color: #f2994a;
  border-color: #f2994a;
  color: #000;
}

order-view-pdf-preview {
  height: calc(100dvh - 30px - 50px - 100px - 55px - var(--toggle-menu-btn-square-size) / 2);
  margin: 30px 15px 0 15px;
  overflow: auto;
}

div.orderViewPdfPreview {
  display: flex;
  box-sizing: border-box;
  padding: 0;
  height: 100%;
}
div.orderViewPdfPreview div#pdfPreview {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  display: flex;
  flex-direction: column;
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.8);
}
div.orderViewPdfPreview div#pdfPreview::-webkit-scrollbar {
  width: 5px;
}
div.orderViewPdfPreview div#pdfPreview::-webkit-scrollbar-thumb {
  background-color: #666666;
}
div.orderViewPdfPreview div#pdfPreview > div#pdfPreviewLoading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
div.orderViewPdfPreview div#pdfPreview > div#pdfPreviewLoading > div {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 100%;
}

div.orderViewMenuWrapper {
  height: calc(100dvh - 50px);
}
div.orderViewMenuWrapper aside.orderDetailsActions {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 10px;
  width: 100%;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  div.orderViewMenuWrapper aside.orderDetailsActions {
    padding: 0.625em 0.75em;
  }
}
@media only screen and (min-width: 1024px) {
  div.orderViewMenuWrapper aside.orderDetailsActions {
    padding: 0.625em 1.25em;
  }
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper {
  margin-bottom: 30px;
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > h1 {
  font-size: 0.8rem;
  color: #c6c6c6;
  font-weight: lighter;
  text-transform: uppercase;
  margin: 15px 0;
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  color: #fff;
  font-size: 1rem;
  border-bottom: 1px solid #868686;
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a:not(:last-child) {
  margin-bottom: 10px;
  padding-bottom: 15px;
}
@media only screen and (min-width: 568px) {
  div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a {
    padding: 14px 0;
  }
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a:last-child {
  border-bottom: none;
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a.progressable {
  gap: 0.5rem;
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a > i.fa::before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a > div.progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  column-gap: 0.2em;
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a > div.progress.hidden {
  visibility: hidden;
}
div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a > div.progress > span {
  min-width: 4ch;
  text-align: center;
}
div.orderViewMenuWrapper .disabled {
  opacity: 0.5;
  cursor: wait;
}
div.orderViewMenuWrapper .orderViewMenuHeader > button {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  margin: 0 0 0 auto;
  width: auto;
  height: auto;
  padding: 0.25rem;
  display: block;
}
@media only screen and (min-width: 768px) {
  div.orderViewMenuWrapper .orderViewMenuHeader {
    display: none;
  }
}

div.orderViewProgressWrapper > div.progress {
  position: relative;
  margin: 30px 0;
}
div.orderViewProgressWrapper > div.progress > div.dots {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  z-index: 2;
}
div.orderViewProgressWrapper > div.progress > div.dots > div {
  width: 22px;
  height: 22px;
  background: #4a4a4d;
  border-radius: 50%;
}
div.orderViewProgressWrapper > div.progress > div.dots > div:last-child {
  border-radius: 0;
  transform: scale(0.8) rotate(45deg);
}
div.orderViewProgressWrapper > div.progress > div.dots > div.active {
  background: #009d4e;
}
div.orderViewProgressWrapper > div.progress > div.stripes {
  position: absolute;
  top: 8.5px;
  left: 0;
  width: 100%;
  height: 5px;
  z-index: 1;
  display: flex;
}
div.orderViewProgressWrapper > div.progress > div.stripes > div {
  background: #4a4a4d;
  width: 100%;
}
div.orderViewProgressWrapper > div.progress > div.stripes > div:first-child, div.orderViewProgressWrapper > div.progress > div.stripes > div:last-child {
  background: #666666;
}
div.orderViewProgressWrapper > div.progress > div.stripes > div.active {
  background: #009d4e;
}
div.orderViewProgressWrapper > div.labels {
  display: flex;
  justify-content: space-evenly;
}
div.orderViewProgressWrapper > div.labels > div {
  position: relative;
  width: 30px;
  color: #c6c6c6;
}
div.orderViewProgressWrapper > div.labels > div > div {
  min-width: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 0.65rem;
  color: #fff;
}
@media only screen and (min-width: 568px) {
  div.orderViewProgressWrapper > div.labels > div > div {
    font-size: 0.7rem;
  }
}
@media only screen and (min-width: 768px) {
  div.orderViewProgressWrapper > div.labels > div > div {
    font-size: 0.9rem;
  }
}

div.customCalendarWrapper {
  width: 100%;
  height: 100%;
  background-color: var(--calend9r-background-color, #fff);
  z-index: 1000000;
  border-radius: 5px;
}
div.customCalendarWrapper > div.monthWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
div.customCalendarWrapper > div.monthWrapper > div {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 414px) {
  div.customCalendarWrapper > div.monthWrapper > div {
    flex-direction: row;
  }
}
div.customCalendarWrapper > div.monthWrapper > div > span {
  color: #333;
}
div.customCalendarWrapper > div.monthWrapper > div > span:first-child {
  margin-right: 0.25rem;
}
div.customCalendarWrapper > div.monthWrapper > button {
  background-color: #EFEFF4;
  padding: 10px 30px;
  border: none;
  cursor: pointer;
}
div.customCalendarWrapper > div.calendarGrid {
  margin: 1rem 0 0 0;
}
div.customCalendarWrapper > div.calendarGrid > div.calendarHeader {
  margin-bottom: 0.5rem;
}
div.customCalendarWrapper > div.calendarGrid > div.calendarHeader > div {
  font-weight: bold;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
div.customCalendarWrapper > div.calendarGrid > div.calendarContent > button {
  border: none;
  border-bottom: 2px solid var(--calend9r-items-border-bottom, #f2f2f2);
  background-color: transparent;
  padding: 0.5rem;
  cursor: pointer;
}
@media only screen and (min-width: 414px) {
  div.customCalendarWrapper > div.calendarGrid > div.calendarContent > button {
    padding: 0.625rem 1rem;
  }
}
div.customCalendarWrapper > div.calendarGrid > div.calendarContent > button:disabled {
  opacity: 0.5;
  color: #000;
  cursor: unset;
}
div.customCalendarWrapper > div.calendarGrid > div.calendarContent > button.selected {
  background-color: var(--calend9r-selected-items-background-color, #009d4e);
  color: var(--calend9r-selected-items-color, #fff);
}
div.customCalendarWrapper > div.calendarGrid > div.calendarContent > button.current-day {
  background-color: var(--calend9r-current-day-color, #d9d9d9);
}
div.customCalendarWrapper > div.calendarGrid > div.calendarHeader, div.customCalendarWrapper > div.calendarGrid > div.calendarContent {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
div.customCalendarWrapper > div.calendarGrid > div.calendarHeader > div, div.customCalendarWrapper > div.calendarGrid > div.calendarContent > div {
  text-align: center;
}

#vMedia div#sharedFilesWrapper #mediaToolbar,
#vMedia #filesWrapper #mediaToolbar {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  position: absolute;
  bottom: -1px;
  left: 0;
  padding: 5px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar,
  #vMedia #filesWrapper #mediaToolbar {
    padding: 10px;
  }
}
#vMedia div#sharedFilesWrapper #mediaToolbar::before,
#vMedia #filesWrapper #mediaToolbar::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  -webkit-backdrop-filter: blur(13.5px);
  backdrop-filter: blur(13.5px);
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader {
  --toolbar-header-height: 35px;
  height: var(--toolbar-header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader,
  #vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader {
    --toolbar-header-height: 40px;
  }
}
@media only screen and (min-width: 1280px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader,
  #vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader {
    height: auto;
  }
}
#vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader > a,
#vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader > a {
  color: #fff;
  cursor: pointer;
}
@media only screen and (min-width: 1280px) {
  #vMedia div#sharedFilesWrapper #mediaToolbar > div.mediaToolbarHeader > a,
  #vMedia #filesWrapper #mediaToolbar > div.mediaToolbarHeader > a {
    display: none;
  }
}

div.window.details > section.modalHeader.modalHeader,
div.window.customers > section.modalHeader.modalHeader,
div.window.confirmEmail > section.modalHeader.modalHeader,
div.window.prepareEmail > section.modalHeader.modalHeader,
div.window.summary > section.modalHeader.modalHeader {
  background-color: #292929;
  height: 40px;
  padding: 0 0.5rem;
}
div.window.details > section.modalHeader.modalHeader > a,
div.window.customers > section.modalHeader.modalHeader > a,
div.window.confirmEmail > section.modalHeader.modalHeader > a,
div.window.prepareEmail > section.modalHeader.modalHeader > a,
div.window.summary > section.modalHeader.modalHeader > a {
  color: #f2f2f2;
}
div.window.details > section.modalHeader.modalHeader > a > i,
div.window.customers > section.modalHeader.modalHeader > a > i,
div.window.confirmEmail > section.modalHeader.modalHeader > a > i,
div.window.prepareEmail > section.modalHeader.modalHeader > a > i,
div.window.summary > section.modalHeader.modalHeader > a > i {
  font-size: 0.875rem;
}
div.window.details > section.modalContent,
div.window.customers > section.modalContent,
div.window.confirmEmail > section.modalContent,
div.window.prepareEmail > section.modalContent,
div.window.summary > section.modalContent {
  max-height: calc(95dvh - 40px - 50px);
}
div.window.details > section.modalContent.withoutFooter,
div.window.customers > section.modalContent.withoutFooter,
div.window.confirmEmail > section.modalContent.withoutFooter,
div.window.prepareEmail > section.modalContent.withoutFooter,
div.window.summary > section.modalContent.withoutFooter {
  max-height: calc(95dvh - 40px);
}
div.window.details > section.modalContent label,
div.window.customers > section.modalContent label,
div.window.confirmEmail > section.modalContent label,
div.window.prepareEmail > section.modalContent label,
div.window.summary > section.modalContent label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
div.window.details > section.modalContent textarea,
div.window.customers > section.modalContent textarea,
div.window.confirmEmail > section.modalContent textarea,
div.window.prepareEmail > section.modalContent textarea,
div.window.summary > section.modalContent textarea {
  width: 100%;
  box-shadow: inset 0 0 2px 0 #474747;
  border: none;
  outline: none;
  border-radius: 5px;
  min-height: 150px;
  padding: 0.5rem;
  resize: none;
}
div.window.details > section.modalFooter,
div.window.customers > section.modalFooter,
div.window.confirmEmail > section.modalFooter,
div.window.prepareEmail > section.modalFooter,
div.window.summary > section.modalFooter {
  border-top: none;
  background-color: #e4e4e4;
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  height: 50px;
}
div.window.details > section.modalFooter > button.confirm-btn,
div.window.customers > section.modalFooter > button.confirm-btn,
div.window.confirmEmail > section.modalFooter > button.confirm-btn,
div.window.prepareEmail > section.modalFooter > button.confirm-btn,
div.window.summary > section.modalFooter > button.confirm-btn {
  background-color: #f2994a;
  border-color: #f2994a;
  color: #fff;
  height: fit-content;
  margin: auto 0;
}
div.window.details > section.modalFooter > button.confirm-btn > i,
div.window.customers > section.modalFooter > button.confirm-btn > i,
div.window.confirmEmail > section.modalFooter > button.confirm-btn > i,
div.window.prepareEmail > section.modalFooter > button.confirm-btn > i,
div.window.summary > section.modalFooter > button.confirm-btn > i {
  margin-left: 0.5rem;
}
div.window.details > section.modalContent button, div.window.details > section.modalContent button > i, div.window.details > section.modalFooter button, div.window.details > section.modalFooter button > i,
div.window.customers > section.modalContent button,
div.window.customers > section.modalContent button > i,
div.window.customers > section.modalFooter button,
div.window.customers > section.modalFooter button > i,
div.window.confirmEmail > section.modalContent button,
div.window.confirmEmail > section.modalContent button > i,
div.window.confirmEmail > section.modalFooter button,
div.window.confirmEmail > section.modalFooter button > i,
div.window.prepareEmail > section.modalContent button,
div.window.prepareEmail > section.modalContent button > i,
div.window.prepareEmail > section.modalFooter button,
div.window.prepareEmail > section.modalFooter button > i,
div.window.summary > section.modalContent button,
div.window.summary > section.modalContent button > i,
div.window.summary > section.modalFooter button,
div.window.summary > section.modalFooter button > i {
  display: flex;
  align-items: center;
}

div.window.details {
  min-height: 450px;
}
div.window.details section.modalContent {
  display: flex;
  flex-direction: column;
  padding: 0 0 1.5rem 0;
}
div.window.details section.modalContent > h3.header {
  background-color: #f2f2f2;
  font-size: 0.75rem;
  font-weight: normal;
  padding: 0.5rem 0;
  margin: 0;
  text-align: center;
}
div.window.details section.modalContent > form.mediaDetails > div div.customCalendarDropdownWrapper > input {
  height: auto;
  border-bottom: unset;
}
div.window.details section.modalContent > form.mediaDetails > div div.customCalendarDropdownWrapper > div.dropdownContent {
  top: 35px;
  left: auto;
  right: 0;
}
@media only screen and (min-width: 768px) {
  div.window.details section.modalContent > form.mediaDetails > div div.customCalendarDropdownWrapper > div.dropdownContent {
    width: 100%;
    left: 0;
    right: auto;
  }
}
div.window.details section.modalContent > form.mediaDetails > div div.customCalendarDropdownWrapper div.calendarContent > button {
  justify-content: center;
  padding: 0.25rem 0.5rem;
}
@media only screen and (min-width: 768px) {
  div.window.details section.modalContent > form.mediaDetails > div div.customCalendarDropdownWrapper div.calendarContent > button {
    padding: 0.375rem 0.5rem;
  }
}
div.window.details section.modalContent > form.mediaDetails > div div.customCalendarDropdownWrapper div.monthWrapper > div {
  text-align: center;
}
div.window.details section.modalContent > form.mediaDetails > div.calendar > div.info {
  grid-column: 1/span 2;
  text-align: right;
}
div.window.details section.modalContent > form.mediaDetails > div.calendar > div.info > strong {
  white-space: nowrap;
}
div.window.details section.modalContent > button {
  margin: 2rem 0.5rem 0.5rem auto;
  background-color: #f2994a;
  color: #fff;
  border-color: #f2994a;
  display: flex;
  align-items: center;
}
div.window.details section.modalContent > button > span {
  font-weight: bold;
}
div.window.details section.modalContent > button > i {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}
div.window.details section.modalFooter {
  background-color: #fff;
}

div.window.customers {
  width: 95dvw;
}
div.window.customers > section.modalContent {
  padding: 0;
  height: 95dvh;
}

#shareMediaResults {
  background-color: #333333;
  font-family: "latoregular";
  color: #fff;
}
#shareMediaResults > .shareMediaContent {
  height: 100%;
}
#shareMediaResults > .shareMediaContent > .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
#shareMediaResults > #obHeader {
  background-color: #252525;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#shareMediaResults > #obHeader #headerCenter {
  width: 100%;
}
#shareMediaResults > #obHeader #obLogo {
  margin: 0;
}
#shareMediaResults > .footer-media-share > #introFooter {
  box-shadow: none;
  background-color: #252525;
}
#shareMediaResults > .footer-media-share #svFooterLogo {
  margin: 0;
}
#shareMediaResults > .footer-media-share nav {
  display: none;
}
#shareMediaResults #mediaNotFound {
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#shareMediaResults #mediaNotFound .icon-exclamation-mark {
  color: #EF8425;
  font-size: 8rem;
}
#shareMediaResults #mediaNotFound span {
  font-size: 2.25rem;
  font-weight: 700;
}
#shareMediaResults #mediaFound {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#shareMediaResults #mediaFound > #cloud {
  width: 100%;
  height: 15rem;
  background-image: url(4099f345179f3753d9e2.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
#shareMediaResults #mediaFound > #fileName {
  font-weight: 700;
  font-size: 2.25rem;
}
#shareMediaResults #mediaFound > #fileNotAvailableInfo, #shareMediaResults #mediaFound > #fileName {
  padding: 2rem;
}
#shareMediaResults #mediaFound > #fileMeta {
  border: 1px #fff solid;
  border-left: 0;
  border-right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
}
#shareMediaResults #mediaFound .fileInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-weight: 400;
  padding: 1rem 0 1rem 0;
  line-height: 1.25rem;
}
#shareMediaResults #mediaFound .fileInfo .leftCol {
  color: #BEBEBE;
  font-size: 0.875rem;
  text-align: right;
  width: 50%;
  padding-right: 0.5rem;
}
#shareMediaResults #mediaFound .fileInfo .rightCol {
  font-size: 1rem;
  text-align: left;
  width: 50%;
  padding-left: 0.5rem;
}
#shareMediaResults #mediaFound > #fileRemarks {
  padding-bottom: 1rem;
}
#shareMediaResults #mediaFound > .active {
  background-color: #009d4e;
  color: #f2f2f2;
  margin-top: 2rem;
}
#shareMediaResults #mediaFound > .downloading {
  background-color: #4F4F4F;
  cursor: not-allowed;
}
#shareMediaResults #mediaFound > .downloading > i {
  width: 1rem;
  height: 1rem;
}
#shareMediaResults #mediaFound > .downloading > i#downloadButtonIcon {
  display: inline-block;
  width: 0.875rem;
}
#shareMediaResults #mediaFound > a {
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  width: 160px;
  height: 50px;
  text-align: center;
  line-height: 1.25rem;
  background-color: #bdbdbd;
  color: #828282;
  display: flex;
  justify-content: center;
  align-items: center;
}
#shareMediaResults #mediaFound > a i::before {
  transform: translateY(2px);
}
#shareMediaResults #mediaFound > #fileNotAvailableInfo {
  font-size: 1rem;
  font-weight: 400;
}

div.window.confirmEmail {
  width: 95vw;
  height: 95vh;
}
div.window.confirmEmail > section.modalContent {
  padding: 1.5rem 0 0 0;
}
div.window.confirmEmail > section.modalContent > div.customerGrid {
  height: 100%;
  padding: 0 0 1rem 1rem;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridHeader {
  height: 50px;
  box-shadow: 0 8px 10px -10px #c6c6c6;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridHeader > div {
  color: #999999;
  font-size: 0.875rem;
}
@media only screen and (min-width: 768px) {
  div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridHeader > div {
    font-size: 1rem;
  }
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  height: calc(100% - 50px);
  overflow-y: auto;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent::-webkit-scrollbar {
  width: 5px;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent::-webkit-scrollbar-thumb {
  background-color: #666666;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow:nth-child(even) {
  background-color: #e4e4e4;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email {
  display: flex;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div {
  position: relative;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > a {
  display: flex;
  margin-left: 0.5rem;
  position: relative;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > a > i {
  display: flex;
  align-items: center;
  transform: rotate(90deg);
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #292929;
  border-color: #292929;
  padding: 1rem;
  width: 250px;
  border-radius: 6px;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover::after {
  left: 50%;
  background-color: #292929;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover.active {
  display: flex;
  flex-direction: column;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > h3 {
  margin: 0.5rem 0;
  color: #59595A;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > div {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > div:not(:last-child) {
  border-bottom: 1px solid #59595A;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > div > a {
  color: #fff;
  font-size: 0.875rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0.25rem 0;
  margin: 0;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > button.addEmailBtn {
  background-color: #f2994a;
  border-color: #f2994a;
  display: flex;
  align-items: center;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > button.addEmailBtn > i {
  margin-right: 0.5rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > button.addEmailBtn > i, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div.email > div > div.groupActionsPopover > button.addEmailBtn > span {
  color: #fff;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridHeader, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow {
  display: grid;
  grid-template-columns: 30% 30% 40%;
  border-radius: 5px;
}
div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridHeader > div, div.window.confirmEmail > section.modalContent > div.customerGrid > div.customerGridContent > div.customerGridRow > div {
  padding: 1rem;
}

div.window.prepareEmail > section.modalContent {
  padding: 0 1rem;
}
div.window.prepareEmail > section.modalContent > form > div {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0.5rem 0;
  align-items: center;
}
div.window.prepareEmail > section.modalContent > form > div:not(:last-child) {
  border-bottom: 1px solid #e4e4e4;
}
div.window.prepareEmail > section.modalContent > form > div > input {
  width: 100%;
}
div.window.prepareEmail > section.modalContent > form > div > textarea {
  grid-column: 1/span 2;
}
div.window.prepareEmail > section.modalContent > form > div > input, div.window.prepareEmail > section.modalContent > form > div > textarea {
  border: none;
  box-shadow: none !important;
}
div.window.prepareEmail > section.modalContent > form > div > input, div.window.prepareEmail > section.modalContent > form > div > textarea {
  box-shadow: none !important;
  outline: none;
}

div.window.summary {
  min-height: 400px;
}
div.window.summary > section.modalContent > div.mediaSummaryWrapper {
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}
div.window.summary > section.modalContent > div.mediaSummaryWrapper > div:not(:first-child) {
  margin-top: 0.5rem;
}
div.window.summary > section.modalContent > div.mediaSummaryWrapper > div.filesInfo {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-gap: 0.25rem;
}
div.window.summary > section.modalContent > div.mediaSummaryWrapper > div.filesInfo > span.counter {
  grid-column: 1/span 1;
}
div.window.summary > section.modalContent > div.mediaSummaryWrapper > div.filesInfo > span.label {
  grid-column: 2/span 1;
}
div.window.summary > section.modalContent > div.mediaSummaryWrapper > div.filesInfo > span.size {
  grid-column: 4/span 1;
}
div.window.summary > section.modalContent > div.mediaSummaryWrapper > button {
  background-color: #009d4e;
  border-color: #009d4e;
  color: #fff;
  margin-left: auto;
  margin-right: 0;
  margin-top: 2rem;
}
div.window.summary > section.modalContent > div.mediaSummaryWrapper > button > i {
  margin-right: 0.5rem;
}

div.customCalendarDropdownWrapper {
  position: relative;
}
div.customCalendarDropdownWrapper.expandLeft > div.dropdownContent {
  left: auto;
  right: 0;
}
div.customCalendarDropdownWrapper > input {
  height: 25px;
  border: none;
  border-bottom: 1px solid #333;
  background-color: #fff;
  outline: none;
  width: 100%;
  cursor: pointer;
}
div.customCalendarDropdownWrapper > div.dropdownContent {
  height: 0;
  overflow: hidden;
  position: absolute;
  background-color: #fff;
  z-index: 1000000;
  box-shadow: 0 0 10px -2px #000;
  padding: 0;
  top: 27px;
  left: 0;
}
div.customCalendarDropdownWrapper > div.dropdownContent.active, div.customCalendarDropdownWrapper > div.dropdownContent.focus {
  height: auto;
  padding: 5px;
}
div.customCalendarDropdownWrapper > i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

div#svToast {
  position: fixed;
  background-color: #f2f2f2;
  z-index: 1000000;
  bottom: 75px;
  right: 20px;
  box-shadow: 0 0 10px -2px #000;
  padding: 1rem;
  display: none;
  width: 90%;
}
@media only screen and (min-width: 768px) {
  div#svToast {
    max-width: 600px;
  }
}
div#svToast.active {
  display: block;
}
div#svToast > button.closeBtn {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #333;
  color: #fff;
  border-radius: 50%;
  border: none;
  outline: none;
  padding: 0;
  transform: translate(30%, -30%);
}
div#svToast > button.closeBtn > i {
  font-size: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
div#svToast > h2 {
  margin-top: 0;
}
div#svToast > p {
  margin: 0;
}

div.passRequirements {
  color: #a9a9a9;
  font-size: 1rem;
}
div.passRequirements > p.requirementHeader {
  margin: 0 0 1em 0;
  text-align: left;
}
div.passRequirements > p.requirementHeader:not(:first-child) {
  margin: 1rem 0;
}
div.passRequirements > div.requirement {
  display: flex;
  align-items: center;
}
div.passRequirements > div.requirement > span {
  color: #333;
}
div.passRequirements > div.requirement > i {
  color: #4F4F4F;
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
  font-size: 1.375rem;
  position: relative;
}
div.passRequirements > div.requirement > i.valid {
  color: #009d4e;
}
div.passRequirements > div.requirement > i::before {
  z-index: 2;
  position: relative;
}
div.passRequirements > div.requirement > i::after {
  content: "";
  width: 0.825rem;
  height: 0.825rem;
  position: absolute;
  border-radius: 50%;
  background-color: #f2f2f2;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

*.blocked div.lQty, *.blocked div.orderName, *.blocked form.search {
  cursor: not-allowed;
}
*.blocked div.lQty input, *.blocked div.orderName input, *.blocked form.search input {
  pointer-events: none;
}

barcode-scanner {
  padding-right: 10px;
  position: relative;
}
barcode-scanner #barcode-scanner-toggle {
  background-color: transparent;
  pointer-events: auto;
  padding: 5px;
}
barcode-scanner #barcode-scanner-toggle.scanner-active > i {
  color: #009d4e;
  opacity: 1;
  transition: opacity 100ms ease-in-out;
}
barcode-scanner #barcode-scanner-toggle > i {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  color: #f8f8f8;
  opacity: 0.8;
  transition: opacity 100ms ease-in-out;
}

div#svNumberInputWrapper {
  position: relative;
}
div#svNumberInputWrapper > input.customInput {
  width: 100px;
  color: #000;
  user-select: none !important;
}
div#svNumberInputWrapper > div.display {
  position: absolute;
  background-color: #fff;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  clip-path: inset(0 0 0 calc(100% - 1.35em));
}
div#svNumberInputWrapper > div.display > span {
  color: #000;
}
div#svNumberInputWrapper > input.customInput:focus + div.display {
  display: none;
}

div#orderEmailWrapper div.window.orderEmailForm > section.modalHeader.modalHeader, div#orderEmailWrapper div.window.orderEmailPreview > section.modalHeader.modalHeader {
  padding: 0.75rem 0.5rem;
  background-color: #292929;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalHeader.modalHeader > a, div#orderEmailWrapper div.window.orderEmailPreview > section.modalHeader.modalHeader > a {
  color: #fff;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalContent, div#orderEmailWrapper div.window.orderEmailPreview > section.modalContent {
  --modal-subheader-height: 30px;
  background-color: #f2f2f2;
  padding: 0;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalContent > h3.header, div#orderEmailWrapper div.window.orderEmailPreview > section.modalContent > h3.header {
  height: var(--modal-subheader-height);
  background-color: #e0e0e0;
  font-size: 0.75rem;
  font-weight: normal;
  padding: 0.5rem 0;
  margin: 0;
  text-align: center;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter.modalFooter, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter.modalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: #f2f2f2;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter.modalFooter > button, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter.modalFooter > button {
  border: none;
  font-weight: bold;
  display: flex;
  align-items: center;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter.modalFooter > button.grayBtn, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter.modalFooter > button.grayBtn {
  background-color: #bdbdbd;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter.modalFooter > button.orangeBtn, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter.modalFooter > button.orangeBtn {
  background-color: #f2994a;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter.modalFooter > button.isLoading, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter.modalFooter > button.isLoading {
  cursor: wait;
  opacity: 0.5;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter.modalFooter > button > i.icon-union, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter.modalFooter > button > i.icon-union {
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
}
div#orderEmailWrapper div.window.orderEmailForm > section.modalContent > button:hover, div#orderEmailWrapper div.window.orderEmailForm > section.modalFooter.modalFooter > button:hover, div#orderEmailWrapper div.window.orderEmailPreview > section.modalContent > button:hover, div#orderEmailWrapper div.window.orderEmailPreview > section.modalFooter.modalFooter > button:hover {
  filter: brightness(85%);
  transition: filter 300ms ease-in-out;
}

#orderView div.orderEmailForm section.modalContent > form {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  overflow: auto;
  display: block;
}
#orderView div.orderEmailForm section.modalContent > form::-webkit-scrollbar {
  width: 5px;
}
#orderView div.orderEmailForm section.modalContent > form::-webkit-scrollbar-thumb {
  background-color: #666666;
}
#orderView div.orderEmailForm section.modalContent > form > small {
  display: block;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: #bdbdbd;
}
#orderView div.orderEmailForm section.modalContent > form > div.subjectWrapper {
  margin-top: 0;
}
#orderView div.orderEmailForm section.modalContent > form > div > sv-chips {
  width: 100%;
  overflow: hidden;
}

#orderView div.orderEmailPreview > section.modalContent {
  height: 100%;
  min-height: 340px;
  overflow: hidden;
}
#orderView div.orderEmailPreview > section.modalContent > div.previewWrapper {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  height: calc(100% - var(--modal-subheader-height));
  overflow: auto;
}
#orderView div.orderEmailPreview > section.modalContent > div.previewWrapper::-webkit-scrollbar {
  width: 5px;
}
#orderView div.orderEmailPreview > section.modalContent > div.previewWrapper::-webkit-scrollbar-thumb {
  background-color: #666666;
}
#orderView div.orderEmailPreview > section.modalContent > div.previewWrapper.loading {
  display: flex;
}
#orderView div.orderEmailPreview > section.modalContent > div.previewWrapper > div.previewContent {
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
}
#orderView div.orderEmailPreview > section.modalContent > div.previewWrapper > div.newLoader {
  margin: auto;
}

div.chipsWrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: inset 0 0 2px 0 #474747;
  cursor: text;
}
div.chipsWrapper.emptyChips {
  padding: 0;
}
div.chipsWrapper > div.chip {
  max-width: 100%;
  height: 35px;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
  background-color: #d9d9d9;
  border-radius: 5px;
  font-size: 0.875rem;
  cursor: auto;
}
div.chipsWrapper > div.chip > span {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  white-space: nowrap;
  pointer-events: none;
}
div.chipsWrapper > div.chip > button {
  height: 100%;
  cursor: pointer;
  margin-left: 0.5rem;
  font-size: 1.5rem;
  border: none;
  background-color: transparent;
  color: #333;
  border-left: 1px solid #333;
  border-radius: 0;
  padding: 0 0 0 0.5rem;
  display: flex;
  align-items: center;
}
div.chipsWrapper > div.chipInputWrapper {
  display: flex;
  height: 35px;
  padding: 0.5rem;
  border-radius: 5px;
}
div.chipsWrapper > div.chipInputWrapper > input {
  padding: 0;
  border: none;
  box-shadow: none;
  min-width: 120px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
div.chipsWrapper > div.chipInputWrapper > input::placeholder {
  opacity: 0.5;
}
div.chipsWrapper > div.chipInputWrapper > input, div.chipsWrapper > div.chipInputWrapper > input::placeholder {
  color: #333;
  font-size: 0.875rem;
}
div.chipsWrapper > div.chipInputWrapper > button {
  background-color: #d9d9d9;
  color: #333;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  display: flex;
  align-items: center;
  padding: 0 0 0 0.5rem;
  border-left: 1px solid #333;
  margin-left: 0.5rem;
}
div.chipsWrapper > div.chipInputWrapper > button:disabled {
  cursor: not-allowed;
}

.customer-statistics {
  --sv-select-height: 40px;
  padding-top: 30px;
}
.customer-statistics .breakdown .column .header, .customer-statistics .stats-details .total > span {
  font-weight: bold;
  color: #999999;
  padding-bottom: 4px;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.customer-statistics .stats-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.customer-statistics .stats-header .date-inputs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  width: 100%;
  justify-content: flex-end;
  padding: 0 10px;
}
@media only screen and (min-width: 568px) {
  .customer-statistics .stats-header .date-inputs {
    flex-direction: row;
  }
}
.customer-statistics .stats-header .date-inputs sv-select,
.customer-statistics .stats-header .date-inputs sv-tooltip {
  width: 100%;
}
@media only screen and (min-width: 568px) {
  .customer-statistics .stats-header .date-inputs sv-select,
  .customer-statistics .stats-header .date-inputs sv-tooltip {
    width: auto;
  }
}
.customer-statistics .stats-header .date-inputs > sv-select {
  min-width: 50px;
}
.customer-statistics .stats-header .date-inputs > sv-select > div.svSelect > a.toggle {
  background-position: top 50% right 10px !important;
}
.customer-statistics .stats-header .date-inputs > sv-select > div.svSelect > div.dropdownContent {
  padding: 5px 0;
}
.customer-statistics .stats-header .date-inputs > sv-tooltip > div.sv-tooltip-container > button {
  background-color: #f2f2f2;
  border-radius: 5px;
}
.customer-statistics .stats-item {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 15px;
}
@media (max-width: 1080px) {
  .customer-statistics .stats-item {
    flex-direction: column;
    align-items: unset;
  }
}
.customer-statistics .stats-chart {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.customer-statistics .stats-details {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.customer-statistics .stats-details .total {
  display: flex;
  flex-direction: column;
  font-size: 1.125rem;
  font-weight: bold;
}
@media (max-width: 1080px) {
  .customer-statistics .stats-details .total {
    align-items: center;
  }
}
.customer-statistics .breakdown {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  border-left: none;
  border-right: none;
  margin-top: 10px;
}
.customer-statistics .breakdown .column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  padding: 0 20px;
  flex-direction: column;
  max-width: 100%;
}
.customer-statistics .breakdown .column:not(:first-child) {
  border-left: 1px solid #c6c6c6;
}
.customer-statistics .breakdown .column:not(:first-child) > div {
  align-self: flex-start;
}
.customer-statistics .breakdown .column:first-child {
  padding-left: 0;
}
.customer-statistics .breakdown .column:first-child > div {
  align-self: flex-end;
}
.customer-statistics .breakdown .column div {
  padding: 6px 0;
  width: 100%;
}
.customer-statistics .no-data {
  text-align: center;
  padding: 20px;
  color: #666666;
}

div.sv-tooltip-container {
  position: relative;
}
div.sv-tooltip-container.active {
  z-index: 1000000;
}
div.sv-tooltip-container button {
  cursor: pointer;
}
div.sv-tooltip-container > button {
  width: 100%;
  height: 40px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "text . chevron";
  grid-gap: 0.5rem;
  padding: 10px;
}
div.sv-tooltip-container > button.customIcon {
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "customIcon text . chevron";
}
div.sv-tooltip-container > button > i {
  display: flex;
  align-items: center;
}
div.sv-tooltip-container > button > i.customIcon {
  grid-area: customIcon;
}
div.sv-tooltip-container > button > i.icon-chevron-down {
  grid-area: chevron;
}
div.sv-tooltip-container > button > span {
  grid-area: text;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
}
div.sv-tooltip-container > div.tooltip-list-wrapper {
  display: none;
  width: 100%;
  max-height: 300px;
  flex-direction: column;
  position: absolute;
  top: calc(40px + 10px);
  right: 0;
  background-color: #252525;
}
div.sv-tooltip-container > div.tooltip-list-wrapper::after {
  background-color: #252525;
}
div.sv-tooltip-container > div.tooltip-list-wrapper.active {
  display: block;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > div.tooltip-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > div.tooltip-list > button {
  color: #f2f2f2;
  text-align: left;
  padding: 10px;
  background-color: #252525;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 100;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > div.tooltip-list > button.divider {
  border-bottom: 1px solid #444444;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > div.tooltip-list > button:hover {
  background-color: rgb(62.5, 62.5, 62.5);
}
div.sv-tooltip-container > div.tooltip-list-wrapper > div.tooltip-list > button:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
div.sv-tooltip-container > div.tooltip-list-wrapper > div.tooltip-list > button:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

a.sv-tooltip-glass {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  left: 0;
  top: 0;
  background-color: rgba(37, 37, 37, 0.2);
  z-index: 1002;
  cursor: auto;
}

div.cartGrid {
  background: #fff;
  display: grid;
  font-size: 0.5rem;
  font-weight: lighter;
  color: #000;
  grid-template-columns: var(--mobile-template-columns);
  grid-template-areas: var(--mobile-template-areas);
  padding: 0.5rem;
}
@media only screen and (min-width: 568px) {
  div.cartGrid {
    padding: 5px;
    font-size: 0.6rem;
  }
}
@media only screen and (min-width: 768px) {
  div.cartGrid {
    font-size: 0.8rem;
    grid-template-columns: var(--desktop-template-columns);
    grid-template-areas: var(--desktop-template-areas);
    grid-gap: 0;
    padding: 1rem 0.5rem 1.5rem 0.5rem;
  }
}
@media only screen and (min-width: 1024px) {
  div.cartGrid {
    font-size: 1rem;
  }
}
div.cartGrid.header {
  box-shadow: inset 0 -1px 0 0 #787878;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
  display: none;
  align-items: baseline;
}
@media only screen and (min-width: 768px) {
  div.cartGrid.header {
    display: grid;
  }
}
div.cartGrid.header > div {
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  div.cartGrid.header > div.mobileOnly {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  div.cartGrid.header > div {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 768px) {
  div.cartGrid.header > div {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 568px) {
  div.cartGrid.header > div {
    writing-mode: unset;
    text-orientation: unset;
    transform: none;
  }
}
div.cartGrid > ng-include > div.variant, div.cartGrid > ng-include > div.summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 5px;
}
div.cartGrid > ng-include > div.variant:not(:last-child), div.cartGrid > ng-include > div.summary:not(:last-child) {
  margin-bottom: 0.75rem;
}
@media only screen and (min-width: 768px) {
  div.cartGrid > ng-include > div.variant, div.cartGrid > ng-include > div.summary {
    display: contents;
    padding: 0;
  }
}
div.cartGrid > *, div.cartGrid > ng-include > div.variant > *, div.cartGrid > ng-include > div.summary > * {
  overflow: hidden;
  padding: 0 1px;
  font-size: 0.875rem;
}
@media only screen and (min-width: 414px) {
  div.cartGrid > *, div.cartGrid > ng-include > div.variant > *, div.cartGrid > ng-include > div.summary > * {
    font-size: 1rem;
  }
}
@media only screen and (min-width: 568px) {
  div.cartGrid > *, div.cartGrid > ng-include > div.variant > *, div.cartGrid > ng-include > div.summary > * {
    padding: 0 2px;
  }
}
div.cartGrid .icon-button {
  width: 16px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 568px) {
  div.cartGrid .icon-button {
    width: 50px;
  }
}
div.cartGrid .icon-button > i {
  pointer-events: none;
}
div.cartGrid .icon-button > i::before {
  color: #000;
}
div.cartGrid div.cartNumber {
  grid-area: number;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
}
@media only screen and (min-width: 568px) {
  div.cartGrid div.cartNumber {
    text-align: center;
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartNumber {
    grid-row: 1/span 6;
    margin-right: 0;
  }
}
@media only screen and (min-width: 1024px) {
  div.cartGrid div.cartNumber {
    flex-direction: row;
  }
}
div.cartGrid div.cartNumber > a {
  display: flex;
  justify-content: center;
}
div.cartGrid div.cartNumber > a.number {
  color: #000;
}
div.cartGrid div.cartNumber > a.pseudoCheckbox {
  display: flex !important;
}
div.cartGrid div.cartNumber > a.pseudoCheckbox > i {
  display: flex;
  align-items: center;
}
div.cartGrid div.cartNumber > a.pseudoCheckbox > i::before {
  font-size: 1.2rem;
  color: #000;
}
div.cartGrid div.cartPicture,
div.cartGrid a.cartPicture {
  grid-area: picture;
}
@media only screen and (min-width: 568px) {
  div.cartGrid div.cartPicture,
  div.cartGrid a.cartPicture {
    text-align: center;
    justify-content: center;
  }
}
div.cartGrid div.cartPicture > div.thumbFrame,
div.cartGrid a.cartPicture > div.thumbFrame {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0 !important;
  height: 60px;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartPicture > div.thumbFrame,
  div.cartGrid a.cartPicture > div.thumbFrame {
    height: 105px;
  }
}
div.cartGrid a.cartPicture {
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  div.cartGrid a.cartPicture {
    grid-row: 1/span 6;
    align-items: flex-start;
  }
}
div.cartGrid.productNoExists .cartDescription > span,
div.cartGrid.productNoExists .cartArticleNumber,
div.cartGrid.productNoExists .cartColorRefs {
  color: #eb5757;
}
div.cartGrid.productNoExists .noExistsBar {
  grid-column: 6/14;
  grid-row: calc(var(--variants-rows) + 2)/span 1;
  z-index: 1;
  background-color: #eb5757;
  color: #fff;
  font-size: 1rem;
  padding: 5px 10px;
  margin: 0.75rem 0;
}
div.cartGrid .variantNoExists {
  color: #eb5757;
}
div.cartGrid div.cartDescription {
  grid-area: description;
  word-break: break-all;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartDescription {
    font-size: 0.75rem;
  }
}
div.cartGrid div.cartDescription.noExistsWrapper {
  color: #eb5757;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartDescription.noExistsWrapper {
    grid-column: noExistsStart/variantBackgroundStripeStart;
  }
}
div.cartGrid div.cartDescription > div {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartDescription > div {
    display: block;
  }
}
div.cartGrid div.cartDescription > div > div {
  flex: 1;
}
div.cartGrid div.cartArticleNumber,
div.cartGrid div.cartColorRefs {
  border-top: 1px solid #e4e4e4;
  padding-top: 1rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartArticleNumber,
  div.cartGrid div.cartColorRefs {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    display: block;
  }
}
div.cartGrid div.cartArticleNumber {
  grid-area: articlenumber;
  word-break: break-word;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartArticleNumber {
    grid-row: auto;
  }
}
div.cartGrid div.cartArticleNumber > span {
  padding-left: 5px;
}
div.cartGrid div.cartColorRefs {
  grid-area: colorrefs;
  word-break: break-word;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartColorRefs {
    grid-row: auto;
  }
}
div.cartGrid div.customize-actions-box {
  grid-column: noExistsStart/variantBackgroundStripeStart;
  grid-area: customizeActionsBox;
  display: flex;
  flex-wrap: wrap;
}
div.cartGrid div.customize-actions-box > a {
  color: #000;
  border-radius: 5px;
  box-shadow: 0 0 0 1px #000;
  background: #fff;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  margin: 5px;
  font-weight: bolder;
}
div.cartGrid div.cartVariantSize {
  grid-area: variantsize;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartVariantSize {
    grid-row: auto;
  }
}
div.cartGrid div.cartVariantQuantity {
  grid-area: variantquantity;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartVariantQuantity {
    grid-row: auto;
  }
}
div.cartGrid div.cartVariantQuantity > span.itemQuantityTrim, div.cartGrid div.cartVariantQuantity > span.totalItemsTrim {
  color: #f29a4c;
  font-weight: 900;
}
div.cartGrid div.cartVariantItemPrice {
  grid-area: variantitemprice;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartVariantItemPrice {
    grid-row: auto;
  }
}
div.cartGrid div.cartVariantTotalPrice {
  grid-area: varianttotalprice;
  z-index: 2;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartVariantTotalPrice {
    grid-row: auto;
  }
}
div.cartGrid div.cartVariantTotalPrice > span.itemPriceTrim, div.cartGrid div.cartVariantTotalPrice > span.totalPriceTrim {
  color: #f29a4c;
  font-weight: 900;
}
div.cartGrid ng-include.variantsTable {
  display: block !important;
  font-size: 0.875em;
  grid-area: variants;
  padding-top: 1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  border-top: 1px solid #e4e4e4;
}
@media only screen and (min-width: 768px) {
  div.cartGrid ng-include.variantsTable {
    display: contents !important;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    border-top: none;
  }
}
div.cartGrid ng-include.variantsTable > div > * {
  word-break: break-all;
}
@media only screen and (min-width: 568px) {
  div.cartGrid ng-include.variantsTable > div > * {
    word-break: unset;
  }
}
@media only screen and (min-width: 768px) {
  div.cartGrid ng-include.variantsTable > div.variant-header {
    display: none;
  }
}
div.cartGrid ng-include.variantsTable > div.variant-header > div > span {
  font-weight: bold;
}
div.cartGrid ng-include.variantsTable > div.variant > * {
  grid-row: var(--grid-row)/span 1;
}
@media only screen and (min-width: 768px) {
  div.cartGrid ng-include.variantsTable > div.customizationsRow > * {
    grid-row: 2/span 1;
  }
}
div.cartGrid ng-include.variantsTable > div.summary {
  font-weight: bold;
  background-color: #e4e4e4;
  grid-template-areas: "variantsize variantquantity variantitemprice varianttotalprice" "discountPerProductLabel . . discountperproduct" ". . . discountPerProductPercent";
}
@media only screen and (min-width: 768px) {
  div.cartGrid ng-include.variantsTable > div.summary {
    background-color: transparent;
  }
}
@media only screen and (min-width: 768px) {
  div.cartGrid ng-include.variantsTable > div.summary > * {
    grid-row: calc(var(--variants-rows) + 1)/span 1;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  div.cartGrid ng-include.variantsTable > div.summary > *:first-child {
    padding-left: 5px;
  }
  div.cartGrid ng-include.variantsTable > div.summary > *:last-child {
    padding-right: 5px;
  }
}
div.cartGrid ng-include.variantsTable > div.variant {
  grid-template-areas: "variantsize variantquantity variantitemprice varianttotalprice";
}
div.cartGrid ng-include.variantsTable > div a.icon-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
div.cartGrid div.cartQuantity {
  grid-area: quantity;
}
@media only screen and (min-width: 568px) {
  div.cartGrid div.cartQuantity {
    text-align: center;
    justify-content: center;
  }
}
div.cartGrid div.cartDiscount {
  grid-area: discount;
  z-index: 2;
}
@media only screen and (min-width: 568px) {
  div.cartGrid div.cartDiscount {
    text-align: center;
    justify-content: center;
  }
}
div.cartGrid div.cartDiscountPerProductLabel {
  grid-area: discountPerProductLabel;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartDiscountPerProductLabel {
    display: none;
  }
}
div.cartGrid div.cartDiscountPerProduct {
  grid-area: discountperproduct;
  z-index: 2;
}
div.cartGrid div.cartDiscountPerProduct > span.totalPriceTrim {
  color: #f29a4c;
  font-weight: 900;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartDiscountPerProduct {
    text-align: center;
    justify-content: center;
  }
}
div.cartGrid div.cartDiscountPerProduct:not(.summary) {
  line-height: 3rem;
  display: none;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartDiscountPerProduct:not(.summary) {
    display: block;
  }
}
div.cartGrid div.cartDiscountPerProductPercent {
  grid-area: discountPerProductPercent;
}
div.cartGrid div.cartDiscountPerProductPercent.mobile-hidden {
  display: none;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartDiscountPerProductPercent {
    display: none;
  }
}
div.cartGrid div.cartCopy {
  grid-area: copy;
}
@media only screen and (min-width: 568px) {
  div.cartGrid div.cartCopy {
    text-align: center;
    justify-content: center;
  }
}
div.cartGrid div.cartDelete {
  grid-area: delete;
}
@media only screen and (min-width: 568px) {
  div.cartGrid div.cartDelete {
    text-align: center;
    justify-content: center;
  }
}
div.cartGrid div.cartQuantity,
div.cartGrid div.cartDiscount,
div.cartGrid div.cartDiscountPerProduct,
div.cartGrid div.cartCopy,
div.cartGrid div.cartDelete {
  overflow: visible;
  padding: 0.5rem;
}
div.cartGrid div.cartQuantity > a,
div.cartGrid div.cartDiscount > a,
div.cartGrid div.cartDiscountPerProduct > a,
div.cartGrid div.cartCopy > a,
div.cartGrid div.cartDelete > a {
  width: auto;
  height: auto;
  line-height: initial;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartQuantity > a,
  div.cartGrid div.cartDiscount > a,
  div.cartGrid div.cartDiscountPerProduct > a,
  div.cartGrid div.cartCopy > a,
  div.cartGrid div.cartDelete > a {
    width: 50px;
    height: 45px;
    line-height: 3.5rem;
  }
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.cartQuantity,
  div.cartGrid div.cartDiscount,
  div.cartGrid div.cartDiscountPerProduct,
  div.cartGrid div.cartCopy,
  div.cartGrid div.cartDelete {
    overflow: hidden;
  }
}
div.cartGrid div.variantBackgroundStripe {
  grid-column: variantBackgroundStripeStart/lastCol;
  background: #e4e4e4;
  z-index: 1;
  display: none;
}
@media only screen and (min-width: 768px) {
  div.cartGrid div.variantBackgroundStripe {
    display: block;
    grid-row: calc(var(--variants-rows) + 1)/span 1;
  }
}
div.cartGrid.header div.cartColorRefs,
div.cartGrid.header div.cartVariantQuantity,
div.cartGrid.header div.cartVariantSize,
div.cartGrid.header div.cartVariantItemPrice,
div.cartGrid.header div.cartVariantTotalPrice {
  align-items: flex-start;
}
@media only screen and (min-width: 568px) {
  div.cartGrid.header div.cartColorRefs,
  div.cartGrid.header div.cartVariantQuantity,
  div.cartGrid.header div.cartVariantSize,
  div.cartGrid.header div.cartVariantItemPrice,
  div.cartGrid.header div.cartVariantTotalPrice {
    align-items: center;
  }
}
div.cartGrid.row div.cartDescription {
  margin: 0.5rem 0;
}
@media only screen and (min-width: 768px) {
  div.cartGrid.row div.cartDescription {
    grid-row: 1/span 6;
    margin: 0;
  }
}
@media only screen and (min-width: 768px) {
  div.cartGrid.row div.cartArticleNumber {
    grid-row: 1/span 6;
  }
}
@media only screen and (min-width: 768px) {
  div.cartGrid.row div.cartColorRefs {
    grid-row: 1/span 6;
  }
}
div.cartGrid.row div.cartQuantity {
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  div.cartGrid.row div.cartQuantity {
    grid-row: 1/span 4;
  }
}
div.cartGrid.row div.cartCopy {
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  div.cartGrid.row div.cartCopy {
    grid-row: 1/span 4;
  }
}
div.cartGrid.row div.cartDelete {
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  div.cartGrid.row div.cartDelete {
    grid-row: 1/span 4;
  }
}

div.sortable:first-child {
  border-top: 1px solid #e4e4e4;
}
@media only screen and (min-width: 768px) {
  div.sortable:nth-child(2n) div.cartGrid {
    background: #f8f8f8;
  }
}
@media only screen and (min-width: 768px) {
  div.sortable:not(:last-child) div.row {
    bbox-shadow: inset 0 -1px 0 0 #DDDCDF;
  }
}
div.sortable div.row {
  box-shadow: inset 0 -1px 0 0 #DDDCDF, 0 2px 5px -2px #000;
  border-radius: 10px;
  margin: 1rem 0.25rem;
}
@media only screen and (min-width: 768px) {
  div.sortable div.row {
    box-shadow: inset 0 -1px 0 0 #DDDCDF;
    border-radius: 0;
    margin: 0;
  }
}

debug.debugCheckboxes button.debugingGridToggle {
  background: rgba(255, 0, 0, 0.4);
}
debug.debugCheckboxes button.debugingGridToggle.active {
  background: rgba(0, 128, 0, 0.4);
}
debug.debugCheckboxes div.labels {
  display: flex;
}
debug.debugCheckboxes div.labels label {
  padding: 0 10px;
  font-size: 10px;
}
debug.debugCheckboxes div.labels label > input[type=checkbox] {
  width: 25px;
  height: 25px;
  background: rgba(255, 0, 0, 0.5);
}
debug.debugCheckboxes div.labels label > input[type=checkbox]:checked {
  background: red;
}

.center-logo {
  text-align: center;
}

/*=== HELPERS ===*/
.sm-hide {
  display: none !important;
}
@media only screen and (min-width: 768px) {
  .sm-hide {
    display: block !important;
  }
}

.sm-inline-hide {
  display: none !important;
}
@media only screen and (min-width: 768px) {
  .sm-inline-hide {
    display: inline-block !important;
  }
}

.sm-show {
  display: block !important;
}
@media only screen and (min-width: 768px) {
  .sm-show {
    display: none !important;
  }
}

.cell-sm-hide {
  display: none;
}
@media only screen and (min-width: 768px) {
  .cell-sm-hide {
    display: table-cell;
  }
}

.align-center {
  text-align: center !important;
}

.align-right {
  text-align: right !important;
}

.align-left {
  text-align: left !important;
}

.actionsButtons {
  width: 100%;
  padding: 20px 5px;
}
.actionsButtons > * {
  float: right;
}

/* === SEASONS ============================================================== */
section.seasons {
  display: block;
  width: 100%;
  height: 50px;
  overflow-x: scroll;
}
section.seasons > ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
section.seasons > ul > li {
  display: flex;
  align-items: center;
  height: 50px;
  color: #000;
  background-color: #999999;
  width: 150px;
  margin: 0;
  padding: 5px;
  list-style: none;
  margin-right: 5px;
  font-size: 11px;
}
section.seasons > ul > li.active {
  background-color: transparent;
  /*box-shadow: inset 0 -1px 0 0 #ddd;*/
}

div.productFooterButtonsWrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
div.productFooterButtonsWrapper .svButton, div.productFooterButtonsWrapper #showOrderView > header #downloadPDF, #showOrderView > header div.productFooterButtonsWrapper #downloadPDF, div.productFooterButtonsWrapper section.packages-list-component section.packagesToolbar > button.closeModal, section.packages-list-component div.productFooterButtonsWrapper section.packagesToolbar > button.closeModal {
  margin: 0 2px;
  flex-shrink: 0;
  justify-content: center;
}
div.productFooterButtonsWrapper .svButton.svButton:not(.svButtonIcon) > i, div.productFooterButtonsWrapper #showOrderView > header #downloadPDF:not(.svButtonIcon) > i, #showOrderView > header div.productFooterButtonsWrapper #downloadPDF:not(.svButtonIcon) > i, div.productFooterButtonsWrapper section.packages-list-component section.packagesToolbar > button.closeModal:not(.svButtonIcon) > i, section.packages-list-component div.productFooterButtonsWrapper section.packagesToolbar > button.closeModal:not(.svButtonIcon) > i {
  height: 1em;
  line-height: 1em;
}
div.productFooterButtonsWrapper .svButton.svButtonIcon, div.productFooterButtonsWrapper #showOrderView > header .svButtonIcon#downloadPDF, #showOrderView > header div.productFooterButtonsWrapper .svButtonIcon#downloadPDF, div.productFooterButtonsWrapper section.packages-list-component section.packagesToolbar > button.svButtonIcon.closeModal, section.packages-list-component div.productFooterButtonsWrapper section.packagesToolbar > button.svButtonIcon.closeModal {
  box-sizing: border-box;
  border: none;
}
div.productFooterButtonsWrapper .svButton.svButtonIcon > i, div.productFooterButtonsWrapper #showOrderView > header .svButtonIcon#downloadPDF > i, #showOrderView > header div.productFooterButtonsWrapper .svButtonIcon#downloadPDF > i, div.productFooterButtonsWrapper section.packages-list-component section.packagesToolbar > button.svButtonIcon.closeModal > i, section.packages-list-component div.productFooterButtonsWrapper section.packagesToolbar > button.svButtonIcon.closeModal > i {
  font-size: 1.5rem;
  line-height: 35px;
}
div.productFooterButtonsWrapper .svButton.svButtonIcon > i:before, div.productFooterButtonsWrapper #showOrderView > header .svButtonIcon#downloadPDF > i:before, #showOrderView > header div.productFooterButtonsWrapper .svButtonIcon#downloadPDF > i:before, div.productFooterButtonsWrapper section.packages-list-component section.packagesToolbar > button.svButtonIcon.closeModal > i:before, section.packages-list-component div.productFooterButtonsWrapper section.packagesToolbar > button.svButtonIcon.closeModal > i:before {
  line-height: 37px;
}

/* === SVBUTTON ============================================================= */
.svButton, #showOrderView > header #downloadPDF, section.packages-list-component section.packagesToolbar > button.closeModal {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #BEBEBE;
  min-width: 35px;
  height: 35px;
  line-height: 1em;
  padding: 0 2px;
  border-radius: 5px;
  border: 1px solid #c6c6c6;
  transition: all 100ms;
}
@media only screen and (min-width: 414px) {
  .svButton, #showOrderView > header #downloadPDF, section.packages-list-component section.packagesToolbar > button.closeModal {
    padding: 0 5px;
  }
}
@media only screen and (min-width: 768px) {
  .svButton, #showOrderView > header #downloadPDF, section.packages-list-component section.packagesToolbar > button.closeModal {
    min-width: 125px;
  }
}
.svButton span, #showOrderView > header #downloadPDF span, section.packages-list-component section.packagesToolbar > button.closeModal span {
  font-weight: 200;
}
.svButton.svButtonIcon, #showOrderView > header .svButtonIcon#downloadPDF, section.packages-list-component section.packagesToolbar > button.svButtonIcon.closeModal {
  min-width: 35px;
}
.svButton.svButtonBg, #showOrderView > header .svButtonBg#downloadPDF, section.packages-list-component section.packagesToolbar > button.svButtonBg.closeModal {
  color: #474747;
  background-color: #BEBEBE;
}
.svButton.svButtonBg, #showOrderView > header .svButtonBg#downloadPDF, section.packages-list-component section.packagesToolbar > button.svButtonBg.closeModal {
  color: #474747;
  background-color: #BEBEBE;
}
.svButton.svButtonDisabled, #showOrderView > header .svButtonDisabled#downloadPDF, section.packages-list-component section.packagesToolbar > button.svButtonDisabled.closeModal {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}
.svButton.svButtonBgActive, #showOrderView > header .svButtonBgActive#downloadPDF, section.packages-list-component section.packagesToolbar > button.svButtonBgActive.closeModal {
  color: #474747;
  background-color: #f1f1f1;
}
.svButton.svGreen, #showOrderView > header .svGreen#downloadPDF, section.packages-list-component section.packagesToolbar > button.svGreen.closeModal {
  background-color: #009d4e;
  color: #fff;
}
.svButton.svOrange, #showOrderView > header .svOrange#downloadPDF, section.packages-list-component section.packagesToolbar > button.svOrange.closeModal {
  background-color: #f2994a;
  border: none;
  padding: 0.5rem 1rem;
  color: #fff;
}
.svButton.svOrange:hover, #showOrderView > header .svOrange#downloadPDF:hover, section.packages-list-component section.packagesToolbar > button.svOrange.closeModal:hover {
  background-color: #ef8425;
}
@media only screen and (min-width: 768px) {
  .svButton.svOrange, #showOrderView > header .svOrange#downloadPDF, section.packages-list-component section.packagesToolbar > button.svOrange.closeModal {
    min-width: fit-content;
  }
}
.svButton > i, #showOrderView > header #downloadPDF > i, section.packages-list-component section.packagesToolbar > button.closeModal > i {
  padding: 0 5px;
}
.svButton:hover, #showOrderView > header #downloadPDF:hover, section.packages-list-component section.packagesToolbar > button.closeModal:hover {
  color: #fff;
  background-color: #999999;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.svButton:focus-visible, #showOrderView > header #downloadPDF:focus-visible, section.packages-list-component section.packagesToolbar > button.closeModal:focus-visible {
  box-shadow: inset 0 0 0 3px #333;
}
html.safari .svButton:focus:not(:active), html.safari #showOrderView > header #downloadPDF:focus:not(:active), #showOrderView > header html.safari #downloadPDF:focus:not(:active), html.safari section.packages-list-component section.packagesToolbar > button.closeModal:focus:not(:active), section.packages-list-component html.safari section.packagesToolbar > button.closeModal:focus:not(:active) {
  box-shadow: inset 0 0 0 3px #333;
}

input[type=checkbox].svCheck {
  display: inline-block !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid #c6c6c6;
  border-radius: 2px !important;
}
input[type=checkbox].svCheck:checked {
  background-image: url(7477984713483f1bf5e4.svg) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 18px !important;
}

/* === OTHER VIEWS ========================================================== */
.searchbar {
  display: flex;
  flex-direction: row;
  height: 50px;
  background-color: #C7C7CC;
  padding: 9px;
  z-index: 100;
  position: relative;
}
.searchbar .extendedMode {
  width: 40px;
  display: block;
  font-size: 40px;
  line-height: 50px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.searchbar .extendedMode.active {
  color: #333;
}
.searchbar #searchInputWrapper {
  position: relative;
  width: calc(60% - 40px);
}
.searchbar #searchInputWrapper input {
  padding-left: 45px;
  width: 100%;
  margin: 0;
  height: 32px;
  border-radius: 3px 0 0 3px;
  transition: all 100ms;
}
.searchbar #searchInputWrapper input:hover, .searchbar #searchInputWrapper input:active, .searchbar #searchInputWrapper input:focus, .searchbar #searchInputWrapper input.fill {
  background-position: 15px;
}
.searchbar #searchInputWrapper .fill {
  background-image: url(349afa4c98ae07c6afd5.svg);
  background-size: 20px;
  left: 15px;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .searchbar #searchInputWrapper {
    width: calc(85% - 40px);
  }
}
#ordersView .searchbar #searchInputWrapper {
  width: 85%;
}

.searchbar .magnifierIcon {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
  background-image: url(349afa4c98ae07c6afd5.svg);
  background-size: 20px;
  transition: all 200ms;
}
.searchbar input:focus + .magnifierIcon {
  background-image: url(349afa4c98ae07c6afd5.svg);
  background-size: 20px;
  left: 15px;
}
.searchbar input:not(:focus).fill + .magnifierIcon {
  background-image: url(349afa4c98ae07c6afd5.svg);
  background-size: 20px;
  left: 15px;
}
.searchbar a {
  display: block;
  width: 20%;
  min-width: 100px;
  height: 32px;
  text-align: center;
  color: #474747;
  font-size: 1.1rem;
  font-weight: lighter;
  line-height: 2.1rem;
}
.searchbar a.search {
  background-color: #009d4e;
  color: #fff;
  border-radius: 0 3px 3px 0;
  font-weight: bold;
}
.searchbar a.search:hover {
  background-color: rgb(0, 131.5, 65.3312101911);
}
@media only screen and (min-width: 768px) {
  .searchbar input {
    width: calc(85% - 40px);
  }
  .searchbar a {
    width: 15%;
  }
}

#loginView,
login {
  height: 100dvh;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  background-color: #333;
  text-align: center;
  overflow: auto;
  min-height: 100%;
}

section#vLogin {
  display: flex;
  flex-direction: row !important;
  height: 100%;
}
section#vLogin > main {
  width: 100%;
}
html.internet_explorer section#vLogin > main {
  overflow: hidden;
}

section#vLogin a {
  text-decoration: none;
}
section#vLogin .forgotPasswordLink {
  margin-top: 30px;
}
section#vLogin .forgotPasswordLink > a {
  color: #c6c6c6;
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  /*height: 300px;*/
  padding: 20px 10px 0 10px;
  height: 100%;
  overflow-y: scroll;
}
@media only screen and (min-width: 768px) {
  section#vLogin #loginFormWrapper {
    padding-top: 50px;
  }
}
@media only screen and (min-height: 550px) {
  section#vLogin #loginFormWrapper {
    overflow-y: visible;
  }
}
html.internet_explorer section#vLogin #loginFormWrapper {
  overflow: hidden;
}

section#vLogin #loginFormWrapper > #applicationLogo {
  width: 70%;
  max-width: 490px;
  height: 59px;
  margin: 0 auto 15px auto;
  background: url(11cde71cba3a808a1a1b.svg) center center no-repeat;
  background-size: contain;
}
section#vLogin #loginFormWrapper > #version {
  color: #c6c6c6;
  margin-bottom: 30px;
}
section#vLogin #loginFormWrapper div.passRequirements {
  margin: 1rem 0;
}
section#vLogin #loginFormWrapper div.passRequirements div.requirement > span {
  color: #999999;
}
section#vLogin #loginFormWrapper > form div.backToLogin {
  margin-top: 30px;
}
section#vLogin #loginFormWrapper > form div.backToLogin > a {
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper form#loginForm {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
section#vLogin #loginFormWrapper form#loginForm button[type=submit] {
  width: 100%;
  border-radius: 5px;
  margin: 14px 0;
}
section#vLogin #loginFormWrapper form#confirmFail button[type=submit] {
  text-align: center;
}
section#vLogin #loginFormWrapper form#confirmFail button[type=submit] > span {
  display: inline;
}
section#vLogin #loginFormWrapper .loadingDotsPlaceHolder {
  width: 20px;
}
section#vLogin #loginFormWrapper .loadingDots {
  color: #999999;
  height: 0;
  display: block;
}
section#vLogin #loginFormWrapper .loadingDots span {
  font-size: 2rem;
}
section#vLogin #loginFormWrapper .fi > input, section#vLogin #loginFormWrapper .fi.fiInputsContainer .inputWrapper > input {
  margin: 0;
  box-shadow: none;
  border: solid 1px #c6c6c6;
  width: 100%;
  font-size: 0.875rem;
  padding: 12px 10px;
  border-radius: 5px;
}
section#vLogin #loginFormWrapper .fi > input::placeholder, section#vLogin #loginFormWrapper .fi.fiInputsContainer .inputWrapper > input::placeholder {
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper .fi > input:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
section#vLogin #loginFormWrapper .fi > input#userEmail {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
section#vLogin #loginFormWrapper .fi > .inputWrapper:first-child > input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
section#vLogin #loginFormWrapper .fi > .inputWrapper:nth-child(2) > input {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
section#vLogin #loginFormWrapper .fi.singleLine {
  margin-bottom: 35px;
}
section#vLogin #loginFormWrapper .fi.backToLogin > a {
  display: inline-flex;
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper .fi.backToLogin > a > i {
  margin-right: 5px;
}
section#vLogin #loginFormWrapper .fi.backToLogin > a > i:before {
  display: block;
}
section#vLogin #loginFormWrapper .fi.backToLogin > a > span {
  line-height: 1em;
}
section#vLogin #loginFormWrapper .fi > div.inputWrapper {
  position: relative;
}
section#vLogin #loginFormWrapper .fi > div.inputWrapper > button {
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
section#vLogin #loginFormWrapper .fi > div.inputWrapper > button > i {
  display: flex;
  align-items: center;
}
section#vLogin #loginFormWrapper .fi > a.b, section#vLogin #loginFormWrapper .fi > button {
  display: inline-block;
  margin: 10px auto;
  padding: 10px 30px;
  width: 100%;
  background: #666666;
  border-radius: 5px;
  border: none;
  color: #fff;
}
section#vLogin #loginFormWrapper .fi > a.b:disabled, section#vLogin #loginFormWrapper .fi > button:disabled {
  background: #444444;
  color: #808080;
  cursor: not-allowed;
}
section#vLogin #loginFormWrapper .fi > a.b > span, section#vLogin #loginFormWrapper .fi > button > span {
  display: inline;
}
section#vLogin #loginFormWrapper .fi > a {
  color: #c6c6c6;
}
section#vLogin #loginFormWrapper .fi > a > i {
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper .fi > a.b {
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper .fi > p {
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper .fi > ul {
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper .fi > button {
  padding: 12px 30px;
  font-size: 0.875rem;
}
section#vLogin #loginFormWrapper p, section#vLogin #loginFormWrapper ul {
  color: #999999;
}
section#vLogin #loginFormWrapper p.textLeft, section#vLogin #loginFormWrapper ul.textLeft {
  text-align: left;
}
section#vLogin #loginFormWrapper p.error, section#vLogin #loginFormWrapper ul.error {
  color: #e03e2e;
}
section#vLogin #loginFormWrapper p a, section#vLogin #loginFormWrapper ul a {
  color: #fff;
  text-decoration: underline !important;
}
section#vLogin #loginFormWrapper ul {
  padding: 0;
}
section#vLogin #loginFormWrapper ul li {
  text-align: left;
  list-style: inside;
}

body.Brands * {
  box-sizing: border-box;
}

#brandsView {
  position: relative;
  padding: 0;
  color: #fff;
  background-color: #333;
  --brand-size-mobile: 130px;
  --brand-size-mobile-2: 160px;
  --brand-size: 200px;
  --brand-margin-mobile: 10px;
  --brand-margin-mobile-2: 15px;
  --brand-margin: 20px;
  --brands-4-width: 975px;
}
#brandsView header > a {
  opacity: 0;
  pointer-events: none;
}
#brandsView header #brandLogo {
  display: none;
}
#brandsView header #headerWrapper1 {
  display: none;
}
@media only screen and (min-width: 768px) {
  #brandsView header #headerWrapper1 {
    display: flex;
  }
}
#brandsView #header {
  position: static;
  max-height: 50px;
}

#brandsViewWrapper {
  width: 100%;
  height: calc(100dvh - 50px - 55px);
  background: #333;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
#brandsViewWrapper::-webkit-scrollbar {
  width: 5px;
}
#brandsViewWrapper::-webkit-scrollbar-thumb {
  background-color: #666666;
}
html.safari #brandsViewWrapper {
  height: calc(100dvh - 50px - 55px);
}

#brandsViewWrapper > div.brandsViewGrid {
  --button-size: 30px;
  display: grid;
  position: relative;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid {
    --button-size: 50px;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div#videoWrapper {
  grid-row: 1/span 1;
  grid-column: 1/span 1;
  width: 100dvw;
}
#brandsViewWrapper > div.brandsViewGrid > div#videoWrapper > video {
  width: 100%;
  aspect-ratio: 16/9;
}
#brandsViewWrapper > div.brandsViewGrid > div#videoWrapper > div#videoPreEnd {
  width: 100%;
  height: calc(var(--square-size) + var(--square-margin) + 55px);
}
#brandsViewWrapper > div.brandsViewGrid > div#videoWrapper > div#videoPreEnd::after {
  content: "";
  display: block;
  width: 100%;
  height: 30px;
  background-image: linear-gradient(to bottom, rgba(51, 51, 51, 0) 0%, #333 100%);
  transform: translateY(-100%);
  pointer-events: none;
}
#brandsViewWrapper > div.brandsViewGrid > div#videoWrapper > div#videoEnd {
  width: 100%;
  height: 1px;
  position: sticky;
  top: 0;
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures {
  grid-row: 1/span 1;
  grid-column: 1/span 1;
  display: block;
}
html.safari #brandsViewWrapper > div.brandsViewGrid > div#miniatures {
  position: relative;
}

#brandsViewWrapper:not(.marketPlaceMode) > div.brandsViewGrid > div#miniatures {
  margin-top: 4.875rem;
}

#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div.spacer {
  max-width: calc(5 * (var(--square-size) + var(--square-margin) * 2) + 40px);
  height: calc(100dvh - 50px - 55px - var(--square-size) - var(--square-margin) * 2 - 55px);
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-content: center;
  margin: 0 auto;
  display: none;
}
#brandsViewWrapper.scrolled > div.brandsViewGrid > div#miniatures > div.spacer {
  height: 56.25dvw;
}

#brandsViewWrapper.marketPlaceMode > div.brandsViewGrid > div#miniatures > div.spacer {
  display: grid;
}

#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div.spacer2 {
  width: 100%;
  height: 1px;
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: fixed;
  height: calc(var(--square-size) + var(--square-margin) * 2 + 55px);
  overflow: hidden;
  max-width: calc(5 * (var(--square-size) + var(--square-margin) * 2));
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin: 0 auto;
}
html.safari #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links {
  position: relative;
  bottom: 0;
  left: 0;
  transform: none;
}

#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1 {
  width: 100%;
  position: relative;
  padding-left: 0.625rem;
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1 > a.marketplaceHeader {
  font-size: 1.5rem;
  text-align: center;
  text-decoration: none;
  color: #fff;
}
@media only screen and (min-width: 1110px) {
  #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1 > a.marketplaceHeader {
    text-align: left;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.625rem;
}
#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div {
  display: none;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > h1.brandsIntroH1.videoControls > div {
    display: grid;
  }
}
#brandsViewWrapper.scrolled > div > div#miniatures > div#links {
  position: static;
  height: auto;
  transform: none;
}

#brandsViewWrapper > div.brandsViewGrid > div#miniatures > div#links > a {
  display: block;
  width: var(--square-size);
  height: var(--square-size);
  background: #fff;
  margin: var(--square-margin);
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek {
  grid-row: 1/span 1;
  grid-column: 1/span 1;
  height: 56.25dvw;
  max-height: calc(100dvh - var(--square-margin) - var(--square-size));
  width: 100%;
  max-width: calc(5 * (var(--square-size) + var(--square-margin) * 2));
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 0 auto;
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription {
  max-width: 90%;
  width: 100%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto 1fr;
  grid-template-areas: "info info info info" "header header header header" "text text text text" "checkBrandBtn prevVideoBtn muteBtn nextVideoBtn";
  justify-content: flex-start;
  z-index: 100;
  grid-row: 2/span 1;
  text-shadow: 0 0 11px rgba(0, 0, 0, 0.15);
  align-self: flex-start;
  padding: 0 10px;
  margin: auto auto 20px 0;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription {
    grid-template-columns: min-content min-content min-content min-content;
    max-width: unset;
  }
}
@media screen and (max-height: 600px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription.videoDescription {
    justify-items: flex-end;
    margin: 0 auto;
    position: sticky;
    top: 0.5rem;
    grid-gap: 5px;
    grid-template-columns: 1fr auto;
    max-width: calc(4 * var(--square-size) + 5 * var(--square-margin));
    padding-left: 0;
    padding-right: 0.5rem;
  }
}
@media screen and (max-height: 600px) and (min-width: 650px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription.videoDescription {
    max-width: calc(5 * var(--square-size) + 6 * var(--square-margin));
  }
}
@media screen and (max-height: 600px) and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription.videoDescription {
    max-width: calc(4 * var(--square-size) + 6 * var(--square-margin));
    margin: 0.5rem auto;
  }
}
@media screen and (max-height: 600px) and (min-width: 800px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription.videoDescription {
    max-width: calc(5 * var(--square-size) + 5 * var(--square-margin));
  }
}
@media screen and (max-height: 600px) and (min-width: 1024px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription.videoDescription {
    max-width: calc(4 * var(--square-size) + 5 * var(--square-margin));
    align-self: flex-start;
    padding-left: 0;
    justify-items: flex-end;
    grid-template-columns: 1fr auto;
  }
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription {
    max-width: 700px;
    grid-gap: 0 1rem;
    padding: 0 0 0 10px;
    margin: auto auto 20% 0;
    justify-content: flex-start;
    grid-template-columns: unset;
    grid-template-areas: "info" "header" "text" "checkBrandBtn";
  }
}
@media only screen and (min-width: 1024px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription {
    align-self: center;
  }
}
@media only screen and (min-width: 1110px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription {
    margin: 0;
    margin-bottom: 1rem;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > small.titleInfo {
  grid-area: info;
  margin: 0;
  font-weight: 900;
  font-size: 0.8rem;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > small.titleInfo {
    font-size: 1.1rem;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > h2 {
  grid-area: header;
  margin: 0;
  font-size: 1.5rem;
  text-shadow: 0 0 11px rgba(0, 0, 0, 0.15);
  color: #f2f2f2;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > h2 {
    font-size: 2.5rem;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > p, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > div.eventInformation {
  grid-area: text;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: #f2f2f2;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  margin: 0;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > p, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > div.eventInformation {
    font-size: 1rem;
    margin: 1rem 0;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > div.eventInformation {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > div.eventInformation > p {
  margin: 0;
  font-size: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media only screen and (min-width: 568px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > div.eventInformation > p {
    -webkit-line-clamp: 4;
  }
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > div.eventInformation > p {
    font-size: 1.5rem;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.checkBrandBtn, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > a.checkBrandBtn {
  grid-area: checkBrandBtn;
  background-color: #EF8425;
  color: #f2f2f2;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.75rem;
  padding: 0;
  height: var(--button-size);
  display: flex;
  align-items: center;
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.checkBrandBtn:hover, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > a.checkBrandBtn:hover {
  background-color: rgb(233.3717948718, 118.8269230769, 17.1282051282);
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.checkBrandBtn, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > a.checkBrandBtn {
    font-size: 1rem;
    padding: 1rem 1.5rem;
    width: fit-content;
    font-weight: 700;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.checkBrandBtn > span, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > a.checkBrandBtn > span {
  white-space: nowrap;
  padding: 0 1rem;
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.muteBtn {
  grid-area: muteBtn;
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.prevVideoBtn {
  grid-area: prevVideoBtn;
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.nextVideoBtn {
  grid-area: nextVideoBtn;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.nextVideoBtn {
    justify-self: flex-end;
  }
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.prevVideoBtn, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.nextVideoBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}
#brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.prevVideoBtn > i, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.nextVideoBtn > i {
  width: fit-content;
}
@media only screen and (min-width: 768px) {
  #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.muteBtn, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.prevVideoBtn, #brandsViewWrapper > div.brandsViewGrid > div.brandOfTheWeek > div.videoDescription > button.nextVideoBtn {
    display: none;
  }
}
#brandsViewWrapper > div.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 1000000;
}
#brandsViewWrapper #emptyBrandsListPlaceholder {
  grid-row: 1/span 1;
  grid-column: 1/span 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 100%;
  height: calc(100dvh - 50px - 55px);
  background: #333;
  position: relative;
  z-index: 100;
}
#brandsViewWrapper #emptyBrandsListPlaceholder > div > div.emptyIcon {
  width: 100%;
  max-width: 200px;
  height: 240px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
}
#brandsViewWrapper #emptyBrandsListPlaceholder > div > div.emptyIcon.noResults {
  background-image: url(2d45201a231ef10640c0.svg);
}
#brandsViewWrapper #emptyBrandsListPlaceholder > div > div.emptyIcon.emptyBrandsList {
  height: 300px;
  background-image: url(d54fbb77fd79f27aa121.svg);
}
#brandsViewWrapper #emptyBrandsListPlaceholder > div > h2 {
  color: #bdbdbd;
  margin: 1.25rem 0 0.625rem 0;
  text-align: center;
}
#brandsViewWrapper #emptyBrandsListPlaceholder > div > p {
  color: #e4e4e4;
  margin: 0;
  font-size: 1.375rem;
  text-align: center;
}
#brandsViewWrapper #emptyBrandsListPlaceholder > div > p > a {
  text-decoration: underline !important;
  color: #e4e4e4;
}

footer {
  width: 100%;
  height: 50px;
  background: #333;
}

#debugValues {
  position: fixed;
  top: 0;
  left: 0;
  background: orange;
  z-index: 9999999;
}
#debugValues > div {
  display: flex;
}
#debugValues > div > input[type=checkbox] {
  display: block;
  width: 32px;
  height: 32px;
  background: #fff;
  box-shadow: inset 0 0 0 4px #000;
}
#debugValues > div > input[type=checkbox]:checked {
  box-shadow: inset 0 0 0 14px #000;
}

/* === MAIN VIEW ============================================================ */
#mainView > main {
  overflow: hidden;
}
#mainView main > div {
  float: left;
  width: 100%;
  height: 100%;
  background-color: #333;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
#mainView.status-loading {
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 40px 40px;
  background-position: center center;
}
#mainView #backgroundsWrapper {
  position: relative;
}
#mainView #backgroundsWrapper > div {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1700ms;
}
#mainView #backgroundsWrapper > div.defaultBackground {
  opacity: 1;
}
#mainView #backgroundsWrapper > div.active {
  opacity: 1;
}
#mainView #backgroundsWrapper > div.videoBg {
  background-color: #000;
}
#mainView #backgroundsWrapper > div > img {
  display: block;
  margin: auto;
  height: 100%;
}
#mainView #backgroundsWrapper > div > img.status-loading.original {
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 40px 40px;
  background-position: center center;
}
#mainView #backgroundsWrapper > div > video {
  width: 100%;
  height: 100%;
}
#mainView #backgroundsWrapper > div > img, #mainView #backgroundsWrapper > div > video {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
}
#mainView #backgroundsWrapper > div > img.blur, #mainView #backgroundsWrapper > div > video.blur {
  object-fit: cover;
  background-size: cover;
  position: absolute;
  width: 100%;
  z-index: 1;
  filter: brightness(125%) url("#sharpBlur");
}
#mainView #backgroundsWrapper > div > img.original, #mainView #backgroundsWrapper > div > video.original {
  background-size: contain;
  position: relative;
  z-index: 3;
}
#mainView #backgroundsWrapper > div > div.videoStatus {
  position: absolute;
  background-image: url(c2b6667276a7dcd0d979.svg);
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 4;
  top: 0;
}
#mainView #backgroundsWrapper > div > div.controls {
  height: fit-content;
  position: absolute;
  bottom: 50px;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}
#mainView #backgroundsWrapper > div > div.controls > button {
  width: fit-content;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  background-position: center center;
  z-index: 5;
  margin: 0 10px;
  padding: 25px;
  border-radius: 50%;
  background-color: rgba(51, 51, 51, 0.75);
}
#mainView #backgroundsWrapper > div > div.controls > button.stop {
  background-image: url(dde78f181be599e8b83b.svg);
  background-position: 15px center;
}
#mainView #backgroundsWrapper > div > div.controls > button.play {
  background-image: url(40155fd9932342b66856.svg);
}
#mainView #backgroundsWrapper > div > div.controls > button.soundOff {
  background-image: url(52aed7c7c58acc5ddc37.svg);
}
#mainView #backgroundsWrapper > div > div.controls > button.soundOn {
  background-image: url(0cab5c28b6cc783c69eb.svg);
}
#mainView #backgroundsWrapper #dotsNav {
  position: fixed;
  bottom: 65px;
  left: 50%;
  height: auto;
  max-width: 90%;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 700;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  width: 90%;
}
@media only screen and (min-width: 568px) {
  #mainView #backgroundsWrapper #dotsNav {
    width: inherit;
  }
}
@media only screen and (min-width: 768px) {
  #mainView #backgroundsWrapper #dotsNav {
    max-width: 100%;
    padding: 5px 10px;
  }
}
#mainView #backgroundsWrapper #dotsNav > a {
  display: block;
  width: 10px;
  height: 10px;
  background: #f8f8f8;
  margin: 9px 5px;
  border-radius: 50%;
}
#mainView #backgroundsWrapper #dotsNav > a.active {
  background: #999999;
}

#customersView > header#header {
  display: grid;
  grid-template-columns: 0 1fr auto 1fr;
  grid-template-areas: "showHeaderBtn leftNav centerNav rightNav";
}
#customersView > header#header > a.showHeaderBtn {
  grid-area: showHeaderBtn;
}
#customersView > header#header > div.left-nav {
  grid-area: leftNav;
}
#customersView > header#header > div.center-nav {
  grid-area: centerNav;
}
#customersView > header#header > div.right-nav {
  grid-area: rightNav;
}
#customersView > main {
  overflow-y: hidden;
}

#customersListHead {
  display: none;
}
@media only screen and (min-width: 768px) {
  #customersListHead {
    display: table-row;
  }
}

#customersListBody > div a {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: solid 1px #c6c6c6;
}
@media only screen and (min-width: 768px) {
  #customersListBody > div a {
    display: table-row;
  }
}
#customersListBody > div a:hover {
  background: #f2f2f2;
}
#customersListBody > div a:first-child {
  padding-top: 5px;
}
#customersListBody > div a:last-child {
  border-bottom: none;
}
#customersListBody > div a > div {
  display: none;
}
@media only screen and (min-width: 768px) {
  #customersListBody > div a > div {
    display: table-cell;
  }
}
#customersListBody > div a > div[column-name="customers.index_label"], #customersListBody > div a > div[column-name="customers.name_label"] {
  display: block;
  float: none;
  padding: 0 10px;
  height: 20px;
}
@media screen and (max-width: 768px) {
  #customersListBody > div a > div[column-name="customers.index_label"], #customersListBody > div a > div[column-name="customers.name_label"] {
    width: 100% !important;
  }
}
@media only screen and (min-width: 768px) {
  #customersListBody > div a > div[column-name="customers.index_label"], #customersListBody > div a > div[column-name="customers.name_label"] {
    display: table-cell;
    padding: 0;
    height: auto;
  }
}
#customersListBody > div a > div[column-name="customers.index_label"] {
  order: 2;
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  #customersListBody > div a > div[column-name="customers.index_label"] {
    font-size: 1rem;
  }
}
#customersListBody > div a > div[column-name="customers.name_label"] {
  order: 1;
}

#ordersView {
  /* === PDF BUTTON ============================================================ */
}
#ordersView > header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
#ordersView > header .right-nav {
  display: flex;
  align-items: center;
  padding-right: 5px;
}
@media only screen and (min-width: 1024px) {
  #ordersView > header .right-nav a {
    display: none;
  }
}
#ordersView > main {
  overflow-y: hidden;
}
#ordersView .pdfButton {
  display: inline;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px #ddd;
  background-color: #fff;
  border-radius: 3px;
  font-size: 0.8em;
  color: #292929;
}
#ordersView .pdfButton:hover {
  box-shadow: 0 0 0 4px #eee, 0 0 0 5px #ddd;
  background-color: #eee;
}
#ordersView .statusText {
  color: #292929;
  font-size: 0.8em;
}

#searchView {
  background: #f0f0f0;
  height: auto;
  min-height: 100dvh;
}
@media only screen and (min-width: 768px) {
  #searchView {
    height: 100dvh;
  }
}
html.safari #searchView {
  min-height: 100dvh;
  height: 100%;
  overflow: auto;
}
@media only screen and (min-width: 768px) {
  html.safari #searchView {
    height: 100dvh;
    overflow: visible;
  }
}

#searchView > main {
  overflow: visible;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  #searchView > main {
    overflow: hidden;
    height: auto;
  }
}
#searchView .collectionGrid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "collectionheader" "collectioncategories" "collectionproducts";
  height: 100%;
  overflow: visible;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid {
    height: 100%;
    overflow: hidden;
  }
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid {
    grid-template-columns: minmax(300px, 2fr) 8fr;
    grid-template-rows: minmax(min-content, 1fr) 10fr;
    grid-template-areas: "collectionheader collectionheader" "collectioncategories collectionproducts";
  }
}
#searchView .collectionGrid.showFilters {
  background: yellow;
}
#searchView .collectionGrid > div.collectionHeader {
  grid-area: collectionheader;
  height: fit-content;
  background: #292929;
  padding: 10px;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid > div.collectionHeader {
    padding: 15px;
  }
}
#searchView .collectionGrid > div.productStatusContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-area: collectionproducts;
  position: relative;
}
#searchView .collectionGrid > div.productStatusContainer > div.emptyPlaceholder {
  padding: 0 5px 60px 5px;
}
#searchView .collectionGrid > div.productStatusContainer > div.emptyPlaceholder > div#noProductsImage {
  width: 300px;
  height: 300px;
  grid-area: collectioncategories/collectioncategories/collectionproducts/collectionproducts;
  background-image: url(264714b41cbe72fdf141.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
}
#searchView .collectionGrid > div.productStatusContainer > div.emptyPlaceholder > div.productStatusMessage {
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  color: #333;
}
#searchView .collectionGrid > div.collectionCategories {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  grid-area: collectioncategories;
}
#searchView .collectionGrid > div.collectionCategories::-webkit-scrollbar {
  width: 5px;
}
#searchView .collectionGrid > div.collectionCategories::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid > div.collectionCategories {
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory {
  --sv-select-height: 2.25rem;
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper {
  position: relative;
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper.active.active > h1 > button > i, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper.active.active > h1 > button > i, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper.active.active > h1 > button > i {
  transform: rotate(180deg);
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper.active.active > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper.active.active > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper.active.active > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper.active.active > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper.active.active > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper.active.active > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper.active.active > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper.active.active > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper.active.active > category-tree {
  transform: translateX(0);
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > h1.menuHeader, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > h1.menuHeader, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > h1.menuHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > h1.menuHeader, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > h1.menuHeader, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > h1.menuHeader {
    padding: 20px 10px;
  }
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > h1.menuHeader > span, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > h1.menuHeader > span, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > h1.menuHeader > span {
  font-size: 0.875rem;
  text-indent: 0;
  font-weight: 700;
  color: #333;
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > h1.menuHeader > button, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > h1.menuHeader > button, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > h1.menuHeader > button {
  padding: 0.5rem;
  padding-right: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > h1.menuHeader > button, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > h1.menuHeader > button, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > h1.menuHeader > button {
    display: none;
  }
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > h1.menuHeader > button > i, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > h1.menuHeader > button > i, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > h1.menuHeader > button > i {
  display: flex;
  align-items: center;
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > category-tree {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 10px -5px #000;
  transform: translateX(-110%);
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > category-tree {
    position: static;
    transform: translateX(0);
    box-shadow: none;
  }
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > ul.listCustomFilters {
  margin: 0;
  position: absolute;
  z-index: 10003;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > ul.listCustomFilters, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > ul.listCustomFilters {
    position: static;
  }
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > ul.listCustomFilters > li > a, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > ul.listCustomFilters > li > a, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > ul.listCustomFilters > li > a {
  padding-left: 1rem;
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > h1.seasonsHeader.menuHeader, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > h1.seasonsHeader.menuHeader, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > h1.seasonsHeader.menuHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > h1.seasonsHeader.menuHeader > a, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > h1.seasonsHeader.menuHeader > a, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > h1.seasonsHeader.menuHeader > a {
  cursor: default;
  color: #333;
  font-size: 0.875rem;
  font-weight: 700;
  text-indent: 0;
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > category-tree {
  transform: translateX(-100%);
  position: absolute;
  background-color: #fff;
  z-index: 10001;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper > category-tree, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper > category-tree {
    transform: translateX(0);
    position: static;
    background-color: transparent;
  }
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper.seasonsSelectWrapper, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper.seasonsSelectWrapper, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper.seasonsSelectWrapper {
  background: #fff;
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper.seasonsSelectWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper.seasonsSelectWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper.seasonsSelectWrapper > sv-select {
  padding: 0.5rem 0;
  transform: translateX(-100%);
  position: absolute;
  background-color: #fff;
  z-index: 10002;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper.seasonsSelectWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper.seasonsSelectWrapper > sv-select, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper.seasonsSelectWrapper > sv-select {
    transform: translateX(0);
    position: static;
    background-color: transparent;
  }
}
#searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.filtersWrapper.seasonsSelectWrapper > sv-select > div.svSelect, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.seasonsSelectWrapper.seasonsSelectWrapper > sv-select > div.svSelect, #searchView .collectionGrid > div.collectionCategories > #seasonNavCategory > div.categoriesWrapper.seasonsSelectWrapper > sv-select > div.svSelect {
  margin: 0 0.5rem 0 1rem;
}
#searchView .collectionGrid > div.collectionProducts {
  position: relative;
  grid-area: collectionproducts;
  display: grid;
  grid-gap: 10px;
  padding: 15px 0 5px 0;
  overflow: hidden;
}
#searchView .collectionGrid aside.collectionBottomBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 12px;
  z-index: 11;
}
@media only screen and (min-width: 568px) {
  #searchView .collectionGrid aside.collectionBottomBar {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid aside.collectionBottomBar {
    min-height: 55px;
    font-size: 16px;
  }
}
#searchView .collectionGrid aside.collectionBottomBar > div {
  height: 100%;
  grid-column: 1/span 1;
  display: grid;
  grid-template-areas: "filters";
  grid-template-columns: auto;
  background: linear-gradient(to right, rgba(217, 217, 217, 0.75), rgba(242, 242, 242, 0.75));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 11;
}
#searchView .collectionGrid aside.collectionBottomBar > div.paginatorVisible {
  grid-template-areas: "filters" "pagination";
}
#searchView .collectionGrid aside.collectionBottomBar > div.paginatorVisible > simple-pagination {
  display: block;
}
#searchView .collectionGrid aside.collectionBottomBar > div.paginatorVisible > simple-pagination > section.simplePagination {
  width: 100%;
  grid-template-areas: ". . amount prev next";
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid aside.collectionBottomBar > div.paginatorVisible > simple-pagination > section.simplePagination {
    width: auto;
    grid-template-areas: "amount prev next";
  }
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid aside.collectionBottomBar > div.paginatorVisible {
    grid-template-areas: "filters pagination";
  }
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid aside.collectionBottomBar > div {
    grid-template-areas: "filters pagination";
    grid-template-columns: auto auto;
    grid-column: 2/span 1;
  }
}
#searchView .collectionGrid aside.collectionBottomBar > div > section.showBottomFilterPanel {
  grid-area: filters;
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 5px 10px;
}
@media only screen and (min-width: 568px) {
  #searchView .collectionGrid aside.collectionBottomBar > div > section.showBottomFilterPanel {
    gap: 10px;
    padding: 10px;
  }
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid aside.collectionBottomBar > div > section.showBottomFilterPanel {
    padding: 10px 0 10px 10px;
  }
}
#searchView .collectionGrid aside.collectionBottomBar > div > section.showBottomFilterPanel > div {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: row;
  grid-gap: 10px;
  align-items: center;
}
#searchView .collectionGrid aside.collectionBottomBar > div > section.showBottomFilterPanel > div.line {
  grid-area: line;
  height: 80%;
  width: 2px;
  background: #808080;
}
#searchView .collectionGrid aside.collectionBottomBar > div > simple-pagination {
  width: 100%;
  display: none;
  grid-area: pagination;
  margin: 0 10px 0 auto;
}
@media only screen and (min-width: 768px) {
  #searchView .collectionGrid aside.collectionBottomBar > div > simple-pagination {
    width: initial;
    display: block;
    min-height: 55px;
  }
}
#searchView .collectionGrid aside.collectionBottomBar > div > simple-pagination > section {
  padding: 0.5rem 0;
}
#searchView div.collectionHeader {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "headersearch headerfilters sort" "headerdynamicfilters headerdynamicfilters headerdynamicfilters";
  grid-gap: 0.5rem;
  align-items: center;
  padding: 0 10px;
}
@media only screen and (min-width: 768px) {
  #searchView div.collectionHeader {
    grid-gap: 0 1.25rem;
    grid-template-columns: minmax(200px, calc(150px * var(--filters-counter) + 0.5rem * (var(--filters-counter) - 1))) 1fr auto auto auto;
    grid-template-areas: "headerdynamicfilters headerfilters . headersearch sort";
    padding: 0 20px;
  }
}
#searchView div.collectionHeader.withoutDynamicFilters {
  grid-template-areas: "headersearch headerfilters sort";
}
@media only screen and (min-width: 768px) {
  #searchView div.collectionHeader.withoutDynamicFilters {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "headerfilters . headersearch sort";
  }
}
#searchView div.collectionHeader > h1 {
  grid-area: headertitle;
  margin: 0;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  #searchView div.collectionHeader > h1 {
    text-align: left;
  }
}
#searchView div.collectionHeader > h1 span:nth-child(1) {
  color: #fff;
}
#searchView div.collectionHeader > h1 span:nth-child(2) {
  color: #ababab;
  font-size: 1rem;
}
#searchView div.collectionHeader > a#extendedFiltering {
  grid-area: headerextendedfiltering;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  line-height: 35px;
  font-size: 1.5rem;
  color: #999999;
}
#searchView div.collectionHeader > a#extendedFiltering.active {
  color: #fff;
}
#searchView div.collectionHeader > sv-search {
  grid-area: headersearch;
}
#searchView div.collectionHeader > .filtersBtns {
  width: 100%;
  height: 100%;
  grid-area: headerfilters;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
#searchView div.collectionHeader > .filtersBtns > button#showFilters#showFilters {
  height: 100%;
  padding: 0.5rem;
}
@media only screen and (min-width: 768px) {
  #searchView div.collectionHeader > .filtersBtns > button#showFilters#showFilters {
    height: auto;
  }
}
#searchView div.collectionHeader > .filtersBtns > button#showFilters#showFilters > span {
  display: none;
}
@media only screen and (min-width: 768px) {
  #searchView div.collectionHeader > .filtersBtns > button#showFilters#showFilters > span {
    display: inline;
  }
}
#searchView div.collectionHeader > .filtersBtns > button#showFilters#showFilters > i {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  #searchView div.collectionHeader > .filtersBtns > button#showFilters#showFilters > i {
    padding-right: 0.5rem;
  }
}
#searchView div.collectionHeader > .filtersBtns > button#showFilters, #searchView div.collectionHeader > .filtersBtns > button#clearFilters {
  background: transparent;
  color: #c6c6c6;
  font-weight: normal;
  text-transform: capitalize;
  width: 100%;
  height: 30px;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  #searchView div.collectionHeader > .filtersBtns > button#showFilters, #searchView div.collectionHeader > .filtersBtns > button#clearFilters {
    width: auto;
  }
}
#searchView div.collectionHeader > product-search-bar {
  grid-area: headerdynamicfilters;
}
#searchView div.collectionHeader > div.sort-wrapper > button.sortByDesc:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
#searchView div.collectionHeader > div.sort-wrapper hr.sort-spacer, #searchView div.collectionHeader > div.sort-wrapper a.sort-asc, #searchView div.collectionHeader > div.sort-wrapper a.sort-desc {
  display: none;
}
#searchView .column-70.column-fix {
  overflow: hidden;
}
#searchView .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--tile-width));
  grid-auto-flow: row;
  gap: 10px;
  justify-items: start;
  justify-content: space-evenly;
  padding: 0 5px 60px 5px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  justify-content: space-evenly;
}
#searchView .products::-webkit-scrollbar {
  width: 5px;
}
#searchView .products::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 768px) {
  #searchView .products::after {
    content: "";
    display: flex;
    height: 50px;
    width: 100%;
    grid-column: 1/-1;
    transition: height 500ms;
  }
}
#searchView .products.newPlacingMode {
  justify-content: center;
}
#searchView .products.tilesMode-s {
  --tile-width: 170px;
  --title-height: 275px;
  --photo-height: 153px;
  --icon-size: 20px;
  --tile-padding: 8px;
}
#searchView .products.tilesMode-m {
  --tile-width: 260px;
  --title-height: 340px;
  --photo-height: 234px;
  --icon-size: 26px;
  --tile-padding: 12px;
}
#searchView .products.tilesMode-l {
  --tile-width: 340px;
  --title-height: 430px;
  --photo-height: 306px;
  --icon-size: 32px;
  --tile-padding: 16px;
}
#searchView .products > div.empty {
  grid-column: 1/-1;
}
#searchView .products > div.loader {
  grid-column: 1/-1;
}
#searchView .products > ng-include {
  display: contents;
}
#searchView ul.listCustomFilters {
  padding: 0;
  border-bottom: 1px solid #C8C7CC;
}
#searchView ul.listCustomFilters > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#searchView ul.listCustomFilters > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  background-color: #fff;
  text-transform: uppercase;
  color: #474747;
  font-weight: lighter;
  border-top: 1px solid #C8C7CC;
  padding: 0 5px 0 20px;
}
#searchView ul.listCustomFilters > li > a > span.switch {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background-color: #ddd;
  border-radius: 3px;
}
#searchView ul.listCustomFilters > li > a > span.switch > i {
  color: rgba(255, 255, 255, 0.2);
}
#searchView ul.listCustomFilters > li > a.active {
  font-weight: normal;
}
#searchView ul.listCustomFilters > li > a.active > span.switch {
  background-color: #009d4e;
  box-shadow: inset 0 0 0 2px rgb(0, 131.5, 65.3312101911);
}
#searchView ul.listCustomFilters > li > a.active > span.switch > i {
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
#searchView .pagination-controls {
  padding: 0;
}
#searchView .pagination-controls .paginationWrapper.hidden {
  display: none;
}

#productsContainerDiv {
  min-height: calc(100dvh - 50px - 55px);
  overflow-y: hidden;
}

.sizesList {
  padding: 15px 5px;
}
.sizesList a {
  display: block;
  float: left;
  width: 18%;
  height: 50px;
  line-height: 40px;
  padding: 5px;
  text-align: center;
  background-color: #e4e4e4;
  margin: 0 0 2% 2%;
  color: #111;
  font-size: 15px;
}
.sizesList a.selected {
  background-color: #BEBEBE;
}
.sizesList a.small {
  font-size: 12px;
}
.sizesList a.mini {
  font-size: 10px;
}

div.productTile {
  background-color: #fff;
  border-radius: 5px;
  width: 100%;
  display: flex;
  margin: 0;
  height: auto;
  max-height: calc(var(--title-height) + 2em);
  padding: var(--tile-padding);
  font-size: var(--base-font-size);
  box-shadow: 0 2px 5px -2px #000;
}
@media only screen and (min-width: 768px) {
  div.productTile {
    box-shadow: none;
  }
}
div.productTile > div.product-item-body {
  width: 100%;
  display: grid;
  grid-template-areas: "wpprice rpprice rpprice" "thumb thumb thumb" "desc desc circle";
  grid-template-columns: auto auto var(--icon-size);
  grid-template-rows: auto auto auto;
}
div.productTile > div.product-item-body div.wpPriceWrapper {
  grid-area: wpprice;
}
div.productTile > div.product-item-body div.wpPriceWrapper div.priceWithDiscount {
  font-weight: bold;
}
div.productTile > div.product-item-body div.wpPriceWrapper div.priceWithDiscount > p.currentPrice {
  color: #eb5757;
}
div.productTile > div.product-item-body div.wpPriceWrapper div.priceWithDiscount > p.prevPrice {
  text-decoration: line-through;
}
div.productTile > div.product-item-body div.rpPriceWrapper {
  grid-area: rpprice;
  text-align: right;
}
div.productTile > div.product-item-body div.wpPriceWrapper p, div.productTile > div.product-item-body div.wpPriceWrapper span,
div.productTile > div.product-item-body div.rpPriceWrapper p,
div.productTile > div.product-item-body div.rpPriceWrapper span {
  margin: 0;
}
div.productTile > div.product-item-body div.wpPriceWrapper > strong,
div.productTile > div.product-item-body div.rpPriceWrapper > strong {
  -webkit-font-smoothing: antialiased;
}
div.productTile > div.product-item-body div.prices {
  display: flex;
  font-size: 0.75rem;
  overflow: hidden;
  padding-bottom: 4px;
  min-height: 65px;
}
div.productTile > div.product-item-body div.prices > div {
  width: 50%;
  padding-top: 5px;
}
div.productTile > div.product-item-body div.prices > div:first-child {
  padding-left: 5px;
}
div.productTile > div.product-item-body div.prices > div:last-child {
  text-align: right;
  padding-right: 5px;
}
div.productTile > div.product-item-body a.thumb {
  grid-area: thumb;
  position: relative;
  display: block;
  width: calc(100% + var(--tile-padding) * 2);
  margin-left: calc(var(--tile-padding) * -1);
  height: var(--photo-height);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
div.productTile > div.product-item-body a.thumb.status-loading {
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center center;
}
div.productTile > div.product-item-body a.thumb.status-error {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  animation: miniatureAnimation 500ms 1;
}
div.productTile > div.product-item-body a.thumb.status-error.status-error-no-image {
  background-image: url(76c5b952a644e9554e27.svg) !important;
}
div.productTile > div.product-item-body a.thumb.status-success {
  animation: miniatureAnimation 500ms 1;
}
div.productTile > div.product-item-body div.productTag {
  grid-column: 1/span 2;
  grid-row: 2/span 1;
  position: static;
  align-self: end;
  display: grid;
  width: fit-content;
  height: fit-content;
  margin-bottom: var(--tile-padding);
  margin-left: calc(var(--tile-padding) * -1);
  border-radius: 0 3px 3px 0;
  color: #F2F2F2;
  z-index: 2;
  overflow: hidden;
}
div.productTile > div.product-item-body div.productTag > span {
  display: block;
  height: 100%;
  grid-column: 1/span 1;
  grid-row: 1/span 1;
}
div.productTile > div.product-item-body div.productTag > span.background {
  background-color: #219653;
  opacity: 0.8;
  z-index: 1;
}
div.productTile > div.product-item-body div.productTag > span.text {
  padding: 6px var(--tile-padding) 6px var(--tile-padding);
  z-index: 2;
}
div.productTile > div.product-item-body favourite-switch.favouriteSwitch {
  width: var(--icon-size, 26px);
  height: var(--icon-size, 26px);
  position: static;
  justify-self: flex-end;
  grid-row: 2/span 1;
  grid-column: 3/span 1;
  display: block;
  padding: 10px;
  z-index: 10;
}
div.productTile > div.product-item-body favourite-switch.favouriteSwitch > a {
  display: flex;
  width: 100%;
  height: 100%;
}
div.productTile > div.product-item-body favourite-switch.favouriteSwitch .favourite-switch-component > i {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-content: center;
  justify-content: center;
  font-size: var(--icon-size, 26px);
  color: #333;
  transition: all 300ms;
  transform: scale(1);
}
div.productTile > div.product-item-body favourite-switch.favouriteSwitch .favourite-switch-component > i:before {
  place-self: center;
}
div.productTile > div.product-item-body favourite-switch.favouriteSwitch .favourite-switch-component.active > i {
  color: #eb5757;
  text-shadow: none;
}
div.productTile > div.product-item-body favourite-switch.favouriteSwitch .favourite-switch-component.isLoading > i {
  opacity: 0;
}
div.productTile > div.product-item-body favourite-switch.favouriteSwitch .favourite-switch-component:hover i {
  transform: scale(1.2);
}
div.productTile > div.product-item-body a.productName {
  grid-area: desc;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  text-align: center;
  color: #333;
  padding: 5px 5px;
  line-height: 1.25em;
  overflow: hidden;
}
div.productTile > div.product-item-body a.productName p {
  margin: 0;
  text-align: left;
}
div.productTile > div.product-item-body a.productName p.first-line {
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
div.productTile > div.product-item-body a.productName p.second-line {
  overflow: hidden;
  max-height: 2.5em;
}
div.productTile > div.product-item-body div.product-item-desc {
  grid-area: desc;
  background-color: rosybrown;
  overflow: hidden;
}
div.productTile > div.product-item-body div.product-item-desc > a {
  height: 55px;
}
div.productTile > div.product-item-body a.circleButton {
  width: var(--icon-size, 26px);
  height: var(--icon-size, 26px);
  grid-area: circle;
  position: static;
  display: block;
  justify-self: flex-end;
  align-self: end;
}
div.productTile > div.product-item-body a.circleButton > i {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: var(--icon-size, 26px);
  font-style: normal;
  color: #000;
}
div.productTile > div.product-item-body a.circleButton > i:before {
  align-self: center;
  margin: auto;
}
div.productTile > div.product-item-body a.circleButton:hover > i {
  color: #adadad;
}
div.productTile > div.product-item-body .debugProductData {
  font-size: 10px;
  background-color: #009d4e;
  color: #fff;
  padding: 5px 2px;
  margin-bottom: 5px;
}

#menuTree {
  background-color: #fff;
}
#menuTree > a {
  font-family: "latoregular", sans-serif;
  list-style-type: none;
  -webkit-font-smoothing: subpixel-antialiased;
  box-sizing: border-box;
  user-select: none;
  background-color: transparent;
  text-decoration: none !important;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
  width: 100%;
  padding: 15px 0;
  display: block;
  box-shadow: 0 1px 0 0 #C8C7CC;
  font-weight: 300;
  font-size: 0.9rem;
  transition: color 0.3s ease-out;
  display: none;
}
#menuTree > a.level-0 {
  padding-left: 0px;
}
#menuTree > a.level-1 {
  padding-left: 15px;
}
#menuTree > a.level-2 {
  padding-left: 30px;
}
#menuTree > a.level-3 {
  padding-left: 45px;
}
#menuTree > a.level-4 {
  padding-left: 60px;
}
#menuTree > a.level-5 {
  padding-left: 75px;
}
#menuTree > a.level-6 {
  padding-left: 90px;
}
#menuTree > a.level-7 {
  padding-left: 105px;
}
#menuTree > a.level-8 {
  padding-left: 120px;
}
#menuTree > a.level-9 {
  padding-left: 135px;
}
#menuTree > a.level-10 {
  padding-left: 150px;
}
#menuTree > a.level-11 {
  padding-left: 165px;
}
#menuTree > a.level-12 {
  padding-left: 180px;
}
#menuTree > a.level-13 {
  padding-left: 195px;
}
#menuTree > a.level-14 {
  padding-left: 210px;
}
#menuTree > a.level-15 {
  padding-left: 225px;
}
#menuTree > a.active {
  display: block;
}
#menuTree > a.current > .categoryName {
  font-weight: bold;
}
#menuTree > a > div.categoryCounter {
  padding-left: 22px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 300ms;
}
#menuTree > a > div.categoryCounter.active {
  opacity: 1;
  transform: none;
}
#menuTree > a > i {
  font-size: 0.7rem;
  margin-left: 2px;
  margin-right: 4px;
  display: inline-block;
  width: 13px;
}
#menuTree > a.leaf {
  border-left: 15px transparent solid;
}
#menuTree > a.leaf i {
  display: none;
}
#menuTree > a.leaf .categoryCounter {
  padding-left: 0;
}
#showroomView footer#showroomFooter > div > .downloadPdfButton > div.progress > i, footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover.balloonPopover > a > i.icon-union, footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover.balloonPopover > a > i.icon-union, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton.downloadButton.downloading > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton.downloadButton.downloading > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton.downloadButton.downloading > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > a.downloadButton.deleteButton.deleting > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.copyLinkButton.deleteButton.deleting > i, #vMedia div#sharedFiles > section > table > tbody > tr > td.actions > div > button.deleteButton.deleteButton.deleting > i, div.orderViewMenuWrapper aside.orderDetailsActions > div.sectionWrapper > nav > a > div.progress > i, #shareMediaResults #mediaFound > .downloading > i {
  display: flex;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*=== MODAL ==================================================================*/
#cover {
  position: absolute;
  z-index: 1000001;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100%;
  display: none;
}
@media only screen and (min-width: 768px) {
  #cover {
    width: 100%;
  }
}
#cover.show {
  position: fixed;
  display: block !important;
}

.succeed-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-image: url(b23f49ab94f61189f168.svg);
  margin: 0 auto;
}

.modal, .bigmodal {
  position: fixed;
  z-index: 1000002;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: none;
  border-radius: 3px;
  width: 100%;
}
.modal .close-icon, .bigmodal .close-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1.25rem;
  color: #333333;
  text-decoration: none;
  cursor: pointer;
}
.modal.show, .show.bigmodal {
  display: block !important;
}
.modal.one-line > h1, .one-line.bigmodal > h1, .modal.one-line > h2, .one-line.bigmodal > h2 {
  margin: 1.5rem 0;
}
.modal > div.iconWrapper, .bigmodal > div.iconWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal h1, .bigmodal h1 {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4rem;
  padding: 0 10px;
  float: left;
  font-weight: 700;
  margin-top: 1.25rem;
}
.modal h2, .bigmodal h2 {
  width: 100%;
  text-align: center;
  font-size: 1rem;
  line-height: 1.4rem;
  font-weight: normal;
  padding: 0 10px;
  margin-top: 0;
  margin-bottom: 0.625rem;
  float: left;
}
.modal > nav, .bigmodal > nav, .modal .includeNav, .bigmodal .includeNav {
  height: 45px;
  box-shadow: 0 -1px 0 0 #C8C7CC;
  float: left;
}
.modal > nav > div > div, .bigmodal > nav > div > div, .modal .includeNav > div > div, .bigmodal .includeNav > div > div {
  text-align: center;
  vertical-align: middle;
  height: 35px;
  box-shadow: -1px 0 0 0 #C8C7CC;
}
.modal > nav > div > div:first-child, .bigmodal > nav > div > div:first-child, .modal .includeNav > div > div:first-child, .bigmodal .includeNav > div > div:first-child {
  box-shadow: none !important;
}
.modal > nav > div > div a, .bigmodal > nav > div > div a, .modal .includeNav > div > div a, .bigmodal .includeNav > div > div a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  width: 100%;
  height: 100%;
  line-height: 1.225rem;
  font-weight: 700;
  transition: all ease 150ms;
  font-size: 0.875rem;
}
.modal > nav > div > div a.touch, .bigmodal > nav > div > div a.touch, .modal > nav > div > div a:hover, .bigmodal > nav > div > div a:hover, .modal .includeNav > div > div a.touch, .bigmodal .includeNav > div > div a.touch, .modal .includeNav > div > div a:hover, .bigmodal .includeNav > div > div a:hover {
  text-shadow: 1px 1px 2px #fff;
}
.modal .includeNav a, .bigmodal .includeNav a {
  font-weight: normal !important;
}
.modal div.numberInputWrapper, .bigmodal div.numberInputWrapper {
  grid-template-rows: 50px calc(100% - 90px) 40px !important;
}
.customer_target {
  width: auto;
  max-width: 640px;
  height: auto;
  max-height: 450px;
  color: #979796;
}

.modal div.numberInputWrapper > input, .bigmodal div.numberInputWrapper > input {
  margin: 0 auto;
}
.modal div.numberInputWrapper > section.modalHeader, .bigmodal div.numberInputWrapper > section.modalHeader {
  background: #292929 !important;
  height: 50px !important;
}
.modal div.numberInputWrapper > section.modalMain > span, .bigmodal div.numberInputWrapper > section.modalMain > span {
  display: grid;
  grid-template-columns: 1fr 2fr 40px;
  grid-gap: 20px 15px;
  align-items: center;
  padding: 0 20px;
}
.modal div.numberInputWrapper > section.modalMain > span > .targetLabel, .bigmodal div.numberInputWrapper > section.modalMain > span > .targetLabel {
  color: #000;
  font-weight: bold;
}
.modal div.numberInputWrapper > section.modalMain > span > label, .bigmodal div.numberInputWrapper > section.modalMain > span > label {
  text-align: right;
}
.modal div.numberInputWrapper > section.modalMain > span > input, .bigmodal div.numberInputWrapper > section.modalMain > span > input {
  width: 100%;
  margin-top: 0;
}
.modal div.numberInputWrapper > section.modalMain > span > p, .bigmodal div.numberInputWrapper > section.modalMain > span > p {
  text-align: left;
}
.modal div.numberInputWrapper > section.modalMain > p, .bigmodal div.numberInputWrapper > section.modalMain > p {
  text-align: center;
  padding: 0 20px;
}
.modal div.numberInputWrapper > section.modalMain > div.buttons, .bigmodal div.numberInputWrapper > section.modalMain > div.buttons {
  text-align: center;
}
.modal div.numberInputWrapper > section.modalMain > div.buttons > button, .bigmodal div.numberInputWrapper > section.modalMain > div.buttons > button {
  border-radius: 5px;
}
.modal div.numberInputWrapper > section.modalBottom, .bigmodal div.numberInputWrapper > section.modalBottom {
  background-color: #292929;
  height: 40px;
}

.bigmodal {
  border: none;
  display: none;
}
.bigmodal.show {
  display: block !important;
}
.bigmodal.bigmodal.required_acceptance header {
  display: grid;
  grid-template: "buttonLeft title buttonRight";
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 10px;
}
.bigmodal.bigmodal.required_acceptance header > a:nth-child(1) {
  text-align: left;
}
.bigmodal #modalWindow {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.bigmodal #modalWindow > section.modalHeader, .bigmodal #modalWindow > header {
  z-index: 999;
}
.bigmodal #modalWindow > section.modalHeader .narrow, .bigmodal #modalWindow > header .narrow {
  width: 120px;
}
.bigmodal #modalWindow > section.modalHeader .narrow.sm-thin, .bigmodal #modalWindow > header .narrow.sm-thin {
  width: 60px;
}
@media only screen and (min-width: 768px) {
  .bigmodal #modalWindow > section.modalHeader .narrow.sm-thin, .bigmodal #modalWindow > header .narrow.sm-thin {
    width: 80px;
  }
}
.bigmodal #modalWindow > section.modalHeader .narrow a, .bigmodal #modalWindow > header .narrow a {
  font-size: 0.8rem;
  float: left;
  width: 100%;
}
.bigmodal #modalWindow > section.modalHeader .narrow a:hover, .bigmodal #modalWindow > header .narrow a:hover {
  color: #ccc;
}
.bigmodal #modalWindow > section.modalHeader .narrow a.disabled, .bigmodal #modalWindow > header .narrow a.disabled {
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}
.bigmodal #modalWindow > section.modalHeader .narrow a.bolded, .bigmodal #modalWindow > header .narrow a.bolded {
  font-weight: bold;
}
.bigmodal #modalWindow > section.modalHeader .narrow a i, .bigmodal #modalWindow > header .narrow a i {
  font-size: 1rem;
  float: left;
  /*display: inline-block;*/
  height: 100%;
  width: 20px;
  line-height: 40px;
}
.bigmodal #modalWindow > section.modalHeader .narrow a i.icon-search, .bigmodal #modalWindow > section.modalHeader .narrow a i.fa-search, .bigmodal #modalWindow > header .narrow a i.icon-search, .bigmodal #modalWindow > header .narrow a i.fa-search {
  display: none;
}
@media only screen and (min-width: 768px) {
  .bigmodal #modalWindow > section.modalHeader .narrow a i.icon-search, .bigmodal #modalWindow > section.modalHeader .narrow a i.fa-search, .bigmodal #modalWindow > header .narrow a i.icon-search, .bigmodal #modalWindow > header .narrow a i.fa-search {
    display: block;
    font-size: 1.3rem;
    float: left;
    line-height: 39px;
    height: 40px;
    overflow: hidden;
    width: 25px;
  }
}
.bigmodal #modalWindow > section.modalHeader .narrow a span, .bigmodal #modalWindow > header .narrow a span {
  float: left;
  height: 38px;
  line-height: 36px;
  font-weight: lighter;
}
.bigmodal #modalWindow > section.modalHeader .narrow a span.bold, .bigmodal #modalWindow > header .narrow a span.bold {
  font-weight: bold;
}
.bigmodal #modalWindow > section.modalHeader .narrow a span.w-100, .bigmodal #modalWindow > header .narrow a span.w-100 {
  width: 100%;
}
.bigmodal #modalWindow > section.modalHeader .narrow:first-child, .bigmodal #modalWindow > header .narrow:first-child {
  padding-left: 16px;
  text-align: left;
}
.bigmodal #modalWindow > section.modalHeader .narrow:last-child, .bigmodal #modalWindow > header .narrow:last-child {
  padding-right: 16px;
  text-align: right;
}
.bigmodal #modalWindow > section.modalHeader .indent, .bigmodal #modalWindow > header .indent {
  text-indent: -60px;
}
.bigmodal #modalWindow > section.modalHeader a, .bigmodal #modalWindow > header a {
  color: #fff;
}
.bigmodal #modalWindow > section.modalHeader > div > div, .bigmodal #modalWindow > header > div > div {
  vertical-align: middle;
}
.bigmodal #modalWindow > div {
  height: 100%;
  width: 100%;
  background: #fff;
  max-height: calc(100dvh - 100px);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
.bigmodal #modalWindow > div::-webkit-scrollbar {
  width: 5px;
}
.bigmodal #modalWindow > div::-webkit-scrollbar-thumb {
  background-color: #666666;
}
.bigmodal #modalWindow > div .cleanList > a > div {
  float: none !important;
}
.bigmodal #modalWindow > div .cleanList span {
  width: 100%;
  /*display: block;*/
  line-height: 1.3rem;
  padding-left: 5px;
}
.bigmodal .settings input.mismatch {
  background-color: #e03e2e;
}
.bigmodal textarea:disabled, .bigmodal input:disabled {
  cursor: not-allowed;
}
.bigmodal #termsWrapper {
  padding-left: 3%;
  padding-right: 3%;
  width: 100%;
  height: 240px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}
.bigmodal #termsWrapper.acceptTermsAndConditions {
  height: 120px;
}
.bigmodal #termsWrapper #buttonsWrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 10px 0 15px 0;
}
.bigmodal #termsWrapper #buttonsWrapper a:first-child {
  margin: 0;
}
.bigmodal #termsWrapper #buttonsWrapper a:last-child {
  margin: 0;
}
.bigmodal #termsWrapper #buttonsWrapper > a {
  width: 240px;
}
html.safari .bigmodal #termsWrapper #buttonsWrapper > a {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width: 568px) {
  .bigmodal #termsWrapper #buttonsWrapper {
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    justify-content: space-between;
  }
  .bigmodal #termsWrapper #buttonsWrapper a:first-child {
    margin-left: 0;
  }
  .bigmodal #termsWrapper #buttonsWrapper a:last-child {
    margin-right: 0;
  }
}
.bigmodal #termsWrapper hr {
  border-top: 2px solid #474747;
}
.bigmodal #termsWrapper div {
  --checkbox-size: 20px;
  display: flex;
}
@media only screen and (min-width: 768px) {
  .bigmodal #termsWrapper div {
    --checkbox-size: 25px;
  }
}
.bigmodal #termsWrapper div #checboxTest input[type=checkbox] {
  display: none;
}
.bigmodal #termsWrapper div #checboxTest input[type=checkbox] + label {
  display: inline-block;
  padding: 0;
  background: url(9fd8191ff391f00a9fea.svg) no-repeat;
  height: 50px;
  width: 50px;
  background-size: 50%;
}
.bigmodal #termsWrapper div #checboxTest input[type=checkbox]:checked + label {
  background: url(ff9142682876d395204d.svg) no-repeat;
}
.bigmodal #termsWrapper div #acceptTermsPlaceholder {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
@media only screen and (min-width: 468px) {
  .bigmodal #termsWrapper div #acceptTermsPlaceholder {
    font-size: 1rem;
  }
}
.bigmodal #termsWrapper div #acceptTermsPlaceholder .termsCheckboxLabel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}
.bigmodal #termsWrapper div #acceptTermsPlaceholder input[type=checkbox] {
  display: none;
}
.bigmodal #termsWrapper div #acceptTermsPlaceholder .customCheckbox {
  display: inline-block;
  background: url(9fd8191ff391f00a9fea.svg) no-repeat;
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  background-size: 100%;
  cursor: pointer;
  flex-shrink: 0;
}
.bigmodal #termsWrapper div #acceptTermsPlaceholder input[type=checkbox]:checked + .customCheckbox {
  background: url(ff9142682876d395204d.svg) no-repeat;
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  background-size: 100%;
}
.bigmodal #termsWrapper div #acceptTermsPlaceholder .termsText {
  flex: 1;
  display: inline-block;
}
.bigmodal .datepicker table {
  width: 100%;
}
.bigmodal .datepicker table [date-picker] [ng-switch-when=date] span {
  width: 100%;
  height: 45px;
  line-height: 43px;
}
div.bigmodal.productRemarks form.discountForm > div textarea, div.bigmodal.productRemarks form.remarksForm > div textarea, div.bigmodal.productRemarks div.afterForm > div textarea,
div.bigmodal.remarks_per_product form.discountForm > div textarea,
div.bigmodal.remarks_per_product form.remarksForm > div textarea,
div.bigmodal.remarks_per_product div.afterForm > div textarea,
div.bigmodal.remarks form.discountForm > div textarea,
div.bigmodal.remarks form.remarksForm > div textarea,
div.bigmodal.remarks div.afterForm > div textarea, .bigmodal .remarksGrid textarea {
  background-color: #F7F7F7;
  border: none;
  color: #000;
  height: 100px;
}
.bigmodal .remarksGrid {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  padding: 20px 0 10px 0;
  width: 90%;
  font-size: 0.75rem;
}
@media only screen and (min-width: 480px) {
  .bigmodal .remarksGrid {
    font-size: 1rem;
  }
}
.bigmodal .remarksGrid input {
  font-size: 0.75rem;
}
@media only screen and (min-width: 480px) {
  .bigmodal .remarksGrid input {
    font-size: 1rem;
  }
}
.bigmodal .collectionFilter {
  background-color: #EFEFF4;
}
.bigmodal .collectionFilter .separator {
  height: 40px;
  padding-left: 20px;
  line-height: 3.2rem;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.8rem;
}
.bigmodal .ios-style {
  background: #fff;
  box-shadow: 0 0 0 1px #DFDEE3;
}
.bigmodal .ios-style.padding-top {
  margin-top: 20px;
}
.bigmodal .ios-style.padding-bottom {
  margin-bottom: 20px;
}
.bigmodal .ios-style > div > div {
  font-weight: lighter;
}
.bigmodal .ios-style > div > div:first-child {
  padding-left: 10px;
}
.bigmodal .ios-style > div > div:last-child {
  padding-right: 10px;
}
.bigmodal .ios-style > div > div.thin-label {
  width: 60px;
}
.bigmodal .ios-style > div > div.thin {
  width: 70px;
  height: 40px;
  text-align: center;
  position: relative;
}
.bigmodal .ios-style > div > div.thin > .text {
  position: absolute;
  top: 0;
  right: 60px;
  width: 200px;
  line-height: 35px;
  text-align: right;
}
.bigmodal .ios-style > div > div input {
  margin: 5px 0;
  width: 100%;
  box-shadow: inset 0 0 2px 0 #DFDEE3;
  font-weight: lighter;
}
.bigmodal .ios-style > div > div input.center {
  text-align: center;
}
.bigmodal .ios-style > div > div input[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
  box-shadow: none;
  width: 20px;
  height: 40px;
  display: inline;
}

.validation-notify {
  width: 95%;
  margin: 10px auto;
  box-shadow: 0 0 0 1px #9A9A9A;
  padding: 10px 5px;
}

.modalErrorMessage {
  text-align: center;
  color: #ff0000;
}

#requiredAcceptancePreviewContainer {
  overflow: auto;
  padding-bottom: 100px;
}

#requiredAcceptancePreviewLoading {
  text-align: center;
  padding: 25px !important;
}

.modalFooter {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #474747;
  color: #ababab;
  height: 50px;
}

div.bigmodal.agents, div.bigmodal.agents_chain,
div.bigmodal.brand_terms_and_conditions,
div.bigmodal.buyers,
div.bigmodal.ccdw,
div.bigmodal.ccdw_edit,
div.bigmodal.collection_filter,
div.bigmodal.product_search_filter,
div.bigmodal.customer, div.bigmodal.customers_chain,
div.bigmodal.customer_target,
div.bigmodal.datepicker,
div.bigmodal.delivery, div.bigmodal.delivery_chain,
div.bigmodal.delivery_window,
div.bigmodal.order_target,
div.bigmodal.order_activities,
div.bigmodal.order_statistics,
div.bigmodal.packages,
div.bigmodal.paymentTerms,
div.bigmodal.productRemarks,
div.bigmodal.customerRemarks,
div.bigmodal.remarks,
div.bigmodal.remarks_per_product,
div.bigmodal.required_acceptance,
div.bigmodal.seasons,
div.bigmodal.seasons_chain,
div.bigmodal.seasons,
div.bigmodal.preview_pdf,
div.bigmodal.pricelist {
  background: transparent;
  width: calc(100dvw - 20px);
  height: calc(100dvh - 20px);
}
@media only screen and (min-width: 768px) {
  div.bigmodal.agents, div.bigmodal.agents_chain,
  div.bigmodal.brand_terms_and_conditions,
  div.bigmodal.buyers,
  div.bigmodal.ccdw,
  div.bigmodal.ccdw_edit,
  div.bigmodal.collection_filter,
  div.bigmodal.product_search_filter,
  div.bigmodal.customer, div.bigmodal.customers_chain,
  div.bigmodal.customer_target,
  div.bigmodal.datepicker,
  div.bigmodal.delivery, div.bigmodal.delivery_chain,
  div.bigmodal.delivery_window,
  div.bigmodal.order_target,
  div.bigmodal.order_activities,
  div.bigmodal.order_statistics,
  div.bigmodal.packages,
  div.bigmodal.paymentTerms,
  div.bigmodal.productRemarks,
  div.bigmodal.customerRemarks,
  div.bigmodal.remarks,
  div.bigmodal.remarks_per_product,
  div.bigmodal.required_acceptance,
  div.bigmodal.seasons,
  div.bigmodal.seasons_chain,
  div.bigmodal.seasons,
  div.bigmodal.preview_pdf,
  div.bigmodal.pricelist {
    width: calc(100dvw - 50px);
    height: calc(100dvh - 50px);
  }
}
html.safari div.bigmodal.agents, html.safari div.bigmodal.agents_chain,
html.safari div.bigmodal.brand_terms_and_conditions,
html.safari div.bigmodal.buyers,
html.safari div.bigmodal.ccdw,
html.safari div.bigmodal.ccdw_edit,
html.safari div.bigmodal.collection_filter,
html.safari div.bigmodal.product_search_filter,
html.safari div.bigmodal.customer, html.safari div.bigmodal.customers_chain,
html.safari div.bigmodal.customer_target,
html.safari div.bigmodal.datepicker,
html.safari div.bigmodal.delivery, html.safari div.bigmodal.delivery_chain,
html.safari div.bigmodal.delivery_window,
html.safari div.bigmodal.order_target,
html.safari div.bigmodal.order_activities,
html.safari div.bigmodal.order_statistics,
html.safari div.bigmodal.packages,
html.safari div.bigmodal.paymentTerms,
html.safari div.bigmodal.productRemarks,
html.safari div.bigmodal.customerRemarks,
html.safari div.bigmodal.remarks,
html.safari div.bigmodal.remarks_per_product,
html.safari div.bigmodal.required_acceptance,
html.safari div.bigmodal.seasons,
html.safari div.bigmodal.seasons_chain,
html.safari div.bigmodal.seasons,
html.safari div.bigmodal.preview_pdf,
html.safari div.bigmodal.pricelist {
  width: calc(100dvw - 20px);
  height: calc(100dvh - 20px);
}
@media only screen and (min-width: 768px) {
  html.safari div.bigmodal.agents, html.safari div.bigmodal.agents_chain,
  html.safari div.bigmodal.brand_terms_and_conditions,
  html.safari div.bigmodal.buyers,
  html.safari div.bigmodal.ccdw,
  html.safari div.bigmodal.ccdw_edit,
  html.safari div.bigmodal.collection_filter,
  html.safari div.bigmodal.product_search_filter,
  html.safari div.bigmodal.customer, html.safari div.bigmodal.customers_chain,
  html.safari div.bigmodal.customer_target,
  html.safari div.bigmodal.datepicker,
  html.safari div.bigmodal.delivery, html.safari div.bigmodal.delivery_chain,
  html.safari div.bigmodal.delivery_window,
  html.safari div.bigmodal.order_target,
  html.safari div.bigmodal.order_activities,
  html.safari div.bigmodal.order_statistics,
  html.safari div.bigmodal.packages,
  html.safari div.bigmodal.paymentTerms,
  html.safari div.bigmodal.productRemarks,
  html.safari div.bigmodal.customerRemarks,
  html.safari div.bigmodal.remarks,
  html.safari div.bigmodal.remarks_per_product,
  html.safari div.bigmodal.required_acceptance,
  html.safari div.bigmodal.seasons,
  html.safari div.bigmodal.seasons_chain,
  html.safari div.bigmodal.seasons,
  html.safari div.bigmodal.preview_pdf,
  html.safari div.bigmodal.pricelist {
    width: calc(100dvw - 50px);
    height: calc(100dvh - 50px);
  }
}

div.bigmodal.agents div.simpleWindow, div.bigmodal.agents_chain div.simpleWindow,
div.bigmodal.brand_terms_and_conditions div.simpleWindow,
div.bigmodal.buyers div.simpleWindow,
div.bigmodal.ccdw div.simpleWindow,
div.bigmodal.ccdw_edit div.simpleWindow,
div.bigmodal.collection_filter div.simpleWindow,
div.bigmodal.product_search_filter div.simpleWindow,
div.bigmodal.customer div.simpleWindow, div.bigmodal.customers_chain div.simpleWindow,
div.bigmodal.customer_target div.simpleWindow,
div.bigmodal.datepicker div.simpleWindow,
div.bigmodal.delivery div.simpleWindow, div.bigmodal.delivery_chain div.simpleWindow,
div.bigmodal.delivery_window div.simpleWindow,
div.bigmodal.order_target div.simpleWindow,
div.bigmodal.order_activities div.simpleWindow,
div.bigmodal.order_statistics div.simpleWindow,
div.bigmodal.packages div.simpleWindow,
div.bigmodal.paymentTerms div.simpleWindow,
div.bigmodal.productRemarks div.simpleWindow,
div.bigmodal.customerRemarks div.simpleWindow,
div.bigmodal.remarks div.simpleWindow,
div.bigmodal.remarks_per_product div.simpleWindow,
div.bigmodal.required_acceptance div.simpleWindow,
div.bigmodal.seasons div.simpleWindow,
div.bigmodal.seasons_chain div.simpleWindow,
div.bigmodal.seasons div.simpleWindow,
div.bigmodal.preview_pdf div.simpleWindow,
div.bigmodal.pricelist div.simpleWindow {
  display: grid;
  grid-template-rows: 40px calc(100% - 40px);
  width: 100%;
  height: 100%;
}
div.bigmodal.agents div.simpleWindow.noHeader, div.bigmodal.agents_chain div.simpleWindow.noHeader,
div.bigmodal.brand_terms_and_conditions div.simpleWindow.noHeader,
div.bigmodal.buyers div.simpleWindow.noHeader,
div.bigmodal.ccdw div.simpleWindow.noHeader,
div.bigmodal.ccdw_edit div.simpleWindow.noHeader,
div.bigmodal.collection_filter div.simpleWindow.noHeader,
div.bigmodal.product_search_filter div.simpleWindow.noHeader,
div.bigmodal.customer div.simpleWindow.noHeader, div.bigmodal.customers_chain div.simpleWindow.noHeader,
div.bigmodal.customer_target div.simpleWindow.noHeader,
div.bigmodal.datepicker div.simpleWindow.noHeader,
div.bigmodal.delivery div.simpleWindow.noHeader, div.bigmodal.delivery_chain div.simpleWindow.noHeader,
div.bigmodal.delivery_window div.simpleWindow.noHeader,
div.bigmodal.order_target div.simpleWindow.noHeader,
div.bigmodal.order_activities div.simpleWindow.noHeader,
div.bigmodal.order_statistics div.simpleWindow.noHeader,
div.bigmodal.packages div.simpleWindow.noHeader,
div.bigmodal.paymentTerms div.simpleWindow.noHeader,
div.bigmodal.productRemarks div.simpleWindow.noHeader,
div.bigmodal.customerRemarks div.simpleWindow.noHeader,
div.bigmodal.remarks div.simpleWindow.noHeader,
div.bigmodal.remarks_per_product div.simpleWindow.noHeader,
div.bigmodal.required_acceptance div.simpleWindow.noHeader,
div.bigmodal.seasons div.simpleWindow.noHeader,
div.bigmodal.seasons_chain div.simpleWindow.noHeader,
div.bigmodal.seasons div.simpleWindow.noHeader,
div.bigmodal.preview_pdf div.simpleWindow.noHeader,
div.bigmodal.pricelist div.simpleWindow.noHeader {
  grid-template-rows: 100%;
}
div.bigmodal.agents section.modalMain, div.bigmodal.agents_chain section.modalMain,
div.bigmodal.brand_terms_and_conditions section.modalMain,
div.bigmodal.buyers section.modalMain,
div.bigmodal.ccdw section.modalMain,
div.bigmodal.ccdw_edit section.modalMain,
div.bigmodal.collection_filter section.modalMain,
div.bigmodal.product_search_filter section.modalMain,
div.bigmodal.customer section.modalMain, div.bigmodal.customers_chain section.modalMain,
div.bigmodal.customer_target section.modalMain,
div.bigmodal.datepicker section.modalMain,
div.bigmodal.delivery section.modalMain, div.bigmodal.delivery_chain section.modalMain,
div.bigmodal.delivery_window section.modalMain,
div.bigmodal.order_target section.modalMain,
div.bigmodal.order_activities section.modalMain,
div.bigmodal.order_statistics section.modalMain,
div.bigmodal.packages section.modalMain,
div.bigmodal.paymentTerms section.modalMain,
div.bigmodal.productRemarks section.modalMain,
div.bigmodal.customerRemarks section.modalMain,
div.bigmodal.remarks section.modalMain,
div.bigmodal.remarks_per_product section.modalMain,
div.bigmodal.required_acceptance section.modalMain,
div.bigmodal.seasons section.modalMain,
div.bigmodal.seasons_chain section.modalMain,
div.bigmodal.seasons section.modalMain,
div.bigmodal.preview_pdf section.modalMain,
div.bigmodal.pricelist section.modalMain {
  background: #fff;
  height: 100%;
}

div.bigmodal.delivery_chain div.simpleWindow {
  display: block;
}

div.bigmodal.customer section.modalMain {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
div.bigmodal.customer section.modalMain::-webkit-scrollbar {
  width: 5px;
}
div.bigmodal.customer section.modalMain::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 568px) {
  div.bigmodal.customer section.modalMain {
    flex-direction: column;
    justify-content: flex-start;
  }
}
div.bigmodal.customer section.modalMain > div.template {
  order: 3;
}
@media only screen and (min-width: 568px) {
  div.bigmodal.customer section.modalMain > div.template {
    order: 1;
  }
}
div.bigmodal.customer section.modalMain > div.userDetails {
  order: 1;
}
@media only screen and (min-width: 568px) {
  div.bigmodal.customer section.modalMain > div.userDetails {
    order: 3;
  }
}
div.bigmodal.customer section.modalMain > hr {
  width: calc(100% - 30px);
  padding: 0;
  order: 2;
}
@media only screen and (min-width: 568px) {
  div.bigmodal.customer section.modalMain > hr {
    transform: translateY(-40px);
  }
}

div.bigmodal.customers {
  background: transparent;
  width: calc(100dvw - 20px);
  height: calc(100dvh - 20px);
}
@media only screen and (min-width: 768px) {
  div.bigmodal.customers {
    width: calc(100dvw - 50px);
    height: calc(100dvh - 50px);
  }
}
div.bigmodal.customers div.simpleWindow {
  width: 100%;
  height: 100%;
}
div.bigmodal.customers section.modalMain {
  background: #fff;
  height: 100%;
}

div.bigmodal.customers_chain section.modalMain, div.bigmodal.delivery_chain section.modalMain {
  overflow: hidden;
}

div.bigmodal.ccdw_edit,
div.bigmodal.datepicker,
div.bigmodal.order_statistics,
div.bigmodal.seasons,
div.bigmodal.seasons_chain,
div.bigmodal.pricelist {
  width: auto;
  max-width: 640px;
  height: auto;
  max-height: 550px;
}
@media only screen and (min-width: 768px) {
  div.bigmodal.ccdw_edit,
  div.bigmodal.datepicker,
  div.bigmodal.order_statistics,
  div.bigmodal.seasons,
  div.bigmodal.seasons_chain,
  div.bigmodal.pricelist {
    min-width: 640px;
  }
}

div.bigmodal.seasons_chain {
  width: calc(100dvw - 20px);
}

div.bigmodal.pricelist {
  max-height: initial;
}

div.bigmodal.order_statistics {
  height: 550px;
  width: calc(100dvw - 20px);
}
@media only screen and (min-width: 768px) {
  div.bigmodal.order_statistics {
    width: auto;
  }
}

div.bigmodal.datepicker div.mighty-picker__wrapper {
  display: grid;
  grid-template-columns: 80px auto 80px;
}
div.bigmodal.datepicker div.mighty-picker__wrapper > button {
  display: flex;
  grid-row: 1/span 1;
  z-index: 2;
}
div.bigmodal.datepicker div.mighty-picker__wrapper > button.mighty-picker__prev-month {
  grid-column: 1/span 1;
}
div.bigmodal.datepicker div.mighty-picker__wrapper > button.mighty-picker__next-month {
  grid-column: 3/span 1;
}
div.bigmodal.datepicker div.mighty-picker__wrapper > div.mighty-picker__month {
  grid-column: 1/span 3;
  grid-row: 1/span 2;
}
div.bigmodal.datepicker div.mighty-picker__wrapper > div.mighty-picker__month > div.mighty-picker__month-name {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 60px;
}
@media only screen and (min-width: 768px) {
  div.bigmodal.datepicker {
    min-width: 0;
  }
}

div.bigmodal.custom_calendar {
  width: calc(100% - 1rem);
  margin: 0.5rem;
  transform: translate(calc(-50% - 0.5rem), -50%);
}
div.bigmodal.custom_calendar div.simpleWindow {
  height: 100%;
}
div.bigmodal.custom_calendar div.simpleWindow > section.modalMain {
  height: calc(100% - 40px);
  padding: 1rem;
}

div.bigmodal.calendly,
div.bigmodal.collection_filter,
div.bigmodal.product_search_filter,
div.bigmodal.order_activities,
div.bigmodal.remarks,
div.bigmodal.paymentTerms,
div.bigmodal.productRemarks,
div.bigmodal.customerRemarks,
div.bigmodal.remarks_per_product,
div.bigmodal.custom_calendar {
  height: 450px;
}
@media only screen and (min-width: 768px) {
  div.bigmodal.calendly,
  div.bigmodal.collection_filter,
  div.bigmodal.product_search_filter,
  div.bigmodal.order_activities,
  div.bigmodal.remarks,
  div.bigmodal.paymentTerms,
  div.bigmodal.productRemarks,
  div.bigmodal.customerRemarks,
  div.bigmodal.remarks_per_product,
  div.bigmodal.custom_calendar {
    width: 640px;
  }
}
html.safari div.bigmodal.calendly,
html.safari div.bigmodal.collection_filter,
html.safari div.bigmodal.product_search_filter,
html.safari div.bigmodal.order_activities,
html.safari div.bigmodal.remarks,
html.safari div.bigmodal.paymentTerms,
html.safari div.bigmodal.productRemarks,
html.safari div.bigmodal.customerRemarks,
html.safari div.bigmodal.remarks_per_product,
html.safari div.bigmodal.custom_calendar {
  height: 450px;
}
@media only screen and (min-width: 768px) {
  html.safari div.bigmodal.calendly,
  html.safari div.bigmodal.collection_filter,
  html.safari div.bigmodal.product_search_filter,
  html.safari div.bigmodal.order_activities,
  html.safari div.bigmodal.remarks,
  html.safari div.bigmodal.paymentTerms,
  html.safari div.bigmodal.productRemarks,
  html.safari div.bigmodal.customerRemarks,
  html.safari div.bigmodal.remarks_per_product,
  html.safari div.bigmodal.custom_calendar {
    width: 640px;
  }
}

div.bigmodal.agents,
div.bigmodal.buyers,
div.bigmodal.collection_filter,
div.bigmodal.product_search_filter,
div.bigmodal.delivery, div.bigmodal.delivery_chain,
div.bigmodal.order_activities,
div.bigmodal.paymentTerms,
div.bigmodal.productRemarks,
div.bigmodal.remarks,
div.bigmodal.packages,
div.bigmodal.required_acceptance {
  background: transparent !important;
}
div.bigmodal.agents section.modalMain,
div.bigmodal.buyers section.modalMain,
div.bigmodal.collection_filter section.modalMain,
div.bigmodal.product_search_filter section.modalMain,
div.bigmodal.delivery section.modalMain, div.bigmodal.delivery_chain section.modalMain,
div.bigmodal.order_activities section.modalMain,
div.bigmodal.paymentTerms section.modalMain,
div.bigmodal.productRemarks section.modalMain,
div.bigmodal.remarks section.modalMain,
div.bigmodal.packages section.modalMain,
div.bigmodal.required_acceptance section.modalMain {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
div.bigmodal.agents section.modalMain::-webkit-scrollbar,
div.bigmodal.buyers section.modalMain::-webkit-scrollbar,
div.bigmodal.collection_filter section.modalMain::-webkit-scrollbar,
div.bigmodal.product_search_filter section.modalMain::-webkit-scrollbar,
div.bigmodal.delivery section.modalMain::-webkit-scrollbar, div.bigmodal.delivery_chain section.modalMain::-webkit-scrollbar,
div.bigmodal.order_activities section.modalMain::-webkit-scrollbar,
div.bigmodal.paymentTerms section.modalMain::-webkit-scrollbar,
div.bigmodal.productRemarks section.modalMain::-webkit-scrollbar,
div.bigmodal.remarks section.modalMain::-webkit-scrollbar,
div.bigmodal.packages section.modalMain::-webkit-scrollbar,
div.bigmodal.required_acceptance section.modalMain::-webkit-scrollbar {
  width: 5px;
}
div.bigmodal.agents section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.buyers section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.collection_filter section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.product_search_filter section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.delivery section.modalMain::-webkit-scrollbar-thumb, div.bigmodal.delivery_chain section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.order_activities section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.paymentTerms section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.productRemarks section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.remarks section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.packages section.modalMain::-webkit-scrollbar-thumb,
div.bigmodal.required_acceptance section.modalMain::-webkit-scrollbar-thumb {
  background-color: #666666;
}

div.bigmodal.productRemarks form.discountForm, div.bigmodal.productRemarks form.remarksForm, div.bigmodal.productRemarks div.afterForm,
div.bigmodal.remarks_per_product form.discountForm,
div.bigmodal.remarks_per_product form.remarksForm,
div.bigmodal.remarks_per_product div.afterForm,
div.bigmodal.remarks form.discountForm,
div.bigmodal.remarks form.remarksForm,
div.bigmodal.remarks div.afterForm {
  display: flex;
  flex-direction: column;
  padding: 15px;
}
@media only screen and (min-width: 768px) {
  div.bigmodal.productRemarks form.discountForm, div.bigmodal.productRemarks form.remarksForm, div.bigmodal.productRemarks div.afterForm,
  div.bigmodal.remarks_per_product form.discountForm,
  div.bigmodal.remarks_per_product form.remarksForm,
  div.bigmodal.remarks_per_product div.afterForm,
  div.bigmodal.remarks form.discountForm,
  div.bigmodal.remarks form.remarksForm,
  div.bigmodal.remarks div.afterForm {
    padding: 30px;
  }
}
div.bigmodal.productRemarks form.discountForm > p.formLegend, div.bigmodal.productRemarks form.remarksForm > p.formLegend, div.bigmodal.productRemarks div.afterForm > p.formLegend,
div.bigmodal.remarks_per_product form.discountForm > p.formLegend,
div.bigmodal.remarks_per_product form.remarksForm > p.formLegend,
div.bigmodal.remarks_per_product div.afterForm > p.formLegend,
div.bigmodal.remarks form.discountForm > p.formLegend,
div.bigmodal.remarks form.remarksForm > p.formLegend,
div.bigmodal.remarks div.afterForm > p.formLegend {
  margin-top: 0;
  margin-bottom: 1em;
}
div.bigmodal.productRemarks form.discountForm > div, div.bigmodal.productRemarks form.remarksForm > div, div.bigmodal.productRemarks div.afterForm > div,
div.bigmodal.remarks_per_product form.discountForm > div,
div.bigmodal.remarks_per_product form.remarksForm > div,
div.bigmodal.remarks_per_product div.afterForm > div,
div.bigmodal.remarks form.discountForm > div,
div.bigmodal.remarks form.remarksForm > div,
div.bigmodal.remarks div.afterForm > div {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
div.bigmodal.productRemarks form.discountForm > div.input-wrapper.input-wrapper, div.bigmodal.productRemarks form.remarksForm > div.input-wrapper.input-wrapper, div.bigmodal.productRemarks div.afterForm > div.input-wrapper.input-wrapper,
div.bigmodal.remarks_per_product form.discountForm > div.input-wrapper.input-wrapper,
div.bigmodal.remarks_per_product form.remarksForm > div.input-wrapper.input-wrapper,
div.bigmodal.remarks_per_product div.afterForm > div.input-wrapper.input-wrapper,
div.bigmodal.remarks form.discountForm > div.input-wrapper.input-wrapper,
div.bigmodal.remarks form.remarksForm > div.input-wrapper.input-wrapper,
div.bigmodal.remarks div.afterForm > div.input-wrapper.input-wrapper {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-gap: 5px 10px;
  grid-template-areas: "label input" "error error";
}
div.bigmodal.productRemarks form.discountForm > div.input-wrapper.input-wrapper > span, div.bigmodal.productRemarks form.remarksForm > div.input-wrapper.input-wrapper > span, div.bigmodal.productRemarks div.afterForm > div.input-wrapper.input-wrapper > span,
div.bigmodal.remarks_per_product form.discountForm > div.input-wrapper.input-wrapper > span,
div.bigmodal.remarks_per_product form.remarksForm > div.input-wrapper.input-wrapper > span,
div.bigmodal.remarks_per_product div.afterForm > div.input-wrapper.input-wrapper > span,
div.bigmodal.remarks form.discountForm > div.input-wrapper.input-wrapper > span,
div.bigmodal.remarks form.remarksForm > div.input-wrapper.input-wrapper > span,
div.bigmodal.remarks div.afterForm > div.input-wrapper.input-wrapper > span {
  grid-area: label;
  width: 100%;
}
div.bigmodal.productRemarks form.discountForm > div.input-wrapper.input-wrapper > input, div.bigmodal.productRemarks form.remarksForm > div.input-wrapper.input-wrapper > input, div.bigmodal.productRemarks div.afterForm > div.input-wrapper.input-wrapper > input,
div.bigmodal.remarks_per_product form.discountForm > div.input-wrapper.input-wrapper > input,
div.bigmodal.remarks_per_product form.remarksForm > div.input-wrapper.input-wrapper > input,
div.bigmodal.remarks_per_product div.afterForm > div.input-wrapper.input-wrapper > input,
div.bigmodal.remarks form.discountForm > div.input-wrapper.input-wrapper > input,
div.bigmodal.remarks form.remarksForm > div.input-wrapper.input-wrapper > input,
div.bigmodal.remarks div.afterForm > div.input-wrapper.input-wrapper > input {
  grid-area: input;
}
div.bigmodal.productRemarks form.discountForm > div.input-wrapper.input-wrapper > p, div.bigmodal.productRemarks form.remarksForm > div.input-wrapper.input-wrapper > p, div.bigmodal.productRemarks div.afterForm > div.input-wrapper.input-wrapper > p,
div.bigmodal.remarks_per_product form.discountForm > div.input-wrapper.input-wrapper > p,
div.bigmodal.remarks_per_product form.remarksForm > div.input-wrapper.input-wrapper > p,
div.bigmodal.remarks_per_product div.afterForm > div.input-wrapper.input-wrapper > p,
div.bigmodal.remarks form.discountForm > div.input-wrapper.input-wrapper > p,
div.bigmodal.remarks form.remarksForm > div.input-wrapper.input-wrapper > p,
div.bigmodal.remarks div.afterForm > div.input-wrapper.input-wrapper > p {
  grid-area: error;
  padding-top: 0;
}
div.bigmodal.productRemarks form.discountForm > div p.modalErrorMessage, div.bigmodal.productRemarks form.remarksForm > div p.modalErrorMessage, div.bigmodal.productRemarks div.afterForm > div p.modalErrorMessage,
div.bigmodal.remarks_per_product form.discountForm > div p.modalErrorMessage,
div.bigmodal.remarks_per_product form.remarksForm > div p.modalErrorMessage,
div.bigmodal.remarks_per_product div.afterForm > div p.modalErrorMessage,
div.bigmodal.remarks form.discountForm > div p.modalErrorMessage,
div.bigmodal.remarks form.remarksForm > div p.modalErrorMessage,
div.bigmodal.remarks div.afterForm > div p.modalErrorMessage {
  width: 100%;
  color: #eb5757;
}
div.bigmodal.productRemarks form.discountForm > div > span:nth-child(1), div.bigmodal.productRemarks form.remarksForm > div > span:nth-child(1), div.bigmodal.productRemarks div.afterForm > div > span:nth-child(1),
div.bigmodal.remarks_per_product form.discountForm > div > span:nth-child(1),
div.bigmodal.remarks_per_product form.remarksForm > div > span:nth-child(1),
div.bigmodal.remarks_per_product div.afterForm > div > span:nth-child(1),
div.bigmodal.remarks form.discountForm > div > span:nth-child(1),
div.bigmodal.remarks form.remarksForm > div > span:nth-child(1),
div.bigmodal.remarks div.afterForm > div > span:nth-child(1) {
  display: block;
  width: 40%;
  text-align: right;
  margin-right: 10px;
}
div.bigmodal.productRemarks form.discountForm > div > span:nth-child(2), div.bigmodal.productRemarks form.remarksForm > div > span:nth-child(2), div.bigmodal.productRemarks div.afterForm > div > span:nth-child(2),
div.bigmodal.remarks_per_product form.discountForm > div > span:nth-child(2),
div.bigmodal.remarks_per_product form.remarksForm > div > span:nth-child(2),
div.bigmodal.remarks_per_product div.afterForm > div > span:nth-child(2),
div.bigmodal.remarks form.discountForm > div > span:nth-child(2),
div.bigmodal.remarks form.remarksForm > div > span:nth-child(2),
div.bigmodal.remarks div.afterForm > div > span:nth-child(2) {
  width: 60%;
}
div.bigmodal.productRemarks form.discountForm > div input, div.bigmodal.productRemarks form.remarksForm > div input, div.bigmodal.productRemarks div.afterForm > div input,
div.bigmodal.remarks_per_product form.discountForm > div input,
div.bigmodal.remarks_per_product form.remarksForm > div input,
div.bigmodal.remarks_per_product div.afterForm > div input,
div.bigmodal.remarks form.discountForm > div input,
div.bigmodal.remarks form.remarksForm > div input,
div.bigmodal.remarks div.afterForm > div input {
  margin: 0;
  width: 100%;
}
div.bigmodal.productRemarks form.discountForm > div input[name=discount], div.bigmodal.productRemarks form.remarksForm > div input[name=discount], div.bigmodal.productRemarks div.afterForm > div input[name=discount],
div.bigmodal.remarks_per_product form.discountForm > div input[name=discount],
div.bigmodal.remarks_per_product form.remarksForm > div input[name=discount],
div.bigmodal.remarks_per_product div.afterForm > div input[name=discount],
div.bigmodal.remarks form.discountForm > div input[name=discount],
div.bigmodal.remarks form.remarksForm > div input[name=discount],
div.bigmodal.remarks div.afterForm > div input[name=discount] {
  width: 100px;
}
div.bigmodal.productRemarks form.discountForm > div input[name=newPrice], div.bigmodal.productRemarks form.remarksForm > div input[name=newPrice], div.bigmodal.productRemarks div.afterForm > div input[name=newPrice],
div.bigmodal.remarks_per_product form.discountForm > div input[name=newPrice],
div.bigmodal.remarks_per_product form.remarksForm > div input[name=newPrice],
div.bigmodal.remarks_per_product div.afterForm > div input[name=newPrice],
div.bigmodal.remarks form.discountForm > div input[name=newPrice],
div.bigmodal.remarks form.remarksForm > div input[name=newPrice],
div.bigmodal.remarks div.afterForm > div input[name=newPrice] {
  width: 100px;
}
div.bigmodal.productRemarks form.discountForm > div input.ng-invalid, div.bigmodal.productRemarks form.remarksForm > div input.ng-invalid, div.bigmodal.productRemarks div.afterForm > div input.ng-invalid,
div.bigmodal.remarks_per_product form.discountForm > div input.ng-invalid,
div.bigmodal.remarks_per_product form.remarksForm > div input.ng-invalid,
div.bigmodal.remarks_per_product div.afterForm > div input.ng-invalid,
div.bigmodal.remarks form.discountForm > div input.ng-invalid,
div.bigmodal.remarks form.remarksForm > div input.ng-invalid,
div.bigmodal.remarks div.afterForm > div input.ng-invalid {
  box-shadow: inset 0 0 0 2px #e03e2e;
}
div.bigmodal.productRemarks form.discountForm > div textarea, div.bigmodal.productRemarks form.remarksForm > div textarea, div.bigmodal.productRemarks div.afterForm > div textarea,
div.bigmodal.remarks_per_product form.discountForm > div textarea,
div.bigmodal.remarks_per_product form.remarksForm > div textarea,
div.bigmodal.remarks_per_product div.afterForm > div textarea,
div.bigmodal.remarks form.discountForm > div textarea,
div.bigmodal.remarks form.remarksForm > div textarea,
div.bigmodal.remarks div.afterForm > div textarea {
  width: 60%;
}
div.bigmodal.productRemarks form.discountForm p, div.bigmodal.productRemarks form.remarksForm p, div.bigmodal.productRemarks div.afterForm p,
div.bigmodal.remarks_per_product form.discountForm p,
div.bigmodal.remarks_per_product form.remarksForm p,
div.bigmodal.remarks_per_product div.afterForm p,
div.bigmodal.remarks form.discountForm p,
div.bigmodal.remarks form.remarksForm p,
div.bigmodal.remarks div.afterForm p {
  margin: 0;
  padding-top: 1em;
  text-align: center;
}
div.bigmodal.productRemarks form.discountForm,
div.bigmodal.remarks_per_product form.discountForm,
div.bigmodal.remarks form.discountForm {
  padding-bottom: 0;
}
div.bigmodal.productRemarks div.afterForm,
div.bigmodal.remarks_per_product div.afterForm,
div.bigmodal.remarks div.afterForm {
  padding-top: 0;
}
div.bigmodal.productRemarks div.afterForm > div,
div.bigmodal.remarks_per_product div.afterForm > div,
div.bigmodal.remarks div.afterForm > div {
  margin: 0;
}

div.bigmodal.buyers section.modalMain > div.aList > a {
  font-size: 0.75rem;
  grid-auto-columns: unset;
  grid-template-columns: auto 1fr;
}
@media only screen and (min-width: 768px) {
  div.bigmodal.buyers section.modalMain > div.aList > a {
    font-size: 1rem;
    grid-auto-columns: 1fr;
    grid-template-columns: unset;
  }
}

div.bigmodal.delivery_chain.delivery_chain.delivery_chain section.modalMain > div.aList > a {
  font-size: 0.75rem;
  grid-auto-columns: unset;
}
@media only screen and (min-width: 768px) {
  div.bigmodal.delivery_chain.delivery_chain.delivery_chain section.modalMain > div.aList > a {
    font-size: 1rem;
  }
}
div.bigmodal.delivery_chain.delivery_chain.delivery_chain section.modalMain > div.aList > a > span {
  word-break: break-word;
}
@media only screen and (min-width: 414px) {
  div.bigmodal.delivery_chain.delivery_chain.delivery_chain section.modalMain > div.aList > a > span {
    word-break: unset;
  }
}

div.bigmodal.customers div.customersList > div.first-row {
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 40px;
  box-shadow: inset 0 -1px 0 0 #787878;
}
div.bigmodal.customers div.customersList > div.first-row > a {
  display: flex;
  color: #000;
}
div.bigmodal.customers div.customersList > div.first-row > a > span.sortorder {
  line-height: 1.25rem;
}
div.bigmodal.customers div.customersList > div.first-row > a > span.sortorder.reverse:after {
  content: "▲";
}
div.bigmodal.customers div.customersList > div.first-row > a > span.sortorder:after {
  content: "▼";
}
div.bigmodal.customers div.customersList > a.row {
  display: flex;
  align-items: center;
}
div.modal.miniModal, div.miniModal.bigmodal {
  max-width: 95%;
  border-radius: 8px;
  padding: 24px 16px 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
div.modal.miniModal.selectOrderType > nav.fastGrid > div > div > a, div.miniModal.selectOrderType.bigmodal > nav.fastGrid > div > div > a, div.modal.miniModal.selectOrderType > nav.button > div > div > a, div.miniModal.selectOrderType.bigmodal > nav.button > div > div > a {
  padding: 0.625rem;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  div.modal.miniModal.selectOrderType > nav.fastGrid > div > div > a, div.miniModal.selectOrderType.bigmodal > nav.fastGrid > div > div > a, div.modal.miniModal.selectOrderType > nav.button > div > div > a, div.miniModal.selectOrderType.bigmodal > nav.button > div > div > a {
    padding: 0.625rem 1.25rem;
    line-height: 1.2;
  }
}
div.modal.miniModal.copyOrderModal > nav.fastGrid > div > div > a, div.miniModal.copyOrderModal.bigmodal > nav.fastGrid > div > div > a, div.modal.miniModal.copyOrderModal > nav.button > div > div > a, div.miniModal.copyOrderModal.bigmodal > nav.button > div > div > a {
  padding: 0.625rem 1.5rem;
}
@media only screen and (min-width: 768px) {
  div.modal.miniModal.copyOrderModal > nav.fastGrid > div > div > a, div.miniModal.copyOrderModal.bigmodal > nav.fastGrid > div > div > a, div.modal.miniModal.copyOrderModal > nav.button > div > div > a, div.miniModal.copyOrderModal.bigmodal > nav.button > div > div > a {
    padding: 0.625rem 2.375rem;
  }
}
div.modal.miniModal h1, div.miniModal.bigmodal h1, div.modal.miniModal h2, div.miniModal.bigmodal h2 {
  user-select: text;
}
@media only screen and (min-width: 768px) {
  div.modal.miniModal, div.miniModal.bigmodal {
    max-width: 400px;
  }
}
div.modal.miniModal .fastGrid, div.miniModal.bigmodal .fastGrid, div.modal.miniModal .button, div.miniModal.bigmodal .button {
  display: flex;
  justify-content: center;
  box-shadow: none;
}
div.modal.miniModal .fastGrid > div, div.miniModal.bigmodal .fastGrid > div, div.modal.miniModal .button > div, div.miniModal.bigmodal .button > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
div.modal.miniModal .fastGrid > div > div, div.miniModal.bigmodal .fastGrid > div > div, div.modal.miniModal .button > div > div, div.miniModal.bigmodal .button > div > div {
  display: flex;
  box-shadow: none;
}
div.modal.miniModal .fastGrid > div > div > a.buttonPrimary, div.miniModal.bigmodal .fastGrid > div > div > a.buttonPrimary, div.modal.miniModal .button > div > div > a.buttonPrimary, div.miniModal.bigmodal .button > div > div > a.buttonPrimary {
  background-color: #333333;
  color: #fff;
  transition: background-color 0.2s ease-in-out;
  border: none;
}
div.modal.miniModal .fastGrid > div > div > a.buttonPrimary:hover, div.miniModal.bigmodal .fastGrid > div > div > a.buttonPrimary:hover, div.modal.miniModal .button > div > div > a.buttonPrimary:hover, div.miniModal.bigmodal .button > div > div > a.buttonPrimary:hover {
  opacity: 1;
  background-color: #828282;
}
div.modal.miniModal .fastGrid > div > div > a.buttonDanger, div.miniModal.bigmodal .fastGrid > div > div > a.buttonDanger, div.modal.miniModal .button > div > div > a.buttonDanger, div.miniModal.bigmodal .button > div > div > a.buttonDanger {
  background-color: #eb5757;
  color: #fff;
  transition: background-color 0.2s ease-in-out;
  border: none;
}
div.modal.miniModal .fastGrid > div > div > a.buttonDanger:hover, div.miniModal.bigmodal .fastGrid > div > div > a.buttonDanger:hover, div.modal.miniModal .button > div > div > a.buttonDanger:hover, div.miniModal.bigmodal .button > div > div > a.buttonDanger:hover {
  background-color: #F28F8F;
  opacity: 1;
}
div.modal.miniModal .fastGrid > div > div > a, div.miniModal.bigmodal .fastGrid > div > div > a, div.modal.miniModal .button > div > div > a, div.miniModal.bigmodal .button > div > div > a {
  padding: 0.625rem 2.375rem;
  border-radius: 8px;
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid #333333;
  font-weight: 700;
  line-height: 1.225rem;
}
div.modal.miniModal .fastGrid > div > div > a:hover, div.miniModal.bigmodal .fastGrid > div > div > a:hover, div.modal.miniModal .button > div > div > a:hover, div.miniModal.bigmodal .button > div > div > a:hover {
  opacity: 0.55;
  text-shadow: none;
}

div.modal.customModal, div.customModal.bigmodal {
  width: auto;
  height: auto;
  overflow: unset;
}
div.modal.customModal > h1, div.customModal.bigmodal > h1, div.modal.customModal > h2, div.customModal.bigmodal > h2, div.modal.customModal > nav, div.customModal.bigmodal > nav {
  display: none;
}

div.bigmodal.preview_pdf section.modalHeader {
  grid-template-columns: 1fr 6fr 1fr !important;
  align-items: center;
}
div.bigmodal.preview_pdf section.modalHeader > a {
  text-decoration: none;
  color: #fff;
}
div.bigmodal.preview_pdf section.modalHeader > a:first-child {
  text-align: left;
}
div.bigmodal.preview_pdf section.modalHeader > a:last-child {
  text-align: right;
}
div.bigmodal.preview_pdf section.modalMain {
  overflow: hidden;
  position: relative;
}
div.bigmodal.preview_pdf section.modalMain > div#pdfPreview {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
div.bigmodal.preview_pdf section.modalMain > div#pdfPreview::-webkit-scrollbar {
  width: 5px;
}
div.bigmodal.preview_pdf section.modalMain > div#pdfPreview::-webkit-scrollbar-thumb {
  background-color: #666666;
}
div.bigmodal.preview_pdf section.modalMain > div#pdfPreviewLoading {
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.bigmodal.customerRemarks section.modalMain > textarea {
  box-sizing: border-box;
  resize: none;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  border-color: #ddd;
}
div.bigmodal.customerRemarks section.modalMain > textarea:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

div.bigmodal.product_search_filter section.modalHeader.modalHeader.modalHeader.withReset {
  grid-template-columns: auto auto 1fr auto;
  grid-gap: 0.5rem;
}
div.bigmodal.product_search_filter section.modalHeader.modalHeader.modalHeader.withReset > h1 {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  div.bigmodal.product_search_filter section.modalHeader.modalHeader.modalHeader.withReset {
    grid-template-columns: 1fr 1fr minmax(200px, auto) 1fr 1fr;
  }
}

.bigmodal.settings {
  height: auto;
}
.bigmodal.settings #modalWindow > section.modalMain {
  background: #F2F2F2;
  max-height: calc(100dvh - 105px);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
.bigmodal.settings #modalWindow > section.modalMain::-webkit-scrollbar {
  width: 5px;
}
.bigmodal.settings #modalWindow > section.modalMain::-webkit-scrollbar-thumb {
  background-color: #666666;
}
.bigmodal.settings #modalWindow div.mainSettings {
  display: flex;
  flex-direction: column;
}
.bigmodal.settings #modalWindow div.mainSettings > a {
  display: block;
  padding: 15px 20px;
  border-bottom: solid 1px #ababab;
  color: #333;
}
.bigmodal.settings #modalWindow div.mainSettings > a:last-child {
  border-bottom: none;
}
.bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs {
  grid-template-columns: 1fr 2fr 40px;
}
.bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > p.error {
  grid-column: 2/span 1;
  margin: 0;
  color: #eb5757;
  transform: translateY(-100%);
  font-size: 0.875rem;
}
.bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > button.switch {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: 3/span 1;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #a9a9a9;
  font-size: 1.5rem;
  background: transparent;
}
.bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > div.passRequirements {
  grid-column: 2/span 1;
  color: #a9a9a9;
  font-size: 0.875rem;
}
.bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > div.passRequirements > p {
  margin: 0 0 1em 0;
}
.bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > button[type=submit] {
  grid-column: 2/span 1;
  margin: 0 auto 0 0;
  border-radius: 5px;
  cursor: pointer;
  background-color: #353535;
  color: #F2F2F2;
  transition: all 200ms;
}
.bigmodal.settings #modalWindow div.passwordChangeWrapper div.passwordInputs > button[type=submit]:disabled {
  background-color: #808080;
  color: #a9a9a9;
}
.bigmodal.settings #modalWindow div.personalSettingsWrapper div.settingsInputs {
  grid-template-columns: 1fr 2fr;
}
.bigmodal.settings #modalWindow div.personalSettingsWrapper label.userIcon > i {
  display: flex;
  font-size: 2rem;
  margin-right: 0.1em;
}
.bigmodal.settings #modalWindow p.subHeader {
  background: #e4e4e4;
  color: #000;
  text-align: center;
  margin: 0;
  padding: 0.5em 0;
  border-bottom: 1px solid #c6c6c6;
}
.bigmodal.settings #modalWindow section.accountSettings div.info {
  margin: 30px 15px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px 15px;
}
.bigmodal.settings #modalWindow section.accountSettings div.info > h3 {
  margin: 0;
  font-weight: normal;
  font-size: 1rem;
  text-align: right;
}
.bigmodal.settings #modalWindow section.accountSettings div.info > p {
  margin: 0;
}
.bigmodal.settings #modalWindow section.accountSettings div.inputs {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  grid-gap: 20px 15px;
  margin: 30px 15px;
}
.bigmodal.settings #modalWindow section.accountSettings p.label {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.bigmodal.settings #modalWindow section.accountSettings div.multiSwitch {
  display: flex;
  border-radius: 10px;
  border: 1px solid #c6c6c6;
  padding: 1px;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
.bigmodal.settings #modalWindow section.accountSettings div.multiSwitch::-webkit-scrollbar {
  height: 5px;
}
.bigmodal.settings #modalWindow section.accountSettings div.multiSwitch::-webkit-scrollbar-thumb {
  background-color: #666666;
}
.bigmodal.settings #modalWindow section.accountSettings div.multiSwitch > input[type=radio] {
  display: none;
}
.bigmodal.settings #modalWindow section.accountSettings div.multiSwitch > label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  height: 35px;
  width: 100%;
  line-height: 1em;
  padding: 0 5px;
}
.bigmodal.settings #modalWindow section.accountSettings div.multiSwitch > input[type=radio]:checked + label {
  background: #c6c6c6;
}
.bigmodal.settings #modalWindow section.accountSettings div.multiSwitch {
  grid-column: 2/span 3;
}
.bigmodal.settings #modalWindow section.accountSettings input[type=text],
.bigmodal.settings #modalWindow section.accountSettings textarea {
  border: 0;
}
.bigmodal.settings #modalWindow section.accountSettings label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.bigmodal.settings #modalWindow section.accountSettings input#asCompanyName,
.bigmodal.settings #modalWindow section.accountSettings textarea#asAddress,
.bigmodal.settings #modalWindow section.accountSettings input#asCountry {
  grid-column: 2/span 3;
}
.bigmodal.settings #modalWindow section.accountSettings textarea#asAddress {
  height: 6em;
}
.bigmodal.settings #modalWindow section.accountSettings input#asZipCode {
  grid-column: 2/span 1;
}
.bigmodal.settings #modalWindow section.accountSettings label[for=asCity] {
  grid-column: 3/span 1;
}
.bigmodal.settings #modalWindow section.accountSettings input#asCity {
  grid-column: 4/span 1;
}
.bigmodal.settings #modalWindow div.brandSettings {
  display: grid;
  grid-template-columns: auto 1fr 2fr;
  grid-auto-rows: 1fr;
  grid-gap: 10px 20px;
  padding: 10px 15px 20px 20px;
  margin: 10px 0 10px 0;
  border-bottom: 1px solid #c6c6c6;
}
.bigmodal.settings #modalWindow div.brandSettings:last-child {
  border-bottom: none;
}
.bigmodal.settings #modalWindow div.brandSettings > img.brandLogo {
  grid-row: 2/span 3;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 5px #fff, 0 0 5px 5px #333;
}
@media only screen and (min-width: 414px) {
  .bigmodal.settings #modalWindow div.brandSettings > img.brandLogo {
    width: 100px;
    height: 100px;
  }
}
.bigmodal.settings #modalWindow div.brandSettings > label {
  grid-column: 2/span 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.bigmodal.settings #modalWindow div.brandSettings > input {
  grid-column: 3/span 1;
  width: 100%;
  margin: 0;
}
.bigmodal.settings #modalWindow div.brandSettings > input:disabled {
  color: #999999;
  background: no-repeat center right 10px url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path fill=\"%23999999\" d=\"M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z\"></path></svg>");
  background-size: 20px;
}

table.chartSummaryTable {
  display: block;
  margin: 10px auto;
  min-width: 320px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
table.chartSummaryTable::-webkit-scrollbar {
  width: 5px;
}
table.chartSummaryTable::-webkit-scrollbar-thumb {
  background-color: #333;
}
@media only screen and (min-width: 768px) {
  table.chartSummaryTable {
    min-width: 400px;
  }
}
table.chartSummaryTable > tbody {
  display: table;
  width: 100%;
}
table.chartSummaryTable tr {
  border-bottom: 1px solid #c6c6c6;
}
table.chartSummaryTable tr:last-child {
  border: none;
}
table.chartSummaryTable tr > th, table.chartSummaryTable tr > td {
  padding: 10px;
  text-align: left;
}
table.chartSummaryTable tr div.color {
  width: 20px;
  height: 20px;
}
table.chartSummaryTable tr:nth-child(2) div.color {
  background: hsl(250, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(3) div.color {
  background: hsl(200, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(4) div.color {
  background: hsl(150, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(5) div.color {
  background: hsl(100, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(6) div.color {
  background: hsl(50, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(7) div.color {
  background: hsl(0, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(8) div.color {
  background: hsl(310, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(9) div.color {
  background: hsl(260, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(10) div.color {
  background: hsl(210, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(11) div.color {
  background: hsl(160, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(12) div.color {
  background: hsl(110, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(13) div.color {
  background: hsl(60, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(14) div.color {
  background: hsl(10, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(15) div.color {
  background: hsl(320, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(16) div.color {
  background: hsl(270, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(17) div.color {
  background: hsl(220, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(18) div.color {
  background: hsl(170, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(19) div.color {
  background: hsl(120, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(20) div.color {
  background: hsl(70, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(21) div.color {
  background: hsl(20, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(22) div.color {
  background: hsl(330, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(23) div.color {
  background: hsl(280, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(24) div.color {
  background: hsl(230, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(25) div.color {
  background: hsl(180, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(26) div.color {
  background: hsl(130, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(27) div.color {
  background: hsl(80, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(28) div.color {
  background: hsl(30, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(29) div.color {
  background: hsl(340, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(30) div.color {
  background: hsl(290, 50%, 50%);
}
table.chartSummaryTable tr:nth-child(31) div.color {
  background: hsl(240, 50%, 50%);
}

div.filterMenu {
  display: flex;
  justify-content: space-between;
  background: #f0f0f0;
  box-shadow: 0 0 10px 2px #333;
  margin-bottom: 15px;
}
div.filterMenu > div {
  display: flex;
}
div.filterMenu > div > div {
  display: flex;
  flex-direction: column;
  margin: 10px;
}
div.filterMenu > div > div > label {
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 0.75rem;
}
div.filterMenu > div > div > select {
  -webkit-appearance: none;
  background: #333;
  color: #f8f8f8;
  padding: 5px;
  border-radius: 5px;
  background-image: url(19acc254d529bcf0e20a.svg);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center right 10px;
}

#orderView.packageMode .chooseSeason,
add-package .chooseSeason, #orderView div.packageHeader > div.packageSeasonsWrapper > a {
  border-radius: 4px;
  border: 1px solid #333;
  height: 32px;
  display: flex;
  width: 150px;
  justify-content: center;
  align-items: center;
  color: #333;
}
#orderView.packageMode .chooseSeason > i,
add-package .chooseSeason > i, #orderView div.packageHeader > div.packageSeasonsWrapper > a > i {
  margin-right: 5px;
}

@media screen and (max-height: 550px) {
  #orderView {
    scrollbar-width: thin;
    scrollbar-color: #666666 transparent;
    overflow: auto;
  }
  #orderView::-webkit-scrollbar {
    width: 5px;
  }
  #orderView::-webkit-scrollbar-thumb {
    background-color: #666666;
  }
  #orderView main.orderMain.orderMain {
    height: fit-content;
  }
}
@media screen and (max-height: 550px) and (max-width: 768px) {
  #orderView main.orderMain.orderMain {
    overflow: visible;
  }
}
#orderView main {
  --orderPropertiesHeight: 180px;
  --deliveryTabsHeight: 55px;
  display: grid;
  grid-template-areas: "title" "properties" "table" "buttons" "calculatorwrapper";
  grid-template-rows: 60px minmax(min-content, var(--orderPropertiesHeight)) 1fr auto 0;
  overflow: auto;
}
@media only screen and (min-width: 568px) {
  #orderView main {
    --deliveryTabsHeight: 45px;
  }
}
@media only screen and (min-width: 768px) {
  #orderView main {
    --orderPropertiesHeight: 150px;
    --deliveryTabsHeight: 30px;
    height: calc(100dvh - 50px - 55px);
    grid-template-rows: 60px var(--orderPropertiesHeight) auto 60px 0;
    overflow: visible;
  }
}
#orderView main.deliveryTabs {
  grid-template-areas: "title" "properties" "deliverytabs" "table" "buttons" "calculatorwrapper";
  grid-template-rows: 60px var(--orderPropertiesHeight) var(--deliveryTabsHeight) 1fr auto 0;
}
@media only screen and (min-width: 768px) {
  #orderView main.deliveryTabs {
    --orderPropertiesHeight: 150px;
    --deliveryTabsHeight: 65px;
    grid-template-rows: 60px var(--orderPropertiesHeight) var(--deliveryTabsHeight) auto 60px 0;
  }
}
#orderView main.closedOrderGrid {
  grid-template-areas: "title" "properties" "deliverytabs" "table" "calculatorwrapper";
  grid-template-rows: 60px 180px 40px auto 0;
}
@media only screen and (min-width: 768px) {
  #orderView main.closedOrderGrid {
    grid-template-rows: 60px 150px 65px auto 0;
    height: calc(100dvh - 50px - 55px);
  }
}
#orderView main.overstockWarningGrid {
  grid-template-rows: 60px 180px 40px 1fr 60px 0;
  grid-template-areas: "title" "properties" "deliverytabs" "table" "buttons" "calculatorwrapper";
}
#orderView main.overstockWarningGrid:not(.deliveryTabs) {
  grid-template-rows: 60px 180px 1fr 60px 0;
  grid-template-areas: "title" "properties" "table" "buttons" "calculatorwrapper";
}
@media only screen and (min-width: 768px) {
  #orderView main.overstockWarningGrid {
    grid-template-rows: 60px 180px 70px auto 60px 0;
  }
}
#orderView main > div.loader {
  z-index: 10000;
  box-shadow: 0 0 10px -5px #000;
  display: none;
}
#orderView main > div.loader.active {
  display: flex;
}
#orderView div.packageHeader {
  grid-area: title;
  margin: 10px;
  display: flex;
  align-items: flex-start;
  padding-top: 0;
}
#orderView div.packageHeader > div.orderName, #orderView div.packageHeader > div.externalOrderNumber {
  display: grid;
  grid-template-areas: "label input";
  grid-template-columns: 1fr 2fr;
  align-items: center;
  max-width: 550px;
  width: 100%;
}
#orderView div.packageHeader > div.orderName > label, #orderView div.packageHeader > div.externalOrderNumber > label {
  grid-area: label;
}
#orderView div.packageHeader > div.orderName > input, #orderView div.packageHeader > div.externalOrderNumber > input {
  grid-area: input;
  margin: 0;
  height: 32px;
}
#orderView div.packageHeader > div.packageInfo {
  display: flex;
  height: 32px;
  align-items: center;
  margin-right: 2rem;
}
#orderView div.packageHeader > div.packageInfo > span {
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  #orderView div.packageHeader > div.orderName {
    font-size: 0.875rem;
  }
}
#orderView div.packageHeader > div.packageSeasonsWrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#orderView div.packageHeader > div.packageSeasonsWrapper > p.seasonName {
  margin: 0;
  min-width: 100%;
  text-align: left;
}
#orderView div.order-prop-area {
  grid-area: properties;
}
#orderView div.orderPropertiesWrapper {
  position: relative;
  overflow: hidden;
  height: fit-content;
}
#orderView div.orderPropertiesWrapper::before {
  content: "";
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  width: 25px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderPropertiesWrapper::before {
    display: none;
  }
}
#orderView div.orderPropertiesWrapper div.orderProperties {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-gap: 10px;
  padding: 1px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
#orderView div.orderPropertiesWrapper div.orderProperties::-webkit-scrollbar {
  height: 5px;
}
#orderView div.orderPropertiesWrapper div.orderProperties::-webkit-scrollbar-thumb {
  background-color: #333;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderPropertiesWrapper div.orderProperties {
    scroll-snap-type: unset;
  }
}
#orderView div.orderPropertiesWrapper div.orderProperties > div {
  position: relative;
  font-size: 0.75rem;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderPropertiesWrapper div.orderProperties > div {
    height: var(--orderPropertiesHeight);
  }
}
@media only screen and (min-width: 1024px) {
  #orderView div.orderPropertiesWrapper div.orderProperties > div {
    font-size: 1rem;
  }
}
#orderView div.orderPropertiesWrapper div.orderProperties > div > div > div {
  overflow-x: hidden;
}
#orderView div.orderPropertiesWrapper div.orderProperties > div > div.information {
  position: relative;
  height: 100%;
  overflow: hidden;
}
#orderView div.orderPropertiesWrapper div.orderProperties > div > div.information section.agent-name-component {
  text-overflow: ellipsis;
  overflow-x: hidden;
}
#orderView div.orderPropertiesWrapper div.orderProperties > div > div.information:before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: #fff;
  background: linear-gradient(0, white 0%, rgba(255, 255, 255, 0.75) 75%, rgba(255, 255, 255, 0) 100%);
}
#orderView div.orderPropertiesWrapper div.orderProperties p {
  margin: 0;
  margin-bottom: 1em;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderPropertiesWrapper div.orderProperties p {
    margin-bottom: 0;
  }
}
#orderView div.orderPropertiesWrapper div.orderProperties a.roundButton {
  margin: 0;
  margin-bottom: 10px;
}
#orderView div.orderPropertiesWrapper div.orderProperties a.roundButton.left-margin {
  margin-left: 0 !important;
}
#orderView div.orderPropertiesWrapper div.orderProperties a.roundButton > div > div {
  display: flex;
  align-items: center;
  padding: 5px;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderPropertiesWrapper div.orderProperties a.roundButton > div > div {
    padding: 10px;
  }
}
#orderView div.orderPropertiesWrapper div.orderProperties a.roundButton > div > div > i {
  display: flex;
  align-items: center;
  height: 100%;
}
@media only screen and (min-width: 1024px) {
  #orderView div.orderPropertiesWrapper div.orderProperties a.roundButton > div > div > i {
    display: block;
    height: 0.875rem;
  }
}
#orderView div.orderPropertiesWrapper div.orderProperties a.roundButton > div > div > span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  #orderView div.orderPropertiesWrapper div.orderProperties a.selectButton {
    font-size: 0.75rem;
  }
}
#orderView .pseudoCheckbox {
  display: block;
}
#orderView .productSelected {
  background-color: #F7F7F7;
}
#orderView .button.deleteButton {
  max-width: 250px;
}
#orderView .button.deleteButton > div > div {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e03e2e;
  color: #fff;
  font-weight: 500;
}
#orderView input.orderName:read-only {
  cursor: not-allowed;
}
#orderView .three-col > div > div {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  #orderView .three-col > div > div {
    float: none;
    width: auto;
    display: table-cell;
  }
}
#orderView .three-col > div > div .information {
  padding: 0 10px;
  font-weight: lighter;
  height: 90px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
#orderView .three-col > div > div .information::-webkit-scrollbar {
  width: 5px;
}
#orderView .three-col > div > div .information::-webkit-scrollbar-thumb {
  background-color: #666666;
}
#orderView .three-col > div > div .information p {
  margin: 0;
}
#orderView .three-col > div > div .information > p, #orderView .three-col > div > div .information > a {
  line-height: 1.125rem;
  display: block;
}
#orderView .discountValue {
  line-height: 50px;
}
#orderView .discountValue > span {
  display: block;
}
#orderView .col-picture {
  text-align: center;
}
#orderView .col-size {
  width: 30%;
}
#orderView .col-quantity {
  width: 20%;
}
#orderView .col-price {
  width: 30%;
}
#orderView .col-totalPrice {
  width: 25%;
}
#orderView .thumbFrame {
  padding: 5px;
}
#orderView .col-changeQuantity {
  width: 5%;
}
#orderView .col-deleteItem {
  width: 5%;
}
#orderView .col-deleteItem.disabled a {
  opacity: 0.5;
  pointer-events: none;
}
#orderView .refItem {
  font-size: 0.8rem;
}
#orderView .variants {
  float: left;
  font-size: 0.8rem;
}
#orderView .variants .summary.red-bordered span {
  box-shadow: 0 1px 0 0 #e03e2e;
}
#orderView .variants .summary > div > span {
  background: rgb(221.5, 221.5, 221.5);
  line-height: 1.7rem;
  display: block;
  width: 100%;
  height: 100%;
  margin: 5px 0;
  font-weight: bold;
  padding-left: 5px;
}
#orderView .productMixWarning {
  clear: both;
  float: left;
  width: 100%;
  color: #fff;
  background-color: rgba(224, 62, 46, 0.7);
  border: 2px solid #e03e2e;
  padding: 10px;
  margin: 10px 0;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
#orderView .remoteSellingInfo {
  width: 100%;
  color: #fff;
  background-color: rgba(0, 157, 78, 0.7);
  border: 2px solid #009d4e;
  padding: 10px;
  margin: 10px 0;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}
#orderView .remoteSellingInfo i {
  position: relative;
  top: 2px;
}
#orderView div.deliveryWindow {
  display: flex;
  justify-content: flex-start;
}
#orderView div.deliveryWindow > div:first-child {
  padding: 0 3px;
}
#orderView div.deliveryWindow > div:first-child > i:before {
  margin-top: 3px;
}
#orderView div.deliveryWindow > div:last-child {
  font-size: 0.7rem;
  line-height: 1.1em;
}
#orderView div.productDescription {
  cursor: pointer;
  overflow-y: hidden;
  max-height: 80px;
}
#orderView div.productDescription br {
  display: none;
}
@media only screen and (min-width: 768px) {
  #orderView div.productDescription br {
    display: initial;
  }
}
#orderView div.productRemarks {
  display: grid;
  justify-content: flex-start;
  cursor: pointer;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "description description";
}
#orderView div.productRemarks > div:first-child > i:before {
  margin-top: 3px;
}
#orderView div.productRemarks > div:last-child {
  font-size: 0.7rem;
  line-height: 1.1em;
}
#orderView div.productRemarks > div.iconWrapper {
  grid-area: icon;
  margin-right: 0.25rem;
}
#orderView div.productRemarks > div.iconWrapper > i {
  font-size: 0.75rem;
}
#orderView div.productRemarks > div.remarksLabel {
  font-size: 0.75rem;
  grid-area: label;
  margin: auto 0;
}
#orderView div.productRemarks > div.remarksDescription {
  grid-area: description;
}
#orderView div.productRemarks i.remarksIcon.disabled {
  color: #666666;
}
#orderView .calculator {
  overflow: visible;
}
#orderView .calculator.calculatorWarehouses {
  width: min-content;
}
#orderView .calculator.calculatorWarehouses input[type=text] {
  min-width: 28px;
}
#orderView .calculatorWarehouses {
  overflow: visible;
}
#orderView .calculator, #orderView .lots-pyramid, #orderView .calculatorWarehouses {
  transform: unset;
  right: auto;
  bottom: auto;
  position: absolute;
}
@media only screen and (min-width: 768px) {
  #orderView .calculator, #orderView .lots-pyramid, #orderView .calculatorWarehouses {
    transform: translate(-100%, -50%) translate(-20px, 0px);
  }
}
@media only screen and (min-width: 768px) {
  #orderView .calculator.hasStocks::after, #orderView .lots-pyramid.hasStocks::after, #orderView .calculatorWarehouses.hasStocks::after {
    top: calc(50% - 50px - var(--calculator-offset, 0px));
  }
}
@media only screen and (min-width: 768px) {
  #orderView .calculator::after, #orderView .lots-pyramid::after, #orderView .calculatorWarehouses::after {
    content: "";
    position: absolute;
    top: calc(50% - 100px - var(--calculator-offset, 0px));
    right: -8px;
    width: 16px;
    height: 16px;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, transparent 49%, #f8f8f8 49%, #f8f8f8);
    border: solid 1px #333;
    border-top: none;
    border-left: none;
  }
}
#orderView .lots-pyramid {
  overflow: visible;
}
#orderView .lots-pyramid > div.componentBody {
  border-radius: 5px;
}
#orderView .orderSeasonTabs {
  margin-top: 20px;
}
#orderView div.overstockVariant {
  color: red;
  font-weight: bold;
}
#orderView div#cartTableWrapper {
  grid-area: table;
  opacity: 0;
  transition: opacity 300ms;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  #orderView div#cartTableWrapper {
    scrollbar-width: thin;
    scrollbar-color: #666666 transparent;
    overflow-y: scroll;
  }
  #orderView div#cartTableWrapper::-webkit-scrollbar {
    width: 5px;
  }
  #orderView div#cartTableWrapper::-webkit-scrollbar-thumb {
    background-color: #666666;
  }
}
#orderView div#cartTableWrapper.loaded {
  opacity: 1;
}
#orderView div#cartTableWrapper ng-include {
  display: contents;
}
#orderView div#cartTableWrapper::after {
  content: " ";
  background-color: white;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 50px 50px;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  pointer-events: all;
  cursor: default;
}
#orderView div#cartTableWrapper.group-loading {
  overflow-y: hidden;
}
#orderView div#cartTableWrapper.group-loading::after {
  visibility: visible;
  opacity: 1;
}
#orderView div#cartTableWrapper > .loadingDots {
  display: flex;
  justify-content: center;
  align-items: center;
}
#orderView div#cartTableWrapper > .loadingDots span {
  font-size: 3rem;
}
#orderView section.orderButtonsSection {
  grid-area: buttons;
  display: flex;
  justify-items: center;
  align-items: center;
  background: #fff;
  z-index: 3;
  padding: 5px;
  gap: 0.5rem;
}
@media only screen and (min-width: 414px) {
  #orderView section.orderButtonsSection {
    padding: 10px;
  }
}
@media only screen and (min-width: 568px) {
  #orderView section.orderButtonsSection {
    display: flex;
    flex-direction: row;
  }
}
#orderView section.orderButtonsSection a.button, #orderView section.orderButtonsSection label {
  cursor: pointer;
  font-size: 0.75rem;
}
@media only screen and (min-width: 414px) {
  #orderView section.orderButtonsSection a.button, #orderView section.orderButtonsSection label {
    font-size: 0.875rem;
  }
}
@media only screen and (min-width: 568px) {
  #orderView section.orderButtonsSection a.button, #orderView section.orderButtonsSection label {
    font-size: 1rem;
  }
}
#orderView section.orderButtonsSection a.button {
  margin: 0;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  #orderView section.orderButtonsSection a.button {
    margin: 0 10px 0 0;
  }
}
#orderView section.orderButtonsSection div.button,
#orderView section.orderButtonsSection a.button {
  margin: 0;
}
#orderView section.orderButtonsSection div.button span,
#orderView section.orderButtonsSection a.button span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  #orderView section.orderButtonsSection div.button span,
  #orderView section.orderButtonsSection a.button span {
    font-size: 0.875rem;
  }
}
#orderView section.orderButtonsSection div.button.hide,
#orderView section.orderButtonsSection a.button.hide {
  pointer-events: none;
  opacity: 0.5;
}
@media only screen and (min-width: 768px) {
  #orderView section.orderButtonsSection div.button.hide,
  #orderView section.orderButtonsSection a.button.hide {
    display: none;
  }
}
#orderView section.orderButtonsSection div.button.deleteButton,
#orderView section.orderButtonsSection a.button.deleteButton {
  grid-area: deleteBtn;
  max-width: 180px;
}
#orderView section.orderButtonsSection div.button.deleteButton > div > div > i::before,
#orderView section.orderButtonsSection a.button.deleteButton > div > div > i::before {
  position: static;
}
#orderView section.orderButtonsSection div.button.addPositionBtn,
#orderView section.orderButtonsSection a.button.addPositionBtn {
  grid-area: addPositionBtn;
}
#orderView section.orderButtonsSection div.button.addPackageBtn,
#orderView section.orderButtonsSection a.button.addPackageBtn {
  grid-area: addPackageBtn;
}
#orderView section.orderButtonsSection div.button#uploadCsvFile,
#orderView section.orderButtonsSection a.button#uploadCsvFile {
  width: 100%;
  grid-area: uploadCsvFile;
}
#orderView section.orderButtonsSection input {
  display: none;
}
@media only screen and (min-width: 768px) {
  #orderView section.orderButtonsSection #uploadCsvFile {
    margin-left: 0;
    margin-right: auto;
  }
}
#orderView section.orderButtonsSection #uploadCsvFile div {
  padding: 0;
}
#orderView section.orderButtonsSection #uploadCsvFile label {
  display: block;
  padding: 10px;
}
#orderView #calculatorWrapper,
#orderView lots-pyramid {
  grid-area: calculatorwrapper;
}
#orderView #calculatorWrapper .calculator, #orderView #calculatorWrapper .lots-pyramid, #orderView #calculatorWrapper .calculatorWarehouses,
#orderView lots-pyramid .calculator,
#orderView lots-pyramid .lots-pyramid,
#orderView lots-pyramid .calculatorWarehouses {
  opacity: 0;
  transition: opacity 0ms;
}
#orderView #calculatorWrapper.showCalculator .calculator, #orderView #calculatorWrapper.showCalculator .lots-pyramid, #orderView #calculatorWrapper.showCalculator .calculatorWarehouses,
#orderView lots-pyramid.showCalculator .calculator,
#orderView lots-pyramid.showCalculator .lots-pyramid,
#orderView lots-pyramid.showCalculator .calculatorWarehouses {
  opacity: 1;
  transition: opacity 0ms;
  box-shadow: 0 0 10px 2px #000;
  transform: translate(0, 20%);
}
@media only screen and (min-width: 768px) {
  #orderView #calculatorWrapper.showCalculator .calculator, #orderView #calculatorWrapper.showCalculator .lots-pyramid, #orderView #calculatorWrapper.showCalculator .calculatorWarehouses,
  #orderView lots-pyramid.showCalculator .calculator,
  #orderView lots-pyramid.showCalculator .lots-pyramid,
  #orderView lots-pyramid.showCalculator .calculatorWarehouses {
    box-shadow: none;
    transform: translate(-100%, -50%) translate(-20px, 0px);
  }
}

.orderListLoader {
  min-height: calc(100dvh - 50px - 55px - 50px);
  height: calc(100dvh - 50px - 55px - 50px);
  float: left;
}

.customerLink {
  color: #333;
  cursor: default;
  pointer-events: none;
}
.customerLink.active {
  text-decoration: underline !important;
  cursor: pointer;
  pointer-events: auto;
}

.calendarWrapper {
  padding: 10px 20px 20px 20px;
  background: #fff;
}
.calendarWrapper > sv-custom-calendar {
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

section.deliveryTabs {
  grid-area: deliverytabs;
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  padding-bottom: 0;
  position: relative;
}
section.deliveryTabs.withoutControls {
  grid-template-columns: auto;
}
section.deliveryTabs::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 -2px 2px 0 #c6c6c6;
  pointer-events: none;
  overflow-y: auto;
}
section.deliveryTabs ul {
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
  margin: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 0 0.25rem;
}
section.deliveryTabs ul::-webkit-scrollbar {
  height: 5px;
}
section.deliveryTabs ul::-webkit-scrollbar-thumb {
  background-color: #333;
}
section.deliveryTabs ul::-webkit-scrollbar {
  display: none;
}
@media only screen and (min-width: 768px) {
  section.deliveryTabs ul {
    padding: 0 1rem;
  }
}
section.deliveryTabs li {
  cursor: pointer;
  list-style: none;
  display: block;
  float: left;
  min-width: 80px;
  height: calc(var(--deliveryTabsHeight) - 10px);
  margin-right: 2px;
  background-color: #eee;
  font-size: 0.5rem;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
@media only screen and (min-width: 768px) {
  section.deliveryTabs li {
    min-width: 200px;
    height: 50px;
    font-size: 0.8125rem;
    height: calc(var(--deliveryTabsHeight) - 5px);
  }
}
section.deliveryTabs li.active {
  background-color: #fff;
  box-shadow: 0 0 12px -4px #000;
  transform: scaleX(1.02);
}
section.deliveryTabs li > div {
  height: 100%;
  padding: 2px;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  section.deliveryTabs li > div {
    padding: 2px 8px;
    justify-content: space-evenly;
  }
}
section.deliveryTabs li span.dates, section.deliveryTabs li span.total {
  display: block;
  font-size: 0.5rem;
}
@media only screen and (min-width: 768px) {
  section.deliveryTabs li span.dates, section.deliveryTabs li span.total {
    font-size: 0.875rem;
  }
}
section.deliveryTabs li span.dates .totalCount, section.deliveryTabs li span.total .totalCount {
  font-size: 0.5rem;
}
@media only screen and (min-width: 768px) {
  section.deliveryTabs li span.dates .totalCount, section.deliveryTabs li span.total .totalCount {
    font-size: 0.875rem;
  }
}
section.deliveryTabs li div.deliveryEdit {
  width: 40px;
  height: 40px;
  float: left;
  font-size: 25px;
}
section.deliveryTabs li div.deliveryEdit :hover {
  opacity: 0.8;
}
section.deliveryTabs > div.controlsWrapper {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
}
section.deliveryTabs > div.controlsWrapper > button {
  background-color: transparent;
  padding: 0.5rem;
}
section.deliveryTabs > div.controlsWrapper > button:not(:first-child) {
  margin-left: 1rem;
}
section.deliveryTabs > div.controlsWrapper > button > i {
  font-size: 1.25rem;
}

div.tableGridBody {
  background-color: #e4e4e4;
}
@media only screen and (min-width: 768px) {
  div.tableGridBody {
    scrollbar-width: thin;
    scrollbar-color: #666666 transparent;
    overflow-y: scroll;
    background-color: transparent;
  }
  div.tableGridBody::-webkit-scrollbar {
    width: 5px;
  }
  div.tableGridBody::-webkit-scrollbar-thumb {
    background-color: #666666;
  }
}
div.tableGridBody.emptyDWContainer {
  flex: 1;
}

.groupHeader {
  background-color: #aaa;
  padding: 10px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: 3fr 1fr 1fr;
  font-size: 0.75rem;
  grid-gap: 0.5rem;
}
@media only screen and (min-width: 414px) {
  .groupHeader {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 768px) {
  .groupHeader {
    font-size: 1rem;
    grid-template-columns: 3fr 19.5% 22%;
    grid-gap: 0;
  }
}
.groupHeader > div.groupItems, .groupHeader > div.groupSubtotal {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .groupHeader > div.groupItems, .groupHeader > div.groupSubtotal {
    flex-direction: row;
  }
}

span.targetStatus.unreached {
  color: #EB5757;
}
span.targetStatus.reached {
  color: #219653;
}

footer#orderFooter div.orderActionsWrapper {
  display: flex;
}
footer#orderFooter div.orderActionsWrapper .icon-info-outline {
  padding-right: 0.25rem;
  padding-top: 0.25rem;
}
footer#orderFooter div.orderActionsWrapper > .disabledOrderActions {
  opacity: 0.5;
  cursor: not-allowed;
}
footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover.balloonPopover {
  top: initial;
  bottom: 55px;
}
footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover.balloonPopover::after {
  top: initial;
  bottom: -6px;
}
footer#orderFooter div.orderActionsWrapper > div.groupActionsPopover.balloonPopover > a.active {
  color: #009d4e;
}
div.emptyDW {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
div.emptyDW > div.emptyIcon {
  width: 200px;
  height: 200px;
  background: url(52d40ace567015c8515f.svg) no-repeat;
}

#orderView.packageMode ng-include,
add-package ng-include {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  overflow: auto;
}
#orderView.packageMode ng-include::-webkit-scrollbar,
add-package ng-include::-webkit-scrollbar {
  width: 5px;
}
#orderView.packageMode ng-include::-webkit-scrollbar-thumb,
add-package ng-include::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 768px) {
  #orderView.packageMode ng-include,
  add-package ng-include {
    overflow: visible;
  }
}
#orderView.packageMode main,
add-package main {
  height: 100%;
  display: grid;
  grid-template-areas: "title" "deliverytabs" "table" "buttons" "calculatorwrapper";
  grid-template-rows: 75px 40px auto 60px 0;
}
@media only screen and (min-width: 768px) {
  #orderView.packageMode main,
  add-package main {
    grid-template-rows: 75px 30px auto 60px 0;
    height: calc(100dvh - 50px - 55px);
  }
}
@media only screen and (min-width: 768px) {
  #orderView.packageMode main.deliveryTabs,
  add-package main.deliveryTabs {
    grid-template-rows: 75px 65px auto 60px 0;
  }
}
#orderView.packageMode main div#cartTableWrapper,
add-package main div#cartTableWrapper {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  grid-area: table;
  overflow-y: auto;
  background-color: #e4e4e4;
}
#orderView.packageMode main div#cartTableWrapper::-webkit-scrollbar,
add-package main div#cartTableWrapper::-webkit-scrollbar {
  width: 5px;
}
#orderView.packageMode main div#cartTableWrapper::-webkit-scrollbar-thumb,
add-package main div#cartTableWrapper::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 768px) {
  #orderView.packageMode main div#cartTableWrapper,
  add-package main div#cartTableWrapper {
    overflow-y: auto;
    background-color: #fff;
  }
}
#orderView.packageMode .seasonName,
add-package .seasonName {
  background: #fff;
  color: #c6c6c6;
  font-size: 0.75rem;
}

add-package main {
  height: 100%;
}

main.popup div.cartQuantity > a,
main.popup div.cartDelete > a {
  opacity: 0.3;
  cursor: not-allowed;
}
main.popup section.orderButtonsSection.popup {
  grid-area: buttons;
  display: grid;
  grid-template-areas: "addtoorder gotoshowroom spacer packagevalue" "addtoorder gotoshowroom spacer packagediscount";
  grid-template-columns: auto auto auto 1fr;
  grid-template-rows: auto auto;
  grid-gap: 0 10px;
  align-items: center;
  padding: 0 10px;
  background: #eee;
}
@media only screen and (min-width: 768px) {
  main.popup section.orderButtonsSection.popup {
    grid-template-columns: 2fr 2fr 5fr 3fr;
  }
}
@media only screen and (min-width: 1024px) {
  main.popup section.orderButtonsSection.popup {
    grid-template-columns: 150px 150px 8fr 3fr;
  }
}
main.popup a.addToOrder,
main.popup a.goToShowroom {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #333;
  height: 32px;
  width: 150px;
}
main.popup a.addToOrder {
  grid-area: addtoorder;
  background: #f2994a;
  color: #fff;
  border-color: #f2994a;
  line-height: 0.875rem;
  width: 32px;
}
@media only screen and (min-width: 768px) {
  main.popup a.addToOrder {
    width: 150px;
  }
}
main.popup a.addToOrder > span.onlyMobile {
  font-size: 1.5rem;
}
@media only screen and (min-width: 768px) {
  main.popup a.addToOrder > span.onlyMobile {
    display: none;
  }
}
main.popup a.addToOrder > span.onlyDesktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  main.popup a.addToOrder > span.onlyDesktop {
    display: inline;
  }
}
main.popup a.goToShowroom {
  grid-area: gotoshowroom;
  color: #333;
}
main.popup div.spacer {
  grid-area: spacer;
}
main.popup div.value > p,
main.popup div.discount > p {
  text-align: right;
  margin: 0;
}
main.popup div.value {
  grid-area: packagevalue;
}
main.popup div.discount {
  grid-area: packagediscount;
}

footer#packageFooter > div.packageActionsWrapper {
  display: flex;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover.balloonPopover {
  top: initial;
  bottom: 55px;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover.balloonPopover::after {
  top: initial;
  bottom: -6px;
}
footer#packageFooter > div.packageActionsWrapper > div.groupActionsPopover.balloonPopover > a.active {
  color: #009d4e;
}
#packagesView, .packagesModal, div.bigmodal.packages {
  background: #f0f0f0;
}
#packagesView #packagesSection, .packagesModal #packagesSection, div.bigmodal.packages #packagesSection {
  overflow-y: scroll;
  min-height: calc(100dvh - 50px - 55px);
}
@keyframes scrollFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scrollToBottom {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
#packagesView div.packageMiniatures, .packagesModal div.packageMiniatures, div.bigmodal.packages div.packageMiniatures {
  position: relative;
  width: 100%;
  height: 100%;
}
#packagesView div.packageMiniatures.empty, .packagesModal div.packageMiniatures.empty, div.bigmodal.packages div.packageMiniatures.empty {
  background-size: 150px;
}
#packagesView div.packageMiniatures > div, .packagesModal div.packageMiniatures > div, div.bigmodal.packages div.packageMiniatures > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#packagesView div.packageMiniatures span.scrollLayer, .packagesModal div.packageMiniatures span.scrollLayer, div.bigmodal.packages div.packageMiniatures span.scrollLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 100;
  animation: none;
}
#packagesView div.packageMiniatures span.scrollLayer > span, .packagesModal div.packageMiniatures span.scrollLayer > span, div.bigmodal.packages div.packageMiniatures span.scrollLayer > span {
  display: flex;
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  justify-content: center;
}
#packagesView div.packageMiniatures span.scrollLayer > span > span, .packagesModal div.packageMiniatures span.scrollLayer > span > span, div.bigmodal.packages div.packageMiniatures span.scrollLayer > span > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2f2f2;
  display: block;
  margin: 0 5px;
}
#packagesView div.packageMiniatures span.scrollLayer > span > span.active, .packagesModal div.packageMiniatures span.scrollLayer > span > span.active, div.bigmodal.packages div.packageMiniatures span.scrollLayer > span > span.active {
  background: #c2c2c2;
}

#productView div.newLoader {
  align-self: center;
}
#productView > main {
  position: static;
  overflow-y: scroll;
  padding: 0 0.3125rem 0 0.625rem;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
#productView > main::-webkit-scrollbar {
  width: 5px;
}
#productView > main::-webkit-scrollbar-thumb {
  background-color: #666666;
}
#productView > main > div.productGrid {
  display: grid;
  grid-template-areas: "navigation" "breadcrumbs" "thumbs" "details" "photo" "pagination" "infobox";
  grid-gap: 10px;
  padding: 10px 0;
}
#productView > main > div.productGrid > .productDetails {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
#productView > main > div.productGrid > .productDetails::-webkit-scrollbar {
  width: 5px;
}
#productView > main > div.productGrid > .productDetails::-webkit-scrollbar-thumb {
  background-color: #666666;
}
#productView > main > div.productGrid > .productDetails::-webkit-scrollbar {
  height: 5px;
}
#productView > main > div.productGrid > .productDetails::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 1024px) {
  #productView > main > div.productGrid > .productDetails {
    overflow-x: hidden;
    height: calc(100dvh - 50px - 55px - 60px - 30px - 20px);
  }
}
@media only screen and (min-width: 1024px) {
  #productView > main > div.productGrid {
    grid-template-areas: "breadcrumbs breadcrumbs navigation" "thumbs photo details" ". pagination .";
    grid-template-columns: 165px 2fr 100px;
    grid-template-rows: 30px auto 30px;
    grid-gap: 10px;
    height: 100%;
    overflow: hidden;
  }
}
@media only screen and (min-width: 1024px) {
  #productView > main > div.productGrid.isInfoBox {
    grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs navigation" "thumbs photo details infobox" ". pagination . .";
    grid-template-columns: 165px 2fr 100px 1fr;
  }
}
#productView div.breadcrumbs {
  grid-area: breadcrumbs;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  #productView div.breadcrumbs {
    flex-wrap: unset;
  }
}
#productView div.breadcrumbs > div {
  display: flex;
  align-items: center;
  color: #818181;
}
#productView div.breadcrumbs > div.productName {
  color: #444444;
}
#productView div.breadcrumbs > div > a {
  color: #818181;
}
#productView div.breadcrumbs > div > a:hover {
  text-decoration: underline !important;
}
#productView div.breadcrumbs > div > span.arrowWrapper {
  margin: 0.25rem;
  pointer-events: none;
  cursor: unset;
}
#productView div.breadcrumbs > div > span.arrowWrapper > i {
  font-size: 0.75rem;
}
#productView nav.productsNavigation {
  grid-area: navigation;
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 1024px) {
  #productView nav.productsNavigation {
    justify-content: flex-end;
  }
}
#productView nav.productsNavigation > button {
  height: 100%;
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #333;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 35px;
}
@media only screen and (min-width: 1024px) {
  #productView nav.productsNavigation > button {
    padding: 0 1rem;
  }
}
#productView nav.productsNavigation > button:not(:first-child) {
  margin-left: 0.5rem;
}
#productView nav.productsNavigation > button > span {
  margin-right: 0.75rem;
}
#productView nav.productsNavigation > button > i {
  display: flex;
  align-items: center;
}
#productView div.thumbs {
  grid-area: thumbs;
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  height: 100%;
  padding: 0;
}
#productView div.thumbs::-webkit-scrollbar {
  width: 5px;
}
#productView div.thumbs::-webkit-scrollbar-thumb {
  background-color: #666666;
}
#productView div.thumbs::-webkit-scrollbar {
  height: 5px;
}
#productView div.thumbs::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 1024px) {
  #productView div.thumbs {
    overflow: hidden;
    overflow-y: scroll;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
  }
}
#productView div.thumbs > a {
  display: block;
  min-height: 100px;
  height: 100px;
  width: 100%;
}
#productView div.thumbs > a > div {
  margin: auto;
  width: 90px;
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  height: 80%;
  color: #000;
  line-height: 11rem;
  text-align: center;
  font-size: 0.9rem;
}
#productView div.thumbs > a > div.status-loading {
  background-color: #fff;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-position: center center;
  background-size: 30px 30px;
}
#productView div.thumbs > a > div.status-error {
  width: 100%;
  background-image: url(76c5b952a644e9554e27.svg);
  background-position: center center;
  background-size: 30px 30px;
}
#productView div.thumbs > a > div > div {
  position: absolute;
  pointer-events: none;
}
#productView div.thumbs > a > span {
  font-weight: lighter;
  color: #000;
  text-align: center;
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#productView div.thumbs > a.checked, #productView div.thumbs > a:hover, #productView div.thumbs > a.selected {
  background-color: #F7F7F7;
}
#productView div.thumbs > a:hover {
  background-color: #F7F7F7;
}
#productView a.detailPreview {
  display: block;
  grid-area: photo;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
}
#productView a.detailPreview > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 200ms;
}
#productView a.detailPreview > img.loading, #productView a.detailPreview > img.error {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.01);
}
#productView a.detailPreview > img.loading:after, #productView a.detailPreview > img.error:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background: #fff;
}
#productView a.detailPreview > img.loading {
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 50px 50px;
}
#productView a.detailPreview > img.loaded {
  background-image: none;
}
#productView a.detailPreview > img.error {
  background-image: url(76c5b952a644e9554e27.svg);
  background-size: 251px 274px;
}
#productView a.detailPreview > .videoWrapper {
  position: relative;
  max-height: 100%;
  overflow: hidden;
}
#productView a.detailPreview > .videoWrapper > video {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
#productView a.detailPreview > .videoWrapper .soundToggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  z-index: 2;
}
#productView a.detailPreview > .videoWrapper .soundToggle i {
  font-size: 18px;
  display: flex;
}
#productView div.main {
  grid-area: photo;
  width: 100%;
  min-height: calc(145px + 20dvh);
  overflow: hidden;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media only screen and (min-width: 768px) {
  #productView div.main {
    height: 100%;
    min-height: initial;
  }
}
#productView div.main .smartImageItem {
  width: 100%;
  animation: fadeIn 500ms forwards;
}
#productView div.pagination {
  grid-area: pagination;
  display: grid;
  grid-template-areas: "arrowLeft dots arrowRight";
  grid-template-columns: 30px auto 30px;
}
#productView div.pagination > div.dots {
  grid-area: dots;
  display: flex;
  justify-content: center;
}
#productView div.pagination > div.dots > a {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  background-color: #c6c6c6;
  margin: 10px 6px;
}
#productView div.pagination > div.dots > a.active {
  background: #333;
}
#productView div.pagination > button {
  width: 30px;
  height: 30px;
  line-height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background-color: #c6c6c6;
}
#productView div.pagination > button:active {
  background: #333;
  color: #c6c6c6;
}
#productView div.pagination > button.arrowLeft {
  grid-area: arrowLeft;
}
#productView div.pagination > button.arrowRight {
  grid-area: arrowRight;
}
#productView div.infobox {
  grid-area: infobox;
  width: 100%;
  height: auto;
  padding: 5px 5px;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
#productView div.infobox::-webkit-scrollbar {
  width: 5px;
}
#productView div.infobox::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 1024px) {
  #productView div.infobox {
    display: none;
  }
  #productView div.infobox.show {
    display: block;
    height: 100%;
    overflow: auto;
  }
}
#productView div.infobox section#productDescHTML > h2 {
  margin-top: 0 !important;
}
#productView #productCalculator > div {
  bottom: 70px;
  position: absolute;
  right: 10px;
  max-width: calc(100% - 15px);
  width: auto;
}
#productView #productCalculator > div.calculator, #productView #productCalculator > div.lots-pyramid, #productView #productCalculator > div.calculatorWarehouses {
  box-shadow: 0 0 10px 2px #000;
}
@media only screen and (min-width: 768px) {
  #productView #productCalculator > div.calculator, #productView #productCalculator > div.lots-pyramid, #productView #productCalculator > div.calculatorWarehouses {
    box-shadow: none;
  }
}
#productView #customizationsIframe {
  z-index: 100;
  position: absolute;
  top: 50px; /* header height */
  bottom: 55px; /* footer height */
  width: 100%;
  height: calc(100dvh - 50px - 55px);
}

.lightBoxCover {
  background: rgba(0, 0, 0, 0.4);
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  position: absolute;
  display: none;
  z-index: 999999;
}
.lightBoxCover.show {
  display: block;
}

.lightBox {
  background: #fff;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  position: absolute;
  display: none;
  z-index: 1000000;
  padding: 20px;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-repeat: no-repeat;
  background-size: 45px 45px;
  background-position: center center;
}
.lightBox.show {
  display: block;
}
@media only screen and (min-width: 768px) {
  .lightBox {
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
  }
}
.lightBox > a {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 900;
  width: 40px;
  height: 40px;
  line-height: 2.9rem;
  text-align: center;
  color: #474747;
  font-size: 1.5rem;
  transition: all 300ms;
}
.lightBox > a:hover {
  color: #adadad;
  transition: all 300ms;
}
.lightBox > div {
  width: 100%;
  height: 100%;
}
.lightBox div.lightboxImageWrapper {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}
.lightBox .lightboxVideoWrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.lightBox .lightboxVideoWrapper video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lightBox .lightboxVideoWrapper .soundToggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  color: white;
  z-index: 2;
}
.lightBox .lightboxVideoWrapper .soundToggle i {
  font-size: 18px;
  display: flex;
}

#smartImageContainer {
  grid-area: image;
  height: 100%;
  position: relative;
  overflow-y: hidden;
}
#smartImageContainer video {
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  width: 500px;
  height: 500px;
  z-index: 10;
}

.smartImageInfo {
  font-size: 0.8rem;
  text-align: center;
  color: #474747;
}

#smartImage {
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
  cursor: move;
  text-align: center;
  position: relative;
}
#smartImage video.smartImageVideo,
#smartImage div.smartImageItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 1024px) {
  #smartImage video.smartImageVideo,
  #smartImage div.smartImageItem {
    width: 80%;
  }
}
#smartImage video.smartImageVideo {
  background: #fff;
  z-index: 1;
}
#smartImage div.smartImageItem.empty {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 251px 274px;
  height: 100%;
  width: 100%;
}
#smartImage div.smartImageItem.empty.empty-no-image {
  background-image: url(76c5b952a644e9554e27.svg);
}
#smartImage div.smartImageItem.has-details {
  margin-top: 130px;
}
@media only screen and (min-width: 1024px) {
  #smartImage div.smartImageItem.has-details {
    margin-top: 0;
  }
}
#smartImage img {
  width: 100%;
  height: 100%;
  pointer-events: none;
  object-fit: contain;
}
#smartImage img.loading {
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  height: 100%;
  width: 100%;
}
#smartImage img.load {
  background-image: none;
}
#smartImage img.error {
  background-image: url(76c5b952a644e9554e27.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 251px 274px;
  height: 100%;
  width: 100%;
}

#progressInfo {
  position: fixed;
  left: 50%;
  top: 30%;
  background-color: #292929;
  width: 400px;
  margin-left: -200px;
  border: 1px solid #2f2f2f;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.7), 0 0 150px rgba(255, 255, 255, 0.5);
  cursor: progress;
}
#progressInfo h1, #progressInfo h2 {
  color: #fff;
  text-align: center;
  font-size: 1rem;
}
#progressInfo h2 {
  font-size: 0.8rem;
}
#progressInfo .fileProgressContainer {
  height: 20px;
  width: 100%;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.1);
}
#progressInfo .fileProgressContainer > div {
  height: 100%;
  border-radius: 3px;
  background-color: #009d4e;
  box-shadow: 0 0 3px 1px #009d4e;
}
#progressInfo a.cancel {
  display: block;
  text-align: center;
  margin: 15px auto 0 auto;
  height: 20px;
  line-height: 15px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.5);
}
#progressInfo a.cancel:hover {
  color: white;
}

#showOrderView > header #downloadPDF {
  font-weight: lighter;
  margin-right: 5px;
}
#showOrderView > section {
  position: relative;
  height: calc(100dvh - 105px);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #fff transparent;
}
#showOrderView > section::-webkit-scrollbar {
  width: 5px;
}
#showOrderView > section::-webkit-scrollbar-thumb {
  background-color: #fff;
}
#showOrderView > section > div#pdfPreviewLoading {
  display: none;
}
#showOrderView > section.isLoading > div#pdfPreviewLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#showOrderView > section.isLoading > div#pdfPreviewLoading > div {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 100%;
}
#showOrderView #pdfPreviewContainer {
  background-color: #666666;
}
#showOrderView #pdfPreview {
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
#showOrderView #pdfPreview > canvas {
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;
}

#showroomView > main {
  overflow: hidden;
}
#showroomView footer#showroomFooter {
  padding: 0 5px;
  grid-gap: 5px;
}
@media only screen and (min-width: 768px) {
  #showroomView footer#showroomFooter {
    padding: 0 10px;
    grid-gap: 10px;
  }
}
#showroomView footer#showroomFooter > div {
  gap: 5px;
}
@media only screen and (min-width: 768px) {
  #showroomView footer#showroomFooter > div {
    gap: 10px;
  }
}
#showroomView footer#showroomFooter > div > .downloadPdfButton {
  gap: 0.2rem;
}
#showroomView footer#showroomFooter > div > div.pagination {
  width: 32px;
}
@media only screen and (min-width: 768px) {
  #showroomView footer#showroomFooter > div > div.pagination {
    width: 45px;
  }
}
#showroomView footer#showroomFooter .disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

#gesture-area {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #CDCDCD;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  #gesture-area {
    flex-direction: row;
    align-items: center;
  }
}
#gesture-area .draggable, #gesture-area .no-draggable {
  position: relative;
  display: block;
  width: var(--width);
  height: var(--height);
  min-width: 25px;
  min-height: 25px;
  left: calc(var(--center-x) - var(--width) / 2);
  top: calc(var(--center-y) - var(--height) / 2);
  z-index: var(--z-index);
}
#gesture-area .draggable > div.miniature, #gesture-area .no-draggable > div.miniature {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
#gesture-area .draggable > div.miniature.status-loading, #gesture-area .no-draggable > div.miniature.status-loading {
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 40px 40px;
}
#gesture-area .draggable > .productDescContainer, #gesture-area .no-draggable > .productDescContainer {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  border-radius: 20px;
  pointer-events: none;
}
#gesture-area .draggable > .productDescContainer > .productDesc, #gesture-area .no-draggable > .productDescContainer > .productDesc {
  max-width: 100%;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 0 10px;
}
#gesture-area .draggable > .productDescContainer p, #gesture-area .no-draggable > .productDescContainer p {
  margin: 2px;
  font-size: 13px;
}
#gesture-area .draggable > .productDescContainer p.second-line, #gesture-area .no-draggable > .productDescContainer p.second-line {
  font-weight: bold;
}
#gesture-area .draggable:hover .productDescContainer, #gesture-area .no-draggable:hover .productDescContainer {
  display: none;
}
#gesture-area.showProductsDetails .productDescContainer {
  display: block;
}
#gesture-area #dropzoneContainer {
  padding: 2px;
  aspect-ratio: var(--aspect-ratio);
  max-height: calc(100dvh - 55px - 50px - 10px);
  position: absolute;
  top: 180px;
}
@media only screen and (min-width: 414px) {
  #gesture-area #dropzoneContainer {
    padding: 5px;
  }
}
@media only screen and (min-width: 768px) {
  #gesture-area #dropzoneContainer {
    top: auto;
    padding: 10px;
  }
}
.orderWatcherMode #gesture-area #dropzoneContainer {
  cursor: not-allowed;
}
.orderWatcherMode #gesture-area #dropzoneContainer .dropzone {
  pointer-events: none;
}
#gesture-area #dropzoneContainer.blockEdit > .dropzone {
  cursor: not-allowed;
}
#gesture-area #dropzoneContainer.blockEdit > .dropzone * {
  pointer-events: none;
}
#gesture-area .dropzone {
  position: relative;
  aspect-ratio: var(--aspect-ratio);
  max-width: 100%;
  max-height: 100%;
  box-shadow: 2px 2px 10px 10px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  transform-origin: 0 0;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100%, cover;
  background-color: #fff;
  transition: 200ms linear;
  overflow: hidden;
}
#gesture-area .dropzone.transition > .draggable {
  transition: all 500ms ease-in;
}
#gesture-area .dropzone.fullscreen {
  transition: 200ms linear;
}
#gesture-area .dropzone > div {
  position: absolute;
  border: 1px solid transparent;
}
#gesture-area .dropzone > div:hover, #gesture-area .dropzone > div.resizing {
  border-color: #CCCCCC;
}
#gesture-area .dropzone > div:hover > div.resize, #gesture-area .dropzone > div.resizing > div.resize {
  display: block;
}
#gesture-area .dropzone > div.drag-start {
  transform: translateX(-5000px);
  transition: all 10ms;
  z-index: 10;
}
#gesture-area .dropzone > div.draggable {
  cursor: move;
}
#gesture-area .dropzone > div > div.resize {
  display: none;
  --resize-square-size: 15px;
  position: absolute;
  bottom: calc(var(--resize-square-size) / -2);
  right: calc(var(--resize-square-size) / -2);
  width: var(--resize-square-size);
  height: var(--resize-square-size);
  background-color: #252525;
  border-radius: 50%;
  background-clip: padding-box;
  cursor: nw-resize;
  z-index: 1;
}
#gesture-area .dropzone > div > div.resize:hover {
  background-color: #000;
}
@media only screen and (min-width: 1920px) {
  #gesture-area .dropzone > div > div.resize {
    --resize-square-size: 20px;
  }
}
#gesture-area .catalog {
  float: left;
  width: 100%;
  height: 180px;
}
@media only screen and (min-width: 768px) {
  #gesture-area .catalog {
    width: 341px;
    height: 100%;
    position: absolute;
    z-index: 92;
    right: -320px;
    top: 0;
    bottom: 0;
    transition: all 300ms;
  }
  #gesture-area .catalog.show {
    right: 0;
  }
}
#gesture-area .catalog > div {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  background: rgba(228, 228, 228, 0.9);
  float: left;
  width: 100%;
  overflow: auto;
  height: 100%;
  display: flex;
}
#gesture-area .catalog > div::-webkit-scrollbar {
  width: 5px;
}
#gesture-area .catalog > div::-webkit-scrollbar-thumb {
  background-color: #666666;
}
@media only screen and (min-width: 768px) {
  #gesture-area .catalog > div {
    display: block;
  }
}
.orderWatcherMode #gesture-area .catalog > div {
  cursor: not-allowed;
}
.orderWatcherMode #gesture-area .catalog > div > div {
  pointer-events: none;
}
@media only screen and (min-width: 768px) {
  #gesture-area .catalog > div {
    width: 320px;
    box-shadow: -1px 0 0 0 rgb(96.5, 96.5, 96.5);
    margin-left: 21px;
    padding-bottom: 55px;
  }
}
#gesture-area .catalog > div > div {
  float: left;
  width: 130px;
  height: auto;
  margin: 5px 10px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #D3D3D3;
  transition: all 300ms;
  cursor: pointer;
}
#gesture-area .catalog > div > div[draggable=false] {
  opacity: 0.5;
  cursor: not-allowed;
}
#gesture-area .catalog > div > div:hover {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
#gesture-area .catalog > div > div.unavailable {
  box-shadow: 0 0 0 2px #e03e2e;
  opacity: 0.5;
}
#gesture-area .catalog > div > div div.image, #gesture-area .catalog > div > div div.name {
  pointer-events: none;
}
#gesture-area .catalog > div > div .image {
  width: 130px;
  height: 130px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
}
#gesture-area .catalog > div > div .image.status-loading {
  background-image: url(f27a03b1a32d00d0b239.svg);
  background-size: 40px 40px;
}
#gesture-area .catalog > div > div .image.status-error {
  background-image: url(76c5b952a644e9554e27.svg);
  background-size: 40px 40px;
}
#gesture-area .catalog > div > div .name {
  width: 130px;
  float: left;
  background-color: #fff;
  font-size: 0.8rem;
  text-align: center;
  padding: 4px;
  box-shadow: 0 -1px 0 0 #D3D3D3;
}
#gesture-area .catalog > div > div .name p {
  margin: 0;
}
#gesture-area .catalog > div > div .name .strong {
  font-weight: bold;
}
#gesture-area .catalog > div .toggle {
  position: absolute;
  top: 48%;
  left: 1px;
  z-index: 99;
  background-color: #e4e4e4;
  display: none;
  height: 60px;
  width: 20px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  box-shadow: -1px 0 0 0 rgb(96.5, 96.5, 96.5), 0 1px 0 0 rgb(96.5, 96.5, 96.5), 0 -1px 0 0 rgb(96.5, 96.5, 96.5);
}
@media only screen and (min-width: 768px) {
  #gesture-area .catalog > div .toggle {
    display: block;
  }
}
#gesture-area .catalog > div .toggle:after {
  position: absolute;
  content: "";
  height: 30px;
  width: 3px;
  box-shadow: -2px 0 0 0 rgba(0, 0, 0, 0.3), 2px 0 0 0 rgba(0, 0, 0, 0.3);
  top: 15px;
  left: 10px;
}

.backgroundsPopup {
  position: absolute;
  bottom: 12px;
  left: 10px;
  width: 285px;
  height: 450px;
  background-color: #fff;
  z-index: 1000000;
  border-radius: 15px 15px 3px 3px;
  display: none;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
@media only screen and (min-width: 568px) {
  .backgroundsPopup {
    width: 420px;
  }
}
.backgroundsPopup.open {
  display: block;
}
.backgroundsPopup:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background: #fff;
  pointer-events: none;
  transform: translate(50%, 50%) rotate(45deg);
}
.backgroundsPopup header {
  float: left;
  width: 100%;
  height: 40px;
  background: #333;
  color: #fff;
  text-align: center;
  line-height: 2.4rem;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.backgroundsPopup .backgrounds {
  overflow: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 400px;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
.backgroundsPopup .backgrounds::-webkit-scrollbar {
  width: 5px;
}
.backgroundsPopup .backgrounds::-webkit-scrollbar-thumb {
  background-color: #666666;
}
.backgroundsPopup .backgrounds > div {
  display: flex;
  flex-wrap: wrap;
}
.backgroundsPopup .backgrounds > div > a {
  margin: 5px;
  display: block;
  width: 125px;
  height: 93px;
  box-shadow: inset 0 0 0 2px #808080;
  background-size: cover;
  background-position: center;
  transition: opacity 300ms;
}
.backgroundsPopup .backgrounds > div > a:hover {
  opacity: 0.7;
}
.backgroundsPopup .backgrounds > div > hr {
  border: none;
  background: #808080;
  width: 100%;
  height: 1px;
}
.backgroundsPopup .backgrounds > div:last-child > hr {
  display: none;
}

.errorMessage {
  width: 100%;
  margin-top: 80px;
  text-align: center;
}

.customersTable div.tableBody {
  height: calc(100dvh - 50px - 40px - 50px - 50px - 55px - 12px);
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
.customersTable div.tableBody::-webkit-scrollbar {
  width: 5px;
}
.customersTable div.tableBody::-webkit-scrollbar-thumb {
  background-color: #666666;
}

#customerView .customerGrid {
  width: 100%;
  padding: 10px;
}
@media only screen and (min-width: 768px) {
  #customerView .customerGrid {
    padding: 0;
    margin: 20px auto;
    width: 90%;
  }
}
#customerView .customerGrid > div {
  display: grid;
  grid-template-columns: 60px 1fr;
}
@media only screen and (min-width: 768px) {
  #customerView .customerGrid > div {
    display: table-row;
  }
}
#customerView .customerGrid > div > div:first-child {
  font-size: 0.8rem;
  font-weight: lighter;
}
@media only screen and (min-width: 768px) {
  #customerView .customerGrid > div > div:first-child {
    width: 30%;
    text-align: right;
  }
}
#customerView .customerGrid > div > div:last-child {
  padding-left: 10px;
  /*padding-top: ;*/
}
#customerView .customerGrid > div > div p {
  margin: 0;
}
#customerView .customerGrid > div.address > div {
  padding-top: 10px;
}
#customerView .customerGrid > div.address > div > p {
  word-break: break-all;
}
#customerView .subheader {
  width: 100%;
  float: left;
  height: 25px;
  padding: 3px 4px 3px 10px;
  font-size: 1rem;
  font-weight: bold;
  background: #F7F7F7;
}
#customerView .customerOrdersGrid > div {
  color: #000;
}
#customerView .customerOrdersGrid > div:hover {
  background: rgb(249.55, 249.55, 249.55);
}
#customerView .customerOrdersGrid > div.pointer {
  cursor: pointer;
}
#customerView .customerOrdersGrid > div > div {
  box-shadow: inset 0 -1px 0 0 #DDDCDF;
}
#customerView .customerOrdersGrid > div > div.iconColumn {
  width: 35px;
  text-align: center;
  line-height: 36px;
  font-size: 1.2rem;
}
#customerView .customerOrdersGrid > div > div.nameColumn p {
  margin: 5px 0;
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  #customerView .customerOrdersGrid > div > div.nameColumn p {
    font-size: 1rem;
  }
}
#customerView .customerOrdersGrid > div > div.nameColumn p.subtitle {
  font-weight: lighter;
}
#customerView .customerOrdersGrid > div > div.nameColumn p.subtitle .amount {
  display: block;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  #customerView .customerOrdersGrid > div > div.nameColumn p.subtitle .amount {
    margin-left: 10px;
    display: inline;
    width: auto;
  }
}
#customerView .customerOrdersGrid > div > div.chevronColumn {
  width: 60px;
  text-align: center;
  vertical-align: middle;
}
#customerView .customerOrdersGrid > div > div.chevronColumn {
  width: 60px;
  text-align: center;
  vertical-align: middle;
}
#customerView .customerOrdersGrid > div > div.pseudoCheckboxColumn {
  width: 60px;
  text-align: center;
  vertical-align: middle;
  font-size: 1.2rem;
}
#customerView .customerOrdersGrid > div > div.orderTypeLabelColumn {
  width: 40px;
  vertical-align: middle;
  max-height: 1rem;
  font-size: 0.75rem;
}
@media only screen and (min-width: 768px) {
  #customerView .customerOrdersGrid > div > div.orderTypeLabelColumn {
    font-size: 1rem;
  }
}
#customerView div.gridLayout > div.right-column {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#customerView div.gridLayout > div > div.orders-list {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 50px;
  overflow: hidden;
}
#customerView div.gridLayout > div > div.orders-list.without-pagination {
  grid-template-rows: 1fr;
}
#customerView div.gridLayout > div > div.orders-list > div {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  overflow: auto;
}
#customerView div.gridLayout > div > div.orders-list > div::-webkit-scrollbar {
  width: 5px;
}
#customerView div.gridLayout > div > div.orders-list > div::-webkit-scrollbar-thumb {
  background-color: #666666;
}
#customerView div.gridLayout > div > div.orders-list > simple-pagination {
  margin-right: 0;
  margin-left: auto;
}
#customerView section#customerTargetSection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #000;
  min-height: 150px;
}
#customerView section#customerTargetSection .targetValue {
  font-size: 18px;
  margin: 5px 0;
}
#customerView section#customerTargetSection .targetPercentage {
  font-size: 15px;
}
#customerView section#customerTargetSection .targetButton {
  display: inline-block;
  border: 1px solid #000;
  min-width: 150px;
  text-align: center;
  border-radius: 4px;
  color: #000;
  font-size: 12px;
  height: 40px;
  padding: 0 5px;
  margin-right: 5px;
  line-height: 40px;
}
#customerView section#customerTargetSection .targetButton:hover {
  background-color: #f0f0f0;
}

div.customerDescriptionModal {
  padding: 15px;
}
@media screen and (max-width: 568px) {
  div.customerDescriptionModal {
    font-size: 0.75rem;
  }
}
@media screen and (max-width: 568px) {
  div.customerDescriptionModal #customerInfo {
    display: flex;
    flex-direction: column;
  }
}
div.customerDescriptionModal.userDetails > address {
  font-style: normal;
  display: flex;
  flex-wrap: wrap;
}
div.customerDescriptionModal.userDetails > address > div {
  width: 100%;
  margin: 1em 0;
}
@media only screen and (min-width: 568px) {
  div.customerDescriptionModal.userDetails > address > div {
    width: 50%;
  }
}

.calculator div.calculatorGrid section.childGrid > div.col .lStock > div div.showStockAsImage, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock > div div.showStockAsImage, section.num-selector div.showStockAsImage {
  display: block;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin: 11px;
}
.calculator div.calculatorGrid section.childGrid > div.col .lStock > div div.redBall.showStockAsImage, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock > div div.redBall.showStockAsImage, section.num-selector div.redBall.showStockAsImage {
  background: #ff0000;
  background: radial-gradient(circle at 5px 5px, #ff0000, #990000);
}
.calculator div.calculatorGrid section.childGrid > div.col .lStock > div div.yellowBall.showStockAsImage, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock > div div.yellowBall.showStockAsImage, section.num-selector div.yellowBall.showStockAsImage {
  background: #ffff00;
  background: radial-gradient(circle at 5px 5px, #ffff00, #999900);
}
.calculator div.calculatorGrid section.childGrid > div.col .lStock > div div.greenBall.showStockAsImage, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock > div div.greenBall.showStockAsImage, section.num-selector div.greenBall.showStockAsImage {
  background: #008000;
  background: radial-gradient(circle at 5px 5px, #008000, #001a00);
}
.calculator div.calculatorGrid section.childGrid > div.col .lStock > div div.zeroBall.showStockAsImage, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock > div div.zeroBall.showStockAsImage, section.num-selector div.zeroBall.showStockAsImage {
  border: 1px solid #333;
}

.tooltip-content--right, .tooltip-content--left, .tooltip-content--bottom, .tooltip-content--top, .tooltip-content {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
  background-color: #252525;
  color: #fff;
  padding: 0.5em;
  border-radius: 4px;
  font-size: 0.75rem;
  z-index: 100;
  white-space: normal;
}
@media only screen and (min-width: 414px) {
  .tooltip-content--right, .tooltip-content--left, .tooltip-content--bottom, .tooltip-content--top, .tooltip-content {
    padding: 0.75em;
  }
}
.active.tooltip-content--right, .active.tooltip-content--left, .active.tooltip-content--bottom, .active.tooltip-content--top, .active.tooltip-content {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.tooltip-content--right::after, .tooltip-content--left::after, .tooltip-content--bottom::after, .tooltip-content--top::after, .tooltip-content::after {
  content: "";
  position: absolute;
  border-width: 7px;
  border-style: solid;
}

.tooltip-content--top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
}
.tooltip-content--top.active {
  transform: translateX(-50%) translateY(-6px);
}
.tooltip-content--top::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-color: #252525 transparent transparent transparent;
}

.tooltip-content--bottom {
  top: 99%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
}
.tooltip-content--bottom.active {
  transform: translateX(-50%) translateY(6px);
}
.tooltip-content--bottom::after {
  bottom: 99%;
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent #252525 transparent;
}

.tooltip-content--left {
  right: 100%;
  top: 50%;
  transform: translateX(0) translateY(-50%);
}
.tooltip-content--left.active {
  transform: translateX(-10px) translateY(-50%);
}
.tooltip-content--left::after {
  top: 50%;
  left: 99%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent #252525;
}

.tooltip-content--right {
  left: 99%;
  top: 50%;
  transform: translateX(0) translateY(-50%);
}
.tooltip-content--right.active {
  transform: translateX(10px) translateY(-50%);
}
.tooltip-content--right::after {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-color: transparent #252525 transparent transparent;
}

.tooltip-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

.calculatorWarehouses, .calculator {
  height: 465px;
  overflow: hidden;
  display: none;
  background: #F7F7F7;
  position: relative;
  z-index: 3;
  width: 100%;
  opacity: 1;
  transition: opacity 500ms;
}
@media only screen and (min-width: 768px) {
  .calculatorWarehouses, .calculator {
    width: auto;
    max-width: calc(100% - 30px);
  }
  .compact.calculatorWarehouses, .compact.calculator {
    max-width: 80%;
  }
}
@media only screen and (min-width: 1024px) {
  .calculatorWarehouses, .calculator {
    width: auto;
    min-height: 145px;
    height: auto;
    position: absolute;
    right: 20px;
    bottom: 10px;
    background: rgba(249, 249, 250, 0.97);
    border: 1px solid #000;
    border-radius: 10px;
    z-index: 900;
  }
}
.show.calculatorWarehouses, .show.calculator {
  display: block;
}

.calculatorWarehouses .navigation, .calculator .navigation {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.calculatorWarehouses .navigation a, .calculator .navigation a {
  display: inline-flex;
  color: #fff;
  font-size: 0.9rem;
  padding: 7px 10px;
  align-items: center;
}
.calculatorWarehouses .navigation > div > div, .calculator .navigation > div > div {
  padding: 6px 5px;
}
.calculatorWarehouses .navigation > div > div:first-child, .calculator .navigation > div > div:first-child {
  padding-left: 10px;
}
.calculatorWarehouses .navigation > div > div:last-child, .calculator .navigation > div > div:last-child {
  padding-right: 10px;
  text-align: right;
}

.calculator .calculatorHeaderWrapper {
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.calculator section.seasons {
  float: none;
  padding-bottom: 0;
  height: auto;
  overflow-x: auto;
}
.calculator section.seasons > ul {
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
  width: 100%;
  justify-content: left;
  overflow-x: auto;
  overflow-y: hidden;
}
.calculator section.seasons > ul::-webkit-scrollbar {
  width: 5px;
}
.calculator section.seasons > ul::-webkit-scrollbar-thumb {
  background-color: #666666;
}
.calculator section.seasons > ul li {
  min-width: 100px;
  cursor: pointer;
}
.calculator section.seasons > ul li > div {
  padding: 0;
}
.calculator section.seasons > ul li.addDW {
  width: 70px;
  background-color: transparent;
}
.calculator section.seasons > ul li.addDW a {
  color: #474747;
  font-weight: bold;
  border: 1px solid #ddd;
  background-color: #fff;
  border-radius: 3px;
  padding: 5px;
}
.calculator section.seasons > ul li.addDW a:hover {
  background-color: #eee;
}
.calculator span.doubleSpanWrapper {
  text-align: center;
}
.calculator span.doubleSpanWrapper > span {
  width: auto;
  font-weight: lighter;
}
.calculator a.calculatorButton {
  width: 100%;
}
.calculator .swiper-height-container {
  height: 210px;
  padding-top: 3px;
}
.calculator .swiper-height-container div.prices {
  margin: 0;
  font-size: 0.8rem;
  font-weight: lighter;
  width: 100%;
  position: relative;
  padding-bottom: 5px;
}
.calculator .swiper-height-container div.prices:first-child {
  margin-top: 20px;
}
.calculator .swiper-height-container div.prices i {
  font-style: normal;
}
.calculator div.calculatorGrid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto auto auto auto auto auto auto;
  grid-column-gap: 5px;
  padding: 5px;
  overflow-x: scroll;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
.calculator div.calculatorGrid::-webkit-scrollbar {
  height: 5px;
}
.calculator div.calculatorGrid::-webkit-scrollbar-thumb {
  background-color: #666666;
}
.calculator div.calculatorGrid .gReset, .calculator div.calculatorGrid .gDecrease, .calculator div.calculatorGrid .gIncrease, .calculator div.calculatorGrid .gTooltip, .calculator div.calculatorGrid .gQty, .calculator div.calculatorGrid .gStock, .calculator div.calculatorGrid .gSize {
  display: flex;
  align-items: center;
  font-weight: lighter;
  font-size: 0.875rem;
  color: #878787;
}
.calculator div.calculatorGrid .gSize {
  grid-column: 3/span 1;
  grid-row: 1/span 1;
  height: 2.5rem;
}
.calculator div.calculatorGrid .gStock {
  grid-column: 3/span 1;
  grid-row: 2/span 1;
  height: 2.5rem;
}
.calculator div.calculatorGrid .gQty {
  grid-column: 3/span 1;
  grid-row: 3/span 1;
  height: 45px;
}
.calculator div.calculatorGrid .gTooltip {
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
}
.calculator div.calculatorGrid .gTooltip > i {
  display: flex;
  align-items: center;
}
.calculator div.calculatorGrid .gTooltip > div.tooltip-content {
  right: -10px;
  left: auto;
  transform: translateX(0) translateY(10px);
}
.calculator div.calculatorGrid .gTooltip > div.tooltip-content::after {
  right: calc(10px + 2px);
  left: auto;
  transform: translateX(0) translateY(1px);
}
.calculator div.calculatorGrid .gIncrease {
  grid-column: 3/span 1;
  grid-row: 4/span 1;
  height: 1.5rem;
}
.calculator div.calculatorGrid .gActions {
  grid-column: 3/span 1;
  grid-row: 5/span 2;
  display: flex;
  align-items: center;
}
.calculator div.calculatorGrid .gDecrease {
  grid-column: 3/span 1;
  grid-row: 7/span 1;
  height: 1.5rem;
}
.calculator div.calculatorGrid .gReset {
  grid-column: 3/span 1;
  grid-row: 8/span 1;
  height: 1.5rem;
}
.calculator div.calculatorGrid .relatedProducts {
  grid-column: 1/span 1;
  grid-row: 1/7;
}
.calculator div.calculatorGrid .sizesGroups {
  grid-column: 1/span 1;
  grid-row: 6/span 1;
}
.calculator div.calculatorGrid section.childGrid {
  min-width: min-content;
  grid-column: 2/span 1;
  grid-row: 1/11;
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
.calculator div.calculatorGrid section.childGrid::-webkit-scrollbar {
  height: 5px;
}
.calculator div.calculatorGrid section.childGrid::-webkit-scrollbar-thumb {
  background-color: #666666;
}
.calculator div.calculatorGrid section.childGrid > div.col .lReset, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lReset, .calculator div.calculatorGrid section.childGrid > div.col .lDecrease, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lDecrease, .calculator div.calculatorGrid section.childGrid > div.col .lIncrease, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lIncrease, .calculator div.calculatorGrid section.childGrid > div.col .lQty, .calculator div.calculatorGrid section.childGrid > div.col .lQtyForLongerTitles, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lQty, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lQtyForLongerTitles, .calculator div.calculatorGrid section.childGrid > div.col .lStock, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock, .calculator div.calculatorGrid section.childGrid > div.col .lSize, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lSize {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.calculator div.calculatorGrid section.childGrid > div.colForLongerTitles {
  width: 50px;
}
.calculator div.calculatorGrid section.childGrid > div.col {
  width: 40px;
}
.calculator div.calculatorGrid section.childGrid > div.col, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.calculator div.calculatorGrid section.childGrid > div.col > div, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles > div {
  flex-shrink: 0;
}
.calculator div.calculatorGrid section.childGrid > div.col .lSize, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lSize {
  height: 2.5rem;
  width: 100%;
}
.calculator div.calculatorGrid section.childGrid > div.col .lSize > span, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lSize > span {
  width: 100%;
}
.calculator div.calculatorGrid section.childGrid > div.col .lSize > span > span, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lSize > span > span {
  width: 100%;
  display: inline-block;
}
.calculator div.calculatorGrid section.childGrid > div.col .lStock, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock {
  height: 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.calculator div.calculatorGrid section.childGrid > div.col .lStock > div, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock > div {
  margin: 0;
  font-weight: lighter;
}
.calculator div.calculatorGrid section.childGrid > div.col .lStock > div.secondStock, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lStock > div.secondStock {
  font-size: 0.875rem;
}
.calculator div.calculatorGrid section.childGrid > div.col .lQtyForLongerTitles, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lQtyForLongerTitles {
  width: 40px;
}
.calculator div.calculatorGrid section.childGrid > div.col .lQty, .calculator div.calculatorGrid section.childGrid > div.col .lQtyForLongerTitles, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lQty, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lQtyForLongerTitles {
  height: 45px;
}
.calculator div.calculatorGrid section.childGrid > div.col .lQty input, .calculator div.calculatorGrid section.childGrid > div.col .lQtyForLongerTitles input, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lQty input, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lQtyForLongerTitles input {
  margin: 0;
}
.calculator div.calculatorGrid section.childGrid > div.col .lDecrease, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lDecrease {
  margin-top: auto;
  flex-shrink: 0;
  height: 1.5rem;
}
.calculator div.calculatorGrid section.childGrid > div.col .lReset, .calculator div.calculatorGrid section.childGrid > div.colForLongerTitles .lReset {
  flex-shrink: 0;
  height: 1.5rem;
}
.calculator div.calculatorGrid input {
  background: transparent;
  text-align: center;
  font-size: 0.8rem;
  font-weight: lighter;
}
.calculator div.calculatorGrid input.exceeded {
  color: #e03e2e;
  box-shadow: inset 0 0 0 2px #e03e2e !important;
  font-weight: bold;
}
.calculator div.calculatorGrid input:hover, .calculator div.calculatorGrid input:focus {
  box-shadow: inset 0 0 0 2px #009d4e;
}
.calculator div.calculatorGrid input:focus {
  background-color: rgba(0, 157, 78, 0.1);
}
.calculator div.calculatorGrid > div.loader {
  top: calc(14px + 0.9rem);
  left: 0;
  height: calc(100% - (14px + 0.9rem));
  z-index: 1;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.calculator .sizesGroups > ul > li > a, .calculator section.relatedProducts a {
  display: block;
  border: 1px solid rgb(208.75, 208.75, 208.75);
  background-color: #fff;
  border-radius: 4px;
  text-align: center;
  padding: 5px;
  margin: 3px 0;
  color: #474747;
  font-size: 0.9em;
}
.calculator .sizesGroups > ul > li > a.checked, .calculator section.relatedProducts a.checked, .calculator .sizesGroups > ul > li > a.selected, .calculator section.relatedProducts a.selected {
  background: rgb(96.5, 96.5, 96.5) !important;
  color: #fff;
}
.calculator .sizesGroups {
  max-width: 300px;
  justify-self: end;
}
.calculator .sizesGroups > span {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 0 5px;
}
@media only screen and (min-width: 768px) {
  .calculator .sizesGroups > span {
    width: 100%;
  }
}
.calculator .sizesGroups > ul {
  list-style-type: none;
  padding: 0;
  margin: 4px 0 0 0;
}
.calculator .sizesGroups > ul > li {
  display: block;
  width: auto;
}
.calculator .sizesGroups > ul > li > a {
  width: 80px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.calculator .cantSelect {
  background: #e03e2e !important;
  color: #fff !important;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}
.calculator a.pyramidPlus > i,
.calculator a.pyramidMinus > i,
.calculator a.pyramidRemove > i {
  font-size: 0.75rem;
  color: #333;
}

.calculatorWarehouses .navigation {
  flex-direction: row;
}
.calculatorWarehouses section.seasons {
  float: none;
  padding-bottom: 0;
  height: auto;
  overflow-x: auto;
}
.calculatorWarehouses section.seasons > ul {
  width: 100%;
  justify-content: left;
}
.calculatorWarehouses section.seasons > ul li {
  min-width: 100px;
  cursor: pointer;
}
.calculatorWarehouses div.calculatorBody {
  display: flex;
  padding: 10px;
}
.calculatorWarehouses div.calculatorBody div.labels {
  margin-left: 10px;
  order: 2;
}
.calculatorWarehouses div.calculatorBody div.labels span {
  font-size: 0.8rem;
  font-weight: lighter;
  color: #878787;
}
.calculatorWarehouses div.calculatorBody div.labels div.warehousesLabels {
  display: flex;
  flex-direction: column;
  height: 95px;
  padding: 38px 0 0 0;
}
.calculatorWarehouses div.calculatorBody div.labels div.warehousesLabels > span {
  height: 25px;
  line-height: 25px;
}
.calculatorWarehouses div.calculatorBody div.fields {
  order: 1;
}
.calculatorWarehouses div.variantsLabels {
  display: flex;
  margin-bottom: 5px;
}
.calculatorWarehouses div.variantsLabels div.col {
  text-align: center;
  font-weight: lighter;
}
.calculatorWarehouses section.warehouseSection {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05);
}
.calculatorWarehouses section.warehouseSection > h2 {
  font-size: 1rem;
  margin: 0 0 5px 0;
}
.calculatorWarehouses section.warehouseSection > div {
  display: flex;
}
.calculatorWarehouses section.warehouseSection > div div.col > div.row {
  text-align: center;
  font-weight: lighter;
}
.calculatorWarehouses section.warehouseSection > div div.col > div.row.inputWrapper {
  height: 28px;
}
.calculatorWarehouses section.warehouseSection > div div.col > div.row > input {
  width: calc(100% - 4px);
  height: 100%;
  margin: 4px 2px 0 2px;
  padding: 0;
  text-align: center;
}
.calculatorWarehouses .col {
  width: 38px;
}
.calculatorWarehouses .col > div.row > span {
  text-align: center;
}

article.calculatorHorizontal {
  position: fixed;
  z-index: 100;
  bottom: 70px;
  left: 20px;
  right: 20px;
  height: auto;
  background-color: #f5f5f5;
  overflow: hidden;
  border: 2px solid #474747;
  border-radius: 3px 3px 10px 10px;
  max-height: calc(100dvh - 65px - 70px);
}
article.calculatorHorizontal header {
  height: 40px;
  line-height: 40px;
  background-color: #474747;
  padding: 0 20px;
}
article.calculatorHorizontal header a {
  color: #fff;
  font-size: 18px;
  font-weight: lighter;
  float: right;
}
article.calculatorHorizontal header a.cancel {
  float: left;
}
article.calculatorHorizontal section {
  padding-bottom: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #666666 transparent;
}
article.calculatorHorizontal section::-webkit-scrollbar {
  width: 5px;
}
article.calculatorHorizontal section::-webkit-scrollbar-thumb {
  background-color: #666666;
}
article.calculatorHorizontal section.productsPanel2 {
  max-height: calc(100dvh - 65px - 70px - 40px - 40px - 10px - 10px);
  display: grid;
  grid-template-columns: auto auto auto auto auto auto 50px 50px;
  grid-template-rows: auto auto;
  grid-gap: 1px;
  padding: 1px;
  font-size: 0.5rem;
}
@media only screen and (min-width: 360px) {
  article.calculatorHorizontal section.productsPanel2 {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 414px) {
  article.calculatorHorizontal section.productsPanel2 {
    font-size: 0.875rem;
    grid-gap: 5px;
    padding: 5px;
  }
}
@media only screen and (min-width: 568px) {
  article.calculatorHorizontal section.productsPanel2 {
    font-size: 1rem;
  }
}
article.calculatorHorizontal section.productsPanel2 > div {
  font-size: 0.75em;
  color: #878787;
}
article.calculatorHorizontal section.productsPanel2 .pColItem {
  grid-column: 1/span 1;
}
article.calculatorHorizontal section.productsPanel2 .pColProduct {
  grid-column: 2/span 1;
}
article.calculatorHorizontal section.productsPanel2 .pColSize {
  grid-column: 3/span 1;
}
article.calculatorHorizontal section.productsPanel2 .pColPrice {
  grid-column: 4/span 1;
  justify-content: flex-end;
}
article.calculatorHorizontal section.productsPanel2 .pColDw {
  grid-column: 5/span 1;
  display: grid;
  grid-auto-flow: column;
  z-index: 2;
  text-align: center;
}
article.calculatorHorizontal section.productsPanel2 .pColStripes {
  grid-column: 5/span 1;
  grid-row-start: 1;
  grid-row-end: calc(var(--products-amount) + 2);
  display: grid;
  grid-auto-flow: column;
  z-index: 1;
}
article.calculatorHorizontal section.productsPanel2 .pColStripes > div.stripe {
  height: 100%;
  border-radius: 5px;
}
article.calculatorHorizontal section.productsPanel2 .pColStripes > div.stripe:nth-child(2n) {
  background: #e4e4e4;
}
article.calculatorHorizontal section.productsPanel2 .pColStock {
  grid-column: 6/span 1;
  justify-content: center;
}
article.calculatorHorizontal section.productsPanel2 .pColStock > span:not(:first-child) {
  margin-left: 0.25rem;
}
article.calculatorHorizontal section.productsPanel2 .pColQuantity {
  grid-column: 7/span 1;
  justify-content: center;
}
article.calculatorHorizontal section.productsPanel2 input.exceeded {
  color: #e03e2e;
  box-shadow: inset 0 0 0 2px #e03e2e !important;
  font-weight: bold;
}
article.calculatorHorizontal section.productsPanel2 .disabledDwInput {
  opacity: 0;
}
article.calculatorHorizontal section.productsPanel2 > div {
  display: flex;
  align-items: center;
}
article.calculatorHorizontal section.productsPanel2 > div.pColItem {
  grid-row: 1/span 1;
}
article.calculatorHorizontal section.productsPanel2 > div.pColProduct {
  grid-row: 1/span 1;
}
article.calculatorHorizontal section.productsPanel2 > div.pColSize {
  grid-row: 1/span 1;
  justify-content: center;
}
article.calculatorHorizontal section.productsPanel2 > div.pColPrice {
  grid-row: 1/span 1;
  justify-content: flex-end;
}
article.calculatorHorizontal section.productsPanel2 > div.pColDw {
  grid-row: 1/span 1;
}
article.calculatorHorizontal section.productsPanel2 > div.pColDw.fields-0 > div {
  text-align: end;
  margin-right: 15px;
}
article.calculatorHorizontal section.productsPanel2 > div.pColDw > div {
  text-align: center;
}
article.calculatorHorizontal section.productsPanel2 > div.pColStock {
  grid-row: 1/span 1;
  justify-content: center;
}
article.calculatorHorizontal section.productsPanel2 > div.pColQuantity {
  grid-row: 1/span 1;
  justify-content: center;
}
article.calculatorHorizontal section.productsPanel2 > div.pColQuantity > span.ptooltip {
  margin-right: 0.25rem;
}
article.calculatorHorizontal section.productsPanel2 > div.pColQuantity > span.ptooltip > i {
  display: flex;
  align-items: center;
}
article.calculatorHorizontal section.productsPanel2 > div.pColQuantity > span.ptooltip > div.tooltip-content {
  right: -10px;
  left: auto;
  min-width: 180px;
  transform: translateX(0) translateY(10px);
}
article.calculatorHorizontal section.productsPanel2 > div.pColQuantity > span.ptooltip > div.tooltip-content::after {
  right: 10px;
  left: auto;
  transform: translateX(0) translateY(1px);
}
article.calculatorHorizontal section.productsPanel2 > section {
  display: contents;
}
article.calculatorHorizontal section.productsPanel2 > section > div {
  display: contents;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div {
  display: flex;
  align-items: center;
  grid-row: var(--current-row)/span 1;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColSize {
  justify-content: center;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColPrice {
  font-weight: bold;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw.fields-0 > div {
  margin: 0 0 0 auto;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div {
  display: flex;
  gap: 2rem;
  margin: 0 auto;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator {
  max-width: unset;
  height: auto;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator > div.swiper-wrapper {
  justify-content: flex-end;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator > div.swiper-wrapper > div.swiper-slide {
  color: #000;
  height: 20px;
  font-size: 0.625rem;
}
@media only screen and (min-width: 768px) {
  article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator > div.swiper-wrapper > div.swiper-slide {
    height: 38px;
    font-size: 0.8125rem;
  }
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > div.swiper-items-calculator > div.swiper-wrapper > div.swiper-slide.checked {
  color: #fff;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColDw > div > input[type=text] {
  width: 50px;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColQuantity > input[type=text] {
  margin: 0;
  font-size: inherit;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColQuantity > input[type=text]:disabled {
  background: #f5f5f5;
  color: #474747;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColClear {
  grid-column: 8/span 1;
  justify-content: center;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pColClear > a {
  color: #000;
}
article.calculatorHorizontal section.productsPanel2 > section > div > div.pLine {
  width: 100%;
  height: 1px;
  grid-column: 1/span 8;
  background: #cdcdcd;
  transform: translateY(-3px);
}
#productCalculator > article > section > section:nth-of-type(1) > div > div.pLine {
  background: #a9a9a9;
}

article.calculatorHorizontal section.productsPanel2 > div.loader {
  top: 40px;
  left: 0;
  height: calc(100% - 40px);
  z-index: 3;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#orderDetailsView {
  height: 100vh;
  grid-template-rows: 50px calc(100dvh - 50px - 55px) 55px;
  overflow: hidden;
  --toggle-menu-btn-square-size: 40px;
}
#orderDetailsView > div.orderDetailsViewMainSectionWrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px auto;
  grid-template-areas: "progress" "preview";
  background: #666666;
  position: relative;
}
@media only screen and (min-width: 768px) {
  #orderDetailsView > div.orderDetailsViewMainSectionWrapper {
    grid-template-columns: minmax(200px, 2fr) 10fr;
    grid-template-areas: "menu progress" "menu preview";
  }
}
#orderDetailsView > div.orderDetailsViewMainSectionWrapper button.toggleMenuBtn {
  position: relative;
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  width: var(--toggle-menu-btn-square-size);
  height: var(--toggle-menu-btn-square-size);
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  background: #333;
  color: #fff;
  font-size: 1.5rem;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  #orderDetailsView > div.orderDetailsViewMainSectionWrapper button.toggleMenuBtn {
    display: none;
  }
}
#orderDetailsView > div.orderDetailsViewMainSectionWrapper button.toggleMenuBtn i {
  font-size: small;
}
#orderDetailsView > div.orderDetailsViewMainSectionWrapper order-view-menu {
  grid-area: menu;
  background: #333;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  z-index: 1000000;
  transition: transform 300ms ease-in-out;
  width: 75%;
}
@media only screen and (min-width: 768px) {
  #orderDetailsView > div.orderDetailsViewMainSectionWrapper order-view-menu {
    position: static;
    width: auto;
    transform: translateX(0);
  }
}
#orderDetailsView > div.orderDetailsViewMainSectionWrapper order-view-menu.menuIsOpen {
  transform: translateX(0);
  transition: transform 300ms ease-in-out;
}
#orderDetailsView > div.orderDetailsViewMainSectionWrapper order-view-progress {
  grid-area: progress;
  margin-top: calc(var(--toggle-menu-btn-square-size) / 2);
}
#orderDetailsView > div.orderDetailsViewMainSectionWrapper order-view-pdf-preview {
  grid-area: preview;
}

/* === DEBUG ================================================================ */
pre {
  font-size: 11px !important;
  background-color: rgba(255, 255, 255, 0.5);
  color: #333;
}

/* === DEBUG INFO =========================================================== */
#debugInfo {
  z-index: 1001;
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  height: 400px;
  background-color: #fff;
  border: 2px solid #333;
  padding: 5px;
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
  text-align: center;
}
#debugInfo h1 {
  font-size: 15px;
}
#debugInfo textarea {
  width: 100%;
  font-size: 10px;
  height: 300px;
  margin-bottom: 10px;
  padding: 5px;
}
#debugInfo a {
  margin: 5px;
  color: #00cccc;
}

@keyframes miniatureAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.tooltip {
  position: relative;
}
.tooltip:hover:after {
  content: attr(data-title);
  position: absolute;
  top: 0;
  left: -170px;
  display: block;
  background-color: #000;
  font-size: 14px;
  color: #fff;
  width: 150px;
  height: 35px;
  line-height: 25px;
  padding: 5px 15px;
  text-align: left;
  font-style: normal;
  border-radius: 5px;
}
.tooltip:hover:before {
  content: "";
  background-color: #000;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  position: absolute;
  top: 12px;
  left: -25px;
  z-index: 3;
}

html.pendingRequests .ordersTableBody {
  cursor: wait !important;
}
html.pendingRequests .ordersTableBody > * {
  pointer-events: none;
}
html.pendingRequests #newOrderButton {
  pointer-events: none;
}

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
body.debugMode:after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: red;
  position: absolute;
  top: 5px;
  left: 5px;
  pointer-events: none;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.deepLinkLabel {
  color: #009d4e;
  align-self: center;
}