@charset "utf-8";
/*    目录区*/
.aside-left .card {
    border: none;
    padding: 0;
    color: #212529;
    background-color: rgba(255, 255, 255, 0.5);
}
.aside-left .card-header {
    border: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0;
    /*    margin:0;*/
}
.aside-left .card-body {
    padding-left: 0;
    padding-right: 0;
}
.aside-left .btn-link {
    color: #212529;
    /*
    padding-left: 0;
    padding-right: 0;
*/
}
.aside-left .list-group {
    /*    list-style-type:none;*/
    /*    padding: 0;*/
}
.aside-left .list-group-item {
    border: none;
    color: #212529;
    background: transparent;
    /*
    padding: 0;
    margin: 0;
*/
    text-align: left;
}
.aside-left .list-group-item a {
    color: inherit;
}
.aside-left .card-header:hover {
    background-color: #2BC2FF;
    color: white;
}
.aside-left .btn-link {
    color: inherit;
}
.aside-left .btn-link:hover, .aside-left .list-group-item:hover, .aside-left a:hover {
    color: white;
    background-color: #2BC2FF;
    text-decoration: none;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
    text-decoration: none;
}
.aside-left .active {
    background-color: #2BC2FF;
    color: white;
    border: none;
}

/*    时间选择区*/
.aside-right .list-group-item {
    border: none;
    padding: 5% 0;
    color: #212529;
    background-color: rgba(255, 255, 255, 0.5);
}
.aside-right .active, .aside-right .list-group-item:hover, .aside-right .list-group-item:focus{
    background-color: #2BC2FF;
    color: white;
}
.aside-right .disabled {
    color: darkgray;
}
/*    目录和北京时添加上边距*/
aside p {
    margin-top: 10%;
}
aside, .picture {
    border: 1px solid rgba(0, 0, 0, 0.2);
    /* 高度设定，见第179行 */
/*
    min-height: 700px;
    max-height: 900px;
*/

/*        height: 100%;*/
    overflow: auto;
    /*    background: rgba(0,0,0,1.00);*/
}
/*    中央tab*/

.nav-tabs .nav-link.active {
    color: white;
    background-color: #2BC2FF;
}
.nav-tabs a {
    color: #212529;
    background: rgb(255, 255, 255, 0.5);
}

/* 滚轮控制图片放大缩小和拖动 */
.dragAble {
    position: relative;
    cursor: move;
}

/* 图片未加载时让div占据一定空间，不被压缩 */
.carousel-item{
    min-height: 500px;
}
/*修改时间栏滚动条的样式*/
.pre-scrollable {
    /*    高度超过650px就有滚动条，必须要用这个类，否则会在aside-right上添加滚动条*/
    max-height: 650px;
    overflow-y: auto;
    behavior: smooth;
    /* behavior:; */
}

/*图片标注文字改为黑色，加白边*/
.carousel-caption h5, .carousel-caption p{
    color: black;
    text-shadow:1px 1px 0 white,-1px 1px 0 white,1px -1px 0 white,-1px -1px 0 white;;
}

/* 下面关于宽度尺寸的设定会覆盖bootstrap的原始设定，20210810添加 */
/* .container{
    max-width: 1800px;
}
.col-xl-2 {
    max-width: 15%;
}
.col-xl-8 {
    max-width: 76%;
} */
#myTabContent img {
    max-height: 540px;
    max-width: 100%;
    margin:auto;
}
/*  */

/*小屏幕时*/
@media(max-width: 767px) {
    /*    目录显示与影隐藏*/
    .aside-left {
        position: fixed;
        top: 50px;
        right: 0;
        width: 250px;
        height: 100%;
        z-index: 9999;
        background-color: rgba(240, 240, 240, 0.7);
    }
    .show-nav {
        transform: translateX(0);
        transition: all 0.2s ease;
    }
    .hide-nav {
        transform: translateX(250px);
        transition: all 0.2s ease;
    } /*侧滑关键*/
    .aside-left strong, .aside-left .card {
        /*    background-color: rgba(170, 245, 245, 0.8);*/
        background-color: rgba(240, 240, 240, 0.8);
    }
    /* 滚轮控制图片放大缩小和拖动 */
    .dragAble {
        position: relative;
        cursor: move;
    }
    /* 图片未加载时让div占据一定空间，不被压缩 */
    .carousel-item{
        min-height: 230px;
    }
    /* tab加边框 */
    .nav-tabs .nav-link {
        border: 1px solid rgba(0,0,0,0.2);
    }
    /*时间栏横向显示*/
    .aside-right .list-group {
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .aside-right p {
        display: none;
    }
    .aside-right .list-group-item {
        /*    width:60px;//响应式屏幕中div的宽度自动设定，width属性无效*/
        white-space: nowrap; /* 不换行 */
        margin: 2% 0.7% 0.7%;
        padding: 5px 3px;
    }
    .pre-scrollable {
        overflow-x: auto;
    }
}