@font-face {
  font-family: 'EBGaramond';
  src: url('/fonts/EBGaramond-Regular.ttf')
}

body {
  font-family: 'EBGaramond-Regular';
  background: #FFFFFF;
  font-size: 12px !important;
  min-width: 700px;
}
h1{
  padding-bottom: 20px;
}
h1, h2, h3, h4 {
  font-family: 'EBGaramond-Regular';
  font-weight: bold;
  font-style: italic;
  text-align: center;
}

h1{font-size: 20px;}
h2{font-size: 12px;}
h3{font-size: 12px;}
h4{font-size: 12px;}
h5{font-size: 12px;}
/***************************************
#0D3970 : ;
#414C5C : gris foncé;
#FFC400 : jaune;
#0F417A : bleu foncé;
#FFFFFF : blanc;

********************************/
.nav-pills > li > a{
  background-color:#BBCCF7;
  color:#414C5C;
}

.dab>li.active>a, .dab>li.active>a:hover, .dab>li.active>a:focus{
background-color:#FFC400;
color:#000;
margin-left: 1px;
}


.dab>li>a{
background-color:#414C5C !important;
color:#FFFFFF !important;
margin-left: 1px;
}
.dab>li>a:hover, .dab>li>a:focus{
background-color:#0F117A !important;
color:#FFFFFF !important;
}
/***/
.loader {

position : fixed;
z-index: 9999;
background : url('../images/loading.gif') 50% 50% no-repeat;
top : 0px;
left : 0px;
height : 100%;
width : 100%;
cursor : wait;
}
/*************************************/
.my-drop-zone { border: dotted 3px lightgray; }
.nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
.another-file-over-class { border: dotted 3px green; }


.bandeau {
background-image:url('../images/education60.jpg');
height:220px;
margin-top: -20px;
}


.panel {
  border-color: #c0d9D7;
  border-radius: 4px;
  box-shadow: 0px 8px 17px rgba(0, 0, 0, .2);
  background-color: #c6c6c6 !important;

}
/*   7A97FF   c6c6c6    */
.panel-default > .panel-heading {
  font-size: 85%;
  font-weight: bold;
  color: #444;
  text-transform: uppercase;
  background-color: #7A97FF !important;
  border-color: #cfd9db;
}
/*************************************/
.dab1{background-color: #c0c6c6;}

.dabq{background-color: #99C4DB;}

.dabq>input:focus{background-color: #53AAED;}
.dabq>input{background-color: #99C4DB;}
.dabA3>input:focus{background-color: #00F291;}
.dabB3>input:focus{background-color: #00F291;}
/**/
.dabA{background-color: #c6c6c6;min-height:26px;}

.dabq>TEXTAREA:focus{background-color: #53AAED;}
.dabq>TEXTAREA{background-color: #99C4DB;width:750px;}

.dabA>TEXTAREA:focus{background-color: #cfd9db;height:26px;}
.dabA>TEXTAREA{background-color: #c6c6c6;width:550px;min-height:20px;height:26px;}


.dabA>input{background-color:#c6c6c6;min-height:26px;}/*input vide, non solution*/
.dabA>input:focus{background-color:#cfd9db ;min-height:26px;}/*input focus, non solution*/

.sol>.dabA>TEXTAREA{background-color: #91F291;min-height:26px;}
.sol>.dabA>TEXTAREA:focus{background-color: #64C962;min-height:26px;}
/**/
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
/**/

.dabA1>.sol{background-color: #91F291;}
.dabB1>.sol{background-color: #91F291;}
.dabA3>.sol{background-color: #91F291;}
.dabB3>.sol{background-color: #91F291;}

.dabA1{background-color: #c6c6c6;}
.dabA2{background-color: #c6c6c6;}
.dabA3{background-color: #c6c6c6;}
.dabB1{background-color: #F8F8F8;}
.dabB2{background-color: #F8F8F8;}
.dabB3{background-color: #F8F8F8;}



/*************************************/

.ppanneau {
  width: 800px;
  margin: 5% auto;
  background-color: #7A97FF !important;

}
/*************************************/

.form-control {
  border-radius: 0;
}

.center-form {
  width: 330px;
  margin: 12% auto;
}

.signup-or-separator {
  position: relative;
  height: 34px;
  text-align: center;
  background: none;
}

.signup-or-separator hr {
  width: 90%;
  margin: -16px auto 10px auto;
  border-top: 1px solid #dce0e0;
}

.signup-or-separator .text {
  display: inline-block;
  padding: 8px;
  margin: 0;
  background-color: #fff;
}

.has-feedback .form-control-feedback {
  top: 0;
  left: 0;
  width: 46px;
  height: 46px;
  line-height: 46px;
  color: #555;
}

.password-strength-indicator {
  position: absolute;
  top: 10px;
  right: 0;
  width: 5px;
  padding: 0 15px;
}

.password-strength-indicator span {
  display: block;
  width: 5px;
  height: 5px;
  margin-bottom: 2px;
  background: #ebeef1;
  border-radius: 5px;
}

[class^='ion-'] {
  font-size: 1.2em;
}

.has-feedback .form-control {
  padding-left: 42.5px;
}

.alert-material {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: inline-block;
  min-height: 48px;
  padding: 13px 24px 12px;
  font-family: 'Roboto', sans-serif;
  color: #f1f1f1;
  cursor: default;
  background: #323232;
  border-radius: 2px;
  outline: none;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

.profile-picture {
  height: 100px;
  display: block;
}

.btn {
  font-weight: bold;
  border-radius: 2px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}

.btn-primary {
  background-color: #4285f4;
}

.btn-primary:hover {
  background-color: #3367d6;
}

.btn-success {
  background-color: #0f9d58;
}

.btn-success:hover {
  background-color: #196c4a;
}

.btn-danger {
  background-color: #db4437;
}

.btn-danger:hover {
  background-color: #b04c3b;
}

.btn-group-vertical .btn {
  margin-bottom: 10px;
}

.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-radius: 2px;
}

.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 2px;
}

.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-radius: 2px;
}

.btn-lg {
  font-size: 14px;
}

.btn [class^='ion-'] {
  margin-right: 5px;
}

.btn .fa {
  margin-right: 5px;
}

/*********************
* Social Buttons
*********************/

.btn-google-plus {
  color: #fff;
  background-color: #dd4b39;
  border: 1px solid #d54331;
}

.btn-google-plus:hover,
.btn-google-plus:focus {
  color: #fff;
  background-color: #cb3927;
}

.btn-facebook {
  color: #fff;
  background-color: #3b5998;
  border: 1px solid #335190;
}

.btn-facebook:hover,
.btn-facebook:focus {
  color: #fff;
  background-color: #294786;
}

.btn-linkedin {
  color: #fff;
  background-color: #007bb6;
  border: 1px solid #0073ae;
}

.btn-linkedin:hover,
.btn-linkedin:focus {
  color: #fff;
  background-color: #0069a4;
}

.btn-twitter {
  color: #fff;
  background-color: #00aced;
  border: 1px solid #009fdb;
}

.btn-twitter:hover,
.btn-twitter:focus {
  color: #fff;
  background-color: #0090c7;
}

.btn-foursquare {
  color: #fff;
  background-color: #f94877;
  border: 1px solid #f8215a;
}

.btn-foursquare:hover,
.btn-foursquare:focus {
  color: #fff;
  background-color: #f71752;
}

.btn-github {
  color: #fff;
  background-color: #444;
  border: 1px solid #3b3b3b;
}

.btn-github:hover,
.btn-github:focus {
  color: #fff;
  background-color: #303030;
}

.btn-yahoo {
  color: #fff;
  background-color: #720e9e;
  border: 1px solid #580b75;
}

.btn-yahoo:hover,
.btn-yahoo:focus {
  color: #fff;
  background-color: #303030;
}

.btn-live {
  color: #fff;
  background-color: #2672ec;
}

.btn-live:hover,
.btn-live:focus {
  color: #fff;
  background-color: #125acd;
}

/*********************
* Animations
*********************/

.fadeZoom.ng-enter {
  -webkit-animation-duration: 0.6s, 0.2s;
  -moz-animation-duration: 0.2s, 0.2s;
  -ms-animation-duration: 0.2s, 0.2s;
  /*animation-duration: 0.2, 0.2s;*/
  -webkit-animation-name: fadeIn, zoomIn;
  -moz-animation-name: fadeIn, zoomIn;
  -ms-animation-name: fadeIn, zoomIn;
  animation-name: fadeIn, zoomIn;
}

.fadeZoomFadeDown.ng-enter {
  -webkit-animation-duration: 0.2s, 0.2s;
  -moz-animation-duration: 0.2s, 0.2s;
  -ms-animation-duration: 0.2s, 0.2s;
  animation-duration: 0.2s, 0.2s;
  -webkit-animation-name: fadeIn, zoomIn;
  -moz-animation-name: fadeIn, zoomIn;
  -ms-animation-name: fadeIn, zoomIn;
  animation-name: fadeIn, zoomIn;
}

.fadeZoomFadeDown.ng-leave {
  -webkit-animation: fadeOutDown 0.2s;
  -moz-animation: fadeOutDown 0.2s;
  -ms-animation: fadeOutDown 0.2s;
  animation: fadeOutDown 0.2s;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    -moz-transform: scale3d(0.8, 0.8, 0.8);
    -ms-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.8, 0.8, 0.8);
    -moz-transform: scale3d(0.8, 0.8, 0.8);
    -ms-transform: scale3d(0.8, 0.8, 0.8);
    transform: scale3d(0.8, 0.8, 0.8);
  }

  50% {
    opacity: 1;
  }
}



a {
  cursor: pointer;
}

.spacer {
  margin-top: 20px;
  margin-bottom: 20px;
}

.hSpacer {
  margin-left: 20px;
}

.table tbody tr.active > td {
  background-color: #428BCA !important;
  color: #000000;

}.table tbody tr.active:hover > td {
  background-color: #428BCA !important;
  color: #000000;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #428BCA;
  color: #444444;
}

.clickable {
  cursor: pointer;
}

.text-muted {
  color: #90939a;
}



table { border-collapse: collapse; }
.percent {
    position: absolute; width: 250px; height: 28px; z-index: 1; text-align: center; font-size: 0.8em; color: white;
}
.progress-bar {
    width: 250px; height: 30px;
    border-radius: 5px;
    border: 1px solid #CCC;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6666cc), to(#4b4b95));
    border-image: initial;
}
.uploaded {
    padding: 10px;
    height: 20px;
    border-radius: 10px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));
    border-image: initial;
}
.dropbox {
    width: 15em;
    height: 3em;
    border: 2px solid #DDD;
    border-radius: 8px;
    background-color: #FEFFEC;
    text-align: center;
    color: #BBB;
    font-size: 2em;
    font-family: Arial, sans-serif;
}
.dropbox span {
    margin-top: 0.9em;
    display: block;
}
.dropbox.not-available {
    background-color: #F88;
}
.dropbox.over {
    background-color: #bfb;
}



/***************************************/
/**
input[type=checkbox]
{
  padding: 10px !important;
  image-rendering: crisp-edges !important;
  -ms-transform: scale(1.8); 
  -moz-transform: scale(1.8); 
  -webkit-transform: scale(1.8); 
  -o-transform: scale(1.8); 
  outline: none;
border: none;
}
**/
.checkboxtext
{
  /* Checkbox text */
  font-size: 100%;
  display: inline;
}
input[type=button]:active, input[type=button]:focus {
outline: none;
border: none;
}






/*****************************************/

fieldset {
    border: 2px solid #428BCA;
    line-height: 23px;
    padding: 30px;
}
fieldset label {
}

legend.scheduler-border {
    border: solid 1px #DDD !important;
    padding: 0 10px 10px 10px;
    border-bottom: none;
}

legend.scheduler-border {
    width: auto !important;
    border: none;
    font-size: 14px;
}
/*****************************************/

grille {
  display: flex; 
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
   
  -webkit-flex-flow: row ;
  flex-flow: row wrap ;
    flex-direction: row; 

  border-top : 2px;  border-top-color: #aabbcc;border-top-style: solid;
  border-bottom:2px;  border-bottom-color: #aabbcc;border-bottom-style: solid;

}

grille>span {
  background: red;
  padding: 10px;
  margin:10px;
  min-height: 100px;

}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

/**************** pour passer bootstrap et autre ! ****************/
.btn {
    font-size: 12px;
}
.dropdown-menu {
    font-size: 12px;
}
.input-lg {
    font-size: 12px;
}
legend {
    font-size: 12px;
}
element.style {
    font-size: 12px;
}

a:focus{  /*enlevé pointillés*/
outline:0;
} 
.input-lg { /*hauteur des formulaires*/
    height: 38px;
    padding: 10px 16px;
}

/**************** nouvelles checkbox !!! ****************/
.checkbox label:after, 
.radio label:after {
    content: '';
    display: table;
    clear: both;
}

.checkbox .cr,
.radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #303030;
    border-radius: .2em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.radio .cr {
    border-radius: 50%;
}

.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 15%;
}

.radio .cr .cr-icon {
    margin-left: 0.04em;
}

.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
    display: none;
}

.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .1s ease-in;
}

.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
    opacity: .5;
}
/*** pour checkbox de copie***/
.checkbox, .radio {
    display: block;
    margin-bottom: 3px;
    margin-top: 3px;
    position: relative;
}
.checkbox label, .radio label {
    cursor: pointer;
    font-weight: 400;
    margin-bottom: 0;
    min-height: 20px;
    padding-left: 10px;
}
/************dans images des grilles**********************/
.activeR {
    color: blue;
      font-weight: bold;
}
/*********recorrection : xy des coins*************************/
.rouge {    background-color: red;}
.vert {    background-color: green;}