html
{
    overflow-y: scroll !important;
}
.nav-tabs {
    border-bottom: 2px solid #DDD;
}

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        border-width: 0;
    }

    .nav-tabs > li > a {
        border: none;
        color: #666;
    }

        .nav-tabs > li.active > a, .nav-tabs > li > a:hover {
            border: none;
            color: #4285F4 !important;
            background: transparent;
        }

        .nav-tabs > li > a::after {
            content: "";
            background: #4285F4;
            height: 2px;
            position: absolute;
            width: 100%;
            left: 0px;
            bottom: -1px;
            transition: all 250ms ease 0s;
            transform: scale(0);
        }

    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {
        transform: scale(1);
    }

.tab-nav > li > a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
}

.tab-pane {
    padding: 15px 0;
}

.tab-content {
    padding: 20px;
}

.card {
    background: #FFF none repeat scroll 0% 0%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 30px;
}

body {
    background: #EDECEC;
    padding: 50px;
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;700&display=swap');

:root {
    --font-barlow: 'Barlow', sans-serif;
    --font-barlowCondensed: 'Barlow Condensed', sans-serif;
    --time-nav-hover: 0.25s;
    --color-fire: #E30000;
    --color-black: #191919;
    --color-grey-5: #FBFBFB;
    --color-grey-10: #F6F7F7;
    --color-grey-cool-10: #EEEEEF;
    --color-grey-15: #E8E8E8;
    --color-grey-20: #D5D6D8;
    --color-grey-60: #ABADB1;
    --color-grey-70: #888891;
    --color-grey-80: #6B6A6A;
    --color-grey-85: #59595F;
    --shadow-fire: 0 4px 12px 4px rgba(227,0,0,0.2), 0 1px 3px 0 rgba(137,7,7,0.4);
    --focus-style: dotted 2px var(--color-black);
    --focus-offset: 2px;
}


body {
    color: var(--color-black);
    font-family: var(--font-barlow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
}

#inputContainer {
    height: 100vh;
    margin: 0 auto;
    max-width: 50em;
    padding: 2em;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.inputGroup {
    display: block;
    margin: 0 0 1.5em;
}

.label {
    display: block;
    font-size: 1.5em;
    font-weight: 700;
    font-family: var(--font-barlowCondensed);
    line-height: 1.25em;
    margin: 0 0 .6em;
    padding: 0;
    text-transform: uppercase;
}

.segmentedControl {
    --options: 3;
    --options-active: 1;
    --options-gap: .5em;
    background: var(--color-grey-10);
    border: solid 1px var(--color-grey-70);
    border-radius: 0.25em;
    position: relative;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    .segmentedControl--group;

{
    flex: 0 0 auto;
    margin: var(--options-gap);
    width: calc((100% - ((var(--options)*var(--options-gap))*2)) / var(--options));
    display: flex;
    flex-flow: row;
    justify-content: stretch;
    align-items: stretch;
    input;

{
    opacity: 0;
    position: absolute;
}

input + label {
    border-radius: .25em;
    flex: 1 1 100%;
    font-size: 1.25em;
    font-weight: normal;
    font-family: var(--font-barlow);
    line-height: 1;
    margin: 0;
    padding: 0.5em 0;
    position: relative;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    &::before,&::after;

{
    border-radius: inherit;
    content: "";
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

&::before {
    background: var(--color-grey-20);
    transition: opacity .15s ease;
}

&::after {
    background: var(--color-fire);
    box-shadow: var(--shadow-fire);
    transition: opacity .15s ease;
}

&:hover {
    &::before;

{
    opacity: 1;
}

}
}

input:focus + label {
    outline: none;
}

input:focus-visible + label {
    outline: var(--focus-style);
    outline-offset: var(--focus-offset);
}

input:-moz-focusring + label {
    outline: var(--focus-style);
    outline-offset: var(--focus-offset);
}

input:checked + label {
    background: var(--color-grey-10);
    color: #fff;
    font-weight: 700;
    &::after;

{
    opacity: 1;
    transform: scale(1);
}

}
}
}

@media (prefers-reduced-motion: no-preference) {
    .segmentedControl {
        .segmentedControl--group;

{
    input + label;

{
    transition: color .2s ease;
    &::before;

{
    transition: opacity .3s ease;
}

&::after {
    transform: scale(.85,.5);
    transition: opacity .15s ease, transform .3s cubic-bezier(0,.99,.52,1.29);
}

}
}

&.useSlidingAnimation {
    &::before;

{
    background: var(--color-fire);
    border-radius: .375em;
    box-shadow: var(--shadow-fire);
    content: "";
    display: block;
    height: calc(100% - (var(--options-gap)*2));
    position: absolute;
    top: var(--options-gap);
    left: var(--options-gap);
    transform: translateX( calc( (100% + (var(--options-gap) * 2) ) * (var(--options-active) - 1) ) );
    transition: transform cubic-bezier(.8,.34,.28,1.15) .35s;
    width: calc((100% - ((var(--options)*var(--options-gap))*2)) / var(--options));
}

.segmentedControl--group {
    input + label;

{
    background: none;
    transition: color .3s ease;
    &::before;

{
}

&::after {
    content: none;
}

}

input:checked + label {
    &:hover;

{
    &::before;

{
    opacity: 0;
}

}
}
}
}
}
}



/* utilities */
.visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.hidden {
    display: none !important;
}

.offscreen {
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

.formdefault {
    padding: 7px 5px!important;
    font-size: 13px!important;
    width: 32%!important;
    text-align: center;
    border-radius: 0px !important;
}

.newsletter {
    border-radius: 0;
    border-right: 0;
    background: #1e1e1e;
    border: 1px solid #242424;
    color: #c1c1c1;
    display: block;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    height: 50px;
    padding-left: 15px;
    padding-right: 55px;
    position: relative;
    -webkit-transition: all 500ms ease 0s;
    transition: all 500ms ease 0s;
    width: 100%;
}

.newslatterbtn {
    background: #1e1e1e none repeat scroll 0 0;
    border-left: 2px solid #242424;
    color: #ffffff;
    display: block;
    height: 50px;
    padding: 10.5px 0;
    position: absolute;
    right: 7px;
    text-align: center;
    transition: all 500ms ease 0s;
    width: 50px;
    border-top: 1px solid #242424;
    border-right: 1px solid #242424;
    border-bottom: 1px solid #242424;
}

.bxicon {
    padding: 4px;
    border-radius: 50%;
    background: #e1f1ff;
    font-size: 25px;
    color: #1f80ff;
}
/* custom input ref. https://codepen.io/lewisvrobinson/pen/EyZwjR */
.custom-form textarea {
    resize: none;
}

.custom-form input, .custom-form textarea {
    background: #e8f0fe;
    border: 1px solid #eee !important;
    color: #243665;
    font-size: 16px;
    padding: 10px 10px 10px 10px;
    display: block;
    width: -webkit-fill-available;
    border: none;
    border-radius: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

    .custom-form input:focus, .custom-form textarea:focus {
        outline: none;
        color: #243665;
    }

        .custom-form input:focus ~ label, .custom-form textarea:focus ~ label, .custom-form input:valid ~ label, .custom-form textarea:valid ~ label {
            top: -18px;
            left: 4px;
            font-size: 13px;
            color: #243665;
        }

        .custom-form input:focus ~ .bar:before, .custom-form textarea:focus ~ .bar:before {
            width: -webkit-fill-available;
        }

    .custom-form input[type="password"] {
        letter-spacing: 0.3em;
    }

.custom-form label {
    color: #c6c6c6;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 15px;
    top: 10px;
    transition: 300ms ease all;
}

.custom-form .bar {
    position: relative;
    display: block;
    width: auto;
}

    .custom-form .bar:before {
        content: '';
        height: 2px;
        width: 0;
        bottom: 0px;
        position: absolute;
        background: #243665;
        transition: 300ms ease all;
        left: 0%;
    }
/* custom input end */

/*custom dropdown ref. https://codepen.io/pavelvaravko/pen/qjojOr */
/*.wrap {
    position: absolute;
    right: 0;
    top: 40%;
    width: 100%;
    left: 0;
    margin: 0 auto;
}*/

/* select starting stylings ------------------------------*/
.select {
    position: relative;
    width: 100%;
}

.select-text {
    position: relative;
    color: #243665;
    font-family: inherit;
    background-color: transparent;
    width: 100%;
    padding: 10px 10px 10px 5px;
    font-size: 18px;
    border-radius: 0;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3); /*1px solid rgba(0,0,0, 0.12)*/
}

    /* Remove focus */
    .select-text:focus {
        outline: none;
        border-bottom: 1px solid rgba(0,0,0, 0);
    }

/* Use custom arrow */
.select .select-text {
    appearance: none;
    -webkit-appearance: none
}

.select:after {
    position: absolute;
    top: 18px;
    right: 10px;
    /* Styling the down arrow */
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
}


/* LABEL ======================================= */
.select-label {
    color: #c6c6c6; /*rgba(0,0,0, 0.26)*/
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 10px;
    transition: 0.2s ease all;
}

/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
    color: #243665;
    top: -14px;
    transition: 0.2s ease all;
    font-size: 12px;
}

/* BOTTOM BARS ================================= */
.select-bar {
    position: relative;
    display: block;
    width: 100%;
}

    .select-bar:before, .select-bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        position: absolute;
        background: #243665;
        transition: 0.2s ease all;
    }

    .select-bar:before {
        /*left: 50%;*/
    }

    .select-bar:after {
        /*right: 50%;*/
    }

/* active state */
.select-text:focus ~ .select-bar:before, .select-text:focus ~ .select-bar:after {
    width: 100%;
}

/* HIGHLIGHTER ================================== */
.select-highlight {
    position: absolute;
    height: 60%;
    width: 100%;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}
/*custom dropdown END*/
.tawk-min-container .tawk-button-circle.tawk-button-large {
    width: 50px !important;
    height: 50px !important;
}