styles.css

.custom-file-label {
  white-space  : nowrap;
  overflow     : hidden;
  text-overflow: ellipsis;
  width        : 100%;
  padding-right: 5em !important;
}

.jumbotron {
  background             : url(assets/jumbotron.jpg) no-repeat bottom center;
  -webkit-background-size: 100%;
  -moz-background-size   : 100%;
  -o-background-size     : 100%;
  background-size        : 100%;
  background-color       : white !important;
}

#uploadProgressValue {
  position: absolute;
  z-index : 1;
}

.round {
  width           : 40px;
  height          : 40px;
  border-radius   : 100%;
  background-color: #a6a6a6;
  transform       : rotate(270deg);
}

#cta {
  width   : 100%;
  cursor  : pointer;
  position: absolute;
}

#cta .arrow {
  left: 30%;
}

.arrow {
  position       : absolute;
  bottom         : 0;
  margin-left    : 0px;
  width          : 12px;
  height         : 12px;
  background-size: contain;
  top            : 15px;
}

.segunda {
  margin-left: 8px;
}

.next {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
}

@keyframes bounceAlpha {
  0% {
    opacity  : 1;
    transform: translateX(0px) scale(1);
  }

  25% {
    opacity  : 0;
    transform: translateX(10px) scale(0.9);
  }

  26% {
    opacity  : 0;
    transform: translateX(-10px) scale(0.9);
  }

  55% {
    opacity  : 1;
    transform: translateX(0px) scale(1);
  }
}

.bounceAlpha {
  animation-name           : bounceAlpha;
  animation-duration       : 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.arrow.primera.bounceAlpha {
  animation-name           : bounceAlpha;
  animation-duration       : 1.4s;
  animation-delay          : 0.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.round:hover .arrow {
  animation-name           : bounceAlpha;
  animation-duration       : 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.round:hover .arrow.primera {
  animation-name           : bounceAlpha;
  animation-duration       : 1.4s;
  animation-delay          : 0.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}



.card {
  background   : #fff;
  border-radius: 2px;
  display      : inline-block;
  height       : 300px;
  margin       : 1rem;
  position     : relative;
  width        : 300px;
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.stairs-loader,
.stairs-loader:before,
.stairs-loader:after {
  background       : #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation        : load1 1s infinite ease-in-out;
  width            : 1em;
  height           : 4em;
}

.stairs-loader {
  color                  : #ffffff;
  text-indent            : -9999em;
  margin                 : auto;
  position               : relative;
  font-size              : 4px;
  -webkit-transform      : translateZ(0);
  -ms-transform          : translateZ(0);
  transform              : translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay        : -0.16s;
  min-height             : 20px;
}

.stairs-loader:before,
.stairs-loader:after {
  position: absolute;
  top     : 0;
  content : '';
}

.stairs-loader:before {
  left                   : -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay        : -0.32s;
}

.stairs-loader:after {
  left: 1.5em;
}

@-webkit-keyframes load1 {

  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height    : 4em;
  }

  40% {
    box-shadow: 0 -2em;
    height    : 5em;
  }
}

@keyframes load1 {

  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height    : 4em;
  }

  40% {
    box-shadow: 0 -2em;
    height    : 5em;
  }
}



#uploadProgressBarCtr {
  text-align : center;
  color      : black;
  font-weight: bolder;
  display    : block;
  line-height: 2rem;
  height     : 2rem;
}

.progress-bar {
  background-color: #8BC34A !important;
}

.nav-pills {
  border       : 1px solid #007bff;
  border-radius: 7px;
}

.start-pill {
  border-top-right-radius   : 0 !important;
  border-bottom-right-radius: 0 !important;
}

.end-pill {
  border-top-left-radius   : 0 !important;
  border-bottom-left-radius: 0 !important;
}


.red {
  padding: 0.5em;
  color  : red
}

.page-header {
  padding: 0 1em;
}

.video-meta p {
  padding-right: 1em;
}

.video-history-item {
  border-bottom: 1px solid lightgrey;
  margin-bottom: 3em;
  padding      : 2em;
}

.profile {
  max-width          : 200px;
  max-height         : 200px;
  width              : 200px;
  height             : 200;
  border-radius      : 9999px;
  border             : 1px solid;
  background-image   : url(https://virajsingh.net/images/Viraj.jpg);
  background-position: center;
  background-size    : cover;
  background-repeat  : no-repeat;
}

.copy-url {
  padding: 0 0.5em !important;
}

form,
.history-ctr {
  margin : 2em 0;
  padding: 2em;
}

.history-ctr label {
  font-weight: 800;
}

#uploadMask,
#signinMask {
  height    : 100vh;
  width     : 100vw;
  position  : fixed;
  top       : 0;
  left      : 0;
  background: #00000080;
  z-index   : 99;
}

.mask {
  position: fixed;
  top     : 50%;
  left    : 45%;
  display : flex;
}

.loader,
.loader:after {
  border-radius: 50%;
  width        : 10em;
  height       : 10em;
}

.loader {
  margin           : 0;
  font-size        : 5px;
  /* position      : fixed; */
  text-indent      : -9999em;
  border-top       : 1.1em solid rgba(255, 255, 255, 0.2);
  border-right     : 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom    : 1.1em solid rgba(255, 255, 255, 0.2);
  border-left      : 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform    : translateZ(0);
  transform        : translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation        : load8 1.1s infinite linear;
  /* top           : 50vh;
    left           : 50vw; */
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform        : rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform        : rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform        : rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform        : rotate(360deg);
  }
}

.mask-label {
  color : white;
  margin: 0.5em 1em;
}

.lds-ripple {
  display : inline-block;
  position: relative;
  width   : 80px;
  height  : 80px;
}

.lds-ripple div {
  position     : absolute;
  border       : 4px solid #fff;
  opacity      : 1;
  border-radius: 50%;
  animation    : lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes lds-ripple {
  0% {
    top    : 36px;
    left   : 36px;
    width  : 0;
    height : 0;
    opacity: 1;
  }

  100% {
    top    : 0px;
    left   : 0px;
    width  : 72px;
    height : 72px;
    opacity: 0;
  }
}

nav {
  border-bottom: 0.5px solid grey;
}

.video-status {
  margin: 0 1em;
}

.contentLoader,
.contentLoader:after {
  border-radius: 50%;
  width        : 10em;
  height       : 10em;
}

.contentLoader {
  margin           : 60px auto;
  font-size        : 10px;
  position         : relative;
  text-indent      : -9999em;
  border-top       : 1.1em solid rgba(179, 36, 54, 0.2);
  border-right     : 1.1em solid rgba(179, 36, 54, 0.2);
  border-bottom    : 1.1em solid rgba(179, 36, 54, 0.2);
  border-left      : 1.1em solid #1c2557;
  -webkit-transform: translateZ(0);
  -ms-transform    : translateZ(0);
  transform        : translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation        : load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform        : rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform        : rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform        : rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform        : rotate(360deg);
  }
}

.contentLoaderCtr {
  font-size : 1.5em;
  text-align: center;
}