@import url('https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700');

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: 100;
    src: url('/file/fonts/woff2/Farhang2-Thin.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('fonts/woff/Farhang2-Thin.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: 200;
    src: url('/file/fonts/woff2/Farhang2-Extralight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/file/fonts/woff/Farhang2-Extralight.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: 300;
    src: url('/file/fonts/woff2/Farhang2-Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/file/fonts/woff/Farhang2-Light.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: 500;
    src: url('/file/fonts/woff2/Farhang2-Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/file/fonts/woff/Farhang2-Medium.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: 600;
    src: url('/file/fonts/woff2/Farhang2-DemiBold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/file/fonts/woff/Farhang2-DemiBold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: 800;
    src: url('/file/fonts/woff2/Farhang2-ExtraBold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/file/fonts/woff/Farhang2-ExtraBold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: 900;
    src: url('/file/fonts/woff2/Farhang2-Black.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/file/fonts/woff/Farhang2-Black.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: bold;
    src: url('/file/fonts/woff2/Farhang2-Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/file/fonts/woff/Farhang2-Bold.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

@font-face {
    font-family: 'Farhang';
    font-style: normal;
    font-weight: normal;
    src: url('/file/fonts/woff2/Farhang2-Regular.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/ url('/file/fonts/woff/Farhang2-Regular.woff') format('woff');  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
}

:root {
    /*/ Anigostar /*/
    --ag-light: #00D170;
    --ag: var(--ag-light);
    --ag-active: #00a651;
    /*/ Metronic /*/
    --kt-primary: var(--ag);
    --kt-primary-active: var(--ag-active);
    --kt-text-primary: var(--ag);
    --kt-link-color: var(--ag);
    --kt-link-hover-color: var(--ag-active);
    --kt-component-active-bg: var(--ag);
    --kt-component-hover-color: var(--ag);
    --kt-btn-link-color: var(--ag);
    --kt-btn-link-hover-color: var(--ag-active);
    --kt-form-check-input-checked-bg-color: var(--ag);
    --kt-form-check-input-checked-bg-color-solid: var(--ag);
    --kt-form-check-input-checked-border-color: var(--ag);
    --kt-form-check-input-indeterminate-color: #ffffff;
    --kt-form-check-input-indeterminate-bg-color: var(--ag);
    --kt-form-check-input-indeterminate-border-color: var(--ag);
    --kt-nav-pills-link-active-bg: var(--ag);
    --kt-pagination-focus-color: var(--ag);
    --kt-pagination-hover-color: var(--ag);
    --kt-pagination-active-bg: var(--ag);
    --kt-accordion-button-active-color: var(--ag);
    --kt-accordion-icon-active-color: var(--ag);
    --kt-list-group-active-bg: var(--ag);
    --kt-list-group-active-border-colorg: var(--ag);
    --kt-breadcrumb-active-color: var(--ag);
    --kt-scrolltop-bg-color: var(--ag);
    --kt-scrolltop-bg-color-hover: var(--ag);
    --kt-menu-link-color-hover: var(--ag);
    --kt-menu-link-color-show: var(--ag);
    --kt-menu-link-color-here: var(--ag);
    --kt-menu-link-color-active: var(--ag);
    --kt-ribbon-label-bg: var(--ag);
    /*/ BootStrap /*/
    --bs-primary: var(--ag);
    --bs-font-sans-serif: 'Farhang', "Poppins", Inter, Helvetica, "sans-serif";
    --bs-font-monospace: 'Farhang', "Poppins", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-link-color: var(--ag);
    --bs-link-hover-color: var(--ag-active);
    --bs-primary-rgb: var(--ag);
}

body,
table,
th,
td,
a,
div,
p,
* {
    font-family: 'Farhang', "Poppins", 'Myriad Pro', sans-serif;
}

.kt-base-toast {
    position: relative;
    z-index: 1000000;
    width: 100%;
    -webkit-box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, .075);
    box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, .075);
}

.kt-base-toast .kt-base-toast__view {
    min-height: 46px;
}

.kt-base-toast--success .kt-base-toast__view {
    background: #3aaa29;
    color: #fff;
}

.kt-base-toast--danger .kt-base-toast__view {
    background: #ac003a;
    color: #fff;
}

.kt-base-toast--warning .kt-base-toast__view {
    background: #ffc600;
    color: #fff;
}

.kt-base-toast .kt-base-toast__view .kt-base-toast__wrapped {
    position: relative;
    z-index: 1;
    display: block;
    overflow: hidden;
    padding: 12px 0;
    font-size: 14px;
    line-height: 22px;
}

.kt-base-toast .kt-base-toast__view .kt-base-toast__wrapped .kt-base-toast__icon::before {
    position: absolute;
    top: 50%;
    width: 15px;
    height: 15px;
    content: "";
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    display: inline-block;
}

.kt-base-toast--success .kt-base-toast__view .kt-base-toast__wrapped .kt-base-toast__icon::before {
    background-image: url("/image/icon/gen037.svg");
}

.kt-base-toast--warning .kt-base-toast__view .kt-base-toast__wrapped .kt-base-toast__icon::before {
    background-image: url("/image/icon/gen033.svg");
}

.kt-base-toast--danger .kt-base-toast__view .kt-base-toast__wrapped .kt-base-toast__icon::before {
    background-image: url("/image/icon/gen034.svg");
}

.kt-base-toast .kt-base-toast__view .kt-base-toast__wrapped .kt-base-toast__level {
    margin: 0 20px;
    padding-right: 12px;
    border-right: 1px solid hsla(0, 0%, 100%, .2);
    text-transform: capitalize;
    font-weight: 800;
}

.kt-base-toast .kt-base-toast__view .kt-base-toast__wrapped .kt-base-toast__close {
    position: absolute;
    top: 50%;
    right: 30px;
    margin-top: -1px;
    width: 10px;
    height: 10px;
    opacity: .75;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjI1IiB3aWR0aD0iMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIj48cGF0aCBkPSJNMS41IDIzLjVMMjIuNzEzIDIuMjg3TTIyLjcxMyAyMy41TDEuNSAyLjI4NyIvPjwvZz48L3N2Zz4=");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    display: inline-block;
}

.kt-base-toast .kt-base-toast__view .kt-base-toast__progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: hsla(0, 0%, 100%, .075);
}

.kt-base-toast--active .kt-base-toast__view .kt-base-toast__progress {
    -webkit-animation: reduceWidthLeft;
    animation: reduceWidthLeft;
    animation-duration: 0s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-fill-mode: none;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

@keyframes reduceWidthLeft {
    0% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

.btn {
    border-radius: 4px;
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 25px;
    padding-right: 25px;
    border-radius: 30px;
    border: none;
    letter-spacing: .02rem;
    -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    position: relative;
    top: 0;
}

.btn.btn-sm {
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

.btn.btn-lg {
    font-size: 16px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right: 30px;
}

.btn:hover,
.btn:active,
.btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    top: 1px;
}

/* Primary */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #3395ff;
}

/* Secondary */
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #868e96;
}

/* Success */
.btn-success:hover,
.btn-success:focus {
    background-color: #34ce57;
}

/* Info */
.btn-info:hover,
.btn-info:focus {
    background-color: #1fc8e3;
}

/* Warning */
.btn-warning:hover,
.btn-warning:focus {
    background-color: #ffce3a;
}

/* Danger */
.btn-danger:hover,
.btn-danger:focus {
    background-color: #e4606d;
}

/* Orange */
.btn-orange {
    background-color: #fd7e14;
    color: #fff;
}

.btn-orange:hover,
.btn-orange:focus {
    background-color: #fd9a47;
    color: #fff;
}

/* Indigo */
.btn-indigo {
    background-color: #6610f2;
    color: #fff;
}

.btn-indigo:hover,
.btn-indigo:focus {
    background-color: #8540f5;
    color: #fff;
}

/* Pink */
.btn-pink {
    background-color: #e83e8c;
    color: #fff;
}

.btn-pink:hover,
.btn-pink:focus {
    background-color: #ed6ca7;
    color: #fff;
}

/* Purple */
.btn-purple {
    background-color: #6f42c1;
    color: #fff;
}

.btn-purple:hover,
.btn-purple:focus {
    background-color: #8c68ce;
    color: #fff;
}

/* Blue */
.btn-blue {
    background-color: #007bff;
    color: #fff;
}

.btn-blue:hover,
.btn-blue:focus {
    background-color: #3395ff;
    color: #fff;
}

/* Brown */
.btn-brown {
    background-color: #a0855b;
    color: #fff;
}

.btn-brown:hover,
.btn-brown:focus {
    background-color: #b49d7a;
    color: #fff;
}

/* Blue gray */
.btn-blue-gray {
    background-color: #3f4d71;
    color: #fff;
}

.btn-blue-gray:hover,
.btn-blue-gray:focus {
    background-color: #516392;
    color: #fff;
}

/* Deep orange */
.btn-deep-orange {
    background-color: #ffac8e;
    color: #fff;
}

.btn-deep-orange:hover,
.btn-deep-orange:focus {
    background-color: #ffd1c1;
    color: #fff;
}

/* Aqua */
.btn-aqua {
    background-color: #3fc5f0;
    color: #fff;
}

.btn-aqua:hover,
.btn-aqua:focus {
    background-color: #6ed3f4;
    color: #fff;
}

/* Dark */
.btn-dark {
    background-color: #393e46;
    color: #fff;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: #505762;
    color: #fff;
}

.btn-black {
    background-color: #000;
    color: #fff;
}

.btn-black:hover,
.btn-black:focus {
    background-color: #1a1a1a;
    color: #fff;
}

/* Content Loader */
.content-loader {
    background-color: #fff;
    position: relative;
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}

.content-loader:only-child {
    margin-top: 0;
}

.content-loader.product-view__img:before {
    content: '';
    height: 350px;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-30:before {
    content: '';
    height: 15px;
    width: 30%;
    margin: 0 auto;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-40:before {
    content: '';
    height: 15px;
    width: 40%;
    margin: 0 auto;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-50:before {
    content: '';
    height: 15px;
    width: 50%;
    margin: 0 auto;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-left:before {
    margin: 0 !important;
}

.content-loader.c-h-5:before {
    height: 5px !important;
}

.content-loader.c-h-10:before {
    height: 10px !important;
}

.content-loader.c-h-20:before {
    height: 20px !important;
}

.content-loader.c-h-25:before {
    height: 25px !important;
}

.content-loader.c-h-30:before {
    height: 30px !important;
}

.content-loader.c-h-35:before {
    height: 35px !important;
}

.content-loader.c-h-40:before {
    height: 40px !important;
}

.content-loader.c-h-45:before {
    height: 45px !important;
}

.content-loader.c-h-100:before {
    height: 100px !important;
}

.content-loader.c-h-150:before {
    height: 150px !important;
}

.content-loader.c-h-200:before {
    height: 200px !important;
}

.content-loader.loader-60:before {
    content: '';
    height: 15px;
    width: 60%;
    margin: 0 auto;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-70:before {
    content: '';
    height: 15px;
    width: 70%;
    margin: 0 auto;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-80:before {
    content: '';
    height: 15px;
    width: 80%;
    margin: 0 auto;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-90:before {
    content: '';
    height: 15px;
    width: 90%;
    margin: 0 auto;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-100:before {
    content: '';
    height: 15px;
    width: 100%;
    margin: 0 auto;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-title:before {
    content: '';
    height: 15px;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader.loader-img-cart:before {
    content: '';
    height: 200px;
    display: block;
    background-color: #ededed;
    box-shadow: -48px 78px 0 -48px #ededed, -51px 102px 0 -51px #ededed;
}

.content-loader:after {
    content: '';
    background-color: #333;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-name: loader-animate;
    animation-timing-function: linear;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 81%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 81%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 81%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
}

@keyframes loader-animate {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        transform: translate3d(100%, 0, 0);
    }
}
