:root {
    --color-op: #607D8B;
    --color-gray: #cccccc;
    --color-gray-med: #888;
    --color-dark-gray: #555555;
    --color-blue: #9fafbc;
    --color: #000;
    --bg-color: #f9f9f9;
    --hover-bg-color: #e9e9e9;
    --primary-color: #fc4c02;
    --secondary-color: #f68727;
    --muted-color: #999;
    --link-color: #17f;
    --code-color: var(--primary-color);
    --code-bg-color: #fff;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --code-font: Menlo, Consolas, Monaco, Lucida Console, monospace;
    --code-font-size: 0.75rem;
    --bold: 700;
    --x-bold: 900;
    --line-height: 1.5em;
    --line-height-heading: 1.3em;
    --text-transform-heading: uppercase;
    --border-color: #000;
    --border-color-light: #ccc;
    --border-radius: 6px;
    --border-radius-large: 8px;
    --border-radius-xl: 12px;
    --page-width: 56rem;
    --sm-screen: 720px;
}
.hidden {
    display:none;
}
.no-padding{
    padding:0px;
} 
.no-margin{
    margin: 0px;
}
.toast {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 3000;
}

/* bootstrap form control */
.form-control {
    border-radius: 2px;
}
.tooltip-blue {
    color: #0d6efd;
}
a {
    text-decoration: none;
    color: var(--color-op);
}
a:hover {
    text-decoration: underline;
}
.red {
    color: red;
}
/******************************** Switches **********************************/
.form-check-input:checked {
    background-color: #2196F3;
    border-color: #2196F3;
}

/******************************** Buttons ***********************************/
.btn {
    border-radius: 2px;
    margin: 10px 0px;
    border: 1px solid var(--color-gray);
}

.btn-op {
    background-color: darkslategray;
    color: #fff;
}

.btn-op:hover {
    color: #fff;
    font-weight: bolder;
}

.btn-op:active, .btn-op:focus {
    color: #fff;
}

.btn-gray {
    background-color: var(--color-gray);
    color: #000;
}

/******************************* NAVBAR ***************************************/
.op-bg-navbar {
    background-color: #484848;
    border-color: #484848;
}

.avatar-circle {
    width: 30px;
    height: 30px;
    background-color: #9d9d9d;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    float: left;
}

.initials {
    position: relative;
    top: 5px; /* 25% of parent */
    font-size: 18px; /* 50% of parent */
    line-height: 18px; /* 50% of parent */
    color: #fff;
    font-family: "Courier New", monospace;
    font-weight: bold;
}

.box {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    font-size: 18px;
    font-family: Raleway;
    border: 1px solid #aaaaaa;
    background-color: #fff;
}

.box-transparent {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    font-family: Raleway;
    border: none;
    background-color: rgba(255, 255, 255, .6);
    border-radius: 2px;
}
.box-transparent-dark {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    font-family: Raleway;
    border: none;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 4px;
}

/****************************** Tabs Stepper **********************************/
.steps-headers {
    text-align: center;
    margin-top:10px;
    width: 100%;
}

.nav-steps {
    border: none;
    padding-bottom: 1px;
    background-color: var(--color-gray);
    /*display: inline-block;
    overflow: hidden;*/
}
.nav-link {
    color: var(--color-dark-gray);
}
.nav-steps > li {
    color: #fff;
    position: relative;
    /*width: 15%;*/
    margin: 0px;
    box-sizing: border-box;
}
.nav-steps > li > a:after {
    content: '';
    border-left: 23px solid transparent; /*var(--color-gray);*/
    border-top: 20px solid transparent;
    border-bottom: 22px solid transparent;
    position: absolute;
    top: 0;
    left: 99%;
    z-index: 30;
}


/* disable step arrow style for last item */
.nav-steps > li:last-child > a:after {
    display: none;
}

/* hover state */
.nav-steps > li > a:hover {
    background-color: var(--color-blue);
    color: white;
    border-radius: 0px;
    border-left-color: var(--color-blue) !important;
}

/* step arrow color on hover:after */
.nav-steps > li > a:hover:after {
    border-left-color: var(--color-blue) !important;
}

/* active state */
    .nav-steps > li.active > a, .nav-steps > li.active > a:hover, .nav-steps > li.active > a:focus, .nav-steps > li > a.active {
        background-color: var(--color-op);
        color: white;
        border-radius: 0px;
    }
    .nav-steps > li > a.active:after {
        border-left-color: var(--color-op) !important;
    }

/* step arrow color on active:after */
    /*.nav-steps > li::after a.active {
        border-left-color: var(--color-op);
    }*/

/* Stylish Tabs ContactsAdd */
/*.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}*/

/************************************ Tabs *****************************************/
.nav-tabs-op .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #444;
    font-size: 20px;
}

.nav-fill .nav-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
}

.nav-tabs .nav-item {
    margin-bottom: -1px;
}

/*.nav-link {
    display: block;
    padding: .5rem 1rem;
}*/
/*#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {*/
.nav-tabs-op > li > a.active {
    color: #666;
    background-color: transparent !important;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 4px solid !important;
    font-weight: bold;
    border-radius: 0px;
}
.nav-tabs-op > li > a.active:hover, .nav-tabs-op > li > a.active:focus {
    color: #555555;
    cursor: default;
    background-color: transparent;
    border: none;
    border-bottom-color: transparent;
}
/************************************ Bootstrap 5 Floating Labels Beta ****************************************/
.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}

    .form-label-group > input,
    .form-label-group > label {
        height: 3.125rem;
        padding: .75rem;
    }

    .form-label-group > label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        color: #495057;
        pointer-events: none;
        cursor: text; /* Match the input under the label */
        border: 1px solid transparent;
        border-radius: .25rem;
        transition: all .1s ease-in-out;
    }

    .form-label-group input::-webkit-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-ms-input-placeholder {
        color: transparent;
    }

    .form-label-group input::-moz-placeholder {
        color: transparent;
    }

    .form-label-group input::placeholder {
        color: transparent;
    }

    .form-label-group input:not(:-moz-placeholder-shown) {
        padding-top: 1.25rem;
        padding-bottom: .25rem;
    }

    .form-label-group input:not(:placeholder-shown) {
        padding-top: 1.25rem;
        padding-bottom: .25rem;
    }

    .form-label-group input:not(:-moz-placeholder-shown) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

    .form-label-group input:not(:placeholder-shown) ~ label {
        padding-top: .25rem;
        padding-bottom: .25rem;
        font-size: 12px;
        color: #777;
    }

/* Fallback for Edge */
@supports (-ms-ime-align: auto) {
    .form-label-group > label {
        display: none;
    }

    .form-label-group input::-ms-input-placeholder {
        color: #777;
    }
}
/***************************** Select2 **************************************/
.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important
}
.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
    border: 1px solid #d2d6de;
    border-radius: 2px!important;
    padding: 6px 12px;
    height: 34px
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none
}

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 10px
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-left: 0;
        padding-right: 0;
        height: auto;
        margin-top: -3px
    }

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px
}

.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
    border: 1px solid #d2d6de;
    border-radius: 0 !important;
    padding: 6px 12px;
    height: 40px !important
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 6px !important;
    right: 1px;
    width: 20px
}