[component="TrunkLogin"] {
  position:absolute;
  margin-top:-100px;
  top:40%;
  left: 0;
  right: 0;
}

[component="TrunkLogin"] form {
  padding: 8px;
  border:solid gray 1px;
  max-width:300px;
  margin: auto;
  border-radius:3px;
  box-shadow:2px 2px 8px rgba(0,0,0,0.4);

  font-family: sans-serif;
  font-size: 14px;
  background-color: white;
}

[component="TrunkLogin"] .errors,
[component="TrunkLogin"] .inputs,
[component="TrunkLogin"] .buttons {
  margin: 8px;
}

[component="TrunkLogin"] .errors {
  color: red;
  margin-left: -8px;
  margin-right: -8px;
  padding:8px 16px;
  background-color: #FFE0E0;
  text-align: center;
}

[component="TrunkLogin"] .inputs label {
  display:block;
  border: solid silver 1px;
  margin: 8px 0;
}

[component="TrunkLogin"] .inputs input {
  border: 0;
  margin: 0;
  padding: 7px 0;
  display: block;
  width: 100%;
  background-color: white;
}

[component="TrunkLogin"] .buttons {
  text-align: right;
  background-repeat: no-repeat !important;
  background-position: 8px center !important;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAPNJREFUWMPtlTEKwkAQRZ+2qTT2egVBsBFS2gYPlSY5Qw6Qwt4mB7DxCpJa9AAB12YCS1hjYlYDuh8Gls3OzMvMLAv/rlHH8ztgCyyBBTCR/RtwBk7AAdjbhJwBKaDE7tq6bvq3VHx7KW5I1tbidxJPgcJC8soKidlKc6CslbNaX4AI2ACe5uPJXiRnlMG/lNgv/7w09PkKhB0qGIqPMkA0VqIwJM96zFBmgCi6DFxi4RYlbQbTN/Qts3iVM8M8+fVDK+Co9dy2qpk4Sq6nWgPBBwACif07yrW+5t96jHQpG7HGQ5fRATgAB+AAHIADGBzA6QGaI31VVX87mAAAAABJRU5ErkJggg==') !important;
}[component="TrunkButton"] {
  display: inline-block;
  text-decoration: none;
  padding: 8px 12px;
  margin: 0px;
  border-radius: 4px;
  cursor: pointer;
  border: solid 1px;
  text-transform: capitalize;
  font-size: 14px;
  text-align: center;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;

  /* custom styles */
  color: #333;
  background-color: white;
  border-color: #adadad;
}

[component="TrunkButton"]:hover {
  background-color: #ebebeb;
  border-color: #adadad;
}

[component="TrunkButton"].blue {
  color: #fff;
  background-color: #428bca;
  border-color: #357ebd;
}

[component="TrunkButton"].blue:hover {
  color: #fff;
  background-color: #3276b1;
  border-color: #285e8e;
}

[component="TrunkButton"].green {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

[component="TrunkButton"].green:hover {
  color: #fff;
  background-color: #47a447;
  border-color: #398439;
}

[component="TrunkButton"].aqua {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

[component="TrunkButton"].aqua:hover {
  color: #fff;
  background-color: #39b3d7;
  border-color: #269abc;
}

[component="TrunkButton"].orange {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

[component="TrunkButton"].orange:hover {
  color: #fff;
  background-color: #ed9c28;
  border-color: #d58512;
}

[component="TrunkButton"].red {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

[component="TrunkButton"].red:hover {
  color: #fff;
  background-color: #d2322d;
  border-color: #ac2925;
}

[component="TrunkButton"].purple {
  color: #fff;
  background-color: #ca8bca;
  border-color: #bd7ebd;
}

[component="TrunkButton"].purple:hover {
  color: #fff;
  background-color: #b176b1;
  border-color: #8e5e8e;
}

[component="TrunkButton"].gray {
  color: #fff;
  background-color: #888888;
  border-color: #777777;
}

[component="TrunkButton"].gray:hover {
  color: #fff;
  background-color: #555555;
  border-color: #555555;
}

[component="TrunkButton"].none {
  color: #428bca;
  background-color: transparent;
  border-color: transparent;
}

[component="TrunkButton"].none:hover {
  color: #2a6496;
  border-color: #2a6496;
}

[component="TrunkButton"]:focus,
[component="TrunkButton"]:focus {
  outline: none;
  box-shadow: 0 0 4px dodgerblue;
}

[component="TrunkButton"][disabled] {
  opacity: 0.65;
  cursor: none;
}[component] {
   font-family: sans-serif;
}

.TrunkMargin {
   margin: 16px;
}

/* Mobile devices */
@media (max-width: 1024px) {

   .TrunkMargin {
      margin: 0;
   }

}
html {
  font-size: 10px;
}

[component="Shoots"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

[component="Shoots"] .toolbar {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4rem;
  background-color: darkslateblue;
}

[component="Shoots"] .toolbar .left {
  float: left;
}

[component="Shoots"] .toolbar .right {
  float: right;
}

[component="Shoots"] .toolbar ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

[component="Shoots"] .toolbar li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

[component="Shoots"] .toolbar li a {
  display: block;
  padding: 1rem 2rem;
  height: 2rem;
  margin: 0;

  color: white;
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: bold;
}

[component="Shoots"] .toolbar li a[id]:hover {
  background-color: rgba(255,255,255,0.2);
  cursor: pointer;
}

[component="Shoots"] .workspace {
  position: absolute;
  top: 4rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;

  background-color: snow;
  background-image: url('/img/2/h:16');
  background-repeat: no-repeat;
  background-position: right bottom;
}












#form-exit {
  display: none;
}





[component="ShootsUpload"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  
  background-color: white;
  text-align: center;
}


/* ShootsThumbnail */

[component="ShootsUpload"] [component="ShootsThumbnail"].uploading .frame {
  background-color: #F0F0F0;
}

[component="ShootsUpload"] [component="ShootsThumbnail"].uploading.error .progress-border {
  border-color: darkred;
}

[component="ShootsUpload"] [component="ShootsThumbnail"].uploading.error .progress {
  background-color: red;
}

/* Your CSS here */
[component="ShootsList"] {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow: auto;
}[component="ShootsThumbnail"] {
  float: left;
  width: 200px;
  height: 200px;
  margin: 1px;
}

[component="ShootsThumbnail"] .frame {
  position: absolute;
  background-color: red;
  width: inherit;
  height: inherit;

  border: solid silver 0px;
  background-color: white;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url();
  background-size: cover;
}

[component="ShootsThumbnail"] .tags {
}

[component="ShootsThumbnail"] .tag {
  float: right;
  clear: right;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  
  color: white;
  max-width: 50%;
  font-size: 11px;
  padding: 4px;
  margin-top: 2px;
  font-weight: bold;
}

[component="ShootsThumbnail"]:hover .tag {
  color: darkslateblue;
  background-color: white;
}



[component="ShootsThumbnail"] .title {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px;
  
  color: black;
  background-color: rgba(255,255,255,0.6);
  text-align: center;
  font-size: 14px;
}

[component="ShootsThumbnail"] .title a {
  text-decoration: none;
}

[component="ShootsThumbnail"]:hover .title {
  display: block;
}


/*  experimental */
/*
[component="ShootsThumbnail"].uploading .frame {
  -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
*/

[component="ShootsThumbnail"] .progress-border {
  display: none;
  position: absolute;
  border: solid rgb(10, 0, 255) 2px;
  margin: -14px 20px 0 20px;
  height: 24px;
  right: 0;
  left: 0;
  top: 50%;
  border-radius: 4px;
  background-color: rgba(255,255,255,0.8);
  line-height: 24px;
  font-size: 12px;
  color: white;
}

[component="ShootsThumbnail"].uploading .progress-border {
  display: block;
}

[component="ShootsThumbnail"] .progress {
  position: absolute;
  background-color: rgba(0, 143, 255, 0.8);
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
}

[component="ShootTags"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  
  background-color: rgba(255,255,255,0.8);
  text-align: center;
}


[component="ShootTags"] ::selection {
  background-color: transparent;
}

[component="ShootTag"] {
  display: inline-block;
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  border-radius: 2rem;
  margin: 1rem;
  background-color: gray;
  cursor: pointer;
}

[component="ShootTag"]:hover {
  background-color: silver;
}

[component="ShootTag"][data-checked="true"] {
  background-color: dodgerblue;
}/* Your CSS here */