/* 2021
17-5104 Ultimate Gray   #147 149 151
13-0647 Illuminating    #245 223 77
15-3920 TCX Placid Blue #140 172 211
19-4151 TCX Skydiver    #0 88 155

2025 
17-1230 Mocha Mousse    # 164, 119, 100
                        # 173, 139, 115 
gray companion  # 138, 107, 84
*/
:root{
  --black: rgba(0,0,0,1);
  --illuminating: rgba(164,119,100,1);
  --ugray: rgba(138,107,84,1);
}
body{display:flex; flex-direction: column; align-items: center; padding: 0.5em;}
.nav {}
.view{display: flex; flex-direction: row; flex-wrap: wrap;}
.tab{flex: 1 1 auto; display: flex; flex-direction: column;margin:0 1em;}
.form{flex: 1 1 auto; display:flex; flex-direction: column; flex-wrap: wrap; margin:2em 0; padding: 0 1em;
  box-shadow: 0 .5em .3em -.3em lightgray,
              inset 1px 1px 1px lightgray,
              inset -1px 0 lightgray;}
.sec{margin: 1em 0 0 0; display: flex; flex-direction: inherit;}
.sec > h4 {font-size: medium; margin: .5em 0; text-align: center; flex: 1 1 auto;}
.box{flex: 1 1 auto; display: flex; align-items: baseline;}
.box .label {flex: 0 0 3.5em; margin-left: 1em;}
.box .field {flex: 1 1 auto; margin-right: 1em; margin-bottom: .5em;}
.buttons{flex: 1 1 auto; margin: 1em auto;}
a, #upload button[type=button], .btn{text-decoration: none; border:none; border-bottom: 1px solid lightgray;
  background-color: transparent;
  margin: 0 .2em 0 0; color: var(--illuminating);
  display: inline-block; min-width: 2.2em; text-align: center;
}
a:hover, #upload button[type=button]:hover, .btn:hover{color: lightgray;border-bottom: 1px solid var(--illuminating);}
a.active, .btn.active{color:gray;border-bottom: 1px solid var(--illuminating);}
.btn:focus{color:var(--ugray);}

.table{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1em;
  box-shadow: inset 1px 1px 2px -2px gray,
              inset -1px 0 2px -2px gray,
              0 .3em .2em -.2em lightgray;
}
.table .title {flex: 0;}
.table .search {flex: 0;}
.table .head {flex: 0; margin-bottom: .5em;}
.table .body { min-height: 1.5em; flex: 1 1 auto;}
.table .load {
  flex: 0;
  align-self: center;
  height:1.5em;
  width: 1.5em;
  animation: rt 3s infinite linear;
  border:.4em solid var(--ugray, lightgray);
  border-top:.4em solid var(--illuminating, brown);
  border-radius:100%;
}
@keyframes rt { from {transform: rotate(0deg);} to {transform: rotate(359deg);} }

.table .body .row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: baseline;
}
.table .body .row > div {
  flex: 1 1 auto;
}

/* comboshit */
.triangle {
}