1
2
3
4@media screen and (max-width: 1000px) {
5	.container, .header { width: 90% !important; }
6	.left, .right { width: 20%; }
7	.middle { width: 55% }
8	.headerpadding { margin-left: 1em; }
9}
10
11@media screen and (max-width: 800px) {
12	.container, .header, .left, .middle, .right, .headerpadding { width: 97% !important; }
13	.container { overflow: unset; }
14	.middle { margin: 1em 0px !important; }
15	/*.sidebox { margin-bottom: 0px; }*/
16	.footer { width: 90%; }
17	.headerpadding { margin-left: 1em; }
18	.container { top: 0px !important; }
19	.headercontainer { position: unset !important; }
20	.middle li, .middle dd { margin: 1.35em 1.15em; }
21
22	/* rearrange elements * /
23	/*
24	https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
25	https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
26	https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit
27	*/
28	.container, .allboxessameheight {
29		display: grid !important;
30		grid-template-columns: repeat(1);
31	}
32	.right { order: 3; float: none !important; }
33	.left { order: 2; float: none !important; }
34	/* /////_______//// */
35}
36
37/* media manager and config manager for mobile */
38@media screen and (max-width: 480px){
39  fieldset,
40  #mediamanager__page,
41  #mediamanager__page .filelist{
42    max-width: 100%; min-width: unset;
43  }
44  #mediamanager__page .file,
45  #mediamanager__page .namespaces,
46  #mediamanager__page .panel {
47    width: 100%; clear: both; float: none;
48  }
49  /*.page li, .page dd { margin: 1.35em 0px !important; }*/
50  #config__manager fieldset { background-color: transparent; }
51  #config__manager tr { }
52  #config__manager td { display: block;  padding: 1.15em 0px; max-width: 50%;  }
53
54  #config__manager fieldset { width: 100%; box-sizing: border-box; }
55
56  #config__manager fieldset td.value { width: unset; }
57
58  	/* make <select> not exceed it's parent div's width */
59  	/* https://stackoverflow.com/q/44810056/337306 */
60  	div.input { display: flex; } select { width: 100%; flex-shrink: 1; }
61
62  #config__manager td .input,
63  #config__manager fieldset td.value,
64  #config__manager td input.edit {
65    max-width: 100%;
66    width: unset;
67  }
68}