$green: #005051;
$lightGreen: #276462;
$gray:#676767;
$mediumGray:#707070;
$lightGray: #EDEDED;
$black:#2B2B2B;

@font-face {
    font-family: 'IstokWeb';
    src: local('IstokWeb'), url("../../fonts/IstokWeb-Regular.ttf");
}

@font-face {
    font-family: 'IstokWebBold';
    src: local('IstokWebBold'), url("../../fonts/IstokWeb-Bold.ttf");
}


@mixin regularFont() {
    font-family: 'IstokWeb', sans-serif;
    font-weight: 400;
}

@mixin boldFont() {
    font-family: 'IstokWebBold', sans-serif !important;
    font-weight: 700 !important;
}

// Custom Icons
i.ci {
    position: relative;

    &.ci-people {
        &::before {
            content: " ";
            background: url('../../img/icons/people.svg');
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 30px;
            width: 30px;
            left: -30px;
            top: -15px;
        }
    }

    &.ci-people-white {
        &::before {
            content: " ";
            background: url('../../img/icons/people-white.svg');
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 30px;
            width: 30px;
            left: -30px;
            top: -15px;
        }
    }

    &.ci-close-white {
        &::before {
            content: " ";
            background: url("../../img/icons/close-white.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 17px;
            width: 17px;
            left: 3px;
            top: 5px;
        }
    }

    &.ci-plus-circle {
        &::before {
            content: " ";
            background: url("../../img/icons/plus-circle.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 17px;
            width: 17px;
            left: 0;
            top: 0;
        }
    }

    &.ci-search {
        &::before {
            content: " ";
            background: url("../../img/icons/search.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 17px;
            width: 17px;
            left: 3px;
            top: 5px;
        }
    }

    &.ci-discount {
        &::before {
            content: " ";
            background: url("../../img/icons/discount.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 25px;
            width: 25px;
            left: 0;
            top: 0;
        }
    }

    &.ci-discount-green {
        &::before {
            content: " ";
            background: url("../../img/icons/discount-green.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 25px;
            width: 25px;
            left: 0;
            top: 0;
        }
    }
   

    &.ci-trash {
        &::before {
            content: " ";
            background: url("../../img/icons/trash.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 25px;
            width: 25px;
            left: 0;
            top: 0;
        }
    }

    &.ci-arrow-right {
        &::before {
            content: " ";
            background: url("../../img/icons/arrow-right.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 25px;
            width: 25px;
            left: 0;
            top: 0;
        }
    }

    &.ci-polyDown {
        &::before {
            content: " ";
            background: url("../../img/icons/downPolygon.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 25px;
            width: 25px;
            left: 0;
            top: 0;
            z-index: 500;
        }
    }

    &.ci-calendar {
        &::before {
            content: " ";
            background: url("../../img/icons/calendar.svg");
            position: absolute;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            height: 25px;
            width: 25px;
            left: 0;
            top: 0;
            z-index: 500;
        }
    }
}