.tooltip--padded {
    padding: 10px;
}

.tooltip, .js .tooltip-if-js {
    border-radius: 0.22222rem;
}

.tooltip, .js .tooltip-if-js {
    display: none;
    width: 100%;
    position: relative;
    background: white;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    color: #666;
    z-index: 3;
}

.tooltip:after, .js .tooltip-if-js:after {
    content: '';
    background: #f5f5f0;
    height: 0.55556rem;
    width: 0.55556rem;
    margin: -0.27778rem 0 0 -0.27778rem;
    position: absolute;
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: .23s right ease-in-out;
    right: 50%;
}

.tooltip--absolute {
    position: absolute;
    bottom: 3rem;
}

.tooltip--above:after {
    top: 100%;
}

.tooltip--below:after {
    top: 0;
}

.js .tooltip--visible, .no-js .tooltip--visible {
    display: block;
}

@media all and (max-width: 479px) {
    .js .tooltip--inline-on-mobile {
        position: static;
        bottom: auto;
        margin-top: get-size("small");
        margin-bottom: get-size("small");
        z-index: 0;
    }

    .js .tooltip--inline-on-mobile:after {
        display: none;
    }
}

@media all and (max-width: 777px) {
    .js .tooltip--inline-on-fablet-down {
        position: static;
        bottom: auto;
        margin-top: get-size("small");
        margin-bottom: get-size("small");
        z-index: 0;
    }

    .js .tooltip--inline-on-fablet-down:after {
        display: none;
    }
}

@media all and (min-width: 480px) and (max-width: 777px) {
    .js .tooltip--inline-on-fablet {
        position: static;
        bottom: auto;
        margin-top: get-size("small");
        margin-bottom: get-size("small");
        z-index: 0;
    }

    .js .tooltip--inline-on-fablet:after {
        display: none;
    }
}

@media all and (min-width: 480px) {
    .js .tooltip--inline-on-fablet-up {
        position: static;
        bottom: auto;
        margin-top: get-size("small");
        margin-bottom: get-size("small");
        z-index: 0;
    }

    .js .tooltip--inline-on-fablet-up:after {
        display: none;
    }
}

@media all and (max-width: 1039px) {
    .js .tooltip--inline-on-tablet-down {
        position: static;
        bottom: auto;
        margin-top: get-size("small");
        margin-bottom: get-size("small");
        z-index: 0;
    }

    .js .tooltip--inline-on-tablet-down:after {
        display: none;
    }
}

@media all and (min-width: 778px) and (max-width: 1039px) {
    .js .tooltip--inline-on-tablet {
        position: static;
        bottom: auto;
        margin-top: get-size("small");
        margin-bottom: get-size("small");
        z-index: 0;
    }

    .js .tooltip--inline-on-tablet:after {
        display: none;
    }
}

@media all and (min-width: 778px) {
    .js .tooltip--inline-on-tablet-up {
        position: static;
        bottom: auto;
        margin-top: get-size("small");
        margin-bottom: get-size("small");
        z-index: 0;
    }

    .js .tooltip--inline-on-tablet-up:after {
        display: none;
    }
}

.js .tooltip--alert {
    background: #FFCC37;
    color: #3a4d5f;
}

.js .tooltip--alert:after {
    background: #FFCC37;
}

.js .tooltip--left:after {
    right: 75%;
}

.js .tooltip--right:after {
    right: 25%;
}

@media all and (min-width: 1040px) {
    .js .tooltip--huge {
        width: 125%;
        left: -12.5%;
    }
}

.js .tooltip--huge.tooltip--left:after {
    right: 64%;
}

.js .tooltip--huge.tooltip--right:after {
    right: 36%;
}