/* this line puts top div at top of page*/


@media (prefers-color-scheme: dark) {
    body {
        background:#1a1a1a;
        background-color: #1a1a1a;
        color:#717171;
    }

    body div.cs6{
        background-color: #cfcccc;
    }

    body div.disconnected{
        background-color: #1c0a0a;
    }
    body textarea{
        background: #1f1f1d;
        color: #4f4f4d
    }

    body #bufs1{
        background-color: #1f1f1f;
    }

    body .goButton,
    body .marker{
        background-image: linear-gradient(to bottom,#000000, #4f2933);
        color: #4f4f4d;
        text-shadow: 0 0 0 #4f4f4f;
        box-shadow: 0 4px 0 #5d4040;
    }
    body .curCue{
       background-color:#1d2d18;
    }

    body .rioUnitInfoDisplayUnit{
        background-color: #090909;
        border: #4f4f4f;
        border-width: 1px;
        border-style: solid;

    }

    body .rioUnitInfoSmallDisplayUnitText {
        color: #1f1f1f;
    }

    body .rioUnitInfoActivityCanvas{
        color: red;
    }

    body .nextCue{
        background-color: #4f4224
    }

    body #oscFilters,
    body #scheduledvideorecordingslist,
    body #videorecordingslist,
    body #allowedMacs,
    body #saNetConnections{
        background: #1a1a1b;
        color: #4f4f4d;
    }



    body #hamburger,
    body #canvasHamburger{
        filter:invert();
    }

    body #timingSettings{
        color: #4f4f4d;
    }
    body #logo{
        filter:invert(.35);
    }

    body .smallBox{
        color: #4f4f4d;
    }

    body .button{
        background-color: #4f4f4f;
        color: #1f1f1d;
    }
    body .box{
        color:#4f4f4d;
    }

    body #leftSideMenu{
        background-color:#252525;
    }

    body .panel{
        background-color: #1a1a1b;
    }


    body #status{
        background-color:rgba(128,128,128,0);
    }

    body #bufs,
    body #downloadVideoRecordingsFieldset,
    body #restore{
        background-color: #1a1a1b;
        color:#fcfcfc;
    }

    body .form{
        background-color: #1a1a1b;
    }

    #upload #droptext{
        color:#fcfcfc;
    }
    body #showTimeBeacon,
    body #midiInOnly,
    body #sysExOnly,
    body #info{
          background-color: #1a1a1b;
          color: #4f4f4f;
    }

    body #viewDate,
    body #startTime,
    body #showStartTime{
        background:#1a1a1b;
        color: #4f4f4d;
    }

    body #output,
    body #service,
    body #notes{
        background-color: #1a1a1b;
        color: #4f4f4d;
    }

    body .buttonStart{
        background-color: #1a1a1b;
       color: #4f4f4d;
    }

    body ::placeholder{
        color: #4f4f4d;
        background:#1a1a1b;
    }

    body .timing {
        color: #4f4f4d;
        background:#1a1a1b;
    }

    body #name{
        color:#4f4f4d;
    }

    body #exportCSV {
        background-color: #1a1a1b;
        color: #4f4f4f;
    }

    body .top {
        background-color: #0a0a0a;
    }

    body #topLine,


    body #bottomLine,
    body #timing,
    body table tr:nth-child(odd){
        background: #090909;
        color:#717171;
    }

    body table tr,
    body table tr th,
    body table{
        background: #1a1a1b;
        color: #4f4f4d;
    }

    body #OSCActivityTable,
    body #UDPActivityTable{
        background:#090909;
    }

    #timingSettings #videorecordingslist,
    body #timing{
        color:#4f4f4d;
        background:#1a1a1b;
    }

    ::placeholder{
        color: #4f4f4d;
        background:#1a1a1b;
    }

    body .swal2-popup{
        background: #252525;
    }

}



/* this is for small screens */
@media screen and (max-width: 768px) {
    #hamburger {
        float: left;
        width: 35px;

        margin-right: 20px;
        margin-left: 20px;
        margin-top: 3.5vw;

    }

    #hamburger:hover {
        cursor: pointer;
        border: solid #717171 2px;
        margin-right: 18px;
        margin-left: 18px;
    }


    #logo {
        float: left;
        height: 72px;
        margin-right: 20px;
        display: inline-block;
        margin-top: 2px;
        margin-bottom: 18px;
    }

    #headerShowImage {
        float: right;
        height: 80px;
        display: block;
        margin-right: 5px;
    }

    #title {
        font-size: calc(4vw + .2vmin);
        font-weight:bold;
        color: #94bddf;
        padding-top: calc(1.1vw + 10px);

        display: inline;

    }

    #pagename {
        display: inline;
        font-size: 15px;
        float:right;
        color: #717171;
        margin-top: 0;
        padding-right: 0;
        font-weight: bold;

    }

    #userName {
        display: inline;
        color: #717171;
        margin-top: 0;
        padding-right: 0;
        margin-bottom: 0;
        font-size: 15px;
        font-weight: bold;
        float:right;
    }

}

/* this is for normal screens */
@media screen and (min-width: 769px) {
    #hamburger {
        float: left;
        width: 35px;

        margin-right: 30px;
        margin-left: 20px;
        margin-top: 28px;

    }

    #hamburger:hover {
        cursor: pointer;
        border: solid #717171 2px;
        margin-right: 28px;
        margin-left: 18px;
    }


    #logo {
        float: left;
        height: 85px;
        margin-right: 30px;
        display: inline-block;
        margin-top: 3px;
        margin-bottom: 2px;
    }

    #headerShowImage {
        float: right;
        height: 92px;
        margin-right: 20px;
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0;
    }

    #title {
        font-weight: bold;
        font-size: 45px;
        color: #94bddf;
        margin-top: 18px;
        display: inline-block;
        margin-bottom: 0;
    }

    #pagename {
        display: inline;
        float: right;
        font-size: 25px;
        color: #717171;
        margin-top: 30px;
        padding-right: 25px;
        margin-bottom: 0;
        font-weight: bold;
    }

    #userName {
        display: inline;
        float: right;
        color: #717171;
        margin-top: 0;
        padding-right: 25px;
        margin-bottom: 0;
        font-weight: bold;
    }
}

.top {
    background-color: whitesmoke;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    position: relative;
}


#bottomLine1 {
    height: 2px;
    width: 100%;
    background-color: #717171;
    margin: 0;
}

#bottomLine {
    background: linear-gradient(whitesmoke, #c6c6c6c4);
    width: 100%;
    height: 15px;
    border: none;
    margin: 0;
}

#topLine {
    background: linear-gradient(#c6c6c6c4, whitesmoke);
    width: 100%;
    height: 15px;
    border: none;
    margin: 0;
}


/*need to change the padding on the container body*/
body {
    margin: 0
}

.noselect {
    user-select: none;
    font-weight:bold;
}

/*
When class small is added to the header div
 */
.small > #topLine,.small > #bottomLine {
    height: 0;
}

.small > #logo {
    height: 15px;
}
.small > #title,.small > #pagename {
    font-size: 15px;
    margin-top: 0;
}
.small > #hamburger{
    margin-top: 0;
    height: 15px;
    width: 15px;
}
.small > br {
    display: none;
}
.small > #leftSideMenu {
    top:-100px
}