/**
 * Copyright © Resurs Bank AB. All rights reserved.
 * See LICENSE for license details.
 */

.rb-pp {
    font-family: 'ResursSans-Regular', Arial, sans-serif;
    text-decoration: none;
    margin-top: 25px;
    position: relative;
}

/** Read More Link */
.rb-pp .rb-rm {
    margin-left: auto;
}

/* Content area. */
.rb-pp-content {
    z-index: 997;
}

/* Logo */
.rb-pp-logo-container {
    margin-left: 5px;
}

.rb-pp-logo-container svg {
    height: 1em;
    width: auto;
}

/* Error message. */
.rb-pp-error {
    color: #d00;
    padding-bottom: 10px;
}

/* Info text. */
.rb-pp-info {
    margin-bottom: 7px;
    display: flex;
    background-color: #e4fdf7;
    padding: 15px;
}

/* Cost calculation. */
.rb-pp-starting-at {
    margin-bottom: 7px;
}

.rb-pp-cost-row {
    margin-bottom: 0.2em;
    opacity: 0.5;
}

.rb-pp-total-cost {
    margin-bottom: 7px;
    opacity: 0.5;
}

/* AJAX loader overlay. */
.rb-pp-overlay {
    background-color: #fff;
    opacity: 0.8;
    position: absolute;
    z-index: 998;
    width: 100%;
    height: 100%;
}

/* AJAX loader. */
.rb-pp-loader {
    position: absolute;
    z-index: 999;
    margin: 25px 0 0 90px;
}

/* Spinning animation for AJAX loader. */
.rb-pp-spinner {
    width: 40px;
    height: 40px;
    position: relative;
}

.rb-pp-circular {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.rb-pp-path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #3498db;
    stroke-width: 6px;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #3498db;
    }
    40% {
        stroke: #3498db;
    }
    66% {
        stroke: #3498db;
    }
    80%, 90% {
        stroke: #3498db;
    }
}
