:root {
    --src-button-color: white;
    --src-button-background-color: #123456;

    --src-button_active-color: white;
    --src-button_nonactive-background-color: #123456;

    --src-slider-background: #eee;
}

div.slidein {
  animation-duration: 0.5s;
  animation-name: slidein;
  overflow-y: hidden;
  height: auto;
  /* width: 80%; */
}

.slider {
    width: 100%;
    display: inline-block;
    cursor: pointer;
}

.closed.slider::after {content: ' (expand)'; font-size: 0.5rem;}
.opened.slider::after {content: ' (collapse)'; font-size: 0.5rem;}

.docked.SITab::before {content: url('https://srcengine.github.io/srctradesllc/svg/undock.svg'); font-size: 0.5rem; position: absolute; top: 0.5rem; left: 0.5rem; cursor: pointer;}
.undocked.SITab::before {content: url('https://srcengine.github.io/srctradesllc/svg/dock.svg'); font-size: 0.5rem; position: absolute; top: 0.5rem; left: 0.5rem; cursor: pointer;}

div.slideout {
  animation-duration: 0.5s;
  animation-name: slideout;
  overflow-y: hidden;
  height: 0px;
  /* width: 80%; */
}

@keyframes slidein {
  from {
    /* margin-top: 0%; */
    /* width: 300%; */
    height: 0%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  to {
    /* margin-top: 100%; */
    /* width: 100%; */
    height: 280px;
  }
}

@keyframes slideout {
  from {height: 280px;}
  to {height: 0px;}
  
}
html {width: 100%;}

:root {font-family: Arial, Helvetica, sans-serif;}

body
{ 
    /* width: 100%; */
    margin: 0 0;
    height: auto;
    border-width: 0 3pt 0 3pt;
    border-color: black;
    border-style: outset;
    font-family: Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: '7seg';
    src: url("./7segs.woff2") format('woff2');
}

.seg7, input[type=number] {
    font-family: '7seg';
    border: 2pt ridge black;
    display: block;
    text-align: center;
}

main
{ 
    width: 98%;
    margin: 0 1%;
    height: auto;
} 
table {
    /* border: 1pt solid black; */
    border-radius: 6pt;
    border: none;
    width: 100%;
}

td {
    text-align: center; 
    /* border-top: 1pt solid black;  */
    /* border-left: 1pt solid black;  */
    margin: 0; 
    padding: 0;
}

input, select {
    font-family: Arial, Helvetica, sans-serif;
    border: 1pt dotted;
    /* font-weight: bold; */
    font-size: unset;
    background-color: lightyellow;
}

/* for active and not active src-button's, set things to default style */
.src-button {
    margin: 0;
    height: 4rem;
    width: 4rem;
    border-radius: 5pt;
    border: 3pt outset #000;
}
.src-button:active {
    font-size: larger;
    font-weight: bold;
    border: 1pt solid black;
}

.warn.src-button:active  {
    background-color: pink;
}

.hdr-button {
    border-radius: 5px;
    margin: 0 1rem;
    font-size: 18pt;
    border: none;
    color: white;
    cursor: pointer;
    display: inline-block;
    padding: 0 0.5rem;
}

.hdr-button:hover {font-weight: bolder; background-color: white; color: #123456;}



tr:first-child th {border-bottom: 1pt solid black;}

.src-header {
    background-color: #123456;
}
.hidden {
    display: none;
}

.pointer {
    cursor: pointer;
}

.small {font-size: 0.8rem;}

.SITab {
    display: inline-block;
    width: 25%; 
    text-align: center; 
    border: 1pt solid black; 
    padding: 1rem; 
    border-radius: 10px;
    background-color: greenyellow;
}

#hidePopup {
    cursor: pointer;
    margin: 0;
    padding: 0;
}

#notes p {
    cursor: text; 
    padding: 0; 
    margin: 0; 
    clear: both; 
    background-color: lightyellow; 
    overflow-y: scroll;
}
#notes {
    /* display: none;  */
    left:10%;
    top:10%;
    width:80%; 
    position: absolute; 
    border: 2pt solid black; 
    border-radius: 0.5rem; 
    cursor: all-scroll; 
    background-color: lightyellow; 
    padding: 0.5rem;
    margin: 0;
}

#Opt_V, #Opt_I, #Opt_S, #Opt_Ph, #Opt_DEG, #Opt_RAD, #Opt_PF, #Opt_A, #Opt_B, #Opt_C, #Opt_N 
{
    cursor: pointer;
    border: 1pt dotted black; 
    display: inline-block;
}

#Opt_DEG, #Opt_RAD, #Opt_PF {
   width: 30px;
}

#Opt_A, #Opt_B, #Opt_C, #Opt_N {
    width: 10px;
    padding: 0;
    margin: 0;
 }

#Opt_V, #Opt_I, #Opt_S, #Opt_Ph {
    width: 20px;
 }
#Opt_V.hide, #Opt_I.hide, #Opt_S.hide, #Opt_Ph.hide, #Opt_DEG.hide, #Opt_RAD.hide, #Opt_PF.hide, #Opt_A.hide, #Opt_B.hide, #Opt_C.hide, #Opt_N.hide {
    opacity: 25%;
}

#svgI, #svgS, #svgZ, #svgIN, #svgVLL {height: 75%; width: 100%;}

#select-SystemVoltage {
    width: fit-content;
    margin: 0.1rem 0rem 1rem 0rem;
    height: 100%;
    border-radius: 5pt;
    border: 3pt outset black;
}
@media screen and (max-device-width : 480px) {
    /* small screen formatting Styles */
    body {margin: 0}
}