/* Our tooltip class. Make the tooltip bigger and rounder */
.tour-tooltip {
    background-color: #333333;
    border-radius: 7px;
    padding: 15px;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 22px;
    color:white;

    /* Move it down and make it bigger */
    min-width: 250px;
    max-width: 325px;
}

a.light-link {
    color: #80b3ff;
}

/* Floating tooltips even bigger */
.introjs-tooltip-floating {
    min-width: 390px;
    max-width: 390px;
}

.introjs-tooltip-left, .introjs-tooltip-right {
    top: 20%;
}

/* Make the arrow bigger */
.introjs-arrow {
    border: 20px solid #333333;
    /* Allow clicks to go through */
    pointer-events: none;
}

/* Move the arrow down */
.introjs-arrow.left, .introjs-arrow.left-bottom {
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: #333333;
}

.introjs-arrow.right, .introjs-arrow.right-bottom {
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: #333333;
}

/* Move the arrow left */
.introjs-arrow.bottom {
    bottom: -40px;
    left: 50%;
    transform: translateX(50%);
    border-top-color: #333333;
}

.introjs-arrow.top {
    top: -40px;
    left: 50%;
    transform: translateX(50%);
    border-bottom-color: #333333;    
}

/* Defeat a 10 px offset which makes our arrow too big */
.introjs-arrow.left-bottom, .introjs-arrow.right-bottom {
    bottom: initial;
    top: 60%;
}

/* Make the highlight layer dimmer */
.dimmer-highlight {
    background-color: rgba(255, 255, 255, .8);
}

/* Hide Skip button */
.introjs-skipbutton {
    display: none;
}

/* Other buttons get bigger. Note these are 'a's */
.introjs-button {
    padding: 5px 10px;
    margin: 5px;
    margin-top: 15px;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    font-size: 16px;
}