:root {
    --circle-size: clamp(1.5rem, 1.5vw, 2rem);
    --spacing: clamp(0.25rem, 2vw, 0.5rem);
}

.c-stepper {
    display: flex;
}

.c-stepper__item {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    /*circles*/
    &:before
    {
        --size: 3rem;
        content: "";
        display: block;
        width: var(--circle-size);
        height: var(--circle-size);
        border-radius: 50%;
        background-color: lightgrey;
        background-color: #06568c;
        opacity: 0.5;
        margin: 0 auto 1rem;
    }
    /*Line between circles*/
    &:not(:last-child) {
        &:after

        {
            content: "";
            position: relative;
            top: calc(var(--circle-size) / 2);
            width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
            left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
            height: 2px;
            background-color: #e0e0e0;
            order: -1;
        }

    }
}

.c-stepper__item_before {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    /*circles*/
    &:before

{
    --size: 3rem;
    content: "";
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: lightgrey;
    background-color: #1e750b;
    opacity: 0.5;
    margin: 0 auto 1rem;
}
/*Line between circles*/
&:not(:last-child) {
    &:after

{
    content: "";
    position: relative;
    top: calc(var(--circle-size) / 2);
    width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
    height: 2px;
    background-color: #3ebeed;
    order: -1;
}

}
}

.c-stepper__item_after {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
    /*circles*/
    &:before

{
    --size: 3rem;
    content: "";
    display: block;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background-color: lightgrey;
    background-color: black;
    opacity: 0.5;
    margin: 0 auto 1rem;
}
/*Line between circles*/
&:not(:last-child) {
    &:after

{
    content: "";
    position: relative;
    top: calc(var(--circle-size) / 2);
    width: calc(100% - var(--circle-size) - calc(var(--spacing) * 2));
    left: calc(50% + calc(var(--circle-size) / 2 + var(--spacing)));
    height: 2px;
    background-color: #e0e0e0;
    order: -1;
}

}
}


.c-stepper__title {
    font-weight: bold;
   /* font-size: clamp(1rem, 1.00vw, 1.25rem);*/
    font-size:100%;
    margin-bottom: 0.5rem;
}

.c-stepper__desc {
    color: grey;
    font-size: 90%;
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}


.nav-link.custom.active{
    font-weight:bolder;    
}

.custom-date-i{
    font-size:85%;
    font-weight:lighter;
}

.custom-date-ii {
    font-size: 80%;
    font-weight: lighter;
}

.custom-card-title{
    font-weight:bolder;
    font-size:90%;
}

.custom-card-content{
    font-size:85%;
    font-style:italic;
}

.custom-card-misc {
    font-size: 85%;
    font-weight: lighter;
}

.custom-form-label{
    font-size:85%;
    font-weight:lighter;
}

.custom-form-input{
    font-size:90%;
}

.custom-info-label {
    background-color: #edf1f5
}

.custom-form-req {
    color:red;
}

.custom-grid {
    font-size:90%;
}
.custom-grid-header th{
    background-color: #497ac9 !important;
    color:white;
}



.custom-text-smaller {
    font-size:90%;
}

.custom-text-smallest {
    font-size: 80%;
}

.custom-tooltip {
    cursor: pointer;
    font-size: 80%;
}

.custom-text-larger{
    font-size: 120%;
}

.custom-text-largest {
    font-size: 150%;
}

.custom-search-bg {
    background-color: #e9f7ea !important;
}

.custom-grid-bg {
    background-color: #edf1f5;
}

.custom-tab-width{
    width:16.5%;
}

.custom-tab-width-7cols {
    width: 14.2%;
}

.custom-quote-prod-row{
    height:80%;
}

.custom-notify{
    font-size: 80%;
    border:1px solid black;
    position:absolute;
    top:1.5%;
    right:0;
    margin-right:5px;
    z-index:5;
}

.custom-user-tag {
    background-color: #f2f2f2;
    display: inline-block;
    padding: 10px;
    border: solid 1px #7e7e7e;
    margin-inline-end:10px;
    font-size:medium;
}

.custom-scarlet {
    background-color: #A31700;
    color: white;
}

.custom-grey {
    background-color: #A2A2A2;
}


.custom-scarlet-border {
    border-color: #A31700 !important;
}

.custom-grey-border {
    border-color: #A2A2A2 !important;
}

.custom-lighter-grey {
    background-color: #E9E9E9;
}

.custom-lightest-grey {
    background-color: #ECECEC;
}

.custom-discount-tag {
    background-color: #8BE57D;
}

.custom-normal-tag {
    background-color: #9ddcf6;
}

.custom-vat-tag {
    background-color: #FFD966;
}

.custom-bundle-tag {
    background-color: #1692EF;
    color: white;
}

.custom-accent {
    background-color: #ff8e01;
}

.custom-accent li {
    padding:6px 4px 6px 4px;
}

.custom-accent li:hover{
    background-color:#BF7512 !important;
}

.custom-accent a:hover{
    background-color:#BF7512 !important;
}

.custom-accent-border {
    border-color: #BF7512 !important;
    border-width: 1px !important;
}

.custom-accent2 {
    background-color: #efefef;
    padding:4px 4px 4px 4px !important;
}

.custom-accent2 :hover{
    background-color: #A2A2A2;
     padding:4px 4px 4px 4px;
}

.custom-accent3 {
    background-color: #efefef;
    padding: 4px 4px 4px 4px !important;
}

.custom-accent-tone {
    background-color: #429EBD !important;
    color: white;
}

.custom-banner-text {
    font-size: 180%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1b6ec2;
    color:white;
}

.custom-selected-bg {
    color: white !important;
    background-color: #3D85C6 !important;
}

.custom-selected-color {
    color: #3D85C6 !important;
}

.custom-dash-grid {
    font-size: 90%;
}

.custom-dash-grid-header th{
    background-color: #3D85C6 !important;
    color:white !important;

}

.custom-2grid-header th {
    background-color: #497ac9 !important;
    color: white;
}

.custom-chat-bg {
    /*#BEC1C4* #edf1f5*/
    background-color: #EDEEF0;
    border: 2px solid #7A7B7E;
}

.custom-chat-username{
    font-size:80%;
}

.custom-chat-timestamp {
    font-size: 75%;
}

.custom-chatlog {
    height: 85%;
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;
}

.custom-collab-chatlog {
    height: 80%;
    overflow: auto;
    display: flex;
    flex-direction: column-reverse;
}

.custom-chat-dialog {
    font-size: 90%;
    position: relative;
    background-color: #ACD5AC;
    /* border: 1px solid #666666;*/
    border-radius: 5px;
}

    .custom-chat-dialog:before {
        content: "";
        position: absolute;
        right: 100%;
        top: 25%;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-right: 13px solid #ACD5AC;
        border-bottom: 7px solid transparent;
    }

.custom-chat-self-dialog {
    font-size: 90%;
    background-color: #CAE1F4;
    position: relative;
    color: black;
    border-radius: 5px;
}

    .custom-chat-self-dialog:after {
        content: "";
        position: absolute;
        left: 100%;
        top: 25%;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-left: 13px solid #CAE1F4;
        border-bottom: 7px solid transparent;
    }

.custom-chat-mention {
    font-size:90%;
    color: black;
    padding: 2px 4px 2px 4px;
    background-color: #99C5E8;
    font-weight: bold;
}
.custom-options-font{
    font-family: 'Roboto-Regular' !important;
}

.custom-desc-bg {
    background-color: #BDDDFF;
    border-color: #0066CC !important;
}

optionsGroup {
    font-family: 'Roboto-Regular';
}

.custom-font-poppins {
    font-family: 'Roboto-Regular';
}

.custom-loading-bg {
   background-color:#a0d991;
}

.custom-mention-init {
    position: absolute;
    z-index: 10;
    display: none;
}

.custom-collab-mention-init {
    position: absolute;
    z-index: 10;
    display: none;
}

.custom-mention-hide {
    position: absolute;
    z-index: 10;
    top: var(--y);
    left: var(--x);   
    /*border: 1px solid grey;
    padding: 5px 5px 5px 5px;*/
    font-size: 80%;
    display: none
}

.custom-collab-mention-hide {
    position: absolute;
    z-index: 10;
    top: var(--y);
    left: var(--x);
    /*border: 1px solid grey;
    padding: 5px 5px 5px 5px;*/
    font-size: 80%;
    display: none
}

.custom-mention-show {
    position: absolute;
    z-index: 10 !important;
    top: var(--y);
    left: var(--x);    
    /* border: 1px solid grey;
    padding: 5px 5px 5px 5px;*/
    font-size: 80%;
}

.custom-collab-mention-show {
    position: absolute;
    z-index: 10;
    top: var(--y);
    left: var(--x);
    /* border: 1px solid grey;
    padding: 5px 5px 5px 5px;*/
    font-size: 80%;
}

.custom-counter-large {
    font-family: 'Roboto-Regular';
    font-size: 250%;
    color: #0b2364;
}

.custom-counter-largest {
    font-family: 'Roboto-Regular';
    font-size: 550%;
    color: #0b2364;
}

/*NCAA Ohio State Buckeyes*/

    .btn-toggle {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    /*font-weight: 600;*/
   /* color: rgba(0, 0, 0, .65);*/
    color:white;
    background-color: transparent;
    border: 0;
}

.btn-toggle:hover,
.btn-toggle:focus {
    color: rgba(0, 0, 0, .85);
    /*background-color: #d2f4ea;*/
}

.btn-toggle::before {
    width: 1.25em;
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform .35s ease;
    transform-origin: .5em 50%;
}

.btn-toggle[aria-expanded="true"] {
    color: rgba(0, 0, 0, .85);
}

.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.btn-toggle-nav a {
    display: inline-flex;
    padding: .1875rem .5rem;
    margin-top: .125rem;
    margin-left: 1.25rem;
    text-decoration: none;
}

.btn-toggle-nav a:hover,
.btn-toggle-nav a:focus {
    /*background-color: #d2f4ea;*/
}