﻿:root {
    --TourAccent: #318CCF;
    --TourBackground: #F3F3F3;
    --TourTitleBackground: #E0E0E0;
    --TourBorderRadius: 5px;
    --TourTextColor: black;
}

.tour {
    background-color: var(--TourBackground);
    display: block;
    border-radius: var(--TourBorderRadius);
    width: 350px;
    -webkit-box-shadow: 1px 1px 20px rgb(0, 0, 0, 0.1);
    box-shadow: 1px 1px 20px rgb(0, 0, 0, 0.1);
    position: absolute;
    z-index: 1000;
    margin-top: 50px;
    opacity: 0;
    text-align: left;
}

    .tour:hover {
    }

    .tour .tour-arrow {
        width: 20px;
        height: 20px;
        background-color: var(--TourTitleBackground);
        position: absolute;
        top: -10px;
        left: 25px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .tour .titleContainer {
        background-color: var(--TourTitleBackground);
        padding: 10px 20px;
        border-top-left-radius: var(--TourBorderRadius);
        border-top-right-radius: var(--TourBorderRadius);
    }

        .tour .titleContainer h3 {
            font-size: 19px;
            font-weight: 500;
            color: var(--TourTextColor);
            -webkit-animation: none;
            animation: none;
            margin: 0;
            padding: 0;
        }

    .tour .mainContainer {
        padding: 20px;
        border-radius: var(--TourBorderRadius);
    }

        .tour .mainContainer p {
            font-weight: normal;
            line-height: normal;
            font-size: 16px;
            color: var(--TourTextColor);
            -webkit-animation: none;
            animation: none;
            margin: 0;
        }

    .tour .actionContainer {
        padding: 10px 20px;
    }

        .tour .actionContainer a {
            color: var(--TourAccent);
            font-size: 13px;
            margin-right: 5px;
            font-weight: normal;
            -webkit-animation: none;
            animation: none;
        }

        .tour .actionContainer button {
            background-color: var(--TourAccent);
            border: none;
            color: white;
            font-size: 13px;
            margin-right: 5px;
            padding: 7px 15px;
            cursor: pointer;
            outline: none;
            border-radius: var(--TourBorderRadius);
            -webkit-animation: none;
            animation: none;
        }

        .tour .actionContainer a:hover {
            text-decoration: underline;
        }

        .tour .actionContainer button:hover {
            -webkit-filter: brightness(95%);
            filter: brightness(95%);
        }
