﻿/*#############################################################################
    Common CSS for the site, used in the public area, in the FO, print
#############################################################################*/

/* CSS Resets */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; position: relative; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
img { max-width: 100%; display: block; }
blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
article > * + * { margin-top: 1em; }
input, button, textarea, select { font: inherit; }
table { border-collapse: collapse; border-spacing: 0; }


/* ANIMATIONS */
@-webkit-keyframes sk-rotateplane {
    0% { -webkit-transform: perspective(120px); }
    25% { -webkit-transform: perspective(120px) rotateY(180deg); }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); }
    75% { -webkit-transform: perspective(120px) rotateY(360deg) rotateX(180deg); }
    100% { -webkit-transform: perspective(120px) rotateY(360deg) rotateX(360deg); }
}

/*@keyframes sk-rotateplane {
    0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
    100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
*/
@-webkit-keyframes spin {
    from { -webkit-transform: rotateY(0deg) rotateX(0deg); }
    to { -webkit-transform: rotateY(360deg) rotateX(360deg); }
}

@keyframes spin {
    from { transform: rotateY(0deg) rotateX(0deg); }
    to { transform: rotateY(360deg) rotateX(360deg); }
}


/* SCROLLBARS */
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #cccccc #eeeeee; }
    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: #eeeeee; }
    *::-webkit-scrollbar-thumb { background-color: #cccccc; border-radius: 10px; border: 1px outset #bbbbbb; }


/* COMMON - ALL */
@media all {
    html, body { font-family: Roboto; font-size: 16px; font-stretch: normal; font-weight: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }

    /*uncomment to debug rogue css elements*/
    /** { background: #000 !important; color: #0f0 !important; outline: solid #f00 1px !important; }*/

    h1 { font-family: Roboto; font-size: 56px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    h2 { font-family: Roboto; font-size: 48px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    h3 { font-family: Roboto; font-size: 40px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    h4 { font-family: Roboto; font-size: 32px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    h5 { font-family: Roboto; font-size: 24px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    h6 { font-family: Roboto; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }

    .text-16px { font-family: Roboto; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    .text-16px_bold { font-family: Roboto; font-size: 16px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    .text-14px { font-family: Roboto; font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    .text-14px_bold { font-family: Roboto; font-size: 14px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    .text-14px_w700 { font-family: Roboto; font-size: 14px; font-weight: 700; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    .text-13px { font-family: Roboto; font-size: 13px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    .text-13px_bold { font-family: Roboto; font-size: 13px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    .text-12px { font-family: Roboto; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }
    .text-12px_bold { font-family: Roboto; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; text-align: left; }
    .text-10px { font-family: Roboto; font-size: 10px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; }


    hr { margin: 24px 0; }


    /* GP - general purpose */
    .gp { position: relative; max-width: 1440px; margin: 0 auto; }

    .gp-text-capitalize { text-transform: capitalize !important; }
    .gp-text-bold { font-weight: bold !important; }
    .gp-text-weight_w600 { font-weight: 600 !Important; }
    .gp-text-weight_w400 { font-weight: 400 !Important; }
    .gp-text-underline { text-decoration: underline !important; }
    .gp-text-uupercase { text-transform: uppercase !important; }
    .gp-text-decoration { text-decoration: none !important; }
    .gp-text-italic { font-style: italic !important; }

    .gp-text-left { text-align: left !important; }
    .gp-text-center { text-align: center !important; }
    .gp-text-right { text-align: right !important; }
    .gp-text-justify { text-align: justify !important; }
    .gp-vertical-align-middle { vertical-align: middle !important; }

    .gp-white-space_nowrap { white-space: nowrap; }
    .gp-display_none { display: none !important; }

    .gp-justify-content-flex-start { justify-content: flex-start !important; }
    .gp-cursor-pointer { cursor: pointer; }

    .gp-margin-0 { margin: 0 !important; }
    .gp-margin-0-top { margin-top: 0px !important; }
    .gp-margin-24-top { margin-top: 24px !important; }
    .gp-margin-32-bottom { margin-bottom: 32px !important; }

    .gp-margin-0-right { margin-right: 0px !important; }
    .gp-padding-0-right { padding-right: 0px !important; }
    .gp-padding-0-top { padding-top: 0 !important; }
    .gp-padding-0-left { padding-left: 0 !important; }
    .gp-padding-0-bottom { padding-bottom: 0 !important; }
    .gp-padding-3-left { padding-left: 3px !important; }
    .gp-padding-3-bottom { padding-bottom: 3px !important; }
    .gp-padding-5-right { right: 5px !important; }
    .gp-padding-7-top { padding-top: 7px !important; }
    .gp-padding-8-top { padding-top: 8px !important; }
    .gp-padding-8-left { padding-left: 8px !important; }
    .gp-padding-10-left { padding-left: 10px !important; }
    .gp-padding-12-top { padding-top: 12px !important; }
    .gp-padding-12-left { padding-left: 12px !important; }
    .gp-padding-12-right { padding-right: 12px !important; }
    .gp-padding-16-top { padding-top: 16px !important; }
    .gp-padding-16-bottom { padding-bottom: 16px !important; }
    .gp-padding-16-left { padding-left: 16px !important; }
    .gp-padding-16-right { padding-right: 16px !important; }
    .gp-padding-20-left { padding-left: 20px !important; }
    .gp-padding-20-right { padding-right: 20px !important; }
    .gp-padding-20-top { padding-top: 20px !important; }
    .gp-padding-20-bottom { padding-bottom: 20px !important; }
    .gp-padding-24-bottom { padding-bottom: 24px !important; }
    .gp-padding-24-top { padding-top: 24px !important; }
    .gp-padding-24-left { padding-left: 24px !important; }
    .gp-padding-32-bottom { padding-bottom: 32px !important; }
    .gp-padding-32-top { padding-top: 32px !important; }
    .gp-padding-32-right { padding-right: 32px !important; }
    .gp-padding-32-left { padding-left: 32px !important; }
    .gp-padding-36-top { padding-top: 36px !important; }
    .gp-padding-40-top { padding-top: 40px !important; }
    .gp-padding-40-right { padding-right: 40px !important; }
    .gp-padding-40-left { padding-left: 40px !important; }
    .gp-padding-40-bottom { padding-bottom: 40px !important; }
    .gp-padding-47-top { padding-top: 47px !important; }
    .gp-padding-48-bottom { padding-bottom: 48px !important; }
    .gp-padding-57-bottom { padding-bottom: 57px !important; }
    .gp-padding-64-top { padding-top: 64px !important; }
    .gp-padding-88-top { padding-top: 88px !important; }
    .gp-padding-24-0-64-0 { padding: 24px 0 24px 0 !important; }


    .gp-clear-after:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }



    /* ERROR */
    .gp-error { background-position: center center; background-repeat: no-repeat; background-size: cover; }
        .gp-error[data-error='404'] { background-image: url(/Content/Images/Common/Error404.jpg); }
        .gp-error[data-error='500'] { background-image: url(/Content/Images/Common/Error505.jpg); }
        .gp-error .gp-error-inner { min-height: calc(1080px - 439px); display: flex; flex-direction: column; justify-content: center; }
        .gp-error .gp-error-title { text-align: center; margin-bottom: 40px; font-size: 32px; }
        .gp-error .gp-error-message { text-align: center; margin-bottom: 40px; }
        .gp-error .gp-error-buttons { text-align: center; }
            .gp-error .gp-error-buttons .gp-error-button { font-size: 20px; font-weight: 500; padding: 8px 16px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; }



    /* COOKIE DIRECTIVE **/
    .gp-cookie-directive { position: fixed; width: 300px; padding: 20px; z-index: 9999; bottom: 10px; right: 10px; }
        .gp-cookie-directive .gp-cookie-message, .gp-cookie-directive .gp-cookie-message.Tmce p { margin-bottom: 10px; }
            .gp-cookie-directive .gp-cookie-message a, .gp-cookie-directive .gp-cookie-message.Tmce p a { font-weight: 500; text-decoration: none; }
                .gp-cookie-directive .gp-cookie-message a:hover, .gp-cookie-directive .gp-cookie-message.Tmce p a:hover { text-decoration: underline; }
        .gp-cookie-directive .gp-cookie-button { }
        .gp-cookie-directive .gp-cookies-list-container { margin: 20px 0; }
            .gp-cookie-directive .gp-cookies-list-container .gp-cookies-list-title { text-transform: uppercase; font-size: 12px; text-decoration: underline; }
            .gp-cookie-directive .gp-cookies-list-container ul.gp-cookies-list { list-style: none; padding: 0; margin: 0; }
                .gp-cookie-directive .gp-cookies-list-container ul.gp-cookies-list li { padding: 0; margin: 0; }
                    .gp-cookie-directive .gp-cookies-list-container ul.gp-cookies-list li div.checkbox { margin: 7.5px; padding: 0; user-select: none; }
                        .gp-cookie-directive .gp-cookies-list-container ul.gp-cookies-list li div.checkbox label { }
}

/* COMMON - SCREEN */
@media only screen {
    .gp .gp-display_none { display: none !important; }
    .gp .gp-visibility_hidden { visibility: hidden !important; }

    .gp .gp-staging-notice { display: inline-block; background-color: red; font-size: 16px; position: fixed; text-transform: uppercase; color: white; padding: 4px; z-index: 9999; }
        .gp .gp-staging-notice.nw { top: 0; left: 0; }
        .gp .gp-staging-notice.ne { top: 0; right: 0; }
        .gp .gp-staging-notice.sw { bottom: 0; left: 0; }
        .gp .gp-staging-notice.se { bottom: 0; right: 0; }

    .gp .gp-blocking-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9800; -ms-user-select: none; user-select: none; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: flex-start; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px); }
        .gp .gp-blocking-overlay .gp-bo-message { text-transform: uppercase; font-size: 20px; font-weight: 600; }

    .gp .gp-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9500; -ms-user-select: none; user-select: none; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: flex-start; }
        .gp .gp-overlay p { text-transform: uppercase; font-size: 16px; font-weight: 600; display: none; }

        .gp .gp-overlay .gp-spinner, .gp .gp-overlay .gp-spinner:after { width: 64px; height: 64px; border-radius: 0%; }
            .gp .gp-overlay .gp-spinner[data-type='1'] { margin: 16px auto; position: relative; text-indent: 0; border-width: 1px; border-style: solid; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: sk-rotateplane 2.4s infinite ease-in-out; animation: sk-rotateplane 2.4s infinite ease-in-out; text-align: center; line-height: 64px; }
                .gp .gp-overlay .gp-spinner[data-type='1']:after { content: "..."; color: #fff; font-size: 48px; }
            .gp .gp-overlay .gp-spinner[data-type='2'] { background-color: transparent; background-image: url(/Content/Images/Common/spinner.gif); background-position: center center; background-repeat: no-repeat; background-size: 64px; }

        .gp .gp-overlay .gp-spinner { display: none; }
        .gp .gp-overlay[data-type='1'] .gp-spinner[data-type='1'] { display: block; }
        .gp .gp-overlay[data-type='2'] .gp-spinner[data-type='2'] { display: block; }
        .gp .gp-overlay[data-type='3'] .gp-spinner[data-type='3'] { display: block; }

        .gp .gp-overlay .gp-warning { }
        .gp .gp-overlay .gp-progress-bar { width: 304px; margin: 16px auto; }
            .gp .gp-overlay .gp-progress-bar[data-progress] { transition: opacity 250ms; }
            .gp .gp-overlay .gp-progress-bar[data-progress='0'] { opacity: 0 !important; transition: opacity 2000ms !important; }
            .gp .gp-overlay .gp-progress-bar[data-progress='100'] { opacity: 0 !important; transition: opacity 2000ms !important; }
            .gp .gp-overlay .gp-progress-bar[aria-hidden='true'] { opacity: 0; transition: opacity 2000ms; }
            .gp .gp-overlay .gp-progress-bar[aria-hidden='false'] { opacity: 1; transition: opacity 250ms; }
            .gp .gp-overlay .gp-progress-bar > div { border-radius: 1px; border-style: solid; border-width: 1px; height: 16px; position: relative; }
                .gp .gp-overlay .gp-progress-bar > div > div { height: 100%; }
                    .gp .gp-overlay .gp-progress-bar > div > div:after { content: attr(data-progress) "%"; position: absolute; top: 15px; left: 0; right: 0; bottom: 0; font-size: 14px; font-weight: normal; text-align: center; }
}

/* COMMON - MOUSE */
@media only screen and (pointer: fine) {
}

/* COMMON - TOUCH */
@media only screen and (pointer: coarse) {
}

/* COMMON - SIZES */
@media all and (max-width: 767px) {
    .gp-pagination-container > ul li > button { padding: 8px 8px; margin: 0 2px; }
}

@media screen and (max-width: 767px) {
}

/* SIZE XS - mobile */
@media screen and (max-width: 576px) {
    .gp-text-center-xs { text-align: center !important; }
    .gp-display-block-xs { }
}

/* COMMON - PRINT */
@media only print {
    .gp .gp-staging-notice { display: none; }
    .gp .gp-overlay { display: none; }
    .gp .gp-no-print { display: none; }
}

.td-mobile-hide {
    display: none;
    width: 0;
    overflow: hidden;
}    
.td-mobile-short {
    width: 10%;
    overflow: hidden;
}    
@media all and (min-width: 1267px) {
    .td-mobile-hide {
        display: table-cell;
        width: 25%;
    }    
    .td-mobile-short {
        width: 20%;
    }    
}

/* PRICE TABLE  */
.pricing {
    position: relative;
    overflow: hidden;
}
.pricing-tables-wrap:last-child {
    margin-bottom: -12px;
}
.pricing-tables-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-right: -12px;
    margin-left: -12px;
}
.pricing-table {
    padding: 12px;
    width: 344px;
    max-width: 344px;
    flex-grow: 1;
}
.pricing-table-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    padding: 24px;
    height: 100%;
}
.pricing-table-inner>* {
    position: relative;
    width: 100%;
}
.pricing-table-header {
    position: relative;
}
.pricing-table-title {
    font-family: "Mukta", sans-serif;
    color: #1F2B35;
}
.list-reset {
    list-style: none;
    padding: 0;
}
.text-xs {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.1px;
}
.pricing-table-features li {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.pricing-table-features li .list-icon {
    display: inline-flex;
    width: 16px;
    height: 12px;
    margin-right: 12px;
}
.pricing-table-cta {
    align-self: flex-end;
    visibility: visible;
    margin: 20px;
    padding: 10px;
    background-color: #d2797e;
    border-radius: 5px;
    text-align: center;    
}
.pricing-table-cta a {
    background: none;
    color: white !important;
}
.pricing-table-cta a:hover {
    background: none;
}
.button-primary {
    background: #ff678c;
    background: linear-gradient(65deg, #FF4D79 0, #FF809F 100%);
}
.button-primary:hover {
    background: #ff6c90;
    background: linear-gradient(65deg, #ff527d 0, #ff85a3 100%);
}