html, body
  { padding: 0
  ; margin: 0
  }

body
  { display: flex
  }

.footer
  { font-size: 0.7rem
  ; margin-top: 1.8rem
  ; position: absolute
  ; left: 0
  }

.nav
  { width: 100%
  ; height: 76px
  ; border-bottom: 1px solid black
  ; box-shadow: 3px 3px #ccc
  }

.nav .logotext
  { font-size: 2rem
  ; color : #ff7f50
  ; width: 300px
  ; height: 100%
  ; padding: 20px
  ; padding-left: 40px
  ; font-family: "Gill Sans", sans-serif 
  }

.mainwrap
  { width: 800px
  ; left: calc(100%/2 - 800px/2)
  ; position: absolute
  }

.welcomemsg
  { border: 1px solid green
  ; background: lightgreen
  ; border-radius: 4px
  ; padding: 2rem
  ; padding-top: 0
  ; margin-top: 2rem
  ; display: flex
  }

.welcomemsg .twrap    { width: 60% }
.welcomemsg .welcomeright { width: 40% }

.welcomemsg .twrap
  {
  }

.welcomemsg .msgright
  {
  }

.welcomemsg input:first-child
  { margin-top: 80px
  }

.welcomemsg input
  { height: 30px
  ; width: 100%
  ; border-radius: 4px
  ; margin-top   : 3px
  ; margin-bottom: 3px
  }

.welcomemsg .authbuttons
  { display: flex
  ; justify-content: space-between
  }
.welcomemsg .authbuttons button
  { width: calc(50%-20px)
  ; height: 30px
  ; margin-top: 3px
  ; border-radius: 4px
  }

.welcomemsg .authbuttons button.buttonsignup { width: calc(30% - 20px) }
.welcomemsg .authbuttons button.buttonlogin  { width: calc(70% - 20px) }




input.searchbox
  { width: calc(100% - 40px - 2px)
  ; padding: 20px
  ; font-size: 1.4rem
  ; margin-top: 3px
  }

.tophint
  { width: calc(100% - 10px)
  ; border: 1px solid #bbb
  ; margin-top: 24px
  ; padding: 5px
  }

.sr-wrap
  { width: 100%
  ; border: 1px solid #bbb
  ; margin-top: 12px
  }
.loc-wrap
  { width: 100%
  ; border: 1px solid #bbb
  ; margin-top: 12px
  }

.sr-wrap::before
  { content: "Depreciation Asset Results"
  ; margin: 0.2rem
  ; padding: 3px
  }
.loc-wrap::before
  { content: "Location Results"
  ; margin: 0.2rem
  ; padding: 3px
  }
/* Loc */

.loc-wrap .loc-res
  { display: flex
  ; border-top: 1px solid #ccc
  ; margin: 0.2rem
  ; padding: 3px
  ; margin-top    : 5px
  ; margin-bottom : 5px
  ; padding-top   : 5px
  ; padding-bottom: 5px
  
  }
.loc-wrap .loc-nameset { width: 45% }
.loc-wrap .loc-zone    { width: 15% }
.loc-wrap table        { width: 40% }


.loc-wrap .loc-name
  { font-size: 1rem
  ; display: inline
  ; margin-right: 0.3rem
  }
.loc-wrap .loc-name::after
  { content: ", "
  }
.loc-wrap .loc-intlres .loc-name::after
  { content: ""
  }
.loc-wrap .loc-state
  { font-size: 1rem
  ; font-weight: 600
  ; display: inline
  }

.loc-wrap .loc-type
  { font-size: 1rem
  ; width: 10%
  ; text-align: center
  }

.loc-wrap .loc-zone
  { font-size: 1rem
  ; font-weight: 600
  }

.loc-wrap table td
  { text-align: center
  ; padding-left : 4px
  ; padding-right: 4px
  ; border-left: 1px solid #ccc
  ; border-collapse: collapse
  }

.loc-wrap table tr:first-child
  { font-size: 0.7rem
  ; font-weight: 600
  }

.loc-wrap table td:first-child
  { font-size: 0.7rem
  ; font-weight: 600
  ; text-align: left
  ; border: 0
  }

.loc-wrap table td:nth-child(2)
  { border: 0
  }

/*
.loc-wrap .loc-intlres table tr:nth-child(2) td:nth-child(3)
  { background: red
  ; colspan: 3
  ; rowspan: 3
  }
*/


/* SR */
.sr-wrap .sr-row
  { display: block
  ; width: 100%
  ; border-top: 1px solid #ccc
  ; margin: 0.2rem
  ; margin-top   : 0
  ; margin-bottom: 0
  /*
  ; clear: both
  ; float: left
  */
  ; display: flex
  }


.sr-heromsg
  { padding: 5px
  }

.sr-wrap .sr-row-left
  { padding: 3px
  }

.sr-wrap .sr-row-right
  { width: 30%
  ; display: flex
  }

.sr-wrap .sr-row-left        { width: 70% }
.sr-wrap .sr-row-years       { width: 10% }
.sr-wrap .sr-row-percentages { width: 10% }
.sr-wrap .sr-row-from        { width: 10% }


.sr-wrap .sr-row-years
  { font-size: 1.3rem
  ; text-align: center
  }



.sr-wrap .sr-row-from
  { font-size: 0.7rem
  ; bottom: 0
  ; display: flex
  ; flex-direction: column
  ; justify-content: flex-end
  }

.sr-wrap .sr-row-from-span
  { 
  }

.sr-wrap .sr-row-from
  { font-size: 0.7rem
  ; bottom: 0
  }

.sr-wrap .sr-row-dv::after
  { content: " dv"
  ; font-size: 0.7rem
  }

.sr-wrap .sr-row-pc::after
  { content: " pc"
  ; font-size: 0.7rem
  }



/*
.sr-wrap .sr-row-left
  { float: left
  ; margin-top   : 0.5rem
  ; margin-bottom: 0.5rem
  ; width: 70%
  }
.sr-wrap .sr-row-right
  { float: right
  ; width: 15%
  ; height: 100%
  ; position: relative
  }
.sr-wrap .sr-row-years
  { font-size: 1.3rem
  ; text-align: center
  }
.sr-wrap .sr-row-from
  { font-size: 0.7rem
  ; text-align: right
  ; background: red
  ; top: 0
  }
  .sr-wrap .sr-row-years
, .sr-wrap .sr-row-from
  { height: 100%
  ; width: 50%
  ; float: left
  ; display: block
  ; position: absolute
  }
*/
.sr-wrap .sr-row-path
  { font-size: 0.8rem
  ; text-align: left
  }