:root {
  --vs-blue: #94c3e7;
    --vs-blue-hover: #004DA5;
    --vs-blue-light-hover: #c4e8fd;
    --vs-blue-font-hover: #404041;
    --vs-blue-font: #41538A;
    --vs-blue-bar-font:#757575;
    --vs-blue-bar-font-hover: #222;
    --vs-blue-disabled: #dce5ed;
    --vs-blue-bg: #f0f4f7;
    --vs-blue-bar-hover:#CFE9F7;
    --vs-blue-bg-hover:#d6edff;
    --vs-brand:#DB0025;
    --vs-brand-hover:#EF1A3E;
    --vs-brand-press:#A6011D;
    --vs-white-bg-hover:#F7F7F7;
    --vs-white-bg-press:#F2f2f2;
    --vs-body-font: #404041;
    --vs-body-font-hover:#005a9e;
     --vs-sky-50:#E8F7FF;
     --vs-sky-100:#D6EDff;
    --vs-sky-400:#5EA4DA;
    --vs-sky-500:#147AC8;
    --vs-sky-600:#106FBA;
    --vs-sky-700:#005A9E;
    --vs-sky-900:#04345B;
   
    --vs-violet-50:#EDEDFD;
    --vs-violet-500:#4848F0;
    --vs-violet-700:#2E2EB2;
    --vs-violet-900:#141475;
    --vs-blue-50:#f2f7fc;
    --vs-red-300:#FFBDC8;
    --vs-lighter-blue:#E8F2F9;
    --vs-subtle-blue:#F2F7FC;
    --vs-p-xs-size:12px;
    --vs-p-sm-size:14px;
    --vs-p-xs-lineheight: 18px;
    --vs-p-md-size:16px;
    --vs-p-md-lineheight: 22px;
}
.btn-blue-primary,.btn-blue-secondary,.btn-blue-ghost ,.btn-red, .btn-white{  
    font-weight: 700;
    border-radius: 50px;
    font-size: 16px;
    letter-spacing: .5px;
    margin-top: 0;
    padding: 0.65em 24px;
    text-transform: capitalize;
    transition: border .5s, color .5s, background .5s;
    -webkit-transition: border .5s, color .5s, background .5s;
    min-width: 180px;
}
.btn-red{background: var(--vs-brand);color: #fff;border: 1px solid var(--vs-brand);}
.btn-red:hover{background: var(--vs-brand-hover);color: #fff;border: 1px solid var(--vs-brand-hover);}
.btn-red:active{background: var(--vs-brand-press);color: #fff;border: 1px solid var(--vs-brand-press); box-shadow:none}
.btn-white{color:var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover); background: #fff;}
.btn-white:hover{background: var(--vs-brand-hover);color:#fff;border: 1px solid var(--vs-brand-hover);}
.btn-white:active{background: var(--vs-white-bg-press);color:var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover); box-shadow:none}
.btn-blue-primary{background: var(--vs-sky-500);color: #fff;border: 1px solid var(--vs-sky-500);}

.btn-blue-secondary{background: #fff;color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-ghost{color:var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-primary:hover,.btn-blue-secondary:hover{background: var(--vs-sky-700);color: #fff;border: 1px solid var(--vs-sky-700);}
.btn-blue-primary:active,.btn-blue-secondary:active{background: var(--vs-sky-900);color: #fff;border: 1px solid var(--vs-sky-900);}

.btn-blue-ghost:hover{background: #fff;color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue-font-hover);}
.btn-blue-ghost:active{background: var(--vs-blue-hover);color: var(--vs-blue-font-hover);border: 1px solid var(--vs-blue);}
.txt-blue{color: var(--vs-sky-700);}
a.txt-blue:hover{color: var(--vs-sky-700);text-decoration: underline;}
.bg-blue{background:var(--vs-blue-bg)}
.bg-blue-gradient{background:linear-gradient(180deg, var(--vs-blue-bg), transparent)}
.bg-blue-bottom{background: linear-gradient(to top,#f0f4f7 0%,#f0f4f7 40%, #fff 40%);}
.bg-blue-top {background: linear-gradient(to bottom, #f0f4f7 0%, #f0f4f7 60%, #fff 60%);}
.bg-white-blue {background: linear-gradient(to top, #f0f4f7 70%, #fff 100%);}
.bg-gray{background: linear-gradient(to top, var(--vs-white-bg-hover) 25%, #fff 100%);}
.bg-dark-gray{background: linear-gradient(to bottom, #00000000 0%, #000 100%); opacity: 0.6;}