$default: #f9f9ff;
$primary: $theme-color2;
$success: #4cd3e3;
$info: #38a4ff;
$warning: #f4e700;
$danger: #f44a40;
$link: #f9f9ff;
$disable: (#222222, .3);
$primary-color: #7c32ff;
$primary-color1: #c738d8;
$title-color: #415094;
$text-color: #828bb2;
$white: #fff;
$offwhite: #f9f9ff;
$black: #000;


.badge-over-image::before{
  position: absolute;
  top:20px;
  right:7px;
  content: '';
  background: #e9353b;
  height: 28px;
  width: 28px;
  transform : rotate(45deg);
  z-index: -1;
}

.badge-over-image::after{
  position: absolute;
  content: attr(data-label);
  font-size: 12px;
  height: 24px;
  top: 10px;
  right: 1px;
  padding: 3px 8px;
  width: auto;
  background: #A41217;
  color: white;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
}

.genric-btn {
    display: inline-block;
    outline: none;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 23px;
    font-style: normal;
    font-weight: 500;
    cursor: pointer;
    @include transition();
    &:focus {
        outline: none;
    }
    &.large {
        line-height: 45px;
    }
    &.medium {
        line-height: 30px;
    }
    &.small {
        line-height: 25px;
    }
    &.radius {
        border-radius: 3px;
    }
    &.circle {
        border-radius: 20px;
    }
    &.arrow {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        span {
            margin-left: 10px;
        }
    }
    &.default {
        color: $title-color;
        background: $default;
        border: 1px solid transparent;
        &:hover {
            border: 1px solid $default;
            background: $white;
        }
    }
    &.default-border {
        border: 1px solid $default;
        background: $white;
        &:hover {
            color: $title-color;
            background: $default;
            border: 1px solid transparent;
        }
    }
    &.primary {
        color: $white;
        background: $primary;
        border: 1px solid transparent;
        &:hover {
            color: #585858/*$primary*/;
            border: 1px solid $primary;
            background: transparent;
        }
    }
    &.primary-border {
        color: $primary;
        border: 1px solid $primary;
        /*background: $white;*/
        &:hover {
            color: $white;
            background: $primary;
            border: 1px solid transparent;
        }
    }
    &.success {
        color: $white;
        background: $success;
        border: 1px solid transparent;
        &:hover {
            color: $success;
            border: 1px solid $success;
            background: $white;
        }
    }
    &.success-border {
        color: $success;
        border: 1px solid $success;
        background: $white;
        &:hover {
            color: $white;
            background: $success;
            border: 1px solid transparent;
        }
    }
    &.info {
        color: $white;
        background: $info;
        border: 1px solid transparent;
        &:hover {
            color: $info;
            border: 1px solid $info;
            background: $white;
        }
    }
    &.info-border {
        color: $info;
        border: 1px solid $info;
        background: $white;
        &:hover {
            color: $white;
            background: $info;
            border: 1px solid transparent;
        }
    }
    &.warning {
        color: $white;
        background: $warning;
        border: 1px solid transparent;
        &:hover {
            color: $warning;
            border: 1px solid $warning;
            background: $white;
        }
    }
    &.warning-border {
        color: $warning;
        border: 1px solid $warning;
        background: $white;
        &:hover {
            color: $white;
            background: $warning;
            border: 1px solid transparent;
        }
    }
    &.danger {
        color: $white;
        background: $danger;
        border: 1px solid transparent;
        &:hover {
            color: $danger;
            border: 1px solid $danger;
            background: $white;
        }
    }
    &.danger-border {
        color: $danger;
        border: 1px solid $danger;
        background: $white;
        &:hover {
            color: $white;
            background: $danger;
            border: 1px solid transparent;
        }
    }
    &.link {
        color: $title-color;
        background: $link;
        text-decoration: underline;
        border: 1px solid transparent;
        &:hover {
            color: $title-color;
            border: 1px solid $link;
            background: $white;
        }
    }
    &.link-border {
        color: $title-color;
        border: 1px solid $link;
        background: $white;
        text-decoration: underline;
        &:hover {
            color: $title-color;
            background: $link;
            border: 1px solid transparent;
        }
    }
    &.disable {
        color: $disable;
        background: $link;
        border: 1px solid transparent;
        cursor: not-allowed;
    }
}