body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.1em;
  max-width: 100%;
}

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-left: 15em;
  padding-right: 15em;
}

div.main {
  align-items: center;
  padding-left: 15em;
  padding-right: 15em;
}

/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 768px) {
  header {
    padding-left: 1em;
    padding-right: 1em;
  }

  div.main {
    padding-left: 1em;
    padding-right: 1em;
  }
}

header img {
  width: 370px;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  box-sizing: content-box;
  overflow: hidden;
  border: 1px solid rgba(237,237,237,1);
  border-radius: 9px;
  color: rgba(71,71,71,1);
  text-align: center;
  text-overflow: ellipsis;
  background: linear-gradient(0deg, rgba(219,219,219,1) 0, rgba(204,204,204,1) 100%);
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
  box-shadow: 0 0 1px 1px rgba(0,0,0,0.15) ;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.2) ;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-link {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
}

/* Hamburger icon */
.hamburger {
  display: none; /* Initially hidden on larger screens */
  cursor: pointer;
}

/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 768px) {
  nav {
    flex-direction: column; /* Stack items vertically */
    height: auto; /* Adjust height dynamically based on content */
    padding: 10px 20px; /* Add some vertical padding */
  }

  .nav-links {
    display: none; /* Hide navigation links by default on mobile */
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .nav-link {
    margin: 10px 0;
  }

  .hamburger {
    display: block; /* Display hamburger icon */
  }
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
}

nav li a {
  text-decoration: none;
  color: #333;
  padding: 10px;
}

nav li a:hover {
  background-color: #ddd;
  border-radius: 3px;
}

main {
  align-items: center;
  padding-bottom: 1em;
  color: #1C1C1C;
}

div#main-action {
  text-align: center;
  margin: auto;
  padding: 1em;
  font-size: 1.5em;
  background: linear-gradient(to bottom, #1D4688 0%, #4285F4 100%);
  color: #FFED64;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
div#main-action label {
  font-weight: bold;
}
#global_result_type {
    width:auto;
    max-width:100%;
    height:1.5em;
    background-color:#84acea; !important
    background:#84acea; !important
}

h1, h2, h3, h4, h5, h6 {
    margin-left: 40px;
    display: block;
    max-width: 100%;
}

p {
    font-size: 1.1em;
}

p.result_criteria{
    font-size: .8em;
}

div#basic-form {
    display:none;
}

form.update {
  padding: 20px;
  border-radius: 5px;
}

div.form {
    border: none;
    background-color: #F5F5F5;
    border-radius: 5px;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 2em;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 100%;
}

form.search {
  text-align:center;
  max-width: 100%;
}
#search_box{
    max-width:100%;
}

form.advanced_form {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    max-width: 100%;
}
form.search hr {
    border: none;
}
form.search button[type="submit"] {
    margin-left: auto;
    margin-right: auto;
}
form.advanced_form hr {
  border: none;
  border-top: 1px solid #DEDEDE;
  width: 100%;
}

form label {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

form.details label {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: .5em;
  margin-top: 1.5em;
}

form.details button[type="submit"] {
  float: right;
  margin-right: 3em;
  width: 10em;
}
form.details button[type="reset"] {
  float: right;
  margin-right: 5em;
  width: 10em;
}

div.newEntry {
    margin-top: .5em;
    margin-bottom: .5em;
    margin-right: 3em;
    border: solid 1px #DDD;
    border-radius: 8px;
    padding: 2em;
    background-color: #F2F2F2;
}

div#advanced-form{
    text-align:center;
}

.select2-container--bootstrap-5 .select2-selection, .select2-container {
    font-size: unset;
    display: inline-block; !important
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
input[type="url"],
input[type="number"],
textarea,
select {
    border-radius: 8px;
    font-size: 1.2em;
    border: solid #DEDEDE 1px;
    padding: .5em;
    margin-bottom:1em;
    max-width: 30em;

}

select.totalWidth {
    width: 100%;
}

input:invalid{
    border-color:red;
    background-color: #FF9797;
}

#preview-image{
    max-width:370px;
    max-height:370px;
    background-color: #fff;
}

#film_description{
    width:500px;
    height:200px;
}

button.tag,
button.dt-button,
button.buttons-pdf,
button.buttons-html5 {
    font-size:.8em;
    padding:10px;
    border-radius: 8px;
    border: solid #DEDEDE 1px;
    background-color: #DEDEDE;
    background: #DEDEDE;
    color: black;
    line-height: 1em;
    margin: .5em;
}

button.tag:hover,
button.dt-button:hover,
button.buttons-pdf:hover,
button.buttons-html5:hover,
button.tag:active,
button.dt-button:active,
button.buttons-pdf:active,
button.buttons-html5:active {
    background-color: #F5F5F5 !important; 
    background: #F5F5F5 !important; 
}

button.back {
    font-size:.8em;
    padding:5px 1em;
    border: solid #F5F5F5 1px;
    margin-left: 40px;
    border-radius: 8px;
    background-color: #DEDEDE;
    color: black;
}
button.back:hover {
    background-color: #F5F5F5;
}


a.add{
    display: block;
}
a.add, a.update, a.delete {
    text-decoration:none;
    margin-top: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
a.add:hover {
    text-decoration:underline;
}

span.tip {
    display: table;
    border-radius:6px;
    background-color: #FDFFBC;
    border: solid 1px #FFE170;
    text-align:center;
    margin: 0 auto;
    margin-bottom: .8em;
    padding: .8em;
    color: #333;
    max-width: 90%; 
}
span.tip:hover{
    cursor:pointer;
}
div.item_field {
    margin-bottom: 3em;
    padding-bottom: .4em;
    border-bottom: solid 1px #DDD;
}

form input.filmtitle {
  font-size:2em;
  width: 100%;
  padding:10px;
  border-radius: 8px;
  border: solid #DEDEDE 1px;
}
#film_alt_title {
  width: 100%;
}

form input[type="number"] {
    width: 3em;
}
form input[type="url"] {
    width: 30em;
}

form input[type="search"],
form input[type="email"] {
  font-size:1.3em;
  padding:10px;

  margin-left: auto;
  margin-right: auto;

  border-radius: 30px;
  border: solid #DEDEDE 1px;
  width: 370px;
  max-width: 90%;
}

form input[type="search"] {
    padding-left: 40px;
    /* You can use your image but having cleaner code is better, so I suggest saving the file and just linking it*/
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E") ;*/
    background-image: url("img/Magnifying_glass_icon.svg");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: 15px center;
}
form select{
  border-radius: 10px;
  font-size:1.3em;
  border: solid #DEDEDE 1px;
  max-width: 90%;
}

form input:hover,
form textarea:hover,
form select:hover {
    border-color: #4285f4;
}

form button[type="submit"] {
  background-color: #4285f4;
  color: #fff;
  padding: .6em 3em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.3em;
}

form button[type="reset"] {
  background-color: #990000;
  color: #fff;
  border: none;
  padding: .6em 3em;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.3em;
}
form button[type="reset"]:hover {
  background-color: #720B0B;
}

#suggestion-list {
  position: relative;
  text-align: left;
  width:340px;
  max-width:80%;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  margin-left: calc(2em + 30px);
  margin-left: auto;
  margin-right: auto;
  max-height: 200px;
  overflow-y: auto;
  border-top: none;
  background-color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  color: #333;
}

#suggestion-list .suggestion-item {
  padding: 10px;
  padding-left: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}

#suggestion-list .suggestion-item:hover {
  background-color: #f0f0f0;
}

#suggestion-list .suggestion-item.selected {
  background-color: #f0f0f0;
}

#suggestion-list.fade-out {
  border: 1px solid #ccc;
  box-shadow: 2 4px 4px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#suggestion-list.fade-in {
  border: 1px solid #ccc;
  box-shadow: 2 4px 4px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.15);
  opacity: 1;
  transition: opacity 0.2s ease-out;
}


form button:hover {
  background-color: #3367d6;
}

form div.advanced_form {
    padding: 1em 2em;
    background-color: #FFF;
    border: solid 1px #DEDEDE;
    border-radius: 10px;
    margin: 1em 1em;
    text-align: center;
    vertical-align: top;
    max-width:95%;
}
form div.advanced_form select {
    vertical-align: top;
}
form div.advanced_form label {
    display: block;
    text-align:center;
}

footer {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}
footer p{
    font-size: small;
}

.search_result_item {
    padding: 2em;
    background-color: #F5F5F5;
    border-radius: 10px;
    margin: 2em;
}
.search_result_item a{
    color: #000E86;
    text-decoration: none;
}
.search_result_item a:hover{
    color: #0014C0;
    text-decoration: underline;
}
.search_result_details {
    padding: .5em;
    margin-left: 2em;
}
.listimg {
    max-height:200px;
    float: left;
    padding-right: 1em;
    margin-bottom: 1em;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* table */
table {
    border: none;
}
table td {
    padding: 10px;
    margin: none;
}
table thead tr {
    background-color: black;
    color: white;
    font-weight: 500;
}
table tbody tr.odd {
    background-color: #F2F2F2;
}
table tbody tr.even {
    background-color: #F5F5F5;
}
td.label {
    text-align: right;
}
td.field {
    text-align: left;
}
/* end table */
/* carousel */
.tn-carousel {
  background: black;
  margin: 0 auto;
  padding: 5px;
}

div.tns-outer>button{
    display: none;
}

.tn-carousel img {
  width: 268px;
  height: 358px;
  object-fit: contain;
  border-radius: 5px;
  cursor: pointer;
  opacity: .7;
  transition: opacity 0.3s ease-in-out; /* Transition for opacity */
}
.tn-carousel img:hover {
  opacity: 1; /* Adjust opacity as desired */
}

.tn-carousel .carousel-film-title {
  margin-top: 5px;
  text-align: center;
  color: white;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
a.carousel {
  text-decoration:none;
  font-weight:normal;
}
a.carousel:hover {
  font-weight:bold;
}
/* end carousel */


#player {
  display: flex;
  background-color: #1a1a1a;
  color: #fff;
}

#playlist {
  flex: 1;
  padding: 20px;
  overflow-y: scroll;
  max-height: 360px;
}

#playlist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#playlist li {
  display: block;
}

#playlist li a {
  display: block;
  color: #fff;
  text-decoration: none;
  margin-bottom: 10px;
}

#playlist li a:hover {
  color: #ff0000;
}


#videoPlayer {
  flex: 2;
  padding: 20px;
}


/* Example styles for the embedded video player */
#videoPlayer video {
  width: 100%;
  height: auto;
  background-color: #000;
}

#videoPlayer video:focus {
  outline: none;
}