/* Component for list of onsite meeting requests shown on final diary screen */

.tabs-container {
    margin: 0;   
}
.tabs {
    width: 100%;
}

/* Tab Buttons */
.tab-btn {
    cursor: pointer;
    width: 33.3%;
    float: left;
    background: #e8e8e8;
    color: #1e1e1e;
    border-right:1px solid #d2d2d2;
    border-bottom:1px solid #d2d2d2;
    position: relative;
    text-align: center;
}
.tab-btn:last-child {
    border-right:none;
}

.tab-btn:hover {
    background: #d9d9d9;   
}
.tab-btn.selectedTab {
    background: #fff;
    font-weight: bold;
    border-bottom: none;
}
.tab-btn.deselectedTab {
    font-weight: normal;   
}

.requestsTabCount {
    font-weight: 800;
}
@media (max-width:400px) {
    .tab-btn {width: 36%;text-align: left;}
    .tab-btn:first-child{width: 28%; text-align: center;}
}

/* only show transitions on desktop */

@media (min-width:768px) {
    .tab-btn.deselectedTab {
        -webkit-transition:  1s;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition:all 0.5s ease;
    }
}

/* Pre-Event Tabs */
.tabs_section .tabs_head h1{
    margin-bottom: 10px;   
}

.tabs_section .waitinglist-for {
    color: #1e1e1e;
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 10px;
}

.tabs_section .waitinglist-heading {
    margin-bottom: 10px;
    margin-right: 6px;
}

@media (max-width:350px) {
    .tabs_section .waitinglist-for {
        clear:left;
    }
}

.tabs-ctas {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.tabs-ctas li {
    background: #EDEDED;
    border-radius: 6px;
}
.tabs-ctas a {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 17px;
}

.tabs-ctas a:hover {
    text-decoration: none;
}
.tabs-ctas .label {
    color: #000;
    display: block;
    font-size: 16px;
    font-weight: 600;
    padding-top: 10px;
    text-align: center;
    width: 100%;
}

.tabs-ctas span {
    margin: auto;
    display: flex;
    float: none;
}
.tabs-ctas .ui-state-active .label {
    color: #fff;
}

@media (min-width:960px) {
    .tabs-ctas {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}