.image-placeholder {
    width: 100%;
    padding-bottom: 56.25%;
    background-color: #D1DEEE;
}

input[type=file] {
  margin: 20px 0;
}
.layout img {
  max-height: 100%;
  max-width: 100%;
}
.dropTarget {
  position: relative;
  border: 10px solid #d1deef;
  height: auto;
  min-height: 220px;
  background: #fff;
  /*text-align: center;*/
  padding: 0 40px;
}
/*#previews > div,*/
.image-row {
  box-sizing: border-box;
  height: 100px;
  width: 100%;
  border-top: 1px solid #ddd;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.image-row .button-box {
  display: flex;
}

.image-row .button-box .button {
  margin-left: 5px;
}

#imagesTools{
  margin-top: -35px;
}

#imagesTools .button-box .button {
  background-color: #003299;
  padding: 10px 20px;
  font-weight: 400;
}

.image-thumbnail {
  box-sizing: border-box;
  height: 100px;
  min-height: 100px;
  width: 100px;
  padding: 0px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
}

.image-name {
  flex-grow: 2;
  padding: 0 10px;
  margin: 0 20px;
  border: 1px solid #ddd;
  font-size: 16px;
}

.image-row img {
  margin: 0;
}

/*#previews > div > progress,*/
.image-row progress {
  width: 80%;
}
.image-row img + progress {
  width: 0%;
}

.layout {
  width: 100%;
  max-width: 1280px;
  margin: auto;
}

#imagesTools form {
  display: none;
  padding: 0 60px 30px;
}

#imagesTools form label {
    min-width: 50px;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}

#imagesTools form output {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}

#chooseFiles {
  display: none;
}

.information {
  text-align: center;
  padding: 34px 40px;
}

.information label a {
  display: inline-block;
  color: #328dd2;
  cursor: pointer;
}

.information label a:hover {
  color: #003299;
}

.additional-information {
    padding: 10px 60px;
    font-size: 18px;
    font-style: italic;
}

input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 245px;
    height: 5px;
    background: #4076bf;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #fcf135;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #003299;
}
input[type=range]{
    /* fix for FF unable to apply focus style bug  */
    border: 1px solid white; 

    /*required for proper track sizing in FF*/
    width: 245px;
}

input[type=range]::-moz-range-track {
    width: 245px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
    background: #ccc;
}
input[type=range]::-ms-track {
    width: 245px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}
input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
    background: #888;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}


.section .table.table-header-rotated {
  border-collapse: collapse;
  width: auto;
}
.section .table.table-header-rotated input {
  pointer-events: none;
}
.table-header-rotated {
  font-size: 15px;
}
.section .table-header-rotated tr th,
.section .table-header-rotated tr td {
  min-width: auto;
}
.table-header-rotated td {
  width: 30px;
}
.table-header-rotated th {
  padding: 5px 10px;
}
.table-header-rotated td {
  text-align: center;
  padding: 10px 5px;
  border: 1px solid #ccc;
}
.table-header-rotated th.rotate {
  height: 140px;
  white-space: nowrap;
}
.table-header-rotated th.rotate > div {
  -webkit-transform: translate(25px, 51px) rotate(315deg);
          transform: translate(25px, 51px) rotate(315deg);
  width: 30px;
}
.table-header-rotated th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}
.table-header-rotated th.row-header {
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}

.images-details table input[type="radio"] {
  opacity: 0;
}

.images-details table input[type="radio"]:checked {
  opacity: 1;
}