@font-face {
    font-family: "rubik";
    src: url('/themes/fonts/rubik-regular.woff') format("woff");
    src: url('/themes/fonts/rubik-regular.woff2') format("woff2");
    font-display: auto;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
}

@font-face {
    font-family: "rubik";
    src: url('/themes/fonts/rubik-medium.woff') format("woff");
    src: url('/themes/fonts/rubik-medium.woff2') format("woff2");
    font-display: auto;
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
}

@font-face {
    font-family: "fjallaone";
    src: url('/themes/fonts/fjallaone-regular.woff') format("woff");
    src: url('/themes/fonts/fjallaone-regular.woff2') format("woff2");
    font-display: auto;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
}

:root {
    --orange-color: #FF7000;
    --green-color: #183F33;
    --green-secondary-color: #6D9356;
    --green-secondary-light-color: #D4E2CC;
    --anthracite-color: #3F3E45;
    --anthracite-dark-color: #18171A;
    --anthracite-light-color: #A0A0A3;
    --gray-color: #D7D7D8;
    --gray-light-color: #F6F6F6;
    --white-color: #FFF;
    --yellow-color: #FFB20D;
    --red-color: #B91C1C;
    --blue-color: #036AA1;
    --orange-color-rgb: 255, 112, 0;
    --green-color-rgb: 24, 63, 51;
    --green-secondary-color-rgb: 109, 147, 86;
    --green-secondary-light-color-rgb: 212, 226, 204;
    --anthracite-color-rgb: 63, 62, 69;
    --anthracite-dark-color-rgb: 24, 23, 26;
    --anthracite-light-color-rgb: 160, 160, 163;
    --gray-color-rgb: 215, 215, 216;
    --gray-light-color-rgb: 246, 246, 246;
    --white-color-rgb: 255, 255, 255;
    --yellow-color-rgb: 255, 178, 13;
    --red-color-rgb: 185, 28, 28;
    --blue-color-rgb: 3, 106, 161;
    --arrow-green: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='15.719' height='9.019' viewBox='0 0 15.719 9.019'%3E%3Cg transform='translate(0.694 0.72)'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M7.872,7.579,0,0' fill='none' stroke='%23183f33' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath d='M5.028,0,0,4.832' transform='translate(9.305 0.003)' fill='none' stroke='%23183f33' stroke-miterlimit='10' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --arrow-white: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='15.719' height='9.019' viewBox='0 0 15.719 9.019'%3E%3Cg transform='translate(0.694 0.72)'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M7.872,7.579,0,0' fill='none' stroke='%23FFFFFF' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath d='M5.028,0,0,4.832' transform='translate(9.305 0.003)' fill='none' stroke='%23FFFFFF' stroke-miterlimit='10' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --arrow-orange: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='15.719' height='9.019' viewBox='0 0 15.719 9.019'%3E%3Cg transform='translate(0.694 0.72)'%3E%3Cg transform='translate(0 0)'%3E%3Cpath d='M7.872,7.579,0,0' fill='none' stroke='%23FF7000' stroke-miterlimit='10' stroke-width='2'/%3E%3Cpath d='M5.028,0,0,4.832' transform='translate(9.305 0.003)' fill='none' stroke='%23FF7000' stroke-miterlimit='10' stroke-width='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --bg-tiles-plus: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAA7CAMAAADy+wKBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////tcbCfp080QAAADNJREFUeNrs1bEJADAMA0F5/6WDF0gRCCHmrv1GnZKksnOrVjusrzYDMJEf9IMAP1sCDABtlwAlzgJsSQAAAABJRU5ErkJggg==') repeat;
    --bg-tiles-triangle-tight: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA8CAMAAADhV0xWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////z9rXrFFo4QAAADlJREFUeNrs0yESACAMA8Hm/5/GIGAGU2p3XSrqrootme3xg+S+/Ozz0t0gZzmDnOUMcpYzb0uAAQDzlgDhUKm5bQAAAABJRU5ErkJggg==') repeat;
    --bg-tiles-triangle: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADsAAAA7AQMAAAD/62DwAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURf///9HZ1ubDhc4AAAAmSURBVCjPYzBgYGA4AMQMcEYFAwPjAxDjDwMD8weGEQVGQ4OBAQAn/gpRz0quHwAAAABJRU5ErkJggg==') repeat;
}

/* PREVENT ALL TYPES OF WORD BREAKINGS */

* {
    word-wrap: normal;
    word-break: keep-all;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -o-hyphens: none;
    hyphens: none;
}

/* TEXT */

.txt-white {
    color: #FFF
}

.txt-anthracite-light {
    color: var(--anthracite-light-color)
}

.txt-anthracite {
    color: var(--anthracite-color)
}

.txt-anthracite-dark {
    color: var(--anthracite-dark-color)
}

.txt-orange, a:link.txt-orange, a:visited.txt-orange {
    color: var(--orange-color)
}

.txt-green {
    color: var(--green-color)
}

.txt-blue {
    color: var(--blue-color)
}

.txt-red {
    color: var(--red-color)
}

.txt-yellow {
    color: var(--yellow-color)
}

/* BACKGROUND */

.bg-white {
    background-color: #FFF
}

.bg-gray-light {
    background-color: var(--gray-light-color);
}

.bg-gray {
    background-color: var(--gray-color)
}

.bg-anthracite-light {
    background-color: var(--anthracite-light-color)
}

.bg-anthracite {
    background-color: var(--anthracite-color)
}

.bg-anthracite-dark {
    background-color: var(--anthracite-dark-color)
}

.bg-orange {
    background-color: var(--orange-color)
}

.bg-green {
    background-color: var(--green-color)
}

.bg-red {
    background-color: var(--red-color)
}

.bg-blue {
    background-color: var(--blue-color)
}

.bg-green-secondary {
    background-color: var(--green-secondary-color)
}

.bg-green-secondary-light {
    background-color: var(--green-secondary-light-color)
}

.bg-yellow {
    background-color: var(--yellow-color)
}

/* BORDER */

.border-anthracite-light {
    border: 1px solid var(--anthracite-light-color)
}

.border-gray {
    border: 1px solid var(--gray-color)
}

.border-gray-light {
    border: 1px solid var(--gray-light-color)
}

.border-green {
    border: 1px solid var(--green-color)
}

.border-red {
    border: 1px solid var(--red-color)
}

.border-orange {
    border: 1px solid var(--orange-color);
}

/* font sizes */

.fs-normal {
    font-size: 10px
}

.fs-upper {
    font-size: 12px
}

.fs-upper-1 {
    font-size: 14px
}

.fs-upper-2 {
    font-size: 16px
}

.fs-big {
    font-size: 18px
}

.fs-upper-3 {
    font-size: 20px
}

.fs-upper-4 {
    font-size: 30px
}

.txt-center {
    text-align: center
}

.txt-right {
    text-align: right
}

.txt-left {
    text-align: left
}

.txt-justify {
    text-align: justify
}

.normal {
    font-weight: normal
}

.bold {
    font-weight: bold
}

.italic {
    font-style: italic
}

.right {
    float: right
}

.left {
    float: left
}

.lines-ellipsis, .lines-ellipsis-2 {
    --lines-count: 2;
}

.lines-ellipsis-3 {
    --lines-count: 3;
}

.lines-ellipsis-4 {
    --lines-count: 4;
}

.lines-ellipsis {
    display: -webkit-box;
    line-height: 1.2em;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    max-height: calc(var(--lines-count) * 1.2em);
    -webkit-line-clamp: var(--lines-count);
    white-space: normal;
    padding: 0;
}

/* Buttons */

.button {
    background-color: var(--green-color);
    border: 1px solid var(--green-color);
    color: #FFF;
    line-height: 1.4;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 16px;
    font-family: "rubik", Arial, Helvetica, sans-serif;
    text-align: center;
}

a.button,
a:link.button,
a:visited.button {
    color: #FFF;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    text-decoration: none;
}

.button:hover,
a.button:hover,
a:link.button:hover,
a:visited.button:hover {
    color: #FFF;
    background-color: #255446;
    border: 1px solid var(--green-color);
    text-decoration: none;
}

.button:active,
a.button:active,
a:link.button:active,
a:visited.button:active {
    color: #FFF;
    background-color: var(--green-color);
    border: 1px solid var(--green-color);
}

.button:disabled,
.buttondisabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
}

.buttonred,
a.buttonred,
a:link.buttonred,
a:visited.buttonred {
    background-color: var(--red-color);
    border: 1px solid var(--red-color);
}

.buttonred:hover,
a.buttonred:hover,
a:link.buttonred:hover,
a:visited.buttonred:hover {
    background-color: #DC2626;
    border: 1px solid var(--red-color);
}

.buttonred:active,
a.buttonred:active,
a:visited.buttonred:active {
    background-color: var(--red-color);
    border: 1px solid var(--red-color);
    color: #FFF;
}

.buttonblue,
a.buttonblue,
a:link.buttonblue,
a:visited.buttonblue {
    background-color: var(--blue-color);
    border: 1px solid var(--blue-color);
}

.buttonblue:hover,
a.buttonblue:hover,
a:link.buttonblue:hover,
a:visited.buttonblue:hover {
    background-color: #0282C7;
    border: 1px solid var(--blue-color);
}

.buttonblue:active,
a.buttonblue:active,
a:link.buttonblue:active,
a:visited.buttonblue:active {
    background-color: var(--blue-color);
    border: 1px solid var(--blue-color);
    color: #FFF;
}

.buttonorange,
a.buttonorange,
a:link.buttonorange,
a:visited.buttonorange {
    background-color: var(--orange-color);
    border: 1px solid var(--orange-color);
    color: #FFF;
}

.buttonorange:hover,
a.buttonorange:hover,
a:link.buttonorange:hover,
a:visited.buttonorange:hover {
    background-color: #FF8525;
    border: 1px solid var(--orange-color);
}

.buttonorange:active,
a.buttonorange:active,
a:link.buttonorange:active,
a:visited.buttonorange:active {
    background-color: var(--orange-color);
    border: 1px solid var(--orange-color);
    color: #FFF;
}

.buttonwhite,
a.buttonwhite,
a:link.buttonwhite,
a:visited.buttonwhite {
    color: var(--green-color);
    background-color: #FFF;
    border: 1px solid var(--green-color);
}

.buttonwhite:hover,
a.buttonwhite:hover,
a:link.buttonwhite:hover,
a:visited.buttonwhite:hover {
    background-color: var(--gray-light-color);
    border: 1px solid var(--green-color);
    color: var(--green-color);
}

.buttonwhite:active,
a.buttonwhite:active,
a:link.buttonwhite:active,
a:visited.buttonwhite:active {
    color: var(--green-color);
    background-color: #FFF;
    border: 1px solid var(--green-color);
}

.smallbutton {
    font-size: 13px;
    line-height: 1;
}

.bigbutton {
    padding: 2px 50px;
    font-size: 1.2em;
    min-height: 34px;
    line-height: 34px;
}

/* CTA */

/* BUTTON */

.button.cta,
a.button.cta,
a:link.button.cta,
a:visited.button.cta {
    padding: 8px 15px 8px 10px;
    border-radius: 10px;
    line-height: 19px;
    text-decoration: none !important;
}

.button.cta.ctaBig,
a.button.cta.ctaBig,
a:link.button.cta.ctaBig,
a:visited.button.cta.ctaBig {
    padding: 12px 24px 12px 20px;
    line-height: 22px;
}

.button.cta:hover,
a.button.cta:hover,
a:link.button.cta:hover,
a:visited.button.cta:hover {
    background-color: #FFF;
    color: var(--green-color);
    border: 1px solid var(--green-color);
}

.button.cta:active,
a.button.cta:active,
a:link.button.cta:active,
a:visited.button.cta:active {
    background-color: var(--green-color);
    border: 1px solid var(--green-color);
    color: #FFF;
}


.button.cta::before,
a.button.cta::before,
a:link.button.cta::before,
a:visited.button.cta::before {
    margin-right: 5px;
    display: inline-block;
    transform: rotate(270deg);
    content: var(--arrow-white);
}

@media (max-width: 360px) {
    .button.cta::before,
    a.button.cta::before,
    a:link.button.cta::before,
    a:visited.button.cta::before {
        transform: rotate(270deg) scale(.8);
        width: 14px;
        margin-right: 3px;
    }
}

.button.cta:hover::before,
a.button.cta:hover::before,
a:link.button.cta:hover::before,
a:visited.button.cta:hover::before {
    content: var(--arrow-green);
}

.button.cta:active::before,
a.button.cta:active::before,
a:link.button.cta:active::before,
a:visited.button.cta:active::before {
    content: var(--arrow-white);
}

/* BUTTON WHITE */

.button.buttonwhite.cta:hover,
.a.button.buttonwhite.cta:hover,
a:link.button.buttonwhite.cta:hover,
a:visited.button.buttonwhite.cta:hover {
    background-color: var(--green-color);
    border: 1px solid var(--green-color);
    color: #FFF;
}

.button.buttonwhite.cta:active,
a.button.buttonwhite.cta:active,
a:link.button.buttonwhite.cta:active,
a:visited.button.buttonwhite.cta:active {
    background-color: #FFF;
    color: var(--green-color);
    border: 1px solid var(--green-color);
}

.button.buttonwhite.cta::before,
a.button.buttonwhite.cta::before,
a:link.button.buttonwhite.cta::before,
a:visited.button.buttonwhite.cta::before {
    content: var(--arrow-green);
}

.button.buttonwhite.cta:hover::before,
a.button.buttonwhite.cta:hover::before,
a:link.button.buttonwhite.cta:hover::before,
a:visited.button.buttonwhite.cta:hover::before {
    content: var(--arrow-white);
}


.button.buttonwhite.cta:active::before,
a.button.buttonwhite.cta:active::before,
a:link.button.buttonwhite.cta:active::before,
a:visited.button.buttonwhite.cta:active::before {
    content: var(--arrow-green);
}

/* ORANGE */

.button.buttonorange.cta:hover,
a.button.buttonorange.cta:hover,
a:link.button.buttonorange.cta:hover,
a:visited.button.buttonorange.cta:hover {
    background-color: #FFF;
    color: var(--orange-color);
    border: 1px solid var(--orange-color);
}

.button.buttonorange.cta:active,
a.button.buttonorange.cta:active,
a:link.button.buttonorange.cta:active,
a:visited.button.buttonorange.cta:active {
    background-color: var(--orange-color);
    border: 1px solid var(--orange-color);
    color: #FFF;
}

.button.buttonorange.cta::before,
a.button.buttonorange.cta::before,
a:link.button.buttonorange.cta::before,
a:visited.button.buttonorange.cta::before {
    content: var(--arrow-white);
}

.button.buttonorange.cta:hover::before,
.a.button.buttonorange.cta:hover::before,
a:link.button.buttonorange.cta:hover::before,
a:visited.button.buttonorange.cta:hover::before {
    content: var(--arrow-orange);
}

.button.buttonorange.cta:active::before,
a.button.buttonorange.cta:active::before,
a:link.button.buttonorange.cta:active::before,
a:visited.button.buttonorange.cta:active::before {
    content: var(--arrow-white);
}

/* ALERT */
.alert {
    background-color: var(--gray-light-color);
    border: 1px solid var(--green-color) !important;
    border-radius: 5px;
    text-align: left;
    margin: 0;
    display: block;
    position: relative;
    padding: 15px;
}

.alert-content {
    padding-left: 0;
    margin-left: 40px
}

.alert.alert-warning {
    background-color: var(--gray-light-color);
    border: 1px solid var(--yellow-color) !important;
}

.alert.alert-danger {
    background-color: var(--gray-light-color);
    border: 1px solid var(--red-color) !important;
}

.alert .alert-content::before {
    content: "";
    left: 0;
    height: 100%;
    position: absolute;
    display: block;
    width: 40px;
    box-sizing: border-box;
    top: 0;
    background-color: var(--green-color);
    background-image: url("/themes/naturabuy/img/info.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: 20px;
}

.alert.alert-warning .alert-content::before {
    background-color: var(--yellow-color);
    background-image: url("/themes/naturabuy/img/white-warning.png");
}

.alert.alert-danger .alert-content::before {
    background-color: var(--red-color);
    background-image: url("/themes/naturabuy/img/white-warning.png");
}

/* LINKS */
a:link,
a:visited {
    color: var(--anthracite-color);
    text-decoration: underline;
}

a:hover {
    color: var(--anthracite-dark-color);
    text-decoration: underline;
}

a:link.txt-white,
a:visited.txt-white,
.txt-white a:link,
.txt-white a:visited {
    color: #FFF;
    text-decoration: underline;
}

a:link.underline,
a:visited.underline,
.underline a:link,
.underline a:visited,
a > .underline {
    text-decoration: underline;
}

a:link.nodeco,
a:visited.nodeco,
.nodeco a:link,
.nodeco a:visited {
    text-decoration: none;
}

/* prevent blue highlight on link click*/
.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome and Opera */
}

.onoffswitch {
    position: relative;
    width: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.onoffswitch-checkbox {
    display: none
}

.onoffswitch-label {
    display: block !important;
    cursor: pointer;
    height: 25px;
    padding: 0;
    box-sizing: border-box;
    border: 2px solid var(--anthracite-light-color);
    border-radius: 25px;
    background-color: var(--gray-color);
    transition: background-color .3s ease-in
}

.onoffswitch-label:before {
    content: "";
    display: block;
    width: 20px;
    margin: 0;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 26px;
    border: 2px solid var(--anthracite-light-color);
    border-radius: 25px;
    transition: all .3s ease-in 0s
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: var(--green-color)
}

.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
    border-color: var(--green-color)
}

.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0
}

.onoffswitch-disabled,
.onoffswitch:has(> input:disabled) {
    opacity: 0.5;
}

.onoffswitch-disabled .onoffswitch-label,
.onoffswitch:has(> input:disabled) .onoffswitch-label {
    cursor: not-allowed;
}