/*

Custom grids go here

*/
/*

You can add a grid with the following properties :

-min : min-width
-max : min-width (use -1 for infinite)
-grid : the susy grid to use
-cols : the grid column count
-name : the name of the grid

*/
/*

Set width with the number of column passed as argument

-list : a list of width values for each grid
        Example : ("tablet":4, "hd":6, ...)
-wide : indicate if the last column gutter is included

*/
/*

Set left margin with the number of column passed as argument

-list : a list of margin values for each grid
        Example : ("tablet":4, "hd":6, ...)
-wide : indicate if the last column gutter is included

*/
/*

Set the element as container for each defined grid

*/
/* line 3, ../sass/quizz.scss */
html {
  font-size: 62.5%;
}

/* line 7, ../sass/quizz.scss */
.question-background {
  position: fixed;
  /*background-color:rgba(0, 0, 0, 0.3);*/
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.3;
  transition: 0.3s;
}

/* line 18, ../sass/quizz.scss */
.quizz-wrapper {
  position: fixed;
  display: flex;
  font-family: DINPro-Regular;
  font-size: 1.6rem;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
  -moz-box-shadow: -5px 15px 35px 15px rgba(101, 101, 101, 0.2);
  -webkit-box-shadow: -5px 15px 35px 15px rgba(101, 101, 101, 0.2);
  -o-box-shadow: -5px 15px 35px 15px rgba(101, 101, 101, 0.2);
  box-shadow: -5px 15px 35px 15px rgba(101, 101, 101, 0.2);
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
@media (min-width: 0px) and (max-width: 1024px) {
  /* line 18, ../sass/quizz.scss */
  .quizz-wrapper {
    width: 66%;
    float: left;
    margin-right: 2.85714%;
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  /* line 18, ../sass/quizz.scss */
  .quizz-wrapper {
    width: 49%;
    float: left;
    margin-right: 1.40845%;
  }
}
@media (min-width: 1281px) and (max-width: 1367px) {
  /* line 18, ../sass/quizz.scss */
  .quizz-wrapper {
    width: 49%;
    float: left;
    margin-right: 1.40845%;
  }
}
@media (min-width: 1367px) and (max-width: 1000000px) {
  /* line 18, ../sass/quizz.scss */
  .quizz-wrapper {
    width: 49%;
    float: left;
    margin-right: 1.40845%;
  }
}
@media (min-width: 0px) and (max-width: 1024px) {
  /* line 18, ../sass/quizz.scss */
  .quizz-wrapper {
    margin-left: 17%;
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
  /* line 18, ../sass/quizz.scss */
  .quizz-wrapper {
    margin-left: 25%;
  }
}
@media (min-width: 1281px) and (max-width: 1367px) {
  /* line 18, ../sass/quizz.scss */
  .quizz-wrapper {
    margin-left: 25%;
  }
}
@media (min-width: 1367px) and (max-width: 1000000px) {
  /* line 18, ../sass/quizz.scss */
  .quizz-wrapper {
    margin-left: 25%;
  }
}
/* line 50, ../sass/quizz.scss */
.quizz-wrapper .left-wrap, .quizz-wrapper .right-wrap {
  background-color: #5DA2D4;
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* line 58, ../sass/quizz.scss */
.quizz-wrapper .left-wrap .icon, .quizz-wrapper .right-wrap .icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  background-size: 100% 100%;
}
/* line 66, ../sass/quizz.scss */
.quizz-wrapper .left-wrap .icon.next, .quizz-wrapper .right-wrap .icon.next {
  background-image: url("../../assets/images/suivant.svg");
}
/* line 70, ../sass/quizz.scss */
.quizz-wrapper .left-wrap .icon.previous, .quizz-wrapper .right-wrap .icon.previous {
  background-image: url("../../assets/images/suivant.svg");
  transform: rotateZ(180deg);
}
/* line 76, ../sass/quizz.scss */
.quizz-wrapper .middle-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* line 81, ../sass/quizz.scss */
.quizz-wrapper .middle-wrap .top {
  font-family: DINPro-Bold;
  background-color: white;
  padding: 25px 25px 0 25px;
  text-align: center;
  color: #696969;
}
/* line 88, ../sass/quizz.scss */
.quizz-wrapper .middle-wrap .top .line {
  background-color: #696969;
  width: 200px;
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
/* line 98, ../sass/quizz.scss */
.quizz-wrapper .middle-wrap .question {
  background-color: white;
  padding: 25px;
  color: #696969;
}
/* line 104, ../sass/quizz.scss */
.quizz-wrapper .middle-wrap .reponse-wrap {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
/* line 109, ../sass/quizz.scss */
.quizz-wrapper .middle-wrap .reponse-wrap .reponse-content {
  margin: 25px;
}
/* line 115, ../sass/quizz.scss */
.quizz-wrapper #user-input {
  font-family: DINPro-Regular;
  font-size: 16px;
  border: none;
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.3) inset;
  width: 100%;
  padding: 10px;
  color: #696969;
  resize: none;
}
/* line 126, ../sass/quizz.scss */
.quizz-wrapper md-checkbox {
  display: block;
}
/* line 130, ../sass/quizz.scss */
.quizz-wrapper md-checkbox:last-of-type {
  margin-right: 16px !important;
}
/* line 134, ../sass/quizz.scss */
.quizz-wrapper #drop-down {
  background-color: white;
  color: black;
}
/* line 139, ../sass/quizz.scss */
.quizz-wrapper #drop-down.wrong {
  background: #F7931E;
}
/* line 142, ../sass/quizz.scss */
.quizz-wrapper #drop-down.right {
  background: #5BA3D4;
}
/* line 146, ../sass/quizz.scss */
.quizz-wrapper #drop-down md-select-value span {
  color: #696969;
  padding: 0px 0px 0px 3px;
  font-family: DINPro-Regular;
  -webkit-transform: translate3D(0, 0, 0) !important;
  -moz-transform: translate3D(0, 0, 0) !important;
  -ms-transform: translate3D(0, 0, 0) !important;
  -o-transform: translate3D(0, 0, 0) !important;
  transform: translate3D(0, 0, 0) !important;
}
/* line 158, ../sass/quizz.scss */
.quizz-wrapper ._md-select-value ._md-select-icon {
  /*color: #5ba2d4 !important;*/
}
/* line 162, ../sass/quizz.scss */
.quizz-wrapper .correction .wrong {
  background-color: rgba(247, 147, 30, 0.3);
  /*#F7931E*/
  border-radius: 5px;
  color: #F7931E;
  padding: 0 0 3px;
}
/* line 169, ../sass/quizz.scss */
.quizz-wrapper .correction p {
  padding: 7px !important;
}
/* line 173, ../sass/quizz.scss */
.quizz-wrapper .correction .right {
  background-color: rgba(91, 163, 212, 0.3);
  /*#5BA3D4*/
  border-radius: 5px;
  padding: 0 0 3px;
  color: #5BA3D4;
}
/* line 180, ../sass/quizz.scss */
.quizz-wrapper .correction {
  font-weight: bold;
  margin: 0 !important;
}
/* line 185, ../sass/quizz.scss */
.quizz-wrapper #wrongBubble ._md-sign,
.quizz-wrapper #wrongBubble ._md-focus-ring {
  background-color: #F7931E !important;
}
/* line 189, ../sass/quizz.scss */
.quizz-wrapper #wrongBubble ._md-sign::after {
  border-top-color: #F7931E !important;
}
/* line 193, ../sass/quizz.scss */
.quizz-wrapper md-radio-button {
  /*color:white !important;*/
  padding: 5px 10px;
}
/* line 197, ../sass/quizz.scss */
.quizz-wrapper md-radio-button ._md-container {
  left: 10px;
}
/* line 200, ../sass/quizz.scss */
.quizz-wrapper md-radio-button ._md-off {
  border-color: white;
}
/* line 203, ../sass/quizz.scss */
.quizz-wrapper md-radio-button.wrong {
  background-color: rgba(247, 147, 30, 0.3);
  /*#F7931E*/
  border-radius: 5px;
  color: #F7931E !important;
}
/* line 208, ../sass/quizz.scss */
.quizz-wrapper md-radio-button.right {
  background-color: rgba(91, 163, 212, 0.3);
  /*#5BA3D4*/
  border-radius: 5px;
  color: #5BA3D4 !important;
}
/* line 216, ../sass/quizz.scss */
.quizz-wrapper md-radio-button .right label, .quizz-wrapper md-radio-button .wrong label {
  font-weight: bold !important;
}
/* line 222, ../sass/quizz.scss */
.quizz-wrapper md-radio-button.wrong ._md-on {
  background-color: #F7931E !important;
}
/* line 225, ../sass/quizz.scss */
.quizz-wrapper md-radio-button.wrong ._md-off {
  border-color: #F7931E !important;
}
/* line 228, ../sass/quizz.scss */
.quizz-wrapper md-radio-button.right ._md-on {
  background-color: #5BA3D4 !important;
}
/* line 231, ../sass/quizz.scss */
.quizz-wrapper md-radio-button.right ._md-off {
  border-color: #5BA3D4 !important;
}
/* line 234, ../sass/quizz.scss */
.quizz-wrapper md-radio-button.right label, .quizz-wrapper md-radio-button.wrong label {
  font-weight: bold !important;
}
/* line 238, ../sass/quizz.scss */
.quizz-wrapper md-radio-button label {
  font-weight: normal !important;
}
/* line 242, ../sass/quizz.scss */
.quizz-wrapper md-checkbox {
  padding: 5px 10px;
}
/* line 245, ../sass/quizz.scss */
.quizz-wrapper md-checkbox ._md-container {
  left: 10px;
}
/* line 248, ../sass/quizz.scss */
.quizz-wrapper md-checkbox ._md-icon {
  border-color: white;
}
/* line 251, ../sass/quizz.scss */
.quizz-wrapper md-checkbox.wrong {
  background-color: rgba(247, 147, 30, 0.3);
  /*#F7931E*/
  border-radius: 5px;
  color: #F7931E;
}
/* line 256, ../sass/quizz.scss */
.quizz-wrapper md-checkbox.right {
  background-color: rgba(91, 163, 212, 0.3);
  /*#5BA3D4*/
  border-radius: 5px;
  color: #5BA3D4;
}
/* line 261, ../sass/quizz.scss */
.quizz-wrapper md-checkbox.wrong ._md-icon {
  background-color: #F7931E !important;
}
/* line 264, ../sass/quizz.scss */
.quizz-wrapper md-checkbox.right ._md-icon {
  background-color: #5BA3D4 !important;
}
/* line 267, ../sass/quizz.scss */
.quizz-wrapper md-checkbox.right label, .quizz-wrapper md-checkbox.wrong label {
  font-weight: bold !important;
}
/* line 271, ../sass/quizz.scss */
.quizz-wrapper md-checkbox.right.md-checked:not([disabled]) ._md-icon::after,
.quizz-wrapper md-checkbox.wrong.md-checked:not([disabled]) ._md-icon::after {
  border-color: #ffffff !important;
}
/* line 276, ../sass/quizz.scss */
.quizz-wrapper ._md-select-value ._md-select-icon::after {
  top: -1px !important;
}
/* line 280, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* line 285, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap .min, .quizz-wrapper .slider-wrap .max {
  padding: 10px;
}
/* line 289, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap md-slider {
  flex: 1;
}
/* line 293, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap md-slider ._md-track {
  background-color: white;
}
/* line 297, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap md-slider ._md-track._md-track-fill {
  background-color: #5CA2D3;
}
/* line 301, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap md-slider ._md-sign {
  background-color: #5CA2D3;
}
/* line 305, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap md-slider ._md-track-ticks {
  display: none;
}
/* line 309, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap md-slider ._md-thumb-text {
  color: white;
}
/* line 313, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap md-slider ._md-sign::after {
  border-top-color: #5CA2D3;
}
/* line 317, ../sass/quizz.scss */
.quizz-wrapper .slider-wrap md-slider._md-min[md-discrete] ._md-thumb::after {
  background-color: #ffffff !important;
}
/* line 322, ../sass/quizz.scss */
.quizz-wrapper img.icon-clear,
.quizz-wrapper img.icon-check {
  width: 24px;
  height: 24px;
  display: none;
  vertical-align: middle;
}
/* line 331, ../sass/quizz.scss */
.quizz-wrapper md-checkbox:not([disabled]) ._md-icon {
  border-color: white !important;
}

/* line 336, ../sass/quizz.scss */
md-select-menu md-content {
  background-color: #ffffff !important;
}

/* line 340, ../sass/quizz.scss */
md-select-menu md-option:hover {
  background-color: #ffffff !important;
}

/* line 344, ../sass/quizz.scss */
md-select-menu md-option:focus {
  background-color: #ffffff !important;
}

/* line 349, ../sass/quizz.scss */
ity-quizz-input-answer-directive img.icon-clear, ity-quizz-drop-down-directive img.icon-clear {
  width: 24px;
  height: 24px;
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 10px;
}
/* line 357, ../sass/quizz.scss */
ity-quizz-input-answer-directive img.icon-check, ity-quizz-drop-down-directive img.icon-check {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  display: inline-block !important;
  vertical-align: middle;
}