@charset "UTF-8";

*{
    user-select: none;
}


/* Head*/
header nav{
    height:40px;
    padding:0;
}
header .navbar-brand {
    width:200px;
}
header .navbar-nav .nav-item{
    width: 180px;
    height:40px;
    box-sizing:border-box;
}
header .navbar-nav .nav-item.disable{
    background:#5d78a0;
}
header .navbar-nav .nav-item:Hover{
    background:#5d78a0;
}
header .navbar-nav .nav-item.disable:Hover{
    background:#5d78a0;
}


header .zoompanel{
    text-align: right;
    margin-right:20px;
}
header .zoompanel img{
    height:20px;
    width:20px;
    margin:0 5px;
    opacity:0.5;
}
header .zoompanel img:hover{
    opacity:0.9;
}
header .zoompanel img.disable{
    opacity:0.3
}
header .zoompanel img.disable:hover{
    opacity:0.3;
}





/* Main */
main {
    overflow-y: scroll;
    height: calc(100vh - 40px);
}
main .mainArea{
    margin-left:200px;
    width: 100%;
}

main .audioCard {
    max-width: 840px;
}
main .audioCard.hide {
    display:none;
}
main .audioCard a {
    text-decoration: none !important;
}
main .audioCard .card-header {
    color: var(--bs-emphasis-color);
    background-color: var(--bs-gray-700);
}
main .folderOpenImg {
    opacity: 0.5;
    width: 24px;
}
main .folderOpenImg:hover{
	transition: 0.2s ;
    opacity: 0.9;
    width: 24px;
}


main .audioCard .card-img-top {
    width:100%;aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #111;
}
main .audioCard .card-body {
    color: #AAA;
    margin: 0.3rem 1rem;
    background: #1a181ca1;
    /* border-left: 4px solid #b95050; */
    border: 1px solid #1a181ca1;
    border-left: 6px solid #4b5069;
}
main .audioCard .card-body:hover {
	/* transition: 0.2s ; */
    /* background:#162d4e; */
    background: #334;
    border: 1px solid #2d87fd;
    border-left: 6px solid #2d87fd;
}

main .audioCard .card-body li {
    border-top-width: 2px;
    border: 2px solid #919191 !important;
}
main .audioCard .card-body .deviceImg {
    width:32px;
}
main .audioCard .card-body .deviceImg.no_csv{
    opacity:0.1;
}
main .audioCard .card-body .list-group-item {
    background:none;
}


/**/

    main.small .audioCard {
        max-width: 412px;
    }
    main.small .audioCard .card-header {
        height: 4rem;
        line-height: 1.3;
    }


    main.small .audioCard .thumbArea {
        width: 100%;
        padding: 0.5rem !important;
    }

    main.small .audioCard .truckArea {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    main.small .audioCard .truckArea > a {
        width: 49%;
    }
    main.small .audioCard .card-body  {
        margin: 0.2rem;
    }
    main.small .audioCard .card-body > p  {
        line-height: 1.4;
        height: 2.5rem;
        font-size: 10pt;
        overflow: hidden;
    }
    


    main.small .audioCard .card-body li {
        border-top-width: 1px;
        border: 1px solid #919191 !important;
    }
    main.small .audioCard .card-body .deviceImg {
        width:22px;
    }










/* SideBar */
side {
    overflow-y: hidden;
    height: calc(100vh - 40px);
    width:200px;
    max-width:200px;
    z-index:100;
}
side .nav-link:hover {
    background-color: #5d78a0;
}





side .toggle-button-001 {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
    border-radius: 25px;
    background-color: #dddddd;
    cursor: pointer;
    transition: background-color .2s;
}

side .toggle-button-001:has(:checked) {
    background-color: #0d6efd;
}

side .toggle-button-001::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    box-shadow: 0 0 5px rgb(0 0 0 / 20%);
    background-color: #fff;
    content: '';
    transition: left .2s;
}

side .toggle-button-001:has(:checked)::after {
    left: 25px;
}

side .toggle-button-001 input {
    display: none;
}
side a.nav-link {
    margin:3px;
    padding: 10px 5px;
    justify-content: space-between;
    display: flex;
    cursor:initial;
}




@media (prefers-color-scheme: dark) {
    body { background: #333; color: white; }
}
  
@media (prefers-color-scheme: light) {
body { background: #ddd; color: #333; }
}