/* GLOBAL VARS */

:root {
    --kb-blue: #1DFFFF;
    --kb-lightblue: #28E8C3;
    --kb-darknavy: #2B3E4F;
    /*--kb-warm-biscuit: #F3F2EF;*/
    --kb-warm-biscuit: #F8F5F4;
    --kb-aqua: #45cebc;
    --kb-aqua-hover: #2fb1a0;
    --kb-purple: #33195B;
    --kb-purple-gradient: linear-gradient(45deg, rgba(49,11,81,1) 0%, rgba(53,41,103,1) 100%);
    --kb-purple-gradient-opposite: linear-gradient(135deg, rgba(49,11,81,1) 0%, rgba(53,41,103,1) 100%);
    --kb-purple-gradient-upsidedown: linear-gradient(225deg, rgba(49,11,81,1) 0%, rgba(53,41,103,1) 100%);
    --kb-purple-slim-nav: linear-gradient(0deg, rgba(66,32,118,1) 30%, rgba(32,8,70,1) 85%);
    --kb-purple-slim-nav-reverse: linear-gradient(0deg, rgba(32,8,70,1) 85%, rgba(66,32,118,1) 30%);
    --tequila-sunrise: linear-gradient(145deg, rgba(234,66,124,1) 0%, rgba(236,211,59,1) 100%);
    --kb-purple-hover: #200846;
    --kb-light-purple: #F2EFFB;
    --qb-green: #2ca01c;
    --grey: #ccc;
    --tag-grey: #D2D3D7;
    --tag-pink: #fb73f1;
    --tag-blue: #7373fb;
    --tag-purple: #33195B;
    --tag-purple-pop: #8328ea;
    --dark-grey: #999;
    --border-grey: #e1e1e1;
    --xeroblue: #02B7E3;
    --qb-green: #2CA01C;
    --stripe: #635BFF;
    --orange: #ff881f;
    --kb-hr-lines: var(--grey);
    --green: var(--alert-green);
    /*--alert-green: #1CCD76;*/
    --alert-green: #1cb454;
    --yellow: var(--alert-yellow);
    --alert-yellow: #fcb635;
    --red: var(--alert-red);
    --alert-red: #F7746B;
    /*--icon-green: #86BC25;*/
    --icon-green: #1cb454;
    --button-radius: 40px;
    --btn-radius: 40px;
    --table-radius: 4px;
    --border-radius: 4px;
    --input-radius: var(--table-radius);
    --hover-transition: all 0.1s ease-in;
    --btn-font-size: 16px;
    --box-shadow: -3px 2px 5px 1px rgba(204,204,204, 0.50);
    --box-shadow-dark: -3px 2px 5px 1px rgba(0,0,0, 0.20);
    --font-inter: 'Inter var', sans-serif;
    --faded-aqua: rgba(69, 206, 188, 0.1);
    --faded-purple: rgba(51, 25, 91, 0.1);
    --tab-nav-bg: #F8F4FF;
}

.weight-extra-light {
    font-family: 'Inter';
    font-variation-settings: 'wght' 200;
}

.weight-light {
    font-family: 'Inter';
    font-variation-settings: 'wght' 400;
}

.weight-medium {
    font-family: 'Inter';
    font-variation-settings: 'wght' 500;
}

@keyframes weight {
    50% {
        font-variation-settings: 'wght' 900;
    }
}

@font-face {
    font-family: 'Inter var';
}

/* --- COLOURS --- */
.white{
    color: white;
}
.red {
    color: var(--alert-red);
}

.yellow {
    color: var(--alert-yellow);
}

.orange {
    color: var(--orange);
}

.green {
    color: var(--alert-green);
}

.aqua {
    color: var(--kb-aqua);
}

.purple {
    color: var(--kb-purple);
}
.purple-pop{
    color: var(--tag-purple-pop);
}

.dark-navy {
    color: var(--kb-darknavy);
}

.gery-text {
    color: var(--tag-grey);
}

.white-text{
    color: white;
}
.black-text{
    color: black;
}

.white-bg{
    background: white;
}

/* Helper classes */

.no-pointer-events{
    pointer-events: none;
}

/* Text Transform */
.uppercase {
    text-transform: uppercase;
}

/* Text Weights */
.strong {
    font-weight: 600;
}

.font-normal {
    font-weight: normal;
}

/* Vertical Align */
.va-unset {
    vertical-align: unset;
}

.va-bottom {
    vertical-align: bottom;
}

.va-sub {
    vertical-align: sub;
}

.va-top {
    vertical-align: top;
}

/* Border Radius */
.border-radius{
    border-radius: var(--border-radius)!important;
}
.button-border-radius {
    border-radius: var(--button-radius) !important;
}
.border-bottom-radius {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* borders */
.border-top{
    border-top: 1px solid var(--grey);
    padding-top: 20px;
    margin-top: 20px;
}
.border-bottom {
    border-bottom: 1px solid var(--grey);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* padding top */
.pt-0 {
    padding-top: 0;
}

.pt-1 {
    padding-top: .25rem;
}

.pt-2 {
    padding-top: .5rem;
}

.pt-3 {
    padding-top: 1rem;
}

.pt-4 {
    padding-top: 1.5rem;
}

.pt-5 {
    padding-top: 3rem;
}

.no-pt {
    padding-top: 0!important;
}

/* padding right */
.pr-0 {
    padding-right: 0;
}

.pr-1 {
    padding-right: .25rem;
}

.pr-2 {
    padding-right: .5rem;
}

.pr-3 {
    padding-right: 1rem;
}

.pr-4 {
    padding-right: 1.5rem;
}

.pr-5 {
    padding-right: 3rem;
}

/* padding bottom */
.pb-0 {
    padding-bottom: 0;
}

.pb-1 {
    padding-bottom: .25rem;
}

.pb-2 {
    padding-bottom: .5rem;
}

.pb-3 {
    padding-bottom: 1rem;
}

.pb-4 {
    padding-bottom: 1.5rem;
}

.pb-5 {
    padding-bottom: 3rem;
}


/* padding left */
.pl-0 {
    padding-left: 0;
}

.pl-1 {
    padding-left: .25rem;
}

.pl-2 {
    padding-left: .5rem;
}

.pl-3 {
    padding-left: 1rem;
}

.pl-4 {
    padding-left: 1.5rem;
}

.pl-5 {
    padding-left: 3rem;
}

/* margin top */
.mt-0 {
    margin-top: 0;
}

.mt-1 {
    margin-top: .25rem;
}

.mt-2 {
    margin-top: .5rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mt-5 {
    margin-top: 3rem;
}


/* margin right */
.mr-0 {
    margin-right: 0;
}

.mr-1 {
    margin-right: .25rem;
}

.mr-2 {
    margin-right: .5rem;
}

.mr-3 {
    margin-right: 1rem;
}

.mr-4 {
    margin-right: 1.5rem;
}

.mr-5 {
    margin-right: 3rem;
}

/* margin bottom */
.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: .25rem;
}

.mb-2 {
    margin-bottom: .5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.minusmb-5 {
    margin-bottom: -5px;
}


/* margin left */
.ml-0 {
    margin-left: 0;
}

.ml-1 {
    margin-left: .25rem;
}

.ml-2 {
    margin-left: .5rem;
}

.ml-3 {
    margin-left: 1rem;
}

.ml-4 {
    margin-left: 1.5rem;
}

.ml-5 {
    margin-left: 3rem;
}
/* FLOATS */
.float-right {
    float: right;
}

.float-left {
    float: left;
}

.float-none {
    float: none;
}

.em{
   font-style: italic;
}

/* DISPLAYS */
.d-inline-block {
    display: inline-block;
}

.d-block{
    display: block;
}
.d-block-force {
    display: block!important;
}
.d-none{
    display: none!important;
}

/* HEIGHTS */
.full-height{
    height: 100%!important;
}

/* BODY */
.body-fixed{
    position: fixed;
}

/* WIDTH */
.full-width{
    width: 100%!important;
}
.nintyfive-width {
    width: 95%;
}
.ninty-width {
    width: 90% !important;
}
.eighty-width {
    width: 80%!important;
}
.twenty-width{
    width: 20%!important;
}
.auto-width{
    width: auto!important;
}
/* BUTTONS */
.btn-rounded {
    color: white;
    font-size: 12px;
    background: #fff;
    text-align: center;
    border: none !important;
    border-radius: var(--button-radius) !important;
}
    .btn-rounded:hover {
        color: white;
        border: none !important;
    }

.btn-rounded-ghost {
    background-color: transparent;
    border-width: 1px!important;
    padding: 4px 10px;
    border-style: solid!important;
    transition: all 0.1s ease-in;
}
.btn-rounded-ghost:hover {
    border-width: 1px !important;
    border-style: solid !important;
}

.btn-rounded-big {
    min-width: 80px;
    padding: 10px 10%;
    max-width: 200px;
    width: auto !important;
}
/* transparent / white ghost button */
.btn-white-ghost {
    border-color: white;
    color: white;
}

.btn-white-ghost:hover {
    color: white!important;
    color: transparent!important;
    background: white;
}

/* PURPLE */
.btn-purple {
    background-color: var(--kb-purple);
    color: white;
}

    .btn-purple:hover,
    .btn-purple:focus,
    .btn-purple:active {
        color: white !important;
    }

.btn-purple-ghost {
    border-color: var(--kb-purple);
    color: var(--kb-purple);
}

    .btn-purple-ghost:hover,
    .btn-purple-ghost:active,
    .btn-purple-ghost:focus {
        background-color: var(--kb-purple);
        color: white !important;
    }

/* NAVY */
.btn-navy {
    background-color: var(--kb-darknavy);
    color: white;
}

    .btn-navy:hover {
        color: white !important;
    }

.btn-navy-ghost {
    border-color: var(--kb-darknavy);
    color: var(--kb-darknavy);
}

    .btn-navy-ghost:hover,
    .btn-navy-ghost:active,
    .btn-navy-ghost:focus {
        background-color: var(--kb-darknavy);
        color: white !important;
        border-color: var(--kb-darknavy);
    }

/* RED */
.btn-red {
    background-color: var(--red);
    color: white;
}

    .btn-red:hover, 
    .btn-red:active, 
    .btn-red:focus {
        color: white!important;
    }

.btn-red-ghost {
    border-color: var(--red);
    border: 0;
    border-width: 0!important;
    color: var(--red);
    -webkit-box-shadow: inset 0px 0px 0px 1px var(--red);
    -moz-box-shadow: inset 0px 0px 0px 1px var(--red);
    box-shadow: inset 0px 0px 0px 1px var(--red);
    color: var(--red);
}

    .btn-red-ghost:hover,
    .btn-red-ghost:active,
    .btn-red-ghost:focus {
        background-color: var(--red);
        color: white!important;
    }

/* AQUA */
.btn-aqua {
    background-color: var(--kb-aqua);
    color: white !important;
}

    .btn-aqua:hover,
    .btn-aqua:active,
    .btn-aqua:focus {
        color: white!important;
    }

.btn-aqua-ghost {
    border-color: var(--kb-aqua);
    color: var(--kb-aqua);
}

    .btn-aqua-ghost:hover,
    .btn-aqua-ghost:active,
    .btn-aqua-ghost:focus {
        color: white !important;
        border-color: var(--kb-aqua)!important;
        background-color: var(--kb-aqua);
    }

/* YELLOW */
.btn-yellow {
    background-color: var(--yellow);
    color: white;
}

    .btn-yellow:hover,
    .btn-yellow:active,
    .btn-yellow:focus {
        color: white!important;
    }

.btn-yellow-ghost {
    border-color: var(--yellow);
    color: var(--yellow);
    
}

    .btn-yellow-ghost:hover,
    .btn-yellow-ghost:active,
    .btn-yellow-ghost:focus {
        background-color: var(--yellow);
        color: white!important;
    }


/* GREY */
.btn-grey {
    background-color: #777;
    color: white;
}

.btn-grey:hover,
.btn-grey:focus,
.btn-grey:active {
    color: white !important;
}

.btn-grey-ghost {
    border-color: #777;
    color: #777;
}

.btn-grey-ghost:hover,
.btn-grey-ghost:active,
.btn-grey-ghost:focus {
    background-color: #777;
    color: white !important;
}




/* Secondary btn styles*/
.secondary-btn {
    background: var(--faded-aqua);
    border: 1px solid var(--faded-aqua);
    font-weight: 600;
}

.secondary-btn-purple {
    background: var(--faded-purple);
    border: 1px solid var(--faded-purple);
    font-weight: 600;
}


/* hover state fix for portal */
body.Portal input[type=button]:hover,
body.Portal input[type=button]:active,
body.Portal input[type=button]:focus,
body.Portal button:hover,
body.Portal button:active,
body.Portal button:focus {
    outline-width: 0px !important;
    border: 0 !important;
    color: white !important;
}
/* hover state fix for portal ghost buttons */

body.Portal button.btn-rounded-ghost:hover, 
body.Portal button.btn-rounded-ghost:focus, 
body.Portal button.btn-rounded-ghost:active {
    border-width: 1px !important;
    border-style: solid !important;
}


/* GLOBAL FIX TO REMOVE BLACK OUTLINE ON MODAL STATES*/
.modal.klipboard-modal:focus {
    outline: none!important;
}
button:focus,
button:active {
    outline: none !important;
}


/* FIX HEADING SPACING WHEN OPEN*/
.modal.klipboard-modal{
    top: 0px;
}

.word-break-all{
    word-break: break-all;
}
/* frozen cols grids */
.k-grid-content-locked,
.k-grid-header-locked {
    float: right !important;
}
.k-grid-header-locked .k-header{
    background: var(--kb-purple)!important;
    background-color: var(--kb-purple)!important;
}
    .bin-btn {
        min-width: 40px !important;
        font-size: 16px !important;
        width: auto !important;
    }


@media (max-width: 1439px) {
    span.back-to-pills{
    margin-left: 35px;
    line-height: 46px!important;
    }
}

.hihi {
    outline: 1px solid red;
}


@-moz-document url-prefix() {
    .firefox-padding-bottom {
        padding-bottom: 60px;
    }
}
.label-success{
    color: var(--icon-green)!important;
}

.hide{
    display: none!important;
}