.pb_body {
        line-height: 1.2;
        font-family: Arial;
        margin:2px;
        width:99.7vw;
        /*height:90vh;*/
}
.frametable        {
        /*width:99vw;*/
        height:98vh;
        border-width:1px;
        border-style:solid;
        border-color:darkgrey;
        border-radius:1em;
        background-color:#f6f6f6;
        border-collapse:collapse;
}
.titlefield        {
    font-family:Arial;
        font-size:1.4em;
        text-align:center;
        height:40px;
        /*background-image: linear-gradient(rgb(160,160,160) 0%, rgb(180,180,180) 40%, rgb(180,180,180) 60%, rgb(160,160,160) 100%);*/
        background-color:#c0c0c0;
        /*font-weight:bold;*/
}
.titlefield.left        {
        border-top-left-radius:0.6em;
        border-bottom-left-radius:0.0em;
        border-right-style:solid;
        padding-top:10px;
        padding-bottom:6px;
}
.titlefield.right        {
        border-top-right-radius:0.6em;
        border-bottom-right-radius:0.0em;
}
.titlefield.clubiconfield        {
        padding-left:25px;
        padding-right:25px;
        width:80px;
}
.titlefield.projectname        {
        padding-left:15px;
        padding-right:15px;
        width:300px;
        border-right-style:solid;
        text-align:left;
}
.titlefield.pagename        {
        border-right-style:solid;
        text-align:center;
        width:25em;

}
.m_clubicon{
        height:120px;
}
.clubicon{
        height:40px;
}
.pagefooter        {
    font-family:Arial;
        font-size:0.9em;
        text-align:center;
        height:1em;
        background-color:#c0c0c0;
        /*font-weight:bold;*/
}
.pagefooter.left        {
        border-top-left-radius:0.0em;
        border-bottom-left-radius:0.8em;
    width:5%;
 }
.pagefooter.right        {
        border-top-right-radius:0.0em;
        border-bottom-right-radius:0.8em;
    width:5%;
}
.pagefooter.mobile        {
    font-size:1.4em;
}
.m_titlefield        {
    border-width:1px;
    border-style:solid;
    border-color:darkgrey;
    font-family:Arial;
    font-size:38px;
    font-weight:bold;
    text-align:center;
    height:40px;
    /*background-image: linear-gradient(rgb(170,170,170) 0%, rgb(220,220,220) 40%, rgb(220,220,220) 60%, rgb(170,170,170) 100%);*/
    background-color:#c0c0c0;
    background-size:contain;
}
.titlefield.user {
        font-size:12px;
        width:120px;
}
.topmenu {
        /*border-width:1px;
        border-style:solid;
        border-color:darkgrey;*/
        vertical-align:bottom;
        line-height:1em;
        height:2em;
}
.content {
        /*border-width:1px;
        border-style:solid;
        border-color:darkgrey;*/
        vertical-align:top;
}

a:link { text-decoration:none;border:2px;color:black; }
a:visited { text-decoration:none; color:black;}
a:hover { text-decoration:none;color:blue; }
img { text-decoration:none;border:0px; }
.tabnavheader {
    background-color:#e0e0e0;
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    color:#010101;
    vertical-align:middle;
    padding:5px;
    margin: 1px;
    border:1px;
    border-color: white;
    height:22px;
        background-image:linear-gradient(rgb(203,225,252) 0%, rgb(125,165,224) 100%);
}
.tabheader {
    font-size:13px;
    background-color:silver;
    font-family:Arial;
    font-weight:bold;
    text-align:left;
    color:#0F0F0F;
    vertical-align:middle;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:3px;
    padding-top:3px;
    border-bottom-color: #777777;
    border-right-color: #777777;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-width:1px;
    border-style:solid;
    margin: 0px;
           background-image:linear-gradient(rgb(230,230,230) 0%, rgb(170,170,170) 100%);

}
.tabheader2 {
        font-size:12px;
        background-color:silver;
        font-family:Arial;
    font-weight:bold;
        text-align:left;
        color:#0F0F0F;
        vertical-align:middle;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:3px;
        padding-top:3px;
        border-bottom-color: #777777;
        border-right-color: #777777;
        border-top-color: #ffffff;
        border-left-color: #ffffff;
        border-width:1px;
        border-style:solid;
        margin: 0px;
        background-image:linear-gradient(rgb(203,225,252) 0%, rgb(125,165,224) 100%);
        z-index:99;
}
.tabheader_orange {
    font-size:18px;
    background-color:silver;
    font-family:Arial;
    font-weight:bold;
    text-align:left;
    color:#0F0F0F;
    vertical-align:middle;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:3px;
    padding-top:3px;
    border-bottom-color: #777777;
    border-right-color: #777777;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-width:1px;
    border-style:solid;
    margin: 0px;
        background-image:linear-gradient(rgb(251,226,142) 0%, rgb(238,149,021) 100%);
}
.tabheader_red {
    font-size:18px;
    background-color:silver;
    font-family:Arial;
    font-weight:bold;
    text-align:left;
    color:#0F0F0F;
    vertical-align:middle;
    padding-left:5px;
    padding-right:5px;
    padding-bottom:3px;
    padding-top:3px;
    border-bottom-color: #777777;
    border-right-color: #777777;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-width:1px;
    border-style:solid;
    margin: 0px;
        background-image:linear-gradient(rgb(255,184,184) 0%, rgb(255,141,144) 100%);
    background-size:30px;
}
.tabdata {
        background-color:#eaefff;
        font-family:Arial;
        font-size:13px;
        font-weight:normal;
        text-align:left;
        color:#0F0F0F;
        vertical-align:middle;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:1px;
        padding-top:1px;
        border-bottom-color: #777777;
        border-right-color: #777777;
        border-top-color: #ffffff;
        border-left-color: #ffffff;
        border-width:1px;
        border-style:solid;
        margin: 0px;
}

.divframe18 {
 /*        overflow-y: auto;*/
        /*#max-height: 90vh;
        min-height: 70vh;*/
        width:94vw;
        height:100%;
        /*height:78vh;*/
        /*position: sticky;*/
        top: 0px;
        border-style:solid;
        border-color:silver;
        border-radius:0.5em;
        border-width:1px;
        margin: 0.5em;
        padding: 1em;
}
.divframe18.tabNavigation {
        border-style:solid;
        border-color:silver;
        border-top-left-radius:0.5em;
        border-top-right-radius:0.5em;
        border-bottom-left-radius:0em;
        border-bottom-right-radius:0em;
        padding-bottom:7px;
        margin-bottom:0em;
        width: 94vw;
}
.divframe18.tabContentDiv {
        border-style:solid;
        border-color:silver;
        border-top-left-radius:0em;
        border-top-right-radius:0em;
        border-bottom-left-radius:0.5em;
        border-bottom-right-radius:0.5em;
        padding-bottom:7px;
        padding-left:16px;
        margin-top:0em;
        height: 73vh;
        width: 94vw;
        overflow:hidden;
}
.divframe18.innerContentDiv {
        border-style:hidden;
        /*border-style:solid;*/
        border-color:silver;
        /*border-radius:0.5em;*/
        /*padding-bottom:7px;*/
        margin-top:0em;
        overflow:scroll;
        width:98%;
        height:97%
}
.divframe18.topfilter {
        height-max: 70vh;
}
.sectionframe18 {
        top: 0px;
        border-style:solid;
        border-color:silver;
        border-radius:0.5em;
        border-width:1px;
        margin: 0.5em;
        padding: 1em;
        font-weight:bold;
        width:99%;

}
.tableFixHead18 {
        overflow-y: auto;
        max-height: 700px;
        min-height: 650px;
        position: sticky;
        top: 0px;
        border-style:none;
        margin: 0em;
        padding: 0em;

}
/*.tableFixHead thead th { position: sticky; top: 0; }*/

.datatab18 {
        /*background-color:#eaefff;*/
        color:#0F0F0F;
    border-style:none;
    border-collapse:collapse;
        /*vertical-align:middle;*/
        padding-left:5px;
        padding-right:5px;
        padding-bottom:1px;
        padding-top:1px;
        overflow: auto;
        /*border-color: #777777;
        border-bottom-color: #777777;
        border-right-color: white;
        border-top-color: white;
        border-left-color: white;
        border-width:1px;
        border-style:solid;
        border-radius:0.5em;*/
        /*margin: 0px;*/
}
.tabline18 {
}
.tabdata_thinline {
        line-height:0.8;
}
.tabdatacheckbox {
        line-height:0.5;
}
.tabheader18 {
        position:sticky;
        top:0;z-index: 1001;
}
.tabheadercell18 {
        font-size:0.96em;
        /*background-color:#dddddd;*/
        background-color:#a6bad9;
        font-family:Arial;
    font-weight:bold;
        text-align:left;
        color:#0F0F0F;
        vertical-align:middle;
        padding-left:6px;
        padding-right:6px;
        padding-bottom:1px;
        padding-top:1px;
        border-bottom-color: #777777;
        border-right-color: #777777;
        border-top-color: #777777;
        border-left-color: #777777;
        border-width:2px 0px 2px 0px;;
        border-style:solid;
        /*margin: 0px;*/
        /*background-image:linear-gradient(rgb(203,225,252) 0%, rgb(125,165,224) 100%);*/
        /*z-index:99;*/
}
.tabheadercell18.grey2 {
        background-color:#aaaaaa;
        color:black;
}
.tabdata18 {
        font-family:Arial;
        font-size:0.85em;
        font-weight:normal;
        text-align:left;
        color:#0F0F0F;
        vertical-align:middle;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:3px;
        padding-top:3px;
        border-bottom-color: #777777;
        border-right-color: white;
        border-top-color: white;
        border-left-color: white;
        border-width:0px 0px 1px 0px;
        border-style:solid;
        overflow:hidden;
        white-space:nowrap;
        /*margin: 0px;*/
}
.tabdata18.thinline {
        font-size:0.85em;
        padding-bottom:1px;
        padding-top:1px;
}
.tabinput18{
        background-color:#f8f8f8;
        padding-top:3px;
        padding-bottom:3px;
        border:none;
}
.maskdatatab18 {
    background-color:#dbeafd;
    font-family:Arial;
    font-size:1em;
    font-weight:normal;
    color:#010101;
    vertical-align:middle;
    padding:42px;
    margin: 2px;
    border:1px;
    position:relative;
    top:0px;
    left:0px;
}
.maskdatacell18 {
        font-size:0.95em;
        border:none;
        /*text-align:right;*/
}
.masklabel18 {
        display:inline-block;
    background-color:#e0e0e0;
        /*background-color:#ededed;*/
    font-family:Arial;
    font-size:0.9em;
    font-weight:bold;
    color:#010101;
    text-align:right;
    vertical-align:middle;
        border:none;
    padding:4px;
    padding-right:10px;
    padding-left:10px;
    margin: 2px;
    width:18em;
           /*background-image:linear-gradient(rgb(230,230,230) 0%, rgb(170,170,170) 100%);*/
}
.maskinput18 {
        font-family:Arial;
        font-size:13px;
}



.tabinput{
        background-color:#ffffff;
        padding-top:0;
        padding-bottom:0;
        border:none;
}
.pb_colorpicker{
        height:20px;
        padding:0;
}
.maskdatatab {
    background-color:#dbeafd;
    font-family:Arial;
    font-size:12px;
    font-weight:normal;
    color:#010101;
    vertical-align:middle;
    padding:42px;
    margin: 2px;
    border:1px;
    position:relative;
    top:0px;
    left:0px;
}
.maskdatacell {
        font-size:13px;
        border:none;
        text-align:right;
}
.masklabel {
        display:inline-block;
    background-color:#e0e0e0;
    font-family:Arial;
    font-size:12px;
    font-weight:bold;
    color:#010101;
    text-align:right;
    vertical-align:middle;
        border:none;
    padding:4px;
    padding-right:10px;
    padding-left:10px;
    margin: 2px;
    width:140px;
           background-image:linear-gradient(rgb(230,230,230) 0%, rgb(170,170,170) 100%);
}
.maskinput {
        font-family:Arial;
        font-size:13px;
}
/*tabelle mit feststehendem header und scrollable content*/
div.tableContainer {
        clear: both;
        /*7.10.23 border: 1px solid #0;*/
        height: 700px;
        overflow: auto;
        /*width:1600px;*/
        font-size: 0.7em;
}
/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
        overflow: hidden;
        height:700px;
}
/* define width of table. IE browsers only                 */
div.tableContainer table {
        float: left;
        height:700px;
        /*width: 1600px*/
}
/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
         /*width: 1616px;*/
         height:4000px;
}
/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
        position: relative;
}
/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

/* make the TH elements pretty */
thead.fixedHeader th {
        background-color: #C0C0C0;
        border-left: 1px solid #ffffff;
        border-right: 1px solid #446484;
        border-top: 1px solid #ffffff;
        font-weight: normal;
        padding: 4px 3px;
        text-align: left
}

html>body tbody.scrollContent {
        display: block;
        height: 700px;
        overflow: auto;
        width: 100%
}

html>body thead.fixedHeader {
        display: inline;
        overflow: auto;
        width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
        background-color: #FFF;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCC;
        border-top: 1px solid #DDD;
        padding: 2px 3px 3px 4px
}
tbody.scrollContent tr.alternateRow td {
        background-color: #EEE;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCC;
        border-top: 1px solid #DDD;
        padding: 2px 3px 3px 4px
}
.contentCell  {
        padding:4px;
        display:table-cell;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
}
.reservation_form.label
{        padding-top:1px;
        padding-bottom:1px;
        padding-left:10px;
        padding-right:4px;
        font-family:Arial;
        font-size:13px;
        /*border:1px;*/
        /*border-style:unset;*/
        /*margin:5px;*/
        line-height:2.1em;
}
.reservation_form.data
{        padding-top:2px;
        padding-bottom:2px;
        padding-left:3px;
        padding-right:4px;
        font-family:Arial;
        font-size:14px;
        font-weight:bold;
        border:1px;
        border-style:outset;
        background-color:white;
        line-height:1.3;
        color:black;
        /*margin:6px;*/
}
.reservation_form.data.readonly{
        background-color:#dddddd;
}
.reservation_form.label_newline
{        display:inline-block;
        width:100px;
}


.reservation_form.formcontainer_div{
        display:flex;
        flex-direction:column;;
    width:100%;
        border-radius:0.3em;
        /*background:#bbccaa;*/
}
.reservation_form.titledatacomment_div {
        /*background:#aabbcc;*/
        display:flex;
        flex-direction:row;
        border-radius:0.3em;
}
.reservation_form.topleft_div {
        display:flex;
        flex-direction:column;
        border-radius:0.3em;
        line-height12em;
        width:max-content;
        /*background:#bbccaa;*/
}
.reservation_form.topright_div  {
        border-radius:0.3em;
        margin-left:2em;
        /*background:#ccaaaa;*/
}
.reservation_form.title_div {
        border-radius:0.3em;
        /*background:#ccaadd;*/
        line-height:2em;
        font-size:18px;
        font-weight:bold;
        padding-left:10px;
}
.reservation_form.data_div {
        border-radius:0.3em;
}
.reservation_form.button_div {
        border-radius:0.3em;
        /*background:#ddffaa;*/
}
.tabdataheadline_ss2
{        background-color:#eaefff;
         font-family:Arial;
         font-size:13px;
         font-weight:normal;
         text-align:left;
         color:#0F0FFF;
         vertical-align:middle;
         padding-left:5px;
         padding-right:5px;
         padding-bottom:2px;
         padding-top:2px;
         border-bottom-color: #777777;
         border-right-color: #777777;
         border-top-color: #ffffff;
         border-left-color: #ffffff;
         border-width:1px;
         border-style:solid;
         margin: 0px;
}
.tabdata_ss2
{        font-family:Arial;
        font-size:12px;
        font-weight:normal;
        text-align:left;
        color:#0F0F0F;
        vertical-align:middle;
        padding-left:5px;
        padding-right:5px;
        padding-bottom:2px;
        padding-top:2px;
        border-bottom-color: #777777;
        border-right-color: #777777;
        border-top-color: #ffffff;
        border-left-color: #ffffff;
        border-width:1px;
        border-style:solid;
        margin: 0px;
        white-space:nowrap;
}
.center_dialog
{        margin:auto;
        width:60%;
        padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        display:none;
}
/*Dropdown Menu 2021*/
.dropbtn  {
  background-color: #7096CE;
  /*2024 Test*/
  /*background-color: #7D8591*/;
  color: white;
  padding: 8px;
  font-size: 11px;
  /*7.10.23 border: 1;*/
  cursor: pointer;
  height:2.5em !important;
  width:2.5em !important;
        border-style:solid;
        border-width:1px;
        border-color:white;
}
.dropbtn.log_inout_ua23 {
  background-color: #abb1b6;
}
.mobile.dropbtn  {
  background-color: #7096CE;
  background-size: 100px 100px;
  color: white;
  padding: 8px;
  font-size: 11px;
  border: 1px;;
  border-radius: 1.9em !important;
  cursor: pointer;
  height:5em !important;
  width:5em !important;
  border-style:solid;
  border-width:1px;
  border-color:white;
}
.dropbtn:hover, .dropbtn:focus {
  background-color: #90B6CE;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
  font-size: 16px;
}
.dropdown-content a {
        /*7.10.23 text-size:12px;*/
        color: black;
        padding: 12px 12px;
        text-decoration: none;
        display: block;
        font-size: 16px;
}
.dropdown a:hover {
        background-color: #90B6CE;
        border-style:solid;
        border-width:1px;
        border-color:white;
        color:black;
}
.show {
        display: block;
}
.transfer_btn{
  background-color: #7490ff4f;
  color: white;
  padding: 6px;
  font-size: 8px;
  border: none;
  cursor: pointer;
  border-radius:20px;
  margin:0px !important;
  height:24px !important;
  width:24px !important;
}

.top-menu{}

._leg_tm_header{
        border: 1px ;
        font-size:14px;
        font-weight:bold;
        background:#aaaaaa;
        padding:3px;
        height:20px;
}
.releasetab_content{
        font-size:13px;
        border: 1px solid whitesmoke;
        background-color:#D0E0FF;
        padding:10px;
        vertical-align:top;
}

/*noch nicht genutzt, da Farb-Buttons fÃƒÆ’Ã†â€™Ãƒâ€šÃ‚Â¼r unterschiedlich Schedules definiert*/
.datenavbutton_8_7{
        font-size:20px;
        font-weight:bold;
        background-color:#c5d3f4;
        color:white;
        padding:5px 16px 5px 16px;
        margin:8px 4px 8px 4px !important;
        border-radius:0.5em;
}
.datenavbutton_8_7:hover{
        background-color:#90B6CE;
        color:white;
}
/* 01/2022: Klassen für Dropdown-Menu*/
.pb-header {
        position: relative;
        margin: auto;
        align-items: center;
        justify-content: space-between;
        padding: 0px 0px 0px 30px;
        z-index: 100;
        display:inline-grid;
        margin:0px;
        left:-100px;
        top:-31px;
}
.pb-header a {
        text-decoration: none;
        color: black;
}
.pb-header ul {
        list-style: none;
        padding-left:0px;
}
.pb-menu-items {
        /*display: flex;*/
        align-items: center;
        /* 7.10.23 padding: 1 rem 1rem;*/
}
.pb-menu-items li {
        transition: background 0.3s ease-in-out;
        width:250px;
}
.pb-menu-items li:hover {
  /*background-color: #ff652f;*/
}
.pb-dropdown {
        position: relative;
        border:1px;
        border-color:black;
}
.pb-dropdown-menu,
.pb-menu-right,
.pb-menu-right1,
.pb-menu-right2,
.pb-menu-right3 {
        position: absolute;
        background-color: #e1e1e1;
        width: 250px;
        top: 50px;
        left: 80px;
        right:50px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index:100;
}
.pb-dropdown-menu.mobile,
.pb-menu-right.mobile,
.pb-menu-right1.mobile,
.pb-menu-right2.mobile,
.pb-menu-right3.mobile {
        width: 420px;
}
.pb-menu-right,
.pb-menu-right1,
.pb-menu-right2,
.pb-menu-right3 {
        top:0px;
        left:200px;
        right:250px;
}
.pb-menu-item {
          display: flex;
          justify-content: space-between;
          white-space: nowrap;
          width: 230px;
    padding:0.65rem 1rem;
          font-size:16px;
          font-weight:bold;
}
.pb-menu-item.mobile {
          display: flex;
          justify-content: space-between;
          white-space: nowrap;
          width: 400px;
    padding:0.65rem 1rem;
          font-size:30px;
          font-weight:bold;
}
.pb-dropdown:hover .pb-dropdown-menu {
          top: 34px;
          opacity: 1;
          visibility: visible;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.pb-dropdown-right:hover .pb-menu-right,
.pb-dropdown-right1:hover .pb-menu-right1,
.pb-dropdown-right2:hover .pb-menu-right2,
.pb-dropdown-right3:hover .pb-menu-right3 {
          left: 80%;
          opacity: 1;
          visibility: visible;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        width:320px;
}
.pb-angle-right::before,
.pb-angle-right1::before,
.pb-angle-right2::before,
.pb-angle-right3::before {
        content:">";
        font-weight:bold;
        font-family:"Arial";
}
.pb-nav{
        width:30px;
        height:30px;
}
.pb-menu-button{
        display:inline-grid;
        margin:0px;
        position:absolute;
        left:80px;
        top:0px;
}
.mobile.pb-menu-button{
        left:60px;
        top:-33px;
}
.nav_inline,.nav_inline:link,nav_inline:visited {
        text-align:center;
        font-family: Arial;
        font-weight:bold;
        color: black;
        font-size:0.8em;
        text-decoration:none;
        display:inline-block;
        border: 1px solid black;
        border-color:white;
        width:32px;
        margin: 1px;
        margin-left:6px;
        margin-right:6px;
        margin-top:4px;
        margin-bottom:4px;
        padding:3px;
        border-radius:0.7em;
}
.m_nav_inline {
        text-align:center;
        font-family: Arial;
        font-weight:bold;
        color: black;
        font-size:35px;
        text-decoration:none;
        display:inline-block;
        border: 1px solid black;
        border-left-color:white;
        border-top-color:white;
        margin: 1px;
        margin-left:2px;
        margin-right:2px;
        padding:3px;
        border-radius:0.7em;
        width:3em;
        height:1.6em;
        padding-top:13px;
}
.nav_blue{
        background-color:#dce6fd;
}
.nav_red{
        background-color:#eecfcf;
}
.nav_green{
        background-color:#ddfddc;
}
.nav_orange{
        background-color:#ffe89f;
}
.nav_violett{
        background-color:#e4e4f8;
}
.nav_yellow{
        background-color:#fbfec2;
}
.nav_inline:hover {
        background-image:linear-gradient(rgb(255,255,220) 0%, #e68743 100%);
        color: black;
        background-size:150px;
}
.type_image {
        height:11px;
        width:14px;
}
.m_type_image {
        height:24px;
        width:31px;
}
.bookingdark{
    font-family:Arial;
    font-size:0.7em;
    border:1px;
    text-decoration:none;
    padding:4px;
    border-style:outset;
    /*min-width:80px;*/
        text-align:center;
        vertical-align:top;
        padding-top:4px;
        padding-bottom:4px;
        border-radius:.6em
}
.m_bookingdark{
    font-family:Arial;
    font-size:30px;
    border:1px;
    text-decoration:none;
    padding:4px;
    border-style:outset;
        text-align:center;
        vertical-align:top;
        padding-top:4px;
        padding-bottom:4px;
        border-radius:.7em
    /*min-width:80px;*/
}
.bookingselected{
    border:3px solid red !important;
        /*border-radius:.9em*/
}
.bookingdark a:visited        {
        color:black;
}
.bookingdark a:link{
        color:black;
}
.bookingdark a:hover {
        color:red;
}
.resource_blocked{
        background:repeating-linear-gradient(45deg, #efefef, #efefef 12px, #f7c0c0 12px, #f7c0c0 20px);
    font-family:Arial;
        font-size:14px;
          font-weight:bold;
    border:1px;
    text-decoration:none;
    padding:4px;
    padding-top:60px;
    border-style:outset;
        text-align:center;
        vertical-align:top;
        border-radius:.9em;
}
.resource_blocked_link{
          font-weight:bold;
          position:relative;
          top:30%;
}
.resource_blocked_link:hover {
        color:red;
}
.m_resource_blocked{
        background:repeating-linear-gradient(45deg, #efefef, #efefef 12px, #f7c0c0 12px, #f7c0c0 20px);
    font-family:Arial;
        font-size:38px;
    border:1px;
    text-decoration:none;
    padding:4px;
    border-style:outset;
        text-align:center;
        vertical-align:top;
          font-weight:bold;
          position:relative;
          top:30%;
}
.date_header {
        vertical-align:middle;
        font-family:Arial;
        font-size:24px;
        background-size:auto 100%;
 }
.m_date_header {
        vertical-align:middle;
        font-family:Arial;
        font-size:40px;
        background-size:auto 100%;
}
.header_blue {
        /*background-image:linear-gradient(rgb(203,225,252) 0%, rgb(125,165,224) 100%);*/
    background-color:#a6bad9;
 }
.header_blue_top {
        /*background-image:linear-gradient(rgb(203,225,252) 0%, rgb(125,165,224) 100%);*/
    background-color:#a6bad9;
}
.header_blue_bottom {
        /*background-image:linear-gradient(rgb(203,225,252) 0%, rgb(125,165,224) 100%);*/
    background-color:#a6bad9;
}
.header_red {
        /*background-image:linear-gradient(rgb(255,184,184) 0%, rgb(255,141,144) 100%);*/
    /*background-color:#fd9d9f;*/
    background-color:#e6a4a6;
 }
.header_red_top {
        /*background-image:linear-gradient(rgb(255,184,184) 0%, rgb(255,169,170) 100%);*/
    /*background-color:#fd9d9f;*/
    background-color:#e6a4a6;
}
.header_red_bottom {
        /*background-image:linear-gradient(rgb(255,169,170) 0%, rgb(255,141,144) 100%);*/
    /*background-color:#fd9d9f;*/
    background-color:#e6a4a6;
}
.header_green {
        /*background-image:linear-gradient(rgb(141,248,174) 0%, rgb(031,240,096) 100%);*/
        /*background-color:#2cc85c;*/
        background-color:#62be7e;
}
.header_green_top {
        /*background-image:linear-gradient(rgb(141,248,174) 0%, rgb(088,244,136) 100%);*/
        /*background-color:#2cc85c;*/
        background-color:#62be7e;
}
.header_green_bottom {
        /*background-image:linear-gradient(rgb(088,244,136) 0%, rgb(031,240,096) 100%);*/
        /*background-color:#2cc85c;*/
        background-color:#62be7e;
}
.header_orange {
        /*background-image:linear-gradient(rgb(255,226,136) 0%, rgb(255,194,003) 100%);*/
        background-color:#f4cc4d;
}
.header_orange_top {
        /*background-image:linear-gradient(rgb(255,226,136) 0%, rgb(255,211,074) 100%);*/
        background-color:#f4cc4d;
}
.header_orange_bottom {
        /*background-image:linear-gradient(rgb(255,211,074) 0%, rgb(255,194,003) 100%);*/
        background-color:#f4cc4d;
}
.header_violett {
        /*background-image:linear-gradient(rgb(187,187,239) 0%, rgb(160,160,232) 100%);*/
        background-color:#a6a6ea;
}
.header_violett_top {
        /*background-image:linear-gradient(rgb(187,187,239) 0%, rgb(174,174,236) 100%);*/
        background-color:#a6a6ea;
}
.header_violett_bottom {
        /*background-image:linear-gradient(rgb(174,174,236) 0%, rgb(160,160,232) 100%);*/
        background-color:#a6a6ea;
}
.header_yellow {
        /*background-image:linear-gradient(rgb(254,254,001) 0%, rgb(236,236,042) 100%);*/
        background-color:#eeee5a;
}
.header_yellow_top {
        /*background-image:linear-gradient(rgb(254,254,001) 0%, rgb(236,236,042) 100%);*/
        background-color:#eeee5a;
}
.header_yellow_bottom {
        /*background-image:linear-gradient(rgb(236,236,042) 0%, rgb(217,217,086) 100%);*/
        background-color:#eeee5a;
}
.weekday_field{
        width:160px !important;
        text-align:right;
}
.m_weekday_field{
        width:100px !important;
        text-align:right;
}
.date_field{
        white-space:nowrap;
        width:180px !important;
        border:none;
}
.m_date_field{
        white-space:nowrap;
        width:250px !important;
        border:none;
        text-align:center;
}
.time_column{
        width:40px !important;
        font-family:Arial;
        font-size:13px;
        text-align:center;
        background-size: auto 100%;
}
.m_time_column{
        width:20px !important;
        font-family:Arial;
        font-size:25px;
        text-align:center;
}
.section_header        {
        border-width:1px;
        border-style:solid;
        border-color:darkgrey;
        font-family:Arial;
        font-size:18px;
        font-weight:bold;
        text-align:center;
        background-image: linear-gradient(rgb(178,178,178) 0%, rgb(217,217,217) 100%);
        border-top-left-radius:0.4em;
        border-top-right-radius:0.4em;
        padding-left:5px;
        padding-right:5px;
}
.pitch_header {
    height:20px;
        background-size:auto 100%;
        font-family:Arial;
        font-weight:bold;
        font-size:14px;
        text-align:center;
}
.m_pitch_header {
    height:20px;
        background-size:auto 100%;
        font-family:Arial;
        font-size:40px;
        text-align:center;
}
.m_section_header        {
        border-width:1px;
        border-style:solid;
        border-color:darkgrey;
        font-family:Arial;
        font-size:40px;
        font-weight:bold;
        text-align:center;
        background-image: linear-gradient(rgb(170,170,170) 0%, rgb(220,220,220) 40%, rgb(220,220,220) 60%, rgb(170,170,170) 100%);
}
.ui-icon-locker:after {
           background-image: url("/htdocs/gif/locker.png");
    background-size: 20px 20px;
}
.m_ui-icon-locker:after {
           background-image: url("/htdocs/gif/locker.png");
    background-size: 50px 50px;
    height:50px !important;
    width:50px !important;
    border-radius:2em !important;
    margin-left:-25px !important;
    margin-top:-24px !important;
}
.m_ui-icon-grid:after {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M3%2C0H1C0.447%2C0%2C0%2C0.447%2C0%2C1v2c0%2C0.553%2C0.447%2C1%2C1%2C1h2c0.553%2C0%2C1-0.447%2C1-1V1C4%2C0.447%2C3.553%2C0%2C3%2C0z%20M8%2C0H6%20C5.447%2C0%2C5%2C0.447%2C5%2C1v2c0%2C0.553%2C0.447%2C1%2C1%2C1h2c0.553%2C0%2C1-0.447%2C1-1V1C9%2C0.447%2C8.553%2C0%2C8%2C0z%20M13%2C0h-2c-0.553%2C0-1%2C0.447-1%2C1v2%20c0%2C0.553%2C0.447%2C1%2C1%2C1h2c0.553%2C0%2C1-0.447%2C1-1V1C14%2C0.447%2C13.553%2C0%2C13%2C0z%20M3%2C5H1C0.447%2C5%2C0%2C5.447%2C0%2C6v2c0%2C0.553%2C0.447%2C1%2C1%2C1h2%20c0.553%2C0%2C1-0.447%2C1-1V6C4%2C5.447%2C3.553%2C5%2C3%2C5z%20M8%2C5H6C5.447%2C5%2C5%2C5.447%2C5%2C6v2c0%2C0.553%2C0.447%2C1%2C1%2C1h2c0.553%2C0%2C1-0.447%2C1-1V6%20C9%2C5.447%2C8.553%2C5%2C8%2C5z%20M13%2C5h-2c-0.553%2C0-1%2C0.447-1%2C1v2c0%2C0.553%2C0.447%2C1%2C1%2C1h2c0.553%2C0%2C1-0.447%2C1-1V6C14%2C5.447%2C13.553%2C5%2C13%2C5z%20M3%2C10%20H1c-0.553%2C0-1%2C0.447-1%2C1v2c0%2C0.553%2C0.447%2C1%2C1%2C1h2c0.553%2C0%2C1-0.447%2C1-1v-2C4%2C10.447%2C3.553%2C10%2C3%2C10z%20M8%2C10H6c-0.553%2C0-1%2C0.447-1%2C1v2%20c0%2C0.553%2C0.447%2C1%2C1%2C1h2c0.553%2C0%2C1-0.447%2C1-1v-2C9%2C10.447%2C8.553%2C10%2C8%2C10z%20M13%2C10h-2c-0.553%2C0-1%2C0.447-1%2C1v2c0%2C0.553%2C0.447%2C1%2C1%2C1h2%20c0.553%2C0%2C1-0.447%2C1-1v-2C14%2C10.447%2C13.553%2C10%2C13%2C10z%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
        background-size: 37px 37px;
    height:50px !important;
    width:50px !important;
    border-radius:2em !important;
    margin-left:-25px !important;
    margin-top:-24px !important;
}
.mobile.ui-icon-bars:after {
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20style%3D%22fill%3A%23FFFFFF%3B%22%20d%3D%22M1%2C4h12c0.553%2C0%2C1-0.447%2C1-1s-0.447-1-1-1H1C0.447%2C2%2C0%2C2.447%2C0%2C3S0.447%2C4%2C1%2C4z%20M13%2C6H1%20C0.447%2C6%2C0%2C6.447%2C0%2C7c0%2C0.553%2C0.447%2C1%2C1%2C1h12c0.553%2C0%2C1-0.447%2C1-1C14%2C6.447%2C13.553%2C6%2C13%2C6z%20M13%2C10H1c-0.553%2C0-1%2C0.447-1%2C1%20s0.447%2C1%2C1%2C1h12c0.553%2C0%2C1-0.447%2C1-1S13.553%2C10%2C13%2C10z%22%2F%3E%3C%2Fsvg%3E");
        background-size: 37px 37px;
    height:50px !important;
    width:50px !important;
    border-radius:2em !important;
    margin-left:-25px !important;
    margin-top:-24px !important;
}
.ui-icon-login:after {
           background-image: url("/htdocs/gif/login.gif");
    background-size: 20px 20px;
}
.ui-icon-trash:after {
           background-image: url("/htdocs/gif/trash2.gif");
    background-size: 20px 20px;
}
.ui-icon-rss:after {
           background-image: url("/htdocs/gif/rss.png");
    background-size: 20px 20px;
}
.mobile.ui-icon-rss:after {
        background-size: 49px 49px;
    height:50px !important;
    width:50px !important;
    border-radius:2em !important;
    margin-left:-25px !important;
    margin-top:-25px !important;
}
.ui-icon-mcal:after {
           background-image: url("/htdocs/gif/mcal.png");
    background-size: 20px 20px;
}
.mobile.ui-icon-mcal:after {
        background-size: 49px 49px;
    height:50px !important;
    width:50px !important;
    border-radius:2em !important;
    margin-left:-25px !important;
    margin-top:-25px !important;
}
.ui-icon-copy:after {
           background-image: url("/htdocs/gif/copy.png");
    background-size: 20px 20px;
}
.ui-icon-save {
    background-image: url("/htdocs/gif/save.jpg");
    background-size: 18px 18px;
    background-repeat:no-repeat;
    background-position:center;
}
.ui-icon-playvideo:after {
           background-image: url("/htdocs/gif/playvideo.png");
    background-size: 20px 20px;
}


.resourcebtn {
  background-color: #7490ff4f;
  color: white;
  padding: 6px;
  font-size: 8px;
  border: none;
  cursor: pointer;
  border-radius:20px;
  margin:0px !important;
  height:24px !important;
  width:24px !important;
}
.resourcebtn:hover, .dropbtn:focus {
  background-color: #7490ff;
}
.m_resourcebtn {
  background-color: #7490ff4f;
  color: white;
  padding: 6px;
  font-size: 8px;
  border: none;
  cursor: pointer;
  border-radius:20px;
  margin:0px !important;
  height:75px !important;
  width:80px !important;
}
.button_today{
        width:65px !important;
}
.m_button_today{
        width:210px !important;
}
.button_8_7,
.button_8_7::file-selector-button,
.button_8_7:visited,
.button_8_7:link {
/*        font-size:0.95em !important;*/
        font-size:0.95em;
        background-color:#7096ce;;
        color:white;
        padding:0.3em 0.8em 0.3em 0.8em;
        border-radius:1em;
        display:inline-block;
        margin-left:0.1em;
        margin-right:0.1em;
        margin-top:0em;
        margin-bottom:0em;
}

.button_8_7.new_event {
        background-color: #5c779f;
}
.button_8_7.this_event {
        background-color:#7096ce;
}
.button_8_7.file_selector {
        font-size:1em !important;
        background-color:transparent;
        color:black;
}
.button_8_7.file_selector:hover {
        font-size:1em !important;
        background-color:transparent;
        color:black;
}
.button_8_7.file_selector::file-selector-button {
        font-size:0.95em !important;
        background-color:#7096ce;;
        color:white;
        padding:0.3em 0.8em 0.3em 0.8em;
        border-radius:1em;
        display:inline-block;
        margin-left:0.1em;
        margin-right:0.1em;
        margin-top:0em;
        margin-bottom:0em;
}
.button_8_7.quick_link {
        font-size:0.95em;
        background-color:#e68743;
}
.button_8_7.quick_link:hover {
        background-color:#f9bf96;
}
.button_8_7.login {
        width:14em;
}
.button_8_7:hover,
.button_8_7.file_selector::file-selector-button:hover{
        background:#90B6CE;
}
.button_8_7:disabled {
        background-color:#bbbbbb;
}
.m_button_8_8:link,
.m_button_8_7,
.m_button_8_7:visited,
.m_button_8_7:link{
        font-size:2.2em;
        width:95%;
        background-color:#7096ce;
        color:white;
        padding:7px 7px 7px 7px;
        margin:8px 4px 8px 4px !important;
        border-radius:1em;
        line-height:1.3;
}
.m_button_8_7:hover{
        background:#90B6CE;
}

.button_8_7.mobile,
.button_8_7.mobile:visited,
.button_8_7.mobile:link{
        font-size:2.6em;
        background-color:#7096ce;
        color:white;
        padding:.5em 1em .5em 1em;
        margin:.5em .5em .5em .5em;
        border-radius:1em;
        line-height:1.3;
    width:95%;
 }
.button_8_7.mobile:hover{
        background:#90B6CE;
}
.button_8_7.mobile:disabled {
        background-color:#bbbbbb;
}
.tabButton{
        font-size:1em;
        background-color:#7096ce;;
        color:white;
        padding:0.3em 0.8em 0.3em 0.8em;
        border-width:1px;
        border-style:solid;
        display:inline-block;
        margin-top:8px;
        margin-right:0px;
        margin-bottom:-9px;
        border-top-left-radius:1em;
        border-top-right-radius:1em;
        border-bottom-left-radius:0em;
        border-bottom-right-radius:0em;
        width:14em;
        color:white;

}
.tabButton:hover{
        background-color:#90B6CE;
}
.tabButton.selected {
        background-color:#e68743;
        margin-top:8px;
}

.m_button_screen_request{
        width:100%;
        height:2.1em;
        font-size:2.2em;
}
.pb_resreq_div{
        width:50em;
}
.pb_resreq_div2{
        display:block;
}
.pb_resreq_div.mobile{
        width:100%;
}
.pb_resreq_div2.mobile{
        display:grid;
}
.pb_formfield.visible{
        display:inline;
}
.pb_formfield{
        display:none;
        padding:0px;
        border-style:hidden;
        margin:0px;
}
.pb_label{
    display:inline-block;
    margin:8px;
    width:15%;
    vertical-align:middle;
}
.pb_label.selfdialog{
    font-size:1.0em;
        width:13em;
    font-weight:bold;
}
.pb_label.mobile{
    font-size:3em;
    font-weight:bold;
    width:80%;
    vertical-align:middle;
    padding-top:0.3em;
}
.pb_radiolabel{
    margin:8px;
    width:200px;
}
.pb_radiolabel.mobile{
        display:inline-block;
        font-size:2.5em;
    width:88%;
 }
.pb_input.mobile{
    font-size:3.2em;
    width:93%;
}
.pb_inputdate.mobile{
    font-size:3.2em;
    width:6.8em;
    margin-right:.5em;
}
.pb_inputtime{
    width:4.8em;;
    margin-right:1em;
}
.pb_inputtime.mobile{
    font-size:3.2em;
    width:4em;;
    margin-right:.5em;
}

.pb_newpro{
        width:280px;
}
.pb_resreq{
        width:10em;
}
.pb_main{
        margin:0.5em;
        background-color: #f8f8f8;
        width:100%
}
.pb_content{
        margin:0.5em;
        background-color: #f8f8f8;
        width:100%
}
.pb_fieldset{
    border:1px groove #7096ce;
    box-shadow:10px 10px 16px #7096ce;
    padding:0.3em 1.2em 1.2em 1.2em;
    margin:0 0 1em 1em;
    background: #f3f3ff;
    border-radius:1em;
    line-height:1.0;
}
.pb_header_fieldset_left{
        float:left;
    display:inline-block;
    /*border:1px groove #7096ce;*/
    box-shadow:0px 0px 16px #7096ce;
    padding:.2em .2em .2em .2em;
    margin:0 0 0 0;
    background: #c4c4c4;
    border-radius:0.5em 0 0 0.5em;
    height:70px;
}
.pb_header_fieldset{
        float:left;
    display:inline-block;
    /*border:1px groove #7096ce;*/
    box-shadow:0px 0px 16px #7096ce;
    padding:.2em .2em .2em .2em;
    margin:0 0 0 0;
    background: #c4c4c4;
    border-radius:0 0 0 0;
    height:70px;
}
.pb_legend{
    font-size:18px;
    font-weight:bold;
    padding:8px;
}
.pb_legend.mobile{
    font-size:3em;
    font-weight:bold;
    padding:8px;
}
.pb_fieldsetdiv{
        margin-top:0.6em;
        margin-bottom:0.6em;
}
.pb_button{
        border-radius:1em;
        padding-top:0.3em;
        padding-bottom:0.3em;
        padding-left:0.8em;
        padding-right:0.8em;
        background: #7096ce;
        color:white;
        margin:1em;
}
.pb_select_9{
        border-radius:0.2em;
        padding-top:0.3em;
        padding-bottom:0.3em;
        padding-left:0.3em;
        padding-right:0.8em;
        background: #fff;
        color:white;
        margin-left:0em;
        margin-right:0em;
        margin-top:0.5em;
        margin-bottom:0.5em;
        color:black;
        /* 7.10.23 vertical-align:center;*/
}
.pb_select_9.mobile{
        border-radius:0.2em;
        padding-top:0.3em;
        padding-bottom:0.3em;
        padding-left:0.3em;
        padding-right:0.8em;
        background: #fff;
        color:white;
        margin-top:0em;
        margin-left:0em;
        margin-right:0em;
        margin-bottom:0em;
        color:black;
        font-size:3.2em;
        width:93%;
        vertical-align:top;
}
.pb_option_9{
        font-size:1em;
}
.pb_option_9.mobile{
        font-size:.3em;
}
.pb_radio_9{
}
.pb_radio_9.mobile{
        width:2.8em;
        height:2.8em;
        margin-right:1em;
}
.pb_checkbox{
}
.pb_checkbox_label{
    margin:8px;
    //width:110px;
    display:inline-block;
}
.pb_checkbox_label.mobile{
        display:inline-block;
        font-size:3.0em;
    font-weight:bold;
    width:70%;
    padding-top:15px;
 }
.pb_checkbox.mobile{
        width:2.8em;
        height:2.8em;
        margin-right:1em;
}
.pb_checkbox_text.mobile{
        font-size:2em;
}
.pb_textarea{
        width:70%;
        height:5em;
        font-size:1em;
        margin-right:1em;
}
.pb_textarea.mobile{
        width:93%;
        height:7em;
        font-size:2.5em;
        margin-right:1em;
}

.pb_blink {
    border-radius: 0.2em;
    animation-name: animation_blink_5s;
    animation-timing-function: ease-in;
    animation-duration: 10s;
    animation-iteration-count: 4;
    animation-fill-mode: both;
}

@keyframes animation_blink_5s {
    0% {
        color: black;
    }
    33% {
        color: white;
    }
    66% {
        color: red;
    }
    100% {
        color: black;
    }
}
