[data-tg-tour] {
    scroll-margin: 30px 0
}

.tg-backdrop {
    position: absolute;
    align-items: center;
    justify-content: center;
    display: none;
    z-index: 99;
    border-radius: 7px;
    box-shadow: rgba(33, 33, 33, .8) 0 0 1px 2px, rgba(33, 33, 33, .8) 0 0 0 1000vh;
    border: 1px solid rgba(193, 192, 232, .5);
    top: 50vh;
    left: 50vw;
    width: 0;
    height: 0
}

.tg-backdrop.tg-backdrop-animate {
    transition: all 300ms
}

.tg-dialog {
    border-radius: 12px;
    animation-delay: 100ms;
    min-height: 120px;
    background: #fff;
    color: #252525;
    max-width: 340px;
    width: max-content;
    z-index: 9999;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    font-size: .9rem
}

.tg-dialog .tg-dialog-header {
    display: flex;
    align-items: center;
    padding: 25px 25px 0 25px
}

.tg-dialog .tg-dialog-header .tg-dialog-title {
    font-size: 1rem;
    font-weight: 700;
    margin-right: auto
}

.tg-dialog .tg-dialog-header .tg-dialog-title+.tg-dialog-body {
    padding: 18.75px 25px 18.75px 25px
}

.tg-dialog .tg-dialog-header .tg-dialog-close-btn {
    width: 12px;
    height: 12px;
    margin-left: 10px;
    opacity: .4;
    cursor: pointer;
    white-space: nowrap
}

.tg-dialog .tg-dialog-header .tg-dialog-close-btn:hover {
    opacity: 8
}

.tg-dialog .tg-dialog-header .tg-dialog-close-btn:focus {
    opacity: 1
}

.tg-dialog .tg-dialog-header .tg-dialog-spinner {
    display: none;
    opacity: .4;
    margin-top: -1px;
    -webkit-animation: tg-spin 1s linear infinite;
    -moz-animation: tg-spin 1s linear infinite;
    -o-animation: tg-spin 1s linear infinite;
    animation: tg-spin 1s linear infinite
}

@keyframes tg-spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(359deg)
    }
}

.tg-dialog .tg-dialog-progress-bar {
    background: #f1f1f1;
    height: 5px;
    display: block;
    margin-top: 18.75px;
    position: relative
}

.tg-dialog .tg-dialog-progress-bar>.tg-bar {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 4px;
    background: #414144;
    height: 100%;
    display: block;
    transition: all 300ms
}

.tg-dialog .tg-dialog-body {
    padding: 25px;
    font-weight: 400
}

.tg-dialog .tg-dialog-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    margin-bottom: 10px;
    border-top: 1px solid #dedee7;
    border-bottom: 1px solid #dedee7
}

.tg-dialog .tg-dialog-dots>span.tg-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: #c2c7ce;
    border-radius: 12px;
    margin: 0 4px
}

.tg-dialog .tg-dialog-dots>span.tg-dot.tg-dot-active {
    background: #5362d9
}

.tg-dialog .tg-dialog-footer {
    padding: 12.5px 25px 25px 25px;
    display: flex;
    align-items: center
}

.tg-dialog .tg-dialog-footer button.tg-dialog-btn {
    padding: 5px 10px;
    border: 1px solid #cbcfd5;
    color: #6f727e;
    border-radius: 4px;
    font-weight: 500;
    font-size: .82rem;
    white-space: nowrap
}

.tg-dialog .tg-dialog-footer button.tg-dialog-btn+button {
    margin-left: auto
}

.tg-dialog .tg-dialog-footer button.tg-dialog-btn.disabled {
    pointer-events: none;
    opacity: .6
}

.tg-dialog .tg-dialog-footer button.tg-dialog-btn:hover {
    color: #464852;
    border: 1px solid #b5b7c2;
    outline: none;
    box-shadow: none
}

.tg-dialog .tg-dialog-footer button.tg-dialog-btn:focus {
    outline: none;
    box-shadow: none
}

.tg-dialog .tg-dialog-footer button.tg-dialog-btn:active {
    color: #4655cb;
    background: #f1f2ff;
    border: 1px solid #5362d9;
    outline: none;
    box-shadow: none
}

.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup {
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
    line-height: 1
}

.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-step-progress {
    font-size: .78rem;
    font-weight: 700;
    margin: 0 auto;
    opacity: .4;
    letter-spacing: 1px;
    display: inline-block
}

.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots {
    padding: 0;
    margin: 0;
    border: none
}

.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots>span.tg-dot {
    width: 8px;
    height: 8px;
    margin: 0 3px
}

.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots+.tg-step-progress {
    margin-top: 10px;
    font-size: .68rem
}

.tg-dialog .tg-arrow {
    position: absolute;
    background: #fff;
    width: 9px;
    height: 9px;
    border-radius: 1px;
    transform: rotate(45deg)
}

.tg-dialog.tg-dialog-fixed {
    transition: none;
    animation-delay: 0ms
}

.tg-dialog.animate-position {
    transition: all 300ms
}

.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-title {
    opacity: .4
}

.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-close-btn {
    display: none
}

.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-spinner {
    display: inline-block
}

.tg-dialog.tg-dialog-loading .tg-dialog-body {
    opacity: .4;
    pointer-events: none
}

.tg-dialog.tg-dialog-loading .tg-dialog-footer {
    pointer-events: none;
    opacity: .4
}