* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
    outline: none;
}

html, body, #page-container {
  min-height: 100% !important;
    height: 100%;
    width:100%; 
    max-width:1200px; 
    margin:auto;
}

html {
  background-color: #384558;
}

html.simple-menu {
  background: #2B3446;
}

ul {
    list-style-type: none;
}

a {
  text-decoration: none;
}

button {
  color: white;
  padding: 12px 25px;
  font-size: 15px;
  cursor: pointer;
  border-radius: 5px;
  border: 0px solid;
  float: right;
  margin: 10px;
  min-width: 150px;
}

button:hover {
  box-shadow: 0px 0px 1px #000;
}

button.green {
  background-color: #37B035;
}

button.gray {
  background-color: #C0C0C0;
}

button.gray:hover {
  cursor: default;
  box-shadow:none;
}

button.red {
  background-color: #B61822;
}

button.orange {
  background-color: #FDA72A;
}

button.mini {
  color: white;
  padding: 5px;
  border-radius: 2px;
  display: inline-block;
  margin: 10px;
  font-size: 12px;
  min-width: 75px;
}

#page-container {
}

#header {
  position: relative;
  height: 140px;
}

html.simple-menu #header {
  height: 90px;
  background: #2B3446;
}


#header img.logo {
  display: inline-block;
  vertical-align:top;
  position: relative;
  top: 0px;
  left: 50px;
  height: 90px;
  cursor: pointer;
}

#header .menu {
  position: relative;
  top: 0px;
  left: 100px;
  display: inline-block;
  vertical-align: top;
}

#header .menu .upper-menu {
  display: inline-block;
  vertical-align: top;
  color: white;
  margin-top: 36px;
  margin-right: 40px;
}

#header .menu .upper-menu span,
#header .menu .upper-menu a {
  color: #46B84B;
}

#header .menu .upper-menu.has-submenu:hover {
  /*height: 104px;*/
}

#header .menu .upper-menu:hover span {
  color: #46B84B;
  border-bottom: 5px solid #46B84B;
}

#header .menu .upper-menu.has-submenu:hover .lower-menu {
  visibility: visible;
  z-index: 10;
}

#header .menu .upper-menu .lower-menu .lower-menu-bg {
    position: fixed;
    top: 90px;
    left: 0px;
    z-index: -1;
    height: 50px;
    width: 100%;
    background-color: #41B946;
    visibility: hidden;
}

#header .menu .upper-menu.has-submenu:hover .lower-menu .lower-menu-bg {
    visibility: visible;
}

#header .menu .upper-menu.selected.has-submenu {
  /*height: 104px;*/
}

#header .menu .upper-menu.selected span {
  color: #46B84B;
  border-bottom: 5px solid #46B84B;
}

#header .menu .upper-menu.selected .lower-menu {
  visibility: visible;
}

html.simple-menu #header .menu .upper-menu .lower-menu {
  visibility: hidden;
}

html.simple-menu #header .menu .upper-menu.has-submenu:hover .lower-menu {
  visibility: hidden;
}

#header .menu .upper-menu span {
  padding-bottom: 30px;
  display: block;
  cursor: pointer;
}

#header .menu .lower-menu {
  position: absolute;
  left: 0px;
  width: 100%;
  background-color: #46B84B;
  visibility: hidden;
  min-width: 800px;
}

#header .menu .lower-menu-item {
  color: #49596c;
  display: inline-block;
  margin-right: 40px;
  padding-bottom: 14px;
  cursor: pointer;
  padding-top: 14px;
  font-size: 14px;
  border-bottom: 5px solid #46B84B;
}

#header .menu .lower-menu-item:hover,
#header .menu .lower-menu-item.selected {
  color: white;
  border-bottom: 5px solid white;
}

#header .logout {
  color: #46B84B;
  float: right;
  position: relative;
  top: 36px;
  right: 40px;
  cursor: pointer;
  padding-bottom: 30px;
}

#header .logout:hover {
  border-bottom: 5px solid #46B84B;
}

#body {
  height: calc(100% - 140px);
}

#settings {
  font-family: 'Lato', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: #384558;
  padding-top: 40px;
  width: 100%;
}

#settings h1 {
  font-weight: 700;
  color: #F3F3F3;
  margin: 40px;
  text-align: left;
}

#settings textarea {
  height: 90px;
  line-height: 20px;
  font-size: 15px;
  word-wrap: break-word;
  white-space: normal;
  vertical-align: top;
}

#settings select {
  height: 30px;
  line-height: 100px;
  background-color: white;
  font-size: 15px;
}

#settings .panel {
  margin: 40px;
  border: 1px solid #1E2735;
  border-radius: 5px;
  padding: 20px;
  background-color: #F3F3F3;
  overflow: hidden;
}

#settings .panel.collapsed {
    height: 0px;
    cursor: pointer;
    margin: 5px 40px;
}

#settings .panel button.save-object,
#settings .panel button.delete-object {
    display: initial;
}

#settings .panel.new button.save-object,
#settings .panel.new button.delete-object {
    display: none;
}

#settings .panel button.add-object{
    display: none;
}

#settings .panel.new button.add-object{
    display: initial;
}

#settings h2 {
  font-weight: 400;
  font-size: 20px;
  color: #1E2735;
  display: block;
  margin-bottom: 20px;
  border-bottom: 1px solid #1E2735;
  padding-bottom: 5px;
  text-align: left;
}

#settings .panel.collapsed h2,
#settings .panel.uncollapsed h2 {
  cursor: pointer;
}

#settings .panel.collapsed h2 {
    position: relative;
    top: -12px;
    border-bottom: none;
}

#settings h3 {
  font-weight: 400;
  font-size: 18px;
  color: #1E2735;
  display: block;
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: left;
}

#settings .editable {
  border: 1px solid #1E2735;
  line-height: 30px;
  margin: 5px 0px;
  padding: 0px 5px;
  font-weight: 400;
  color: #1E2735;
  width: 500px;
  height: 30px;
  display: inline-block;
  background-color: white;
  vertical-align: middle; 
  overflow: scroll;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: hidden;
}


#settings textarea.editable {
  height: 90px;
  line-height: 20px;
  font-size: 15px;
  word-wrap: break-word;
  white-space: normal;
  vertical-align: top;
}


#settings span.title {
  margin: 5px;
  line-height: 30px;
  display: inline-block;
  vertical-align: middle;
  font-size: 18px; 
}

#settings img.image-preview {
  vertical-align: middle;
  margin-left: 20px;
  max-height: 100px;
}

#settings.header label.menu-type {
  display: block;
  margin: 5px;
}

#settings ul.lower-menu {
  margin-top: 10px;
}

#settings li.upper-menu-item {
  border: 1px solid #C5C5C5;
  border-radius: 5px;
  background-color: #E5E5E5;
  margin: 20px 50px;
  overflow: hidden;
}

#settings ul.upper-menu li .editable {
  width: 200px;
  height: 30px;
}

#settings ul.lower-menu li .editable {
  width: 150px;
  height: 30px;
}

#settings li.lower-menu-item div {
  background-color: #C5C5C5;
  border: 1px solid #A5A5A5;
  border-radius: 5px;
  margin: 0px 100px 5px;
  width: 550px;
}

#settings .mugs button {
    float: none;
    position: absolute;
    top: 8px;
}

#settings .mugs .mug-block,
#settings .mugs .add-mug-block {
    position: relative;
    min-height: 60px;
    margin-bottom: 5px;
    margin-left: 60px;
}

#settings .mugs .add-mug-block button.green.add {
    top: 0px;
    margin-left: 0px;
    margin-top: 0px;
}

#settings .mugs div.mug {
    min-width: 60px;
    min-height: 60px;
    display: inline-block;
    background-size: 80px; 
    background-position: center center; 
    background-color: #1D2835; 
    border-radius: 5px;
}

#settings .mugs .matrix-container {
  display: inline-block;
}

#map,
#ucmap {
  height: calc(100% - 30px);
  font-size: 10px;
}

#map-filter {
  text-align: center;
  padding: 10px;
  background-color: #171D28;
}

#map-filter span.label {
  color: white;
}

#map-filter button {
  font-size: 10px;
  min-width: 60px;
  padding: 6px 12px;
  margin: 5px;
  border-radius: 3px;
  color: #465569;
  border: 1px solid #465569;
  float: none;
  background-color: transparent;
}

#map-filter button.stages {
  padding-left: 25px;
  background: url(../img/stage.svg) no-repeat 8px center;
  background-size: 14px;
}

#map-filter button.postes {
  padding-left: 25px;
  background: url(../img/poste.svg) no-repeat 8px center;
  background-size: 14px;
}

#map-filter button.formations {
  padding-left: 25px;
  background: url(../img/formation.svg) no-repeat 8px center;
  background-size: 12px;
}

#map-filter button.conferences {
  padding-left: 25px;
  background: url(../img/conference.svg) no-repeat 8px center;
  background-size: 14px;
}

#map-filter button.diplomes {
  padding-left: 30px;
  background: url(../img/diplome.svg) no-repeat 8px center;
  background-size: 18px;
}

#ucmap.display-all button.display-all,
#ucmap.stages button.stages,
#ucmap.postes button.postes,
#ucmap.formations button.formations,
#ucmap.conferences button.conferences,
#ucmap.diplomes button.diplomes {
  background-color: white;
  color: #171D28;
  border: 1px solid #171D28;
}

#map-container {
  width: 90%;
  height: 85%;
  margin: 40px auto;
  border-bottom: 1px solid #465569;
  border-left: 1px solid #465569;
  position: relative;
}

#ucmap .origin {
  position: absolute;
  top: calc(100% - 21px);
  left: -21px;
  width: 100%;
}

#ucmap .axis .label {
  color: #3BAE3A;
  display: block;
}

#ucmap .axis .sublabel {
  color: #465569;
  font-size: 8px;
  display: block;
}

#ucmap .left.axis {
padding: 10px 0px 5px;
  background: url(../img/arrow_map_top.svg) no-repeat;
  background-size: 10px;
  display: inline-block;
  margin-left: -6px;
  position: absolute;
  top: -35px;
}

#ucmap .axis span {
  margin-left: -15px;
}

#ucmap .bottom.axis {
display: inline-block;
  position: absolute;
  top: calc(100% - 7px);
  right: 0px;
  background: url(../img/arrow_map_bottom.svg) no-repeat right 2px;
  background-size: 5px;
  padding-left: 20px;
}

#map-container .origin img {
  width: 40px;
  border: 2px solid #3BAE3A;
  border-radius: 21px;
  background-color: white;

}

#map-container .origin span.label {
  color: white;
  position: relative;
  top: -6px;
}

#ucmap .object {
  cursor: pointer;
  visibility: hidden;
}

#ucmap.display-all .object {
  visibility: visible;
}

#ucmap.formations .object.formation {
  visibility: visible;
}

#ucmap.postes .object.poste {
  visibility: visible;
}

#ucmap.conferences .object.conference {
  visibility: visible;
}

#ucmap.stages .object.stage {
  visibility: visible;
}

#ucmap.diplomes .object.diplome {
  visibility: visible;
}

#ucmap .dashed-line {
  stroke: #FFF;
  stroke-dasharray: 3;
}

#ucmap .inflated-object {
  cursor: pointer;
}

/*
#map,
#ucmap {
  height: calc(100% - 30px);
  font-size: 10px;
}

#map-filter {
  text-align: center;
  padding: 10px;
  background-color: #171D28;
  display: none;
}

#map-filter span.label {
  color: white;
}

#map-filter button {
  font-size: 10px;
  min-width: 60px;
  padding: 6px 12px;
  margin: 5px;
  border-radius: 3px;
  color: #465569;
  border: 1px solid #465569;
  float: none;
  background-color: transparent;
}

#map-filter button.stages {
  padding-left: 25px;
  background: url(../img/stage.svg) no-repeat 8px center;
  background-size: 14px;
}

#map-filter button.postes {
  padding-left: 25px;
  background: url(../img/poste.svg) no-repeat 8px center;
  background-size: 14px;
}

#map-filter button.formations {
  padding-left: 25px;
  background: url(../img/formation.svg) no-repeat 8px center;
  background-size: 12px;
}

#map-filter button.conferences {
  padding-left: 25px;
  background: url(../img/conference.svg) no-repeat 8px center;
  background-size: 14px;
}

#map-filter button.diplomes {
  padding-left: 30px;
  background: url(../img/diplome.svg) no-repeat 8px center;
  background-size: 18px;
}

#ucmap.display-all button.display-all,
#ucmap.stages button.stages,
#ucmap.postes button.postes,
#ucmap.formations button.formations,
#ucmap.conferences button.conferences,
#ucmap.diplomes button.diplomes {
  background-color: white;
  color: #171D28;
  border: 1px solid #171D28;
}

#map-container {
  width: 90%;
  height: 85%;
  margin: 40px auto;
  position: relative;
}

#ucmap .origin {
  position: absolute;
  top: calc(100% - 21px);
  left: -21px;
  width: 100%;
}

#ucmap .axis .label {
  color: #3BAE3A;
  display: block;
  position: absolute;
  right: 0px;
}

#ucmap .axis .sublabel {
  color: #465569;
  font-size: 8px;
  display: block;
  position: relative;
  left: calc(100% - 80px);
  top: 15px;
}

#ucmap .left.axis {
padding: 10px 0px 5px;
  background: url(../img/arrow_map_top.svg) no-repeat;
  background-size: 10px;
  display: inline-block;
  margin-left: -6px;
  position: absolute;
  top: -35px;
  left: 50%;
  height: 100%;
  background-color: #465569;
  width: 1px;
}

#ucmap .axis span {
  margin-left: -15px;
}

#ucmap .bottom.axis {
  display: inline-block;
  position: absolute;
  top: calc(50% - 7px);
  right: 0px;
  background: url(../img/arrow_map_bottom.svg) no-repeat right 2px;
  background-size: 5px;
  padding-left: 20px;
  width: 100%;
  background-color: #465569;
  height: 1px;
}

#ucmap #main-svg {
    display: none;
}

#map-container .origin img {
  width: 40px;
  border: 2px solid #3BAE3A;
  border-radius: 21px;
  background-color: white;
  position: relative;
  left: calc(50% - 5px);
  top: -275px;
}

#map-container .origin span.label {
  color: white;
  position: relative;
  top: -6px;
}

#ucmap .object {
  cursor: pointer;
  visibility: hidden;
}

#ucmap.display-all .object {
  visibility: visible;
}

#ucmap.formations .object.formation {
  visibility: visible;
}

#ucmap.postes .object.poste {
  visibility: visible;
}

#ucmap.conferences .object.conference {
  visibility: visible;
}

#ucmap.stages .object.stage {
  visibility: visible;
}

#ucmap.diplomes .object.diplome {
  visibility: visible;
}

#ucmap .dashed-line {
  stroke: #FFF;
  stroke-dasharray: 3;
}

#ucmap .inflated-object {
  cursor: pointer;
}

#ucmap .axis.left .label {
  right: -55px;
}

#ucmap .axis.left .sublabel {
  left: calc(100% + 20px);
  width: 200px;
}

#body {
  background-color: white;
}

html {
  background-color: white;
}
*/
.quizz-container {
  width: 100%;
  height: calc(100% - 100px);
  padding: 100px 0px;
  background: #384558;
}

.quizz {
  position: relative;
  width: 800px;
  margin: auto;
  overflow: hidden;
  height: 490px;
  background-color: #465569;
  border-radius: 5px;
}

.quizz #quizz-header {
  position: relative;
  padding: 30px 50px;
  background-color: #1E2735;
  border-radius: 5px 5px 0px 0px;
}

.quizz #quizz-header h1 {
  color: white;
  font-size: 20px;
  font-weight: 300;
}

.quizz #quizz-header button.close-quizz {
  position: absolute;
  right: 25px;
  top: 20px;
  font-size: 12px;
  padding: 5px 10px;
  min-width: 80px;
  height: 30px;
  border-radius: 2px;
  background: #384558 url(../img/close.svg) 65px 12px no-repeat;
  background-size: 8px;
  text-align: left;
}

.progression-bar {
  position: relative;
  top: 15px;
  width: 500px;
  background-color: #161D26;
  height: 2px;
  border: 1px solid #161D26;
  border-radius: 2px;
}

.quizz #quizz-header span.progression {
  color: white;
  font-size: 12px;
  position: absolute;
  right: -40px;
  top: -8px;
}

.quizz #quizz-header div.progression {
  position: absolute;
  left: 0px;
  top: -1px;
  background-color: #3BAD3A;
  height: 2px;
  border: 1px solid #3BAD3A;
  border-radius: 2px;
}

.quizz #quizz-header span.label {
  color: #465569;
  font-size: 12px;
  position: absolute;
  top: 10px;
}

.quizz ul#quizz-panels {
  height: 400px;
  border-radius: 0px 0px 5px 5px;
}

.quizz li.quizz-panel {
  padding: 15px 50px;
  height: calc(100% - 60px);
  display: inline-block;
  width: 700px;
  vertical-align: top;
}

.quizz li.quizz-panel.phase2 {
    padding: 30px 0px;
    width: 800px;
}

.quizz li.quizz-panel div.images.items-container {
  text-align: center;
}

.quizz li.quizz-panel h2.question {
  color: white;
  font-size: 16px;
  font-weight: 300;
}

.quizz.up li.quizz-panel h2.question {
  padding-left: 50px;
}

.quizz li.quizz-panel span.question-details {
  margin-top: 10px;
  display: block;
  font-size: 12px;
  color: #2A3446;
}

.quizz li.quizz-panel .checkboxes {
  margin-top: 30px;
}

.quizz li.quizz-panel label {
  display: block;
  color: white;
  font-size: 13px;
  font-weight: 300;
  margin-bottom: 10px;
  cursor: pointer;
}

.quizz li.quizz-panel input[type="checkbox"] {
  display:none;
}

.quizz li.quizz-panel input[type="checkbox"] + div.checkbox {
  display:inline-block;
  width:16px;
  height:16px;
  margin:-1px 4px 0 0;
  vertical-align:middle;
  background:url(../img/check_radio_sheet.svg) left top no-repeat;
  cursor:pointer;
}

.quizz li.quizz-panel input[type="checkbox"]:checked + div.checkbox {
    background:url(../img/check_radio_sheet.svg) -16px top no-repeat;
}

.quizz li.quizz-panel .radiobuttons {
  margin-top: 30px;
}

.quizz.up li.quizz-panel .radiobuttons {
    margin: 5px;
    margin-left: 100px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.quizz.up div.row {
    position: relative;
    width: 800px;
    left: -50px;
    height: 30px;
    line-height: 28px;
}

.quizz.up div.row:nth-child(2n) {
  background-color: rgba(255,255,255,0.05);
}

.quizz.up div.row input[type="range"] {
    position: absolute;
    top: 0px;
    right: 10px;
    padding: 0px 30px;
    background-image: url(../img/slider-bg.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 220px;
    background-position-y: 5px;
    width: 160px;
    height: 30px;
    cursor: pointer;
}

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

.quizz.up div.row input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
}

.quizz.up div.row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.quizz.up div.row input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.quizz.up div.row input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  color: transparent;
}

/* Styling the Thumb */

/* Special styling for WebKit/Blink */
.quizz.up div.row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  background: #FDD32A;
  cursor: pointer;
  margin-top: -7px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #222; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
.quizz.up div.row input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #222;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  background: #FDD32A;
  cursor: pointer;
}

/* All the same stuff for IE */
.quizz.up div.row input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #222;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  background: #FDD32A;
  cursor: pointer;
}

/* Styling the Track */

.quizz.up div.row input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  box-shadow: none;
  background: transparent;
}

.quizz.up div.row input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}

.quizz.up div.row input[type=range]::-moz-range-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  box-shadow: none;
  background: transparent;
}

.quizz.up div.row input[type=range]::-ms-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

.quizz.up div.row input[type=range]::-ms-fill-lower {
  background: transparent;
  box-shadow: none;
}

.quizz.up div.row input[type=range]:focus::-ms-fill-lower {
  background: transparent;
}

.quizz.up div.row input[type=range]::-ms-fill-upper {
  background: transparent;
  box-shadow: none;
}

.quizz.up div.row input[type=range]:focus::-ms-fill-upper {
  background: transparent;
}

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

.quizz li.quizz-panel .radiobuttons td {
  position: relative;
}

.quizz li.quizz-panel .radiobuttons td span {
  position: relative;
  top: 18px;
  left: -18px;
  color: #2A3446;
  font-weight: 700;
  font-size: 15px;
}

.quizz li.quizz-panel input[type="radio"] {
  display:none;
}

.quizz li.quizz-panel input[type="radio"] + div.radio {
  display:inline-block;
  width:16px;
  height:16px;
  margin:-1px 4px 0 0;
  vertical-align:middle;
  background:url(../img/check_radio_sheet.svg) -32px top no-repeat;
  cursor:pointer;
  position: absolute;
  top: 25px;
  left: -20px;
}

.quizz.up li.quizz-panel input[type="radio"] + div.radio {
  top: 2px;
}

.quizz li.quizz-panel input[type="radio"]:checked + div.radio {
    background:url(../img/check_radio_sheet.svg) -48px top no-repeat;
}

.quizz li.quizz-panel .radiobuttons label {
  margin: 0px 50px 30px 0px;
}

.quizz.up li.quizz-panel .radiobuttons label {
  margin: 0px 25px 30px 0px;
}

.quizz li.quizz-panel .radiobuttons label img {
  position: relative;
  top: 10px;
}

.quizz li.quizz-panel .images .image {
  border: 4px solid rgba(255,255,255,0.05);
  width: 135px;
  height: 135px;
  display: inline-block;
  margin: 60px 5px 0px 5px;
  cursor: pointer;
  position: relative;
  visibility: hidden;
}

.quizz li.quizz-panel .images .image.selected {
  border: 4px solid #45B64A;
}

.quizz button.prev-panel,
.quizz button.next-panel,
.quizz button.save-and-exit {
  position: relative;
  right: 25px;
  top: -60px;
  font-size: 12px;
  padding: 5px 15px;
  min-width: 80px;
  height: 30px;
  border-radius: 2px;
}

.quizz button.prev-panel {
  background-color: #1E2735;
  margin-right: 0px;
}

.quizz button.next-panel,
.quizz button.save-and-exit {
  background-color: #46B64A;
}

.quizz button.next-panel.disabled,
.quizz button.save-and-exit.disabled {
  background-color: #aaa;
  cursor: default;
}

.quizz button.next-panel.disabled:hover,
.quizz button.save-and-exit.disabled:hover {
  box-shadow: none;
}

.quizz .results-container {
  width: 100%;
  height: 300px;
  position: relative;
  overflow-y: scroll;
}

#three-parts-quizz .quizz table.results {
  width: 100%;
}

#three-parts-quizz .quizz table.results td.result {
  background-color: #394558;
  height: 50px;
  width: 100%;
  background-repeat-x: no-repeat;
  background-size: 7px;
}

#three-parts-quizz .quizz table.results tr:first-child td.result{
  border-radius: 4px 4px 0px 0px;
}

#three-parts-quizz .quizz table.results tr:last-child td.result{
  border-radius: 0px 0px 4px 4px;
}

#three-parts-quizz .quizz table.results td.result.top {
  background-image: url(../img/results-top.svg);
}

#three-parts-quizz .quizz table.results td.result.middle {
  background-image: url(../img/results-middle.svg);
}

#three-parts-quizz .quizz table.results td.result.low {
  background-image: url(../img/results-low.svg);
}

#three-parts-quizz .quizz table.results td.result span {
  color: white;
  font-size: 14px;
  font-weight: 300;
  padding-left: 20px;
  cursor: pointer;
}

#three-parts-quizz .quizz table.results td.result span:hover {
  text-decoration: underline;
}

#three-parts-quizz-settings .panel.phase2 img {
    height: 25px;
    position: relative;
    top: 8px;
}

#three-parts-quizz-settings .editable.value {
    width: 150px;
    margin-left: 5px;
}

#three-parts-quizz-settings .values {
    display: inline;
    margin-left: 10px;
}

#three-parts-quizz-settings #settings .values .editable {
    width: 20px;
    margin: 0px 5px;
    text-align: center;
}

#three-parts-quizz-settings #settings .editable.green {
    border: 4px solid green;
}

#three-parts-quizz-settings #settings .editable.indigo {
    border: 4px solid yellowgreen;
}

#three-parts-quizz-settings #settings .editable.orange {
    border: 4px solid orange;
}

#three-parts-quizz-settings #settings .editable.red {
    border: 4px solid red;
}

#three-parts-quizz-settings #settings .discrimination-table table {
    margin-left: 40px;
    width: 280px;
}

#three-parts-quizz-settings #settings .discrimination-table td {
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    padding: 2px;
}

#three-parts-quizz-settings #settings .discrimination-table td:nth-child(1) {
    padding: 10px;
}

#three-parts-quizz-settings #settings .discrimination-table .editable {
    width: 40px;
}

#three-parts-quizz-settings #settings .percents p {
    margin-left: 20px;
}

#three-parts-quizz-settings #settings .percents span.editable {
    width: 20px;
    margin: 2px;
    text-align: center;
}

#three-parts-quizz-settings #settings button.invert-values {
    float: none;
    margin: 0px;
    margin-left: 20px;
    vertical-align: middle;
}

#account {
  height: 100%;
  margin-top: 50px;
  background-color: #394558;
  padding: 30px 100px;
}

#account .account-block {
  width: calc(50% - 22px);  
  margin: 10px;
  display: inline-block;
}

#account .account-block label {
  color: white;
  font-weight: 300;
  font-size: 20px;
  margin-bottom: 10px;
  display: block;
}

#account .account-block table {
  width: 100%;
  border-spacing: 0px;
  border-collapse: separate;
  table-layout: fixed;
}

#account .account-block td {
  background-color: #475569;
  height: 40px;
  border-bottom: 1px solid #394558;
  font-size: 12px;
  font-weight: 400;
}

#account .account-block td.label {
  color: #1E2736;
  width: 115px;
  padding: 0px 20px;
  box-sizing: border-box;
}

#account .account-block td.value {
  color: white;
  line-height: 40px;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  width: 225  px;
}

#account .account-block td.modify {
  min-width: 40px;
  width: 75px;
}

#account .account-block td.modify span {
  color: #1E2736;
  font-size: 10px;
  background: url(../img/settings.svg) 42px 3px no-repeat;
  background-size: 13px 13px;
  display: block;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
}

#account .account-block tr:first-child td:first-child {
  border-radius: 5px 0px 0px 0px;
}

#account .account-block tr:first-child td:last-child {
  border-radius: 0px 5px 0px 0px;
}

#account .account-block tr:last-child td:first-child {
  border-radius: 0px 0px 0px 5px;
}

#account .account-block tr:last-child td:last-child {
  border-radius: 0px 0px 5px 0px;
}

#account .delete-block {
  width: calc(50% - 22px);
  height: 60px;
  position: relative;
  left: 50%;
  margin: 10px;
}

#account button#delete-account {
  background-color: #BE2F34;
  left: 10px;
  position: relative;
}

#settings.quizz {
    height: 100%;
    background-color: transparent;
}

#settings.quizz .item img {
  max-height: 150px;
  max-width: 150px;
  position: relative;
  left: 20px;
  top: 12px;
  vertical-align: top;
}

#settings.quizz #panels .panel {
  background-color: #E5E5E5;
  margin: 0px 40px 20px 40px;
}

#settings.quizz #panels .panel button {
  position: relative;
  top: 15px;
  left: 15px;
}

#settings.quizz #panels .panel button.mini {
  position: relative;
  top: 0px;
  left: 0px;
  float: initial;
}

#settings.quizz span.editable.weight {
  width: 25px;
}

#settings.quizz ul.indexes {
  margin-left: 25px;
}

#settings.quizz li.item.block {
  border: 1px solid #D0D0D0;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 10px;
  background-color: #D0D0D0;
}

#settings.quizz #panels li.item.block > button.mini {
  float: right;
}

.matrix {
  width: 860px;
  margin: auto;
  overflow: hidden;
}

.matrix.compact {
  width: 430px;
}

.matrix .dimensions {
}

.matrix li.dimension {
  display: inline-block;
  width: 860px;
}

.matrix.compact li.dimension {
  display: initial;
}

.matrix.compact button.prev,
.matrix.compact button.next {
  display: none;
}

.matrix .dimensions td.index {
  width: 160px;
  height: 160px;
  font-size: 15px;
  line-height: 20px;
  padding: 0px;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
}

.matrix .dimensions td.index.selected {
}

.matrix.compact .dimensions {
  width: 400px;
}

.matrix .dimensions span.title {
  color: white;
  font-size: 25px;
  display: block;
  padding: 10px;
  font-weight: 700;
}

.matrix.compact .dimensions span.title,
#settings .matrix.compact .dimensions span.title {
  display: none;
}

.matrix .dimensions span.explanation {
  padding: 0px 0px 20px 10px;
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #B1B1B1;
  font-weight: 300;
}

.matrix.compact .dimensions span.explanation {
  display: none;
}

.matrix .dimensions table {
  border-spacing: 10px;
  border-collapse: separate; 
}

.matrix.compact .dimensions table {
  border-spacing: 5px;
  border-collapse: separate; 
}

.matrix .dimensions td.index {
  position: relative;
}

.matrix.compact .dimensions td.index {
  width: 80px;
  height: 80px;
  font-size: 12px;
  line-height: 15px;
  background-size: 80px;
}

.matrix .dimensions td.index .index-bg {
  width: 160px;
  height: 160px;
  vertical-align: text-top;
  background-color: transparent;
  margin: 0px;
}

.matrix.compact .dimensions td.index .index-bg {
  width: 80px;
  height: 80px;
}

.matrix .dimensions td.index span.label {
  color: white;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
}

.matrix.compact .dimensions td.index span.label {
  font-size: 15px;
  line-height: 20px;
}

.matrix .dimensions td.index .boxesContainer {
  position: absolute;
}

.matrix .dimensions td.index .boxes {
  position:relative;
  width:160px;
  height:160px;
  margin:0 auto 10px;
  overflow:hidden;
    -webkit-perspective: 1200px;
       -moz-perspective: 1200px;
         -o-perspective: 1200px;
            perspective: 1200px;

}

.matrix.compact .dimensions td.index .boxes {
  width:80px;
  height:80px;
    -webkit-perspective: 600px;
       -moz-perspective: 600px;
         -o-perspective: 600px;
            perspective: 600px;

}

.matrix .dimensions td.index .boxes div {
  font-size:20px;
  position:absolute;
  top:40px;
  left:0px;
  width:160px;
  height:30px;
  opacity:0;
  line-height: 30px;
  -webkit-transform: translate3d(0px,0px,-750px);
  -moz-transform: translate3d(0px,0px,-750px);
  -o-transform: translate3d(0px,0px,-750px);
  -ms-transform: translate3d(0px,0px,-750px);
  transform: translate3d(0px,0px,-750px);
}

.matrix.compact .dimensions td.index .boxes div {
  font-size:15px;
  top:20px;
  width:80px;
  height:20px;
  line-height: 20px;
}

.matrix .dimensions td.index .boxes:hover div {
  font-weight: bold;
}

@keyframes Salima {
  100% {}
}

@-webkit-keyframes Salima {
  100% {}
}

@keyframes Salima11 {100% {opacity: 1; transform: translate3d(59px, 80px, 750px);}}
@keyframes Salima12 {100% {opacity: 1; transform: translate3d(70px, -71px, 750px);}}
@keyframes Salima13 {100% {opacity: 1; transform: translate3d(-53px, -86px, 750px);}}
@keyframes Salima14 {100% {opacity: 1; transform: translate3d(-23px, 97px, 750px);}}
@keyframes Salima15 {100% {opacity: 1; transform: translate3d(14px, 98px, 750px);}}
@keyframes Salima16 {100% {opacity: 1; transform: translate3d(-54px, 84px, 750px);}}
@keyframes Salima17 {100% {opacity: 1; transform: translate3d(87px, 48px, 750px);}}
@keyframes Salima18 {100% {opacity: 1; transform: translate3d(47px, -88px, 750px);}}
@keyframes Salima19 {100% {opacity: 1; transform: translate3d(-87px, -51px, 750px);}}
@keyframes Salima110 {100% {opacity: 1; transform: translate3d(-88px, 48px, 750px);}}
@keyframes Salima111 {100% {opacity: 1; transform: translate3d(-35px, -94px, 750px);}}
@keyframes Salima112 {100% {opacity: 1; transform: translate3d(-19px, 98px, 750px);}}
@keyframes Salima21 {100% {opacity: 1; transform: translate3d(34px, 93px, 750px);}}
@keyframes Salima22 {100% {opacity: 1; transform: translate3d(16px, -99px, 750px);}}
@keyframes Salima23 {100% {opacity: 1; transform: translate3d(-8px, -100px, 750px);}}
@keyframes Salima24 {100% {opacity: 1; transform: translate3d(98px, -20px, 750px);}}
@keyframes Salima25 {100% {opacity: 1; transform: translate3d(-21px, -98px, 750px);}}
@keyframes Salima26 {100% {opacity: 1; transform: translate3d(-34px, 94px, 750px);}}
@keyframes Salima27 {100% {opacity: 1; transform: translate3d(91px, 40px, 750px);}}
@keyframes Salima28 {100% {opacity: 1; transform: translate3d(1px, -100px, 750px);}}
@keyframes Salima29 {100% {opacity: 1; transform: translate3d(67px, 73px, 750px);}}
@keyframes Salima210 {100% {opacity: 1; transform: translate3d(31px, -96px, 750px);}}
@keyframes Salima211 {100% {opacity: 1; transform: translate3d(-40px, -92px, 750px);}}
@keyframes Salima212 {100% {opacity: 1; transform: translate3d(-67px, 74px, 750px);}}
@keyframes Salima31 {100% {opacity: 1; transform: translate3d(13px, 99px, 750px);}}
@keyframes Salima32 {100% {opacity: 1; transform: translate3d(-23px, 97px, 750px);}}
@keyframes Salima33 {100% {opacity: 1; transform: translate3d(30px, 95px, 750px);}}
@keyframes Salima34 {100% {opacity: 1; transform: translate3d(14px, -99px, 750px);}}
@keyframes Salima35 {100% {opacity: 1; transform: translate3d(-23px, -98px, 750px);}}
@keyframes Salima36 {100% {opacity: 1; transform: translate3d(-53px, 85px, 750px);}}
@keyframes Salima37 {100% {opacity: 1; transform: translate3d(-83px, -57px, 750px);}}
@keyframes Salima38 {100% {opacity: 1; transform: translate3d(-29px, 95px, 750px);}}
@keyframes Salima39 {100% {opacity: 1; transform: translate3d(12px, 99px, 750px);}}
@keyframes Salima310 {100% {opacity: 1; transform: translate3d(33px, -95px, 750px);}}
@keyframes Salima311 {100% {opacity: 1; transform: translate3d(-40px, -92px, 750px);}}
@keyframes Salima312 {100% {opacity: 1; transform: translate3d(37px, -93px, 750px);}}
@keyframes Salima41 {100% {opacity: 1; transform: translate3d(-45px, -90px, 750px);}}
@keyframes Salima42 {100% {opacity: 1; transform: translate3d(-90px, 45px, 750px);}}
@keyframes Salima43 {100% {opacity: 1; transform: translate3d(79px, 60px, 750px);}}
@keyframes Salima44 {100% {opacity: 1; transform: translate3d(2px, -100px, 750px);}}
@keyframes Salima45 {100% {opacity: 1; transform: translate3d(13px, 99px, 750px);}}
@keyframes Salima46 {100% {opacity: 1; transform: translate3d(43px, -91px, 750px);}}
@keyframes Salima47 {100% {opacity: 1; transform: translate3d(-62px, -79px, 750px);}}
@keyframes Salima48 {100% {opacity: 1; transform: translate3d(-8px, 99px, 750px);}}
@keyframes Salima49 {100% {opacity: 1; transform: translate3d(53px, 84px, 750px);}}
@keyframes Salima410 {100% {opacity: 1; transform: translate3d(-79px, 62px, 750px);}}
@keyframes Salima411 {100% {opacity: 1; transform: translate3d(74px, 67px, 750px);}}
@keyframes Salima412 {100% {opacity: 1; transform: translate3d(75px, -66px, 750px);}}
@keyframes Salima51 {100% {opacity: 1; transform: translate3d(-30px, -96px, 750px);}}
@keyframes Salima52 {100% {opacity: 1; transform: translate3d(-67px, 74px, 750px);}}
@keyframes Salima53 {100% {opacity: 1; transform: translate3d(-13px, -100px, 750px);}}
@keyframes Salima54 {100% {opacity: 1; transform: translate3d(-94px, 36px, 750px);}}
@keyframes Salima55 {100% {opacity: 1; transform: translate3d(74px, 66px, 750px);}}
@keyframes Salima56 {100% {opacity: 1; transform: translate3d(0px, -100px, 750px);}}
@keyframes Salima57 {100% {opacity: 1; transform: translate3d(-68px, -74px, 750px);}}
@keyframes Salima58 {100% {opacity: 1; transform: translate3d(56px, -83px, 750px);}}
@keyframes Salima59 {100% {opacity: 1; transform: translate3d(-28px, -97px, 750px);}}
@keyframes Salima510 {100% {opacity: 1; transform: translate3d(-47px, 88px, 750px);}}
@keyframes Salima511 {100% {opacity: 1; transform: translate3d(83px, 55px, 750px);}}
@keyframes Salima512 {100% {opacity: 1; transform: translate3d(85px, -53px, 750px);}}

@-webkit-keyframes Salima11 {100% {opacity: 1; -webkit-transform: translate3d(59px, 80px, 750px);}}
@-webkit-keyframes Salima12 {100% {opacity: 1; -webkit-transform: translate3d(70px, -71px, 750px);}}
@-webkit-keyframes Salima13 {100% {opacity: 1; -webkit-transform: translate3d(-53px, -86px, 750px);}}
@-webkit-keyframes Salima14 {100% {opacity: 1; -webkit-transform: translate3d(-23px, 97px, 750px);}}
@-webkit-keyframes Salima15 {100% {opacity: 1; -webkit-transform: translate3d(14px, 98px, 750px);}}
@-webkit-keyframes Salima16 {100% {opacity: 1; -webkit-transform: translate3d(-54px, 84px, 750px);}}
@-webkit-keyframes Salima17 {100% {opacity: 1; -webkit-transform: translate3d(87px, 48px, 750px);}}
@-webkit-keyframes Salima18 {100% {opacity: 1; -webkit-transform: translate3d(47px, -88px, 750px);}}
@-webkit-keyframes Salima19 {100% {opacity: 1; -webkit-transform: translate3d(-87px, -51px, 750px);}}
@-webkit-keyframes Salima110 {100% {opacity: 1; -webkit-transform: translate3d(-88px, 48px, 750px);}}
@-webkit-keyframes Salima111 {100% {opacity: 1; -webkit-transform: translate3d(-35px, -94px, 750px);}}
@-webkit-keyframes Salima112 {100% {opacity: 1; -webkit-transform: translate3d(-19px, 98px, 750px);}}
@-webkit-keyframes Salima21 {100% {opacity: 1; -webkit-transform: translate3d(34px, 93px, 750px);}}
@-webkit-keyframes Salima22 {100% {opacity: 1; -webkit-transform: translate3d(16px, -99px, 750px);}}
@-webkit-keyframes Salima23 {100% {opacity: 1; -webkit-transform: translate3d(-8px, -100px, 750px);}}
@-webkit-keyframes Salima24 {100% {opacity: 1; -webkit-transform: translate3d(98px, -20px, 750px);}}
@-webkit-keyframes Salima25 {100% {opacity: 1; -webkit-transform: translate3d(-21px, -98px, 750px);}}
@-webkit-keyframes Salima26 {100% {opacity: 1; -webkit-transform: translate3d(-34px, 94px, 750px);}}
@-webkit-keyframes Salima27 {100% {opacity: 1; -webkit-transform: translate3d(91px, 40px, 750px);}}
@-webkit-keyframes Salima28 {100% {opacity: 1; -webkit-transform: translate3d(1px, -100px, 750px);}}
@-webkit-keyframes Salima29 {100% {opacity: 1; -webkit-transform: translate3d(67px, 73px, 750px);}}
@-webkit-keyframes Salima210 {100% {opacity: 1; -webkit-transform: translate3d(31px, -96px, 750px);}}
@-webkit-keyframes Salima211 {100% {opacity: 1; -webkit-transform: translate3d(-40px, -92px, 750px);}}
@-webkit-keyframes Salima212 {100% {opacity: 1; -webkit-transform: translate3d(-67px, 74px, 750px);}}
@-webkit-keyframes Salima31 {100% {opacity: 1; -webkit-transform: translate3d(13px, 99px, 750px);}}
@-webkit-keyframes Salima32 {100% {opacity: 1; -webkit-transform: translate3d(-23px, 97px, 750px);}}
@-webkit-keyframes Salima33 {100% {opacity: 1; -webkit-transform: translate3d(30px, 95px, 750px);}}
@-webkit-keyframes Salima34 {100% {opacity: 1; -webkit-transform: translate3d(14px, -99px, 750px);}}
@-webkit-keyframes Salima35 {100% {opacity: 1; -webkit-transform: translate3d(-23px, -98px, 750px);}}
@-webkit-keyframes Salima36 {100% {opacity: 1; -webkit-transform: translate3d(-53px, 85px, 750px);}}
@-webkit-keyframes Salima37 {100% {opacity: 1; -webkit-transform: translate3d(-83px, -57px, 750px);}}
@-webkit-keyframes Salima38 {100% {opacity: 1; -webkit-transform: translate3d(-29px, 95px, 750px);}}
@-webkit-keyframes Salima39 {100% {opacity: 1; -webkit-transform: translate3d(12px, 99px, 750px);}}
@-webkit-keyframes Salima310 {100% {opacity: 1; -webkit-transform: translate3d(33px, -95px, 750px);}}
@-webkit-keyframes Salima311 {100% {opacity: 1; -webkit-transform: translate3d(-40px, -92px, 750px);}}
@-webkit-keyframes Salima312 {100% {opacity: 1; -webkit-transform: translate3d(37px, -93px, 750px);}}
@-webkit-keyframes Salima41 {100% {opacity: 1; -webkit-transform: translate3d(-45px, -90px, 750px);}}
@-webkit-keyframes Salima42 {100% {opacity: 1; -webkit-transform: translate3d(-90px, 45px, 750px);}}
@-webkit-keyframes Salima43 {100% {opacity: 1; -webkit-transform: translate3d(79px, 60px, 750px);}}
@-webkit-keyframes Salima44 {100% {opacity: 1; -webkit-transform: translate3d(2px, -100px, 750px);}}
@-webkit-keyframes Salima45 {100% {opacity: 1; -webkit-transform: translate3d(13px, 99px, 750px);}}
@-webkit-keyframes Salima46 {100% {opacity: 1; -webkit-transform: translate3d(43px, -91px, 750px);}}
@-webkit-keyframes Salima47 {100% {opacity: 1; -webkit-transform: translate3d(-62px, -79px, 750px);}}
@-webkit-keyframes Salima48 {100% {opacity: 1; -webkit-transform: translate3d(-8px, 99px, 750px);}}
@-webkit-keyframes Salima49 {100% {opacity: 1; -webkit-transform: translate3d(53px, 84px, 750px);}}
@-webkit-keyframes Salima410 {100% {opacity: 1; -webkit-transform: translate3d(-79px, 62px, 750px);}}
@-webkit-keyframes Salima411 {100% {opacity: 1; -webkit-transform: translate3d(74px, 67px, 750px);}}
@-webkit-keyframes Salima412 {100% {opacity: 1; -webkit-transform: translate3d(75px, -66px, 750px);}}
@-webkit-keyframes Salima51 {100% {opacity: 1; -webkit-transform: translate3d(-30px, -96px, 750px);}}
@-webkit-keyframes Salima52 {100% {opacity: 1; -webkit-transform: translate3d(-67px, 74px, 750px);}}
@-webkit-keyframes Salima53 {100% {opacity: 1; -webkit-transform: translate3d(-13px, -100px, 750px);}}
@-webkit-keyframes Salima54 {100% {opacity: 1; -webkit-transform: translate3d(-94px, 36px, 750px);}}
@-webkit-keyframes Salima55 {100% {opacity: 1; -webkit-transform: translate3d(74px, 66px, 750px);}}
@-webkit-keyframes Salima56 {100% {opacity: 1; -webkit-transform: translate3d(0px, -100px, 750px);}}
@-webkit-keyframes Salima57 {100% {opacity: 1; -webkit-transform: translate3d(-68px, -74px, 750px);}}
@-webkit-keyframes Salima58 {100% {opacity: 1; -webkit-transform: translate3d(56px, -83px, 750px);}}
@-webkit-keyframes Salima59 {100% {opacity: 1; -webkit-transform: translate3d(-28px, -97px, 750px);}}
@-webkit-keyframes Salima510 {100% {opacity: 1; -webkit-transform: translate3d(-47px, 88px, 750px);}}
@-webkit-keyframes Salima511 {100% {opacity: 1; -webkit-transform: translate3d(83px, 55px, 750px);}}
@-webkit-keyframes Salima512 {100% {opacity: 1; -webkit-transform: translate3d(85px, -53px, 750px);}}

.matrix .dimensions td.index .boxes div {
  text-align:center;
  padding-top:4px;
}

#settings.matrix .mode {
  font-weight: 700;
  position: relative;
  top: 30px;
  left: -30px;
}

#settings.matrix .index {
  border: 1px solid gray;
  border-radius: 5px;
  background-color: #ddd;
  width: 600px;
  margin: 20px;
  padding: 20px;
}

#settings.matrix .index .editable.title {
  width: 200px;
}

#settings.matrix div.word {
  background-color: #C5C5C5;
  border: 1px solid #A5A5A5;
  border-radius: 5px;
  margin: 0px 50px 5px;
  width: 420px;
}

#settings.matrix div.word span.editable {
  width: 300px;
  margin: 5px;
}

#settings.matrix span.move {
  float: right;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url(../img/move-up.svg) center no-repeat;
  background-size: 25px;
  position: relative;
  top: -60px;
  display: none;
}

#settings.matrix .panel.collapsed span.move {
  display: block;
}

#settings.matrix span.move.down {
  background: url(../img/move-down.svg) center no-repeat;
  background-size: 25px;
}

#settings.matrix span.image-preview {
  width: 250px;
}

#settings.matrix img.image-preview {
  max-height: 50px;
}

#settings .title.couple button {
    padding: 5px;
    margin: 5px;
    min-width: 50px;
    margin-left: 0px;
}

#settings .title.couple button:hover {
  box-shadow:none;
}

#settings .title.couple.inverted button {
    /*background-color: #3F3F3F;*/
}

#reset_pw div.container,
#login_np div.container,
#sign-in div.container,
#sign-up div.container {
    border: 1px solid #58697d;
    width: 370px;
    height: 380px;
    margin: auto;
    border-radius: 5px;
    background-color: #283545;
}

#sign-in div.container,
#sign-up div.container {
    height: 410px;
}

#reset_pw.plain-page div.container,
#login_np.plain-page div.container{
    height: 280px;
    padding-top: 60px;
    margin-top: 200px;
}

#sign-up div.container {
    padding-top: 50px;
    height: 260px;
}

#reset_pw div.container div.upper-part,
#login_np div.container div.upper-part,
#sign-in div.container div.upper-part {
    margin-top: 50px;
}

#reset_pw div.container div.upper-part,
#login_np div.container div.upper-part {
    background-color: #58697d;
    height: 100px;
    border-radius: 0px 0px 5px 5px;
}

#reset_pw div.container input,
#login_np div.container input,
#sign-in div.container input,
#sign-up div.container input {
    width: 245px;
    height: 40px;
    border: 0px;
    border-radius: 2px;
    margin: 8px auto;
    display: block;
    font-size: 15px;
    color: #58697d;
    padding: 0px 10px;
    font-weight: 300;
}

#reset_pw div.container button,
#login_np div.container button,
#sign-in div.container button,
#sign-up div.container button {
    float: none;
    display: block;
    border-radius: 3px;
    margin: auto;
    font-weight: 300;
}

#reset_pw div.container .submit,
#login_np div.container .submit,
#sign-in div.container .submit,
#sign-up div.container .submit {
    background-color: #52bf5e;
    width: 165px;
    margin: 20px auto;
    color: white;   
}

#reset_pw div.container .submit,
#login_np div.container .submit {
    width: 215px;
}

#sign-up div.container .submit {
    width: 180px;
}

#reset_pw div.container .submit:hover,
#login_np div.container .submit:hover,
#sign-in div.container .submit:hover,
#sign-up div.container .submit:hover {
    font-weight: 400;
}

#reset_pw div.container .forget-password,
#login_np div.container .forget-password,
#sign-in div.container .forget-password {
    background-color: transparent;
    margin: 20px auto;
    color: white;
    font-weight: 300;
}

#reset_pw div.container .forget-password:hover,
#login_np div.container .forget-password:hover,
#sign-in div.container .forget-password:hover {
    box-shadow: none;
    text-decoration: underline;
}

#reset_pw div.container .create-account,
#login_np div.container .create-account,
#sign-in div.container .create-account {
    background-color: white;
    color: #58697d;
    width: 180px;
}

#reset_pw div.container .create-account:hover,
#login_np div.container .create-account:hover,
#sign-in div.container .create-account:hover {
    font-weight: 400;
}

#reset_pw div.container div.lower-part span,
#login_np div.container div.lower-part span,
#sign-in div.container div.lower-part span {
    color: white;
    text-align: center;
    display: block;
    font-size: 12px;
    font-weight: 300;
    line-height: 40px;
}

#account-settings .editable {
    width: 200px;
}

#account-settings .fields button {
  float: none;
}

#account-settings .fields .editable {
    width: 200px;
    margin-left: 50px;
}

.mugs ul.mugs-holder {
    width: 880px;
    overflow-x: scroll;
    height: 85px;
    white-space: nowrap;
    padding: 15px 0px;
    display: inline-block;
    background-color: #46556B;
}

.mugs li.mug {
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 5px;
}

li.mug.phab { background: #46556B url(../img/mugs/phab.svg) 80px 80px;}
li.mug.phac { background: #46556B url(../img/mugs/phac.svg) 80px 80px;}
li.mug.phad { background: #46556B url(../img/mugs/phad.svg) 80px 80px;}
li.mug.phaf { background: #46556B url(../img/mugs/phaf.svg) 80px 80px;}
li.mug.phag { background: #46556B url(../img/mugs/phag.svg) 80px 80px;}
li.mug.pheb { background: #46556B url(../img/mugs/pheb.svg) 80px 80px;}
li.mug.phec { background: #46556B url(../img/mugs/phec.svg) 80px 80px;}
li.mug.phed { background: #46556B url(../img/mugs/phed.svg) 80px 80px;}
li.mug.phef { background: #46556B url(../img/mugs/phef.svg) 80px 80px;}
li.mug.pheg { background: #46556B url(../img/mugs/pheg.svg) 80px 80px;}
li.mug.phib { background: #46556B url(../img/mugs/phib.svg) 80px 80px;}
li.mug.phic { background: #46556B url(../img/mugs/phic.svg) 80px 80px;}
li.mug.phid { background: #46556B url(../img/mugs/phid.svg) 80px 80px;}
li.mug.phif { background: #46556B url(../img/mugs/phif.svg) 80px 80px;}
li.mug.phig { background: #46556B url(../img/mugs/phig.svg) 80px 80px;}
li.mug.phob { background: #46556B url(../img/mugs/phob.svg) 80px 80px;}
li.mug.phoc { background: #46556B url(../img/mugs/phoc.svg) 80px 80px;}
li.mug.phod { background: #46556B url(../img/mugs/phod.svg) 80px 80px;}
li.mug.phof { background: #46556B url(../img/mugs/phof.svg) 80px 80px;}
li.mug.phog { background: #46556B url(../img/mugs/phog.svg) 80px 80px;}
li.mug.phub { background: #46556B url(../img/mugs/phub.svg) 80px 80px;}
li.mug.phuc { background: #46556B url(../img/mugs/phuc.svg) 80px 80px;}
li.mug.phud { background: #46556B url(../img/mugs/phud.svg) 80px 80px;}
li.mug.phuf { background: #46556B url(../img/mugs/phuf.svg) 80px 80px;}
li.mug.phug { background: #46556B url(../img/mugs/phug.svg) 80px 80px;}
li.mug.pkab { background: #46556B url(../img/mugs/pkab.svg) 80px 80px;}
li.mug.pkac { background: #46556B url(../img/mugs/pkac.svg) 80px 80px;}
li.mug.pkad { background: #46556B url(../img/mugs/pkad.svg) 80px 80px;}
li.mug.pkaf { background: #46556B url(../img/mugs/pkaf.svg) 80px 80px;}
li.mug.pkag { background: #46556B url(../img/mugs/pkag.svg) 80px 80px;}
li.mug.pkeb { background: #46556B url(../img/mugs/pkeb.svg) 80px 80px;}
li.mug.pkec { background: #46556B url(../img/mugs/pkec.svg) 80px 80px;}
li.mug.pked { background: #46556B url(../img/mugs/pked.svg) 80px 80px;}
li.mug.pkef { background: #46556B url(../img/mugs/pkef.svg) 80px 80px;}
li.mug.pkeg { background: #46556B url(../img/mugs/pkeg.svg) 80px 80px;}
li.mug.pkib { background: #46556B url(../img/mugs/pkib.svg) 80px 80px;}
li.mug.pkic { background: #46556B url(../img/mugs/pkic.svg) 80px 80px;}
li.mug.pkid { background: #46556B url(../img/mugs/pkid.svg) 80px 80px;}
li.mug.pkif { background: #46556B url(../img/mugs/pkif.svg) 80px 80px;}
li.mug.pkig { background: #46556B url(../img/mugs/pkig.svg) 80px 80px;}
li.mug.pkob { background: #46556B url(../img/mugs/pkob.svg) 80px 80px;}
li.mug.pkoc { background: #46556B url(../img/mugs/pkoc.svg) 80px 80px;}
li.mug.pkod { background: #46556B url(../img/mugs/pkod.svg) 80px 80px;}
li.mug.pkof { background: #46556B url(../img/mugs/pkof.svg) 80px 80px;}
li.mug.pkog { background: #46556B url(../img/mugs/pkog.svg) 80px 80px;}
li.mug.pkub { background: #46556B url(../img/mugs/pkub.svg) 80px 80px;}
li.mug.pkuc { background: #46556B url(../img/mugs/pkuc.svg) 80px 80px;}
li.mug.pkud { background: #46556B url(../img/mugs/pkud.svg) 80px 80px;}
li.mug.pkuf { background: #46556B url(../img/mugs/pkuf.svg) 80px 80px;}
li.mug.pkug { background: #46556B url(../img/mugs/pkug.svg) 80px 80px;}
li.mug.plab { background: #46556B url(../img/mugs/plab.svg) 80px 80px;}
li.mug.plac { background: #46556B url(../img/mugs/plac.svg) 80px 80px;}
li.mug.plad { background: #46556B url(../img/mugs/plad.svg) 80px 80px;}
li.mug.plaf { background: #46556B url(../img/mugs/plaf.svg) 80px 80px;}
li.mug.plag { background: #46556B url(../img/mugs/plag.svg) 80px 80px;}
li.mug.pleb { background: #46556B url(../img/mugs/pleb.svg) 80px 80px;}
li.mug.plec { background: #46556B url(../img/mugs/plec.svg) 80px 80px;}
li.mug.pled { background: #46556B url(../img/mugs/pled.svg) 80px 80px;}
li.mug.plef { background: #46556B url(../img/mugs/plef.svg) 80px 80px;}
li.mug.pleg { background: #46556B url(../img/mugs/pleg.svg) 80px 80px;}
li.mug.plib { background: #46556B url(../img/mugs/plib.svg) 80px 80px;}
li.mug.plic { background: #46556B url(../img/mugs/plic.svg) 80px 80px;}
li.mug.plid { background: #46556B url(../img/mugs/plid.svg) 80px 80px;}
li.mug.plif { background: #46556B url(../img/mugs/plif.svg) 80px 80px;}
li.mug.plig { background: #46556B url(../img/mugs/plig.svg) 80px 80px;}
li.mug.plob { background: #46556B url(../img/mugs/plob.svg) 80px 80px;}
li.mug.ploc { background: #46556B url(../img/mugs/ploc.svg) 80px 80px;}
li.mug.plod { background: #46556B url(../img/mugs/plod.svg) 80px 80px;}
li.mug.plof { background: #46556B url(../img/mugs/plof.svg) 80px 80px;}
li.mug.plog { background: #46556B url(../img/mugs/plog.svg) 80px 80px;}
li.mug.plub { background: #46556B url(../img/mugs/plub.svg) 80px 80px;}
li.mug.pluc { background: #46556B url(../img/mugs/pluc.svg) 80px 80px;}
li.mug.plud { background: #46556B url(../img/mugs/plud.svg) 80px 80px;}
li.mug.pluf { background: #46556B url(../img/mugs/pluf.svg) 80px 80px;}
li.mug.plug { background: #46556B url(../img/mugs/plug.svg) 80px 80px;}
li.mug.pmab { background: #46556B url(../img/mugs/pmab.svg) 80px 80px;}
li.mug.pmac { background: #46556B url(../img/mugs/pmac.svg) 80px 80px;}
li.mug.pmad { background: #46556B url(../img/mugs/pmad.svg) 80px 80px;}
li.mug.pmaf { background: #46556B url(../img/mugs/pmaf.svg) 80px 80px;}
li.mug.pmag { background: #46556B url(../img/mugs/pmag.svg) 80px 80px;}
li.mug.pmeb { background: #46556B url(../img/mugs/pmeb.svg) 80px 80px;}
li.mug.pmec { background: #46556B url(../img/mugs/pmec.svg) 80px 80px;}
li.mug.pmed { background: #46556B url(../img/mugs/pmed.svg) 80px 80px;}
li.mug.pmef { background: #46556B url(../img/mugs/pmef.svg) 80px 80px;}
li.mug.pmeg { background: #46556B url(../img/mugs/pmeg.svg) 80px 80px;}
li.mug.pmib { background: #46556B url(../img/mugs/pmib.svg) 80px 80px;}
li.mug.pmic { background: #46556B url(../img/mugs/pmic.svg) 80px 80px;}
li.mug.pmid { background: #46556B url(../img/mugs/pmid.svg) 80px 80px;}
li.mug.pmif { background: #46556B url(../img/mugs/pmif.svg) 80px 80px;}
li.mug.pmig { background: #46556B url(../img/mugs/pmig.svg) 80px 80px;}
li.mug.pmob { background: #46556B url(../img/mugs/pmob.svg) 80px 80px;}
li.mug.pmoc { background: #46556B url(../img/mugs/pmoc.svg) 80px 80px;}
li.mug.pmod { background: #46556B url(../img/mugs/pmod.svg) 80px 80px;}
li.mug.pmof { background: #46556B url(../img/mugs/pmof.svg) 80px 80px;}
li.mug.pmog { background: #46556B url(../img/mugs/pmog.svg) 80px 80px;}
li.mug.pmub { background: #46556B url(../img/mugs/pmub.svg) 80px 80px;}
li.mug.pmuc { background: #46556B url(../img/mugs/pmuc.svg) 80px 80px;}
li.mug.pmud { background: #46556B url(../img/mugs/pmud.svg) 80px 80px;}
li.mug.pmuf { background: #46556B url(../img/mugs/pmuf.svg) 80px 80px;}
li.mug.pmug { background: #46556B url(../img/mugs/pmug.svg) 80px 80px;}
li.mug.pnab { background: #46556B url(../img/mugs/pnab.svg) 80px 80px;}
li.mug.pnac { background: #46556B url(../img/mugs/pnac.svg) 80px 80px;}
li.mug.pnad { background: #46556B url(../img/mugs/pnad.svg) 80px 80px;}
li.mug.pnaf { background: #46556B url(../img/mugs/pnaf.svg) 80px 80px;}
li.mug.pnag { background: #46556B url(../img/mugs/pnag.svg) 80px 80px;}
li.mug.pneb { background: #46556B url(../img/mugs/pneb.svg) 80px 80px;}
li.mug.pnec { background: #46556B url(../img/mugs/pnec.svg) 80px 80px;}
li.mug.pned { background: #46556B url(../img/mugs/pned.svg) 80px 80px;}
li.mug.pnef { background: #46556B url(../img/mugs/pnef.svg) 80px 80px;}
li.mug.pneg { background: #46556B url(../img/mugs/pneg.svg) 80px 80px;}
li.mug.pnib { background: #46556B url(../img/mugs/pnib.svg) 80px 80px;}
li.mug.pnic { background: #46556B url(../img/mugs/pnic.svg) 80px 80px;}
li.mug.pnid { background: #46556B url(../img/mugs/pnid.svg) 80px 80px;}
li.mug.pnif { background: #46556B url(../img/mugs/pnif.svg) 80px 80px;}
li.mug.pnig { background: #46556B url(../img/mugs/pnig.svg) 80px 80px;}
li.mug.pnob { background: #46556B url(../img/mugs/pnob.svg) 80px 80px;}
li.mug.pnoc { background: #46556B url(../img/mugs/pnoc.svg) 80px 80px;}
li.mug.pnod { background: #46556B url(../img/mugs/pnod.svg) 80px 80px;}
li.mug.pnof { background: #46556B url(../img/mugs/pnof.svg) 80px 80px;}
li.mug.pnog { background: #46556B url(../img/mugs/pnog.svg) 80px 80px;}
li.mug.pnub { background: #46556B url(../img/mugs/pnub.svg) 80px 80px;}
li.mug.pnuc { background: #46556B url(../img/mugs/pnuc.svg) 80px 80px;}
li.mug.pnud { background: #46556B url(../img/mugs/pnud.svg) 80px 80px;}
li.mug.pnuf { background: #46556B url(../img/mugs/pnuf.svg) 80px 80px;}
li.mug.pnug { background: #46556B url(../img/mugs/pnug.svg) 80px 80px;}
li.mug.qhab { background: #46556B url(../img/mugs/qhab.svg) 80px 80px;}
li.mug.qhac { background: #46556B url(../img/mugs/qhac.svg) 80px 80px;}
li.mug.qhad { background: #46556B url(../img/mugs/qhad.svg) 80px 80px;}
li.mug.qhaf { background: #46556B url(../img/mugs/qhaf.svg) 80px 80px;}
li.mug.qhag { background: #46556B url(../img/mugs/qhag.svg) 80px 80px;}
li.mug.qheb { background: #46556B url(../img/mugs/qheb.svg) 80px 80px;}
li.mug.qhec { background: #46556B url(../img/mugs/qhec.svg) 80px 80px;}
li.mug.qhed { background: #46556B url(../img/mugs/qhed.svg) 80px 80px;}
li.mug.qhef { background: #46556B url(../img/mugs/qhef.svg) 80px 80px;}
li.mug.qheg { background: #46556B url(../img/mugs/qheg.svg) 80px 80px;}
li.mug.qhib { background: #46556B url(../img/mugs/qhib.svg) 80px 80px;}
li.mug.qhic { background: #46556B url(../img/mugs/qhic.svg) 80px 80px;}
li.mug.qhid { background: #46556B url(../img/mugs/qhid.svg) 80px 80px;}
li.mug.qhif { background: #46556B url(../img/mugs/qhif.svg) 80px 80px;}
li.mug.qhig { background: #46556B url(../img/mugs/qhig.svg) 80px 80px;}
li.mug.qhob { background: #46556B url(../img/mugs/qhob.svg) 80px 80px;}
li.mug.qhoc { background: #46556B url(../img/mugs/qhoc.svg) 80px 80px;}
li.mug.qhod { background: #46556B url(../img/mugs/qhod.svg) 80px 80px;}
li.mug.qhof { background: #46556B url(../img/mugs/qhof.svg) 80px 80px;}
li.mug.qhog { background: #46556B url(../img/mugs/qhog.svg) 80px 80px;}
li.mug.qhub { background: #46556B url(../img/mugs/qhub.svg) 80px 80px;}
li.mug.qhuc { background: #46556B url(../img/mugs/qhuc.svg) 80px 80px;}
li.mug.qhud { background: #46556B url(../img/mugs/qhud.svg) 80px 80px;}
li.mug.qhuf { background: #46556B url(../img/mugs/qhuf.svg) 80px 80px;}
li.mug.qhug { background: #46556B url(../img/mugs/qhug.svg) 80px 80px;}
li.mug.qkab { background: #46556B url(../img/mugs/qkab.svg) 80px 80px;}
li.mug.qkac { background: #46556B url(../img/mugs/qkac.svg) 80px 80px;}
li.mug.qkad { background: #46556B url(../img/mugs/qkad.svg) 80px 80px;}
li.mug.qkaf { background: #46556B url(../img/mugs/qkaf.svg) 80px 80px;}
li.mug.qkag { background: #46556B url(../img/mugs/qkag.svg) 80px 80px;}
li.mug.qkeb { background: #46556B url(../img/mugs/qkeb.svg) 80px 80px;}
li.mug.qkec { background: #46556B url(../img/mugs/qkec.svg) 80px 80px;}
li.mug.qked { background: #46556B url(../img/mugs/qked.svg) 80px 80px;}
li.mug.qkef { background: #46556B url(../img/mugs/qkef.svg) 80px 80px;}
li.mug.qkeg { background: #46556B url(../img/mugs/qkeg.svg) 80px 80px;}
li.mug.qkib { background: #46556B url(../img/mugs/qkib.svg) 80px 80px;}
li.mug.qkic { background: #46556B url(../img/mugs/qkic.svg) 80px 80px;}
li.mug.qkid { background: #46556B url(../img/mugs/qkid.svg) 80px 80px;}
li.mug.qkif { background: #46556B url(../img/mugs/qkif.svg) 80px 80px;}
li.mug.qkig { background: #46556B url(../img/mugs/qkig.svg) 80px 80px;}
li.mug.qkob { background: #46556B url(../img/mugs/qkob.svg) 80px 80px;}
li.mug.qkoc { background: #46556B url(../img/mugs/qkoc.svg) 80px 80px;}
li.mug.qkod { background: #46556B url(../img/mugs/qkod.svg) 80px 80px;}
li.mug.qkof { background: #46556B url(../img/mugs/qkof.svg) 80px 80px;}
li.mug.qkog { background: #46556B url(../img/mugs/qkog.svg) 80px 80px;}
li.mug.qkub { background: #46556B url(../img/mugs/qkub.svg) 80px 80px;}
li.mug.qkuc { background: #46556B url(../img/mugs/qkuc.svg) 80px 80px;}
li.mug.qkud { background: #46556B url(../img/mugs/qkud.svg) 80px 80px;}
li.mug.qkuf { background: #46556B url(../img/mugs/qkuf.svg) 80px 80px;}
li.mug.qkug { background: #46556B url(../img/mugs/qkug.svg) 80px 80px;}
li.mug.qlab { background: #46556B url(../img/mugs/qlab.svg) 80px 80px;}
li.mug.qlac { background: #46556B url(../img/mugs/qlac.svg) 80px 80px;}
li.mug.qlad { background: #46556B url(../img/mugs/qlad.svg) 80px 80px;}
li.mug.qlaf { background: #46556B url(../img/mugs/qlaf.svg) 80px 80px;}
li.mug.qlag { background: #46556B url(../img/mugs/qlag.svg) 80px 80px;}
li.mug.qleb { background: #46556B url(../img/mugs/qleb.svg) 80px 80px;}
li.mug.qlec { background: #46556B url(../img/mugs/qlec.svg) 80px 80px;}
li.mug.qled { background: #46556B url(../img/mugs/qled.svg) 80px 80px;}
li.mug.qlef { background: #46556B url(../img/mugs/qlef.svg) 80px 80px;}
li.mug.qleg { background: #46556B url(../img/mugs/qleg.svg) 80px 80px;}
li.mug.qlib { background: #46556B url(../img/mugs/qlib.svg) 80px 80px;}
li.mug.qlic { background: #46556B url(../img/mugs/qlic.svg) 80px 80px;}
li.mug.qlid { background: #46556B url(../img/mugs/qlid.svg) 80px 80px;}
li.mug.qlif { background: #46556B url(../img/mugs/qlif.svg) 80px 80px;}
li.mug.qlig { background: #46556B url(../img/mugs/qlig.svg) 80px 80px;}
li.mug.qlob { background: #46556B url(../img/mugs/qlob.svg) 80px 80px;}
li.mug.qloc { background: #46556B url(../img/mugs/qloc.svg) 80px 80px;}
li.mug.qlod { background: #46556B url(../img/mugs/qlod.svg) 80px 80px;}
li.mug.qlof { background: #46556B url(../img/mugs/qlof.svg) 80px 80px;}
li.mug.qlog { background: #46556B url(../img/mugs/qlog.svg) 80px 80px;}
li.mug.qlub { background: #46556B url(../img/mugs/qlub.svg) 80px 80px;}
li.mug.qluc { background: #46556B url(../img/mugs/qluc.svg) 80px 80px;}
li.mug.qlud { background: #46556B url(../img/mugs/qlud.svg) 80px 80px;}
li.mug.qluf { background: #46556B url(../img/mugs/qluf.svg) 80px 80px;}
li.mug.qlug { background: #46556B url(../img/mugs/qlug.svg) 80px 80px;}
li.mug.qmab { background: #46556B url(../img/mugs/qmab.svg) 80px 80px;}
li.mug.qmac { background: #46556B url(../img/mugs/qmac.svg) 80px 80px;}
li.mug.qmad { background: #46556B url(../img/mugs/qmad.svg) 80px 80px;}
li.mug.qmaf { background: #46556B url(../img/mugs/qmaf.svg) 80px 80px;}
li.mug.qmag { background: #46556B url(../img/mugs/qmag.svg) 80px 80px;}
li.mug.qmeb { background: #46556B url(../img/mugs/qmeb.svg) 80px 80px;}
li.mug.qmec { background: #46556B url(../img/mugs/qmec.svg) 80px 80px;}
li.mug.qmed { background: #46556B url(../img/mugs/qmed.svg) 80px 80px;}
li.mug.qmef { background: #46556B url(../img/mugs/qmef.svg) 80px 80px;}
li.mug.qmeg { background: #46556B url(../img/mugs/qmeg.svg) 80px 80px;}
li.mug.qmib { background: #46556B url(../img/mugs/qmib.svg) 80px 80px;}
li.mug.qmic { background: #46556B url(../img/mugs/qmic.svg) 80px 80px;}
li.mug.qmid { background: #46556B url(../img/mugs/qmid.svg) 80px 80px;}
li.mug.qmif { background: #46556B url(../img/mugs/qmif.svg) 80px 80px;}
li.mug.qmig { background: #46556B url(../img/mugs/qmig.svg) 80px 80px;}
li.mug.qmob { background: #46556B url(../img/mugs/qmob.svg) 80px 80px;}
li.mug.qmoc { background: #46556B url(../img/mugs/qmoc.svg) 80px 80px;}
li.mug.qmod { background: #46556B url(../img/mugs/qmod.svg) 80px 80px;}
li.mug.qmof { background: #46556B url(../img/mugs/qmof.svg) 80px 80px;}
li.mug.qmog { background: #46556B url(../img/mugs/qmog.svg) 80px 80px;}
li.mug.qmub { background: #46556B url(../img/mugs/qmub.svg) 80px 80px;}
li.mug.qmuc { background: #46556B url(../img/mugs/qmuc.svg) 80px 80px;}
li.mug.qmud { background: #46556B url(../img/mugs/qmud.svg) 80px 80px;}
li.mug.qmuf { background: #46556B url(../img/mugs/qmuf.svg) 80px 80px;}
li.mug.qmug { background: #46556B url(../img/mugs/qmug.svg) 80px 80px;}
li.mug.qnab { background: #46556B url(../img/mugs/qnab.svg) 80px 80px;}
li.mug.qnac { background: #46556B url(../img/mugs/qnac.svg) 80px 80px;}
li.mug.qnad { background: #46556B url(../img/mugs/qnad.svg) 80px 80px;}
li.mug.qnaf { background: #46556B url(../img/mugs/qnaf.svg) 80px 80px;}
li.mug.qnag { background: #46556B url(../img/mugs/qnag.svg) 80px 80px;}
li.mug.qneb { background: #46556B url(../img/mugs/qneb.svg) 80px 80px;}
li.mug.qnec { background: #46556B url(../img/mugs/qnec.svg) 80px 80px;}
li.mug.qned { background: #46556B url(../img/mugs/qned.svg) 80px 80px;}
li.mug.qnef { background: #46556B url(../img/mugs/qnef.svg) 80px 80px;}
li.mug.qneg { background: #46556B url(../img/mugs/qneg.svg) 80px 80px;}
li.mug.qnib { background: #46556B url(../img/mugs/qnib.svg) 80px 80px;}
li.mug.qnic { background: #46556B url(../img/mugs/qnic.svg) 80px 80px;}
li.mug.qnid { background: #46556B url(../img/mugs/qnid.svg) 80px 80px;}
li.mug.qnif { background: #46556B url(../img/mugs/qnif.svg) 80px 80px;}
li.mug.qnig { background: #46556B url(../img/mugs/qnig.svg) 80px 80px;}
li.mug.qnob { background: #46556B url(../img/mugs/qnob.svg) 80px 80px;}
li.mug.qnoc { background: #46556B url(../img/mugs/qnoc.svg) 80px 80px;}
li.mug.qnod { background: #46556B url(../img/mugs/qnod.svg) 80px 80px;}
li.mug.qnof { background: #46556B url(../img/mugs/qnof.svg) 80px 80px;}
li.mug.qnog { background: #46556B url(../img/mugs/qnog.svg) 80px 80px;}
li.mug.qnub { background: #46556B url(../img/mugs/qnub.svg) 80px 80px;}
li.mug.qnuc { background: #46556B url(../img/mugs/qnuc.svg) 80px 80px;}
li.mug.qnud { background: #46556B url(../img/mugs/qnud.svg) 80px 80px;}
li.mug.qnuf { background: #46556B url(../img/mugs/qnuf.svg) 80px 80px;}
li.mug.qnug { background: #46556B url(../img/mugs/qnug.svg) 80px 80px;}
li.mug.rhab { background: #46556B url(../img/mugs/rhab.svg) 80px 80px;}
li.mug.rhac { background: #46556B url(../img/mugs/rhac.svg) 80px 80px;}
li.mug.rhad { background: #46556B url(../img/mugs/rhad.svg) 80px 80px;}
li.mug.rhaf { background: #46556B url(../img/mugs/rhaf.svg) 80px 80px;}
li.mug.rhag { background: #46556B url(../img/mugs/rhag.svg) 80px 80px;}
li.mug.rheb { background: #46556B url(../img/mugs/rheb.svg) 80px 80px;}
li.mug.rhec { background: #46556B url(../img/mugs/rhec.svg) 80px 80px;}
li.mug.rhed { background: #46556B url(../img/mugs/rhed.svg) 80px 80px;}
li.mug.rhef { background: #46556B url(../img/mugs/rhef.svg) 80px 80px;}
li.mug.rheg { background: #46556B url(../img/mugs/rheg.svg) 80px 80px;}
li.mug.rhib { background: #46556B url(../img/mugs/rhib.svg) 80px 80px;}
li.mug.rhic { background: #46556B url(../img/mugs/rhic.svg) 80px 80px;}
li.mug.rhid { background: #46556B url(../img/mugs/rhid.svg) 80px 80px;}
li.mug.rhif { background: #46556B url(../img/mugs/rhif.svg) 80px 80px;}
li.mug.rhig { background: #46556B url(../img/mugs/rhig.svg) 80px 80px;}
li.mug.rhob { background: #46556B url(../img/mugs/rhob.svg) 80px 80px;}
li.mug.rhoc { background: #46556B url(../img/mugs/rhoc.svg) 80px 80px;}
li.mug.rhod { background: #46556B url(../img/mugs/rhod.svg) 80px 80px;}
li.mug.rhof { background: #46556B url(../img/mugs/rhof.svg) 80px 80px;}
li.mug.rhog { background: #46556B url(../img/mugs/rhog.svg) 80px 80px;}
li.mug.rhub { background: #46556B url(../img/mugs/rhub.svg) 80px 80px;}
li.mug.rhuc { background: #46556B url(../img/mugs/rhuc.svg) 80px 80px;}
li.mug.rhud { background: #46556B url(../img/mugs/rhud.svg) 80px 80px;}
li.mug.rhuf { background: #46556B url(../img/mugs/rhuf.svg) 80px 80px;}
li.mug.rhug { background: #46556B url(../img/mugs/rhug.svg) 80px 80px;}
li.mug.rkab { background: #46556B url(../img/mugs/rkab.svg) 80px 80px;}
li.mug.rkac { background: #46556B url(../img/mugs/rkac.svg) 80px 80px;}
li.mug.rkad { background: #46556B url(../img/mugs/rkad.svg) 80px 80px;}
li.mug.rkaf { background: #46556B url(../img/mugs/rkaf.svg) 80px 80px;}
li.mug.rkag { background: #46556B url(../img/mugs/rkag.svg) 80px 80px;}
li.mug.rkeb { background: #46556B url(../img/mugs/rkeb.svg) 80px 80px;}
li.mug.rkec { background: #46556B url(../img/mugs/rkec.svg) 80px 80px;}
li.mug.rked { background: #46556B url(../img/mugs/rked.svg) 80px 80px;}
li.mug.rkef { background: #46556B url(../img/mugs/rkef.svg) 80px 80px;}
li.mug.rkeg { background: #46556B url(../img/mugs/rkeg.svg) 80px 80px;}
li.mug.rkib { background: #46556B url(../img/mugs/rkib.svg) 80px 80px;}
li.mug.rkic { background: #46556B url(../img/mugs/rkic.svg) 80px 80px;}
li.mug.rkid { background: #46556B url(../img/mugs/rkid.svg) 80px 80px;}
li.mug.rkif { background: #46556B url(../img/mugs/rkif.svg) 80px 80px;}
li.mug.rkig { background: #46556B url(../img/mugs/rkig.svg) 80px 80px;}
li.mug.rkob { background: #46556B url(../img/mugs/rkob.svg) 80px 80px;}
li.mug.rkoc { background: #46556B url(../img/mugs/rkoc.svg) 80px 80px;}
li.mug.rkod { background: #46556B url(../img/mugs/rkod.svg) 80px 80px;}
li.mug.rkof { background: #46556B url(../img/mugs/rkof.svg) 80px 80px;}
li.mug.rkog { background: #46556B url(../img/mugs/rkog.svg) 80px 80px;}
li.mug.rkub { background: #46556B url(../img/mugs/rkub.svg) 80px 80px;}
li.mug.rkuc { background: #46556B url(../img/mugs/rkuc.svg) 80px 80px;}
li.mug.rkud { background: #46556B url(../img/mugs/rkud.svg) 80px 80px;}
li.mug.rkuf { background: #46556B url(../img/mugs/rkuf.svg) 80px 80px;}
li.mug.rkug { background: #46556B url(../img/mugs/rkug.svg) 80px 80px;}
li.mug.rlab { background: #46556B url(../img/mugs/rlab.svg) 80px 80px;}
li.mug.rlac { background: #46556B url(../img/mugs/rlac.svg) 80px 80px;}
li.mug.rlad { background: #46556B url(../img/mugs/rlad.svg) 80px 80px;}
li.mug.rlaf { background: #46556B url(../img/mugs/rlaf.svg) 80px 80px;}
li.mug.rlag { background: #46556B url(../img/mugs/rlag.svg) 80px 80px;}
li.mug.rleb { background: #46556B url(../img/mugs/rleb.svg) 80px 80px;}
li.mug.rlec { background: #46556B url(../img/mugs/rlec.svg) 80px 80px;}
li.mug.rled { background: #46556B url(../img/mugs/rled.svg) 80px 80px;}
li.mug.rlef { background: #46556B url(../img/mugs/rlef.svg) 80px 80px;}
li.mug.rleg { background: #46556B url(../img/mugs/rleg.svg) 80px 80px;}
li.mug.rlib { background: #46556B url(../img/mugs/rlib.svg) 80px 80px;}
li.mug.rlic { background: #46556B url(../img/mugs/rlic.svg) 80px 80px;}
li.mug.rlid { background: #46556B url(../img/mugs/rlid.svg) 80px 80px;}
li.mug.rlif { background: #46556B url(../img/mugs/rlif.svg) 80px 80px;}
li.mug.rlig { background: #46556B url(../img/mugs/rlig.svg) 80px 80px;}
li.mug.rlob { background: #46556B url(../img/mugs/rlob.svg) 80px 80px;}
li.mug.rloc { background: #46556B url(../img/mugs/rloc.svg) 80px 80px;}
li.mug.rlod { background: #46556B url(../img/mugs/rlod.svg) 80px 80px;}
li.mug.rlof { background: #46556B url(../img/mugs/rlof.svg) 80px 80px;}
li.mug.rlog { background: #46556B url(../img/mugs/rlog.svg) 80px 80px;}
li.mug.rlub { background: #46556B url(../img/mugs/rlub.svg) 80px 80px;}
li.mug.rluc { background: #46556B url(../img/mugs/rluc.svg) 80px 80px;}
li.mug.rlud { background: #46556B url(../img/mugs/rlud.svg) 80px 80px;}
li.mug.rluf { background: #46556B url(../img/mugs/rluf.svg) 80px 80px;}
li.mug.rlug { background: #46556B url(../img/mugs/rlug.svg) 80px 80px;}
li.mug.rmab { background: #46556B url(../img/mugs/rmab.svg) 80px 80px;}
li.mug.rmac { background: #46556B url(../img/mugs/rmac.svg) 80px 80px;}
li.mug.rmad { background: #46556B url(../img/mugs/rmad.svg) 80px 80px;}
li.mug.rmaf { background: #46556B url(../img/mugs/rmaf.svg) 80px 80px;}
li.mug.rmag { background: #46556B url(../img/mugs/rmag.svg) 80px 80px;}
li.mug.rmeb { background: #46556B url(../img/mugs/rmeb.svg) 80px 80px;}
li.mug.rmec { background: #46556B url(../img/mugs/rmec.svg) 80px 80px;}
li.mug.rmed { background: #46556B url(../img/mugs/rmed.svg) 80px 80px;}
li.mug.rmef { background: #46556B url(../img/mugs/rmef.svg) 80px 80px;}
li.mug.rmeg { background: #46556B url(../img/mugs/rmeg.svg) 80px 80px;}
li.mug.rmib { background: #46556B url(../img/mugs/rmib.svg) 80px 80px;}
li.mug.rmic { background: #46556B url(../img/mugs/rmic.svg) 80px 80px;}
li.mug.rmid { background: #46556B url(../img/mugs/rmid.svg) 80px 80px;}
li.mug.rmif { background: #46556B url(../img/mugs/rmif.svg) 80px 80px;}
li.mug.rmig { background: #46556B url(../img/mugs/rmig.svg) 80px 80px;}
li.mug.rmob { background: #46556B url(../img/mugs/rmob.svg) 80px 80px;}
li.mug.rmoc { background: #46556B url(../img/mugs/rmoc.svg) 80px 80px;}
li.mug.rmod { background: #46556B url(../img/mugs/rmod.svg) 80px 80px;}
li.mug.rmof { background: #46556B url(../img/mugs/rmof.svg) 80px 80px;}
li.mug.rmog { background: #46556B url(../img/mugs/rmog.svg) 80px 80px;}
li.mug.rmub { background: #46556B url(../img/mugs/rmub.svg) 80px 80px;}
li.mug.rmuc { background: #46556B url(../img/mugs/rmuc.svg) 80px 80px;}
li.mug.rmud { background: #46556B url(../img/mugs/rmud.svg) 80px 80px;}
li.mug.rmuf { background: #46556B url(../img/mugs/rmuf.svg) 80px 80px;}
li.mug.rmug { background: #46556B url(../img/mugs/rmug.svg) 80px 80px;}
li.mug.rnab { background: #46556B url(../img/mugs/rnab.svg) 80px 80px;}
li.mug.rnac { background: #46556B url(../img/mugs/rnac.svg) 80px 80px;}
li.mug.rnad { background: #46556B url(../img/mugs/rnad.svg) 80px 80px;}
li.mug.rnaf { background: #46556B url(../img/mugs/rnaf.svg) 80px 80px;}
li.mug.rnag { background: #46556B url(../img/mugs/rnag.svg) 80px 80px;}
li.mug.rneb { background: #46556B url(../img/mugs/rneb.svg) 80px 80px;}
li.mug.rnec { background: #46556B url(../img/mugs/rnec.svg) 80px 80px;}
li.mug.rned { background: #46556B url(../img/mugs/rned.svg) 80px 80px;}
li.mug.rnef { background: #46556B url(../img/mugs/rnef.svg) 80px 80px;}
li.mug.rneg { background: #46556B url(../img/mugs/rneg.svg) 80px 80px;}
li.mug.rnib { background: #46556B url(../img/mugs/rnib.svg) 80px 80px;}
li.mug.rnic { background: #46556B url(../img/mugs/rnic.svg) 80px 80px;}
li.mug.rnid { background: #46556B url(../img/mugs/rnid.svg) 80px 80px;}
li.mug.rnif { background: #46556B url(../img/mugs/rnif.svg) 80px 80px;}
li.mug.rnig { background: #46556B url(../img/mugs/rnig.svg) 80px 80px;}
li.mug.rnob { background: #46556B url(../img/mugs/rnob.svg) 80px 80px;}
li.mug.rnoc { background: #46556B url(../img/mugs/rnoc.svg) 80px 80px;}
li.mug.rnod { background: #46556B url(../img/mugs/rnod.svg) 80px 80px;}
li.mug.rnof { background: #46556B url(../img/mugs/rnof.svg) 80px 80px;}
li.mug.rnog { background: #46556B url(../img/mugs/rnog.svg) 80px 80px;}
li.mug.rnub { background: #46556B url(../img/mugs/rnub.svg) 80px 80px;}
li.mug.rnuc { background: #46556B url(../img/mugs/rnuc.svg) 80px 80px;}
li.mug.rnud { background: #46556B url(../img/mugs/rnud.svg) 80px 80px;}
li.mug.rnuf { background: #46556B url(../img/mugs/rnuf.svg) 80px 80px;}
li.mug.rnug { background: #46556B url(../img/mugs/rnug.svg) 80px 80px;}
li.mug.shab { background: #46556B url(../img/mugs/shab.svg) 80px 80px;}
li.mug.shac { background: #46556B url(../img/mugs/shac.svg) 80px 80px;}
li.mug.shad { background: #46556B url(../img/mugs/shad.svg) 80px 80px;}
li.mug.shaf { background: #46556B url(../img/mugs/shaf.svg) 80px 80px;}
li.mug.shag { background: #46556B url(../img/mugs/shag.svg) 80px 80px;}
li.mug.sheb { background: #46556B url(../img/mugs/sheb.svg) 80px 80px;}
li.mug.shec { background: #46556B url(../img/mugs/shec.svg) 80px 80px;}
li.mug.shed { background: #46556B url(../img/mugs/shed.svg) 80px 80px;}
li.mug.shef { background: #46556B url(../img/mugs/shef.svg) 80px 80px;}
li.mug.sheg { background: #46556B url(../img/mugs/sheg.svg) 80px 80px;}
li.mug.shib { background: #46556B url(../img/mugs/shib.svg) 80px 80px;}
li.mug.shic { background: #46556B url(../img/mugs/shic.svg) 80px 80px;}
li.mug.shid { background: #46556B url(../img/mugs/shid.svg) 80px 80px;}
li.mug.shif { background: #46556B url(../img/mugs/shif.svg) 80px 80px;}
li.mug.shig { background: #46556B url(../img/mugs/shig.svg) 80px 80px;}
li.mug.shob { background: #46556B url(../img/mugs/shob.svg) 80px 80px;}
li.mug.shoc { background: #46556B url(../img/mugs/shoc.svg) 80px 80px;}
li.mug.shod { background: #46556B url(../img/mugs/shod.svg) 80px 80px;}
li.mug.shof { background: #46556B url(../img/mugs/shof.svg) 80px 80px;}
li.mug.shog { background: #46556B url(../img/mugs/shog.svg) 80px 80px;}
li.mug.shub { background: #46556B url(../img/mugs/shub.svg) 80px 80px;}
li.mug.shuc { background: #46556B url(../img/mugs/shuc.svg) 80px 80px;}
li.mug.shud { background: #46556B url(../img/mugs/shud.svg) 80px 80px;}
li.mug.shuf { background: #46556B url(../img/mugs/shuf.svg) 80px 80px;}
li.mug.shug { background: #46556B url(../img/mugs/shug.svg) 80px 80px;}
li.mug.skab { background: #46556B url(../img/mugs/skab.svg) 80px 80px;}
li.mug.skac { background: #46556B url(../img/mugs/skac.svg) 80px 80px;}
li.mug.skad { background: #46556B url(../img/mugs/skad.svg) 80px 80px;}
li.mug.skaf { background: #46556B url(../img/mugs/skaf.svg) 80px 80px;}
li.mug.skag { background: #46556B url(../img/mugs/skag.svg) 80px 80px;}
li.mug.skeb { background: #46556B url(../img/mugs/skeb.svg) 80px 80px;}
li.mug.skec { background: #46556B url(../img/mugs/skec.svg) 80px 80px;}
li.mug.sked { background: #46556B url(../img/mugs/sked.svg) 80px 80px;}
li.mug.skef { background: #46556B url(../img/mugs/skef.svg) 80px 80px;}
li.mug.skeg { background: #46556B url(../img/mugs/skeg.svg) 80px 80px;}
li.mug.skib { background: #46556B url(../img/mugs/skib.svg) 80px 80px;}
li.mug.skic { background: #46556B url(../img/mugs/skic.svg) 80px 80px;}
li.mug.skid { background: #46556B url(../img/mugs/skid.svg) 80px 80px;}
li.mug.skif { background: #46556B url(../img/mugs/skif.svg) 80px 80px;}
li.mug.skig { background: #46556B url(../img/mugs/skig.svg) 80px 80px;}
li.mug.skob { background: #46556B url(../img/mugs/skob.svg) 80px 80px;}
li.mug.skoc { background: #46556B url(../img/mugs/skoc.svg) 80px 80px;}
li.mug.skod { background: #46556B url(../img/mugs/skod.svg) 80px 80px;}
li.mug.skof { background: #46556B url(../img/mugs/skof.svg) 80px 80px;}
li.mug.skog { background: #46556B url(../img/mugs/skog.svg) 80px 80px;}
li.mug.skub { background: #46556B url(../img/mugs/skub.svg) 80px 80px;}
li.mug.skuc { background: #46556B url(../img/mugs/skuc.svg) 80px 80px;}
li.mug.skud { background: #46556B url(../img/mugs/skud.svg) 80px 80px;}
li.mug.skuf { background: #46556B url(../img/mugs/skuf.svg) 80px 80px;}
li.mug.skug { background: #46556B url(../img/mugs/skug.svg) 80px 80px;}
li.mug.slab { background: #46556B url(../img/mugs/slab.svg) 80px 80px;}
li.mug.slac { background: #46556B url(../img/mugs/slac.svg) 80px 80px;}
li.mug.slad { background: #46556B url(../img/mugs/slad.svg) 80px 80px;}
li.mug.slaf { background: #46556B url(../img/mugs/slaf.svg) 80px 80px;}
li.mug.slag { background: #46556B url(../img/mugs/slag.svg) 80px 80px;}
li.mug.sleb { background: #46556B url(../img/mugs/sleb.svg) 80px 80px;}
li.mug.slec { background: #46556B url(../img/mugs/slec.svg) 80px 80px;}
li.mug.sled { background: #46556B url(../img/mugs/sled.svg) 80px 80px;}
li.mug.slef { background: #46556B url(../img/mugs/slef.svg) 80px 80px;}
li.mug.sleg { background: #46556B url(../img/mugs/sleg.svg) 80px 80px;}
li.mug.slib { background: #46556B url(../img/mugs/slib.svg) 80px 80px;}
li.mug.slic { background: #46556B url(../img/mugs/slic.svg) 80px 80px;}
li.mug.slid { background: #46556B url(../img/mugs/slid.svg) 80px 80px;}
li.mug.slif { background: #46556B url(../img/mugs/slif.svg) 80px 80px;}
li.mug.slig { background: #46556B url(../img/mugs/slig.svg) 80px 80px;}
li.mug.slob { background: #46556B url(../img/mugs/slob.svg) 80px 80px;}
li.mug.sloc { background: #46556B url(../img/mugs/sloc.svg) 80px 80px;}
li.mug.slod { background: #46556B url(../img/mugs/slod.svg) 80px 80px;}
li.mug.slof { background: #46556B url(../img/mugs/slof.svg) 80px 80px;}
li.mug.slog { background: #46556B url(../img/mugs/slog.svg) 80px 80px;}
li.mug.slub { background: #46556B url(../img/mugs/slub.svg) 80px 80px;}
li.mug.sluc { background: #46556B url(../img/mugs/sluc.svg) 80px 80px;}
li.mug.slud { background: #46556B url(../img/mugs/slud.svg) 80px 80px;}
li.mug.sluf { background: #46556B url(../img/mugs/sluf.svg) 80px 80px;}
li.mug.slug { background: #46556B url(../img/mugs/slug.svg) 80px 80px;}
li.mug.smab { background: #46556B url(../img/mugs/smab.svg) 80px 80px;}
li.mug.smac { background: #46556B url(../img/mugs/smac.svg) 80px 80px;}
li.mug.smad { background: #46556B url(../img/mugs/smad.svg) 80px 80px;}
li.mug.smaf { background: #46556B url(../img/mugs/smaf.svg) 80px 80px;}
li.mug.smag { background: #46556B url(../img/mugs/smag.svg) 80px 80px;}
li.mug.smeb { background: #46556B url(../img/mugs/smeb.svg) 80px 80px;}
li.mug.smec { background: #46556B url(../img/mugs/smec.svg) 80px 80px;}
li.mug.smed { background: #46556B url(../img/mugs/smed.svg) 80px 80px;}
li.mug.smef { background: #46556B url(../img/mugs/smef.svg) 80px 80px;}
li.mug.smeg { background: #46556B url(../img/mugs/smeg.svg) 80px 80px;}
li.mug.smib { background: #46556B url(../img/mugs/smib.svg) 80px 80px;}
li.mug.smic { background: #46556B url(../img/mugs/smic.svg) 80px 80px;}
li.mug.smid { background: #46556B url(../img/mugs/smid.svg) 80px 80px;}
li.mug.smif { background: #46556B url(../img/mugs/smif.svg) 80px 80px;}
li.mug.smig { background: #46556B url(../img/mugs/smig.svg) 80px 80px;}
li.mug.smob { background: #46556B url(../img/mugs/smob.svg) 80px 80px;}
li.mug.smoc { background: #46556B url(../img/mugs/smoc.svg) 80px 80px;}
li.mug.smod { background: #46556B url(../img/mugs/smod.svg) 80px 80px;}
li.mug.smof { background: #46556B url(../img/mugs/smof.svg) 80px 80px;}
li.mug.smog { background: #46556B url(../img/mugs/smog.svg) 80px 80px;}
li.mug.smub { background: #46556B url(../img/mugs/smub.svg) 80px 80px;}
li.mug.smuc { background: #46556B url(../img/mugs/smuc.svg) 80px 80px;}
li.mug.smud { background: #46556B url(../img/mugs/smud.svg) 80px 80px;}
li.mug.smuf { background: #46556B url(../img/mugs/smuf.svg) 80px 80px;}
li.mug.smug { background: #46556B url(../img/mugs/smug.svg) 80px 80px;}
li.mug.snab { background: #46556B url(../img/mugs/snab.svg) 80px 80px;}
li.mug.snac { background: #46556B url(../img/mugs/snac.svg) 80px 80px;}
li.mug.snad { background: #46556B url(../img/mugs/snad.svg) 80px 80px;}
li.mug.snaf { background: #46556B url(../img/mugs/snaf.svg) 80px 80px;}
li.mug.snag { background: #46556B url(../img/mugs/snag.svg) 80px 80px;}
li.mug.sneb { background: #46556B url(../img/mugs/sneb.svg) 80px 80px;}
li.mug.snec { background: #46556B url(../img/mugs/snec.svg) 80px 80px;}
li.mug.sned { background: #46556B url(../img/mugs/sned.svg) 80px 80px;}
li.mug.snef { background: #46556B url(../img/mugs/snef.svg) 80px 80px;}
li.mug.sneg { background: #46556B url(../img/mugs/sneg.svg) 80px 80px;}
li.mug.snib { background: #46556B url(../img/mugs/snib.svg) 80px 80px;}
li.mug.snic { background: #46556B url(../img/mugs/snic.svg) 80px 80px;}
li.mug.snid { background: #46556B url(../img/mugs/snid.svg) 80px 80px;}
li.mug.snif { background: #46556B url(../img/mugs/snif.svg) 80px 80px;}
li.mug.snig { background: #46556B url(../img/mugs/snig.svg) 80px 80px;}
li.mug.snob { background: #46556B url(../img/mugs/snob.svg) 80px 80px;}
li.mug.snoc { background: #46556B url(../img/mugs/snoc.svg) 80px 80px;}
li.mug.snod { background: #46556B url(../img/mugs/snod.svg) 80px 80px;}
li.mug.snof { background: #46556B url(../img/mugs/snof.svg) 80px 80px;}
li.mug.snog { background: #46556B url(../img/mugs/snog.svg) 80px 80px;}
li.mug.snub { background: #46556B url(../img/mugs/snub.svg) 80px 80px;}
li.mug.snuc { background: #46556B url(../img/mugs/snuc.svg) 80px 80px;}
li.mug.snud { background: #46556B url(../img/mugs/snud.svg) 80px 80px;}
li.mug.snuf { background: #46556B url(../img/mugs/snuf.svg) 80px 80px;}
li.mug.snug { background: #46556B url(../img/mugs/snug.svg) 80px 80px;}
li.mug.thab { background: #46556B url(../img/mugs/thab.svg) 80px 80px;}
li.mug.thac { background: #46556B url(../img/mugs/thac.svg) 80px 80px;}
li.mug.thad { background: #46556B url(../img/mugs/thad.svg) 80px 80px;}
li.mug.thaf { background: #46556B url(../img/mugs/thaf.svg) 80px 80px;}
li.mug.thag { background: #46556B url(../img/mugs/thag.svg) 80px 80px;}
li.mug.theb { background: #46556B url(../img/mugs/theb.svg) 80px 80px;}
li.mug.thec { background: #46556B url(../img/mugs/thec.svg) 80px 80px;}
li.mug.thed { background: #46556B url(../img/mugs/thed.svg) 80px 80px;}
li.mug.thef { background: #46556B url(../img/mugs/thef.svg) 80px 80px;}
li.mug.theg { background: #46556B url(../img/mugs/theg.svg) 80px 80px;}
li.mug.thib { background: #46556B url(../img/mugs/thib.svg) 80px 80px;}
li.mug.thic { background: #46556B url(../img/mugs/thic.svg) 80px 80px;}
li.mug.thid { background: #46556B url(../img/mugs/thid.svg) 80px 80px;}
li.mug.thif { background: #46556B url(../img/mugs/thif.svg) 80px 80px;}
li.mug.thig { background: #46556B url(../img/mugs/thig.svg) 80px 80px;}
li.mug.thob { background: #46556B url(../img/mugs/thob.svg) 80px 80px;}
li.mug.thoc { background: #46556B url(../img/mugs/thoc.svg) 80px 80px;}
li.mug.thod { background: #46556B url(../img/mugs/thod.svg) 80px 80px;}
li.mug.thof { background: #46556B url(../img/mugs/thof.svg) 80px 80px;}
li.mug.thog { background: #46556B url(../img/mugs/thog.svg) 80px 80px;}
li.mug.thub { background: #46556B url(../img/mugs/thub.svg) 80px 80px;}
li.mug.thuc { background: #46556B url(../img/mugs/thuc.svg) 80px 80px;}
li.mug.thud { background: #46556B url(../img/mugs/thud.svg) 80px 80px;}
li.mug.thuf { background: #46556B url(../img/mugs/thuf.svg) 80px 80px;}
li.mug.thug { background: #46556B url(../img/mugs/thug.svg) 80px 80px;}
li.mug.tkab { background: #46556B url(../img/mugs/tkab.svg) 80px 80px;}
li.mug.tkac { background: #46556B url(../img/mugs/tkac.svg) 80px 80px;}
li.mug.tkad { background: #46556B url(../img/mugs/tkad.svg) 80px 80px;}
li.mug.tkaf { background: #46556B url(../img/mugs/tkaf.svg) 80px 80px;}
li.mug.tkag { background: #46556B url(../img/mugs/tkag.svg) 80px 80px;}
li.mug.tkeb { background: #46556B url(../img/mugs/tkeb.svg) 80px 80px;}
li.mug.tkec { background: #46556B url(../img/mugs/tkec.svg) 80px 80px;}
li.mug.tked { background: #46556B url(../img/mugs/tked.svg) 80px 80px;}
li.mug.tkef { background: #46556B url(../img/mugs/tkef.svg) 80px 80px;}
li.mug.tkeg { background: #46556B url(../img/mugs/tkeg.svg) 80px 80px;}
li.mug.tkib { background: #46556B url(../img/mugs/tkib.svg) 80px 80px;}
li.mug.tkic { background: #46556B url(../img/mugs/tkic.svg) 80px 80px;}
li.mug.tkid { background: #46556B url(../img/mugs/tkid.svg) 80px 80px;}
li.mug.tkif { background: #46556B url(../img/mugs/tkif.svg) 80px 80px;}
li.mug.tkig { background: #46556B url(../img/mugs/tkig.svg) 80px 80px;}
li.mug.tkob { background: #46556B url(../img/mugs/tkob.svg) 80px 80px;}
li.mug.tkoc { background: #46556B url(../img/mugs/tkoc.svg) 80px 80px;}
li.mug.tkod { background: #46556B url(../img/mugs/tkod.svg) 80px 80px;}
li.mug.tkof { background: #46556B url(../img/mugs/tkof.svg) 80px 80px;}
li.mug.tkog { background: #46556B url(../img/mugs/tkog.svg) 80px 80px;}
li.mug.tkub { background: #46556B url(../img/mugs/tkub.svg) 80px 80px;}
li.mug.tkuc { background: #46556B url(../img/mugs/tkuc.svg) 80px 80px;}
li.mug.tkud { background: #46556B url(../img/mugs/tkud.svg) 80px 80px;}
li.mug.tkuf { background: #46556B url(../img/mugs/tkuf.svg) 80px 80px;}
li.mug.tkug { background: #46556B url(../img/mugs/tkug.svg) 80px 80px;}
li.mug.tlab { background: #46556B url(../img/mugs/tlab.svg) 80px 80px;}
li.mug.tlac { background: #46556B url(../img/mugs/tlac.svg) 80px 80px;}
li.mug.tlad { background: #46556B url(../img/mugs/tlad.svg) 80px 80px;}
li.mug.tlaf { background: #46556B url(../img/mugs/tlaf.svg) 80px 80px;}
li.mug.tlag { background: #46556B url(../img/mugs/tlag.svg) 80px 80px;}
li.mug.tleb { background: #46556B url(../img/mugs/tleb.svg) 80px 80px;}
li.mug.tlec { background: #46556B url(../img/mugs/tlec.svg) 80px 80px;}
li.mug.tled { background: #46556B url(../img/mugs/tled.svg) 80px 80px;}
li.mug.tlef { background: #46556B url(../img/mugs/tlef.svg) 80px 80px;}
li.mug.tleg { background: #46556B url(../img/mugs/tleg.svg) 80px 80px;}
li.mug.tlib { background: #46556B url(../img/mugs/tlib.svg) 80px 80px;}
li.mug.tlic { background: #46556B url(../img/mugs/tlic.svg) 80px 80px;}
li.mug.tlid { background: #46556B url(../img/mugs/tlid.svg) 80px 80px;}
li.mug.tlif { background: #46556B url(../img/mugs/tlif.svg) 80px 80px;}
li.mug.tlig { background: #46556B url(../img/mugs/tlig.svg) 80px 80px;}
li.mug.tlob { background: #46556B url(../img/mugs/tlob.svg) 80px 80px;}
li.mug.tloc { background: #46556B url(../img/mugs/tloc.svg) 80px 80px;}
li.mug.tlod { background: #46556B url(../img/mugs/tlod.svg) 80px 80px;}
li.mug.tlof { background: #46556B url(../img/mugs/tlof.svg) 80px 80px;}
li.mug.tlog { background: #46556B url(../img/mugs/tlog.svg) 80px 80px;}
li.mug.tlub { background: #46556B url(../img/mugs/tlub.svg) 80px 80px;}
li.mug.tluc { background: #46556B url(../img/mugs/tluc.svg) 80px 80px;}
li.mug.tlud { background: #46556B url(../img/mugs/tlud.svg) 80px 80px;}
li.mug.tluf { background: #46556B url(../img/mugs/tluf.svg) 80px 80px;}
li.mug.tlug { background: #46556B url(../img/mugs/tlug.svg) 80px 80px;}
li.mug.tmab { background: #46556B url(../img/mugs/tmab.svg) 80px 80px;}
li.mug.tmac { background: #46556B url(../img/mugs/tmac.svg) 80px 80px;}
li.mug.tmad { background: #46556B url(../img/mugs/tmad.svg) 80px 80px;}
li.mug.tmaf { background: #46556B url(../img/mugs/tmaf.svg) 80px 80px;}
li.mug.tmag { background: #46556B url(../img/mugs/tmag.svg) 80px 80px;}
li.mug.tmeb { background: #46556B url(../img/mugs/tmeb.svg) 80px 80px;}
li.mug.tmec { background: #46556B url(../img/mugs/tmec.svg) 80px 80px;}
li.mug.tmed { background: #46556B url(../img/mugs/tmed.svg) 80px 80px;}
li.mug.tmef { background: #46556B url(../img/mugs/tmef.svg) 80px 80px;}
li.mug.tmeg { background: #46556B url(../img/mugs/tmeg.svg) 80px 80px;}
li.mug.tmib { background: #46556B url(../img/mugs/tmib.svg) 80px 80px;}
li.mug.tmic { background: #46556B url(../img/mugs/tmic.svg) 80px 80px;}
li.mug.tmid { background: #46556B url(../img/mugs/tmid.svg) 80px 80px;}
li.mug.tmif { background: #46556B url(../img/mugs/tmif.svg) 80px 80px;}
li.mug.tmig { background: #46556B url(../img/mugs/tmig.svg) 80px 80px;}
li.mug.tmob { background: #46556B url(../img/mugs/tmob.svg) 80px 80px;}
li.mug.tmoc { background: #46556B url(../img/mugs/tmoc.svg) 80px 80px;}
li.mug.tmod { background: #46556B url(../img/mugs/tmod.svg) 80px 80px;}
li.mug.tmof { background: #46556B url(../img/mugs/tmof.svg) 80px 80px;}
li.mug.tmog { background: #46556B url(../img/mugs/tmog.svg) 80px 80px;}
li.mug.tmub { background: #46556B url(../img/mugs/tmub.svg) 80px 80px;}
li.mug.tmuc { background: #46556B url(../img/mugs/tmuc.svg) 80px 80px;}
li.mug.tmud { background: #46556B url(../img/mugs/tmud.svg) 80px 80px;}
li.mug.tmuf { background: #46556B url(../img/mugs/tmuf.svg) 80px 80px;}
li.mug.tmug { background: #46556B url(../img/mugs/tmug.svg) 80px 80px;}
li.mug.tnab { background: #46556B url(../img/mugs/tnab.svg) 80px 80px;}
li.mug.tnac { background: #46556B url(../img/mugs/tnac.svg) 80px 80px;}
li.mug.tnad { background: #46556B url(../img/mugs/tnad.svg) 80px 80px;}
li.mug.tnaf { background: #46556B url(../img/mugs/tnaf.svg) 80px 80px;}
li.mug.tnag { background: #46556B url(../img/mugs/tnag.svg) 80px 80px;}
li.mug.tneb { background: #46556B url(../img/mugs/tneb.svg) 80px 80px;}
li.mug.tnec { background: #46556B url(../img/mugs/tnec.svg) 80px 80px;}
li.mug.tned { background: #46556B url(../img/mugs/tned.svg) 80px 80px;}
li.mug.tnef { background: #46556B url(../img/mugs/tnef.svg) 80px 80px;}
li.mug.tneg { background: #46556B url(../img/mugs/tneg.svg) 80px 80px;}
li.mug.tnib { background: #46556B url(../img/mugs/tnib.svg) 80px 80px;}
li.mug.tnic { background: #46556B url(../img/mugs/tnic.svg) 80px 80px;}
li.mug.tnid { background: #46556B url(../img/mugs/tnid.svg) 80px 80px;}
li.mug.tnif { background: #46556B url(../img/mugs/tnif.svg) 80px 80px;}
li.mug.tnig { background: #46556B url(../img/mugs/tnig.svg) 80px 80px;}
li.mug.tnob { background: #46556B url(../img/mugs/tnob.svg) 80px 80px;}
li.mug.tnoc { background: #46556B url(../img/mugs/tnoc.svg) 80px 80px;}
li.mug.tnod { background: #46556B url(../img/mugs/tnod.svg) 80px 80px;}
li.mug.tnof { background: #46556B url(../img/mugs/tnof.svg) 80px 80px;}
li.mug.tnog { background: #46556B url(../img/mugs/tnog.svg) 80px 80px;}
li.mug.tnub { background: #46556B url(../img/mugs/tnub.svg) 80px 80px;}
li.mug.tnuc { background: #46556B url(../img/mugs/tnuc.svg) 80px 80px;}
li.mug.tnud { background: #46556B url(../img/mugs/tnud.svg) 80px 80px;}
li.mug.tnuf { background: #46556B url(../img/mugs/tnuf.svg) 80px 80px;}
li.mug.tnug { background: #46556B url(../img/mugs/tnug.svg) 80px 80px;}

li.mug.deletable div,
li.mug.deleting div {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

li.mug.deletable:hover div {
    background: rgba(255,255,255,0.5) url(../img/deleteMug.svg) center center no-repeat;
    background-size: 30px;
    cursor: pointer;
    border-radius: 5px;
}

li.mug.deleting div,
li.mug.deleting:hover div {
  background: rgba(255,255,255,0.5) url(../img/UndoDeleteMug.svg) center center no-repeat;
  background-size: 30px;
  cursor: pointer;
  border-radius: 5px;
}

.mugs .scrollToLeft {
    background: url(../img/scrollToLeft.svg) 10px center no-repeat;
    cursor: pointer;
}

.mugs .scrollToRight {
    background: url(../img/scrollToRight.svg) 0px center no-repeat;
    cursor: pointer;
}

.mugs .show-matrix {
    display: inline-block;
    background-color: #46556B;
    height: 115px;
    width: 25px;
    vertical-align: top;
    line-height: 115px;
}

.mugs .show-matrix span {
  color: white;
  font-size: 30px;
  font-weight: 700;
  opacity: 0.5;
  cursor: pointer;
}

.mugs .show-matrix span:hover {
  opacity: 1.0;
}

.mugs .scrollToLeft,
.mugs .scrollToRight {
    width: 20px;
    height: 115px;
    display: inline-block;
    background-color: #46556B;
    border-radius: 5px 0px 0px 5px;
}

.mugs .scrollToRight {
    border-radius: 0px 5px 5px 0px;
}

#overlay-container {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #45556C;
    top: 0px;
    left: 0px;
    opacity: 0.75;
}

#matrix-container {
    position: fixed;
    top: calc(50% - 215px);
    width: 450px;
    left: calc(50% - 211px);
}

#matrix-container button#add-mugs {
    position: relative;
    top: 15px;
    left: calc(50% - 83px);
    float: none;
}

#home #home-container {
    width: 980px;
    margin: auto;
}

#home h2 {
  color: white;
  font-weight: 300;
  margin: 15px;
}

#home #account,
#home #quizz {
    height: 70px;
    width: 350px;
    margin: 0px;
    padding: 0px;
    border-radius: 5px 5px 0px 0px;
    margin: 0px;
    position: relative;
    background: url(../img/Profile.svg) 15px no-repeat;
    background-size: 30px;
}

#home #account {
    background: #46556B url(../img/Profile.svg) 15px no-repeat;
    background-size: 30px;
}

#home #quizz {
    background: #46556B url(../img/Quiz.svg) 18px no-repeat;
    background-size: 25px;
}

#home #account span,
#home #quizz span {
    color: white;
    margin: 20px;
    display: block;
    position: absolute;
    top: 5px;
    left: 40px;
    cursor: pointer;
}


#home #quizz {
    border-radius: 0px 0px 5px 5px;
    margin: 1px 0px 0px 0px;
}

#home #left-pane {
    margin: 15px;
    width: 350px;
    display: inline-block;
    vertical-align: top;
}

#home #right-pane {
    margin: 15px 0px;
    width: 580px;
    height: 350px;
    display: inline-block;
    vertical-align: top;
}

#ROMEs #settings .panel h2 a {
    float: right;
    color: #5E5E5E;
}

#ROMEs #settings .panel h2 a:hover {
    text-decoration: underline;
}

#ROMEs #settings .panel.collapsed h2 a {
    display: none;
}

#ROMEs {
    width: 290px;
    height: 350px;
    display: inline-block;
    border-radius: 5px 0px 0px 5px;
    width: 100%;
    height: 100%;
}

#home #mugs-panel {
  margin: 0px 15px;
}

#home #ROMEs,
#home #jobs {
  position: relative;
  overflow-y: auto;
}

#ROMEs table.ROMEs,
#home #jobs table.jobs {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#ROMEs table.ROMEs td.result {
  border-bottom: 1px solid #394558;
  height: 50px;
  width: 100%;
  background-repeat-x: no-repeat;
  background-size: 7px;
  white-space: nowrap;
}

#ROMEs table.ROMEs tr, 
#ROMEs table.ROMEs tr td {
  width: 100%;
}

#ROMEs table.ROMEs tr:first-child > td.result {
  border-radius: 4px 4px 0px 0px;
}

#ROMEs table.ROMEs td.result.top {
  background-image: url(../img/results-top.svg);
}

#ROMEs table.ROMEs td.result.middle {
  background-image: url(../img/results-middle.svg);
}

#ROMEs table.ROMEs td.result.low {
  background-image: url(../img/results-low.svg);
}

#ROMEs table.ROMEs td.result > span {
  color: white;
  font-size: 14px;
  font-weight: 300;
  cursor: pointer;
  height: 50px;
  line-height: 50px;
  overflow-x: auto;
  padding: 0px 20px;
}

#ROMEs table.ROMEs td.result > span:hover,
#ROMEs table.results td.result span:hover {
  text-decoration: underline;
}

#home #ROMEs {
    width: 100%;
    height: 350px;
    display: inline-block;
    background-color: #46556B;
    border-radius: 5px 5px 0px 0px;
}

#home #ROMEs table td {
    position: relative;
}

#home #ROMEs table td div.unfold {
    background: url(../img/unfold-button-green.svg) center center no-repeat;
    background-size: 15px 15px;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
}

#home #ROMEs table td div.fold {
    background: url(../img/fold-button-green.svg) center center no-repeat;
    background-size: 15px 15px;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
}

#home div.jobs {
    width: 100%;
    height: 200px;
    overflow: scroll;
    background-color: #F4F4F4;
    box-shadow: inset 0 0 5px #000000;
    border-top: 1px solid #8F99A6;
}

#home div.jobs table {
  table-layout: fixed;
}

#home div.jobs table,
#home div.jobs table tr,
#home div.jobs table, tr, td {
    width: 100%;
}

#home div.jobs td.result {
    height: 30px;
    width: 100%;
    white-space: nowrap;
    border: none;
}

#home div.jobs td.result span {
    font-size: 16px;
    color: #1D2835;
    font-weight: 300;
    padding-left: 30px;
    cursor: pointer;
    display: block;
    line-height: 30px;
    width: calc(100% - 30px);
    height: 30px;
}

#home div.jobs td.result span:hover {
  text-decoration: underline;
}

#mugs-viewer {
    width: 100%;
    height: 100%;
}

#mugs-viewer .mug {
    background-color: transparent;
    width: 80px;
    height: 80px;
    display: inline-block;
    vertical-align: top;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#mugs-viewer .mug .label {
    color: white;
    font-size: 14px;
    display: block;
    position: relative;
    top: 125px;
    text-align: center;
    display: none;
}

#mugs-viewer .scrollToLeftContainer,
#mugs-viewer .scrollToRightContainer {
    background-color: transparent;
    width: 40px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    top: 0px;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
}

#mugs-viewer .scrollToRightContainer {
    float: right;
}

#mugs-viewer .scrollToLeft,
#mugs-viewer .scrollToRight,
#mugs-viewer .openExtension {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    cursor: pointer;
    background: url(../img/scroll-to-left-blue.svg) right center no-repeat;
}

#mugs-viewer .scrollToRight {
    background: url(../img/scroll-to-right-blue.svg) right center no-repeat;
}

#mugs-viewer .openExtension {
    background: url(../img/extension-button.svg) left center no-repeat;
    height: 25px;
    margin-top: -12.5px;
    left: 25px;
}

#mugs-viewer .mugs-list {
    display: inline-block;
    width: calc(100% - 80px);
    height: 100%;
    overflow: hidden;
}

#mugs-viewer .mugs-list ul {
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#mugs-viewer .pages {
    background-color: transparent;
    height: 40px;
    width: calc(100% - 40px);
    margin: auto;
    position: relative;
    top:-10px;
    text-align: center;
}

#mugs-viewer .pages .page {
    width: 10px;
    height: 10px;
    background: url(../img/page.svg) center center no-repeat;
    cursor: pointer;
    margin: 10px 4px;
    display: inline-block;
}

#mugs-viewer .pages .page.current {
    background: url(../img/page-current.svg) center center no-repeat;
    cursor: default;
}

#matrix-extended .header {
    background-color: #1E2835;
    width: 900px;
    height: 80px;
    border-radius: 5px 5px 0px 0px;
    position: fixed;
    left: calc(50% - 450px);
    top: calc(50% - 300px);
}

#matrix-extended .header button {
    position: absolute;
    right: 8px;
    top: 15px;
    font-size: 12px;
    padding: 5px 10px;
    min-width: 80px;
    height: 30px;
    border-radius: 2px;
    background: #384558 url(../img/close.svg) 65px 12px no-repeat;
    background-size: 8px;
    text-align: left;
}

#matrix-extended .header h2 {
    padding: 10px 30px;
    color: white;
    font-size: 25px;
    font-weight: 100;
}

#matrix-extended .body {
  background-color: #F4F4F4;
  border-radius: 0px 0px 5px 5px;
  width: 900px;
  height: 550px;
  position: fixed;
  left: calc(50% - 450px);
  top: calc(50% - 220px);
}

#matrix-extended #matrix-container .matrix span.label {
    color: #666;
    font-size: 12px;
    line-height: 15px;
    font-weight: 700;
}

#matrix-extended #matrix-container {
    display: inline-block;
    position: fixed;
    top: calc(50% - 215px);
    width: 450px;
    left: 50%;
}

#matrix-extended #mugs-viewer-container {
    display: inline-block;
    position: fixed;
    top: calc(50% - 210px);
    width: 450px;
    height: 400px;
    left: calc(50% - 450px);
}

#matrix-extended button.green.save {
    position: absolute;
    top: 475px;
    left: calc(50% - 85px);
}

#matrix-extended button.orange.mini.add-to-profile {
    position: absolute;
    right: 168px;
    top: 430px;
}

#gmap-container {
  height: calc(100% - 50px);
  position: relative;
}

#gmap-container #gmap {
  height: 100%;
}

#gmap-panel {
    height: 100%;
    width: 400px;
    background-color: rgba(255,255,255,0.25);
    position: absolute;
    top: 0;
    right: -400px;
}

#gmap-panel .header {
  height: 50px;
  background-color: #8E95A0;
}

#gmap-panel .header h1 {
    padding: 5px 13px;
    color: white;
}

#gmap-panel .body {
  background-color: #687381;
}

#gmap-panel .body div div {
    height: 50px;
}

#gmap-panel .body select {
  height: 30px;
  line-height: 100px;
  background-color: white;
  font-size: 15px;
  margin: 10px 0px 0px 10px;
  width: 295px;
}

#gmap-panel .body button {
  margin-top: 13px;
}

#gmap-panel .body button.reset {
  float: none;
  margin: 13px calc(50% - 85px);
}

#france-map-container {
    position: absolute;
    top: 0px;
    background-color: #374559;
    width: 100%;
    height: 100%;
}

#france-map {
    position: relative;
    top: 0px;
    height: 100%;
}

#france-map .region {
  fill:#a0a0a0;
}

#france-map .pin {
  fill:#606060;
  cursor:pointer;
}

#france-map .pin-text, pin-tspan {
  cursor:pointer;
}