html
{
  height: 100%;
}
 
body
{
  height: 100%;
  margin: 0;
  padding: 0;
  /*padding-top:1%;*/
  position: relative;
  font-family: Arial; font-size: 14px;
  color: inherit;
  background-color:#eee !important; /* #d7d7d7 #6e6e6 #e3e3e3 A8A8A8 */
}

a {color: blue; text-decoration: none; font-size: 14px;}

a:hover{text-decoration: underline;}

a:link{text-decoration:none; outline:none;}

p{font-size:22px;}
p[name="key"],p[name="help"]{font-size:18px;}

footer
{
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.overlay{
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 9999;
  background-color: rgba(0,38,76,0.5);
}
.overlay-image{
    position: relative;
    top: 40%;
    width: 10%;
}
.messageFlash
{
  margin-top:6%;
  height: 30px;
}

.boutonAjouter
{
  margin-top: 5%;
  margin-bottom: 5%;
}

.contenu, .titresAdmin
{
  margin-top: 8%;
}

.contenuConnexion
{
  margin-top: 8%;
  background-color: #FF9A27;
  color:#E84D23;
  font-size: 35px;
}

.boutonsEdit
{
  float: left;
  margin-left: 25%;
}

.boutonsSupp
{
  float: right;
  margin-right: 25%;
}

.champs
{
  text-align: left;
}

form div.required label:after
{
    content: "*";
    color: #e32;
    font-weight: bold;
}

.listeCateg
{
  text-align: center;
  font-size: 35px;
}

#menu
{
  text-align: center;
}

.newRight{background-color:#e3e3e3; width:600px; height:400px; padding-top:1%; border-radius:30px; float:right; margin-right:5%;}

h1,h2,h3,h4{text-align:center; margin-top:1% !important;}


/************************************************************************************************************/
/* sign up guyo : */

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.homeLogin{margin:0 auto; text-align:center; width:35%; color:white; background-color: black; margin-top:10%; padding-bottom:3%; border-radius:30px;}

.errorsLogin{color:red;}

/*.container-navbar{margin:0 auto; margin-left:3%; margin-right:3%; margin-bottom:0.5%;}*/
/*.navbar-default{margin:0 auto !important; background-color:black !important; height:60px !important;}*/

.container-btn{margin:0 auto; margin-left:3%; margin-right:3%; margin-top:0.3%;}
.container-news{margin:0 auto; margin-left:3%; margin-right:3%; margin-top:4%;}
.title_home_new{margin:0 auto; margin-top:1%; text-align: center;}

.global {margin-left:3%; margin-right:3%; margin-top:1%; margin-bottom:1%;}
.content-news{margin:auto; background-color:#e3e3e3; padding-top:1%; border-radius:30px; height:500px;}

.pop_up{
  text-align:center;
/*  position:absolute;
top:50%;
left:50%;
width:400px;
height:400px;
margin-left:-200px;
margin-top:-200px */
}

#form-button-save{display:none;}

/* images  */
.choice-img{
  display: block;
  margin:auto;
  width:20px;
  height:20px;
}
/* input */
.input-center{
  display:block;
  margin: 0 auto!important;

}

/** table */
table > thead > tr > td.active,
table > tbody > tr > td.active,
table > tfoot > tr > td.active,
table > thead > tr > th.active,
table > tbody > tr > th.active,
table > tfoot > tr > th.active,
table > thead > tr.active > td,
table > tbody > tr.active > td,
table > tfoot > tr.active > td,
table > thead > tr.active > th,
table > tbody > tr.active > th,
table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
table-hover > tbody > tr > td.active:hover,
table-hover > tbody > tr > th.active:hover,
table-hover > tbody > tr.active:hover > td,
table-hover > tbody > tr.active:hover > th {
   background-color: #e8e8e8;
}
table > thead > tr > td.success,
table > tbody > tr > td.success,
table > tfoot > tr > td.success,
table > thead > tr > th.success,
table > tbody > tr > th.success,
table > tfoot > tr > th.success,
table > thead > tr.success > td,
table > tbody > tr.success > td,
table > tfoot > tr.success > td,
table > thead > tr.success > th,
table > tbody > tr.success > th,
table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
table-hover > tbody > tr > td.success:hover,
table-hover > tbody > tr > th.success:hover,
table-hover > tbody > tr.success:hover > td,
table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
table > thead > tr > td.info,
table > tbody > tr > td.info,
table > tfoot > tr > td.info,
table > thead > tr > th.info,
table > tbody > tr > th.info,
table > tfoot > tr > th.info,
table > thead > tr.info > td,
table > tbody > tr.info > td,
table > tfoot > tr.info > td,
table > thead > tr.info > th,
table > tbody > tr.info > th,
table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
table-hover > tbody > tr > td.info:hover,
table-hover > tbody > tr > th.info:hover,
table-hover > tbody > tr.info:hover > td,
table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
table > thead > tr > td.warning,
table > tbody > tr > td.warning,
table > tfoot > tr > td.warning,
table > thead > tr > th.warning,
table > tbody > tr > th.warning,
table > tfoot > tr > th.warning,
table > thead > tr.warning > td,
table > tbody > tr.warning > td,
table > tfoot > tr.warning > td,
table > thead > tr.warning > th,
table > tbody > tr.warning > th,
table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
table-hover > tbody > tr > td.warning:hover,
table-hover > tbody > tr > th.warning:hover,
table-hover > tbody > tr.warning:hover > td,
table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}
table > thead > tr > td.danger,
table > tbody > tr > td.danger,
table > tfoot > tr > td.danger,
table > thead > tr > th.danger,
table > tbody > tr > th.danger,
table > tfoot > tr > th.danger,
table > thead > tr.danger > td,
table > tbody > tr.danger > td,
table > tfoot > tr.danger > td,
table > thead > tr.danger > th,
table > tbody > tr.danger > th,
table > tfoot > tr.danger > th {
  background-color: #f2dede;
}
table-hover > tbody > tr > td.danger:hover,
table-hover > tbody > tr > th.danger:hover,
table-hover > tbody > tr.danger:hover > td,
table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
table > thead > tr th{
  vertical-align: middle!important;
}

/* dropdowns */
.befor-dropdow-label{
  font-size :14px;
  font-weight: bold;
}

.img-thumbnail{
  max-height:60px;
}
/* log pop up */
.middle{
  vertical-align: middle!important;
}

.modal-logs-details,.modal-details,.detailed-list{
    max-height:650px;
  overflow-y:scroll;
}
.progress{
    position: fixed;
    top: 0;
    width: 100%;
    z-index : 9999;
}
.log-line{
  font-size: 14px;
}

/* LOADING ANIMATION */
+#box1,#box2,#box3{grid-row:1}#box3,#box4,#box6{grid-column:3}#box2,#box5,#box7{grid-column:2}#box6,#box7,#box8{grid-row:3}#box4,#box5,#box9{grid-row:2}#box1,#box8,#box9{grid-column:1}.box{float:left;position:relative;width:50px;height:50px}#box1{animation:colorchange1 1s infinite;-webkit-animation:colorchange1 1s infinite}#box2{animation:colorchange2 1s infinite;-webkit-animation:colorchange2 1s infinite}#box3{animation:colorchange3 1s infinite;-webkit-animation:colorchange3 1s infinite}#box4{animation:colorchange4 1s infinite;-webkit-animation:colorchange4 1s infinite}#box6{animation:colorchange5 1s infinite;-webkit-animation:colorchange5 1s infinite}#box7{animation:colorchange6 1s infinite;-webkit-animation:colorchange6 1s infinite}#box8{animation:colorchange7 1s infinite;-webkit-animation:colorchange7 1s infinite}#box9{animation:colorchange8 1s infinite;-webkit-animation:colorchange8 1s infinite}.loading_wrapper{width:159px;height:159px;display:grid;grid-column-gap:3px;column-gap:3px;row-gap:3px;position:fixed;top:50%;left:50%;margin-top:-79px;margin-left:-79px}@keyframes colorchange1{0%{background-color:#00264c}15%{background-color:#003e6d}30%{background-color:#00558d}45%{background-color:#0064a3}60%{background-color:#0072b5}75%{background-color:#0079bf}88%{background-color:#008dda}100%{background-color:#00a8ff}}@-webkit-keyframes colorchange1{0%{background-color:#00264c}15%{background-color:#003e6d}30%{background-color:#00558d}45%{background-color:#0064a3}60%{background-color:#0072b5}75%{background-color:#0079bf}88%{background-color:#008dda}100%{background-color:#00a8ff}}@keyframes colorchange2{0%{background-color:#00a8ff}15%{background-color:#00264c}30%{background-color:#003e6d}45%{background-color:#00558d}60%{background-color:#0064a3}75%{background-color:#0072b5}88%{background-color:#0079bf}100%{background-color:#008dda}}@-webkit-keyframes colorchange2{0%{background-color:#00a8ff}15%{background-color:#00264c}30%{background-color:#003e6d}45%{background-color:#00558d}60%{background-color:#0064a3}75%{background-color:#0072b5}88%{background-color:#0079bf}100%{background-color:#008dda}}@keyframes colorchange3{0%{background-color:#008dda}15%{background-color:#00a8ff}30%{background-color:#00264c}45%{background-color:#003e6d}60%{background-color:#00558d}75%{background-color:#0064a3}88%{background-color:#0072b5}100%{background-color:#0079bf}}@-webkit-keyframes colorchange3{0%{background-color:#008dda}15%{background-color:#00a8ff}30%{background-color:#00264c}45%{background-color:#003e6d}60%{background-color:#00558d}75%{background-color:#0064a3}88%{background-color:#0072b5}100%{background-color:#0079bf}}@keyframes colorchange4{0%{background-color:#0079bf}15%{background-color:#008dda}30%{background-color:#00a8ff}45%{background-color:#00264c}60%{background-color:#003e6d}75%{background-color:#00558d}88%{background-color:#0064a3}100%{background-color:#0072b5}}@-webkit-keyframes colorchange4{0%{background-color:#0079bf}15%{background-color:#008dda}30%{background-color:#00a8ff}45%{background-color:#00264c}60%{background-color:#003e6d}75%{background-color:#00558d}88%{background-color:#0064a3}100%{background-color:#0072b5}}@keyframes colorchange5{0%{background-color:#0072b5}15%{background-color:#0079bf}30%{background-color:#008dda}45%{background-color:#00a8ff}60%{background-color:#00264c}75%{background-color:#003e6d}88%{background-color:#00558d}100%{background-color:#0064a3}}@-webkit-keyframes colorchange5{0%{background-color:#0072b5}15%{background-color:#0079bf}30%{background-color:#008dda}45%{background-color:#00a8ff}60%{background-color:#00264c}75%{background-color:#003e6d}88%{background-color:#00558d}100%{background-color:#0064a3}}@keyframes colorchange6{0%{background-color:#0064a3}15%{background-color:#0072b5}30%{background-color:#0079bf}45%{background-color:#008dda}60%{background-color:#00a8ff}75%{background-color:#00264c}88%{background-color:#003e6d}100%{background-color:#00558d}}@-webkit-keyframes colorchange6{0%{background-color:#0064a3}15%{background-color:#0072b5}30%{background-color:#0079bf}45%{background-color:#008dda}60%{background-color:#00a8ff}75%{background-color:#00264c}88%{background-color:#003e6d}100%{background-color:#00558d}}@keyframes colorchange7{0%{background-color:#00558d}15%{background-color:#0064a3}30%{background-color:#0072b5}45%{background-color:#0079bf}60%{background-color:#008dda}75%{background-color:#00a8ff}88%{background-color:#00264c}100%{background-color:#003e6d}}@-webkit-keyframes colorchange7{0%{background-color:#00558d}15%{background-color:#0064a3}30%{background-color:#0072b5}45%{background-color:#0079bf}60%{background-color:#008dda}75%{background-color:#00a8ff}88%{background-color:#00264c}100%{background-color:#003e6d}}@keyframes colorchange8{0%{background-color:#003e6d}15%{background-color:#00558d}30%{background-color:#0064a3}45%{background-color:#0072b5}60%{background-color:#0079bf}75%{background-color:#008dda}88%{background-color:#00a8ff}100%{background-color:#00264c}}@-webkit-keyframes colorchange8{0%{background-color:#003e6d}15%{background-color:#00558d}30%{background-color:#0064a3}45%{background-color:#0072b5}60%{background-color:#0079bf}75%{background-color:#008dda}88%{background-color:#00a8ff}100%{background-color:#00264c}}
/* END LOADING ANIMATION */


.media-card {
  width: 250px;
  height: 300px;
}

.media-card--hero {
  margin: 0;
}

.demo-card {
  width: 200px;
  margin: 16px 0;
}

.demo-card-with-tags {
  width: 200px;
  margin: 16px 0;
  height: 260px;
}

.demo-card--hero {
  margin: 0
}

.demo-card__primary {
  padding: 1rem
}

.demo-card__subtitle {
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  font-size: 1.0em !important;
  text-transform: uppercase !important;
  color: #82B6D2 !important;
}

.demo-card__tags {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.demo-card__tag {
  margin: 5px;
  text-align: center;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 5px;
  padding-right: 5px;
  border: 2px solid #82B6D2;
  color: #82B6D2;
  font-size: 1.0em;
  float: left;
  text-transform: uppercase;
}

.demo-card__tag:hover {
  background: #82B6D2;
  color: white;
}

.demo-card__secondary, .demo-card__subtitle {
  color: rgba(0, 0, 0, .54);
  color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, .54))
}

.demo-card__secondary {
  padding: 0 1rem 8px
}

#existingMediaPopup .modal-body {
  max-height: 80%;
}

.canopia-playlist_buttons {
  margin-bottom: 15px;
  margin-top: 10px;
  margin-left: 10px;
}