/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Body
# SVG
# Timer Options ("- 25 +")
# Button

CODE COULEUR

bleu turquoise

#3df8dd (normal) : cercle halo, texte mis en emphase sur fond foncé
#1ec1c0 (+foncé) : fond bouton


--------------------------------------------------------------*/

/*default version*/
@font-face {
  font-family: 'Museo-100';
  src: url('../fonts/Museo-100.eot');
  src:
    local('Museo-100'),
    url('../fonts/Museo-100.otf'),
    format('opentype');
  src:
    local('Museo-100'),
    url('../fonts/Museo-100.ttf')
    format('truetype');
}
/*bold version*/
@font-face {
  font-family: 'Museo-300';
  src: url('../fonts/Museo-300.eot');
  src:
    local('Museo-300'),
    url('../fonts/Museo-300.otf'),
    format('opentype');
  src:
    local('Museo-300'),
    url('../fonts/Museo-300.ttf')
    format('truetype');
}
/*bolder version*/
@font-face {
  font-family: 'Museo-500';
  src: url('../fonts/Museo-500.eot');
  src:
    local('Museo-500'),
    url('../fonts/Museo-500.otf'),
    format('opentype');
  src:
    local('Museo-500'),
    url('../fonts/Museo-500.ttf')
    format('truetype');
}
/*even bolder version*/
@font-face {
  font-family: 'Museo-700';
  src: url('../fonts/Museo-700.eot');
  src:
    local('Museo-700'),
    url('../fonts/Museo-700.otf'),
    format('opentype');
  src:
    local('Museo-700'),
    url('../fonts/Museo-700.ttf')
    format('truetype');
}

/*--------------------------------------------------------------
 # Body
--------------------------------------------------------------*/
body {
  font-family: Helvetica, Arial, Sans-Serif;
  font-size: 16px;
  text-align: center;
  color: #9a9c9b;
  background:#32323a;
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/*Color d'Olivier

fond 32323a
gris moyen 9a9c9b
gris foncé 66656b

*/

h1 { font-family:'Museo-500', sans-serif; font-size: 1.75em; font-weight: normal; margin: 0; }
h2 { font-family:'Museo-500', sans-serif; font-size: 1.35em; font-weight: normal; margin: 0; }
h3 { font-family:'Museo-300', sans-serif; font-size: 1.15em; font-weight: normal; margin: 0; }
h4 { font-family:'Museo-300', sans-serif; font-size: 1.0em; font-weight: normal; margin: 0; }
p { font-family:'Museo-100', sans-serif; font-size: 1em; line-height: 1.35rem; padding: 0.5rem 1rem; margin: 0;}

stayfocus-app {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #32323a;
}


.card .row {
    height: 20%;
    width: 100%;
    border-bottom: 1.2px solid #292C58;
}

.card .cardholder, .card .number, .card .details {
    background-color: #242852;
}

.cardholder .info, .number .info {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cardholder .info label, .number .info label {
    display: inline-block;
    letter-spacing: 0.5px;
    color: #8F92C3;
    width: 100px;
}

.cardholder .info input, .number .info input {
    display: inline-block;
    max-width: 500px;
    width: 500px;
    background-color: transparent;
    font-family: 'Museo-100', sans-serif;
    margin-left: 50px;
    border: none;
    outline: none;
    color: white;
}

#task_wrapper {
    position: absolute;
    top: 15%;
}

#task_text {
  font-family: 'Museo-300', sans-serif;
  text-align:center;
  margin:0;
  font-size:2.25em;
  border:1px solid #32323a;
}

#task_text:hover, #task_text:active {
  border:1px solid #fff;
}

@media (max-width: 576px) {
  .cardholder .info input, .number .info input {
    max-width: 300px;
    width: 300px;
  }
  #task_text {
    font-size:1.5em;
  }
  #task_wrapper {
    top: 10%;
  }
}

/*--------------------------------------------------------------
 # SVG
--------------------------------------------------------------*/

.svg-loader {
  position: relative;
  max-width: 100%;
}
.svg-loader_grow {
  stroke-miterlimit: 10;
  stroke-dasharray: 500;
  stroke-dashoffset: -500;
  stroke-linejoin: round;
  stroke-linecap: round;
}
circle {
  stroke-width: 6;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  position: relative;
  stroke: #3df8dd;
  strokeDashoffset: 500;
}

circle.wq {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
circle.slow {
  -webkit-transition: all 3s ease;
  transition: all 3s ease;
}
circle.gray {
  stroke: #32323a;
  /*stroke: #9a9c9b;*/
}
circle.brown {
  stroke: #A8A38D;
}
circle.circle--hide {
  display:none;
}
circle.darkgreen {
  stroke: #0D8E89;
}

@media (max-height: 640px) {
  .svg-loader {
    max-width: 70%;
    height: 216px;
  }
}

#countdown_text.paused {
    animation-name: flash;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes flash {
  from {opacity: 1;}
  to {opacity: 0;}
}

#timer{ width:100%}

#version{font-family:sans-serif;left:16px;bottom:16px;font-size:11px;opacity:.3;color:#FFF;position:fixed}

.target{font-family: 'Museo-100', sans-serif;
width: 100%;
bottom: 125px;
font-size: 20px;
opacity: .3;
color: #FFF;
position: fixed;
text-align: center;}

.target b {
  color:#3df8dd;
}
@media (max-height: 640px) {
  .target {
    bottom: 85px;
  }
}

/*--------------------------------------------------------------
 # Logs
--------------------------------------------------------------*/
#logs-wrapper {
  position:absolute;
  top:0;
  left:0;
  z-index: 2;
  display: none;
  justify-content: flex-start;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  color: #757575;
  font-size: 14px;
  font-family: 'Museo-100', sans-serif;
  background: #f1f1f1;
  background-image: -webkit-linear-gradient(135deg, #111, #444);
  background-image: linear-gradient(-45deg, #111, #444);
  background-position: center center;
  flex-direction: column;
}

#logs {
  display:flex;
  padding: 15px;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
  margin-top: 50px;
}

.logs--visible {
  display:flex !important;
}

#logs table {
  width:100%;
  max-width:500px;
  margin: 10px auto 10px;
}

#logs table th {
  color:#757575;
}
#logs table td {
  color:#BBB;
  font-family: Helvetica, Arial, Sans-Serif;
}
#clearLogs {
  width:160px;
  height:40px;
  margin:10px auto;
  background: #C0C0C0;
  color:#000;
}

/*--------------------------------------------------------------
 # Timer Options ("- 25 +")
--------------------------------------------------------------*/
#settings-wrapper {
  position:absolute;
  top:0;
  left:0;
  z-index: 2;
  display: none;
  justify-content: center;
  align-content: center;
  width: 100%;
  min-height: 100%;
  color: #757575;
  font-size: 14px;
  font-family: 'Museo-100', sans-serif;
  background: #f1f1f1;
  background-image: -webkit-linear-gradient(135deg, #111, #444);
  background-image: linear-gradient(-45deg, #111, #444);
  background-position: center center;
  flex-direction: column;
}

#settings {
  display:flex;
  padding: 15px;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
}

.timerControls {
  color: #fff;
  font-size: 4em;
  font-family: 'Museo-500', sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  width:100%;
  /*No text select*/
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#settings div.title-control{
  width:100%;
}

#settings p {
  width:100%;
}

.settings--visible {
  display:flex !important;
}

#fab-wrapper {
  position: absolute;
  bottom: 2rem;
  left: 0;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
}
@media (max-height: 640px) {
  #fab-wrapper { bottom: 0.5rem; }
}
.lbminuteCount {
  display: block;
  line-height: 0.5em;
  vertical-align: middle;
  padding: 0.3em;
  width: 70px;
}

.lbminuteCount span {
  font-size: 0.3em;
  font-weight: 300;
}

.lbminuteCount i {
  font-style: normal;
}
.timerLegend {
  font-size: 1em;
  font-weight: 300;
  color: #fff;
  margin: -5px 0 20px 0;
}

.check-control {
  display:block;
  padding: 10px;
  text-align: left;
  color:#FFF;
  width: 300px;
  margin: 0 auto;
  padding-left: 20%;
}


@media (min-width: 576px){.check-control{width:540px;padding-left: 35%;}}
@media (min-width: 768px){.check-control{width:720px;padding-left: 40%;}}
@media (min-width: 992px){.check-control{width:960px;padding-left: 45%;}}
@media (min-width: 1200px){.check-control{width:1140px;padding-left: 45%;}}


/*--------------------------------------------------------------
 # Button
--------------------------------------------------------------*/
#settings-btn {
  position: absolute;
  width:30px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPHBhdGggZD0iTTUxLjIyLDIxaC01LjA1MmMtMC44MTIsMC0xLjQ4MS0wLjQ0Ny0xLjc5Mi0xLjE5N3MtMC4xNTMtMS41NCwwLjQyLTIuMTE0bDMuNTcyLTMuNTcxICAgYzAuNTI1LTAuNTI1LDAuODE0LTEuMjI0LDAuODE0LTEuOTY2YzAtMC43NDMtMC4yODktMS40NDEtMC44MTQtMS45NjdsLTQuNTUzLTQuNTUzYy0xLjA1LTEuMDUtMi44ODEtMS4wNTItMy45MzMsMGwtMy41NzEsMy41NzEgICBjLTAuNTc0LDAuNTczLTEuMzY2LDAuNzMzLTIuMTE0LDAuNDIxQzMzLjQ0Nyw5LjMxMywzMyw4LjY0NCwzMyw3LjgzMlYyLjc4QzMzLDEuMjQ3LDMxLjc1MywwLDMwLjIyLDBIMjMuNzggICBDMjIuMjQ3LDAsMjEsMS4yNDcsMjEsMi43OHY1LjA1MmMwLDAuODEyLTAuNDQ3LDEuNDgxLTEuMTk3LDEuNzkyYy0wLjc0OCwwLjMxMy0xLjU0LDAuMTUyLTIuMTE0LTAuNDIxbC0zLjU3MS0zLjU3MSAgIGMtMS4wNTItMS4wNTItMi44ODMtMS4wNS0zLjkzMywwbC00LjU1Myw0LjU1M2MtMC41MjUsMC41MjUtMC44MTQsMS4yMjQtMC44MTQsMS45NjdjMCwwLjc0MiwwLjI4OSwxLjQ0LDAuODE0LDEuOTY2bDMuNTcyLDMuNTcxICAgYzAuNTczLDAuNTc0LDAuNzMsMS4zNjQsMC40MiwyLjExNFM4LjY0NCwyMSw3LjgzMiwyMUgyLjc4QzEuMjQ3LDIxLDAsMjIuMjQ3LDAsMjMuNzh2Ni40MzlDMCwzMS43NTMsMS4yNDcsMzMsMi43OCwzM2g1LjA1MiAgIGMwLjgxMiwwLDEuNDgxLDAuNDQ3LDEuNzkyLDEuMTk3czAuMTUzLDEuNTQtMC40MiwyLjExNGwtMy41NzIsMy41NzFjLTAuNTI1LDAuNTI1LTAuODE0LDEuMjI0LTAuODE0LDEuOTY2ICAgYzAsMC43NDMsMC4yODksMS40NDEsMC44MTQsMS45NjdsNC41NTMsNC41NTNjMS4wNTEsMS4wNTEsMi44ODEsMS4wNTMsMy45MzMsMGwzLjU3MS0zLjU3MmMwLjU3NC0wLjU3MywxLjM2My0wLjczMSwyLjExNC0wLjQyICAgYzAuNzUsMC4zMTEsMS4xOTcsMC45OCwxLjE5NywxLjc5MnY1LjA1MmMwLDEuNTMzLDEuMjQ3LDIuNzgsMi43OCwyLjc4aDYuNDM5YzEuNTMzLDAsMi43OC0xLjI0NywyLjc4LTIuNzh2LTUuMDUyICAgYzAtMC44MTIsMC40NDctMS40ODEsMS4xOTctMS43OTJjMC43NTEtMC4zMTIsMS41NC0wLjE1MywyLjExNCwwLjQybDMuNTcxLDMuNTcyYzEuMDUyLDEuMDUyLDIuODgzLDEuMDUsMy45MzMsMGw0LjU1My00LjU1MyAgIGMwLjUyNS0wLjUyNSwwLjgxNC0xLjIyNCwwLjgxNC0xLjk2N2MwLTAuNzQyLTAuMjg5LTEuNDQtMC44MTQtMS45NjZsLTMuNTcyLTMuNTcxYy0wLjU3My0wLjU3NC0wLjczLTEuMzY0LTAuNDItMi4xMTQgICBTNDUuMzU2LDMzLDQ2LjE2OCwzM2g1LjA1MmMxLjUzMywwLDIuNzgtMS4yNDcsMi43OC0yLjc4VjIzLjc4QzU0LDIyLjI0Nyw1Mi43NTMsMjEsNTEuMjIsMjF6IE01MiwzMC4yMiAgIEM1MiwzMC42NSw1MS42NSwzMSw1MS4yMiwzMWgtNS4wNTJjLTEuNjI0LDAtMy4wMTksMC45MzItMy42NCwyLjQzMmMtMC42MjIsMS41LTAuMjk1LDMuMTQ2LDAuODU0LDQuMjk0bDMuNTcyLDMuNTcxICAgYzAuMzA1LDAuMzA1LDAuMzA1LDAuOCwwLDEuMTA0bC00LjU1Myw0LjU1M2MtMC4zMDQsMC4zMDQtMC43OTksMC4zMDYtMS4xMDQsMGwtMy41NzEtMy41NzJjLTEuMTQ5LTEuMTQ5LTIuNzk0LTEuNDc0LTQuMjk0LTAuODU0ICAgYy0xLjUsMC42MjEtMi40MzIsMi4wMTYtMi40MzIsMy42NHY1LjA1MkMzMSw1MS42NSwzMC42NSw1MiwzMC4yMiw1MkgyMy43OEMyMy4zNSw1MiwyMyw1MS42NSwyMyw1MS4yMnYtNS4wNTIgICBjMC0xLjYyNC0wLjkzMi0zLjAxOS0yLjQzMi0zLjY0Yy0wLjUwMy0wLjIwOS0xLjAyMS0wLjMxMS0xLjUzMy0wLjMxMWMtMS4wMTQsMC0xLjk5NywwLjQtMi43NjEsMS4xNjRsLTMuNTcxLDMuNTcyICAgYy0wLjMwNiwwLjMwNi0wLjgwMSwwLjMwNC0xLjEwNCwwbC00LjU1My00LjU1M2MtMC4zMDUtMC4zMDUtMC4zMDUtMC44LDAtMS4xMDRsMy41NzItMy41NzFjMS4xNDgtMS4xNDgsMS40NzYtMi43OTQsMC44NTQtNC4yOTQgICBDMTAuODUxLDMxLjkzMiw5LjQ1NiwzMSw3LjgzMiwzMUgyLjc4QzIuMzUsMzEsMiwzMC42NSwyLDMwLjIyVjIzLjc4QzIsMjMuMzUsMi4zNSwyMywyLjc4LDIzaDUuMDUyICAgYzEuNjI0LDAsMy4wMTktMC45MzIsMy42NC0yLjQzMmMwLjYyMi0xLjUsMC4yOTUtMy4xNDYtMC44NTQtNC4yOTRsLTMuNTcyLTMuNTcxYy0wLjMwNS0wLjMwNS0wLjMwNS0wLjgsMC0xLjEwNGw0LjU1My00LjU1MyAgIGMwLjMwNC0wLjMwNSwwLjc5OS0wLjMwNSwxLjEwNCwwbDMuNTcxLDMuNTcxYzEuMTQ3LDEuMTQ3LDIuNzkyLDEuNDc2LDQuMjk0LDAuODU0QzIyLjA2OCwxMC44NTEsMjMsOS40NTYsMjMsNy44MzJWMi43OCAgIEMyMywyLjM1LDIzLjM1LDIsMjMuNzgsMmg2LjQzOUMzMC42NSwyLDMxLDIuMzUsMzEsMi43OHY1LjA1MmMwLDEuNjI0LDAuOTMyLDMuMDE5LDIuNDMyLDMuNjQgICBjMS41MDIsMC42MjIsMy4xNDYsMC4yOTQsNC4yOTQtMC44NTRsMy41NzEtMy41NzFjMC4zMDYtMC4zMDUsMC44MDEtMC4zMDUsMS4xMDQsMGw0LjU1Myw0LjU1M2MwLjMwNSwwLjMwNSwwLjMwNSwwLjgsMCwxLjEwNCAgIGwtMy41NzIsMy41NzFjLTEuMTQ4LDEuMTQ4LTEuNDc2LDIuNzk0LTAuODU0LDQuMjk0YzAuNjIxLDEuNSwyLjAxNiwyLjQzMiwzLjY0LDIuNDMyaDUuMDUyQzUxLjY1LDIzLDUyLDIzLjM1LDUyLDIzLjc4VjMwLjIyeiIgZmlsbD0iI0ZGRkZGRiIvPgoJPHBhdGggZD0iTTI3LDE4Yy00Ljk2MywwLTksNC4wMzctOSw5czQuMDM3LDksOSw5czktNC4wMzcsOS05UzMxLjk2MywxOCwyNywxOHogTTI3LDM0Yy0zLjg1OSwwLTctMy4xNDEtNy03czMuMTQxLTcsNy03ICAgczcsMy4xNDEsNyw3UzMwLjg1OSwzNCwyNywzNHoiIGZpbGw9IiNGRkZGRkYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') center center no-repeat;
  background-size:30px 30px;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9000;
  height: 40px;
  opacity:0.5;
  cursor:pointer;
  padding: 10px 15px;
}

#logs-btn {
  position: absolute;
  width:30px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OS43IDQ4OS43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODkuNyA0ODkuNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTUyLjcsMTM0Ljc1YzI5LjEsMCw1Mi43LTIzLjcsNTIuNy01Mi43cy0yMy42LTUyLjgtNTIuNy01Mi44UzAsNTIuOTUsMCw4MS45NVMyMy43LDEzNC43NSw1Mi43LDEzNC43NXogTTUyLjcsNTMuNzUgICAgYzE1LjYsMCwyOC4yLDEyLjcsMjguMiwyOC4ycy0xMi43LDI4LjItMjguMiwyOC4ycy0yOC4yLTEyLjctMjguMi0yOC4yUzM3LjIsNTMuNzUsNTIuNyw1My43NXoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNNTIuNywyOTcuNTVjMjkuMSwwLDUyLjctMjMuNyw1Mi43LTUyLjdzLTIzLjYtNTIuNy01Mi43LTUyLjdTMCwyMTUuNzUsMCwyNDQuODVTMjMuNywyOTcuNTUsNTIuNywyOTcuNTV6IE01Mi43LDIxNi42NSAgICBjMTUuNiwwLDI4LjIsMTIuNywyOC4yLDI4LjJzLTEyLjcsMjguMi0yOC4yLDI4LjJzLTI4LjItMTIuNi0yOC4yLTI4LjJTMzcuMiwyMTYuNjUsNTIuNywyMTYuNjV6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTUyLjcsNDYwLjQ1YzI5LjEsMCw1Mi43LTIzLjcsNTIuNy01Mi43YzAtMjkuMS0yMy43LTUyLjctNTIuNy01Mi43UzAsMzc4Ljc1LDAsNDA3Ljc1QzAsNDM2Ljc1LDIzLjcsNDYwLjQ1LDUyLjcsNDYwLjQ1ICAgIHogTTUyLjcsMzc5LjQ1YzE1LjYsMCwyOC4yLDEyLjcsMjguMiwyOC4yYzAsMTUuNi0xMi43LDI4LjItMjguMiwyOC4ycy0yOC4yLTEyLjctMjguMi0yOC4yQzI0LjUsMzkyLjE1LDM3LjIsMzc5LjQ1LDUyLjcsMzc5LjQ1ICAgIHoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNMTc1LjksOTQuMjVoMzAxLjVjNi44LDAsMTIuMy01LjUsMTIuMy0xMi4zcy01LjUtMTIuMy0xMi4zLTEyLjNIMTc1LjljLTYuOCwwLTEyLjMsNS41LTEyLjMsMTIuMyAgICBTMTY5LjEsOTQuMjUsMTc1LjksOTQuMjV6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTE3NS45LDI1Ny4xNWgzMDEuNWM2LjgsMCwxMi4zLTUuNSwxMi4zLTEyLjNzLTUuNS0xMi4zLTEyLjMtMTIuM0gxNzUuOWMtNi44LDAtMTIuMyw1LjUtMTIuMywxMi4zICAgIFMxNjkuMSwyNTcuMTUsMTc1LjksMjU3LjE1eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0xNzUuOSw0MTkuOTVoMzAxLjVjNi44LDAsMTIuMy01LjUsMTIuMy0xMi4zcy01LjUtMTIuMy0xMi4zLTEyLjNIMTc1LjljLTYuOCwwLTEyLjMsNS41LTEyLjMsMTIuMyAgICBTMTY5LjEsNDE5Ljk1LDE3NS45LDQxOS45NXoiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') center center no-repeat;
  background-size:30px 30px;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9000;
  height: 40px;
  opacity:0.5;
  cursor:pointer;
  padding: 10px 15px;
}

.btnsettings--close, .btnlogs--close {
  opacity:1 !important;
  right: 0;
  left:auto !important;
  background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTEycHgiIHZlcnNpb249IjEuMSIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCI+CiAgPGc+CiAgICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjguOTQxLDMxLjc4NkwwLjYxMyw2MC4xMTRjLTAuNzg3LDAuNzg3LTAuNzg3LDIuMDYyLDAsMi44NDljMC4zOTMsMC4zOTQsMC45MDksMC41OSwxLjQyNCwwLjU5ICAgYzAuNTE2LDAsMS4wMzEtMC4xOTYsMS40MjQtMC41OWwyOC41NDEtMjguNTQxbDI4LjU0MSwyOC41NDFjMC4zOTQsMC4zOTQsMC45MDksMC41OSwxLjQyNCwwLjU5YzAuNTE1LDAsMS4wMzEtMC4xOTYsMS40MjQtMC41OSAgIGMwLjc4Ny0wLjc4NywwLjc4Ny0yLjA2MiwwLTIuODQ5TDM1LjA2NCwzMS43ODZMNjMuNDEsMy40MzhjMC43ODctMC43ODcsMC43ODctMi4wNjIsMC0yLjg0OWMtMC43ODctMC43ODYtMi4wNjItMC43ODYtMi44NDgsMCAgIEwzMi4wMDMsMjkuMTVMMy40NDEsMC41OWMtMC43ODctMC43ODYtMi4wNjEtMC43ODYtMi44NDgsMGMtMC43ODcsMC43ODctMC43ODcsMi4wNjIsMCwyLjg0OUwyOC45NDEsMzEuNzg2eiIvPgogIDwvZz4KPC9zdmc+Cg==') !important;
}

#start {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;-ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;-ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  background: #1ec1c0;
  border-radius: 50%;
  box-sizing: border-box;
  color: transparent;
  cursor: pointer;
  height: 56px;
  min-width: 0;
  outline: none;
  padding: 16px;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  width: 56px;
  z-index: 0;

  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;;
}
#start:focus{
  outline: none;
  background: none;
}

#start.play_filet {
  background: #1ec1c0 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxLjk5OSA0MS45OTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxLjk5OSA0MS45OTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8cGF0aCBkPSJNMzYuMDY4LDIwLjE3NmwtMjktMjBDNi43NjEtMC4wMzUsNi4zNjMtMC4wNTcsNi4wMzUsMC4xMTRDNS43MDYsMC4yODcsNS41LDAuNjI3LDUuNSwwLjk5OXY0MCAgYzAsMC4zNzIsMC4yMDYsMC43MTMsMC41MzUsMC44ODZjMC4xNDYsMC4wNzYsMC4zMDYsMC4xMTQsMC40NjUsMC4xMTRjMC4xOTksMCwwLjM5Ny0wLjA2LDAuNTY4LTAuMTc3bDI5LTIwICBjMC4yNzEtMC4xODcsMC40MzItMC40OTQsMC40MzItMC44MjNTMzYuMzM4LDIwLjM2MywzNi4wNjgsMjAuMTc2eiBNNy41LDM5LjA5NVYyLjkwNGwyNi4yMzksMTguMDk2TDcuNSwzOS4wOTV6IiBmaWxsPSIjRkZGRkZGIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=') 20px center / 20px 20px no-repeat;
}
#start.play {
  background: #1ec1c0 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQxLjk5OSA0MS45OTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxLjk5OSA0MS45OTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8cGF0aCBkPSJNMzYuMDY4LDIwLjE3NmwtMjktMjBDNi43NjEtMC4wMzUsNi4zNjMtMC4wNTcsNi4wMzUsMC4xMTRDNS43MDYsMC4yODcsNS41LDAuNjI3LDUuNSwwLjk5OXY0MCAgYzAsMC4zNzIsMC4yMDYsMC43MTMsMC41MzUsMC44ODZjMC4xNDYsMC4wNzYsMC4zMDYsMC4xMTQsMC40NjUsMC4xMTRjMC4xOTksMCwwLjM5Ny0wLjA2LDAuNTY4LTAuMTc3bDI5LTIwICBjMC4yNzEtMC4xODcsMC40MzItMC40OTQsMC40MzItMC44MjNTMzYuMzM4LDIwLjM2MywzNi4wNjgsMjAuMTc2eiIgZmlsbD0iI0ZGRkZGRiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') 20px center / 20px 20px no-repeat;
}
#start.stop {
  background: #1ec1c0 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM2IDM2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNiAzNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIGQ9Ik0zNSwwSDFDMC40NDgsMCwwLDAuNDQ3LDAsMXYzNGMwLDAuNTUzLDAuNDQ4LDEsMSwxaDM0YzAuNTUyLDAsMS0wLjQ0NywxLTFWMUMzNiwwLjQ0NywzNS41NTIsMCwzNSwweiIgZmlsbD0iI0ZGRkZGRiIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') center center / 20px 20px no-repeat;
}

#start.reload {
  background: #1ec1c0 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDgyLjE5NSwyMjYuMTk2QzQ4Mi4xOTUsMTAxLjQ3MSwzODAuNzI1LDAsMjU2LjAwMSwwUzI5LjgwNSwxMDEuNDcxLDI5LjgwNSwyMjYuMTk2YzAsNy40MDksNi4wMDcsMTMuNDE2LDEzLjQxNiwxMy40MTYgICAgczEzLjQxNi02LjAwOCwxMy40MTYtMTMuNDE2YzAtMTA5LjkzLDg5LjQzNC0xOTkuMzYzLDE5OS4zNjMtMTk5LjM2M3MxOTkuMzYzLDg5LjQzNCwxOTkuMzYzLDE5OS4zNjMgICAgYzAsMTA5LjkyOC04OS40MzQsMTk5LjM2Mi0xOTkuMzYzLDE5OS4zNjJoLTIzLjI3NmwzMy4yODItMzcuMjU1YzQuOTM3LTUuNTI1LDQuNDU4LTE0LjAwNy0xLjA2Ny0xOC45NDQgICAgYy01LjUyNS00LjkzNy0xNC4wMDgtNC40NTctMTguOTQ0LDEuMDY4bC00Ny41NzYsNTMuMjU1Yy03Ljc4OCw4LjcxOC03Ljc4OCwyMS44NjYsMCwzMC41ODRsNDcuNTc2LDUzLjI1NSAgICBjMi42NTEsMi45NjgsNi4zMjIsNC40NzgsMTAuMDEsNC40NzhjMy4xODEsMCw2LjM3NS0xLjEyNiw4LjkzNC0zLjQxYzUuNTI2LTQuOTM3LDYuMDA0LTEzLjQxOSwxLjA2Ny0xOC45NDRsLTMzLjI4Mi0zNy4yNTUgICAgaDIzLjI3NkMzODAuNzI1LDQ1Mi4zOSw0ODIuMTk1LDM1MC45MTksNDgyLjE5NSwyMjYuMTk2eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=') center center / 25px 25px no-repeat;
}

#next {
    font-family: 'Museo-100', sans-serif;
    position: absolute;
    top: 0;
    line-height: 56px;
    left: 50%;
    margin-left: 28px;
    padding-left: 4%;
    cursor:pointer;
    opacity: .3;
    color: #FFF;
    display:none;
}
#next:hover {
    opacity: .6;
}

/*--------------------------------------------------------------
 # Checkbox
--------------------------------------------------------------*/

.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 0;
}
.styled-checkbox + label:before {
  content: '';
  margin-right: 10px;
  display: inline-block;
  vertical-align: text-top;
  width: 20px;
  height: 20px;
  background: white;
}
.styled-checkbox:hover + label:before {
  background: #9a9c9b;
}
.styled-checkbox:focus + label:before {
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
  background: #9a9c9b;
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  -webkit-box-shadow: none;
          box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 2px;
  height: 2px;
  -webkit-box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
          box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

/*--------------------------------------------------------------
 # Quotes
--------------------------------------------------------------*/
#quotes {
  max-width: 580px;
  padding: 0 20px;
  margin: auto 0;
  height: 140px;
  overflow: hidden;
}

#quotes h1.colored {
  color:#A8A38D; /* essayer le #fff */
  text-transform:capitalize;
  margin: auto 0.67em;
}
#quotes p.colored {
  color:#eee;
  text-align:left;
  font-size: 0.85em;
  line-height: 1.65;
}
.home-quote {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    color: #ccd4d9;
    margin-bottom: 10px;
}
h1.home-quote {
  line-height: 1.5;
}
h2.home-quote {
  line-height: 1.35;
}
h3.home-quote {
  line-height: 1.25;
}
.home-quote:before {
    content: "\201C";
}
.home-quote:after {
    content: "\201D";
}
.author {
  color: #7a8f99;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.author:before {
    content: '\2014 \00A0';
}
@media (max-height: 640px) {
  #quotes p.colored {
    line-height: 1.2;
  }
  #quotes h1.colored {
    margin:0;
    }
}

@media (max-width: 576px) {
  #quotes {
    padding: 0 20px;
  }
  #fab-wrapper {
    bottom: 1rem;
  }
}

/*--------------------------------------------------------------
 # Support
--------------------------------------------------------------*/
#notsupportview{
  width: 100%;
  height: 100%;

  display: none; /* flex */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;

  text-align: center;
  color: white;
}
#notsupportview > div{
  width: 100%;
  font-weight: 300;
  line-height: 1.5rem;
}
.sadface{
  font-size: 4rem;
  margin: 1rem 0;
  font-weight: 100;
  transform: rotate(90deg);
  opacity:0.7;
}