/* Style the tab */
.tab {
  overflow: hidden;
  /* border: 1px solid #f1f1f1; */

}

/* Style the buttons that are used to open the tab content */
.tab button, .tab a.tablinks.button {
    background-color: #D7D7D7;
    color: #fff;
    text-transform: uppercase;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0px 16px;
    height:50px;
    line-height: 50px;
    transition: 0.3s;
    margin: 0;
    margin-right: 1px;
    /* border-top: 2px solid #E6007E; */
    width: auto;
    position: relative;
}

.tab button:before, .tab a.tablinks.button:before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #E6007E;
    position: absolute;
    top:0;
    left:0
}

/* Create an active/current tablink class */
.tab button.active,
.tab button:hover,
.tab a.tablinks.button.active,
.tab a.tablinks.button:hover {
    background-color: #f1f1f1;
    color: #E6007E;
}

/* Style the tab content */
.tabcontent {
    background-color: #f1f1f1;
    display: none;
    padding: 20px 25px;
}

.community-editList i {
    font-size: 15px;
    color: #fff !important;
    background-color: #E6007E;
    border-radius: 50%;
    width:30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.community-editList .status-circle { display: inline-block; width:16px; height: 16px; border-radius: 50%; border: 0; margin-top: 3px;}

.community-editList .status-circle-col { padding-right: 0; }

.community-editList .status-legend { float: right; margin-top: 10px; margin-bottom: 20px;  }
.community-editList .status-legend .status-text { color: #878787; font-size: 14px; font-weight: 300; padding-left: 20px; padding-right: 10px;  position: relative;}
.community-editList .status-legend .status-text:last-child { padding-right: 0;}

.community-editList .status-legend .status-circle { left: 0; top: 2px;  position: absolute; width: 12px; height: 12px; margin-top: 0; }
/* proof */
.community-editList .status-circle-0,
.community-editList .status-circle-10,
.community-editList .status-circle-90 { background-color: #EDB800; }
/* hidden */
.community-editList .status-circle-60 { background-color: #0292C2; }
/* rejected */
.community-editList .status-circle-70 { background-color: #DE0000; }
/* active */
.community-editList .status-circle-100 { background-color: #0CAE00; }
/* planned */
.community-editList .status-circle-105 { background-color: #8C40FF; }
/* outdated */
.community-editList .status-circle-110 { background-color: #9A9A9A; }

.community-editList .isEdited i {  /* background-color: #000; */ }
.community-editList i:hover {   background-color: #009FE3; }

.community-editList .calList-col-left { width: 120px; }

/* Events / Calendar List */
.community-editList .calList { padding-bottom: 10px; }
.community-editList .calList-table { display: table; width: 100%;}
.community-editList .calList-entry { border-bottom: 1px solid #E6007E;}



.community-editList .calList-entry-main { padding-right: 0; padding-bottom: 0px;}
.community-editList .col-edit { text-align: right; }
.community-editList .calList-start-time { font-weight: 300;}
.community-editList .title { color: #E6007E; }
.community-editList .organizer {color: #000; }

.community-editList .calList-entry.new * {
    /*color: #009FE3;*/
}


.community-editList table { border-spacing: 0;}
.community-editList table th {
    background-color: inherit;
    color: #009FE3;
    text-transform: uppercase;
    text-align: left;
}
.community-editList table td { font-weight: 300;  background-color: inherit; padding: 10px 10px;  border-bottom:1px solid #E6007E; }

.community-editList table tr.new td { /*color: #009FE3;*/ }

.community-editList table td:first-child,
.community-editList table th:first-child  {  padding-left:0; }
.community-editList table td:last-child,
.community-editList table th:last-child {  padding-right:0; text-align: right;}

.community-editList .boardList-entry-status-110,
.community-editList .calList-entry.calList-entry-status-110 * { color: #9a9a9a;}

/* Edit Event / Edit Board */
.community-edit .row input[type="submit"].circle {
    font-family: fontawesome;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    background-color: #E6007E;
    margin-right:5px;
}

.community-edit .row input.submit { margin-right:50px !important;}
.community-edit .row input[type="submit"].circle.isHidden {   background-color: #D7D7D7; }
.community-edit .row input[type="submit"].circle:hover {      background-color: #009FE3; }

.community-edit hr { margin-top: 20px; margin-bottom: 25px;}

.community-edit .row:not(.field_submit) {display:table; width: 100%; padding-bottom:10px;}
.community-edit .row.field_conduction,
.community-edit .row.field_content,
.community-edit .row.field_concerturl,
.community-edit .row.field_end,
.community-edit .row.field_ticketlink { padding-bottom: 25px;}



.community-edit label { font-weight: bold; display: table-cell; width: 180px; padding-right: 10px; vertical-align: top; padding-top: 8px;}

.community-edit input[type="text"],
.community-edit textarea,
.community-edit select {
    background-color: #fff;
    color: #000;
    border: 1px solid #aaa;
    display: table-cell;
    width: 100%;
    box-sizing: border-box;
}



.community-edit textarea { height: 80px; padding: 10px 15px;}
.community-edit .ck-editor__editable { min-height: 200px; }

.community-edit select {
    padding: 0 10px;
    font-family: "Signika Negative", sans-serif;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
}

.community-edit input.datetime {
    background: #fff url('/typo3conf/ext/zrw_community_chor/Resources/Public/pix/cal_icon.png') center right 10px no-repeat;
}

.community-edit select,
.community-edit input.datetime,
.community-edit input#board_start_date { width: 190px;}

.community-edit .img-preview {
    border: 1px solid #aaa;
    display: inline-flex;
    padding: 15px;
    background-color: #fff;
    margin-top: 10px;
}

/* Chor-Board */
.tx-board table.board .image-wrap { /*border: 1px solid #878787;*/ background-color: #fff; display: flex;  margin-bottom: 20px; }
.tx-board table.board tr th {
    background-color: #fff;
    color: #009FE3;
    text-transform: uppercase;
    border-bottom: 0;
    border-top: 0;
}

.tx-board table.board .footable-filtering { display: none; }
.tx-board table.board .footable-empty { display: none;}

.tx-board table.board tr td.footable-first-visible,
.tx-board table.board tr th.footable-first-visible { padding-left:40px; }

.tx-board table.board tr td { background-color: #fff; border: none; }
.tx-board table.board tr[data-expanded="true"] td,
.tx-board table.board tr.footable-detail-row td {  background-color: #f1f1f1; }
.tx-board table.board:not(.footable-details) > tbody > tr:not(.footable-detail-row) { border-top: 1px dotted #878787; }
.tx-board table.board .footable-detail-row th { display: none; }
.tx-board table.board .footable-detail-row td { padding: 0; }

.tx-board table.board .footable-detail-row td .footable-details td { padding-right: 20px;}

.tx-board table.board .table { display: table; margin: 0; width: 100%; }
.tx-board table.board .col {
    display: table-cell;
    vertical-align: top;
}
.tx-board table.board .col.col-left { padding: 20px 20px 0 40px; }
.tx-board table.board .col.col-right { padding: 20px 20px 20px 0px;  width: 300px; }

.tx-board .board-wall { width: 100%; }
.tx-board .board-wall .brick { width:330px; }
.tx-board .board-wall .brick img { width: 100%; height: auto; }

/* Search Box */
.tx-board .search-box { background-color: #f1f1f1; padding: 25px 30px; padding-bottom: 0; margin-bottom: 30px; }
.tx-board .search-box h3 { padding-bottom: 0;}
.tx-board .search-box .col { position: relative; padding: 0; display: table; }
.tx-board .search-box .col1 { margin-right: 40px !important; }
.tx-board .search-box .col_wrap { margin-bottom: 0; padding-bottom: 30px; }

.tx-board .search-box .search-wrap { position: relative; }

.tx-board .search-box label { display: table-cell; }
.tx-board .search-box select, .tx-board .search-box input { display: table-cell; width: 100%; }

.tx-board .search-box  .btn-search {position:absolute; right: 7px; top: 7px; z-index: 1; }

/* Lightbox */
#lightbox.hideNav .lb-nav,
#lightbox.hideNav .lb-number { display: none !important; }

@media (max-width: 1100px) {

}

@media (max-width: 900px) {
    .tx-board table.board .col {
        display: block;
        padding-left: 40px !important;
    }

    .community-editList .col-right,
    .community-editList .col-left { padding-left: 0 !important; }

    .community-editList .col-edit { position: absolute; top: 0; right: 0;}
    .community-editList .col-left { padding-bottom: 0px; }
    /* .tx-board table.board .col.col-left { padding: 20px 20px 0 40px; }
    .tx-board table.board .col.col-right { padding: 20px 20px 20px 0px;  width: 300px; } */
}

@media (max-width: 768px) {
    .community-edit label { display: block; width: 100%;  }

    .community-edit input[type="file"] { width: 100%; box-sizing: border-box; }
}

@media (max-width: 700px) {
    .community-edit .row .back { float: none !important; display: block; text-align: right; padding-top: 15px; }
    .community-edit .row input[type="submit"].circle { float: right !important; }
}

@media (max-width: 650px) {
    .tx-board .list-body { overflow-x: scroll; margin-bottom: 20px; }
    .tx-board table.board { width: 800px; margin-bottom: 0;}

    .community-editList .boardList { overflow-x: scroll; }
    .community-editList .boardList table { width: 700px; margin-left: 0; }

}


@media (max-width: 550px) {
    .community-edit .row input[type="submit"].circle { float: left !important; }
    .community-edit .row input.submit { display: block; margin-right: 0 !important; margin-bottom:10px !important; margin-right: 10px !important; width: 100%;  }
    .community-edit .img-preview { width: auto; }
    .community-edit .img-preview img { width: 100%; height: auto;}
}

@media (max-width: 450px) {
    .tab button, .tab a.tablinks.button { padding: 0px 10px; }
}

@media (max-width: 400px) {
    .tab button, .tab a.tablinks.button { float: none; width: 100%; display: block; text-align: center; }

    .tx-board .search-box .col1 { padding-bottom: 15px; }
    .tx-board .search-box label { display: block; padding-bottom: 5px;  }
    .tx-board .search-box select, .tx-board .search-box input { display: block; }

}