/*** BODY ***/
body {
    padding-top: 7.5rem;
}

#home { font-size:1.3em; }

/*** NAVIGATION **/
nav h1 { color:#FFFFFF; text-align: center; }
nav {position: fixed; z-index: 9000000}

/*** MAIN ***/
main { padding: 3rem 1.5rem; text-align: center; }
.jumbotron { padding:2rem; }

#home main.container-fluid { padding:0 10px; }

/*** TABLE ***/
.table thead th { border-bottom:0.88em solid #6cb636; }
.table tfoot th { border-top:0.88em solid #6cb636; padding:0.15rem; padding-right:1em; background-color: #6cb636; color:#FFF; font-size:0.8rem; font-weight: normal; text-align:right; }
table .green { background-color: lightgreen; }
table .orange { background-color: lightsalmon; }
table .red { background-color: lightcoral; }

/*** WIDGETS ***/
.widgetF1 { position: relative; }
/*** LOADING ***/
.loadingContent { z-index: 1000; position: absolute; top:0.625em; left:0.625em; width:1.250em!important;; height:1.250em!important;; }
.loading { border: 1em solid #f3f3f3; /* Light grey */ border-top: 1em solid #6cb636; /* Vert F1 */ border-bottom: 1em solid #455661; /* Gris F1 Groupe */ border-radius: 50%; width: 7.500em; height: 7.500em; animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/*** MESSAGES ***/
#messageContent .msg    { border:0.28em solid; margin-bottom:1rem; padding:1rem; background-color: #F0F0F0;  }
#messageContent div         { position:relative; }
#messageContent div .icon   { position:absolute; top:1rem; right:1rem; }
#messageContent div .btn-outline-danger   { position:absolute; top:1rem; left:1rem; }
#messageContent .msg p  { font-size:1.5rem; }
#messageContent .information { border-color:green; }
#messageContent .information h4, #messageContent .information .icon { color:green; }

#messageContent .important { border-color:orange; }
#messageContent .important h4, #messageContent .important .icon { color:orange; }

@-webkit-keyframes blinker {
    from {opacity: 1.0;}
    to {opacity: 0.0;}
}
#messageContent .critique { border-color:red; text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;  }
#messageContent .critique h4, #messageContent .critique .icon { color:red; }
/*#messageContent .critique h4, #messageContent .critique .icon{*/
    /*text-decoration: blink;*/
    /*-webkit-animation-name: blinker;*/
    /*-webkit-animation-duration: 0.6s;*/
    /*-webkit-animation-iteration-count:infinite;*/
    /*-webkit-animation-timing-function:ease-in-out;*/
    /*-webkit-animation-direction: alternate;*/
/*}*/
#messageContent .msg * { text-align: justify; }

.oi-envelope-closed { margin-right: 0.4em; }

/*** TELEPHONY ***/

.profile-card-3 {
    font-family: 'Open Sans', Arial, sans-serif;
    position: relative;
    float: left;
    overflow: hidden;
    width: 100%;
    text-align: center;
    height:18.750em;
    border:none;
}
.profile-card-3 .background-block {
    float: left;
    width: 100%;
    height: 11.250em;
    overflow: hidden;
}
.profile-card-3 .background-block .background {
    width:100%;
    vertical-align: top;
    opacity: 0.9;
    -webkit-filter: blur(0.031em);
    filter: blur(0.031em);
    -webkit-transform: scale(1.8);
    transform: scale(2.8);
}
.profile-card-3 .card-content {
    width: 100%;
    padding:0.313em 0.625em;
    color:#232323;
    float:left;
    background:#efefef;
    height:51%;
    border-radius: 0.313em 0.313em;
    position: relative;
    z-index: 2;
}
.profile-card-3 .card-content::before {
    content: '';
    background: #efefef;
    width: 190%;
    height: 100%;
    left: 0.688em;
    bottom: 3.188em;
    position: absolute;
    z-index: -1;
    transform: rotate(-13deg);
}
.profile-card-3 .profile {
    border-radius: 50%;
    position: absolute;
    bottom: 72%;
    left: 50%;
    max-width: 5.375em;
    opacity: 1;
    box-shadow: 0.88em 0.88em 1.250em rgba(0, 0, 0, 0.5);
    border: 0.125em solid rgba(255, 255, 255, 1);
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    z-index:3;
    margin-bottom: -3.75rem;
}

.card-content .timer {
    float: right;
    margin-top: 1.875em;
    font-size:1.125em;
    font-style: italic;
}

.profile-card-3 h5 {
    margin-top: 1em;
    position: relative;
    z-index:1!important;
    font-weight: 600;
}
.background-block {
    /*background-image: url('Images/Telephonie/vert.png');*/
    background-color: #6cb636;
}

.ringing .background-block {
     background-color: #ffa500;
    /*background-image: url('Images/Telephonie/orange.png');*/
    -webkit-animation-name: phoneOccuped; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.35s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
    -moz-animation-name: phoneOccuped;
    -moz-animation-duration: 0.35s;
    -moz-animation-iteration-count: infinite;
}
/*  Safari 4.0 - 8.0 */
@-webkit-keyframes phoneOccuped {
    100% {background-color: #ffc967;}
}
/* Standard syntax */
@keyframes phoneOccuped {
    100% {background-color: #ffc967;}
}

.occuped .background-block {
    background-color: #f16253;
}


/*** ADMIN.PHP ***/
/* TITRE FORMULAIRES D'AJOUT */
#formsTitre { margin: 1em auto; padding: 1em; height: auto; position: relative;}

#formsTitre p,
#formsTitre blockquote { margin: -0.313rem;  }

#formsTitre blockquote { position: relative; background: #fff; margin-bottom: 1em; border: 0; border-radius: 0.625em; font-size: 0.8em!important; box-shadow: inset 0 0.125em 0 rgba(252, 237, 202, 0.1), -0.313rem -0.250rem 1.563em rgba(0, 0, 0, 0.3); }

#formsTitre blockquote p { line-height: 2.5em; text-align: left; font-style: italic; font-size: 1.2em; font-weight: 600; text-indent: 6.250em; position: relative; margin-top: 0.375em; margin-left:0.313em;}

#formsTitre blockquote h4 { line-height: 2.5em; text-align: center; font-style: italic; font-weight: 600; text-indent: 6.25rem; position: relative; color: #6cb636; }

#formsTitre blockquote p:before{ content: '\201C'; font-family: serif; font-style: normal; font-weight: 700; position: absolute; font-size: 10em; left: -6.5625rem; color: rgba(0, 0, 0, 0.6); text-shadow: 0.438em 0.875em 0.625em rgba(0, 0, 0, 0.1); }


/* Formulaires */

.formsRow { margin-bottom: -25px; }

.forms-container { margin-top: 2%; margin-bottom: 6%; }

.logo{ position: relative; margin-left: -70.5%; }

.logo img{ position: absolute; width: 15%; margin-top: 50%; margin-left: 4.688em; background: #4d5c67; border-radius: 4.5rem; padding: 3%; }


.form-1 {
    padding: 5% 6% 3% 6%;
    border-top-left-radius: 1.2rem;
    border-bottom-left-radius: 1.2rem;
    /*background: linear-gradient(70deg, #6cb636, #aae289);*/
    background: url("https://image.freepik.com/photos-libre/fond-de-mur-vert_23-2147960650.jpg");
    /*background: url("https://image.freepik.com/photos-libre/mur-peint-vert-clair_23-2147746701.jpg") no-repeat;*/
   /*background-image: url("https://image.freepik.com/vecteurs-libre/illustration-de-conception-de-fond-abstrait-technologie-bleu_1035-14977.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-de-style-de-papier-abstrait-polyvalent_1340-4393.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/arriere-plan-de-demi-teinte-style-bande-dessinee-abstraite_1017-14461.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/moderne-bleu-fond-d-39-aquarelle_1035-6833.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-rouge-aquarelle-valentine-rouge_1340-4028.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/abstrait-bleu-fonce-et-fond-grande-donnee-creative_23-2147923562.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/low-poly-abstrait_1048-6723.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-abstrait-de-lumieres-bleues_1182-609.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-de-points-de-demi-teintes_1048-9229.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/arriere-plan-de-bandes-dessinees-abstraites_1055-5095.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/abstrait-technologique_23-2147964286.jpg");*/
    box-shadow: 0 0.313em 0.500em 0 rgba(0, 0, 0, 0.2), 0 0.563em 1.625em 0 rgba(0, 0, 0, 0.19);
}
.form-2 {
    padding: 5% 6% 3% 6%;
    /*background: url("https://image.freepik.com/photos-libre/bois-patinee-texture-retro-noir_1258-172.jpg") no-repeat;*/
    /*background: url("https://image.freepik.com/photos-libre/plaque-de-metal-texture_1048-2443.jpg") no-repeat;*/
    /*background: url("https://image.freepik.com/photos-libre/plaque-de-metal-texture_1048-2443.jpg") no-repeat;*/
    /*background: linear-gradient(70deg, #63707c, #343a40 );*/
    background: linear-gradient(#737e8a, #4d5c67 50%);
    box-shadow: 0 0.313em 0.500em 0 rgba(0, 0, 0, 0.2), 0 0.563em 1.625em 0 rgba(0, 0, 0, 0.19);
}
.form-3{
    padding: 5% 6% 3% 6%;
    /*background: linear-gradient(70deg, #aae289, #6cb636);*/
    background: url("https://image.freepik.com/photos-libre/fond-de-mur-vert_23-2147960650.jpg");
    /*background-image: url("https://image.freepik.com/vecteurs-libre/illustration-de-conception-de-fond-abstrait-technologie-bleu_1035-14977.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-aquarelle-detaillee-nuance-verte_1017-15569.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-de-style-de-papier-abstrait-polyvalent_1340-4393.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/arriere-plan-de-demi-teinte-style-bande-dessinee-abstraite_1017-14461.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/moderne-bleu-fond-d-39-aquarelle_1035-6833.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-rouge-aquarelle-valentine-rouge_1340-4028.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/abstrait-bleu-fonce-et-fond-grande-donnee-creative_23-2147923562.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/low-poly-abstrait_1048-6723.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-abstrait-de-lumieres-bleues_1182-609.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/fond-de-points-de-demi-teintes_1048-9229.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/arriere-plan-de-bandes-dessinees-abstraites_1055-5095.jpg");*/
    /*background-image: url("https://image.freepik.com/vecteurs-libre/abstrait-technologique_23-2147964286.jpg");*/
    box-shadow: 0 0.313em 0.500em 0 rgba(0, 0, 0, 0.2), 0 0.563em 1.625em 0 rgba(0, 0, 0, 0.19);
    border-top-right-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
}
.form-1 h3,.form-2 h3, .form-3 h3{ text-align: center; margin-bottom:18%; color:#fff; }

.btnSubmit { font-weight: 600; width: 50%; color: #343a40; background-color: #fff; border: none; border-radius: 1.5rem; padding:2%; margin-top: 1.6em }

.btnSubmit:hover { background: #343a40; color: #6cb636; }

.btnSubmit2 { font-weight: 600; width: 50%; color: #343a40; background-color: #fff; border: none; border-radius: 1.5rem; padding:2%; margin-top: 0.938em }

.btnSubmit2:hover { background: #6cb636; color: #ffffff; }

.form-control, button, input, optgroup, select, textarea{ font-size: 1rem; }

label { margin-top:0.313em; color: #ffffff!important; padding-left: 0.125em; }

.form-group, .form-group-date, #type, #statut { margin-left: -1.280rem; }

.form-group, .statutMessage select { width: 17.813em; margin-bottom: 1.450em; }

.form-group-time { width: 6.125em; margin-left: -1.2rem; }

.form-group-date { width: 10.625em; }

/*#type { width: 17.7em;}*/

.oi-pencil, .oi-people, .oi-pulse, .fa-address-book, .fa-edit, .fa-exchange-alt, .fa-comment-alt {font-size:1.2em; margin-right: 0.6em; margin-left: -1.2em;  }

.statutMessage p { margin-left: -1.15em; margin-top: 0.8em; margin-bottom: 0.15em;  color:#343a40; font-weight: 600; }

.typePing p{ margin-left: -1.15em; margin-top: 1.7em; margin-bottom: 0.5em; color:#FFFFFF; font-weight: 400; }
.typePing label, .statutMessage label{ margin-left: 0.7em; }

.fa-phone { margin-top: 0.7em; margin-left: -1.3em; padding-right: 1em; color: #343a40; }



/* PAGE NETWORK */
.networkBody { background-color: #f5f5f5; width: 100%; height: 100%;}

#loadingNetwork { top:5px; left:30px; }
#networkWidget .row-1, #networkWidget .row-2, #networkWidget .row-3 { min-height:250px; }
#networkWidget small { float: right; font-size: 0.70rem; text-align: right; margin-right: 0.7em; } /* ms */
#networkWidget .type { float: left; font-size: 0.70rem; } /* type */
#networkWidget .icone span {font-size: 1.8em; color: #455560; margin-left: -0.4em;} /* icone */

/* 9 items */
#networkWidget .item { cursor: pointer; font-size: 0.80rem; text-align: left; width: 24rem; height: 3.5rem; flex-basis: 12rem; line-height: 1rem; white-space: nowrap; border-radius: 0.5rem 0 0.5rem 0 ; margin-bottom: 0.37em; padding-left: 1rem;}
#networkWidget .green { transition: box-shadow 0.1s ease-out; background: rgba(108, 182, 54, 0.17); border-right: 4px solid #6cb636;}
#networkWidget .orange { transition: box-shadow 0.1s ease-out; background: rgba(255, 165, 0, 0.18); border-right: 4px solid #ffb32f;}
#networkWidget .red { transition: box-shadow 0.1s ease-out; background: red; padding-left: 1rem;-webkit-animation: allblink 0.9s ease-in-out infinite; animation: allblink 0.9s ease-in-out infinite;}
@keyframes allblink {
    0% { background: rgba(192, 32, 48, 0) ;
        box-shadow: inset 0 0 2rem -1rem rgba(192, 32, 48, 0), .05px 0 0 red;}
    50% { background: rgba(192, 32, 48, 0.15);
        box-shadow: inset 0 0 1rem -0.5rem red, 0.25rem 0 0 red; }
    100% {
        background: rgba(192, 32, 48, 0);
        box-shadow: inset 0 0 2rem -1rem rgba(192, 32, 48, 0), 0.05px 0 0 red;
    }
}
#networkWidget .red:hover { border: 0.1em solid red; border-right: 4px solid red; }
#networkWidget .green:hover, .orange:hover { border: 0.1em solid #8d98a4; border-right: 4px solid #8d98a4!important; }

#networkWidget .item .donnees { padding-left:0; padding-right: 10px; background-size: 20px 20px; background-repeat: no-repeat; background-position: 290px 0px; }
#networkWidget .item .fai_orange { background-image: url("./Images/logo_orange.svg"); }
#networkWidget .item .fai_alcatraz { background-image: url("./Images/logo_alcatraz.png"); }
#networkWidget .item .fai_bouygues { background-image: url("./Images/logo_bouygues.png"); }
#networkWidget .item .fai_sfr { background-image: url("./Images/logo_sfr.png"); }
#networkWidget .item .fai_nerim { background-image: url("./Images/logo_nerim.png"); }
#networkWidget .item .fai_clever { background-image: url("./Images/logo_clever.png"); }
#networkWidget .item .fai_pacwan { background-image: url("./Images/logo_pacwan.png"); }
#networkWidget .item .fai_free { background-image: url("./Images/logo_free.png"); }


#networkWidget .icone .info { width:25px; height:25px; margin-left:12px; background-size: 20px 20px; background-repeat: no-repeat; background-position:center center; }
#networkWidget .icone .info_alcatraz { background-image: url("./Images/logo_alcatraz.png"); }
#networkWidget .icone .info_bouygues { background-image: url("./Images/logo_bouygues.png"); }
#networkWidget .icone .info_clever { background-image: url("./Images/logo_clever.png"); }
#networkWidget .icone .info_conectia { background-image: url("./Images/logo_conectia.png"); }
#networkWidget .icone .info_f1 { background-image: url("./Images/LOGO-F1-ASSISTANCE.png"); }
#networkWidget .icone .info_orange { background-image: url("./Images/logo_orange.svg"); }
#networkWidget .icone .info_sns { background-image: url("./Images/logo_sns.png"); }


#networkWidget .cloud { width: 300px; height: 100px; background-image: linear-gradient(to top, #6cb636, #daf992); border-radius: 50px; position: relative; top: 4.5em; }
#networkWidget .cloud:before{ content: ""; background: #daf992; width: 100px; height: 100px; border-radius: 50px; position: absolute; top: -50px; left: 50px; z-index: -1; }
#networkWidget .cloud:after{ position: absolute; height: 150px; width: 150px; background: #daf992; top: -75px; right: 30px; border-radius: 100px; z-index: -1; content: ""; }
#networkWidget .cloud ul { list-style: none; margin-left:70px; }
#networkWidget .cloud li { font-size:0.5em; text-align: left; font-weight: bold; }
#networkWidget .shadow{ position: absolute; background: rgba(0,0,0,0.3); width: 300px; height: 0px; box-shadow: 0 0 25px 10px rgba(0,0,0,0.1); bottom: -12px; border-radius: 25px; }
#networkWidget .cloudLogo { width: 100px; position: absolute; left:0 ; z-index: 10; margin-top: -1.2em; }

#networkWidget .block5 img { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }