:root
  { --cloud-blue: #0080dd
  ; --border-blue: #0af
  ; --super-light-gray: #f8f8f8
  ; --cancel-red: #c00
  ; --confirm-green: #4b0
  }

Thumbnail
  { background: url('placeholder.svg') 50% 50% no-repeat
  ; background-size: 100% 100%
  ; margin: 0 1rem 1rem 0
  ; width: 5rem
  ; height: 5rem
  ; position: relative
  ; display: block
  ; float: left
  }

  Thumbnail img
    { width: 5rem
    ; height: 5rem
    ; display: inline-block
    ; position: absolute
    ; border: 0.2rem solid lightgray
    ; background: lightgray
    }

  Thumbnail[data-nr='10'] img
    { border-color: var(--border-blue) }

  Thumbnail ThumbnailCaption
    { display: inline-block
    ; position: absolute
    ; background: lightgray
    ; font-weight: bold
    ; padding: 0.15rem 0.3rem
    ; bottom: -0.4rem
    ; right: 0.35rem
    ; font-size: 0.5rem
    ; color: #555
    ; border-radius: 0.6rem
    }

  Thumbnail .button
    { display: none
    ; position: absolute
    ; font-size: 1.1rem
    ; padding: 0 0.35rem 0.2rem 0.35rem
    ; margin: 0.25rem
    }

    Thumbnail:hover .button
      { display: inline-block }

    Thumbnail .button .fa
      { text-shadow: 1.5pt 1.5pt 1pt white
                   , -1.5pt -1.5pt 1pt white
                   , -1.5pt 1.5pt 1pt white
                   , 1.5pt -1.5pt 1pt white
      }

    Thumbnail .button .fa
    , .button Icon
      { pointer-events: none }

    Thumbnail .arrow
      {
      ; margin: -1.5rem
      ; position: absolute
      ; top: 50%
      ; display: none
      }

Upload
  { position: relative
  }

  Upload .fa
    { color: var(--cloud-blue)
    }

  Upload input[type='file']
    { top: 0
    ; left: 0
    ; position: absolute
    ; display: block
    ; width: 2.1rem
    ; height: 2.1rem
    ; overflow: hidden
    ; cursor: pointer
    }

Copy .fa
  { color: var(--confirm-green)
  ; font-size: 0.66em
  }
Remove .fa
  { color: var(--cancel-red) }

AbortRemoval .fa
  { color: #333 }

Move .fa
  { color: #333 }

Thumbnail[data-nr='10'] Move
  { display: none !important }

Zoom .fa
  { color: #333 }

Thumbnail.moving
  { position: absolute !important
  ; pointer-events: none
  ; z-index: 1
  ; margin-left: 0 !important
  }

MovePlaceholder
  { border: 0.25rem solid white
  ; cursor: move
  ; background: lightgray
  ; margin-top: -1rem
  ; margin-left: 1rem
  ; height: 7rem
  ; width: 3rem
  ; float: right
  ; color: gray
  ; text-align: center
  ; line-height: 6.5rem
  ; font-size: 2rem
  }

  MovePlaceholder:hover
    { background: #8f0 }

.has_moving Thumbnail
  { margin-right: 3rem }

.has_moving Thumbnail MovePlaceholder
  { margin-right: -3rem }

.has_moving Thumbnail .button
  { display: none }

@keyframes flash_border_red
  { from { border-color: lightgray }
    to   { border-color: #c44 }
  }

.failed
  { border-width: 0.25rem
  ; animation-duration: 0.3s
  ; animation-name: flash_border_red
  ; animation-direction: alternate
  ; animation-iteration-count: 2
  }

@keyframes flash_border_orange
  { from { border-color: lightgray }
    to   { border-color: #f52 }
  }

.removed
  { animation-duration: 0.3s
  ; animation-name: flash_border_orange
  ; animation-direction: alternate
  ; animation-iteration-count: 2
  }

@keyframes flash_border_green
  { from { border-color: lightgray }
    to   { border-color: #8f0 }
  }

.updated
  { animation-duration: 0.3s
  ; animation-name: flash_border_green
  ; animation-direction: alternate
  ; animation-iteration-count: 2
  }

@keyframes flash_background_green
  { from { background-color: lightgray }
    to   { background-color: #8f0 }
  }

.changed_numeration Thumbnail:not([data-nr='10']) ThumbnailCaption
  { animation-duration: 0.3s
  ; animation-name: flash_background_green
  ; animation-direction: alternate
  ; animation-iteration-count: 2
  }

ProductElement
  { display: inline-block
  ; width: 100%
  ; min-height: 7rem
  ; clear: both
  ; float: none
  ; padding: 0.5rem
  }

  ProductElement ProductDescription
    { float: left
    ; padding: 0 1rem
    ; width: 10rem
    ; display: block
    }

  ProductDescription ProductTitle
    { font-size: 0.6rem
    ; display: block
    ; text-overflow: hidden
    ; clear: both
    }

  ProductDescription ProductAmount
    { color: gray
    ; display: block
    }

ThumbnailsRow
  { display: block
  ; margin-left: 10rem
  ; min-height: 5rem
  }

  ThumbnailsRow RowDescription
    { font-size: 0.75rem
    ; clear: both
    ; text-align: right
    ; display: inline-block
    ; min-width: 6rem
    ; margin-left: -7rem
    ; float: left
    ; position: relative
    }

RowDescription > Remove
  { display: inline-block
  ; clear: none
  ; position: absolute
  }

RowDescription > Copy
  { display: inline-block
  ; left: 2rem
  ; position: absolute
  }

RowDescription RowTitle
  { width: 8rem
  ; display: block
  ; margin-left: -2rem
  ; clear: both
  }

RowDescription input[type='checkbox']
  { display: inline-block
  ; width: auto
  ; float: right
  }

AddPhotos
  { display: block
  ; position: relative
  ; clear: both
  ; width: 1.5rem
  ; height: 1.5rem
  ; float: right
  }

  AddPhotos .fa
    { color: gray }

  AddPhotos:hover .fa
    { color: #0080dd }


Remove ConfirmationDialog
  { position: relative
  ; width: 3rem
  ; height: 1.45rem
  ; display: inline-block
  ; top: 0.15rem
  ; right: -1.85rem
  ; background: lightgray
  ; border-radius: 1rem
  ; z-index: 2
  ; box-shadow: 1.5pt 1.5pt 1pt red
              , -1.5pt -1.5pt 1pt red
              , -1.5pt 1.5pt 1pt red
              , 1.5pt -1.5pt 1pt red
  }

Remove ConfirmationDialog .button
  { margin: 0
  ; display: inline-block
  ; float: left
  ; height: 1.5rem
  ; width: 1.5rem
  ; font-size: 1rem
  ; line-height: 1.4rem
  ; position: relative
  }

Remove ConfirmationDialog .button .fa
  { text-shadow: none }

Remove AbortRemoval:hover:after
  { content: ''
  ; display: inline-block
  ; position: absolute
  ; top: 0.1rem
  ; left: 0.1rem
  ; height: 1.25rem
  ; width: 1.25rem
  ; border-radius: 1rem
  ; background: white
  ; opacity: 0.5
  }

Remove ConfirmRemoval:hover:after
  { display: inline-block
  ; position: absolute
  ; content: ''
  ; top: 0.1rem
  ; left: 0.1rem
  ; height: 1.25rem
  ; width: 1.25rem
  ; border-radius: 1rem
  ; background: red
  ; opacity: 0.25
  }

.button
, select
  { cursor: pointer }

.top { top: 0 }
.left { left: 0 }
.right { right: 0 }
.bottom { bottom: 0 }

select
, button
, input:not([type='file'])
  { border: 0.1rem solid lightgray
  ; font-size: 0.75rem
  ; width: 6rem
  ; height: 1.5rem
  ; -webkit-outline: 0
  ; -moz-outline: 0
  ; outline: 0
  ; outline-width: 0
  ; display: block
  ; padding: 0.15rem
  }

hr
  { border-top: 1rem solid var(--super-light-gray)
  ; padding-top: 1rem
  ; clear: both
  ; display: block
  ; width: 20rem
  }

ProductTitle hr
  { border: 0
  ; padding: 0
  ; width: auto
  }

NewVariant
  { float: left
  ; position: relative
  ; left: 9rem
  ; width: 13.95rem
  }

NewVariant ConfirmationDialog input[name='variant_name']
  { width: 10.95rem /* visual bug: if set to 11 seems TOO wide */
  ; float: left
  ; margin-right: 0.75rem
  }

NewVariant button
  { width: 1.5rem }

NewVariant ConfirmationDialog
  { position: relative }

NewVariant AbortNewVariant
  { float: right }

AbortNewVariant .fa
  { color: var(--cancel-red) }

ConfirmNewVariant
  { float: left }

ConfirmNewVariant .fa
  { color: var(--confirm-green) }

.hidden
, .zero
, ProductElement:not(.targeted) Upload
, ProductElement:not(.targeted) Move
, ProductElement:not(.targeted) Remove
, ProductElement:not(.targeted) > hr
, ProductElement:not(.targeted) ThumbnailsRow:not(:first-of-type)
, ProductElement:not(.targeted) Accounts
, ProductElement:not(.targeted) NewVariant
, ProductElement:not(.targeted) RowDescription
, Variants select
, Accounts .button
, Accounts AddPhotos
, ThumbnailsRow Thumbnail:first-of-type Remove
  { display: none !important
  }

ProductElement.targeted
  { border-top: 2rem solid var(--super-light-gray)
  ; border-bottom: 2rem solid var(--super-light-gray)
  ; padding-top: 3rem
  ; padding-bottom: 3rem
  ; margin-bottom: 4rem
  }

ProductElement.targeted:last-of-type
  { margin-bottom: -0.4rem }

ProductElement:first-of-type
  { margin-top: 0 }

form
  { display: inline-block
  ; left: 0
  }

Thumbnail.zoomed
  { position: fixed
  ; top: 2rem
  ; left: 2rem
  ; z-index: 1
  ; width: 800px
  ; height: 800px
  }

  Thumbnail.zoomed .button
    { display: none }

  Thumbnail.zoomed Zoom
  , Thumbnail.zoomed .arrow
    { display: inline-block !important
    ; z-index: 3
    }

  Thumbnail.zoomed img
    { width: 800px
    ; height: 800px
    }

ProgressBarElement
  { display: block
  ; width: 0
  ; height: 2pt
  ; margin-top: -2pt
  ; background: var(--border-blue)
  ; opacity: 0.25
  ; pointer-events: none
  ; transition-duration: 0.25s
  ; transition-timing-function: ease-out
  }

.transparent
  { filter: alpha(opacity=0)
  ; opacity: 0
  }

main
  { margin-top: 2rem }

nav
  { position: fixed
  ; z-index: 10
  ; display: inline-block
  ; top: 0
  ; left: 0
  ; height: 2rem
  ; min-width: 10rem
  ; width: 100%
  ; background: lightgray
  ; box-shadow: 0 2pt 5pt lightgray
  }

nav form
  { display: block
  ; min-width: 10rem
  ; width: 100%
  }

nav input
  { font-size: 1.3rem !important
  ; height: 2rem !important
  ; float: left
  }
nav input[type='search']
  { display: block
  ; background: var(--super-light-gray) !important
  ; border-color: var(--super-light-gray) !important
  ; min-width: 10rem
  ; width: 50% !important
  }

nav input[type='checkbox']
  { display: none }

nav input[type='checkbox'] + label
  { float: right
  ; background: var(--super-light-gray)
  ; border: 0
  ; min-width: 5rem
  ; display: block
  ; padding: 0.25rem 0.5rem
  ; height: 2rem
  ; float: left
  }
nav input[type='checkbox']:checked + label
  { background: #ad0
  }

nav input[type='submit']
  { background: var(--super-light-gray) !important
  ; width: 2rem
  ; text-align: center
  ; border: 0
  ; line-height: 1.3rem
  ; font-size: 1rem
  }

nav span
  { float: left
  ; border: 0
  ; min-width: 3rem
  ; display: block
  ; padding: 0.25rem 0.5rem
  ; height: 2rem
  ; float: left
  ; text-align: center
  }

nav button
  { display: block
  ; background: var(--super-light-gray) !important
  ; float: right
  ; width: 2rem
  ; height: 2rem
  ; text-align: center
  ; border: 0
  }

nav button .fa
  { font-size: 1rem
  ; line-height: 1.5rem
  }

RowDescription Remove ConfirmationDialog
  { right: auto
  ; left: -0.45rem
  }

RowDescription Remove ConfirmationDialog .button i
  { left: -0.35rem
  ; position: relative
  }

Thumbnail WrongDimensions
  { background: var(--cancel-red)
  ; color: white
  ; position: absolute
  ; display: block
  ; z-index: 20
  ; text-align: center
  ; width: 5rem
  ; top: -1.15rem
  ; font-size: 0.75rem
  }