/* Styles for IP stripe.

   developer:   rmiske
   requires:    nothing
   ========================================================================== */


/* ==========================================================================
   main
   ========================================================================== */
@keyframes slide-top {
      0% { transform: translateY(100px); }
    100% { transform: translateY(0); }
}
.slide-top { animation: slide-top 1s ease-in-out both; }

#IPstripe-outer {
    bottom: 0;
    background: #f86300;
    box-sizing: border-box;
    color: #fff;
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
    font-size: 21.6px;
    font-weight: 300;
    line-height: 1;
    position: fixed;
    width: 100%;
    z-index: 999999999;
}
#IPstripe-outer:hover { background: #f88900; }

#IPstripe-main {
    align-items: center;
    color: #fff;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    padding: 20px 60px;
    text-decoration: none;
}
#IPstripe-main img { 
    height: 48px; 
    max-width: 125px; 
}

#IPstripe-txt span::after {
    content: '\00BB';
    display: inline;
    margin-left: 2px;
}

.IPstripe-close { 
    cursor: pointer;
    font-size: 24px;
    font-weight: 300;
    height: 48px;
    line-height: 2;
    position: absolute;
    right: 14px;
    text-align: center;
    top: 50%;
    transform: translate(0, -50%);
    width: 36px;
}
.IPstripe-close:hover { color: #000; }


/*generic*/
#IPstripe-outer.generic {
   font-size: 16.2px;
   font-weight: 400;
}
.generic #IPstripe-main { grid-template-columns: 1fr; }

.generic #IPstripe-txt { justify-self: center; padding-top: 1px; }
.generic #IPstripe-txt::before {
    content: '';
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.51 78.26"%3E%3Cpath fill="%23fff" d="M71.3 35.34a3.19 3.19 0 0 0-4.51.06L47.53 55.36l-.62-52.21C46.89 1.39 45.42-.03 43.69 0a3.186 3.186 0 0 0-3.15 3.23l.62 52.75-20.61-20.71a3.19 3.19 0 0 0-4.45 4.57l28.15 28.05 27.11-28.04a3.19 3.19 0 0 0-.06-4.51Z"/%3E%3Cpath fill="%23fff" d="M88.51 78.26H0V62.43c0-1.76 1.43-3.19 3.19-3.19s3.19 1.43 3.19 3.19v9.45h75.76V60.33c0-1.76 1.43-3.19 3.19-3.19s3.19 1.43 3.19 3.19v17.93Z"/%3E%3C/svg%3E') no-repeat;
    /*background:  url('/common/stripe/img/download.svg') no-repeat;*/
    background-size: 22px auto;
    width: 22px;
    height: 23px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 1px;
    margin-right: 5px;
}
.generic #IPstripe-txt::after {
    content: '\00BB';
    display: inline;
    margin-left: 2px;
}


/*shift it!*/
body.stripe { padding-bottom: 88px; }
body.stripe.generic { padding-bottom: 64px; }

body.stripe #chat-widget-container { bottom: 88px !important; }
body.stripe.generic #chat-widget-container { bottom: 64px !important; }




/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1200px) {
    #IPstripe-main { grid-template-columns: fit-content(560px) max-content; }
}


@media (max-width: 900px) {
    #IPstripe-outer { 
        font-size: 18px; 
        line-height: 24px; 
    }
    #IPstripe-main { 
        grid-gap: 0;
        grid-template-columns: 1fr;
    }
    #IPstripe-main img { display: none; }
    #IPstripe-txt {
        justify-self: center;
        text-align: center;
    }
    .IPstripe-close { right: 10px; }

    .generic #IPstripe-txt { padding-top: 0; }
    .generic #IPstripe-txt::before {
        background-size: 20px auto;
        width: 20px;
        height: 20px;
        top: -1px;
    }

    body.stripe { padding-bottom: 64px; }
    body.stripe #chat-widget-container { bottom: 64px !important; }
}


@media (max-width: 600px) {
    #IPstripe-outer { 
        font-size: 14.8px !important;
        line-height: 18px; 
    }
    #IPstripe-main { grid-template-columns: 1fr; }
    #IPstripe-main { padding: 10px 40px; }
    .IPstripe-close { right: 0; }

    .generic #IPstripe-txt {
        justify-self: center;
        padding: 0 30px;
        text-align: center;
    }
    .generic #IPstripe-txt { padding: 0; }
    .generic #IPstripe-txt::before { display: none; }

    body.stripe { padding-bottom: 38px; }
    body.stripe.generic { padding-bottom: 56px; }

    body.stripe #chat-widget-container { bottom: 38px !important; }
    body.stripe.generic #chat-widget-container { bottom: 56px !important; }
}