/*
WebView用CSS。以下を指定して有効化
$form['#attached']['library'][] = 'np1/webview-styling';
*/


/* パンくず非表示 */

nav.breadcrumb {
    display: none;
}


/* ヘッダー非表示 */

div.tfx-header-inner {
    display: none;
}

.header-sp {
    display: none;
}

/* フッター非表示 */

.tfx-footer-inner {
    display: none;
}

.footer-sp {
    display: none;
}

/* WebViewで表示しない要素 */

.not-show-webview {
    display: none;
}


/* WebView用：クラウドストレージ容量バー背景色 */

div.progress {
    background: #ddd !important;
}


/* WebView用：クラウドストレージ容量バー色 */

.progress-bar {
    background: #b31d36 !important;
}


/* WebView用：アクティブタブ文字色 */

.tfx-tab .nav-pills .nav-link.active {
    color: #b31d36;
}


/* WebView用：アクティブタブ文字色、背景色 */

.tfx-tab .nav-pills .nav-link.active {
    color: #b31d36;
    background: #fff;
}


/* WebView用：タブ背景色 */

.nav-pills .nav-link {
    background: rgb(221, 221, 221);
}

@media screen and (min-width: 768px){
    .library-media-event-tab .nav-pills .nav-link:hover{
        background: rgb(221, 221, 221) !important;
        opacity: 0.5 !important;
    }
    .library-media-event-tab .nav-pills .nav-link.active:hover {
        background: #fff !important;
        opacity: 0.5 !important;;
    }
    .library-media-event-tab .nav-pills .nav-link.hover {
        color: #b31d36 !important;
        background: #fff !important;
        opacity: 0.5 !important;
    }
    .video-switch.nav-pills .nav-link:hover,
    .picture-switch.nav-pills .nav-link:hover {
        background: rgb(221, 221, 221) !important;
        opacity: 0.5 !important;
    }
    .video-switch.nav-pills .nav-link.active:hover,
    .picture-switch.nav-pills .nav-link.active:hover {
        background: #fff !important;
        opacity: 0.5 !important;
    }
}

@media screen and (max-width: 767px){
    .library-media-event-tab .nav-pills .nav-link:hover {
        background: rgb(221, 221, 221) !important;
        opacity: 1 !important;
    }
    .library-media-event-tab .nav-pills .nav-link.active {
        color: #b31d36 !important;
        background: #fff !important;
        opacity: 1 !important;
    }
    .video-switch.nav-pills .nav-link:hover,
    .picture-switch.nav-pills .nav-link:hover {
        background: rgb(221, 221, 221) !important;
        opacity: 1 !important;
    }
    .video-switch.nav-pills .nav-link.active:hover,
    .picture-switch.nav-pills .nav-link.active:hover {
        background: #fff !important;
        opacity: 1 !important;
    }
}

ul.library-category-tabs a.active .category-icon{
    background-color: #b31d36;
}

.video-switch .nav-link.active{
    color: #b31d36;
}

.picture-switch .nav-link.active{
    color: #b31d36;
}