:root {
    --bs-body-bg: #1B1D21;
    --bs-body-font-family: 'Roboto', sans-serif;
    --bs-primary: #009FE3;
    --bs-primary-rgb: 0,159,227;
    --bs-secondary: #FFFFFF;
    --bs-secondary-rgb: 255,255,255;
    /* --bs-body-color: #BDBDBD; */
    --bs-body-color: #fff;
    --bs-light: #BDBDBD;
    --bs-light-rgb: 189,189,189;
    --bs-dark: #292E32;
    --bs-dark-rgb: 41,46,50;
    --bs-danger: #BC192D;
    --bs-danger-rgb: 188,25,45;
    --bs-primary-hover: #49C2FF;
    --bs-secondary-hover: #49C2FF;
}

a {
    color: var(--bs-secondary);
    text-decoration: underline;
}

a:hover {
    color: var(--bs-light);
}

h1 {
    font-family: Inter, sans-serif;
    font-weight: 300;
    font-size: 1.875rem;
    color: #CED4DA;
}

h2 {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: #CED4DA;
}

h3 {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 1.375rem;
    color: #CED4DA;
}

h4 {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: #FFFFFF;
}

h5 {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 1.125rem;
    color: #FFFFFF;
}

h6 {
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #FFFFFF;
}

/* BREADCRUMBS */
.breadcrumb .breadcrumb-item a {
    color: #82878D;
    text-decoration: none;
    text-transform: uppercase;
}

.breadcrumb .breadcrumb-item.active {
    color: #CED4DA;
    text-decoration: none;
    text-transform: uppercase;
}


/* TABLE */
.table {
    --bs-table-border-color: #485158;
}

.table-dark {
    --bs-table-bg: #222222;
    border-color: var(--bs-light);
}

/* BUTTON STYLES */
.btn {
    /* border-radius: 0; */
}

.btn-group-lg>.btn, .btn-lg {
    --bs-btn-border-radius: 0.25rem;
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
    color: #212529
}

.btn-primary:disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-secondary:hover {
    background-color: var(--bs-secondary-hover);
    border-color: var(--bs-secondary-hover);
}

.btn-outline-primary {
    color: var(--bs-white);
    border-color: var(--bs-primary);
    background-color: var(--bs-dark);
}

.btn-outline-primary:hover {
    color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
    background-color: var(--bs-dark);
}

.btn-outline-secondary {
    color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    background-color: var(--bs-dark);
}

.btn-outline-secondary:hover {
    color: var(--bs-secondary-hover);
    border-color: var(--bs-secondary-hover);
    background-color: var(--bs-dark);
}

/* FORM STYLES */

/* INPUT DESCRIPTION type 1*/
.form .form-text ul {
    margin-top: 1rem;
    color: #fff;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

/* INPUT DESCRIPTION type 2*/
.form small.form-text {
    margin-top: 0.5rem;
    color: #fff!important;
    display: block;
}

/* STYLE FOR INPUTS */
input.form-control {
    background-color: var(--bs-dark);
    border-color: #485158;
    color: #fff;
    border-radius: 0.25rem;
}

input.form-control:focus {
    background-color: var(--bs-dark);
    color: #fff;
}

input.form-control.is-invalid {
    background-color: var(--bs-dark);
    color: #fff;
}

input.form-control.is-valid {
    border-color: var(--bs-light);
    color: #fff;
}

form.form-registration .is-required label:after {
    content: " *";
}

.form-check-input[type=checkbox] {
    background-color: var(--bs-dark);
    border-color: var(--bs-light);
    border-radius: 0;
}

.form-check-input:checked[type=checkbox] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input[type=radio] {
    background-color: var(--bs-dark);
    border-color: var(--bs-primary);
}

.form-check-input:checked[type=radio] {
    background-color: var(--bs-dark)!important;
    border-color: var(--bs-primary)!important;
}

.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23009FE3'/></svg>") !important;
}

.form-label {
    color: #fff;
    margin-bottom: 0.25rem;
}

/* STYLE OF FORM ERROS */
.invalid-feedback {
    background-color: var(--bs-danger);
    color: #fff;
    padding: 0.5rem 0.75rem;
    position: relative;
    margin-top: 10px;
}

.invalid-feedback:before {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--bs-danger);
    content: " ";
    top: -8px;
    left: 44px;
    position: absolute
}

/* VERTICAL RULE */
.vr {
    width: 2px;
    color: var(--bs-primary);
    opacity: 1;
}

/* RICH TEXT AND RESPONSIVE BEHAVIOR */
.rich-text img {
    max-width: 100%;
    height: auto;
}

.responsive-object {
    position: relative;
    margin-bottom: 1rem;
}

.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

img.richtext-image.full-width {
    width: 100%;
    max-width: 1000px;
    height: auto;
}

/* FIX PADDING IN TUTORIAL STEP CARDS */
.tutorial-step .card-body div.responsive-object:last-child {
    margin-bottom: 0!important;
}

.tutorial-step .card-body p:first-child,
.tutorial-step .card-body h1:first-child,
.tutorial-step .card-body h2:first-child,
.tutorial-step .card-body h3:first-child {
    margin-top: 1rem!important;
}

.tutorial-step .card-body p:last-child {
    margin-top: 1rem!important;
}

.tutorial-step .card-body .block-text h1,
.tutorial-step .card-body .block-text h2,
.tutorial-step .card-body .block-text h3,
.tutorial-step .card-body .block-text h4,
.tutorial-step .card-body .block-text p {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.tutorial-step .card-body .block-text img {
    margin-bottom: 1rem;
}

.tutorial-step .card-body .block-text img:last-child {
    margin-bottom: 0!important;
}

.tutorial-step .card-body ol,
.tutorial-step .card-body ul {
    padding-left: 3rem;
}

.tutorial-step .card-body .block-text h2 {
    font-size: 1.5rem!important;
}

.tutorial-step {
    background-color: var(--bs-dark);
}

.tutorial-step h2,
.tutorial-step h3,
.tutorial-step h4 {
    color: white !important;
}

/* SPECIAL DIVIDER */
/*
.divider {
    margin-top:2rem;
    border-bottom: 1px solid var(--bs-light);
    margin-bottom:2rem;
    position: relative;
}

.divider:before {
    position: absolute;
    content: " ";
    width: 50%;
    border-top: 8px solid var(--bs-light);
    display: inline-block;
    left: 0;
    top: 0;
    margin-top: -7px;
    vertical-align: middle;
}

@media only screen and (min-width : 768px) {
    .divider:before {
        width: 32%;
    }
}

.divider.divider-50:before {
    width: 50%!important;
}
*/

/* MARKERS FOR SETTING STEP AS COMPLETED */
.tutorial-step .card-footer .form-check {
    float: right;
}

.tutorial-step .card-footer .form-check-input {
    float: right;
    margin-left: 1rem;
}

.tutorial-step .card-body .form-check label p:first-child {
    margin-top: 0!important;
}

#header .nav-item .nav-link {
    position: relative;
}

@media only screen and (min-width : 992px) {
    #header .nav-item .nav-link.active:before {
        position: absolute;
        border-bottom: 2px solid var(--bs-primary);
        content: " ";
        display: inline-block;
        bottom: -17px;
        vertical-align: middle;
        right: var(--bs-navbar-nav-link-padding-x);
        left: var(--bs-navbar-nav-link-padding-x);
    }

}

@media only screen and (max-width : 992px) {
    #header .navbar-auth {
        background-color: #1B1D21;
    }
}

/* NAVIGATION IN HEADER
@media only screen and (max-width : 991px) {
    body {
        margin-top: 4rem;
    }
    #header {
        background-color: var(--bs-dark);
        position: fixed!important;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
    }
}

#header .nav-container li,
#header .nav-container a {
    position: relative;
    color: var(--bs-light);
}

#header .nav-container li.active a,
#header .nav-container a.active,
#header .nav-container a:hover {
    color: #fff !important;
}

@media only screen and (min-width : 992px) {
    #header .nav-container li,
    #header .nav-container a {
        color: #fff !important;
    }

    #header .nav-container a:not(.btn):hover {
        color: var(--bs-primary-hover) !important;
    }

    #header .nav-container li.active:before,
    #header .nav-container a.active:before {
        position: absolute;
        border-bottom: 3px solid var(--bs-primary);
        content: " ";
        display: inline-block;
        width: 100%;
        bottom: 0;
        margin-bottom: -1px;
        vertical-align: middle;
    }

    #header .nav-container .nav-menu {
        border-top: 1px solid var(--bs-light);
        border-bottom: 1px solid var(--bs-light);
    }
}

#header .nav-container .nav-register {
    border: 1px solid var(--bs-secondary);
    background-color: var(--bs-dark);
    text-align: center;
    color: #fff;
}

#header .nav-container .nav-register:hover {
    border: 1px solid var(--bs-primary-hover);
    color: var(--bs-primary-hover)!important;
}

@media only screen and (min-width : 992px) {
    #header .nav-container .nav-register {
        border-top: 1px solid var(--bs-light);
        border-bottom: 1px solid var(--bs-light);
        border-left: 0;
        border-right: 0;
        background-color: transparent;
        margin: 0;
    }
    #header .nav-container .nav-register:hover {
        border-top: 1px solid var(--bs-light);
        border-bottom: 1px solid var(--bs-light);
        border-left: 0;
        border-right: 0;
        background-color: transparent;
        margin: 0;
    }
    #header .nav-container .nav-user {
        border-top: 1px solid var(--bs-light);
        border-bottom: 1px solid var(--bs-light);
        background-color: transparent;
    }
    #header .nav-container .nav-auth {
        gap: 0!important;
    }
}

#header .nav-container .nav-login {
    border-radius: 0;
    color: #fff!important;
} */

/* SPECIAL CARD TYPE - A TEASER WITH AUTOPLAY MOVIES ON HOVER */
.tutorial-teaser {
    border: 0;
}

.tutorial-teaser > .responsive-object {
    margin-bottom: 0 !important;
}

.tutorial-teaser .card-text {
    max-height: 4.5rem;
    overflow: hidden;
}

.tutorial-teaser .card-text a {
    text-decoration: none;
    color: white;
}

@media only screen and (min-width : 992px){
    .tutorial-teaser:hover:before {
        border:6px solid var(--bs-primary)!important;
        position: absolute;
        content: "";
        top: -6px;
        bottom: -6px;
        left: -6px;
        right: -6px;
        display: inline-block;
        box-shadow: 0 4px 30px rgb(0, 0, 0, 0.79);
    }
}

.tutorial-teaser .card-footer {
    border-top: 0;
}

/* NAVIGATION IN USER ACCOUNT */
.nav-simple {
    border-bottom: 1px solid #2B4454;
}

.nav-simple .nav-link {
    margin-bottom: -1px;
    background: 0 0;
    border: 0;
    border-bottom: 1px solid transparent;
    color: var(--bs-light);
    font-size: 1.125rem;
}

.nav-simple .nav-item.show .nav-link,
.nav-simple .nav-link.active {
    color: #fff;
    background-color: transparent;
    border-bottom: 3px solid var(--bs-primary);
}

/* KNOWLEDGE CENTER */

.card-knowledge .card-text {
    max-height: 4.5rem;
    overflow: hidden;
}

.card-knowledge .card-text > a {
    text-decoration: none;
}

.list-references li {
    padding-top: 1rem;
}

.carousel .carousel-inner{
    overflow: visible;
}

.carousel .carousel-item.active{
    display: grid;
}

.carousel .carousel-inner.carousel-inner-sliding{
    overflow: hidden;
}

.carousel .carousel-control-prev,
.carousel .carousel-control-next
{
    width: 4.5rem;
    opacity: 1;
}

.carousel .carousel-control-prev {
    left: -2rem;
}
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon{
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 5rem;
    background-image: url("data:image/svg+xml;utf8,<svg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M36 23H10' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M18 31L10 23L18 15' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}

.carousel-control-next-icon{
    transform: rotate(180deg);
}

.carousel .carousel-control-next{
    right: -2rem;
}

.carousel .carousel-indicators{
    position: static;
    margin: 2rem 0;
}
.carousel .carousel-indicators [data-bs-target]{
    width: 26px;
    height: 6px;
    border-radius: 10px;
    background-color: rgba(45, 156, 219, 0.4);;
    opacity: 1;
    position: relative;
    border: 0!important;
}
.carousel .carousel-indicators [data-bs-target].active{
    background-color: var(--bs-primary);
}

.page-link,
.page-link:hover,
.page-item.active .page-link{
    border: none;
    background: none;
    padding: 0;
}

.page-item.disabled .page-link{
    border: none;
    background: none;
    opacity: 0.4;
}

.page-link{
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--bs-secondary);
    line-height: 2.5rem;
    margin: 0;
}

.page-item{
    margin: 0 .25rem;
}

.page-item:first-of-type{
    margin: 0 1rem 0 0;
}
.page-item:last-of-type{
    margin: 0 0 0 1rem;
}

.page-link:hover,
.page-item.active .page-link{
    color: var(--bs-secondary);
    text-decoration: underline;
}

.pagination-next,
.pagination-prev {
    width: 2.5rem;
    height: 2.5rem;
    background-image: url("data:image/svg+xml;utf8,<svg width='46' height='46' viewBox='0 0 46 46' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M36 23H10' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M18 31L10 23L18 15' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
}

.pagination-next{
    transform: rotate(180deg);
    padding-left: 1rem;
}
.pagination-prev {
    padding-right: 1rem;
}

.pagination.justify-content-end{
    margin-right: 0;
}

@media (max-width: 768px) {
    .pagination.justify-content-end{
        margin-right: 0rem;
    }
}

.horizontal-scrollable {
    position: relative;
}

.horizontal-scrollable > .row {
    overflow-x: auto;
    white-space: nowrap;
    display: block;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.horizontal-scrollable > .row::-webkit-scrollbar {
    display: none;
}

.horizontal-scrollable > .row > .col {
    display: inline-block;
    flex: none;
    white-space: normal;
}

@media only screen and (max-width : 991px) {
    .horizontal-scrollable > .row {
        padding: 36px 0.75rem;
        margin: -36px -0.75rem;
    }
}

.shadow-scroll-info{
    position: absolute;
    height: 100%;
    width: 86px;
    top: 0;
    z-index: 10;
    transition: opacity 1s ease-out;
}

.shadow-scroll-info-prev{
    left: -0.75rem;
    padding-left: 0;
    background: linear-gradient(90deg, #333333 0%, rgba(51, 51, 51, 0) 100%);
}

.shadow-scroll-info-next{
    right: -0.75rem;
    padding-right: 0;
    background: linear-gradient(270deg, #333333 0%, rgba(51, 51, 51, 0) 100%);
}

/* MOBILE SEPARATOR */
hr.mobile-separator {
    top: 54px;
    position: absolute;
    background-color: var(--bs-light);
    opacity: 1!important;
}

/* MODALS */
.modal-content {
    border-radius: 0;
    background-clip: border-box;
    border:1px solid var(--bs-light);
    background-color: var(--bs-dark);
}

/* ALERTS */
.alert-danger {
    color: #fff;
    background-color: transparent;
    border-color: var(--bs-light);
    border-radius: 0;
}

.alert-danger .btn-close {
    color: #fff;
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white' stroke='white'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' fill='white' stroke='white' /></svg>") center/1em auto no-repeat;
}

/* STEPS INDICATOR */
.steps-indicator {
    position: relative;
}

.steps-indicator:before {
    z-index: 1;
    height: 100%;
    content: " ";
    display: inline-block;
    border-right: 1px solid var(--bs-primary);
    top: 0;
    bottom: 0;
    left: 12px;
    position: absolute;
}

.steps-indicator > div {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 2.25rem;
    z-index: 2;
}

.steps-indicator > div:first-child {
    padding-top: 0;
}

.steps-indicator > div:last-child {
    padding-bottom: 0;
}

.steps-indicator > div:before {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    content: " ";
    left: 0;
    border: 1px solid var(--bs-primary);
    border-radius: 50%;
    background-color: var(--bs-dark);
}

.steps-indicator > div.active:before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2.25' fill='%23009FE3'/></svg>") !important;
}