$fw4: 400;
$fw5: 500;
$fw6: 600;
$fw7: 700;
$fw9: 900;

$fs12: 12px;
$fs13: 13px;
$fs14: 14px;
$fs16: 16px;
$fs18: 18px;
$fs21: 21px;
$fs22: 22px;
$fs24: 24px;
$fs32: 32px;
$fs34: 34px;
$fs42: 42px;
$fs44: 44px;
$fs46: 46px;

$z-index1: 1;
$z-index9: 9;
$z-index10: 10;
$z-index999: 999;

$fa: FontAwesome;
$fa5: "Font Awesome 5 Free";
$Trebuchet: Trebuchet, Arial, sans-serif;
$Poppins: "Poppins", sans-serif;

$primary-color: #3c434a;
$white-color: #fff;
$black-color: #000;
$bg-color: #f0f0f1;
$para-color: #1d2327;
$blue-color: #2271b1;
$blue-color2: #2d63a1;
$input-color: #2c3338;
$input-color2: #ddd;
$input-bcolor: #8c8f94;
$error-color: #d63638;
$hover-color: #135e96;
$hover-color2: #0079f5;
$btnhover-color: #0a4b78;
$light-blue: #55acee;
$activeblue: #3871b1;
$bg-transparent: transparent;
$danger: #d63638;
$success: #4fa746;
$warning: #f2c010;
$bdrcolor: #c3c4c7;
$bdrcolor2: #eee;
$bdrcolor3: #999;
$bdrcolor4: #dcdcde;
$border-lighttop: #f9f9f9;
$light-grey: #f6f7f7;
$light-grey2: #dbdbdb;
$dark-grey: #3f4254;
$dark-grey2: #272121;
$grey2: #646464;
$grey3: #545454;
$btn-darkbg: #1b2531;
$input-lightbg: #ecf3ff;
$btnhover-bdr: #f5f5f5;
$lightbg: #e8e9ee;
$lightbg2: #f7f7f7;
$tdcolor: #181c32;
$borderlight: #f1f1f1;
$btnb-wrapcolor: #efefef;

$previewbg: rgba(0, 0, 0, 0.01);
$rgbordercolor: rgba(0, 0, 0, 0.01);
$modaction-right: rgba(0, 0, 0, 0.01);

$twitter: #26c4f1;
$instagram: #cd486b;
$facebook: #1878f2;
$linkedin: #0e76a8;
$rss: #ee802f;
$youtube: #ff0000;
$tumblr: #35465c;
$pinterest: #bd081c;
$yelp: #bd0301;
$soundcloud: #f85204;

$light-blue2: #bcdafd;
$switch-bg: #e0e0e0;
$switch-bg2: #a9abbc;
$planbox-bg: #fffdfd;
$selectbtn-bg: #e3ebff;
$tbl-bdrcolor: #ebedf3;
$filter-bg: rgba(255, 255, 255, 0.1);
$new-blue: #4f99ff;
$light-bgcolor: #fbfbfb;
$moaction-bg: #f3f6f9;
$moaction-active: #204863;
$mod-more: #333;
$mod-switchgreen: #99db93;
$mod-switchprivate: #ef898a;
$pager-bg: #ecf1f6;
$add-network: #1e2531;
$tooltop-bg: #555;

$twitterhover: #29a9e1;
$instagramhover: #d45561;
$facebookhover: #386690;
$linkedinhover: #1877f2;
$googlehover: #34a853;
$vimeohover: #1eb8eb;
$yammerhover: #0177d4;
$slackhover: #500e4e;

$none: none;
$normal: normal;
$unset: unset;
$auto: auto;
$inherit: inherit;
$solid: solid;
$top: top;
$wrap: wrap;
$super: super;

$sizefull: 100%;
$sizedouble: 200%;
$sizefullvh: 100vh;
$sizehalf: 50%;
$sizeoneth: 33.33%;
$size15: 15%;
$twoper: 2%;
$width23: 23.5%;
$size45: 45%;
$size80: 80%;
$size32: 32%;
$size20: 20%;
$size46: 46%;
$size40: 40%;
$size49: 49%;
$size125: 125%;
$size33: 33.3333%;
$size66: 66.6666%;
$size90: 90%;

$desktopmax: 1600px;
$tabmax: 600px;
$mobmax: 375px;

$popupxl: 800px;
$popupmd: 480px;

$boxs: border-box;
$mw: 1200px;
$mw62: 62px;
$center: center;
$middle: middle;
$capitalize: capitalize;
$left: left;
$both: both;
$right: right;
$mw310: 310px;
$w3: 300px;
$previewleftw: 315px;
$tbw: 326px;
$mwpopup: 255px;
$border: 1px solid;
$border4: 4px solid;
$selectw: 160px;
$w260: 260px;

$p1: 1px;
$p2: 2px;
$p3: 3px;
$p4: 4px;
$p6: 6px;
$p7: 7px;
$lh2: 2;
$lh: 2.15;
$zero: 0;
$h5: 5px;
$h8: 8px;
$h9: 9px;
$h10: 10px;
$h11: 11px;
$h15: 15px;
$h20: 20px;
$h25: 25px;
$h26: 26px;
$h28: 28px;
$h30: 30px;
$h35: 35px;
$h36: 36px;
$h40: 40px;
$h45: 45px;
$h48: 48px;
$h50: 50px;
$h58: 58px;
$h84: 84px;
$h85: 85px;
$h99: 99px;
$h100: 100px;
$h120: 120px;
$h-double: 200px;

$bradius: 0px;
$bradius4: 0px;
$onem: 1em;
$onerem: 1rem;
$tworem: 2rem;
$eight: 0.8em;
$sevenfive: 0.75rem;

$hidden: hidden;
$d-block: block;
$dinblock: inline-block;
$pointer: pointer;
$rel: relative;
$abs: absolute;
$fixed: fixed;
$opcity85: 8.5;
$opcity09: 0.9;
$f-end: flex-end;
$nowrap: nowrap;
$underline: underline;
$ellipsis: ellipsis;
$down-arrow: url(../images/arrow-down.png) no-repeat right 5px top 55%;
$norepeat: no-repeat;

$breakall: break-all;

%align-justify {
    text-align: justify;
}
%with-span {
    padding-top: 4px;
    padding-bottom: 4px;
    display: inline-block;
}
%d-flex {
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
%f-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
%ai-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
%ai-selftstart {
    -webkit-box-align: self-start;
    -ms-flex-align: self-start;
    align-items: self-start;
}
%aicenter-self {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}
%ai-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
%jc-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
%jc-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}
%fd-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
%fd-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
%jc-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
%jc-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
%trans {
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
%trans2 {
    transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
}
%plrequal {
    padding-left: 15px;
    padding-right: 15px;
}
%input-focus {
    -webkit-box-shadow: 0 0 0 1px $blue-color;
    box-shadow: 0 0 0 1px $blue-color;
}
%outline {
    outline: 2px solid transparent;
}
%translate {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
%box-shadow {
    -webkit-box-shadow: 0 1px 1px 0 #0000001a;
    box-shadow: 0 1px 1px 0 #0000001a;
}
%box-shadow2 {
    -webkit-box-shadow: 0 0 10px #8892a8ef;
    box-shadow: 0 0 10px #8892a8ef;
}
%box-shadow3 {
    -webkit-box-shadow: 0 0 15px #ebebeb;
    box-shadow: 0 0 15px #ebebeb;
}
%switch-shadow {
    box-shadow: 0 3px 10px #b1b1b1;
    -moz-box-shadow: 0 3px 10px #b1b1b1;
    -webkit-box-shadow: 0 3px 10px #b1b1b1;
}
%flexend {
    -ms-flex-item-align: end;
    align-self: flex-end;
}

%d-order1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}
%d-order2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

%feed-btn {
    display: $dinblock;
    text-decoration: $none;
    font-size: $fs13;
    min-height: $h30;
    margin: $zero;
    padding: $zero $h10;
    cursor: $pointer;
    border: $border;
    border-radius: $bradius;
    white-space: $nowrap;
    color: $blue-color;
    border-color: $blue-color;
    background: $white-color;
    margin-right: $h5;
    line-height: 2.15384615;
    margin-bottom: 4px;
}

%invertone {
    -webkit-filter: invert(1);
    filter: invert(1);
}
%cover {
    -o-object-fit: cover;
    object-fit: cover;
}

%transication-mar {
    transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
}
%userselect {
    -webkit-user-select: $none;
    -moz-user-select: $none;
    -ms-user-select: $none;
    user-select: $none;
}

%flex-basis {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}
%infinitespin {
    animation: fa-spin 2s linear infinite;
    -webkit-animation: fa-spin 2s linear infinite;
}
%transication-opacity {
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

%btnprimary-active {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 3px rgba(49, 132, 253, 0.5) !important;
}
%btnsuccess-active {
    background-color: #157347;
    border-color: #146c43;
    box-shadow: 0 0 0 3px rgba(60, 153, 110, 0.5) !important;
}
%btndanger-active {
    background-color: #bb2d3b;
    border-color: #b02a37;
    box-shadow: 0 0 0 3px rgba(225, 83, 97, 0.5) !important;
}
%btnwarning-active {
    background-color: #ffca2c;
    border-color: #ffc720;
    box-shadow: 0 0 0 3px rgba(217, 164, 6, 0.5) !important;
}
%flxflow-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
}
%embose-button {
    width: 28px;
    height: 28px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
}
@mixin flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
@mixin boxshadow {
    box-shadow: 0 1px 1px #0000000a;
    -webkit-box-shadow: 0 1px 1px #0000000a;
}
@mixin line-clamp {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -o-text-overflow: $ellipsis;
    text-overflow: $ellipsis;
}
@mixin tablecoll {
    border-collapse: collapse;
    border-collapse: separate;
}
@mixin collapse {
    border-collapse: collapse;
}
@mixin googletxt {
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(#eb4335),
        color-stop(#fbbc04),
        color-stop(#34a853),
        to(#4285f4)
    );
    background: linear-gradient(to right, #eb4335, #fbbc04, #34a853, #4285f4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
@mixin appearance {
    -webkit-appearance: unset;
    -moz-appearance: unset;
    appearance: unset;
}
@mixin rotate180 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
@mixin rotate90 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
@mixin placeholder {
    &::-webkit-input-placeholder {
        @content;
    }
    &:-moz-placeholder {
        @content;
    }
    &::-moz-placeholder {
        @content;
    }
    &:-ms-input-placeholder {
        @content;
    }
}