:root {
    --doc-height: 100%;
    --sponser-font-sans-serif: 'Open Sans', sans-serif, system-ui, -apple-system;
    --base-font-size: 16px;
    --base-font-weight: 400;
    --line-height: 1.5;
    --sponser-bg: #eaeef7;
    --sponser-bg-darker: #DBE2F1;
    --sponser-bg-lighter: #F0F3F9;
    --sponser-bg-xlighter: #F8F9FC;
    --sponser-sidebar-bg: #FDFEFF;
    --sponser-black: #272d3d;
    --sponser-text: #3E3158;
    --sponser-white: #FDFEFF;
    --sponser-white-bg: #FDFEFF;
    --sponser-purple: #6932d4;
    --sponser-purple-lighter: #F6F7FF;
    --sponser-purple-extra-lighter: #eaeef7;
    --sponser-purple-light: #8c4bff;
    --sponser-purple-soft: #E8ECFF;
    --sponser-purple-dark: #51289b;
    --sponser-purple-darker: #382979;
    /**/
    --sponser-purple-pastel-bg: #f6f7fe;
    --sponser-purple-pastel-border: #ccccfc;
    --sponser-purple-pastel-shadow: 0 10px 20px 0 rgb(126 108 238 / 10%);
    /**/
    --sponser-orange: #FA8C05;
    --sponser-orange-dark: #d05a00;
    --sponser-gray-light: #f0f2f5;
    --sponser-gray-dark: #E4E6EB;
    --sponser-gray-darker: #E1E7F3;
    --sponser-pink: #ea1e63;
    --sponser-green: #008456;
    --sponser-red: #ec3d7c;


    --headerHeight: 62px;
    --fluid-min-width: 320;
    --fluid-max-width: 768;
    --f-0-min: 16.00;
    --f-0-max: 18.00;
    --fluid-screen: 100vw;
    --fluid-bp: calc(
            (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
            (var(--fluid-max-width) - var(--fluid-min-width))
    );
    --step-0: calc(
            ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
            var(--fluid-bp)
    );
    --switch-size: 1rem;
    --switch-border-width: 0.1235rem;
    --switch-border-inner-radius: calc(var(--switch-size) / 2);
    --switch-border-outer-radius: calc(
            var(--switch-border-inner-radius) +
            var(--switch-border-width)
    );
}

/*[data-theme="data-dark-mode"] {

    --sponser-bg: #202324;
    --sponser-bg-darker: #26292b;
    --sponser-bg-lighter: #1e2022;
    --sponser-bg-xlighter: #1b1d1e;
    --sponser-bg-xlighter-alt: #F8F9FC;

    --sponser-gray-light: #1f2223;
    --sponser-gray-dark: #25282a;
    --sponser-gray-darker: #242728;
    --sponser-text: #dedee3;
    --sponser-black: #1f2431;

    --sponser-white: #dedee3;
    --sponser-white-alt: #d3d3d9;
    --sponser-white-bg: #191b1c;
    --sponser-purple: #9147ff;
    --sponser-purple-lighter: #1b1d1e;
    --sponser-purple-light: #39009f;
    --sponser-purple-soft: #1e2122;
    --sponser-purple-dark: #41207c;
    --sponser-purple-darker: #2d2161;

    --sponser-purple-pastel-bg: #1b1d1e;
    --sponser-purple-pastel-border: #272b2c;
    --sponser-purple-pastel-shadow: 0 1px 4px 0 rgb(126 108 238 / 10%);

    --stockmonkey-chart-border: #9eb5c5;

    --forum-msg-border: #c7c2bb;
    --forum-msg-border: #3f4447;
    --forum-card-hover: #464c4f;
    --forum-title-bg: #282c2d;
    --forum-comment-bg: #1f2223;
    --forum-body-width: 100%;
    --forum-tag-bg: #202324;
    --forum-tag-border: rgba(74, 57, 132, 0.2);
    --forum-section-bg: #6653a5;
    --sponser-purple-darkmode: #d6a6ff;
    --forum-msg-title: #e8e6e3;
    --forum-msg-title-visited: #651FFF;
    --forum-sidebar-margin: 20rem;
    --sponser-orange: #fb981e;

    --sponser-orange-light: #411b00;
    --sponser-orange-border: #8c3700;
    --sponser-orange-dark: #ff8f3a;
    --sponser-pink: #ec3371;


    --sponser-green: #70ffcd;
    --sponser-red: #ea1e63;
    --twitter: #0b76b8;
    --facebook: #0b57bb;

    --whatsapp: #1ea952;

    .toggle-theme-container {

        .light {
            display: none;
        }

        .dark {
            display: block;
        }
    }
}*/

@media screen and (prefers-color-scheme: dark) {
    :root {
        --sponser-bg: #202324;
        --sponser-bg-darker: #26292b;
        --sponser-bg-lighter: #1e2022;
        --sponser-bg-xlighter: #1b1d1e;
        --sponser-bg-xlighter-alt: #F8F9FC;

        --sponser-gray-light: #1f2223;
        --sponser-gray-dark: #25282a;
        --sponser-gray-darker: #242728;
        --sponser-text: #dedee3;
        --sponser-black: #1f2431;

        --sponser-white: #dedee3;
        --sponser-white-alt: #d3d3d9;
        --sponser-white-bg: #191b1c;
        --sponser-purple: #9147ff;
        --sponser-purple-lighter: #1b1d1e;
        --sponser-purple-light: #39009f;
        --sponser-purple-soft: #1e2122;
        --sponser-purple-dark: #41207c;
        --sponser-purple-darker: #2d2161;

        --sponser-purple-pastel-bg: #1b1d1e;
        --sponser-purple-pastel-border: #272b2c;
        --sponser-purple-pastel-shadow: 0 1px 4px 0 rgb(126 108 238 / 10%);

        --stockmonkey-chart-border: #9eb5c5;

        --forum-msg-border: #c7c2bb;
        --forum-msg-border: #3f4447;
        --forum-card-hover: #464c4f;
        --forum-title-bg: #282c2d;
        --forum-comment-bg: #1f2223;
        --forum-body-width: 100%;
        --forum-tag-bg: #202324;
        --forum-tag-border: rgba(74, 57, 132, 0.2);
        --forum-section-bg: #6653a5;
        --sponser-purple-darkmode: #d6a6ff;
        --forum-msg-title: #e8e6e3;
        --forum-msg-title-visited: #651FFF;
        --forum-sidebar-margin: 20rem;
        --sponser-orange: #fb981e;

        --sponser-orange-light: #411b00;
        --sponser-orange-border: #8c3700;
        --sponser-orange-dark: #ff8f3a;
        --sponser-pink: #ec3371;

        --sponser-green: #70ffcd;
        --sponser-red: #ea1e63;
        --twitter: #0b76b8;
        --facebook: #0b57bb;
        --whatsapp: #1ea952;
    }

    .toggle-theme-container {
        .light {
            display: none;
        }

        .dark {
            display: block;
        }
    }
}


html {
    font-family: var(--sponser-font-sans-serif);
    /*font-size: var(--base-font-size);*/
    font-size: var(--step-0);
    font-weight: var(--base-font-weight);
    line-height: var(--line-height);
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
}


body {
    margin: 0;
    direction: rtl;
    color: var(--sponser-text) !important;
    background-color: var(--sponser-bg);
    font-weight: var(--base-font-weight);
    /*overscroll-behavior-y: none;*/
}

body,
html {
    height: 100vh; /* fallback for Js load */
    height: var(--doc-height);
}

*,
:after,
:before {
    box-sizing: inherit
}

a {
    transition: color .15s ease-in-out;
    -webkit-text-decoration-skip: objects;
    background-color: transparent;
    text-decoration: none;
    cursor: pointer;
}

a, a:visited {
    color: inherit;
    text-decoration: none;
}

blockquote,
body,
dd,
dl,
fieldset,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
legend,
ol,
p,
pre,
ul {
    margin: 0;
    padding: 0
}

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block
}

address {
    font-style: normal
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: var(--line-height);
    margin: 0;
    color: var(--sponser-text);
}

button {
    padding: 0;
    border: unset;
    background-color: unset;
    cursor: pointer;
    font-weight: inherit;
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style-type: none
}

li > ol,
li > ul {
    margin-bottom: 0
}

img {
    display: block;
    width: 100%;
    height: auto;
    border-style: none;
    object-fit: cover;
}

textarea {
    display: block;
    margin: 0;
    outline: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    margin: 0;
    background: var(--sponser-gray-light);
    z-index: 1;
    padding-bottom: max(0vmin, env(safe-area-inset-bottom)) !important;
    padding-top: .25rem;
}

.sticky-article-header {
    position: sticky;
    width: 100%;
    background: var(--sponser-white-bg);
    z-index: 10;
    top: var(--headerHeight);
}

.link, .link:visited {
    color: var(--sponser-text) !important;
}

.link:hover {
    color: var(--sponser-purple) !important;
}

.link-reverse, .link-reverse:visited {
    color: var(--sponser-purple) !important;
}

.link-reverse:hover {
    color: var(--sponser-text) !important;
}

.link.underline, .link-reverse.underline {
    text-decoration: underline;
}


p {
    margin-bottom: 0.75rem;
    color: var(--sponser-text);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: var(--sponser-text);
    font-weight: inherit;
}

h1 {
    font-size: 2.25rem
}

h2 {
    font-size: 1.75rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1.25rem
}

h5 {
    font-size: 1.125rem
}

h6 {
    font-size: 1rem
}

.s-h1 {
    font-size: 2.25rem !important;
    /*font-size: 10vw !important;*/
}

.s-h2 {
    font-size: 1.75rem !important;
    /*font-size: 8vw !important;*/
}

.s-h3 {
    font-size: 1.5rem !important;
    /*font-size: 7vw !important;*/
}

.s-h4 {
    font-size: 1.25rem !important;
    /*font-size: 6vw !important;*/
}

.s-h5 {
    font-size: 1.125rem !important;
    /*font-size: 5vw !important;*/
}

.s-h6 {
    font-size: 1rem !important;
    /*font-size: 4vw !important;*/
}

.s-h7 {
    font-size: .875rem !important;
}

.s-h8 {
    font-size: .675rem !important;
}

.text-left {
    text-align: left !important;
}


.s-bg {
    background-color: var(--sponser-bg) !important;
}

.s-bg-with-opacity {
    background: rgb(from var(--sponser-bg) r g b / 50%) !important;
}

.s-bg-lighter {
    background-color: var(--sponser-bg-lighter) !important;
}

.s-bg-xlighter {
    background-color: var(--sponser-bg-xlighter) !important;
}

.s-bg-darker {
    background-color: var(--sponser-bg-darker) !important;
}

.s-bg-soft {
    background-color: var(--sponser-purple-soft) !important;
}

.s-bg-pastel {
    background-color: var(--sponser-purple-pastel-bg) !important;
}

.s-bg-black {
    background-color: var(--sponser-black) !important;
}

.s-bg-purple {
    background-color: var(--sponser-purple) !important;
}

.s-bg-purple-dark {
    background-color: var(--sponser-purple-dark) !important;
}

.s-bg-purple-darker {
    background-color: var(--sponser-purple-darker) !important;
}

.s-bg-white {
    background-color: var(--sponser-white-bg) !important;
}

.s-bg {
    background-color: var(--sponser-bg) !important;
}

.s-bg-gray {
    background-color: var(--sponser-gray-dark) !important;
}

.s-bg-gray-dark {
    background-color: var(--sponser-gray-darker) !important;
}

.s-bg-gray-light {
    background-color: var(--sponser-gray-light) !important;
}

.s-text-white {
    color: var(--sponser-white) !important;
}

.s-text-primary {
    color: var(--sponser-text) !important;
}

.s-text-purple {
    color: var(--sponser-purple) !important;
}

.s-text-pink {
    color: var(--sponser-pink) !important;
}

.s-text-orange {
    color: var(--sponser-orange-dark) !important;
}

.s-text-pastel {
    color: var(--sponser-purple-pastel-border);
}

/* quote */
.quote {
    direction: ltr;
}

.quote.gain {
    color: var(--sponser-green);
}

.quote.loss {
    color: var(--sponser-red);
}


/* utils */
.hide {
    display: none !important;
}

.s-overflow-hidden {
    overflow: hidden;
}

.s-white-space-pre {
    white-space: pre;
}

.s-block {
    display: block;
}
.s-inline{
    display: inline;
}
.s-underline {
    text-decoration: underline;
}

.s-relative {
    position: relative;
}

.s-text-center {
    text-align: center;
}

.s-unit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.s-unit > div {
    padding-top: .125rem !important;
    padding-bottom: .125rem !important;
    /* padding: .625rem !important;
     margin: .625rem;*/
}

.s-unit > .gpt-slot::before {
    display: block;
    content: "פרסומת";
    position: relative;
    text-align: center;
    font-size: .75rem;
    opacity: .75;
    margin-bottom: 0.25rem;
}


/* switch */

input[type=checkbox].switch {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: content-box; /* default after appearance:none is border-box */
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: calc(var(--switch-size) * 2);
    height: var(--switch-size);
    background: var(--sponser-bg-darker);
    border: var(--switch-border-width) solid var(--sponser-bg-darker);
    border-radius: var(--switch-border-outer-radius);
    transition: background 0.3s;
}

input[type=checkbox].switch:before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: var(--switch-size);
    height: var(--switch-size);
    background: var(--sponser-white-bg);
    border-radius: var(--switch-border-inner-radius);
    transition: background 0.3s, right 0.3s;
}

input[type=checkbox].switch:checked {
    background: var(--sponser-purple);
    border-color: var(--sponser-purple);
}

input[type=checkbox].switch:checked:before {
    right: var(--switch-size);
    background: var(--sponser-white-bg);
}

/* buttons */

.s-btn-float {
    position: fixed;
    width: 2rem;
    height: 2rem;
    bottom: 1rem;
    right: .625rem;
    background-color: var(--sponser-pink);
    /*background-color: var(--sponser-purple-light);*/
    color: var(--sponser-white);
    border-radius: 50%;
    text-align: center;
    box-shadow: 2px 2px 3px var(--sponser-purple-pastel-border);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-btn-float i {
    font-size: 1.75rem;
}


.s-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    padding: 5px 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: .25rem;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

.s-btn svg {
    margin-right: 0.15rem;
    fill: currentColor;
}

.s-btn:hover {
    background-color: var(--sponser-white);
    -webkit-box-shadow: 0 1px 4px rgb(26 26 67 / 10%);
    box-shadow: 0 1px 4px rgb(26 26 67 / 10%);
}

.s-btn.s-btn-outline {
    border: solid 1px var(--sponser-text);
}

.s-btn.s-btn-white {
    background-color: var(--sponser-white-bg);
    border: 1px solid var(--sponser-text);
    color: var(--sponser-text);
}

.s-btn.s-btn-primary {
    background-color: var(--sponser-purple);
    color: var(--sponser-white);
    border: 1px solid var(--sponser-purple);
}

.s-btn.s-btn-secondery {
    background-color: var(--sponser-white);
    color: var(--sponser-orange);
}

.s-btn.rounded {
    border-radius: .35rem;
}


.s-btn.s-btn-gray {
    background-color: var(--sponser-gray-light);
    border: 1px solid var(--sponser-gray-darker);
}

.s-btn.s-btn-pink {
    background-color: var(--sponser-pink);
    color: var(--sponser-white);
}

.s-circle-icon {
    background: var(--sponser-gray-light);
    padding: 5px;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-circle-icon.purple {
    background-color: var(--sponser-purple-light);
    color: var(--sponser-white) !important;
}

.s-circle-icon.white {
    background-color: var(--sponser-white-bg);
    color: var(--sponser-purple) !important;
}

.s-circle-icon.soft {
    background-color: var(--sponser-bg-darker);
    color: var(--sponser-purple);
    /*border: solid 1px var(--sponser-sidebar-bg);*/
}

.s-circle-icon i {
    font-size: 1rem;
}

.has-loading-before:before {
    display: inline-block;
    position: relative;
    top: 0px;
    margin: 0 3px;
    color: var(--sponser-purple);
    opacity: 60%;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: "\f1ce";
    font-size: 2rem;
    vertical-align: middle;
    line-height: 1;
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.has-dot-before:before {
    display: inline-block;
    position: relative;
    top: 0px;
    margin: 0 3px;
    color: var(--sponser-text);
    opacity: 60%;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f111";
    font-size: 3px;
    vertical-align: middle;
    line-height: 1;
}

.has-dot-after:after {
    display: inline-block;
    position: relative;
    margin: 0 3px 0;
    color: var(--sponser-text);
    opacity: 60%;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f111";
    font-size: 3px;
    vertical-align: middle;
    line-height: 1;
}

.has-pipe-before:before {
    display: inline-block;
    position: relative;
    top: 0;
    margin: 0 3px;
    color: var(--sponser-text);
    opacity: 30%;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f068";
    font-size: 1rem;
    vertical-align: middle;
    transform: rotate(90deg) scaleX(-1);
    line-height: 1;
}

.has-pipe-after:after {
    display: inline-block;
    position: relative;
    top: 0px;
    margin: 0 3px;
    color: var(--sponser-text);
    opacity: 30%;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f068";
    font-size: 1rem;
    vertical-align: middle;
    transform: rotate(90deg) scaleX(-1);
    line-height: 1;
}

.s-flex {
    display: flex;
}

.s-flex-1 {
    flex: 1;
}

.s-flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.s-justify-between {
    justify-content: space-between;
}

.flex-start-between {
    display: flex;
    align-items: flex-start !important;;
    justify-content: space-between !important;;
}

.flex-center-between {
    display: flex;
    align-items: center !important;;
    justify-content: space-between !important;
}

.flex-center-start {
    display: flex;
    align-items: center !important;
    justify-content: flex-start !important;
}

.flex-center-end {
    display: flex;
    align-items: center !important;
    justify-content: flex-end !important;
}

.flex-center-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-stretch-between {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.flex-stretch-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.s-float-left {
    float: right !important
}

.s-float-right {
    float: left !important
}


.s-text-mute {
    color: #7f8fa4 !important
}


.s-clearfix:after {
    display: table !important;
    clear: both !important;
    content: "" !important
}


.s-col-2 {
    flex: 0 0 25% !important;
    margin: 0 !important;
    max-width: 30%;
}

.s-col-3 {
    flex: 0 0 33% !important;
    margin: 0 !important;
    max-width: 33%;
}

/* */

.inner-wrapper-sticky:after {
    display: table !important;
    clear: both !important;
    content: "" !important
}

.s-m-zero {
    margin: 0 !important
}

.s-mt-zero {
    margin-top: 0 !important
}

.s-mr-zero {
    margin-left: 0 !important
}

.s-mb-zero {
    margin-bottom: 0 !important
}

.s-ml-zero {
    margin-right: 0 !important
}

.s-mv-zero {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.s-mh-zero {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.s-m-auto {
    margin: auto !important
}

.s-mt-auto {
    margin-top: auto !important
}

.s-mr-auto {
    margin-left: auto !important
}

.s-mb-auto {
    margin-bottom: auto !important
}

.s-ml-auto {
    margin-right: auto !important
}

.s-mv-auto {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.s-mh-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.s-m-xs {
    margin: .625rem !important
}

.s-mt-xs {
    margin-top: .625rem !important
}

.s-mr-xs {
    margin-left: .625rem !important
}

.s-mr-xxs {
    margin-left: .5rem !important
}

.s-ml-xxs {
    margin-right: .5rem !important
}

.s-mr-tiny {
    margin-left: .125rem !important
}

.s-ml-tiny {
    margin-right: .125rem !important
}

.s-mb-tiny {
    margin-bottom: .125rem !important
}

.s-mt-tiny {
    margin-top: .125rem !important
}

.s-mt-xxs {
    margin-top: .5rem !important
}

.s-mb-xxs {
    margin-bottom: .5rem !important
}

.s-mb-xs {
    margin-bottom: .625rem !important
}

.s-ml-xs {
    margin-right: .625rem !important
}

.s-mv-xs {
    margin-top: .625rem !important;
    margin-bottom: .625rem !important
}

.s-mh-xs {
    margin-left: .625rem !important;
    margin-right: .625rem !important
}

.s-mv-xxs {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important
}

.s-mh-xxs {
    margin-left: .5rem !important;
    margin-right: .5rem !important;
}

.s-ph-xxs {
    padding-left: .5rem !important;
    padding-right: .5rem !important
}

.s-m-s {
    margin: .9375rem !important
}

.s-mt-s {
    margin-top: .9375rem !important
}

.s-mr-s {
    margin-left: .9375rem !important
}

.s-mb-s {
    margin-bottom: .9375rem !important
}

.s-ml-s {
    margin-right: .9375rem !important
}

.s-mv-s {
    margin-top: .9375rem !important;
    margin-bottom: .9375rem !important
}

.s-mh-s {
    margin-left: .9375rem !important;
    margin-right: .9375rem !important
}

.s-m-m {
    margin: 1.875rem !important
}

.s-mt-m {
    margin-top: 1.875rem !important
}

.s-mr-m {
    margin-left: 1.875rem !important
}

.s-mb-m {
    margin-bottom: 1.875rem !important
}

.s-ml-m {
    margin-right: 1.875rem !important
}

.s-mv-m {
    margin-top: 1.875rem !important;
    margin-bottom: 1.875rem !important
}

.s-mh-m {
    margin-left: 1.875rem !important;
    margin-right: 1.875rem !important
}

.s-m-large {
    margin: 3.125rem !important
}

.s-mt-l {
    margin-top: 3.125rem !important
}

.s-mr-l {
    margin-left: 3.125rem !important
}

.s-mb-l {
    margin-bottom: 3.125rem !important
}

.s-ml-l {
    margin-right: 3.125rem !important
}

.s-mv-l {
    margin-top: 3.125rem !important;
    margin-bottom: 3.125rem !important
}

.s-mh-l {
    margin-left: 3.125rem !important;
    margin-right: 3.125rem !important
}

.s-m-xl {
    margin: 6.25rem !important
}

.s-mt-xl {
    margin-top: 6.25rem !important
}

.s-mr-xl {
    margin-left: 6.25rem !important
}

.s-mb-xl {
    margin-bottom: 6.25rem !important
}

.s-ml-xl {
    margin-right: 6.25rem !important
}

.s-mv-xl {
    margin-top: 6.25rem !important;
    margin-bottom: 6.25rem !important
}

.s-mh-xl {
    margin-left: 6.25rem !important;
    margin-right: 6.25rem !important
}

.s-p-zero {
    padding: 0 !important
}

.s-pt-zero {
    padding-top: 0 !important
}

.s-pr-zero {
    padding-left: 0 !important
}

.s-pb-zero {
    padding-bottom: 0 !important
}

.s-pl-zero {
    padding-right: 0 !important
}

.s-pv-zero {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

.s-ph-zero {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.s-ph-tiny {
    padding-left: .125rem !important;
    padding-right: .125rem !important
}

.s-p-tiny {
    padding: .125rem !important;
}

.s-p-xxs {
    padding: .5rem !important
}

.s-pv-xxs {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.s-pv-tiny {
    padding-top: .125rem !important;
    padding-bottom: .125rem !important
}


.s-ph-xxs {
    padding-left: .5rem !important;
    padding-right: .5rem !important
}

.s-ph-xs {
    padding-left: .625rem !important;
    padding-right: .625rem !important;
}

.s-p-xs {
    padding: .625rem !important
}

.s-pt-xs {
    padding-top: .5rem !important
}

.s-pt-xxs {
    padding-top: .625rem !important
}

.s-pt-tiny {
    padding-top: .125rem !important;
}

.s-pr-xs {
    padding-left: .625rem !important
}

.s-pr-xxs {
    padding-left: .5rem !important
}

.s-pl-xxs {
    padding-right: .5rem !important
}

.s-pb-xs {
    padding-bottom: .625rem !important
}

.s-pb-xxs {
    padding-bottom: .5rem !important
}

.s-pb-tiny {
    padding-top: .125rem !important;
}

.s-pl-xs {
    padding-right: .625rem !important
}

.s-pv-xs {
    padding-top: .625rem !important;
    padding-bottom: .625rem !important
}

.s-ph-auto {
    padding-left: .625rem !important;
    padding-right: .625rem !important
}

.s-p-s {
    padding: .9375rem !important
}

.s-pt-s {
    padding-top: .9375rem !important
}

.s-pr-s {
    padding-left: .9375rem !important
}

.s-pb-s {
    padding-bottom: .9375rem !important
}

.s-pl-s {
    padding-right: .9375rem !important
}

.s-pv-s {
    padding-top: .9375rem !important;
    padding-bottom: .9375rem !important
}

.s-ph-s {
    padding-left: .9375rem !important;
    padding-right: .9375rem !important
}

.s-p-m {
    padding: 1.875rem !important
}

.s-pt-m {
    padding-top: 1.875rem !important
}

.s-pr-m {
    padding-left: 1.875rem !important
}

.s-pb-m {
    padding-bottom: 1.875rem !important
}

.s-pl-m {
    padding-right: 1.875rem !important
}

.s-pv-m {
    padding-top: 1.875rem !important;
    padding-bottom: 1.875rem !important
}

.s-ph-m {
    padding-left: 1.875rem !important;
    padding-right: 1.875rem !important
}

.s-p-l {
    padding: 3.125rem !important
}

.s-pt-l {
    padding-top: 3.125rem !important
}

.s-pr-l {
    padding-left: 3.125rem !important
}

.s-pb-l {
    padding-bottom: 3.125rem !important
}

.s-pl-l {
    padding-right: 3.125rem !important
}

.s-pv-l {
    padding-top: 3.125rem !important;
    padding-bottom: 3.125rem !important
}

.s-ph-l {
    padding-left: 3.125rem !important;
    padding-right: 3.125rem !important
}

.s-p-xl {
    padding: 6.25rem !important
}

.s-pt-xl {
    padding-top: 6.25rem !important
}

.s-pr-xl {
    padding-left: 6.25rem !important
}

.s-pb-xl {
    padding-bottom: 6.25rem !important
}

.s-pl-xl {
    padding-right: 6.25rem !important
}

.s-pv-xl {
    padding-top: 6.25rem !important;
    padding-bottom: 6.25rem !important
}

.s-ph-xl {
    padding-left: 6.25rem !important;
    padding-right: 6.25rem !important
}

.s-line-1 {
    line-height: 1 !important;
}

.s-text-tiny {
    font-size: .625rem !important
}

.s-text-xxs {
    font-size: .70rem !important
}

.s-text-xs {
    font-size: .75rem !important
}

.s-text-s {
    font-size: .875rem !important
}

.s-text-m {
    font-size: 0.95rem !important
}

.s-text-l {
    font-size: 1rem !important
}

.s-text-xl {
    font-size: 1.25rem !important
}

.s-text-b {
    font-weight: 700 !important
}

.s-text-xb {
    font-weight: 800 !important
}

.s-text-r {
    font-weight: 400 !important
}

.s-text-n {
    font-weight: 300 !important
}

.s-text-mute {
    opacity: 75%;
}

.s-width-100 {
    width: 100%;
}

.s-height-full {
    height: 100vh;
}

.s-border-zero {
    border: 0;
}

.s-border {
    border: 1px solid var(--sponser-purple-soft);
}

.s-border-top {
    border-top: 1px solid var(--sponser-purple-soft);
}

.s-border-right {
    border-right: 1px solid var(--sponser-purple-soft);
}

.s-border-bottom {
    border-bottom: 1px solid var(--sponser-purple-soft);
}

.s-border-left {
    border-left: 1px solid var(--sponser-purple-soft);
}

.rounded-zero {
    border-radius: 0 !important;

}

.rounded {
    border-radius: 12px;
    overflow: hidden;
}

.rounded-xs {
    border-radius: 5px !important;
}

.rounded-s {
    border-radius: 8px !important;
}

.rounded-sm {
    border-radius: 10px !important;
}

.rounded-m {
    border-radius: 15px !important;
}

.rounded-l {
    border-radius: 30px !important;
}

.rounded-xl {
    border-radius: 50px !important;
}

.bg-facebook {
    background-color: #3b5998 !important;
    color: #FFF;
}

.bg-twitter {
    background-color: #4099ff !important;
    color: #FFF;
}

.with-shadow {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* cards */

.s-card {
    padding: .625rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.s-card.soft {
    background-color: var(--sponser-purple-pastel-bg);
}

.s-card.soft.with-border {
    border: solid 1px var(--sponser-purple-pastel-border);

}

.s-card.soft.with-shadow {

    box-shadow: var(--sponser-purple-pastel-shadow);
}


/* badge and pills */


.s-badge, .s-pills {

    padding: clamp(0.25rem, 0.25rem, 0.5rem) 0.5rem;
    font-size: 80%;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
    border-radius: .8rem;
    -webkit-border-radius: .8rem;
    -moz-border-radius: .8rem;
    overflow: hidden;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.s-badge-small, .s-pills-small {
    font-size: .75rem;
}

.s-badge-primary, .s-badge-primary {
    background: var(--sponser-purple-soft);
    color: var(--sponser-bg, #f2f4ff);
}

.s-badge-secondary, .s-pills-secondary {
    background-color: #fef6f4;
    color: #d05a00;
}

.s-pills-secondary:hover {
    /* background-color: #d05a00;*/
    color: #d05a00 !important;
}


/* Menu System  */


.menu-title h1 {
    font-size: 23px;
    font-weight: 700;
    padding: 20px 20px 3px 0;
}

.menu-title p {
    font-size: 11px;
    margin: -15px 20px 10px 0;
    padding: 0;
}

.menu-items li {
    margin-bottom: 1rem;
    flex: 1;
}

.menu-items > li > a {
    font-size: 1.125rem;
}

.menu-items > li > details {
    border-bottom: 1px solid var(--sponser-purple-soft);
}

.menu-items > li > details summary {
    display: block;
    cursor: pointer;
    margin-bottom: .5rem;
}

.menu-items > li > details summary h6 {
    font-weight: 700;
}

.menu-items li.with-divider {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px var(--sponser-purple-pastel-border);
}

.s-details > details > summary:before {
}

.s-details > details > details[open] > summary::before {
    content: "- ";
}

.s-details > details > summary:first-of-type {
    list-style: none;
}

.s-details > details > ul > li a {
    display: flex;
    align-items: center;
}

.s-details > details > ul > li > a > i {
    font-size: .5rem;
    margin-left: .25rem;
    color: var(--sponser-purple-light);
}

.s-details > details[open] .summary-chevron {
    transform: rotate(180deg);
}

.s-details > details > details summary::-webkit-details-marker {
    display: none;
}

.s-details > details > ul {
    margin-right: .5rem;
}

/* collapse-list */
.s-collapse-list.expand-list {
    margin: 0;
    padding: 0;
}

.s-collapse-list.expand-list > li {
    list-style-type: none;
    /* padding-bottom: .75rem;*/
    border-bottom: 1px solid var(--sponser-purple-soft);
    position: relative;
}

.s-collapse-list label[class^="tab"]:hover {
    cursor: pointer;
}

.s-collapse-list input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.s-collapse-list input[class^="tab"] {
    width: 100%;
    height: calc(var(--line-height) * var(--base-font-size));
    position: absolute;
    right: 0;
    top: 0;
}

.s-collapse-list input[class^="tab"]:hover {
    cursor: pointer;
}

.s-collapse-list label[class^="tab"] {
    font-weight: 700;
    font-size: 1.125rem;
}

.s-collapse-list .content {
    height: auto;
    max-height: 0;
    overflow: auto;
    transform: translateY(20px);
    transition: all 180ms ease-in-out 0ms;
}

.s-collapse-list li[data-collapse-content=""] input[class^="tab"]:checked ~ .content {
    max-height: 100%;
    max-height: fit-content;
    transition: all 250ms ease-in-out 0ms;
}

.s-collapse-list input[class^="tab"]:checked ~ .content {
    margin-bottom: .5rem !important;
}

.s-collapse-list .open-close-icon {
    display: inline-block;
    position: absolute;
    left: 0;
    transform: translatey(.25rem);
}

.s-collapse-list .open-close-icon i {
    position: absolute;
    left: 0;
}

.s-collapse-list .content li > a {
    width: 100%;
}

.s-collapse-list .content li i {
    margin-right: .125rem;
}

.s-collapse-list .open-close-icon .flaticon-minus {
    transform: rotate(-90deg);
    transition: transform 150ms ease-in-out 0ms;
}

.s-collapse-list input[class^="tab"]:checked ~ .open-close-icon .flaticon-minus {
    transform: rotate(0deg);
    transition: transform 150ms ease-in-out 0ms;
}

.s-collapse-list .open-close-icon .flaticon-plus {
    opacity: 1;
    transform: rotate(-90deg);
    transition: opacity 50ms linear 0ms, transform 150ms ease-in-out 0ms;
}

.s-collapse-list input[class^="tab"]:checked ~ .open-close-icon .flaticon-plus {
    opacity: 0;
    transform: rotate(0deg);
    transition: opacity 50ms linear 0ms, transform 150ms ease-in-out 0ms;
}


.menu-title a {
    font-size: 20px;
    color: #dc3545;
    position: absolute;
    text-align: center;
    width: 55px;
    line-height: 85px;
    left: 0;
    top: 0;
}

.sidebar-menu-bg {
    background-color: var(--sponser-sidebar-bg);
}

.sidebar-notifications-bg {
    background-color: var(--sponser-bg);
}

.sidebar-forum-bg {
    background-color: var(--sponser-white-bg);
}

.menu-box-modal-bg {
    background-color: var(--sponser-bg);
}

.menu-box-bottom.menu-active {
    transform: translate(0, 0) !important;
}

.menu-box-right[data-menu-effect=menu-reveal] {
    opacity: 0;
    pointer-events: none;
    transform: translate(0px) !important;
    z-index: 100;
}

.menu-bg {
    background-color: var(--sponser-white-bg);
}

.menu-hider {
    position: fixed;
    top: -100px;
    bottom: -100px;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: all 350ms ease;
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(2px);
    background-blend-mode: overlay;
    filter: blur(2px);
    -webkit-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.menu {
    display: none;
    position: fixed;
    /*background-color: rgba(55, 65, 81, 1);*/
    z-index: 101;
    overflow: scroll;
    transition: all 350ms ease;
    /*-webkit-overflow-scrolling: touch;*/
    overscroll-behavior: contain
}

.menu .content {
    margin-bottom: 0 !important;
}

.menu-box-left {
    left: 0;
    top: 0 !important;
    top: env(safe-area-inset-top) !important;
    width: 250px;
    height: 100%;
    bottom: 0;
    box-shadow: 0 15px 25px 1px rgba(0, 0, 0, 0.1);
    transform: translate3d(-100%, 0, 0);
}

.menu-box-right {
    right: 0;
    transform: translateX(100%);
    top: 0 !important;
    top: env(safe-area-inset-top) !important;
    height: 100%;
    bottom: 0;
    width: 250px;
}

.menu-box-top {
    transform: translate3d(0, -115%, 0);
    top: 0;
    left: 0;
    right: 0;
    height: auto;
}

.menu-box-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    transform: translate3d(0, 110%, 0);
}

.menu-box-modal {
    top: 50%;
    left: 50%;
    width: 330px;
    max-height: 480px;
    transform: translate(-50%, -50%) scale(0, 0);
    opacity: 0;
    pointer-events: none;
    transition: all 350ms ease;
}

.menu-box-modal-full {
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
}

.menu-box-detached, .menu-box-modal {
    border-radius: .5rem;
}

.menu-box-top.menu-box-detached {
    top: 10px;
    left: 10px;
    right: 10px;
}

.menu-box-bottom.menu-box-detached {
    bottom: 20px;
    left: 10px;
    right: 10px;
}

.menu-box-left.menu-active {
    transform: translate3d(0%, 0, 0) !important;
}

.menu-box-right.menu-active {
    transform: translate3d(0%, 0, 0) !important;
}

.menu-box-top.menu-active {
    transform: translate3d(0%, 0, 0) !important;
}

.is-on-homescreen .menu-box-top.menu-active {
    transform: translate3d(0%, 40px, 0) !important;
}

.menu-box-bottom.menu-active {
    transform: translate3d(0%, 0, 0) !important;
}

.menu-box-modal.menu-active {
    transition: all 350ms ease;
    pointer-events: all !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1, 1);
}

.menu-box-modal.menu-box-modal-full {
    max-height: 100%;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: translate(0%, 0%);
}

.menu-hider.menu-active {
    transition: all 350ms ease;
    opacity: 1;
    pointer-events: all;
}

.menu-hider.menu-active.menu-active-clear {
    background-color: rgba(0, 0, 0, 0) !important;
}

.menu-box-left[data-menu-effect=menu-reveal] {
    opacity: 0;
    pointer-events: none;
    transform: translate(0px) !important;
    z-index: 96;
}

.menu-box-right[data-menu-effect=menu-reveal] {
    opacity: 0;
    pointer-events: none;
    transform: translate(0px) !important;
    z-index: 96;
}

.menu-active.menu {
    opacity: 1 !important;
    transition: all 350ms ease;
    pointer-events: all !important;
}

/* page header */
.header, .header-menu {
    height: 62px;
    z-index: 99;
    transition: all 350ms ease;
    position: sticky;
    top: 0;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 62px;
    height: calc(62px + (env(safe-area-inset-top)) * 0.8) !important;
    z-index: 99;
    -webkit-transform: translateZ(0);
    transition: all 350ms ease;
}

.header .sponser-nav, .header-menu .sponser-nav {
    display: flex;
    width: 100%;
    height: var(--headerHeight);
    margin: 0 auto;
    background: var(--sponser-purple-darker);
    justify-content: space-between;
    align-items: center;
    /* border-bottom: solid 1px var(--sponser-text);*/
}

.header-menu .sponser-nav {
    color: var(--sponser-white);
}

.badge-num {
    background: var(--sponser-pink);
    border-radius: 50%;
    font-weight: 700;
    font-size: .75rem;
    height: 1.5rem;
    line-height: 1.5rem;
    top: -5px;
    left: 12px;
    border: 2px solid var(--sponser-purple-darker);
    position: absolute;
    text-align: center;
    min-width: 1.5rem;
    /* box-shadow: 1px 1px 5px rgb(0 0 0 / 20%); */
    animation: pulse 1.5s 1;
    /* padding: 0 0.25rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 1.5s 1;
}

.pushUser {
    display: block;
    color: var(--sponser-orange-dark);
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(.9);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}


#forum-show-msg {
    padding-bottom: 5rem;
}

#forum-show-msg .header-icon {
    color: var(--sponser-white);
    fill: var(--sponser-white);
}

#forum-show-msg .header-menu {
    position: sticky !important;
    top: 0;
}

#forum-show-msg .header-menu svg {
    width: 2rem;
}

#forum-show-msg .sponser-nav {
    background-color: var(--sponser-purple-darker);
    border-bottom: solid 1px var(--sponser-gray-dark);
}


.sponser-nav .header-logo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 170px;
    z-index: 1;
    font-size: 1rem;
    line-height: 1;
    color: var(--sponser-white);
}

.sponser-nav .header-logo svg {
    fill: var(--sponser-white);
    min-width: 130px;
    max-width: 200px;
    width: 50%;
}


.sponser-nav ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .9375rem;
}

.sponser-nav .header-icon {
    /*position: absolute;*/
    height: 50px;
    width: 50px;
    text-align: center;
    font-size: 1.2rem;
    color: var(--sponser-white);
    border: none;
    -webkit-appearance: none;
    appearance: none;
}

.sponser-nav .header-icon-svg {
    text-align: center;
    font-size: 1.2rem;
    color: var(--sponser-white);
    border: none;
    -webkit-appearance: none;
    appearance: none;
}

.sponser-nav .header-icon .stack-icon {
    position: absolute;
    top: 0.1rem;
    right: 0.27rem;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
}

.stack-icon {
    position: absolute;
    top: 0.1rem;
    right: 0.27rem;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
}

.circle {
    border-radius: 100%;
    text-align: center;
    transition-property: all;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--sponser-white-bg);
    width: 3.75rem;
    height: 3.75rem;
    color: var(--sponser-purple);
}

.sponser-nav .circle {
    border-radius: 100%;
    text-align: center;
    transition-property: all;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--sponser-white-bg);
    width: 1.75rem;
    height: 1.75rem;
    color: var(--sponser-purple);
}

.sponser-nav .circle svg {
    fill: var(--sponser-purple);
    width: 1.75rem;
    height: 1.75rem;
}

.header-clear {
    padding-top: var(--headerHeight);
    padding-top: calc(var(--headerHeight) + (env(safe-area-inset-top)) * 0.8) !important;
}

/* page footer */
footer.page-footer {
    padding-bottom: 100px !important;
}

footer.page-footer .scroll-top {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--sponser-text);
}

/* skira */
.skira-item:not(:first-child) {
    /* margin-top: 2rem;
     margin-top: 1rem;*/
}

.skira-item:not(:last-child) {
    border-bottom: .8rem solid var(--sponser-bg);
    padding-bottom: 1rem;
}

.skira-item:only-child {
    padding-bottom: .625rem;

}

.skira-item:first-child {
    padding-top: .625rem;
}


/* article cards */

.article-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.article-card > figure img {
    /*aspect-ratio: 16/9;*/
}

.article-card.horizontal > figure {

}

.article-card.horizontal {
    flex-direction: row;
}

.article-card.horizontal > figure {
    flex: 3;
}

.article-card.horizontal > figure img {
    aspect-ratio: 4/3;
    height: 100%;
}

.article-card.horizontal > .article-body {
    flex: 5;
}

.article-card .article-body > p > a {
    color: var(--sponser-orange-dark);
}

.article-card .article-body iframe {
    width: 100% !important;
    /*height: 100% !important;*/
    /*aspect-ratio: 16/9;*/
}


.article-card .article-image-credit {
    padding: .15rem .9375rem;
    font-size: .675rem;
    background-color: var(--sponser-purple-soft);
}

.article-card .article-image-credit ul {
    flex-wrap: wrap;
}

.article-card .article-body {
    background-color: var(--sponser-white-bg);
    padding: .5rem .625rem 0;
}

.article-card.blur .article-body {
    bottom: 0;
    position: absolute;
    padding: .5rem .625rem 0;
    background-color: transparent;
    color: var(--sponser-white);
    text-shadow: 0 2px 3px rgb(0 0 0 / 30%);
}

.article-card.blur {
    position: relative;
}

.article-card.blur:before {
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.3;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);
}

.article-card.blur > figure img {
    aspect-ratio: 4/3;
}

.article-card .article-body > header.highlight > a {
    font-size: 1.15rem;
    font-weight: bold;
}

.article-card .article-body header.normal > a {
    margin-bottom: var(--base-font-size);
}

.article-card .article-body br {
    content: ' ';
    display: block;
    margin-bottom: 1rem;
}

.article-card .card-tag {
    color: var(--sponser-purple);
    font-weight: 700;
    font-size: .785rem;
}

.article-card > .article-body > .card-tag > a {
    text-decoration: none !important;
    border-bottom: none !important;
}

.article-card.horizontal header.margin-bottom {
    margin-bottom: calc(var(--line-height) * var(--base-font-size));
}

.margin-bottom {
    margin-bottom: calc(var(--line-height) * var(--base-font-size));
}

.article-body.full-article p {
    font-size: 1.125rem !important;
}

.article-body p {
    font-size: 1rem !important;
}

.article-card p {
    font-size: 1rem;
}

.article-card.blur .article-container-meta {
    opacity: 1;
}

.article-container-meta {
    opacity: .75;
    line-height: 1;
    font-size: .8rem;
    margin-bottom: 0.5rem;
}

.article-container-meta time ul > li {
    display: flex;
    align-items: center;
}

.article-container-meta ul > li:not(:last-child) {
    margin-left: 1rem;
}

.article-container-meta ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.article-card.blur .article-container-meta .comments {
    color: var(--sponser-white);
    font-weight: 700;
    font-size: 90%;
}

.article-container-meta .comments {
    color: var(--sponser-text);
    font-size: 90%;
}

.article-card.blur .article-container-meta i {
    margin-right: .25rem;
    color: var(--sponser-white);
}

.article-container-meta i {
    margin-right: .25rem;
    color: var(--sponser-text);
}

.article-container-meta svg {
    width: 13px;
    height: 13px;
    margin-right: .25rem;
    fill: currentColor;
}

.article-container-meta li.comments {
    max-width: 38px;
    align-self: flex-start;
}

.article-container-meta address {
    font-weight: 400;
}

.article-container-meta time {
    font-size: 90%;
}

.article-container-meta time:before {
    position: relative;
    content: "|";
    margin: 0 .2rem;
}

.article-container {
    width: 100%;
}

.article-container figure {
    position: relative;
}

.article-card .article-section-header {
    position: relative;
    margin-bottom: 1rem;
}

.article-card .article-section-header:after {
    content: ' ';
    background-color: var(--sponser-bg-darker);
    height: 2px;
    width: 1.5rem;
    position: absolute;
    bottom: -.5rem;
}

.article-card .section-title > h2 {
    color: var(--sponser-text);
    font-size: .875rem;
    font-weight: 700;
}

.article-header-tag {
    color: var(--sponser-purple-dark) !important;
}

.article-header-tag.divider:before {
    position: relative;
    content: "|";
    margin: 0 0.2rem;
}

.article-container figure > a img {
    width: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: var(--sponser-purple-soft);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.article-container figure figcaption:not(.sponser-tv-tag) a {
    background: var(--sponser-purple-light);
    color: var(--sponser-white);
    font-weight: 400;
    padding: 3px 5px 2px;
    line-height: 1;
    font-size: .875rem;
}

.article-container figure figcaption {
    display: flex;
    position: absolute;
    bottom: 1px;
    right: 1px;
}

/*.article-tag a:not(.s-bg-black)::before {
    content: "#";
    position: relative;
    padding-left: .15rem;
    display: inline-block;
    font-weight: 300;
    top: 0px;
    font-size: 90%;
}*/

/*.article-container figure figcaption {
    display: flex;
    position: absolute;
    bottom: 1px;
    right: 1px;
}

.article-container figure figcaption a {
    background: var(--sponser-purple-light);
    color: #ffffff;
    font-weight: 300;
    padding: 2px 3px;
    line-height: 1;
    font-size: inherit;
}*/

.article-container > article {
}

.articles-row li {
    flex: 1;
    margin-left: .9375rem;
}

.articles-row li:last-child {
    margin-left: 0;
}

.articles-col {
    flex-direction: column;
}

.articles-col > li {
    flex: 1;
    margin-bottom: 1rem;
}

.articles-col > li:last-child {
    margin-bottom: 0;
}

/* hp forum widget */

.s-market-view {
    font-size: .75rem;
    padding-bottom: .625rem;
    margin-bottom: .625rem;
    position: relative;
}

.s-market-view:after {
    content: '';
    width: 33%;
    height: 2px;
    background-color: var(--sponser-bg-darker);
    position: absolute;
    bottom: 2px;
}

.s-widget {
}

.s-widget > header {
    width: 100%;
    z-index: 10;
    position: sticky;
    /*margin-bottom: 0.25rem;*/
    top: var(--headerHeight);
    background-color: var(--sponser-bg);
}

.s-widget > header > a {
    display: flex;
    font-weight: 800;
    color: var(--sponser-text);
}

.s-widget .icon {
    z-index: 1;
    top: 0.25rem;
    position: absolute;
    right: 0;
}

.s-widget.bg-soft {
    background-color: var(--sponser-purple-soft);
}

.s-widget.bg-white {
    background-color: var(--sponser-white-bg);
}

.s-widget > ul {
    display: flex;
    flex-direction: column;
    padding: .25rem 0;
}

.s-widget > ul > li {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.s-widget > ul > li:not(:last-child) {
    margin-bottom: .75rem;
}


.s-widget > ul > li.with-border:not(:last-child) {
    flex: 1;
    margin-bottom: .75rem;
    padding-bottom: .75rem;
    border-bottom: solid 1px var(--sponser-purple-soft);
}

.s-widget-item {
}

ul.list-divider > li:not(:last-child:not(.hide)) {
    margin-bottom: .75rem !important;
    padding-bottom: .75rem !important;
}

ul.list-divider.with-border > li:not(:last-child:not(.hide)) {
    border-bottom: solid 1px var(--sponser-purple-soft);
}

/* login form */
.login-form {
    display: flex;
    flex-direction: column;
}

.login-form .show-password > span {
    margin-right: .125rem;
    font-size: .875rem;
}

.login-btn {
    width: 100%;
    font-weight: 700;
}


.login-form .add-comment {
    display: flex;
    flex-direction: column;
    background: var(--sponser-white-bg);
    margin-bottom: 1.875rem;
    padding: 0.5rem;
    background: var(--sponser-purple-soft);
}

.login-form .add-comment footer .termsOfService {
    font-size: .675rem !important;
    margin-left: 1rem;
}

.login-form .add-comment footer ul {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
}

.login-form input, textarea {
    border: solid 1px var(--sponser-gray-dark);
    padding: .25rem .5rem;
}


.login-form .item-container {
    display: flex;
    justify-content: flex-start;
}

.login-form .comment-count {
    flex: 0 0 2rem;
    position: relative;
    width: 2rem;
    height: 2rem;
    margin-left: 1rem;
    border-radius: 100%;
    background-color: var(--sponser-purple-soft);
    color: var(--sponser-purple-darker);
    font-size: 1rem;
    line-height: 2rem;
    text-align: center;
}


.login-form .comment-content > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.comment-content .user-name {
    color: var(--sponser-text);
    font-size: .875rem;
    font-weight: 700;
    margin-left: .5rem;
    opacity: .7;
}

.comment-content .timestamp {
    color: var(--sponser-text);
    opacity: .7;
    font-size: .875rem;
    font-weight: 400;
    margin-left: .5rem;
}

.article-card .article-body > p > a {
    color: inherit;
    border-bottom: solid 1px var(--sponser-purple);

}


.loading-svg {
    width: 2.5rem;
    height: 2.5rem;
}

.loading-svg > rect {
    height: 17px;
    width: 16px;
}

/* table */

.grid {
    display: grid;
    grid-template-columns: 20px minmax(100px, 150px)  auto 80px;
    border-collapse: collapse;

}

.grid:not(:last-child) {
    border-bottom: 1px solid var(--sponser-gray-light);
}

.grid > td {
    padding: .25rem .5rem;
}

.grid > span:not(:last-child) {

    border-left: 1px solid black;

}

#resetPasswordContainer {

    .form-details {
        padding: .375rem;
        border-radius: .375rem;
        overflow: hidden;
        background-color: var(--sponser-bg) !important;
        &.error {
            background-color: var(--sponser-pink) !important;
            p {
                color: var(--sponser-white);
                margin-bottom: 0;
            }
        }
    }

    #resetPasswordForm {



        #form-error{

            background-color: var(--sponser-pink) !important;
            p {
                color: var(--sponser-white);
                margin-bottom: 0;
            }
        }

        #form-description {
            margin-bottom: 1rem;
        }

        fieldset {
            margin: unset;
            border: unset;
            position: relative;
        }

        label {
            font-weight: 700;
        }

        .signup-input-password,
        .signup-input-password2 {
            text-align: left;
            direction: ltr;
            width: 100%;
            display: block;
            height: 45px;
            border-radius: 4px;
            border: 1px solid var(--sponser-purple);
            padding: 0 .625rem;
            font-size: 1rem;
            outline: none;
            background-color: var(--sponser-white-bg);
        }

        .password-strength-indicator2,
        .password-strength-indicator {
            margin-top: .25rem;

            li {
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }

            i {
                font-size: .5rem;
                margin-left: .25rem;

                &.base-icon {
                    color: var(--sponser-text);
                    opacity: .5;
                }

                &.flaticon-new-moon:not(.base-icon) {
                    &.red {
                        color: var(--sponser-red);
                    }

                    &.green {
                        color: var(--sponser-green);
                    }
                }
            }
        }
    }


    .success-massage {
        text-align: center;

        .s-btn {
            display: inline;
            width: auto;
        }
    }
}

/* simple lighbox */

.sl-overlay {
    background-color: #121212 !important;
    opacity: 1 !important;
}

.sl-close {
    color: var(--sponser-white) !important;
}

/* bridTV */

.brid {
    background: transparent !important;
}

.brid-holder {
    background: unset !important;
}

.app-symbol-search {
    display: flex;
    align-items: center;
    height: 32px;
    width: 130px;
    border-radius: .375rem;
    box-sizing: border-box;
    padding: 0.5rem;
    background-color: var(--sponser-white-bg);
    border: 1px solid var(--sponser-bg-darker);
    transition: width .5s;
}

.app-symbol-search:focus-within {
    width: 300px;
}

.app-symbol-search input.app-security-suggest {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 15px;
    font-weight: 300;
    background-color: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    outline: none;
    width: 100%;
    transition: width 1s ease-in-out;
}

.app-symbol-search .app-symbol-search-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: var(--sponser-text);
    opacity: .4;
}


/* toastify */

.toastify {
    padding: .25rem .8rem;
    color: var(--sponser-white);
    display: flex;
    align-items: center;

    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
    background-color: var(--sponser-white-bg);
    position: fixed;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: .5rem;
    cursor: pointer;
    text-decoration: none;
    max-width: calc(50% - 20px);
    z-index: 2147483647;
}

.toastify.on {
    opacity: 1;
}

.toast-close {
    background: transparent;
    border: 0;
    color: var(--sponser-white);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    padding: 0 1rem 0 0;
}

.toastify-right {
    right: 15px;
}

.toastify-left {
    left: 15px;
}

.toastify-top {
    top: -150px;
}

.toastify-bottom {
    bottom: -150px;
}

.toastify-rounded {
    border-radius: 1rem;
}

.toastify-avatar {
    width: 1.5em;
    height: 1.5em;
    margin: -7px 5px;
    border-radius: 2px;
}

.toastify-center {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
    max-width: -moz-fit-content;
}

@media only screen and (max-width: 360px) {
    .toastify-right, .toastify-left {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        max-width: fit-content;
    }
}

/* flaticon */

i[class^="flaticon-"], i[class*=" flaticon-"] {
    display: inline-flex;
    line-height: 1;
}

/* outbrain */

.READNXT_1.ob-widget {
    height: 100px !important;
}