/* CSS */

html { height:100%; width: 100%; margin: 0; font-family: Verdana; font-size: 1em;}
body { height: 100%; width: 100%; margin: 0; background-color: #ffffff; font-family: Verdana; font-size: 1em; }

#MenuNav { background-color: #033d59; color: #ffffff; }
#MenuHeader { padding: 10px; font-weight: bold; font-size: 2em; color: #8ecae6; }
#MenuLogo { margin-left: 20px; margin-right: 20px; }
#Menu { width: 100%; }
#Menu ul { margin: 0; padding: 0; list-style-type: none; cursor: default; z-index: 1000;}
#Menu .MainMenu > li { display: inline; float: left; }
#Menu .SubMenu > li { border-top: 1px solid #ffffff; }
#Menu a { display: block; padding: 10px 15px 10px 15px; background-color: #033d59 }
#Menu a:link, #Menu a:visited { color: #ffffff; text-decoration: none; }
#Menu .MainMenu a:hover { background-color: #8ecae6; color: #000000; }
#Menu div a:hover { background-color: #8ecae6; color: #000000; }
#Menu ul li ul { visibility: hidden; display: none; }
#Menu ul li:hover ul { visibility: visible; display: block; position: absolute; }

/* GENERIC CONTROLS */
input[type=text] { font-family: Verdana; font-size: 1em; width: 220px; }
input[type=password] { font-family: Verdana; font-size: 1em; width: 220px; }
input[type=date] { font-family: Verdana; font-size: 1em; width: 220px; }
textarea { font-family: Verdana; font-size: 1em; resize: none; width: 220px; }
select { font-family: Verdana; font-size: 1em; width: 220px; }

.Clear { clear: both;}
.Error { color: red; display: block; }

/* BUTTONS */
.Button { padding: 10px 15px 10px 15px; border: none; background-color: #033d59; color: #ffffff; font-family: Verdana; font-size: 1em; /*margin:0px 4px 0px 4px;*/ }
.Button:hover { background-color: #8ecae6; color: #000000; }
.SmallButton { padding: 4px 6px 4px 6px; border: none; background-color: #033d59; color: #ffffff; font-family: Verdana; font-size: 1em; /*margin:0px 2px 0px 2px;*/ }
.SmallButton:hover { background-color: #8ecae6; color: #000000; }

/* FORM LAYOUT */
.MainContainer { margin: 10px;}
.TopMargin { margin-top: 10px;}

/* LOGIN */
.LoginGrid { display: grid; grid-template-columns: min-content min-content 220px; gap: 4px; margin: auto; margin-top: 20px; width: 600px; align-items: center; justify-items: start; white-space:nowrap; }

/* SEARCH */
.SearchGrid { display: grid; grid-template-columns: repeat(2, min-content); gap: 4px; align-items: center; justify-items: start; white-space:nowrap; }

/* ADVANCED SEARCH */
.AdvancedSearchGrid { display: grid; grid-template-columns: repeat(6, auto); gap: 4px; align-items: center; justify-items: start; white-space:nowrap; }

/* SEARCH/ADVANCED SEARCH TABLE STYLES */
.SearchTable { width: 100%; border-collapse: collapse; }
.SearchTable thead tr th { text-align: left; background-color: #033d59; color: #ffffff; padding: 5px; }
.SearchTable td { padding: 4px; }
.SearchTable th { padding: 4px; }
.SearchTable tr:nth-child(even) { background: #E3EAEB; }
.SearchTable tr:nth-child(odd) { background: #c4d2d4; }
.SearchTable tr td:nth-child(n+3) { text-align: right; white-space: nowrap; }
.SearchTable tr th:nth-child(n+3) { text-align: right; white-space: nowrap; }
.SearchTable tr td:nth-child(2) { width: 100%; }
.SearchTable tr td:nth-child(10) { white-space: nowrap; }

/* MOVIEGROUPS */
.MovieGroupGrid { display: grid; grid-template-columns: repeat(6, min-content); gap: 4px; align-items: center; justify-items: start; white-space: nowrap; }
.MovieGroupTable { width: 100%; border-collapse: collapse; }
.MovieGroupTable thead tr th { text-align: left; background-color: #033d59; color: #ffffff; padding: 5px; }
.MovieGroupTable td { padding: 4px; }
.MovieGroupTable th { padding: 4px; }
.MovieGroupTable tr:nth-child(even) { background: #E3EAEB; }
.MovieGroupTable tr:nth-child(odd) { background: #c4d2d4; }
.MovieGroupTable tr td:nth-child(1) { width: 100%; text-align: left; }
.MovieGroupTable tr td:nth-child(2) { text-align: right; white-space: nowrap; }
.MovieGroupTable tr th:nth-child(2) { text-align: right; white-space: nowrap; }
input[type=text].MovieGroupInput { width: 320px; }

/* PEOPLE */
.PersonGrid { display: grid; grid-template-columns: min-content min-content 1fr; gap: 4px; white-space:nowrap;}
.PersonTable { width: 100%; border-collapse: collapse; }
.PersonTable thead tr th { text-align: left; background-color: #033d59; color: #ffffff; padding: 5px; }
.PersonTable td { padding: 4px; }
.PersonTable th { padding: 4px; }
.PersonTable tr:nth-child(even) { background: #E3EAEB; }
.PersonTable tr:nth-child(odd) { background: #c4d2d4; }
.PersonTable tr td:nth-child(1) { width: 100%; text-align:left; }
.PersonTable tr td:nth-child(2) { text-align:right; }
.PersonTable tr th:nth-child(2) { text-align: right; white-space: nowrap; }

/* GENRES */
.GenreGrid { display: grid; grid-template-columns: min-content min-content 200px; gap: 4px; align-items:start; justify-items: start; white-space:nowrap; }
.GenreTable { width: 100%; border-collapse: collapse; }
.GenreTable thead tr th { text-align: left; background-color: #033d59; color: #ffffff; padding: 5px; }
.GenreTable td { padding: 4px; }
.GenreTable th { padding: 4px; }
.GenreTable tr:nth-child(even) { background: #E3EAEB; }
.GenreTable tr:nth-child(odd) { background: #c4d2d4; }
.GenreTable tr td:nth-child(n+3) { text-align: right; }
.GenreTable tr th:nth-child(n+3) { text-align: right; }
.GenreTable tr td:nth-child(2) { width: 100%; }
.GenreTable tr td:nth-child(8) { white-space: nowrap; }

/* MOVIES */
.MovieDetailsGrid { display: grid; grid-template-columns: repeat(8, min-content) 200px; gap: 4px; align-items: start; justify-items: start; white-space: nowrap; }
.MovieImagesGrid { display: grid; grid-template-columns: repeat(4, min-content); gap: 4px; align-items: start; justify-items: start; white-space: nowrap; }
.MoviePeopleGrid { display: grid; grid-template-columns: 50% 50%; gap: 4px; align-items: start; justify-items: start; white-space: nowrap; }
.MoviePeopleSearchGrid { display: grid; grid-template-columns: repeat(4, min-content); gap: 4px; align-items: start; justify-items: start; white-space: nowrap; }

/* VIEW MOVIE */
.ViewMovieGrid { display: grid; grid-template-columns: 346px 1fr; gap: 4px; align-items: start; justify-items: start; white-space: nowrap; }
.Background { position: absolute; width: 100%; height: 100%; z-index: -100;}
.Glass { background-color: #000000; opacity: 0.6; }
.MovieNameDiv { color: #ffffff; font-size: 2em; padding: 5px;}
.MovieInfoDiv { color: #ffffff; font-size: 1em; padding: 5px; }
.MovieGenresDiv { color: #ffffff; padding: 5px; }
.MediaFilesDiv { color: #ffffff; height: 484px; overflow-x: auto; overflow-y: auto; }
#MediaFileList { list-style: none; padding: 0; margin: 0; }
#MediaFileList li a { text-decoration: none; color: #ffffff; width: 100%; display: block; padding: 5px; box-sizing: border-box; }
#MediaFileList li a:hover { text-decoration: none; color: #000000; background-color: #cccccc; }
.LeftDiv { float: left; }
.RightDiv { float: right; }

/* INDEX */
.TitleText { font-size: 1.5em; font-weight: bold; margin-top: 20px; }
.TitleSubText { font-size: 1.2em; font-weight: bold; margin-bottom: 20px; }
#Footer { text-align: center; width: 100%; position: fixed; bottom: 0; left: 0; background-color: #033d59; color: #ffffff; padding: 4px; }

/* GENERIC IMAGE BORDERS */
.ResolutionNotSet { border: 2px solid black; }
.SD { border: 2px solid silver; }
.HDR { border: 2px solid #69aac7; }
.HD { border: 2px solid blue; }
.UHD { border: 2px solid #F5750C; }

/* WIDE IMAGE BORDERS */
.ResolutionNotSetW { border: 5px solid black; }
.SDW { border: 5px solid silver; }
.HDRW { border: 5px solid #69aac7; }
.HDW { border: 5px solid blue; }
.UHDW { border: 5px solid #F5750C; }

/* GENERIC STYLES */
.FieldSetContent { padding: 10px; }

/* ADMIN PAGE TOOLBAR */
.AdminPageToolbar { margin-bottom: 5px; }
.RightBar { float: right; margin-top: 4px; }

/* MEDIA FILES TABLE */
.MediaFileTable { width: 100%; border-collapse: collapse;}
.MediaFileTable thead tr th { text-align: left; background-color: #033d59; color: #ffffff; padding: 5px; }
.MediaFileTable td { padding: 4px; }
.MediaFileTable th { padding: 4px; white-space: nowrap; }
.MediaFileTable tr:nth-child(even) { background: #E3EAEB; }
.MediaFileTable tr:nth-child(odd) { background: #c4d2d4; }
.MediaFileTable tr td:nth-child(n+3) { text-align: right; }
.MediaFileTable tr th:nth-child(n+3) { text-align: right; }
.MediaFileTable tr td:nth-child(2) { width: 100%; }
.MediaFileTable tr td:nth-child(1) { white-space: nowrap; }
.MediaFileTable tr td:nth-child(5) { white-space: nowrap; }

/* FILE BROWSER DIALOG */
#FileBrowserDialog { display: none; z-index: 100; position: fixed; left: 30%; top: 10%; box-shadow: 5px 5px 15px 5px #000000; background-color: #ffffff; border: 4px solid lightgrey;}
.FileBrowserHeader { background-color: #033d59; color: #ffffff; padding: 5px; cursor: move; }
.FileBrowserContent { width: 600px; height: 500px; overflow: scroll; padding: 2px;}
.FileBrowserToolbar { padding: 5px; text-align: right; }
.FileBrowserGrid { display: grid; grid-template-columns: min-content auto; gap: 5px; white-space: nowrap; padding: 5px;}

/* TREE VIEW */
#Tree { }
#Tree ul { list-style: none; width: fit-content; }
#Tree ul li ul { padding-left:20px; }
#Tree li { width: fit-content; }
.Selected { background-color: #033d59; color: #ffffff; }
.Selectable { cursor: pointer;}
.NotSelectable { cursor: default; }
#Tree img { margin: 4px 2px 4px 2px; vertical-align: middle; }
#Tree span { vertical-align: middle; padding: 2px; cursor: pointer;}
.ListIndent { padding-left: 0px; }

.Overlay { display: none; opacity: 1; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; width: 100vw; height: 100vw; z-index: 50; cursor: pointer; transition: opacity .3s; }

/* SYSTEM ADMIN PAGE */
.SystemInfoGrid { display: grid; grid-template-columns: repeat(2, min-content); gap: 4px; align-items: start; justify-items: start; white-space: nowrap; }
.SystemImagesGrid { display: grid; grid-template-columns: repeat(3, min-content); gap: 4px; align-items:start; justify-items: start; white-space: nowrap; }
.SystemFileGridToolbar { display: grid; grid-template-columns: repeat(3, min-content); gap: 4px; align-items: center; justify-items: start; white-space: nowrap; }
.SystemFileGrid { display: grid; grid-template-columns: repeat(2, min-content); gap: 4px; align-items: center; justify-items: start; white-space: nowrap; }
.SystemFileList { width: 750px; height: 250px; overflow-x: scroll; }
.SystemFileShareGrid { display: grid; grid-template-columns: repeat(2, min-content); gap: 4px; align-items: center; justify-items: start; white-space: nowrap; }