body
{
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13pt;
    color: black;
    padding:0;

}

.link {
    color: #00aa00;
    cursor: pointer;
}

/* Startseite und Generelles */

.start {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.startapp {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    width:100%;
    margin:0;
    padding:0;
    top:0; left:0; right:0; bottom:0px;
    background-color:white;
    overflow:none;
}

div.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align:center;
}

.header {
    margin: 0;
    position: absolute;
    padding:0;
    padding-left:10px;
    top: 0;
    left: 0;
    min-height: 100px;
    right:0;
    background-color: black;
    color: white;
}

.apptitle {
    font-size: 32px;
    font-weight: 900;
    height:36px;
}

.headertitle {
    display: inline-block;
    height:65px;
    width: calc(100% - 100px);
    white-space:nowrap;
    overflow:hidden;
}

.footer {
    position: absolute;
    width: calc(100% - 10px);
    height:25px;
    padding-left:10px;
    padding-top: 5px;
    position:absolute;
    bottom:0; left:0; right:0;
    background-color:#000000;
    color: white;
    font-size:12pt;
}

.cont {
   position:absolute;
   overflow-y: auto;
   overflow-x: hidden;
   top:100px;
   bottom: 30px;
   width: 100%;
   background-color:white;
   box-sizing: border-box;
   padding: 10px;
}

.page_right {
  float:right;
  margin-right:10px;
}

button.btn {
    min-width: 125px;
    min-height: 35px;
    border:1px solid black;
    border-radius: 10px;
    background-color: #808080;
    background-image: linear-gradient(180deg, #808080, #404040);
    color: white;
    cursor: pointer;
    font-size: 13pt;
    margin-bottom:2px;
}

button.btn2 {
    min-width: 120px;
    min-height: 25px;
    border:1px solid black;
    border-radius: 10px;
    background-color: #808080;
    background-image: linear-gradient(180deg, #808080, #404040);
    color: white;
    cursor: pointer;
    font-size: 11pt;
}

button.btn3 {
    min-width: 120px;
    min-height: 35px;
    border:1px solid black;
    border-radius: 10px;
    background-color: #808080;
    background-image: linear-gradient(180deg, #808080, #404040);
    color: white;
    cursor: pointer;
    font-size: 13pt;
    vertical-align: top;
    margin-top: 9px;
}

button.btn:disabled {
    color: black;
    cursor: not-allowed;
}

button.btn2:disabled {
    color: black;
    cursor: not-allowed;
}

button.btn3:disabled {
    color: black;
    cursor: not-allowed;
}

button.red {
    width: 120px;
    height: 35px;
    border:1px solid black;
    border-radius: 10px;
    background-image: linear-gradient(180deg, #FF0000, #C80000);
    color: white;
    cursor: pointer;
    font-size: 13pt;
}

.bold {
    font-weight:bold;
}

.fs20 {
    font-size: 20pt;
}

.silver {
    color : silver;
}

.vcenter {
    vertical-align:middle;
}

.logolinks {
    float: left;
    margin: 10px 10px 0px 0;
}

input, select {
    font-size: 13pt;
    padding : 4px;
    border-radius : 5px;
    border: 1px solid black;
    margin-bottom:2px;
}

input:focus, select:focus {
    -webkit-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.75);
}

.left {
    text-align:left;
}

.center {
    text-align:center;
}

.spin {
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    z-index: 1000;
}

.w100 {
    width : 100px;
    display:inline-block;
}

.w150 {
    width : 150px;
    display:inline-block;
}

.w200 {
    width : 200px;
    display:inline-block;
}

.w300 {
    width : 300px;
    display:inline-block;
}

.w400 {
    width : 400px;
    display:inline-block;
}

/* Modal box */

.modal-mask {
        position: fixed;
        z-index: 9998;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: table;
        transition: opacity 0.3s ease;
}

.modal-wrapper {
        display: table-cell;
        vertical-align: middle;
}

.modal-container {
        width: 340px;
        margin: 0px auto;
        /*padding: 20px 30px 40px 30px;*/
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
        transition: all 0.3s ease;
        font-family: Helvetica, Arial, sans-serif;
}

      .modal-header h3 {
        margin-top: 0;
        padding: 20px 20px 0px 20px;
        color: #9c0000;
      }

      .modal-body {
        margin: 20px 0;
        padding: 0px 30px 20px 30px;
        white-space: pre-wrap;
        text-align:center;
      }

      .modal-footer {
        background-color: #008030;
        height: 40px;
        padding: 5px 30px 0px 30px;
      }

      .modal-default-button {
         min-width: 120px;
         min-height: 35px;
         border:1px solid black;
         border-radius: 10px;
         background-color: #808080;
         background-image: linear-gradient(180deg, #808080, #404040);
         color: white;
         cursor: pointer;
         font-size: 13pt;
         float: right; margin-left:10px;
      }

      /*
       * The following styles are auto-applied to elements with
       * transition="modal" when their visibility is toggled
       * by Vue.js.
       *
       * You can easily play with the modal transition by editing
       * these styles.
       */

      .modal-enter {
        opacity: 0;
      }

      .modal-leave-active {
        opacity: 0;
      }

      .modal-enter .modal-container,
      .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
      }


/* Ende Modal box */

/* error message */
.redcenter {
        width: 340px;
        height: 100px;
        margin: 0 auto;
        /*padding: 20px 30px 40px 30px;*/
        background-color: #ff0000;
        color: white;
        text-align: center;
        vertical-align:middle;
        border-radius: 3px;
        font-weight:bold;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
        transition: all 0.3s ease;
        font-size:20pt;
        font-family: Helvetica, Arial, sans-serif;
}

/* Dropdown Menu */

/* The container <div> - needed to position the dropdown content */
.dropdown {
  /*position: relative; */
  display: inline-block;
  margin-right: 10px;
}

.userdrop {
  /*position: absolute;
  top: 20px;
  right: 0px; */
  margin-top: 20px;
  margin-right: 10px;
  float:right;
}

.menutopic {
     min-width: 80px;
     height: 27px;
     display: inline-block;
     cursor: pointer;
     border: none;
     background-color : #000000;
     color: white;
     font-size:12pt;
}

.menutopicsel {
     min-width: 80px;
     height: 27px;
     display: inline-block;
     cursor: pointer;
     border: none;
     background-color : #606060;
     color: #ffffaa;
     font-size:12pt;
}

.menutopic:disabled {
     color: #808080;
     cursor: not-allowed;
}
.menutopic:disabled:hover {
     color: #808080;
     cursor: not-allowed;
     background-color : #000000;
}

.menutopic:hover,.usermenutopic:hover {
     background-color : #606060;
     color: #ffffaa;
     transition: all 0.3s;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  opacity: 0;
  position: absolute;
  background-color: #202020;
  color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size:12pt;
  transition: all 0.3s;
}

.cont-left {
  left:10px;
}

.cont-right {
  right:10px;
}

.dropdown-info {
  padding: 5px 5px;
  color: silver;
}

/* Links inside the dropdown */
.dropdown-content span {
  padding: 5px 5px;
  text-decoration: none;
  color:white;
  display: block;
  cursor: pointer;
}

.dropdown-content hr {
  margin-top: 3px;
  margin-bottom: 3px;
}

/* Change color of dropdown links on hover */
.dropdown-content span:hover {
  background-color: #606060;
  transition: all 0.3s ease-in-out;
  color: #ffffaa;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .menutopic {
  background-color: #606060;
  color: #ffffaa;
}

/* Veranstalter */

.cont_right {
  float:right;
}

.tabtitle {
    font-size: 18px;
    font-weight: bold;
    height:20px;
}

.table-wrapper
{
    border: 1px solid black;
    width: 100%;
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 10px;
}

table {
  border: 1px solid black;
  border-collapse: collapse;
  border-spacing: 0;
  width:100%;
}

td,th {
  border: 1px solid black;
  padding: 5px;
  height: 15px;
}

tr {
  height: 15px;
}
tr.white {background: #FFF}

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

td.marked, tr.marked {
   background: #8a008a;
   color : white;
}

/*  VK-Nummern  */

.nr-wrapper
{
    border: 1px solid black;
    width: 100%;
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 10px;
}

.vkn_box
{
    border: 1px solid black;
    width: 85px;
    height: 60px;
    display:inline-block;
    margin-left:5px;
    margin-top:5px;
}

.vkn_box_sm
{
    border: 1px solid black;
    width: 64px;
    height: 40px;
    display:inline-block;
    margin-left:5px;
    margin-top:5px;
}

.vkn_box_blocked
{
    border: 1px solid black;
    width: 85px;
    height: 60px;
    display:inline-block;
    background: gray;
    background: linear-gradient(to left top, transparent 47.75%, currentColor 49.5%, currentColor 50.5%, transparent 52.25%);
    margin-left:5px;
    margin-top:5px;
}

.vkn {
    height:55px;
    position: relative;
    text-align: center;
}

.vkn_sm {
    height:38px;
    position: relative;
    text-align: center;
}

.vkn > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -16px;
}

.vkn_sm > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -14px;
}

.vkn_nrbox
{
    width: 64px;
    height: 55px;
    font-size: 20pt;
    font-style: bold;
    display: inline-block;
}

.vkn_nrbox_sm
{
    width: 64px;
    height: 38px;
    font-size: 20pt;
    font-style: bold;
    display: inline-block;
}

.vkn_ampelbox
{
    border-right: 1px solid black;
    width: 20px;
    height: 58px;
    background: silver;
    text-align:center;
    display:inline-block;
    margin-top:0;
    padding-top:2px;
}

.ampelgrau
{
    height: 14px;
    width: 14px;
    border: 1px solid black;
    background-color: #888;
    border-radius: 50%;
    display: inline-block;
}

.ampelrot
{
    height: 14px;
    width: 14px;
    border: 1px solid black;
    background-color: #ff0000;
    border-radius: 50%;
    display: inline-block;
}

.ampelgelb
{
    height: 14px;
    width: 14px;
    border: 1px solid black;
    background-color: #ffff00;
    border-radius: 50%;
    display: inline-block;
}

.ampelgruen
{
    height: 14px;
    width: 14px;
    border: 1px solid black;
    background-color: #00ff00;
    border-radius: 50%;
    display: inline-block;
}

.vkred     { background-color: #ff0000; color: #ffffff; }
.vkrose    { background-color: #ffc0c0; color: #000000; }
.vkpink    { background-color: #ff00ff; color: #000000; }
.vkorange  { background-color: #ff8000; color: #000000; }
.vkyellow  { background-color: #ffff00; color: #000000; }
.vkgreen   { background-color: #00ff00; color: #000000; }
.vkblue    { background-color: #0000ff; color: #ffffff; }
.vkpurple  { background-color: #b000eb; color: #ffffff; }
.vkwhite   { background-color: #ffffff; color: #000000; }
.vkgreen2  { background-color: #c0ffc0; color: #000000; }
.vkblue2   { background-color: #00c0ff; color: #000000; }
.vkgrey2   { background-color: #c0c0c0; color: #000000; }
.vkgrey    { background-color: #505050; color: #ffffff; }