/*Change Color For Element e.g: background-color, button, table*/
:root {
    /*Not Assigned*/
    --cs-clr-NA: grey;
    --cs-clr-BTNHOVER_NA: dimgrey;
    /*Not Started*/
    --cs-clr-NS: #f1c40f;
    --cs-clr-BTNHOVER_NS: #FFD600;
    /*WIP*/
    --cs-clr-WIP: #16588E;
    --cs-clr-BTNHOVER_WIP: #1765A5;
    /*Delay*/
    --cs-clr-Delay: #e67e22;
    --cs-clr-BTNHOVER_Delay: #E65100;
    /*PIV*/
    --cs-clr-PIV: #d9534f;
    --cs-clr-BTNHOVER_PIV: #c9302c;
    /*Closed*/
    --cs-clr-Closed: #5cb85c;
    --cs-clr-BTNHOVER_Closed: #449d44;
    /*Appt Active*/
    --cs-clr-Appt-Active: #9E9E9E;
    --cs-clr-BTNHOVER_Appt-Active: #757575;
    /*Appt No Show*/
    --cs-clr-Appt-NoShow: #e67e22;
    --cs-clr-BTNHOVER_Appt-NoShow: #E65100;
    /*Appt Cancel*/
    --cs-clr-Appt-Cancel: #2c3e50;
    --cs-clr-BTNHOVER_Appt-Cancel: #2c3e51;
    /*Appt Completed*/
    --cs-clr-Appt-Completed: #5cb85c;
    --cs-clr-BTNHOVER_Appt-Completed: #449d44;
    /*Others*/
    --cs-clr-Other: #03A9F4;
    --cs-clr-BTNHOVER_Other: #039BE5;
    /*Black*/
    --cs-clr-Black: #2c2c2c;
    /*Cancel*/
    --cs-clr-Cancel: #2f2f2f;
}

.imgContentBrand {
    min-width: 25px;
}

.BMW_ICO {
    content: url('../Images_1_3/bmw2020.ico');
    min-width: 25px;
    max-width: 35px;
}

.MINI_ICO {
    content: url('../Images_1_3/mini.ico');
    min-width: 45px;
    max-width: 55px;
}

.NoImageAvailable {
    width: 50%;
}

.ImageAvailable {
    width: 100%;
}


.H_ICO {
    content: url('../Images_1_3/hyundai-blue.ico');
    min-width: 42px;
    max-width: 52px;
}

.F_ICO {
    content: url('../Images_1_3/ford.png');
    min-width: 42px;
    max-width: 52px;
}

.F_JAGUAR_ICO {
    content: url('../Images_1_3/jaguar.png');
    min-width: 35px;
    max-width: 45px;
}

.F_LANDROVER_ICO {
    content: url('../Images_1_3/landrover.png');
    min-width: 38px;
    max-width: 48px;
}

.P_Porsche_ICO {
    content: url('../Images_1_3/PORSCHE _logo.jpg');
    min-width: 38px;
    max-width: 48px;
}

.ANK_ICO {
    content: url('../Images_1_3/Ankai.jpg');
    min-width: 38px;
    max-width: 48px;
}

.MIT_ICO {
    content: url('../Images_1_3/Mitsubishi128.ico');
    min-width: 38px;
    max-width: 48px;
}

.FUSO_ICO {
    content: url('../Images_1_3/Fuso128.ico');
    min-width: 38px;
    max-width: 48px;
}

.JAC_ICO {
    content: url('../Images_1_3/JAC128.ico');
    min-width: 38px;
    max-width: 48px;
}

.PEU_ICO {
    content: url('../Images_1_3/Puegeot128.ico');
    min-width: 38px;
    max-width: 48px;
}

.ROL_ICO {
    content: url('../Images_1_3/RR128.ico');
    min-width: 38px;
    max-width: 48px;
}

.SUZ_ICO {
    content: url('../Images_1_3/Suzuki128.ico');
    min-width: 38px;
    max-width: 48px;
}

.ALFAROMEO_ICO {
    content: url('../Images_1_3/alfa-romeo.png');
    min-width: 38px;
    max-width: 48px;
}

.ASTONMARTIN_ICO {
    content: url('../Images_1_3/Aston-Martin.png');
    min-width: 38px;
    max-width: 48px;
}

.AUDI_ICO {
    content: url('../Images_1_3/audi.png');
    min-width: 38px;
    max-width: 48px;
}

.BENTLY_ICO {
    content: url('../Images_1_3/Bently.png');
    min-width: 38px;
    max-width: 48px;
}

.BYD_ICO {
    content: url('../Images_1_3/BYD.png');
    min-width: 38px;
    max-width: 48px;
}

.CADILLAC_ICO {
    content: url('../Images_1_3/cadillac.png');
    min-width: 38px;
    max-width: 48px;
}

.CHANA_ICO {
    content: url('../Images_1_3/chana.png');
    min-width: 38px;
    max-width: 48px;
}

.CHERRY_ICO {
    content: url('../Images_1_3/Cherry.png');
    min-width: 38px;
    max-width: 48px;
}

.CHEVROLET_ICO {
    content: url('../Images_1_3/Chevrolet.png');
    min-width: 38px;
    max-width: 48px;
}

.CHRYSLER_ICO {
    content: url('../Images_1_3/Chrysler.png');
    min-width: 38px;
    max-width: 48px;
}

.CITROEN_ICO {
    content: url('../Images_1_3/Citroen.png');
    min-width: 38px;
    max-width: 48px;
}

.DAEWO_ICO {
    content: url('../Images_1_3/Daewo.png');
    min-width: 38px;
    max-width: 48px;
}

.DAIHATSU_ICO {
    content: url('../Images_1_3/Daihatsu.png');
    min-width: 38px;
    max-width: 48px;
}

.DODGE_ICO {
    content: url('../Images_1_3/Dodge.png');
    min-width: 38px;
    max-width: 48px;
}

.GEELY_ICO {
    content: url('../Images_1_3/Geely.png');
    min-width: 38px;
    max-width: 48px;
}

.HONDA_ICO {
    content: url('../Images_1_3/Honda.png');
    min-width: 38px;
    max-width: 48px;
}

.HUMMER_ICO {
    content: url('../Images_1_3/Hummer.png');
    min-width: 38px;
    max-width: 48px;
}

.INFINITI_ICO {
    content: url('../Images_1_3/Infiniti.png');
    min-width: 38px;
    max-width: 48px;
}

.ISUZU_ICO {
    content: url('../Images_1_3/Isuzu.png');
    min-width: 38px;
    max-width: 48px;
}

.JEEP_ICO {
    content: url('../Images_1_3/Jeep.png');
    min-width: 38px;
    max-width: 48px;
}

.KIA_ICO {
    content: url('../Images_1_3/Kia.png');
    min-width: 38px;
    max-width: 48px;
}

.LADA_ICO {
    content: url('../Images_1_3/Lada.png');
    min-width: 38px;
    max-width: 48px;
}

.LAMBORGHINI_ICO {
    content: url('../Images_1_3/Lamborghini.png');
    min-width: 38px;
    max-width: 48px;
}

.LOTUS_ICO {
    content: url('../Images_1_3/Lotus.png');
    min-width: 38px;
    max-width: 48px;
}

.MASERATI_ICO {
    content: url('../Images_1_3/Maserati.png');
    min-width: 38px;
    max-width: 48px;
}

.MAYBACH_ICO {
    content: url('../Images_1_3/Maybach.png');
    min-width: 38px;
    max-width: 48px;
}

.MAZDA_ICO {
    content: url('../Images_1_3/Mazda.png');
    min-width: 38px;
    max-width: 48px;
}

.MERCEDESBENZ_ICO {
    content: url('../Images_1_3/Mercedes Benz.png');
    min-width: 38px;
    max-width: 48px;
}

.MG_ICO {
    content: url('../Images_1_3/MG.png');
    min-width: 38px;
    max-width: 48px;
}

.NISSAN_ICO {
    content: url('../Images_1_3/Nissan.png');
    min-width: 38px;
    max-width: 48px;
}

.OPEL_ICO {
    content: url('../Images_1_3/Opel.png');
    min-width: 38px;
    max-width: 48px;
}

.PERODUA_ICO {
    content: url('../Images_1_3/Perodua.png');
    min-width: 38px;
    max-width: 48px;
}

.PEUGEOT_ICO {
    content: url('../Images_1_3/Peugeot.png');
    min-width: 38px;
    max-width: 48px;
}

.PROTON_ICO {
    content: url('../Images_1_3/Proton.png');
    min-width: 38px;
    max-width: 48px;
}

.RENAULT_ICO {
    content: url('../Images_1_3/Renault.png');
    min-width: 38px;
    max-width: 48px;
}

.ROVER_ICO {
    content: url('../Images_1_3/Rover.png');
    min-width: 38px;
    max-width: 48px;
}

.SAAB_ICO {
    content: url('../Images_1_3/Saab.png');
    min-width: 38px;
    max-width: 48px;
}

.SEAT_ICO {
    content: url('../Images_1_3/Seat.png');
    min-width: 38px;
    max-width: 48px;
}

.SKODA_ICO {
    content: url('../Images_1_3/Skoda.png');
    min-width: 38px;
    max-width: 48px;
}

.SSANGYONG_ICO {
    content: url('../Images_1_3/SSangyong.png');
    min-width: 38px;
    max-width: 48px;
}

.SUBARU_ICO {
    content: url('../Images_1_3/Subaru.png');
    min-width: 38px;
    max-width: 48px;
}

.TOYOTA_ICO {
    content: url('../Images_1_3/Toyota.png');
    min-width: 38px;
    max-width: 48px;
}

.VOLVO_ICO {
    content: url('../Images_1_3/Volvo.png');
    min-width: 38px;
    max-width: 48px;
}

.DEN_ICO {
    content: url('../Images_1_3/denzalogo.png');
    min-width: 38px;
    max-width: 48px;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mt-4 {
    margin-top: 40px;
}

.mt-5 {
    margin-top: 50px;
}

.mt-6 {
    margin-top: 60px;
}

.ml-1 {
    margin-left: 10px;
}

.ml-2 {
    margin-left: 20px;
}

.ml-3 {
    margin-left: 30px;
}

.bg-darkgrey {
    background-color: darkgrey;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mb-3 {
    margin-bottom: 30px;
}

.mb-4 {
    margin-bottom: 40px;
}

.mb-5 {
    margin-bottom: 50px;
}

.mb-6 {
    margin-bottom: 60px;
}

.mb-7 {
    margin-bottom: 70px;
}

.mb-8 {
    margin-bottom: 80px;
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.bg-darkgrey {
    background-color: darkgrey;
}

.bg-none {
    background-color: transparent !important;
}

.bg-black {
    background-color: black;
    color: white;
}

.bmwFontBold {
    font-family: 'bmwTypeWebBoldAll','Arial','Helvetica',sans-serif;
}

.bmwFontLight {
    font-family: 'bmwTypeWebLightAll','Arial','Helvetica',sans-serif;
}

.table thead th a {
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.desktopView {
    display: inherit;
}

.mobileView {
    display: none;
}

.no-data-img {
    width: 100%;
}

.no-data-span-D_1 {
    font-size: 1.5vw;
    font-weight: bold;
}

.no-data-span-D_2 {
    font-size: 1.5vw;
    font-weight: bold;
    color: grey;
}

.no-data-span-D_3 {
    font-size: 6vw;
    font-weight: bold;
}

.no-data-span-D_4 {
    font-size: 2.5vw;
    font-weight: bold;
}

.no-data-span-M_1 {
    font-size: 3vw;
    font-weight: bold;
}

.no-data-span-M_2 {
    font-size: 3vw;
    font-weight: bold;
    color: grey;
}

.no-data-span-M_3 {
    font-size: 10vw;
    font-weight: bold;
}

.no-data-span-M_4 {
    font-size: 6.5vw;
    font-weight: bold;
}

.table tbody td {
    vertical-align: middle !important;
}

/*Edms*/
.doc-text-printed {
    color: var(--cs-clr-NA);
}

.doc-text-picked {
    color: var(--cs-clr-Other);
}

.doc-text-signed {
    color: var(--cs-clr-NS);
}

.doc-text-incomplete {
    color: var(--cs-clr-Delay);
}

.doc-text-validated {
    color: var(--cs-clr-Closed);
}

.doc-text-replaced {
    color: var(--cs-clr-NA);
}
/*WIP*/

.text-NA {
    color: var(--cs-clr-NA);
}

.text-NS {
    color: var(--cs-clr-NS);
}

.text-WIP {
    color: var(--cs-clr-WIP);
}

.text-Delay {
    color: var(--cs-clr-Delay);
}

.text-PIV {
    color: var(--cs-clr-PIV);
}

.text-Closed {
    color: var(--cs-clr-Closed);
}

.cs-clr-sunflower {
    background-color: #f1c40f;
    color: white;
}

    .cs-clr-sunflower:hover, .cs-clr-sunflower:focus {
        color: white;
        background-color: #FFD600;
    }

.cs-clr-carrotorange {
    background-color: #e67e22;
    color: white;
}

    .cs-clr-carrotorange:hover, .cs-clr-carrotorange:focus {
        color: white;
        background-color: #E65100;
    }

.cs-clr-danger {
    background-color: #E7222E;
    color: white;
}

    .cs-clr-danger:hover, .cs-clr-danger:focus {
        color: white;
        background-color: #B71C1C;
    }

.text-white {
    color: white;
}

.bold {
    font-weight: bold;
}

/*Not Assigned Color (Background Color & Table, Button)*/
.cs-clr-NA {
    background-color: var(--cs-clr-NA) !important;
    color: white !important;
}

.table_cs-clr-NA th {
    background-color: var(--cs-clr-NA);
    color: white;
    position: sticky;
    top: -15px;
}

.btn_cs-clr-NA {
    background-color: var(--cs-clr-NA);
    color: white;
}

    .btn_cs-clr-NA:active, .btn_cs-clr-NA:hover, .btn_cs-clr-NA:focus {
        background-color: var(--cs-clr-BTNHOVER_NA) !important;
        color: white !important;
    }

/*Not Started Color (Background Color & Table, Button)*/
.cs-clr-NS {
    background-color: var(--cs-clr-NS) !important;
    color: white !important;
}

.table_cs-clr-NS th {
    background-color: var(--cs-clr-NS);
    color: white;
    position: sticky;
    top: -15px;
}

.btn_cs-clr-NS {
    background-color: var(--cs-clr-NS);
    color: white;
}

    .btn_cs-clr-NS:active, .btn_cs-clr-NS:hover, .btn_cs-clr-NS:focus {
        color: white !important;
        background-color: var(--cs-clr-BTNHOVER_NS) !important;
    }

.panel_cs-clr-NS {
    background-color: var(--cs-clr-NS) !important;
}

/*WIP Color (Background Color & Table, Button)*/
.cs-clr-WIP {
    background-color: var(--cs-clr-WIP) !important;
    color: white !important;
}

.table_cs-clr-WIP th {
    background-color: var(--cs-clr-WIP);
    color: white;
    position: sticky;
    top: -15px;
}

.btn_cs-clr-WIP {
    background-color: var(--cs-clr-WIP);
    color: white;
}

    .btn_cs-clr-WIP:active, .btn_cs-clr-WIP:hover, .btn_cs-clr-WIP:focus {
        color: white !important;
        background-color: var(--cs-clr-BTNHOVER_WIP) !important;
    }

.panel_cs-clr-WIP {
    background-color: var(--cs-clr-WIP) !important;
}

/*Delay Color (Background Color & Table, Button)*/
.cs-clr-Delay {
    background-color: var(--cs-clr-Delay) !important;
    color: white !important;
}

.table_cs-clr-Delay th {
    background-color: var(--cs-clr-Delay);
    color: white;
    position: sticky;
    top: -15px;
}

.btn_cs-clr-Delay {
    background-color: var(--cs-clr-Delay);
    color: white;
}

    .btn_cs-clr-Delay:active, .btn_cs-clr-Delay:hover, .btn_cs-clr-Delay:focus {
        color: white !important;
        background-color: var(--cs-clr-BTNHOVER_Delay) !important;
    }

.panel_cs-clr-Delay {
    background-color: var(--cs-clr-Delay) !important;
}

/*PIV Color (Background Color & Table, Button)*/
.cs-clr-PIV {
    background-color: var(--cs-clr-PIV) !important;
    color: white !important;
}

.table_cs-clr-PIV th {
    background-color: var(--cs-clr-PIV);
    color: white;
    position: sticky;
    top: -15px;
}

.btn_cs-clr-PIV {
    background-color: var(--cs-clr-PIV);
    color: white;
}

    .btn_cs-clr-PIV:active, .btn_cs-clr-PIV:hover, .btn_cs-clr-PIV:focus {
        color: white !important;
        background-color: var(--cs-clr-BTNHOVER_PIV) !important;
    }

.panel_cs-clr-PIV {
    background-color: var(--cs-clr-PIV) !important;
}

/*Closed Color (Background Color & Table, Button)*/
.cs-clr-Closed {
    background-color: var(--cs-clr-Closed) !important;
    color: white !important;
}

.table_cs-clr-Closed th {
    background-color: var(--cs-clr-Closed);
    color: white;
    position: sticky;
    top: -15px;
}

.btn_cs-clr-Closed {
    background-color: var(--cs-clr-Closed);
    color: white;
}

    .btn_cs-clr-Closed:active, .btn_cs-clr-Closed:hover, .btn_cs-clr-Closed:focus {
        color: white !important;
        background-color: var(--cs-clr-BTNHOVER_Closed) !important;
    }

.panel_cs-clr-Closed {
    background-color: var(--cs-clr-Closed) !important;
}

/*Appt Color (Background Color & Table, Button)*/
.cs-clr-Appt {
    background-color: var(--cs-clr-Closed);
    color: white;
}

.table_cs-clr-Appt th {
    background-color: var(--cs-clr-Closed);
    color: white;
    position: sticky;
    top: -15px;
}

.btn_cs-clr-Appt {
    background-color: var(--cs-clr-Closed);
    color: white;
}

    .btn_cs-clr-Appt:active, .btn_cs-clr-Appt:hover, .btn_cs-clr-Appt:focus {
        color: white;
        background-color: var(--cs-clr-BTNHOVER_Closed);
    }
/*Appt Active*/

.cs-clr-Appt-Active {
    background-color: var(--cs-clr-Appt-Active);
    color: white;
}

.btn_cs-clr-Appt-Active {
    background-color: var(--cs-clr-Appt-Active);
    color: white;
}

    .btn_cs-clr-Appt-Active:hover, .btn_cs-clr-Appt-Active:focus {
        color: white;
        background-color: var(--cs-clr-BTNHOVER_Appt-Active);
    }

/*Appt No Show*/

.cs-clr-Appt-NoShow {
    background-color: var(--cs-clr-Appt-NoShow);
    color: white;
}

.btn_cs-clr-Appt-NoShow {
    background-color: var(--cs-clr-Appt-NoShow);
    color: white;
}

    .btn_cs-clr-Appt-NoShow:hover, .btn_cs-clr-Appt-NoShow:focus {
        color: white;
        background-color: var(--cs-clr-BTNHOVER_Appt-NoShow);
    }

/*Appt Cancel*/

.cs-clr-Appt-Cancel {
    background-color: var(--cs-clr-Appt-Cancel);
    color: white;
}

.btn_cs-clr-Appt-Cancel {
    background-color: var(--cs-clr-Appt-Cancel);
    color: white;
}

    .btn_cs-clr-Appt-Cancel:hover, .btn_cs-clr-Appt-Cancel:focus {
        color: white;
        background-color: var(--cs-clr-BTNHOVER_Appt-Cancel);
    }

/*Appt Completed*/

.cs-clr-Appt-Completed {
    background-color: var(--cs-clr-Appt-Completed);
    color: white;
}

.btn_cs-clr-Appt-Completed {
    background-color: var(--cs-clr-Appt-Completed);
    color: white;
}

    .btn_cs-clr-Appt-Completed:hover, .btn_cs-clr-Appt-Completed:focus {
        color: white;
        background-color: var(--cs-clr-BTNHOVER_Appt-Completed);
    }

/*Others*/

.cs-clr-Other {
    background-color: var(--cs-clr-Other) !important;
    color: white !important;
}

.btn_cs-clr-Other {
    background-color: var(--cs-clr-Other);
    color: white;
}

    .btn_cs-clr-Other:hover, .btn_cs-clr-Other:focus {
        color: white;
        background-color: var(--cs-clr-BTNHOVER_Other);
    }

.table_cs-clr-Other th {
    background-color: var(--cs-clr-Other);
    color: white;
    position: sticky;
    top: -15px;
}

.cs-clr-Black {
    background-color: var(--cs-clr-Black) !important;
    color: white !important;
}

.cs-clr-Cancel {
    background-color: var(--cs-clr-Cancel) !important;
    color: white !important;
}

/*Toast Theme*/
md-toast.md-success-toast-theme .md-toast-content {
    background-color: var(--cs-clr-Closed);
}

md-toast.md-error-toast-theme .md-toast-content {
    background-color: var(--cs-clr-PIV);
}


/*loader*/

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

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

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

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

@-webkit-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 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;
    }
}

@-webkit-keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }

    40% {
        stroke: #0057e7;
    }

    66% {
        stroke: #008744;
    }

    80%, 90% {
        stroke: #ffa700;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #d62d20;
    }

    40% {
        stroke: #0057e7;
    }

    66% {
        stroke: #008744;
    }

    80%, 90% {
        stroke: #ffa700;
    }
}

.overlayBg {
    position: fixed;
    z-index: 10;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}


/*.modalr {
    position: fixed;
    z-index: 9999;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background-color: Black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    -moz-opacity: 0.8;
}*/

.modalr {
    position: fixed;
    z-index: 9999;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    background-color: #F8F9F9;
    opacity: 0.9;
}

.jcb_icon_loader {
    /*  width: 8%;
    position: fixed;
    z-index: 9999;
    top: 30%;
    left: 48%;*/
    display: block;
    margin: 18% auto;
    width: 8%;
    animation-name: flip-with-rotate;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.loader_text_container {
    margin: -16% auto;
}

.loader_text {
    /*   position: fixed;
    z-index: 9999;
    top: 50%;
    left: 38%;*/
    font-size: 2.3em;
    letter-spacing: 5px;
    font-weight: bold;
    background: linear-gradient(to right, #3a1c71 25%, #d76d77 50%, #ffaf7b 75%);
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 1s normal infinite;
}

@keyframes shine {
    to {
        background-position: 100% center;
    }
}

@keyframes flip-with-rotate {
    0% {
        transform: perspective(400px) rotateY(0);
    }

    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}

.center {
    z-index: 1000;
    margin: 300px auto;
    padding: 10px;
    width: 130px;
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}

span.miniLoader {
    /* box-sizing: border-box;*/
    display: inline-block;
    /*  position: absolute;*/
    width: 1em;
    height: 1em;
    /*  margin: 6px;*/
    border: 2px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
    border-color: white white white transparent;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

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

@media (max-width: 575.98px) {
    .mobileView {
        display: inherit;
    }

    .desktopView {
        display: none;
    }

    .jcb_icon_loader {
        margin: 66% auto;
        width: 20%;
    }

    .loader_text_container {
        margin: -60% auto;
    }

    .loader_text {
        font-size: 1.4em;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .mobileView {
        display: inherit;
    }

    .desktopView {
        display: none;
    }

    .jcb_icon_loader {
        margin: 45% auto;
        width: 15%;
    }

    .loader_text_container {
        margin: -40% auto;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .mobileView {
        display: inherit;
    }

    .desktopView {
        display: none;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}