/*--------------------------------------------------------------
>>> 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

=> Pour convertir un SVG en css inline base 64
https://codebeautify.org/svg-to-base64-converter

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

/*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;
}

.timerControls input {
  text-align: center;
  font-size: 1em;
  border: 1px solid #32323a;
  background-color: transparent;
  font-family: 'Museo-100', sans-serif;
  border: none;
  outline: none;
  color: white;
}
.timerControls input:hover, .timerControls input:active {
  border: 1px solid #fff;
}

#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, #student-btn, #professor-btn, #digiscreen-btn, #pronote-btn, #sti-btn{
  position: absolute;
  width:180px;
  background-position: top left;
  top: 0;
  left: 0;
  display: flex;
  justify-content:left;
  align-items: center;
  z-index: 9000;
  height: 40px;
  opacity:0.5;
  cursor:pointer;
  padding: 10px 15px;
  color: #9e9e9e;
  text-decoration: none;
  font-size: 12px;
  padding-left: 50px;
  text-indent: -1990px;
}
#logs-btn:hover, #student-btn:hover, #professor-btn:hover, #digiscreen-btn:hover, #pronote-btn:hover, #sti-btn:hover{
  text-indent: 0;
}
#logs-btn {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4OS43IDQ4OS43IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODkuNyA0ODkuNzsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTUyLjcsMTM0Ljc1YzI5LjEsMCw1Mi43LTIzLjcsNTIuNy01Mi43cy0yMy42LTUyLjgtNTIuNy01Mi44UzAsNTIuOTUsMCw4MS45NVMyMy43LDEzNC43NSw1Mi43LDEzNC43NXogTTUyLjcsNTMuNzUgICAgYzE1LjYsMCwyOC4yLDEyLjcsMjguMiwyOC4ycy0xMi43LDI4LjItMjguMiwyOC4ycy0yOC4yLTEyLjctMjguMi0yOC4yUzM3LjIsNTMuNzUsNTIuNyw1My43NXoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNNTIuNywyOTcuNTVjMjkuMSwwLDUyLjctMjMuNyw1Mi43LTUyLjdzLTIzLjYtNTIuNy01Mi43LTUyLjdTMCwyMTUuNzUsMCwyNDQuODVTMjMuNywyOTcuNTUsNTIuNywyOTcuNTV6IE01Mi43LDIxNi42NSAgICBjMTUuNiwwLDI4LjIsMTIuNywyOC4yLDI4LjJzLTEyLjcsMjguMi0yOC4yLDI4LjJzLTI4LjItMTIuNi0yOC4yLTI4LjJTMzcuMiwyMTYuNjUsNTIuNywyMTYuNjV6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTUyLjcsNDYwLjQ1YzI5LjEsMCw1Mi43LTIzLjcsNTIuNy01Mi43YzAtMjkuMS0yMy43LTUyLjctNTIuNy01Mi43UzAsMzc4Ljc1LDAsNDA3Ljc1QzAsNDM2Ljc1LDIzLjcsNDYwLjQ1LDUyLjcsNDYwLjQ1ICAgIHogTTUyLjcsMzc5LjQ1YzE1LjYsMCwyOC4yLDEyLjcsMjguMiwyOC4yYzAsMTUuNi0xMi43LDI4LjItMjguMiwyOC4ycy0yOC4yLTEyLjctMjguMi0yOC4yQzI0LjUsMzkyLjE1LDM3LjIsMzc5LjQ1LDUyLjcsMzc5LjQ1ICAgIHoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNMTc1LjksOTQuMjVoMzAxLjVjNi44LDAsMTIuMy01LjUsMTIuMy0xMi4zcy01LjUtMTIuMy0xMi4zLTEyLjNIMTc1LjljLTYuOCwwLTEyLjMsNS41LTEyLjMsMTIuMyAgICBTMTY5LjEsOTQuMjUsMTc1LjksOTQuMjV6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTE3NS45LDI1Ny4xNWgzMDEuNWM2LjgsMCwxMi4zLTUuNSwxMi4zLTEyLjNzLTUuNS0xMi4zLTEyLjMtMTIuM0gxNzUuOWMtNi44LDAtMTIuMyw1LjUtMTIuMywxMi4zICAgIFMxNjkuMSwyNTcuMTUsMTc1LjksMjU3LjE1eiIgZmlsbD0iI0ZGRkZGRiIvPgoJCTxwYXRoIGQ9Ik0xNzUuOSw0MTkuOTVoMzAxLjVjNi44LDAsMTIuMy01LjUsMTIuMy0xMi4zcy01LjUtMTIuMy0xMi4zLTEyLjNIMTc1LjljLTYuOCwwLTEyLjMsNS41LTEyLjMsMTIuMyAgICBTMTY5LjEsNDE5Ljk1LDE3NS45LDQxOS45NXoiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K') center center no-repeat;
  background-size:30px 30px;
  top: 120px;
}
#sti-btn {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDp3aGl0ZSI+PHBhdGggZD0iTTE3Mi4xNiw5My42OGE0OSw0OSwwLDAsMSw0OSw0OUE0OC4zMiw0OC4zMiwwLDAsMSwyMTUuNzEsMTY1YTQ5LjYzLDQ5LjYzLDAsMCwxLTE0LjQ4LDE3bC0xLjY4LDEuMjQsMS44Ny45MmE2Ni44OSw2Ni44OSwwLDAsMSwyNi44OCwyNC4wOSw2Ni4xOSw2Ni4xOSwwLDAsMSwxMC4zNSwzNS41OXY1NC40NkEyNC42NCwyNC42NCwwLDAsMSwyMjIsMzIxLjY0bC0uODYuM3Y3Ny4yMUExOS4xOSwxOS4xOSwwLDAsMSwyMDIsNDE4LjMySDE0Mi4zNmExOS4xOSwxOS4xOSwwLDAsMS0xOS4xNy0xOS4xN1YzMjEuOTRsLS44NS0uM2EyNC42NCwyNC42NCwwLDAsMS0xNi42Ni0yMy4zVjI0My44OEE2Ni4xOSw2Ni4xOSwwLDAsMSwxMTYsMjA4LjI5YTY2Ljg5LDY2Ljg5LDAsMCwxLDI2Ljg4LTI0LjA5bDEuODctLjkyTDE0My4xLDE4MmE0OS42Myw0OS42MywwLDAsMS0xNC40OC0xNyw0OC4zMiw0OC4zMiwwLDAsMS01LjQzLTIyLjM5LDQ5LDQ5LDAsMCwxLDQ5LTQ5bTAsODMuNzFhMzQuNzQsMzQuNzQsMCwxLDAtMzQuNzUtMzQuNzQsMzQuNzgsMzQuNzgsMCwwLDAsMzQuNzUsMzQuNzRNMTMwLjMxLDMwOC43NGguMThhNy4xLDcuMSwwLDAsMSw2LjkzLDcuMjV2ODMuMTZhNC45NCw0Ljk0LDAsMCwwLDQuOTQsNC45NGgxNy4zNmE1LjMzLDUuMzMsMCwwLDAsNS4zMy01LjMzVjMyNy42MWE3LjEyLDcuMTIsMCwwLDEsNy4xMi03LjExaC40N2E3LjI5LDcuMjksMCwwLDEsNi42NCw3LjM5djcwLjg2YTUuMzMsNS4zMywwLDAsMCw1LjMzLDUuMzNIMjAyYTQuOTQsNC45NCwwLDAsMCw0Ljk0LTQuOTRWMzE2YTcuMzYsNy4zNiwwLDAsMSwyLTUuMTEsNi43Miw2LjcyLDAsMCwxLDQuODktMi4xNUgyMTRhMTAuNDEsMTAuNDEsMCwwLDAsMTAuNC0xMC40VjI0My44OGE1Mi4zMiw1Mi4zMiwwLDAsMC01Mi4yNi01Mi4yNmgtLjgxYy0yOC4zNi40My01MS40NCwyNC4yMi01MS40NCw1M3Y1My42OGExMC40MSwxMC40MSwwLDAsMCwxMC40LDEwLjQiLz48cGF0aCBkPSJNMzcwLjUyLDE0NS4zMWgwYTU2LDU2LDAsMSwwLTY5LDg4LjE4YzUuNjEsNC4yMiw5LDExLjQ2LDksMTkuMzd2MTMuOGMwLDExLjg0LDcuNzQsMTcuMjQsMTQuOTMsMTcuMjRIMzQ1QTE1LDE1LDAsMCwwLDM1OS45MywyNjlWMjUxLjU3YzAtNywzLjYtMTMuODYsOS44OC0xOC43OWE1Niw1NiwwLDAsMCwuNzEtODcuNDdaTTM0NS42OCwyNjlhLjcuNywwLDAsMS0uNy43SDMyNS40MWMtLjI0LS4xLS42OS0xLjIzLS42OS0zdi02LjIzaDIxWk0zNjEsMjIxLjU4aDBBMzkuMDgsMzkuMDgsMCwwLDAsMzQ2LjEsMjQ2LjJoLTIyYTM3LjcsMzcuNywwLDAsMC0xNC4wNS0yNC4wOSw0MS43NSw0MS43NSwwLDAsMSwxNi03NC4xNCw0NC40MSw0NC40MSwwLDAsMSw5LS45Myw0Mi4wOCw0Mi4wOCwwLDAsMSwyNi40Myw5LjMxLDQxLjcxLDQxLjcxLDAsMCwxLS41Miw2NS4yM1pNMzQyLjMzLDEwMC43OVYxMTYuMWE3LjEyLDcuMTIsMCwwLDEtMTQuMjQsMFYxMDAuNzlhNy4xMiw3LjEyLDAsMCwxLDE0LjI0LDBabTM5LjI0LDQxLjYzYTcuMTIsNy4xMiwwLDAsMSwwLTEwLjA3bDEwLjgyLTEwLjgyYTcuMTIsNy4xMiwwLDAsMSwxMC4wNywxMC4wN2wtMTAuODIsMTAuODJhNy4xMiw3LjEyLDAsMCwxLTEwLjA4LDBabS0xMTksNTMuNDlIMjQ3LjIyYTcuMTIsNy4xMiwwLDAsMSwwLTE0LjI0aDE1LjMxYTcuMTIsNy4xMiwwLDAsMSwwLDE0LjI0Wm0yNi4zMi02My41NmE3LjEzLDcuMTMsMCwwLDEtNSwxMi4xNiw3LDcsMCwwLDEtNS0yLjA5TDI2OCwxMzEuNmE3LjEyLDcuMTIsMCwwLDEsMC0xMC4wNyw3LjExLDcuMTEsMCwwLDEsMTAuMDcsMFptMCwxMDIuOGE3LjExLDcuMTEsMCwwLDEsMCwxMC4wNkwyNzgsMjU2QTcuMTIsNy4xMiwwLDEsMSwyNjgsMjQ2bDEwLjgzLTEwLjgyQTcuMTEsNy4xMSwwLDAsMSwyODguODUsMjM1LjE1Wk00MDIuNDcsMjQ2YTcuMTIsNy4xMiwwLDAsMSwwLDEwLjA3LDcuMTEsNy4xMSwwLDAsMS0xMC4wNywwbC0xMC44Mi0xMC44M2E3LjEsNy4xLDAsMCwxLDAtMTAuMDYsNy4xMiw3LjEyLDAsMCwxLDEwLjA3LDBoMFptMjcuODUtNTcuMThhNy4xMyw3LjEzLDAsMCwxLTcuMTEsNy4xMkg0MDcuOWE3LjEyLDcuMTIsMCwwLDEsMC0xNC4yNGgxNS4zMUE3LjEyLDcuMTIsMCwwLDEsNDMwLjMyLDE4OC43OVoiLz48cGF0aCBkPSJNMTcyLjE2LDkzLjY4YTQ5LDQ5LDAsMCwxLDQ5LDQ5QTQ4LjMyLDQ4LjMyLDAsMCwxLDIxNS43MSwxNjVhNDkuNjMsNDkuNjMsMCwwLDEtMTQuNDgsMTdsLTEuNjgsMS4yNCwxLjg3LjkyYTY2Ljg5LDY2Ljg5LDAsMCwxLDI2Ljg4LDI0LjA5LDY2LjE5LDY2LjE5LDAsMCwxLDEwLjM1LDM1LjU5djU0LjQ2QTI0LjY0LDI0LjY0LDAsMCwxLDIyMiwzMjEuNjRsLS44Ni4zdjc3LjIxQTE5LjE5LDE5LjE5LDAsMCwxLDIwMiw0MTguMzJIMTQyLjM2YTE5LjE5LDE5LjE5LDAsMCwxLTE5LjE3LTE5LjE3VjMyMS45NGwtLjg1LS4zYTI0LjY0LDI0LjY0LDAsMCwxLTE2LjY2LTIzLjNWMjQzLjg4QTY2LjE5LDY2LjE5LDAsMCwxLDExNiwyMDguMjlhNjYuODksNjYuODksMCwwLDEsMjYuODgtMjQuMDlsMS44Ny0uOTJMMTQzLjEsMTgyYTQ5LjYzLDQ5LjYzLDAsMCwxLTE0LjQ4LTE3LDQ4LjMyLDQ4LjMyLDAsMCwxLTUuNDMtMjIuMzksNDksNDksMCwwLDEsNDktNDltMCw4My43MWEzNC43NCwzNC43NCwwLDEsMC0zNC43NS0zNC43NCwzNC43OCwzNC43OCwwLDAsMCwzNC43NSwzNC43NE0xMzAuMzEsMzA4Ljc0aC4xOGE3LjEsNy4xLDAsMCwxLDYuOTMsNy4yNXY4My4xNmE0Ljk0LDQuOTQsMCwwLDAsNC45NCw0Ljk0aDE3LjM2YTUuMzMsNS4zMywwLDAsMCw1LjMzLTUuMzNWMzI3LjYxYTcuMTIsNy4xMiwwLDAsMSw3LjEyLTcuMTFoLjQ3YTcuMjksNy4yOSwwLDAsMSw2LjY0LDcuMzl2NzAuODZhNS4zMyw1LjMzLDAsMCwwLDUuMzMsNS4zM0gyMDJhNC45NCw0Ljk0LDAsMCwwLDQuOTQtNC45NFYzMTZhNy4zNiw3LjM2LDAsMCwxLDItNS4xMSw2LjcyLDYuNzIsMCwwLDEsNC44OS0yLjE1SDIxNGExMC40MSwxMC40MSwwLDAsMCwxMC40LTEwLjRWMjQzLjg4YTUyLjMyLDUyLjMyLDAsMCwwLTUyLjI2LTUyLjI2aC0uODFjLTI4LjM2LjQzLTUxLjQ0LDI0LjIyLTUxLjQ0LDUzdjUzLjY4YTEwLjQxLDEwLjQxLDAsMCwwLDEwLjQsMTAuNCIvPjxwYXRoIGQ9Ik0zNzAuNTIsMTQ1LjMxaDBhNTYsNTYsMCwxLDAtNjksODguMThjNS42MSw0LjIyLDksMTEuNDYsOSwxOS4zN3YxMy44YzAsMTEuODQsNy43NCwxNy4yNCwxNC45MywxNy4yNEgzNDVBMTUsMTUsMCwwLDAsMzU5LjkzLDI2OVYyNTEuNTdjMC03LDMuNi0xMy44Niw5Ljg4LTE4Ljc5YTU2LDU2LDAsMCwwLC43MS04Ny40N1pNMzQ1LjY4LDI2OWEuNy43LDAsMCwxLS43LjdIMzI1LjQxYy0uMjQtLjEtLjY5LTEuMjMtLjY5LTN2LTYuMjNoMjFaTTM2MSwyMjEuNThoMEEzOS4wOCwzOS4wOCwwLDAsMCwzNDYuMSwyNDYuMmgtMjJhMzcuNywzNy43LDAsMCwwLTE0LjA1LTI0LjA5LDQxLjc1LDQxLjc1LDAsMCwxLDE2LTc0LjE0LDQ0LjQxLDQ0LjQxLDAsMCwxLDktLjkzLDQyLjA4LDQyLjA4LDAsMCwxLDI2LjQzLDkuMzEsNDEuNzEsNDEuNzEsMCwwLDEtLjUyLDY1LjIzWk0zNDIuMzMsMTAwLjc5VjExNi4xYTcuMTIsNy4xMiwwLDAsMS0xNC4yNCwwVjEwMC43OWE3LjEyLDcuMTIsMCwwLDEsMTQuMjQsMFptMzkuMjQsNDEuNjNhNy4xMiw3LjEyLDAsMCwxLDAtMTAuMDdsMTAuODItMTAuODJhNy4xMiw3LjEyLDAsMCwxLDEwLjA3LDEwLjA3bC0xMC44MiwxMC44MmE3LjEyLDcuMTIsMCwwLDEtMTAuMDgsMFptLTExOSw1My40OUgyNDcuMjJhNy4xMiw3LjEyLDAsMCwxLDAtMTQuMjRoMTUuMzFhNy4xMiw3LjEyLDAsMCwxLDAsMTQuMjRabTI2LjMyLTYzLjU2YTcuMTMsNy4xMywwLDAsMS01LDEyLjE2LDcsNywwLDAsMS01LTIuMDlMMjY4LDEzMS42YTcuMTIsNy4xMiwwLDAsMSwwLTEwLjA3LDcuMTEsNy4xMSwwLDAsMSwxMC4wNywwWm0wLDEwMi44YTcuMTEsNy4xMSwwLDAsMSwwLDEwLjA2TDI3OCwyNTZBNy4xMiw3LjEyLDAsMSwxLDI2OCwyNDZsMTAuODMtMTAuODJBNy4xMSw3LjExLDAsMCwxLDI4OC44NSwyMzUuMTVaTTQwMi40NywyNDZhNy4xMiw3LjEyLDAsMCwxLDAsMTAuMDcsNy4xMSw3LjExLDAsMCwxLTEwLjA3LDBsLTEwLjgyLTEwLjgzYTcuMSw3LjEsMCwwLDEsMC0xMC4wNiw3LjEyLDcuMTIsMCwwLDEsMTAuMDcsMGgwWm0yNy44NS01Ny4xOGE3LjEzLDcuMTMsMCwwLDEtNy4xMSw3LjEySDQwNy45YTcuMTIsNy4xMiwwLDAsMSwwLTE0LjI0aDE1LjMxQTcuMTIsNy4xMiwwLDAsMSw0MzAuMzIsMTg4Ljc5WiIvPjwvc3ZnPg==') center left no-repeat;
  background-size:50px 50px;
  top: 150px;
}
#backpack-btn {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQxMC4wMTQgNDEwLjAxNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDEwLjAxNCA0MTAuMDE0O2ZpbGw6d2hpdGUiIHhtbDpzcGFjZT0icHJlc2VydmUiID4NCjxnPg0KCTxwYXRoIGQ9Ik0zNDcuNzA3LDAuNDg3aC00Ni45MzNjLTMxLjgxOSwwLTU4LjEyNSwyMy45NzktNjEuODQsNTQuODEyaC02Ny44MThjLTMuNzE1LTMwLjgzMy0zMC4wMjEtNTQuODEyLTYxLjg0LTU0LjgxMkg2Mi4zMDYNCgkJQzI3Ljk1LDAuNDg3LDAsMjguNDM4LDAsNjIuNzk0djE1Ni44OTZjMCwzNy4wNCwyOC4yMDYsNjcuNjEyLDY0LjI2Niw3MS4zNzd2OTIuMjY0YzAsMTQuNDQ1LDExLjc1MSwyNi4xOTYsMjYuMTk2LDI2LjE5NmgyMjkuMTI3DQoJCWMxNC40NDUsMCwyNi4xOTctMTEuNzUxLDI2LjE5Ny0yNi4xOTZ2LTkyLjI2OWMzNi4wNDItMy43ODIsNjQuMjI4LTM0LjM0NSw2NC4yMjgtNzEuMzcyVjYyLjc5NA0KCQlDNDEwLjAxNCwyOC40MzgsMzgyLjA2MywwLjQ4NywzNDcuNzA3LDAuNDg3eiBNMjkxLjE4Nyw1Ny45MjNjMi4wNDItMTkuODY3LDE2LjQyOS0zNi4xMjgsMzUuMzQxLTQwLjk2NQ0KCQljMjAuNzE2LDUuMjkzLDM1LjU3MSwyNC4yODUsMzUuNTcxLDQ1LjgzOHYxNTYuODkyYzAsMTQuOTk0LTYuMDI1LDI5LjI4Mi0xNi4zMTMsMzkuNzg1VjEyOS40MDENCgkJQzM0NS43ODYsOTUuMjkxLDMyMi42MTIsNjYuNTA3LDI5MS4xODcsNTcuOTIzeiBNMjk3LjYyOCwxNS42MDRjLTExLjUyMSw5LjkzLTE5LjM3NiwyMy45ODgtMjEuMjQ2LDM5Ljg2MQ0KCQljLTEuNTU1LTAuMDk4LTMuMTE5LTAuMTY1LTQuNjk5LTAuMTY1aC0xNy42MTZDMjU3LjUwOCwzMy43NzgsMjc1LjUxNSwxNy4wNjQsMjk3LjYyOCwxNS42MDR6IE0xNTUuOTgzLDU1LjNoLTE3LjYxNg0KCQljLTEuNTkyLDAtMy4xNjgsMC4wNjgtNC43MzYsMC4xNjdjLTEuODY5LTE1Ljg3Ni05LjcyNi0yOS45MzYtMjEuMjUtMzkuODY3QzEzNC41MTMsMTcuMDQyLDE1Mi41NCwzMy43NjQsMTU1Ljk4Myw1NS4zeg0KCQkgTTY0LjI2NiwyNTkuODQ0Yy0xMC41MTItMTAuNTM2LTE2LjY4Ni0yNC45ODItMTYuNjg2LTQwLjE1NVY2Mi43OTZjMC0yMS42MTEsMTQuOTM1LTQwLjY0MywzNS43MzYtNDUuODc4DQoJCWMxOC45OTgsNC43ODMsMzMuNDY5LDIxLjA4MywzNS41MTIsNDEuMDE1Yy0zMS40MDcsOC41OTctNTQuNTYzLDM3LjM3MS01NC41NjMsNzEuNDY4VjI1OS44NDR6IE0xNSwyMTkuNjg5VjYyLjc5NA0KCQljMC0yMy4wNjcsMTYuNi00Mi4zMiwzOC40NzgtNDYuNDY4QzQwLjU4LDI3Ljg4NSwzMi41OCw0NC42NTEsMzIuNTgsNjIuNzk2djE1Ni44OTJjMCwyMS40MDYsOS43MTEsNDEuNjcxLDI1LjkyMiw1NS4xOQ0KCQlDMzMuNTgsMjY4Ljg4NiwxNSwyNDYuNDIzLDE1LDIxOS42ODl6IE0zMzAuNzg2LDM4My4zM2MwLDYuMTc0LTUuMDIzLDExLjE5Ni0xMS4xOTcsMTEuMTk2SDkwLjQ2Mg0KCQljLTYuMTc0LDAtMTEuMTk2LTUuMDIyLTExLjE5Ni0xMS4xOTZWMTI5LjQwMWMwLTMyLjU4OSwyNi41MTMtNTkuMTAyLDU5LjEwMi01OS4xMDJoMTMzLjMxNmMzMi41ODksMCw1OS4xMDMsMjYuNTEzLDU5LjEwMyw1OS4xMDINCgkJVjM4My4zM3ogTTM5NS4wMTQsMjE5LjY4OWMwLDI2LjkwMS0xOC44MTQsNDkuNDc2LTQzLjk3Miw1NS4yOThjMTYuMjkxLTEzLjUxOSwyNi4wNTctMzMuODM0LDI2LjA1Ny01NS4yOTlWNjIuNzk2DQoJCWMwLTE4LjE4My04LjAzMi0zNC45ODMtMjAuOTc5LTQ2LjU0NWMyMi4wODMsMy45ODIsMzguODk0LDIzLjMyOSwzOC44OTQsNDYuNTQyVjIxOS42ODl6Ii8+DQoJPHBhdGggZD0iTTI5Ny4xNzQsMTU3LjM3MUgxMTIuODc4Yy00LjE0MiwwLTcuNSwzLjM1OC03LjUsNy41djY4LjA0OGMwLDQuMTQyLDMuMzU4LDcuNSw3LjUsNy41aDEuNDczdjcxLjQ0Nw0KCQljMCwyMS4wNTMsMTcuMTI4LDM4LjE4MSwzOC4xODEsMzguMTgxaDEwNC45ODZjMjEuMDUzLDAsMzguMTgxLTE3LjEyOCwzOC4xODEtMzguMTgxdi03MS40NDdoMS40NzZjNC4xNDMsMCw3LjUtMy4zNTgsNy41LTcuNQ0KCQl2LTY4LjA0OEMzMDQuNjc0LDE2MC43MjksMzAxLjMxNiwxNTcuMzcxLDI5Ny4xNzQsMTU3LjM3MXogTTEyMC4zNzgsMTcyLjM3MWgxNjkuMjk2djUzLjA0OEgxMjAuMzc4VjE3Mi4zNzF6IE0xODguODk4LDI4MC4xMTMNCgkJaDMyLjI1NXYxMy40NDVjMCw2LjIwMy01LjA0NiwxMS4yNDktMTEuMjQ5LDExLjI0OWgtOS43NTdjLTYuMjAzLDAtMTEuMjQ5LTUuMDQ2LTExLjI0OS0xMS4yNDlWMjgwLjExM3ogTTIyMS4xNTMsMjY1LjExM2gtMzIuMjU1DQoJCXYtMjQuNjk0aDMyLjI1NVYyNjUuMTEzeiBNMjgwLjY5OCwzMTEuODY2YzAsMTIuNzgyLTEwLjM5OCwyMy4xODEtMjMuMTgxLDIzLjE4MUgxNTIuNTMyYy0xMi43ODIsMC0yMy4xODEtMTAuMzk5LTIzLjE4MS0yMy4xODENCgkJdi03MS40NDdoNDQuNTQ3djUzLjE0YzAsMTQuNDc0LDExLjc3NSwyNi4yNDksMjYuMjQ5LDI2LjI0OWg5Ljc1N2MxNC40NzQsMCwyNi4yNDktMTEuNzc1LDI2LjI0OS0yNi4yNDl2LTUzLjE0aDQ0LjU0NVYzMTEuODY2eiINCgkJLz4NCgk8cGF0aCBkPSJNMTE1LjI0MSwxMDAuNTQzaDE3OS41N2M0LjE0MywwLDcuNS0zLjM1OCw3LjUtNy41cy0zLjM1Ny03LjUtNy41LTcuNWgtMTc5LjU3Yy00LjE0MiwwLTcuNSwzLjM1OC03LjUsNy41DQoJCVMxMTEuMDk5LDEwMC41NDMsMTE1LjI0MSwxMDAuNTQzeiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=') center left no-repeat;
  background-size:50px 30px;
  top: 50px;
}
#student-btn {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDp3aGl0ZSI+PHBhdGggZD0iTTI1NS42NSw4OS4zN2E2My42LDYzLjYsMCwwLDEsNjMuNjIsNjMuNDUsNjIuNTMsNjIuNTMsMCwwLDEtNywyOSw2NC40MSw2NC40MSwwLDAsMS0xOC43NCwyMiwyLjcsMi43LDAsMCwwLTEsMS4zNiwyLjY3LDIuNjcsMCwwLDAsMS42NCwzLjI5LDExNCwxMTQsMCwwLDEsNDMuMTksMjgsMi42MiwyLjYyLDAsMCwwLDEuOTEuODEsMi41NSwyLjU1LDAsMCwwLC45My0uMTdsMTktNy4xYTcuNDMsNy40MywwLDAsMSwyLjU2LS40Niw3LjMzLDcuMzMsMCwwLDEsNS4yMywyLjJBNy40NCw3LjQ0LDAsMCwxLDM2OSwyMzd2MzUuNTJzMS4zNSwyLjM0LDIuNTksMi41OWEzMC4zOSwzMC4zOSwwLDAsMSwwLDU5LjU5Yy0xLjI0LjI1LTEuOTQsMi41OS0xLjk0LDIuNTl2MzguMzlhNy4zMSw3LjMxLDAsMCwxLTQuNzQsNi44MmwtMTA2LjIsMzkuNzNhNy41NCw3LjU0LDAsMCwxLTUuMTMsMEwxNDcuMzQsMzgyLjQ1YTcuMzIsNy4zMiwwLDAsMS00LjczLTYuODJWMzM3LjIyYTIuNjgsMi42OCwwLDAsMC0yLjE3LTIuNiwzMC40NCwzMC40NCwwLDAsMSwwLTU5LjY3LDIuNjYsMi42NiwwLDAsMCwyLjE3LTIuNlYyMzdhNy40MSw3LjQxLDAsMCwxLDItNS4yNCw3LjI4LDcuMjgsMCwwLDEsNy44LTEuNzRsMTksNy4wOWEyLjUxLDIuNTEsMCwwLDAsLjkzLjE3LDIuNjQsMi42NCwwLDAsMCwxLjkxLS44MSwxMTMuODMsMTEzLjgzLDAsMCwxLDQzLjEzLTI3Ljk1LDIuNjksMi42OSwwLDAsMCwxLjM1LTEsMi42NSwyLjY1LDAsMCwwLS42MS0zLjYyLDY0LjI4LDY0LjI4LDAsMCwxLTE4Ljc5LTIyLDYyLjUzLDYyLjUzLDAsMCwxLTctMjksNjMuNiw2My42LDAsMCwxLDYzLjYyLTYzLjQ1bS4xOCwxMTIuMzdhNDguOTIsNDguOTIsMCwxLDAtNDktNDguOTIsNDksNDksMCwwLDAsNDksNDguOTJtMCw2Ni43NWEyLjY5LDIuNjksMCwwLDAsLjkzLS4xN2w2Mi44OS0yMy41MmEyLjY1LDIuNjUsMCwwLDAsLjgxLTQuNDgsOTguODgsOTguODgsMCwwLDAtMTI5LjI1LDAsMi42NCwyLjY0LDAsMCwwLC44LDQuNDhsNjIuODksMjMuNTJhMi43MywyLjczLDAsMCwwLC45My4xN20tOS44MiwxMzUuMDlhMi42OCwyLjY4LDAsMCwwLDIuNDItMS41NCwyLjUxLDIuNTEsMCwwLDAsLjIzLTEuMTFWMjgzLjI4YTIuNjUsMi42NSwwLDAsMC0xLjcyLTIuNDdsLTg2LTMyLjE4YTIuNzcsMi43NywwLDAsMC0uOTMtLjE3LDIuNjcsMi42NywwLDAsMC0yLjQyLDEuNTUsMi40NCwyLjQ0LDAsMCwwLS4yMywxLjF2MjEuNTFhMi42NywyLjY3LDAsMCwwLDIuMTYsMi42LDEzLjcxLDEzLjcxLDAsMCwxLDEwLjg5LDEzLjM3djMyLjUzYTEzLjcyLDEzLjcyLDAsMCwxLTEwLjg5LDEzLjM4LDIuNjcsMi42NywwLDAsMC0yLjE2LDIuNnYzMS42MmEyLjYzLDIuNjMsMCwwLDAsMS43MiwyLjQ3bDg2LjE1LDMyLjIzYTIuNzIsMi43MiwwLDAsMCwuOTMuMTZtMTkuNCwwYTIuNjgsMi42OCwwLDAsMCwuOTMtLjE2bDg2LjE2LTMyLjIzYTIuNjUsMi42NSwwLDAsMCwxLjcyLTIuNDdWMzM3LjFhMi42NywyLjY3LDAsMCwwLTIuMTYtMi42LDEzLjcyLDEzLjcyLDAsMCwxLTEwLjg5LTEzLjM4VjI4OC41OWExMy43MSwxMy43MSwwLDAsMSwxMC44OS0xMy4zNywyLjY3LDIuNjcsMCwwLDAsMi4xNi0yLjZWMjUxLjExYTIuNTEsMi41MSwwLDAsMC0uMjMtMS4xMSwyLjY4LDIuNjgsMCwwLDAtMi40Mi0xLjU0LDIuNzMsMi43MywwLDAsMC0uOTMuMTdsLTg2LDMyLjE4YTIuNjMsMi42MywwLDAsMC0xLjcyLDIuNDdWNDAwLjg2YTIuNzMsMi43MywwLDAsMCwuMzksMS40NywyLjY2LDIuNjYsMCwwLDAsMi4yNiwxLjI1TTM1OC41MywzMjFIMzY1YzcuNCwwLDE0Ljc0LTUuOTEsMTYtMTMuMThhMTYsMTYsMCwwLDAtMTUuNzQtMTguNzFoLTYuNjhhMi42NSwyLjY1LDAsMCwwLTIuNjUsMi42NXYyNi41OGEyLjY2LDIuNjYsMCwwLDAsMi42NywyLjY2bS0yMTEuNDIsMGg2LjQ4YTIuNjUsMi42NSwwLDAsMCwyLjY1LTIuNjVWMjkxLjc3YTIuNjUsMi42NSwwLDAsMC0yLjY1LTIuNjVoLTYuNDRjLTcuNCwwLTE0Ljc0LDUuOTEtMTYsMTMuMThBMTYsMTYsMCwwLDAsMTQ3LDMyMSIvPjwvc3ZnPg==') center left no-repeat;
  background-size:50px 50px;
  top: 50px;
}
#cartable-btn {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ0MiA0NDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ0MiA0NDI7ZmlsbDp3aGl0ZSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNNDE4LjYwOSw5NC4xODJIMjkwLjI4M1Y1NS4wNTdjMC01LjUyMy00LjQ3OC0xMC0xMC0xMEgxNjEuNzE3Yy01LjUyMywwLTEwLDQuNDc3LTEwLDEwdjM5LjEyNkgyMy4zOTENCglDMTAuNDkzLDk0LjE4MiwwLDEwNC42NzUsMCwxMTcuNTczdjc0LjM5MXYxODEuNTg5YzAsMTIuODk3LDEwLjQ5MywyMy4zOSwyMy4zOTEsMjMuMzloMzk1LjIxOQ0KCWMxMi44OTcsMCwyMy4zOTEtMTAuNDkzLDIzLjM5MS0yMy4zOVYxOTEuOTY0di03NC4zOTFDNDQyLDEwNC42NzUsNDMxLjUwNyw5NC4xODIsNDE4LjYwOSw5NC4xODJ6IE0xNzEuNzE3LDY1LjA1N2g5OC41NjZ2MjkuMTI2DQoJaC05OC41NjZWNjUuMDU3eiBNMjAsMTE3LjU3M2MwLTEuODcsMS41MjEtMy4zOTEsMy4zOTEtMy4zOTFoMzk1LjIxOWMxLjg2OSwwLDMuMzkxLDEuNTIxLDMuMzkxLDMuMzkxdjc0LjM5MQ0KCWMwLDE3Ljc4My0xNC40NjgsMzIuMjUxLTMyLjI1MSwzMi4yNTFIMjUyLjc4NXYtMzMuMjM0YzAtNS41MjMtNC40NzgtMTAtMTAtMTBoLTQzLjU3Yy01LjUyMywwLTEwLDQuNDc3LTEwLDEwdjMzLjIzNEg1Mi4yNTENCglDMzQuNDY4LDIyNC4yMTUsMjAsMjA5Ljc0NywyMCwxOTEuOTY0VjExNy41NzN6IE0yMDkuMjE1LDI0NC4yMTVoMjMuNTd2MTEuNDQ5YzAsNi40OTktNS4yODcsMTEuNzg1LTExLjc4NSwxMS43ODUNCgljLTYuNDk5LDAtMTEuNzg1LTUuMjg3LTExLjc4NS0xMS43ODVWMjQ0LjIxNXogTTIwOS4yMTUsMjI0LjIxNXYtMjMuMjM0aDIzLjU3djIzLjIzNEgyMDkuMjE1eiBNNDE4LjYwOSwzNzYuOTQzSDIzLjM5MQ0KCWMtMS44NywwLTMuMzkxLTEuNTIxLTMuMzkxLTMuMzlWMjMzLjAyOGM4Ljg5LDYuOTk3LDIwLjA4NywxMS4xODcsMzIuMjUxLDExLjE4N2gxMzYuOTYzdjExLjQ0OQ0KCWMwLDE3LjUyNiwxNC4yNTksMzEuNzg1LDMxLjc4NSwzMS43ODVzMzEuNzg1LTE0LjI1OSwzMS43ODUtMzEuNzg1di0xMS40NDloMTM2Ljk2NGMxMi4xNjQsMCwyMy4zNjItNC4xOSwzMi4yNTEtMTEuMTg3djE0MC41MjUNCglDNDIyLDM3NS40MjIsNDIwLjQ3OSwzNzYuOTQzLDQxOC42MDksMzc2Ljk0M3oiLz4NCjwvc3ZnPg0K') center left no-repeat;
  background-size:50px 30px;
  top: 100px;
}
#professor-btn {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDQ4OS4zOCA0ODkuMzgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ4OS4zOCA0ODkuMzg7ZmlsbDp3aGl0ZSI+IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnIGlkPSJYTUxJRF8xMjlfIj4NCgk8cGF0aCBpZD0iWE1MSURfMTM0XyIgZD0iTTQ3My43MjUsNS42NTZIMjEzLjU3NmMtOC42NTUsMC0xNS42NTUsNy4wMjItMTUuNjU1LDE1LjY2NHYxMTAuNDg0bDExLjMxOS0xMy4yMzQNCgkJYzUuMzc1LTYuMjkyLDEyLjQ2MS0xMC4xNzIsMTkuOTkyLTExLjc5M1YzNi45NzhoMjI4LjgzNnYyMDQuNTMxSDIyOS4yMzN2LTM0LjIzOGwtNy4wNSw4LjI0NA0KCQljLTYuMTYxLDcuMTg5LTE0Ljg1OCwxMS42NS0yNC4yNjIsMTIuNTI5djI5LjEyNGMwLDguNjQyLDcsMTUuNjU1LDE1LjY1NSwxNS42NTVoODQuNDg5TDI1NS4xNDEsNDY3LjcNCgkJYy0xLjkyMyw4LjczOSwzLjYsMTcuMzgyLDEyLjM0NiwxOS4zMWM4LjY2NywxLjkwNCwxNy4zODItMy42MDEsMTkuMjg3LTEyLjMzMWw0NC40NTctMjAxLjg1NWgyNS44NDRsNDQuNDU3LDIwMS44NTUNCgkJYzEuNjY2LDcuNTU3LDguMzY5LDEyLjcxNCwxNS44MDMsMTIuNzA1YzEuMTU0LDAsMi4zMzQtMC4xMTcsMy41MDItMC4zNzRjOC43NDYtMS45MjgsMTQuMjY4LTEwLjU3LDEyLjMyOC0xOS4zMWwtNDIuOTItMTk0Ljg3Nw0KCQloODMuNDgxYzguNjQ3LDAsMTUuNjU1LTcuMDEzLDE1LjY1NS0xNS42NTVWMjEuMzJDNDg5LjM4LDEyLjY3OCw0ODIuMzcyLDUuNjU2LDQ3My43MjUsNS42NTZ6Ii8+DQoJPHBhdGggaWQ9IlhNTElEXzEzMl8iIGQ9Ik0zNDkuMzY4LDk3LjExNmMtMS4yMzQtMy4xMS00LjczMi00LjYzNy03Ljg0LTMuNDA2bC05Mi4yMzQsMzIuNTU1DQoJCWMtOC40NjUtNi41NTQtMjAuNjc4LTUuMzgzLTI3LjczNywyLjgyN2wtMjkuMjY3LDM0LjE3OGwtMjUuOTUxLTIyLjI0NWMwLjE3MSwxLjgzNywwLjU2LDMuNjIyLDAuNTYsNS41MDd2NDguMjkxbDE0LjQzOCwxMi4zNzENCgkJYzguNTY4LDcuMzM4LDIxLjM4NSw2LjIwNCwyOC41NDktMi4xOThsMzQuODQyLTQwLjc0M2wyOC4xLTE2LjQzOWw3My45NTEtNDMuMjY3QzM0OS4zMzYsMTAzLjA3MywzNTAuNDY5LDk5LjkyMywzNDkuMzY4LDk3LjExNnoiDQoJCS8+DQoJPHBhdGggaWQ9IlhNTElEXzEzMV8iIGQ9Ik0xMDkuOTI4LDEwNS43NzZIOTIuNTQ3Yy0xMy4zMDgsMC0yNS4wMSw2LjQ2OC0zMi40NDgsMTYuMzI3bC01My4zNTIsNDkuMTINCgkJYy04LjMxMyw3LjQwNS05LjA2NywyMC4yMzItMS41ODEsMjguNTk1bDQzLjUyOCw0OC41ODVjNy40MjEsOC4zMDksMjAuMjY3LDkuMDQ0LDI4LjU3OSwxLjU3Ng0KCQljOC4zMzQtNy40NjksOS4wMzgtMjAuMjYyLDEuNTctMjguNTg2bC0zMC4wMDMtMzMuNTA0bDQyLjYxNi0zOC4xMzRsLTI0LjgyLDMzLjcyMWwyNC4yNzksMjcuMTA3DQoJCWMxMy40MTYsMTQuOTkyLDEyLjE1MSwzOC4wMjctMi44MzQsNTEuNDUzYy0xMC4yMzEsOS4xNzItMjQuMTkzLDExLjMyNC0zNi4yOTcsNy4wOTRjMCwwLDAuMTg4LDkzLjY1OSwwLjE4OCwxOTMuOTYyDQoJCWMwLDEzLjQxNiwxMC44NzQsMjQuMjkxLDI0LjI5MSwyNC4yOTFjMTMuNDAzLDAsMjQuMjkxLTEwLjg3NSwyNC4yOTEtMjQuMjkxYzAtMTAwLjI3MiwwLTQzLjA1MSwwLTE0NC43NzFoMTYuMjAzDQoJCWMwLDEwMS42NDYsMCw0NC40NjgsMCwxNDQuNzcxYzAsNy4wMDQtMS45NTMsMTMuNDktNS4wNjcsMTkuMjMxYzQuMDc2LDMuMTM1LDkuMTQ4LDUuMDYsMTQuNjc2LDUuMDYNCgkJYzEzLjQyNCwwLDI0LjI5OC0xMC44NzUsMjQuMjk4LTI0LjI5MWMwLTEwMC4yNzIsMC4wMzEtNTguMjM3LDAuMDMxLTMxNi41NjFDMTUwLjY5NywxMjQuMDIyLDEzMi40NSwxMDUuNzc2LDEwOS45MjgsMTA1Ljc3NnoiLz4NCgk8cGF0aCBpZD0iWE1MSURfMTMwXyIgZD0iTTc5LjU5Miw5MS4xOThjNi40OTUsMy4zNzYsMTMuNzg3LDUuNDcxLDIxLjYyLDUuNDcxYzcuODUzLDAsMTUuMTQ1LTIuMDk1LDIxLjY1OS01LjQ3Nw0KCQljMTUuMjA0LTcuODc3LDI1LjY4NC0yMy41NTksMjUuNjg0LTQxLjg2MmMwLTI2LjE0Ni0yMS4xOTYtNDcuMzM1LTQ3LjM0NC00Ny4zMzVjLTI2LjE0NCwwLTQ3LjMzNSwyMS4xODktNDcuMzM1LDQ3LjMzNQ0KCQlDNTMuODc3LDY3LjY0Myw2NC4zNjgsODMuMzMxLDc5LjU5Miw5MS4xOTh6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==') center left no-repeat;
  background-size:50px 30px;
  top: 100px;
}
#help-btn {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDp3aGl0ZSI+PHBhdGggZD0iTTM1MS44OSwxMDcuNEEzNC45MywzNC45MywwLDEsMSwzMTcsMTQyLjMzYTM1LDM1LDAsMCwxLDM0LjkzLTM0LjkzbTAtMTRhNDguOSw0OC45LDAsMSwwLDQ4LjksNDguOSw0OC45LDQ4LjksMCwwLDAtNDguOS00OC45WiIvPjxwYXRoIGQ9Ik0yMzIsMjQ5LjMxYzAsMTEuNTYsOC42MywyMy44NCwyNC42MiwyMy44NCw3LjI5LDAsMjAuNDQsMCwzMi4zOS01LDQuMjMtMS43Niw5LjQxLTUuMTUsMTQtOC40NlYzOTkuNTJBMTkuMTEsMTkuMTEsMCwwLDAsMzIyLDQxOC41N2g1OS43YTE5LjEsMTkuMSwwLDAsMCwxOS4wNS0xOS4wNVYzMjIuNDZhMjYsMjYsMCwwLDAsMTcuNzgtMjQuMzdWMjQyLjUzYzAtMzUuNTUtMzAtNjQuNjQtNjYuNjgtNjQuNjRoMGMtMjguMTYsMC01My4xNywxNC40MS02NS41MSwzNS4zNEMyODAuMTMsMjIzLDI3NS42NCwyMjMuNzcsMjczLjIsMjI1Yy0yLjc3LDEuMzgtOC4xLDEuMjUtMTEuMjgsMS4xOC0uNzgsMC00LjY3LDAtNS4yOCwwLTkuNDIsMC0xNS4xNSwzLjg4LTE4LjMxLDcuMTVBMjIuODYsMjIuODYsMCwwLDAsMjMyLDI0OS4zMVptMTQsMGE5LDksMCwwLDEsMi40LTYuMjljMS44My0xLjg5LDQuNjgtMi44OCw4LjI1LTIuODguNTIsMCw0LjMxLDAsNSwwLDQuNzcuMSwxNS4yLS4yNiwyMS4wNi0zLjE5QTM2LjkyLDM2LjkyLDAsMCwwLDI5NiwyMjQuMjVjMy40My01LjU5LDcuNTItMTEuODYsMTMuMjQtMTYuODVhNjQuNjIsNjQuNjIsMCwwLDEsNDIuNjQtMTUuNTQsNTMuMzUsNTMuMzUsMCwwLDEsMzcuMzcsMTUsNDkuMzYsNDkuMzYsMCwwLDEsMTUuMzQsMzUuNjJ2NTUuNTZjMCw1LjU0LTMuNzksMTAuNjItMTAuOCwxMC42MmE3LDcsMCwwLDAtNyw3djgzLjgzYTUuMSw1LjEsMCwwLDEtNS4wOCw1LjA4SDM2NGE1LjA5LDUuMDksMCwwLDEtNS4wOC01LjA4VjMyNy4xM2E3LDcsMCwxLDAtMTQsMHY3Mi4zOWE1LjEsNS4xLDAsMCwxLTUuMDgsNS4wOEgzMjJhNS4xLDUuMSwwLDAsMS01LjA4LTUuMDhWMjQ1Ljg0YTcsNywwLDAsMC03LTdsLS4zMSwwYTcsNywwLDAsMC00Ljg2LDEuNjVjLTMuNzksMy4yMy0xNSwxMi4xNy0yMS4xNSwxNC43NS05LjM3LDMuOTEtMjAuMjQsMy45MS0yNywzLjkxQzI0OC4yNCwyNTkuMTgsMjQ2LDI1MywyNDYsMjQ5LjMxWiIvPjxwYXRoIGQ9Ik0xNjAuMTEsMTA3LjRhMzQuOTMsMzQuOTMsMCwxLDEtMzQuOTMsMzQuOTMsMzUsMzUsMCwwLDEsMzQuOTMtMzQuOTNtMC0xNGE0OC45LDQ4LjksMCwxLDAsNDguOSw0OC45LDQ4LjksNDguOSwwLDAsMC00OC45LTQ4LjlaIi8+PHBhdGggZD0iTTI1NiwyNzMuMTNsLS42NCwwYy03LjI5LDAtMjAuNDQsMC0zMi4zOS01LTQuMjMtMS43Ni05LjQxLTUuMTUtMTQtOC40NlYzOTkuNTJhMTkuMTEsMTkuMTEsMCwwLDEtMTksMTkuMDVoLTU5LjdhMTkuMSwxOS4xLDAsMCwxLTE5LTE5LjA1VjMyMi40NmEyNiwyNiwwLDAsMS0xNy43OC0yNC4zN1YyNDIuNTNjMC0zNS41NSwzMC02NC42NCw2Ni42OC02NC42NGgwYzI4LjE2LDAsNTMuMTcsMTQuNDEsNjUuNTEsMzUuMzQsNi4yNSw5Ljc1LDEwLjc0LDEwLjU0LDEzLjE4LDExLjc2LDIuNzcsMS4zOCw4LjEsMS4yNSwxMS4yOCwxLjE4Ljc4LDAsNC42NywwLDUuMjgsMGwuNjQsMGMtOSwuMTctMTQuNTksMy45NC0xNy42Nyw3LjEzYTIyLjA1LDIyLjA1LDAsMCwwLTMuODIsNS40LDI0LjM4LDI0LjM4LDAsMCwxLTUuMTgtMS43N0EzNi45MiwzNi45MiwwLDAsMSwyMTYsMjI0LjI1Yy0zLjQzLTUuNTktNy41Mi0xMS44Ni0xMy4yNC0xNi44NWE2NC42Miw2NC42MiwwLDAsMC00Mi42NC0xNS41NCw1My4zNSw1My4zNSwwLDAsMC0zNy4zNywxNSw0OS4zNiw0OS4zNiwwLDAsMC0xNS4zNCwzNS42MnY1NS41NmMwLDUuNTQsMy43OSwxMC42MiwxMC44LDEwLjYyYTcsNywwLDAsMSw3LDd2ODMuODNhNS4xLDUuMSwwLDAsMCw1LjA4LDUuMDhIMTQ4YTUuMDksNS4wOSwwLDAsMCw1LjA4LTUuMDhWMzI3LjEzYTcsNywwLDEsMSwxNCwwdjcyLjM5YTUuMSw1LjEsMCwwLDAsNS4wOCw1LjA4SDE5MGE1LjEsNS4xLDAsMCwwLDUuMDgtNS4wOFYyNDUuODRhNyw3LDAsMCwxLDctN2wuMzEsMGE3LDcsMCwwLDEsNC44NiwxLjY1YzMuNzksMy4yMywxNSwxMi4xNywyMS4xNSwxNC43NWE0MS42NCw0MS42NCwwLDAsMCw0Ljk0LDEuNjhDMjM2LjE1LDI2NS41NSwyNDMuOTIsMjcyLjg4LDI1NiwyNzMuMTNaIi8+PHBhdGggZD0iTTM1MS44OSwxMDcuNEEzNC45MywzNC45MywwLDEsMSwzMTcsMTQyLjMzYTM1LDM1LDAsMCwxLDM0LjkzLTM0LjkzbTAtMTRhNDguOSw0OC45LDAsMSwwLDQ4LjksNDguOSw0OC45LDQ4LjksMCwwLDAtNDguOS00OC45WiIvPjxwYXRoIGQ9Ik0yMzIsMjQ5LjMxYzAsMTEuNTYsOC42MywyMy44NCwyNC42MiwyMy44NCw3LjI5LDAsMjAuNDQsMCwzMi4zOS01LDQuMjMtMS43Niw5LjQxLTUuMTUsMTQtOC40NlYzOTkuNTJBMTkuMTEsMTkuMTEsMCwwLDAsMzIyLDQxOC41N2g1OS43YTE5LjEsMTkuMSwwLDAsMCwxOS4wNS0xOS4wNVYzMjIuNDZhMjYsMjYsMCwwLDAsMTcuNzgtMjQuMzdWMjQyLjUzYzAtMzUuNTUtMzAtNjQuNjQtNjYuNjgtNjQuNjRoMGMtMjguMTYsMC01My4xNywxNC40MS02NS41MSwzNS4zNEMyODAuMTMsMjIzLDI3NS42NCwyMjMuNzcsMjczLjIsMjI1Yy0yLjc3LDEuMzgtOC4xLDEuMjUtMTEuMjgsMS4xOC0uNzgsMC00LjY3LDAtNS4yOCwwLTkuNDIsMC0xNS4xNSwzLjg4LTE4LjMxLDcuMTVBMjIuODYsMjIuODYsMCwwLDAsMjMyLDI0OS4zMVptMTQsMGE5LDksMCwwLDEsMi40LTYuMjljMS44My0xLjg5LDQuNjgtMi44OCw4LjI1LTIuODguNTIsMCw0LjMxLDAsNSwwLDQuNzcuMSwxNS4yLS4yNiwyMS4wNi0zLjE5QTM2LjkyLDM2LjkyLDAsMCwwLDI5NiwyMjQuMjVjMy40My01LjU5LDcuNTItMTEuODYsMTMuMjQtMTYuODVhNjQuNjIsNjQuNjIsMCwwLDEsNDIuNjQtMTUuNTQsNTMuMzUsNTMuMzUsMCwwLDEsMzcuMzcsMTUsNDkuMzYsNDkuMzYsMCwwLDEsMTUuMzQsMzUuNjJ2NTUuNTZjMCw1LjU0LTMuNzksMTAuNjItMTAuOCwxMC42MmE3LDcsMCwwLDAtNyw3djgzLjgzYTUuMSw1LjEsMCwwLDEtNS4wOCw1LjA4SDM2NGE1LjA5LDUuMDksMCwwLDEtNS4wOC01LjA4VjMyNy4xM2E3LDcsMCwxLDAtMTQsMHY3Mi4zOWE1LjEsNS4xLDAsMCwxLTUuMDgsNS4wOEgzMjJhNS4xLDUuMSwwLDAsMS01LjA4LTUuMDhWMjQ1Ljg0YTcsNywwLDAsMC03LTdsLS4zMSwwYTcsNywwLDAsMC00Ljg2LDEuNjVjLTMuNzksMy4yMy0xNSwxMi4xNy0yMS4xNSwxNC43NS05LjM3LDMuOTEtMjAuMjQsMy45MS0yNywzLjkxQzI0OC4yNCwyNTkuMTgsMjQ2LDI1MywyNDYsMjQ5LjMxWiIvPjxwYXRoIGQ9Ik0xNjAuMTEsMTA3LjRhMzQuOTMsMzQuOTMsMCwxLDEtMzQuOTMsMzQuOTMsMzUsMzUsMCwwLDEsMzQuOTMtMzQuOTNtMC0xNGE0OC45LDQ4LjksMCwxLDAsNDguOSw0OC45LDQ4LjksNDguOSwwLDAsMC00OC45LTQ4LjlaIi8+PHBhdGggZD0iTTI1NiwyNzMuMTNsLS42NCwwYy03LjI5LDAtMjAuNDQsMC0zMi4zOS01LTQuMjMtMS43Ni05LjQxLTUuMTUtMTQtOC40NlYzOTkuNTJhMTkuMTEsMTkuMTEsMCwwLDEtMTksMTkuMDVoLTU5LjdhMTkuMSwxOS4xLDAsMCwxLTE5LTE5LjA1VjMyMi40NmEyNiwyNiwwLDAsMS0xNy43OC0yNC4zN1YyNDIuNTNjMC0zNS41NSwzMC02NC42NCw2Ni42OC02NC42NGgwYzI4LjE2LDAsNTMuMTcsMTQuNDEsNjUuNTEsMzUuMzQsNi4yNSw5Ljc1LDEwLjc0LDEwLjU0LDEzLjE4LDExLjc2LDIuNzcsMS4zOCw4LjEsMS4yNSwxMS4yOCwxLjE4Ljc4LDAsNC42NywwLDUuMjgsMGwuNjQsMGMtOSwuMTctMTQuNTksMy45NC0xNy42Nyw3LjEzYTIyLjA1LDIyLjA1LDAsMCwwLTMuODIsNS40LDI0LjM4LDI0LjM4LDAsMCwxLTUuMTgtMS43N0EzNi45MiwzNi45MiwwLDAsMSwyMTYsMjI0LjI1Yy0zLjQzLTUuNTktNy41Mi0xMS44Ni0xMy4yNC0xNi44NWE2NC42Miw2NC42MiwwLDAsMC00Mi42NC0xNS41NCw1My4zNSw1My4zNSwwLDAsMC0zNy4zNywxNSw0OS4zNiw0OS4zNiwwLDAsMC0xNS4zNCwzNS42MnY1NS41NmMwLDUuNTQsMy43OSwxMC42MiwxMC44LDEwLjYyYTcsNywwLDAsMSw3LDd2ODMuODNhNS4xLDUuMSwwLDAsMCw1LjA4LDUuMDhIMTQ4YTUuMDksNS4wOSwwLDAsMCw1LjA4LTUuMDhWMzI3LjEzYTcsNywwLDEsMSwxNCwwdjcyLjM5YTUuMSw1LjEsMCwwLDAsNS4wOCw1LjA4SDE5MGE1LjEsNS4xLDAsMCwwLDUuMDgtNS4wOFYyNDUuODRhNyw3LDAsMCwxLDctN2wuMzEsMGE3LDcsMCwwLDEsNC44NiwxLjY1YzMuNzksMy4yMywxNSwxMi4xNywyMS4xNSwxNC43NWE0MS42NCw0MS42NCwwLDAsMCw0Ljk0LDEuNjhDMjM2LjE1LDI2NS41NSwyNDMuOTIsMjcyLjg4LDI1NiwyNzMuMTNaIi8+PC9zdmc+') center left no-repeat;
  background-size:50px 50px;
  top: 100px;
}
#digiscreen-btn {
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDI5OS44NDIgMjk5Ljg0MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjk5Ljg0MiAyOTkuODQyO2ZpbGw6d2hpdGUiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOTMuMjQyLDY3LjI1MmMzLjY0NSwwLDYuNi0yLjk1NCw2LjYtNi42VjI0LjAxOGMwLTMuNjQ1LTIuOTU1LTYuNi02LjYtNi42SDYuNmMtMy42NDUsMC02LjYsMi45NTUtNi42LDYuNnYzNi42MzQNCgkJCWMwLDMuNjQ2LDIuOTU1LDYuNiw2LjYsNi42aDExLjQyNHYxMzkuNTAySDYuNmMtMy42NDUsMC02LjYsMi45NTQtNi42LDYuNmMwLDMuNjQ2LDIuOTU1LDYuNiw2LjYsNi42DQoJCQljMi40NTksMCwxMzQuNTAzLDAsMTM2LjcyMSwwdjIxLjI5M2MtOC40MjIsMi43NzktMTQuNTE5LDEwLjcxNy0xNC41MTksMjAuMDU4YzAsMTEuNjQ1LDkuNDc0LDIxLjExOSwyMS4xMTksMjEuMTE5DQoJCQlzMjEuMTE5LTkuNDc0LDIxLjExOS0yMS4xMTljMC05LjM0LTYuMDk4LTE3LjI4LTE0LjUxOS0yMC4wNTh2LTIxLjI5M2MyLjIxOSwwLDEzNC4yNjMsMCwxMzYuNzIxLDBjMy42NDUsMCw2LjYtMi45NTQsNi42LTYuNg0KCQkJYzAtMy42NDYtMi45NTUtNi42LTYuNi02LjZoLTExLjQyNFY2Ny4yNTJIMjkzLjI0MnogTTE1Ny44NCwyNjEuMzA2YzAsNC4zNjYtMy41NTMsNy45MTktNy45MTksNy45MTlzLTcuOTE5LTMuNTUzLTcuOTE5LTcuOTE5DQoJCQljMC00LjM2NywzLjU1My03LjkyLDcuOTE5LTcuOTJDMTU0LjI4OCwyNTMuMzg2LDE1Ny44NCwyNTYuOTM5LDE1Ny44NCwyNjEuMzA2eiBNMjY4LjYxOCwyMDYuNzU0SDMxLjIyNFY2Ny4yNTJoMjM3LjM5NFYyMDYuNzU0eg0KCQkJIE0xMy4yLDU0LjA1MlYzMC42MThoMjczLjQ0MnYyMy40MzRDMjc1LjMzMyw1NC4wNTIsMjAuNjA2LDU0LjA1MiwxMy4yLDU0LjA1MnoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==') center left no-repeat;
  background-size:50px 30px;
  top: 0;
}
#pronote-btn {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZmlsbDp3aGl0ZSI+PHBhdGggZD0iTTMxNy43Myw5NC45M2MxLjMsMCwyLjYzLDAsMy45My4xNmE0OC41Nyw0OC41NywwLDAsMSwyNC45MSw4Ny41MiwxLjI2LDEuMjYsMCwwLDAsLjE5LDIuMTQsNjYuMzcsNjYuMzcsMCwwLDEsMjYuNjcsMjMuOTFBNjUuNjcsNjUuNjcsMCwwLDEsMzgzLjcxLDI0NHY1NC45YTEuMzksMS4zOSwwLDAsMCwuMDguNDZsMTYuMDYsNDEuMTJhNy4wNSw3LjA1LDAsMCwxLTYuNTcsOS42MkgzNjcuNTlhMS4yNiwxLjI2LDAsMCwwLTEuMjYsMS4yNnY0Ni43MWExOSwxOSwwLDAsMS0xOSwxOUgyODguMTZhMTkuMDUsMTkuMDUsMCwwLDEtOS41OS0yLjU5bC0uNjQtLjhhMTUuMTksMTUuMTksMCwwLDEtOS42MSwzLjM5SDIyNy4wNWExNS4yMSwxNS4yMSwwLDAsMS05LjYxLTMuMzlsLS42MS43N2ExOSwxOSwwLDAsMS05LjYyLDIuNjJIMTQ4LjA2YTE5LjA1LDE5LjA1LDAsMCwxLTE5LTE5VjMyMi4zMmExLjI3LDEuMjcsMCwwLDAtLjg1LTEuMTlBMjQuNDYsMjQuNDYsMCwwLDEsMTExLjY2LDI5OFYyNDRhNjUuNjcsNjUuNjcsMCwwLDEsMTAuMjgtMzUuMzIsNjYuMzcsNjYuMzcsMCwwLDEsMjYuNjctMjMuOTEsMS4yNiwxLjI2LDAsMCwwLC4xOS0yLjE0LDQ5LjE2LDQ5LjE2LDAsMCwxLTE0LjM3LTE2Ljg2QTQ3LjksNDcuOSwwLDAsMSwxMjksMTQzLjUzYTQ4LjYsNDguNiwwLDEsMSw5Ny4xOSwwLDQ4LDQ4LDAsMCwxLTUuMzgsMjIuMjIsNDkuMDgsNDkuMDgsMCwwLDEtMTQuMzgsMTYuODYsMS4yNiwxLjI2LDAsMCwwLC4yLDIuMTQsNjYuMTgsNjYuMTgsMCwwLDEsMTYuNDMsMTEuNDgsMS4yNCwxLjI0LDAsMCwwLC44Ny4zNCwxLjI2LDEuMjYsMCwwLDAsLjgtLjI4LDM1Ljk1LDM1Ljk1LDAsMCwxLDQ1LjgzLDAsMS4yOCwxLjI4LDAsMCwwLC44LjI4LDEuMjQsMS4yNCwwLDAsMCwuODctLjM0LDY2LjE4LDY2LjE4LDAsMCwxLDE2LjQzLTExLjQ4LDEuMjUsMS4yNSwwLDAsMCwuMTktMi4xNCw0OS4xNiw0OS4xNiwwLDAsMS0xNC4zNy0xNi44Niw0OCw0OCwwLDAsMS01LjM4LTIyLjIyLDQ4LjY1LDQ4LjY1LDAsMCwxLDQ4LjU5LTQ4LjZtMCw4My4wN2EzNC40OCwzNC40OCwwLDEsMC0zNC40Ny0zNC40N0EzNC41MSwzNC41MSwwLDAsMCwzMTcuNzMsMTc4bS0xNDAuMDksMGEzNC40OCwzNC40OCwwLDEsMC0zNC40OC0zNC40N0EzNC41LDM0LjUsMCwwLDAsMTc3LjY0LDE3OE0yODguMTYsNDAzaDE3LjIyYTUuMyw1LjMsMCwwLDAsNS4yOS01LjI5VjM1OS40NWE3LjA2LDcuMDYsMCwwLDEsNy4wNi03LjA1aC40OGE3LjIyLDcuMjIsMCwwLDEsNi41OCw3LjMzdjM3LjkyYTUuMzEsNS4zMSwwLDAsMCw1LjMsNS4yOWgxNy4yMmE0LjkxLDQuOTEsMCwwLDAsNC45LTQuOVYzNDNhNy4wOCw3LjA4LDAsMCwxLDctNy4wNmguMDdjLjE3LDAsLjM3LDAsLjU5LDBoMjEuMjdhMS4yNSwxLjI1LDAsMCwwLDEuMTctMS43MWwtMTIuNjktMzNWMjM4LjcyYzAtMTEuNDItNS41Ni0yMy4xMi0xNS4yNC0zMi4xYTUzLjc1LDUzLjc1LDAsMCwwLTM2LjYyLTE0LjVoLS44YTUxLjA1LDUxLjA1LDAsMCwwLTM2LjE1LDE1Ljc2LDEuMjYsMS4yNiwwLDAsMC0uMjUsMS4zOSwzNS42NCwzNS42NCwwLDAsMSwzLjIsMTQuOEEzNi4xLDM2LjEsMCwwLDEsMjcyLDI1MC42OWExLjI2LDEuMjYsMCwwLDAtLjQxLDEuMDYsMS4yOCwxLjI4LDAsMCwwLC42MSwxQTQ4LjU0LDQ4LjU0LDAsMCwxLDI4OS4zMiwyNzBhNDgsNDgsMCwwLDEsNi41MywyNC4xOHYzNy43YTE5LjI0LDE5LjI0LDAsMCwxLTExLjM4LDE3LjUzLDEuMjUsMS4yNSwwLDAsMC0uNzQsMS4xNVYzOTkuOGExLjMxLDEuMzEsMCwwLDAsLjE1LjYxLDQuOTIsNC45MiwwLDAsMCw0LjI4LDIuNTRNMTM2LjEsMzA4LjMzaC4xOGE3LDcsMCwwLDEsNi44OCw3LjJ2ODIuNTJhNC45MSw0LjkxLDAsMCwwLDQuOSw0LjloMTcuMjJhNS4zMSw1LjMxLDAsMCwwLDUuMy01LjI5di03MC42YTcuMDcsNy4wNywwLDAsMSw3LjA2LTcuMDZoLjQ3YTcuMjMsNy4yMywwLDAsMSw2LjU5LDcuMzN2NzAuMzJBNS4zLDUuMywwLDAsMCwxOTAsNDAzaDE3LjIyYTQuOTEsNC45MSwwLDAsMCw0LjI4LTIuNTUsMS4yNSwxLjI1LDAsMCwwLC4xNi0uNlYzNTAuNTRhMS4yNSwxLjI1LDAsMCwwLS43NS0xLjE1LDE5LjI0LDE5LjI0LDAsMCwxLTExLjM4LTE3LjUzdi0zNy43QTQ4LDQ4LDAsMCwxLDIwNi4wNSwyNzBhNDguNTQsNDguNTQsMCwwLDEsMTcuMTYtMTcuMjcsMS4yOCwxLjI4LDAsMCwwLC42MS0xLDEuMjYsMS4yNiwwLDAsMC0uNDEtMS4wNiwzNi4xMywzNi4xMywwLDAsMS0xMS43Ni0yNi42MSwzNS41MywzNS41MywwLDAsMSwzLjI2LTE1LDEuMjYsMS4yNiwwLDAsMC0uMjgtMS40NCw1MS40Niw1MS40NiwwLDAsMC0zNy0xNS41N2gtLjgxYy0yOC4xNS40My01MS4wNSwyNC01MS4wNSw1Mi42MVYyOThhMTAuMzMsMTAuMzMsMCwwLDAsMTAuMzIsMTAuMzJNMjQ3LjY5LDI0NmEyMS45MiwyMS45MiwwLDEsMC0yMS45Mi0yMS45MkEyMiwyMiwwLDAsMCwyNDcuNjksMjQ2bS04LjMyLDE1Ni45M2ExLjI2LDEuMjYsMCwwLDAsMS4yNi0xLjI2VjM1Mi4xM2E3LjA2LDcuMDYsMCwwLDEsMTQuMTIsMHY0OS41NWExLjI2LDEuMjYsMCwwLDAsMS4yNSwxLjI2aDEyLjMyYTEuMywxLjMsMCwwLDAsLjg5LS4zNywxLjI2LDEuMjYsMCwwLDAsLjM3LS44OWwwLTU3LjdhNy4wNyw3LjA3LDAsMCwxLDcuMDYtNy4wNiw1LjA3LDUuMDcsMCwwLDAsNS4wNi01LjA3di0zNy43YTM0LDM0LDAsMCwwLTY4LjA5LDB2MzcuN2E1LjA3LDUuMDcsMCwwLDAsNS4wNyw1LjA3LDcuMDcsNy4wNywwLDAsMSw3LjA2LDcuMDZ2NTcuNjdhMS4yNiwxLjI2LDAsMCwwLDEuMjUsMS4yNmgxMi4zNSIvPjwvc3ZnPg==') center left no-repeat;
  background-size:50px 50px;
  top: 200px;
}

.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;
}

#btn_right, #btn_left {
    font-family: 'Museo-100', sans-serif;
    position: absolute;
    top: 0;
    line-height: 56px;
    margin-left: 28px;
    padding-left: 4%;
    cursor:pointer;
    opacity: .3;
    color: #FFF;
  }
#btn_right {
  left: 50%;
}
#btn_left {
  right: 50%;
  margin-right: 28px;
  padding-right: 4%;
}
#btn_right:hover,#btn_left: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;
}