/*** useful templates
@media all and (min-width: $breakpoint-tablet) {}
@media all and (min-width: $breakpoint-tablet) {}
@media all and (min-width: $breakpoint-desktop) {}
***/
/**
$pallette-primary: $color-admirals-blue;
$pallette-secondary: orange;
$pallette-darkgrey: rgb(90,90,90);
$pallette-lightgrey: rgb(190,190,190);
$pallette-background: white;
$pallette-attention: yellow;

**/
/****************************/
/** atomic / functional css */
/****************************/
.pl-10 {
  padding-left: 1rem;
}

@media all and (min-width: 768px) {
  .m_pl-10 {
    padding-left: 10px;
  }
}

@media all and (min-width: 1100px) {
  .l_pl-10 {
    padding-left: 10px;
  }
}

@media all and (min-width: 1250px) {
  .xl_pl-10 {
    padding-left: 10px;
  }
}

.pr-10 {
  padding-right: 10px;
}

/*******************/
/**  extensions  ***/
/*******************/
.debug-border, .column_1_of_2, .column_2_of_2, .form {
  border: none;
}

.transition, .column-one, .column-two, .column-three, .day, .entity, .list__item, .subhead {
  transition-property: all;
  transition-duration: 500ms;
  transition-timing-function: linear;
  transition-delay: 0s;
}

.deleted {
  color: red !important;
  text-decoration: line-through !important;
}

.hidden-entry {
  color: orange !important;
}

* {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

/**********/
/**  A  ***/
/**********/
a {
  color: #3A4A4d;
  font-weight: normal;
  padding: 0px 2px;
}

a:hover {
  background-color: #FF4430;
  color: white;
}

/**********/
/**  B  ***/
/**********/
.background {
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -10;
}

.background img {
  width: 100%;
}

html {
  height: 100%;
  background-color: whitesmoke;
}

/***
$breakpoint-mobile:       501px;
$breakpoint-mobileplus:       601px;
$breakpoint-tablet:       768px;
$breakpoint-desktopminus: 950px;
$breakpoint-desktop:      1100px;
$breakpoint-desktopplus:  1250px;
****/
.breakpoint-desktop {
  display: none;
}

@media all and (min-width: 1100px) {
  .breakpoint-desktop {
    display: inline;
  }
}

.breakpoint-mobile {
  display: inline;
}

@media all and (min-width: 768px) {
  .breakpoint-mobile {
    display: none;
  }
}

.breakpoint-desktop-tablet {
  display: none;
}

@media all and (min-width: 768px) {
  .breakpoint-desktop-tablet {
    display: inline;
  }
}

.breakpoint-mobile-tablet {
  display: inline;
}

@media all and (min-width: 1100px) {
  .breakpoint-mobile-tablet {
    display: none;
  }
}

h1, div, p, span,
body {
  color: #3A4A4d;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  padding: 0px;
}

.background-color-primary {
  background-color: #3A4A4d;
  color: white;
}

.bread-crumbs {
  font-size: small;
  text-transform: uppercase;
  border: none;
  background-color: white;
  margin: 0;
  padding: 20px 0px;
}

.bread-crumbs > :before {
  content: "";
}

.XXXbutton-start-stop {
  font-family: "Open Sans Condensed", sans-serif;
  padding: 0 3px;
  margin: 0px;
  margin: 0px;
}

.XXXbutton-start-stop a {
  font-family: inherit;
  font-size: inherit;
  color: white;
}

.button-start-stop:hover {
  background-color: #3A4A4d;
  color: white;
}

.button-new-entry {
  clear: left;
  float: left;
  margin: 3px 0 0 10px;
  padding: 2px;
  font-size: 12px;
  line-height: normal;
  text-align: left;
  width: auto;
}

@media all and (min-width: 768px) {
  .button-new-entry {
    font-size: 12px;
  }
}

.button-nav-next-prev {
  font-size: 12px;
  padding: 0 10px;
  width: auto;
}

.button-nav-prev {
  float: left;
}

.button-nav-next {
  float: right;
}

/**********/
/**  C  ***/
/**********/
.category {
  clear: both;
}

.category__counter, .category__id {
  float: left;
  padding: 0 20px;
  text-align: right;
  width: 2em;
}

.category__title {
  float: left;
  width: 20em;
}

img.categoryIcon {
  height: 1em;
  max-height: 30px;
}

.color-link {
  color: #3A4A4d;
}

.column_1_of_2 {
  float: none;
  width: 100%;
}

@media all and (min-width: 768px) {
  .column_1_of_2 {
    float: left;
    width: 25%;
  }
}

.column_2_of_2 {
  float: none;
  width: 100%;
}

@media all and (min-width: 768px) {
  .column_2_of_2 {
    float: right;
    width: 70%;
  }
}

.column-one {
  float: left;
  width: 100%;
}

@media all and (min-width: 768px) {
  .column-one {
    margin-top: 1em;
    float: left;
    width: 79%;
  }
}

@media all and (min-width: 1100px) {
  .column-one {
    width: 84%;
  }
}

.column-two {
  display: none;
}

@media all and (min-width: 768px) {
  .column-two {
    margin-top: 1em;
    float: right;
    display: inline;
    width: 20%;
  }
}

@media all and (min-width: 1100px) {
  .column-two {
    width: 15%;
  }
}

.column-three {
  position: fixed;
  top: 5em;
  right: 0px;
  overflow: hidden;
  width: 0%;
}

@media all and (min-width: 1100px) {
  .column-three {
    top: 3em;
    width: 0%;
  }
}

/**********/
/**  D  ***/
/**********/
.day {
  clear: both;
  font-family: "Open Sans Condensed", sans-serif;
  overflow: hidden;
  margin: 0 0;
  position: relative;
}

@media all and (min-width: 768px) {
  .day {
    border: 1px solid transparent;
    border-radius: 1px;
    margin: 0 0;
  }
}

.day__date {
  border-radius: 1px;
  color: #3A4A4d;
  float: left;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: bold;
  margin: 0px 10px 0 0;
  padding: 0 0 0 10px;
  text-align: right;
  width: 50%;
}

.day__date span div {
  font-size: 12px;
}

@media all and (min-width: 601px) {
  .day__date {
    width: 22%;
  }
}

@media all and (min-width: 768px) {
  .day__date {
    width: 9em;
  }
  .day__date span div {
    font-size: 14px;
  }
}

@media all and (min-width: 1100px) {
  .day__date {
    width: 9;
  }
  .day__date span div {
    font-size: 16px;
  }
}

.day--open {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.day__date--today {
  color: black;
}

.db-holder {
  float: left;
  text-align: center;
  border: 1px dotted lightgrey;
}

div {
  overflow: hidden;
}

/**********/
/**  E  ***/
/**********/
.entity {
  background-color: white;
  border-top: none;
  border-bottom: none;
  border-left: 5px solid;
  border-right: 5px solid;
  border-radius: 1px;
  margin: 2px 0;
  padding: 5px 0px 5px 0px;
}

@media all and (min-width: 768px) {
  .entity {
    border-left: 10px solid;
    border-right: 10px solid;
  }
}

@media all and (min-width: 1100px) {
  .entity {
    border-left: 15px solid;
    border-right: 15px solid;
  }
}

@media all and (min-width: 1250px) {
  .entity {
    border-left: 20px solid;
    border-right: 20px solid;
  }
}

.entity__left, .entity__right, .entity__left--tablet-plus {
  font-size: 16px;
  margin: 0 5px;
}

.entity__left div, .entity__right div, .entity__left--tablet-plus div {
  font-size: inherit;
}

.entity__left {
  float: left;
  line-height: normal;
  width: auto;
}

.entity__right {
  float: right;
  line-height: normal;
  width: auto;
}

.entity__left--tablet-plus {
  clear: both;
  float: none;
  line-height: normal;
  width: 100%;
}

@media all and (min-width: 768px) {
  .entity__left--tablet-plus {
    clear: none;
    float: left;
    width: auto;
  }
}

.entity__datetime {
  padding-left: 0px;
  width: auto;
}

@media all and (min-width: 768px) {
  .entity__datetime {
    width: 15%;
  }
}

@media all and (min-width: 1100px) {
  .entity__datetime {
    padding-left: 1.5em;
    width: 12%;
  }
}

@media all and (min-width: 1250px) {
  .entity__datetime {
    width: 10%;
  }
}

.entity__title {
  font-weight: bold;
  padding-top: 5px;
}

@media all and (min-width: 768px) {
  .entity__title {
    padding-top: 0;
  }
}

.entity__form-container {
  border-radius: 1px;
  clear: left;
  margin: 0;
  padding: 0 0 0px 5px;
}

@media all and (min-width: 768px) {
  .entity__form-container {
    margin: 0 5px;
  }
}

@media all and (min-width: 1100px) {
  .entity__form-container {
    margin: 10px 15px 0 15px;
    padding: 0 10px 0px 15px;
  }
}

.entity__body {
  clear: both;
  font-size: 16px;
  margin: 0 5px;
  line-height: normal;
}

@media all and (min-width: 768px) {
  .entity__body {
    margin: 0 1em 0 1em;
  }
}

.entity__body a {
  text-decoration: underline;
}

img.entity__image,
.entity__image {
  height: 100px;
  border: 1px solid red;
}

@media all and (min-width: 768px) {
  img.entity__image,
  .entity__image {
    height: 125px;
    border: 1px solid blue;
  }
}

@media all and (min-width: 1100px) {
  img.entity__image,
  .entity__image {
    height: 135px;
    border: 2px solid yellow;
  }
}

@media all and (min-width: 1250px) {
  img.entity__image,
  .entity__image {
    height: 145px;
    border: 2px solid white;
  }
}

.entity__new {
  border: 1px solid #b4b4b4;
  border-radius: 1px;
  background-color: white;
  margin: 0px 0px 5px 0px;
  padding: 5px 10px 0 15px;
}

.entity__smaller-row {
  font-family: "Open Sans Condensed", sans-serif;
}

@media all and (max-width: 768px) {
  .entity__smaller-row {
    font-size: 12px;
  }
}

@media all and (max-width: 1100px) {
  .entity__smaller-row {
    font-size: 14px;
  }
}

.entity--reminder--small {
  background-color: transparent;
}

.entity--error {
  background-color: lightpink;
}

.entity--live {
  background-color: white;
}

.entity--past--tbd {
  background-color: #E8E8E8;
}

.entity--past--not-focused {
  background-color: lightblue;
}

.entity--past--focused {
  background-color: lightgreen;
}

.entity--default {
  background-color: yellow;
}

.entity--inactive {
  background-color: lightgreen;
}

.entity--future {
  background-color: #E8E8E8;
}

.entity--menu {
  background-color: white;
}

/**********/
/**  F  ***/
/**********/
footer {
  min-height: 3em;
}

.font-family-condensed {
  font-family: "Open Sans Condensed", sans-serif;
}

.form {
  padding: 0px;
  margin: 0px;
  width: 100%;
}

.form__input {
  float: left;
  padding: 0px;
  margin: 0px;
  width: auto;
}

@media all and (min-width: 768px) {
  .form__input {
    clear: none;
  }
}

.form__label {
  clear: left;
  float: left;
  width: 100%;
  margin: 0px;
  padding: 0px;
  line-height: normal;
  font-size: 10px;
}

.form button[type="submit"] {
  float: left;
  background-color: white;
  border: 1px solid #3A4A4d;
  border-radius: 1px;
}

.form--submit {
  margin-top: 10px;
}

.form-container {
  clear: left;
  padding-left: 20px;
}

.form__input__dropdown {
  border: 1px solid #b4b4b4;
  border-radius: 1px;
  margin-right: 2px;
}

.form__input__minute {
  margin-right: 20px;
}

.form__input button {
  background-color: red;
  color: white;
  border: 1px solid #b4b4b4;
  border-radius: 1px;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  padding: 2px 5px;
}

.form__input button:hover {
  background-color: #FF4430;
  color: white;
}

/**********/
/**  H  ***/
/**********/
h1 {
  float: left;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.1em;
  padding: 0 0 0 10px;
  width: auto;
  text-transform: uppercase;
}

@media all and (min-width: 768px) {
  h1 {
    padding: 0 0 0 0px;
  }
}

h2 {
  background-color: #3A4A4d;
  color: white;
  float: left;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 1.1em;
  padding: 5px 20px;
  width: auto;
  text-transform: uppercase;
}

.header {
  color: #3A4A4d;
  text-transform: uppercase;
}

.header__title {
  font-size: smaller;
}

.hover-white:hover {
  background-color: lightpink;
}

/**********/
/**  I  ***/
/**********/
.info-right,
.info-left {
  font-size: 12px;
  line-height: normal;
  margin: 0px;
  color: grey;
  padding: 0px;
}

.info-right {
  border: none;
  float: right;
  padding-right: 10px;
  text-align: right;
}

@media all and (min-width: 768px) {
  .info-right {
    padding-right: 0px;
  }
}

.info-left {
  float: left;
}

/**********/
/**  J  ***/
/**********/
.journal {
  clear: both;
  overflow: hidden;
}

.journal__category {
  float: left;
  padding: 0 10px;
  width: 10em;
}

.journal__counter {
  float: left;
  padding: 0 20px;
  text-align: right;
  width: 2em;
}

.journal__entry-count {
  float: left;
  padding: 0 10px;
  text-align: right;
  width: 7em;
}

.journal__id {
  float: left;
  padding: 0 20px;
  text-align: right;
  width: 2em;
}

.journal__duration {
  float: left;
  padding: 0 10px;
  text-align: left;
  width: 35em;
}

.journal__title {
  float: left;
  padding: 0 10px;
  width: 15em;
}

/**********/
/**  L  ***/
/**********/
.link-like-text {
  color: #3A4A4d;
}

.link-like-text:hover {
  background-color: #FF4430;
  color: white;
}

.list__item {
  border-radius: 1px;
  color: #3A4A4d;
  font-size: 16px;
  line-height: normal;
  padding: 2px 0 2px 0px;
  margin: 1px 0;
}

.list__item div,
.list__item div a {
  font-size: 16px;
}

@media all and (min-width: 768px) {
  .list__item div,
  .list__item div a {
    font-size: 16px;
  }
}

.list__item--subitem {
  display: none;
  line-height: normal;
  padding-left: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
}

@media all and (min-width: 768px) {
  .list__item--subitem {
    padding-left: 0px;
  }
}

.list__item__admin {
  float: right;
  width: auto;
  padding-right: 5px;
}

@media all and (min-width: 768px) {
  .list__item__admin {
    float: left;
    padding-left: 5px;
  }
}

.list__item__title {
  font-weight: bold;
  float: left;
  width: auto;
  margin-left: 4px;
}

.login {
  background-color: white;
  border: 1px solid white;
  border-radius: 1px;
  margin: 10px 0;
  padding: 10px;
  width: auto;
}

@media all and (min-width: 768px) {
  .login {
    margin: 10px 20px;
  }
}

@media all and (min-width: 1100px) {
  .login {
    margin: 10px 40px;
  }
}

/**********/
/**  M  ***/
/**********/
div.message {
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 14px;
  position: fixed;
  top: 2.5em;
  left: 0px;
  right: unset;
  height: unset;
  line-height: normal;
  background-color: lightblue;
  padding: 0 10px;
  width: auto;
  z-index: 200;
}

div.message:before {
  content: unset;
  display: none;
}

div.message:before {
  content: "";
  padding: 0;
}

.message-updated {
  color: #3A4A4d;
  background-color: yellow;
  float: left;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: inherited;
  padding: 0 4px;
  margin: 0 5px 0 5px;
}

.mobile-hidden {
  display: none;
}

@media all and (min-width: 768px) {
  .mobile-hidden {
    display: inline;
  }
}

.mobile-only {
  display: inline;
}

@media all and (min-width: 768px) {
  .mobile-only {
    display: none;
  }
}

.mobile-only--block {
  display: block;
  clear: both;
}

@media all and (min-width: 768px) {
  .mobile-only--block {
    display: none;
    clear: none;
  }
}

/**********/
/**  N  ***/
/**********/
nav {
  background-color: whitesmoke;
  border-radius: none;
  border-bottom: 1px solid lightgrey;
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0px;
  line-height: 175%;
  opacity: 0.9;
  padding: 0px 0px;
  margin: 0px 0px 0px 0px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  color: red;
}

nav a {
  margin: 0 0 0 0;
}

@media all and (min-width: 768px) {
  nav {
    padding: 0px 0px;
    margin: 0px;
    line-height: 250%;
    font-family: "Open Sans", sans-serif;
  }
}

.nav__item {
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  font-size: 12px;
  float: left;
  margin: 0 2px 0 0;
}

@media all and (min-width: 768px) {
  .nav__item {
    font-size: 14px;
    margin: 0 0;
    padding: 0 10px;
  }
}

.nav__item:hover {
  background-color: lightpink;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
}

.nav__item:hover a:hover {
  color: white;
  background-color: red;
}

.nav__item--admin {
  border: 1px dotted darkgrey;
}

.nav__item--current {
  background-color: lightpink;
}

/**********/
/**  P  ***/
/**********/
.page {
  padding: 10px 0px;
}

@media all and (min-width: 768px) {
  .page {
    padding: 10px 10px;
  }
}

@media all and (min-width: 1100px) {
  .page {
    padding: 10px 20px;
  }
}

/**********/
/**  R  ***/
/**********/
.required > label:after {
  /* for input fields when required = true, overrides the style in cake.css */
  content: '';
  color: #C3232D;
}

.radio-grid {
  display: flex;
  float: left;
  font-size: 14px;
  margin: 1px;
  overflow: hidden;
  width: 100%;
}

@media all and (min-width: 601px) {
  .radio-grid {
    width: 48%;
  }
}

@media all and (min-width: 768px) {
  .radio-grid {
    width: 31%;
  }
}

@media all and (min-width: 1100px) {
  .radio-grid {
    width: 19%;
  }
}

.reminder {
  float: left;
  width: auto;
  padding: 0px;
  line-height: normal;
  margin: 0px 2px 0px 0px;
}

.reminder__element {
  float: left;
  width: auto;
  overflow: hidden;
  border: 1px solid grey;
  border-radius: 2px;
  padding: 5px 8px 3px 8px;
  margin: 1px 1px 1px 0px;
}

/**********/
/**  S  ***/
/**********/
.settings {
  padding: 0 5px;
}

@media all and (min-width: 768px) {
  .settings {
    padding: 0 10px;
  }
}

.setting {
  padding-left: 10px;
}

@media all and (min-width: 768px) {
  .setting {
    padding-left: 0;
  }
}

.setting__change {
  float: none;
  font-size: 12px;
}

@media all and (min-width: 768px) {
  .setting__change {
    float: left;
  }
}

.setting__current {
  display: none;
  float: none;
  font-size: 10px;
  width: 45%;
}

@media all and (min-width: 601px) {
  .setting__current {
    font-size: 12px;
    width: 30%;
  }
}

@media all and (min-width: 768px) {
  .setting__current {
    float: left;
    font-size: 10px;
    width: 30%;
  }
}

@media all and (min-width: 1100px) {
  .setting__current {
    font-size: 12px;
    width: 20%;
  }
}

.settings__subtitle {
  font-size: 12px;
  font-weight: bold;
}

.settings__subtitle--attention {
  color: red;
  font-size: larger;
  font-weight: bold;
}

section.container {
  margin-top: 2em;
  padding: 0px;
}

@media all and (min-width: 768px) {
  section.container {
    margin-top: 2em;
  }
}

.shortcuts {
  margin-top: 10px;
}

@media all and (min-width: 768px) {
  .shortcuts {
    margin-top: 10px;
  }
}

.subhead {
  color: #3A4A4d;
  font-size: 16px;
  line-height: 150%;
  margin: 0px;
  padding: 5px 0 0 10px;
  text-align: left;
}

@media all and (min-width: 768px) {
  .subhead {
    padding: 5px 0 0 5px;
  }
}

.stat-container {
  border-radius: 1px;
  margin: 0 5px 1px 0;
  padding: 0 5px;
  overflow: hidden;
}

.stat {
  font-size: smaller;
}

.stat-header {
  font-size: xx-small;
  padding: 0 3px;
  text-align: center !important;
}

@media all and (min-width: 768px) {
  .stat-header {
    border: none;
  }
}

.stat-name {
  width: auto;
  float: left;
  margin-right: 15px;
}

@media all and (min-width: 768px) {
  .stat-name {
    float: left;
    margin-right: 0px;
    width: 20em;
  }
}

.stat-latest {
  float: left;
  width: 10em;
  text-align: left;
}

@media all and (min-width: 768px) {
  .stat-latest {
    width: 10em;
  }
}

.stat-number {
  float: left;
  text-align: right;
  width: auto;
  margin-right: 15px;
}

@media all and (min-width: 768px) {
  .stat-number {
    width: 8em;
    margin-right: 0px;
  }
}

.stat-minutes {
  float: left;
  text-align: right;
  width: auto;
  margin-right: 15px;
}

@media all and (min-width: 768px) {
  .stat-minutes {
    width: 8em;
    margin-right: 0px;
  }
}

.stat-hours {
  float: left;
  width: auto;
  text-align: right;
  margin-right: 15px;
}

@media all and (min-width: 768px) {
  .stat-hours {
    width: 8em;
    margin-right: 0px;
  }
}

.symbol {
  float: left;
  border: 1px solid grey;
  padding: 0 1px;
}

/**********/
/**  T  ***/
/**********/
textarea {
  font-size: 16px;
  width: 100%;
  padding: 3px;
  margin-top: 0px;
  border: 1px solid #b4b4b4;
  border-radius: 1px;
  margin-bottom: 0px;
  /* resize:none   */
}

@media all and (max-width: 501px) {
  select, option,
  input,
  textarea {
    font-size: 16px;
  }
  /* added to stop apple iphone iOS autozoom */
}

.time-adjusters {
  border: 1px dotted lightgrey;
  border-radius: 2px;
  background-color: inherit;
  margin: 5px 0px 0 0px;
  padding: 0px 0px;
}

@media all and (min-width: 768px) {
  .time-adjusters {
    margin: 5px 1px 0 1px;
  }
}

.time-adjusters--transparent {
  border: 1px dotted lightgrey;
  border-radius: 2px;
  background-color: none;
  margin: 5px 0px 0 0px;
  padding: 0px 0px;
}

@media all and (min-width: 768px) {
  .time-adjusters--transparent {
    margin: 5px 1px 0 1px;
  }
}

.time-adjusters--transparent-borderless {
  border: 1px dotted lightgrey;
  border-radius: 2px;
  background-color: none;
  margin: 5px 0px 0 0px;
  padding: 0px 0px;
}

@media all and (min-width: 768px) {
  .time-adjusters--transparent-borderless {
    margin: 5px 1px 0 1px;
  }
}

.time-adjusters:hover {
  border: 1px solid red;
}

.time-adjusters a {
  padding: 0 6px;
  color: red;
}

@media all and (min-width: 768px) {
  .time-adjusters a {
    padding: 0 5px;
  }
}

.time-adjusters a:hover {
  color: white;
}

/**********/
/**  U  ***/
/**********/
.user {
  clear: both;
  color: #3A4A4d;
  font-size: 12px;
  overflow: hidden;
  padding-left: 10px;
}

.user__admin {
  float: left;
  font-size: inherit;
  width: 8em;
}

.user__id {
  float: left;
  font-size: inherit;
  text-align: right;
  padding: 0 20px 0 0;
  width: 4em;
}

.user__role {
  float: left;
  font-size: inherit;
  text-align: right;
  width: 6em;
}

.user__password {
  float: left;
  font-size: inherit;
  width: 8em;
}

.user__category-counter, .user__entry-counter, .user__journal-counter {
  float: left;
  font-size: inherit;
  text-align: right;
  width: 3em;
}

.user__username {
  float: left;
  font-size: inherit;
  width: 17em;
}

.user--logged-in {
  border-top: 1px solid orange;
  border-left: 1px solid orange;
  border-bottom: 1px solid orange;
  border-right: 5px solid orange;
  background-color: white;
  z-index: 20;
}