/* || POC Dropdowns */

.poc-dropdowns-ctn {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.all-btn-ctn {
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin: 0 auto;
  margin-top: 1vh;
  min-height: 15%;
  width: 75%;
  padding: 0;
}

.dropdowns-ctn {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
  height: 100%;
}

.dropdowns-ctn select {
  height: min-content;
  padding: 5px;
}

/* button */
.btn {
  background-color: #1B5364;
  margin: 1vmin 0;
  color: white;
}

.btn:hover {
  background-color: #48b3c6 !important;
}

.btn:focus {
  background-color: #48b3c6 !important;
}

#generate-video-btn {
  background-color: #48b3c6 !important;
}

/* videos ctn */
.videos-ctn {
  display: grid;
  place-items: center;
  width: 75%;
  margin: 0 auto;
}

.videos-ctn video {
  margin: 0 auto;
  box-shadow: 2px 2px 2px black;
  min-width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.videos-ctn video:focus {
  outline: none;
}

/* select */
select {
  display: inline;
  padding: 0px;
  color: white;
  border: none;
  padding: 1vmin;
  background-color: #1B5364;
  cursor: pointer;
}

select.browser-default {
  display: inline;
}

select:hover {
  background-color: #48b3c6 !important;
}

select:focus {
  background-color: #48b3c6 !important;
  border: 0px;
}

.dropdown-inline {
  width: min-content;
  height: min-content;
  color: #48b3c6;
  padding: 0;
  background-color: #1B262C !important;
  border: 1px solid white;
}

.dropdown-inline:focus {
  background-color: #1B262C !important;
}

.dropdown-inline:hover {
  background-color:  #1B262C !important;
}

/* need to override specific width for each 
value based on the length of the input
and also resize depending on the value lenght */
#city-select {
  width: 50px;
}


/* scipt text ctn */
.script-ctn {
  color: white;
  width: 50%;
  padding: 0;
}

.script-ctn span {
  color: #48b3c6;
}

p {
  margin: 0;
}


/* || Media Queries */

/* iPad */

@media screen and (max-width: 1024px) {

  .poc-dropdowns-ctn {
    width: 100%;
    height: 100%;
    justify-content: center; 
  }

  .all-btn-ctn {
    width: 90%;
  }

  .dropdowns-ctn {
  }

  .videos-ctn {
    display: flex;
    width: 90%;
    max-height: 50%;
    margin: 0vmin auto;
  }

  video {
    width: 100%;
  }
  
  .script-ctn {
    width: 50%;
  }

  #generate-video-btn {
    width: 20%;
  }


}


/* Phone */

@media screen and (max-width: 600px) {

  .poc-dropdowns-ctn {
    width: 90%;
    height: 90%;
    justify-content: space-evenly;
  }

  .all-btn-ctn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 50%;
  }

  .dropdowns-ctn {
    flex-direction: column;
    height: 20vh;
    margin: 0 auto;
  }

  .videos-ctn {
    display: flex;
    width: 90%;
    max-height: 50%;
    margin: 0vmin auto;
  }

  video {
    width: 100%;
  }
  
  .script-ctn {
    width: 100%;
  }

  .dropdowns-ctn {
    flex-direction: row;
    height: auto;
    width: 100%;
  }

  #generate-video-btn {
    width: 100%;
  }

}