.bar {
    display: block;
    width: 40px;
    height: 5px;
    margin-bottom: 8px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #4a4a4a;
    /*user-select: none;*/
}

.bar:first-child {
  margin-top: 14px;
}

/*.bar:last-child {*/
/*  margin-bottom: 12px;*/
/*}*/


.hamburger {
    display: block;
    cursor: pointer;
    float: right;
    top: 0;
    /*bottom: 0;*/
    /*border: 1px solid black;*/
    /*height: 100vw;*/
    /*padding-top: 5px;*/
    padding-right: 15px;
    height: 100%;
    /*user-select: none;*/
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight on mobile */
    outline: none; /* Remove focus outline */
}


.menu, .menu ul {
    display: none;
    background-color: white;
    /*top: 4rem;*/
    /*flex-direction: column;*/
    width: 100vw;
    float: right;
    list-style: none;
}

#content {
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
    padding-top: 5px;
}

.menu {
    text-align: center;
    padding: 10px 0 1000px 0;
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #4a4a4a;
    z-index: 102;
    /*border-width: 1px;*/
}

.menu.active {
    display: block;
    /*height: inherit; !* We just need any height here, could also be 10px *!*/
    height: 75vh;
    padding-bottom: 200px;
    overflow-y: scroll;
}

.menu a
{
    user-select: none;
    text-decoration: none;
    color: #4a4a4a;
    display: block;
    box-sizing: border-box;
}

.menu > li > a
{
    font-size: 1.4rem; /* Font size of top-level menu items */
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    /*border-style: solid;*/
    /*border-width: 1px 0 1px 0;*/
    /*border-color: #fff;*/
}

.menu > li > a:hover
{
    /*background-color: #ebfffe !important;*/
    /*border-style: solid;*/
    /*border-width: 1px 0 1px 0;*/
    /*border-color: #ddd !important;*/
}

.menu > li > ul > li
{
    font-size: 1.1rem;
    text-align: left;
    border-width: 0 0 1px 0;
    border-color: #eee;
    border-style: solid;

    /*background-color: red;*/
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
}

.menu > li > ul > li:first-of-type
{
    border-top-width: 1px;
}

.menu > li > ul > li:last-of-type
{
    border-width: 0;
}

.menu > li:last-of-type > ul:last-of-type > li:last-of-type {
    margin-bottom: 200px;
}

.menu > li > ul > li > a
{
    /*padding-top: 5px;*/
    /*padding-bottom:  5px;*/
    padding: 10px 5px 10px 20px;
}


.menu > li > ul > li > a.overview
{
    padding-left: 8px;
    color: #a6782b;
    font-weight: bold;
    /*padding-bottom: 0;*/
    /*padding: 10px 5px 5px 8px;*/
    /*margin-bottom: -4px;*/
    /*width: 326px;*/
    /*vertical-align: center;*/
    /*background-color: yellow;*/
}


.menu > li > ul > li > span.subheading
{
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #4a4a4a;
    background-color: #f0f0f0;;
    /*font-style: italic;*/
    display: block;
    /*text-decoration: underline;*/
}

.menu > li > ul
{
    /*padding-top: 5px;*/
    /*padding-bottom: 10px;*/
    /*margin-bottom: 10px;*/
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #ccc;
}

.menu > li {
    /*margin-bottom: 7px; !* Spacing between top-level menu items *!*/
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #ccc;
}

.menu > li:first-of-type {
    /*margin-bottom: 7px; !* Spacing between top-level menu items *!*/
    border-width: 1px 0 1px 0;
}

/*.menu > li:last-of-type {*/
/*    !*margin-bottom: 7px; !* Spacing between top-level menu items *!*!*/
/*    border-width: 0;*/
/*}*/


/*.menu ul {*/
/*    display: none;*/
/*}*/

/*.menu ul li {*/
/*    display: none;*/
/*}*/



/*.menu li ul span.menu_personality_parent*/
/*{*/
/*    color:#4a4a4a;*/
/*    font-size:0.8rem;*/
/*    border-radius: 5px;*/
/*    border: 1px solid #ddd;*/
/*    padding: 3px 4px 3px 4px;*/
/*    position: relative;*/
/*    top: -0.1em;*/
/*    left: -0.4em;*/
/*}*/

.menu li ul span.menu_personality_parent
{
    display: block;
    /*color:#888;*/
    font-size:0.8rem;
    padding: 3px 4px 3px 4px;
    position: relative;
    width: fit-content;
    top: -0.1em;
    left: -0.8em;
    color: #444;
    /*background-color: #f0f0f0;*/
    /*background-color: #f9f9f9;*/
    background-color: #f0f0f0bb;
    /*background-color: #fff9f1;*/
}

.menu_personality_parent_relation
{
    /*color:#888;*/
    font-size:1rem;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 3px 4px 3px 4px;
    position: relative;
    top: 0.1em;
    left: -0.1em;
    color: #444;
    background-color: #f0f0f0;
}

/*li.pull-down*/
/*{*/
/*    padding-right:6px;*/
/*}*/
li.pull-down > a
{
    display: flow-root;
    background-image: url('../images/darrow.png');
    background-position: 96% 75%;
    background-repeat: no-repeat;
    padding-right: 17px; /* Controls space between down-arrow and menu title */
}

/*.menu li ul span.doublearrow*/
/*{*/
/*    font-size: 1.2em;*/
/*    text-decoration: none;*/
/*    padding: 0;*/
/*    position: relative;*/
/*    top: -0.15em;*/
/*}*/

.menu li ul a.notimplemented
{
    color: #a6782b;
}

div.menu-schafkopf {
    display: none;
}

span.menu-schafkopf-mobile {
    /*display: none;*/
    /*color: #c9ae82;*/
    /*color: #c7c7c7;*/
    color: #444;
    display: block;
    font-size: 14px;
    position: relative;
    bottom: -1px;
    font-weight: normal;
}

.menu > li:not(:last-of-type) > a
{
    padding-top: 2px;
    padding-bottom: 3px;
    /*text-decoration-color: #be945c !important;*/
    text-decoration-color: #919191 !important;
}


span.menu-schafkopf-mobile img {
    width: 28px;
    margin-right: 5px;
    top: 2px;
    position: relative;
}