@charset "utf-8";

/* CSS Document */

html,
body {
    color: #000;
    background-color: rgb(219, 219, 219);
}

.bodyNoscroll {
    color: #000;
    background-color: rgb(219, 219, 219);
    
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.modal{
    width: auto;
    display: block;
    background-color: rgba(0,0,0,0.6);
    z-index: 1030;
}

.cVert {
    background: rgb(157, 213, 58);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(157, 213, 58, 1) 0%, rgba(128, 194, 23, 1) 11%, rgba(161, 213, 79, 1) 83%, rgba(124, 188, 10, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(157, 213, 58, 1) 0%, rgba(128, 194, 23, 1) 11%, rgba(161, 213, 79, 1) 83%, rgba(124, 188, 10, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(157, 213, 58, 1) 0%, rgba(128, 194, 23, 1) 11%, rgba(161, 213, 79, 1) 83%, rgba(124, 188, 10, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a', GradientType=0);
    /* IE6-9 */
}

.cJaune {
    background: rgb(255, 255, 89);
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 89, 1) 0%, rgba(255, 255, 136, 1) 100%, rgba(255, 255, 204, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 89, 1) 0%, rgba(255, 255, 136, 1) 100%, rgba(255, 255, 204, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(255, 255, 89, 1) 0%, rgba(255, 255, 136, 1) 100%, rgba(255, 255, 204, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffff59', endColorstr='#ffffcc', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.cOrange {
    background: rgb(255, 116, 0);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 116, 0, 1) 20%, rgba(255, 167, 91, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 116, 0, 1) 20%, rgba(255, 167, 91, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 116, 0, 1) 20%, rgba(255, 167, 91, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#ffa75b', GradientType=0);
    /* IE6-9 */
}

.cRouge {
    background: rgb(244, 4, 4);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(244, 4, 4, 1) 0%, rgba(255, 0, 0, 1) 42%, rgba(255, 63, 63, 1) 79%, rgba(255, 117, 119, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(244, 4, 4, 1) 0%, rgba(255, 0, 0, 1) 42%, rgba(255, 63, 63, 1) 79%, rgba(255, 117, 119, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(244, 4, 4, 1) 0%, rgba(255, 0, 0, 1) 42%, rgba(255, 63, 63, 1) 79%, rgba(255, 117, 119, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f40404', endColorstr='#ff7577', GradientType=0);
    /* IE6-9 */
}

.cGris {
    background: rgb(229, 229, 229);
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(229, 229, 229, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(229, 229, 229, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(229, 229, 229, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}


.btnState {
    line-height: 20px;
    margin-top: 2px !important;
    display: table-cell;
    text-align: center !important;
    vertical-align: middle;
    width: 18%;
    height: 46px;
    color: #000 !important;
    font-size: 30px !important;
    font-weight: bold !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.72) !important;
}

.bkVert {
    background: rgb(157, 213, 58);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(157, 213, 58, 1) 0%, rgba(128, 194, 23, 1) 11%, rgba(161, 213, 79, 1) 83%, rgba(124, 188, 10, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(157, 213, 58, 1) 0%, rgba(128, 194, 23, 1) 11%, rgba(161, 213, 79, 1) 83%, rgba(124, 188, 10, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(157, 213, 58, 1) 0%, rgba(128, 194, 23, 1) 11%, rgba(161, 213, 79, 1) 83%, rgba(124, 188, 10, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a', GradientType=0);
    /* IE6-9 */
}

.bkJaune {
    background: rgb(255, 255, 89);
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 89, 1) 0%, rgba(255, 255, 136, 1) 100%, rgba(255, 255, 204, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 89, 1) 0%, rgba(255, 255, 136, 1) 100%, rgba(255, 255, 204, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(255, 255, 89, 1) 0%, rgba(255, 255, 136, 1) 100%, rgba(255, 255, 204, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffff59', endColorstr='#ffffcc', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.bkOrange {
    background: rgb(255, 116, 0);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 116, 0, 1) 20%, rgba(255, 167, 91, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 116, 0, 1) 20%, rgba(255, 167, 91, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 116, 0, 1) 20%, rgba(255, 167, 91, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff7400', endColorstr='#ffa75b', GradientType=0);
    /* IE6-9 */
}

.bkRouge {
    background: rgb(244, 4, 4);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(244, 4, 4, 1) 0%, rgba(255, 0, 0, 1) 42%, rgba(255, 63, 63, 1) 79%, rgba(255, 117, 119, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(244, 4, 4, 1) 0%, rgba(255, 0, 0, 1) 42%, rgba(255, 63, 63, 1) 79%, rgba(255, 117, 119, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(244, 4, 4, 1) 0%, rgba(255, 0, 0, 1) 42%, rgba(255, 63, 63, 1) 79%, rgba(255, 117, 119, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f40404', endColorstr='#ff7577', GradientType=0);
    /* IE6-9 */
}

.bkGris {
    background: rgb(229, 229, 229);
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(229, 229, 229, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(229, 229, 229, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(229, 229, 229, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.bkBlue {
    background: rgb(144, 177, 204);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(144, 177, 204, 1) 9%, rgba(47, 129, 181, 1) 56%, rgba(10, 116, 204, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(144, 177, 204, 1) 9%, rgba(47, 129, 181, 1) 56%, rgba(10, 116, 204, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(144, 177, 204, 1) 9%, rgba(47, 129, 181, 1) 56%, rgba(10, 116, 204, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.cNone {
    display: none;
}

.divZoom {
    position: absolute;
    display: block;
    z-index: 1000;
    margin-top: -55px;
    margin-left: -56px;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    text-decoration: none;
    transform: translateX(-50%) translateY(-50%);
    transition: all 0.25s;
    animation: blowUpIcon .7s cubic-bezier(0.165, 0.840, 0.440, 1.500) forwards;
   
    transform: scale(3, 3)!important;
    -webkit-transform: scale(3, 3)!important;
    -moz-transform: scale(3, 3)!important;  
    text-decoration: none;
}

.rptClass {
    display: block;
    font-family: "Arial Black", Gadget, sans-serif;
    width: 110px;
    height: 110px;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.98);
    text-rendering: geometricPrecision;
    cursor: pointer;
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    user-select: none;
    /* mozilla browsers */
}

.profileClass {
    position: absolute;
    display: block;
    height: 100vh;
    width: 100vw;
    z-index: 1050;
    font-family: "Arial Black", Gadget, sans-serif;
    box-shadow: 0 1px 6px rgb(0 0 0 / 85%), 0 1px 4px rgb(0 0 0 / 98%);
    text-rendering: geometricPrecision;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: all 0.25s;
    animation: ZoomOut 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.500) forwards;
    top:0%;
    
}

.pcClass {
    display: block;
    font-family: "Arial Black", Gadget, sans-serif;
    width: 120px!important;
    height: 120px!important;
    transform: scale(0.80, 0.80)!important;
    -webkit-transform: scale(0.80, 0.80)!important;
    -moz-transform: scale(0.80, 0.80)!important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.98);
    text-rendering: geometricPrecision;
    cursor: pointer;
    -webkit-user-select: none;
    /* webkit (safari, chrome) browsers */
    -moz-user-select: none;
    user-select: none;
    /* mozilla browsers */
}

.MobileClass {
    display: block;
    font-family: "Arial Black", Gadget, sans-serif;
    width: 120px!important;
    height: 120px!important;
    transform: scale(0.67, 0.67)!important;
    -webkit-transform: scale(0.67, 0.67)!important;
    -moz-transform: scale(0.67, 0.67)!important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 1px 4px rgba(0, 0, 0, 0.98);
    margin-top: -30px;
    margin-left: -10px;
    text-rendering: geometricPrecision;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.cNormalClass {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    font-family: "Arial Black", Gadget, sans-serif;
    /*font-family: inherit;*/
    color: black;
    font-weight: normal;
    font-size: 38px;
    /*background-image: -webkit-image-set()*/
}

.cSMSClass {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: url('/images/sms-260.png');
    background-size: 100%;
    object-fit: cover;
    font-family: "Arial Black", Gadget, sans-serif;
    /*font-family: inherit;*/
    color: #2f81da;
    font-weight: bold;
    font-size: 32px;
    opacity: 1;
}

.cOperator {
    display: block;
    /*laisser le serveur decidé*/
    float: left;
    text-align: center;
    /*vertical-align: top;*/
    height: 22px;
    width: 22px;
    margin-top: -7px;
    margin-left: -7px;
    border-radius: 35%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.60);
    background: url('/images/opera-icon.png') #FFF;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: 2px 2px;
}

.cDeGarde {
    display: block;
    background: #3366FF;
    border: #FFF 1 solid;
    color: rgb(255, 255, 255);
    float: right;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    height: 22px;
    width: 22px;
    margin-top: -7px;
    margin-right: -7px;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgb(0 0 0 / 50%), 0 1px 4px rgb(0 0 0 / 60%);
}

.cSpecialite {
    position: inherit;
    right: 0px;
    bottom: 0px;
    display: block;
    float: right;
    /*vertical-align: bottom;*/
    height: 22px;
    width: 22px;
    margin-bottom: -7px;
    margin-right: -7px;
    border-radius: 50%;
    background: url('/images/special-icon.png') #FFF;
    background-size: 100%;
    background-repeat: no-repeat;
    /*background-position: 2px 3px;*/
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.60);
}

.cMedical {
    position: inherit;
    left: 0px;
    bottom: 0px;
    display: block;
    float: left;
    /*vertical-align: bottom;*/
    height: 22px;
    width: 22px;
    margin-bottom: -7px;
    margin-left: -7px;
    border-radius: 50%;
    background: url('/images/firstresp-icon.png') #FFF;
    background-size: 100%;
    background-repeat: no-repeat;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.60);
}

.cMatClass {
    display: block;
    margin-top: 5px;
    padding-top: 5px;
    width: 100%;
    text-decoration: none;
    text-align: center;
    font-weight: bolder;
    font-size: 40px;
    font-variant-numeric: proportional-nums;
}

.cNameClass {
    display: block;
    text-align: center;
    margin-top: -10px;
    width: 100%;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: black;
}

.cTimeClass {
    display: block;
    text-align: center;
    margin-top: -5px;
    width: 100%;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: black;
    padding-top: 2px;
}

.cPhoneClass {
    display: none;
    text-align: center;
    margin-top: -4px;
    width: 100%;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: black;
}

.cPhoneClass a {
    color: red;
}

.cPhoneLink {
    text-decoration: none;
    color: #007 !important;
}

.cDaysExpireClass {
    font-size: 12px;
    /*  font-weight:bold;	*/
}

.cCurrentUID{
 
    border-radius: 10px;
    border: 1px solid #DDD;
    box-shadow: 0px 0px 10px #4183C4;
    z-index: 1000;
    text-rendering: geometricPrecision;

    animation: pulsate 1.5s infinite;
    -webkit-animation: pulsate 1.5s infinite;
    -moz-animation: pulsate 1.5s infinite;

  
    }
    

.pulsate-fwd {
-webkit-animation: pulsate-fwd 0.5s ease-in-out infinite both;
animation: pulsate-fwd 0.5s ease-in-out infinite both;
}

/*
.cCurrentUID-MOB {
 
    border-radius: 10px;
    border: 1px solid #DDD;
    box-shadow: 0px 0px 10px #4183C4;
    z-index: 1000;
    margin-top: -30px;
    margin-left: -10px;
    text-rendering: geometricPrecision;
    animation: pulsate 1.5s infinite;
    -webkit-animation: pulsate 1.5s infinite;
    -moz-animation: pulsate 1.5s infinite;
}

.cCurrentUID-PC {
    width: 112px;
    height: 112px;
    border-radius: 10px;
    border: 1px solid #DDD;
    box-shadow: 0px 0px 10px #4183C4;
    
    animation: pulsate 1.5s infinite;
    -webkit-animation: pulsate 1.5s infinite;
    -moz-animation: pulsate 1.5s infinite;
}
*/



/* ------------------------------ keyframes ------------------------------------------------------------------------------------*/

@keyframes ZoomOut {
    0% {
        transform: scale(0);
        opacity: 1;
    }
  
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes ZoomOut {
    0% {
        transform: scale(0);
        opacity: 1;
    }
   
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes blowUpIcon {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(3);
        opacity: 1;
    }
    100% {
        transform: scale(3);
    }
}

@-webkit-keyframes blowUpIcon {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(3);
        opacity: 1;
    }
    100% {
        transform: scale(3);
    }
}



@keyframes pulsate {
    0% {
        box-shadow: 0px 0px 20px 5px black;
    }
    50% {
        box-shadow: 0px 0px 6px 0px #4183C4;
    }
    100% {
        box-shadow: 0px 0px 20px 5px black;
    }
}

@-webkit-keyframes pulsate {
    0% {
        box-shadow: 0px 0px 20px 5px black;
    }
    50% {
        box-shadow: 0px 0px 6px 0px #4183C4;
    }
    100% {
        box-shadow: 0px 0px 20px 5px black;
    }
}



@-webkit-keyframes bobble {
    0% {
        transform: scale(0.67, 0.67) translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: scale(0.67, 0.67) translate3d(0px, 10px, 0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale(0.67, 0.67) translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
}

@keyframes bobble {
    0% {
        transform: scale(0.67, 0.67) translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: scale(0.67, 0.67) translate3d(0px, 10px, 0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: scale(0.67, 0.67) translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
}

@-webkit-keyframes bobble-pc {
    0% {
        transform: translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translate3d(0px, 10px, 0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
}

@keyframes bobble-pc {
    0% {
        transform: translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
    50% {
        transform: translate3d(0px, 10px, 0px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translate3d(0px, -10px, 0px);
        animation-timing-function: ease-in;
    }
}




  /* heart div class - in html i used just a simple html simbol entity for heart sign, you can use text or whatever u want*/
  
 
  
  /* Heart beat animation */
  @keyframes beat{
      to { transform: scale(1.4); }
  }
  
  @-webkit-keyframes beat{
    to { transform: scale(1.4); }
  }