@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/Ubuntu/Ubuntu-Regular.ttf');
}



* {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  overflow-y: scroll;
}

body {
  background-color: #fff;
  color: #444;
  font-size: 12pt;
  line-height: 14pt;
  font-family: 'Ubuntu', sans-serif;

  color: #000;
  font-weight: 200;
}

ol, ul {
  list-style: none;
}


h1, h2, h3, h4, h5, h6 {
  margin: 1.5em 0 .833em;
  font-weight: bold;
  line-height: 1em
}

h1, .h1 {
  font-size: 2em
}

h2, .h2 {
  font-size: 1.6em
}

h3, .h3 {
  font-size: 1.4em
}

h4, .h4 {
  font-size: 1.2em
}

h5, .h5 {
  font-size: 1.1em
}

h6, .h6 {
  font-size: 1em
}

p {
  margin: 1em 0
}

strong, b {
  font-weight: bold
}


a {
  text-decoration: none;
  color: #a3a3a3;
}

a:hover, a:focus {
  text-decoration: none;
  color: #000;
}

a:hover, a:active {
  outline: none
}

hr {
  background-color: #fff;
  border: 1px solid #fff;
  border-top: 1px solid #aaa;
  clear: both;
  margin: 2em 0
}


.flex-r {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.flex-c {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-center {
  justify-content: center;
}

.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.flex-7 {
  flex: 7;
}
.flex-10 {
  flex: 10;
}

.margin-r-m {
  margin-right: 1rem;
}


.login-form {
  display: flex;
  justify-content: center;
  margin-top: 20vh;
}
.login-form .box {
  width: 50vw;
}

.login-logo {
  background-image: url('../../images/film-deluxe-logo-horizontal.svg');
  background-position: 2rem center;
  background-size: auto 80%;
  background-repeat: no-repeat;
  height: 5rem;
  margin-top: 2rem;
}


nav.mainMenu {
  height: 3rem;
  background-color: #f2f2f2;
}


nav.mainMenu .logo {
  background-image: url('../../images/film-deluxe-logo-horizontal.svg');
  background-position: 2rem center;
  background-size: auto 80%;
  background-repeat: no-repeat;
  max-width: 25vw;
  min-width: 15vw;
}

nav.mainMenu li {
  padding-left: 1rem;
  padding-right: 1rem;
}

nav.mainMenu a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav.mainMenu a.active {
  color:#367fa9;
}

main {
  padding-top: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay .spinner {
  font-size: 300%;
}


.formSelectList .list {
  position:relative;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.formSelectList .content {
  position:relative;
  left: 0px;
  top: 0.3rem;
  width: 25rem;
  height: 10rem;
  background:white;
  z-index: 999999999999;
  overflow: auto;

  -webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
  -moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
  -ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
  -o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
  box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
}


.clips {
  display: flex;
  flex-wrap: wrap;
}

.clips .clip {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  margin-right: 1rem;
  cursor: pointer;
}
.clips .clip .img {
  background-position: center center;
  background-size: contain ;
  background-repeat: no-repeat;
  width: 236px;
  height: 133px;
}
.cursorPointer {
  cursor: pointer;
}

footer {
  margin-top: 3rem;
}

.btn-del {
  background-image: url('../../images/icons/icons8-trash-64.png');
  background-position: center;
  background-size: 30% auto;
  background-repeat: no-repeat;

  max-width: 1rem !important;
  min-width: 1rem !important;
  height: 0.5rem;
}

.btn-back {
  background-image: url('../../images/icons/icons8-left-arrow-64.png');
  background-position: 1rem center;
  background-size: auto 80%;
  background-repeat: no-repeat;
  padding-left: 5rem !important;
}
.btn-prev {
  background-image: url('../../images/icons/icons8-chevron-left-64.png');
  background-position: center;
  background-size: auto 60%;
  background-repeat: no-repeat;
}

.btn-next {
  background-image: url('../../images/icons/icons8-chevron-right-64.png');
  background-position: center;
  background-size: auto 60%;
  background-repeat: no-repeat;
}


.icon_publish_off {
  background-image: url('../../images/icons/001-eye.png');
  background-position: center;
  background-size: auto 90%;
  background-repeat: no-repeat;
  width: 1.2rem;
  height: 1.2rem;
}
.icon_publish_on {
  background-image: url('../../images/icons/002-eye-1.png');
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  width: 1.2rem;
  height: 1.2rem;
}
.reel-item .icon_publish_off,
.reel-item .icon_publish_on{
  margin-right: 1rem;
}


.formSelectList .top {
  display: flex;
}
.btn-list {
  background-position: center center;
  background-size: auto 40%;
  background-repeat: no-repeat;
  display: inline-block;
  width: 3rem;
  cursor: pointer;
}
.btn-down {
  background-image: url('../../images/icons/icons8-chevron-down-64.png');
}
.btn-up {
  background-image: url('../../images/icons/icons8-chevron-up-64.png');
}


.formSelectList .content .item {
  padding: 0.4rem;
  cursor: pointer;
}
.formSelectList .content .item:hover {
  color:#367fa9;
}
.formSelectList .content .item:nth-child(2n) {
  background-color: #f9f9f9;
}
.toolbar {
  flex-wrap: nowrap;
}
.toolbar input {
  width: 100%;
}
.toolbar li:first-child {
  padding-top: 1.5rem !important;
}

.text-small {
  font-size: 80%;
}

.table-center td {
  height: 100%;
  vertical-align: middle;
}


.sortable-ghost {
  background-color: #8aa4af;
  border-color: #8aa4af;
  padding: 2rem;
}


.reel-item .si-modal-content .cursorPointer:hover {
  background-color: #8aa4af;
}

.text-blue {
  color: #367fa9;
}
.progress-bar {
  height: 1.3rem;
  width: 100%;
  border-radius: 0.3rem;
  background-color: #f9f9f9;
}

.progress-bar > div {
  width: 0%;
  height: 100%;
  border-radius: 0.3rem;
  background-image: linear-gradient(to right, #8aa4af, #367fa9);
  background-size: 100% 100%;
  transition: width 200ms;
}

.none {
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
}