/* || POC Dropdowns */

.poc-dropdowns-ctn {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 90%;
  justify-content: space-between;
}

.all-btn-ctn {
  display: flex;
  flex-direction: row;
  justify-items: center;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin: 0 auto;
  width: 80%;
  padding: 2vmin 0;
}

.dropdowns-ctn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 20vw;
}

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

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

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



/* videos ctn */
.videos-ctn {
  /* margin-top: 8vmin; */
  display: grid;
  place-items: center;
  height: 100%;
}

.videos-ctn video {
  width: 80%;
  max-width: 80%;
  margin: 0 auto;
  box-shadow: 4px 4px 4px black;
}

/* select */
select {
  color: white;
  background-color: #1B5364;
  border: 0px;
}

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

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


/* scipt text ctn */
.script-ctn {
  margin: 0 auto;
  color: white;
  width: 50%;
  padding: 2vmin;
  box-shadow: 4px 4px 4px black;
}

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




/* || Media Queries */

/* iPad */

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

  .poc-dropdowns-ctn {
    width: 90%;
    height: 90%;
  }

  .dropdowns-ctn {
    width: 70%;
    height: 10vmin;
    margin: 0 auto;
  }

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

  video {
    width: 100%;
  }
  

  .script-ctn {
    margin: 0 auto 20vmin auto;
    width: 80%;
  }

}


/* Phone */

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

  .poc-dropdowns-ctn {
    width: 90%;
    height: 90%;
  }

  .all-btn-ctn {
    display: flex;
    flex-direction: column;
  }

  .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 {
    margin: 0 auto 20vmin auto;
    width: 80%;
  }


}



/* DEPRECATED */

/* for materiliazcss but no working (JS mat) */
/* .select-wrapper input.select-dropdown {
  color: white;
  border-bottom: 1px solid white;
}

.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid #48b3c6;
}

.dropdown-content li>a, .dropdown-content li>span {
  color: #48b3c6;
}
*/