/** GLOBAL ****************************************************************************************/

* { box-shadow:none !important }
* { border-radius: 0 !important }

* { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif }
body { background: #FEFCF5; text-align: center }

h1, a { color: #000; text-decoration: none }
h2 { margin: 0 0 1em; color: #555; letter-spacing: 1px; text-align: left; font-size: 18px }
h3 { font-size: 18px; margin-bottom: .75em; color: #555 }
h2 a { color: #555 }
h2 a:hover { color: #2c97c5 }

hr { height: 10px; background: #000; border: none; clear: both }

a.mobile { display: none; color: #555; margin-bottom: .5em }
a.mobile:hover { color: #2c97c5 }

a.main { color: #555}
a.main:hover { color: #2c97c5 }

code { font-family: Courier New, monospace }
pre { font-family: Courier New, monospace }

.column > img,
.column > a > img { width: 100%; height: auto; border-radius: none }
.column { width: 32%; border-radius: 3px; text-align: left; opacity: .9 }
.column:hover { opacity: 1 }
.news .column img { aspect-ratio: 592 / 310 }

.left { float: left; margin-right: .1em }
.middle { float: left; margin-left: 2.3em }
.right { float: right; margin-left: .1em }

.center { margin: 0 auto; text-align: center }
.box { padding: 1em; color: #000; height: 10em; overflow: hidden; box-shadow: 0 8px 6px -6px #000 }
.load { background: #ebebef; color: #555; border: 1px #e0e0e0 solid; padding: .25em; color: #fff; height: auto; text-align: center; box-shadow: 0 4px 3px -3px #555; opacity: .75 }
.load a { color: #555 !important; display: block; letter-spacing: .5px }
.load a img { width: 24px; height: 24px; transition: .25s }
.load a:hover { color: #555 }
.load:hover { opacity: 1 }

.inner { width: 1850px; margin: 1em auto 0; padding: 1em }
.search_inner { margin: 0 auto 1.5em; padding: .5em 1em }
.outer { padding: 0 1em }
.more { width: 1850px; margin: 0 auto; text-align: right }
.more a { color: #000; font-weight: bold; display: block }
.more a:hover { color: #2c97c5 }

/** HEADER ****************************************************************************************/

#header { position: fixed; top: 0; left:0; right: 0; z-index: 100; background: #00175B; padding-bottom: 0em; padding-top: .5em; border-bottom: 1px #FEFCF5 solid; opacity: .9 }
#header + * { margin-top: 101px }

#header-right { float: right; padding-left: 1em; margin-top: -7px }

#hamburger { font-size: 30px; display: none; background: transparent; border: none; color: #bbc; padding: .25em; cursor: pointer }
#hamburger:hover { background: #333; color: #fff; border-radius: 3px }

#logo { float: left; text-align: left; opacity: .9; margin-left: 3em }
#logo:hover { opacity: 1 }
#logo img { float: left; margin-right: 10px }
#logo h1 { font-size: 18px; float: left; text-transform: none; margin: 1.25em .5em .25em 0; color: #d6d6c2; line-height: .75em }
#logo h1:hover { color: #fff }
#logo div { float: left }

#menu { float: right; margin-top: 5px; font-size: 25px; opacity: .9; margin-right: 3em }
#menu:hover { opacity: 1 }
#menu > div { text-transform: uppercase; color: #555; font-weight: bold }
#menu a { color: inherit }

#nav:hover { color: #000 }
#nav li { list-style: none; display: inline; margin-left: .5em }
#nav li:nth-child(1) { margin-left: 0 }
#nav a { color: inherit }
#nav a:hover { text-decoration: underline; color: #2c97c5 }

#panel { margin-top: -3px; padding-top: 0; padding-left: 10px; padding-right: 5px; text-align: left; font-size: 16px; color: #FEFCF5; margin: 0 }
#panel svg { margin-bottom: -1px }
#panel a { color: inherit }
#panel a:hover { text-decoration: underline; color: #2c97c5 }
#panel > div { float: right; margin-left: 0; text-transform: uppercase }
#panel .motd { color: white; float: left; margin: 0; text-transform: none; letter-spacing: 1px; margin-left: -2px; z-index: -1; height: 1.25em; overflow: hidden }
#panel .motd a { text-decoration: none; color: white; cursor: pointer }
#panel .motd a:hover { text-decoration: underline }
#panel #search { margin-top: -5px; text-transform: none }
#panel #lister { text-transform: none; font-weight: normal; opacity: 1 }

/** SEARCH ****************************************************************************************/

div.search input { font-size: 16px; border-radius: 2px }
div.find { float: right }

#search { border: 2px transparent solid; width: 16px; padding: 2px; background: url('../image/search.svg') 2px 3px no-repeat; transition: all .5s ease; color: transparent }
#search:hover { cursor: pointer }
#search:focus { cursor: text; background-color: white; border: 2px #e0e0e0 solid; width: 220px; padding: 2px 2px 2px 22px; color: black }

#find { border: 1px transparent solid; width: 220px; padding: 2px; color: black }
#find:hover { background: #FEFCF5 }

#lister { position: relative; border: 1px #ccc solid; display: none; max-height: 300px; overflow-x: hidden; overflow-y: auto; z-index: 300; width: 245px; background: #fafafa; font-size: 14px }
#lister li { list-style: none; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; padding: 2px 4px }
#lister li:nth-child(2n) { background: #e0e0e0 }
#lister li:hover { background: #2c97c5 }

#lister a { text-decoration: none }
#lister a:hover { color: white }

/** STUDY *****************************************************************************************/
.study h3 { text-transform: uppercase; text-align: center; margin-bottom: 1em; font-size: 26px; color: #333; font-weight: normal;/**text-shadow: 2px 4px 3px rgba(0, 0, 0, .3)**/ }
.study ul { text-align: center; display: none; margin-top: -.5em }
.study li { list-style: none; font-size: 20px; padding: 5px }
.study li a { color: #00175B }
.study li a:hover { color: #2c97c5}

/**.study .column { box-shadow: 0 0 7px 3px #aaa; opacity: 1 }**/

.study { height: 20em; overflow: hidden }
.study .column img { opacity: .9 }
.study .column:hover img { opacity: 1 }

/**.study .column .box { height: 10em; border-radius: 0 0 3px 3px; font-size: 20px}**/
.study .left .box {  }
.study .middle .box {  }
.study .right .box {  }

.swap-tag { height: 15em }
.swap-tag:hover h3 { margin-top: 0 }
.swap-tag:hover .box p { display: none }
.swap-tag:hover img { display: none }
.swap-tag .box ul { display: none }
.swap-tag:hover .box ul { display: block }

/** EVENTS ****************************************************************************************/

.calendar { padding-top: 0; padding-bottom: .5em }
.next { float: right; color: #000; font-weight: bold }

.event { border: 1px #dbdbda solid; margin-bottom: 1em; background: white }

.event div:hover { color: #000 }
.event div:hover h3 { color: #2c97c5 }
.event div:hover h4 { color: #2c97c5 }

.event-box { float: left; background: white; width: 33%; height: 4.7em; overflow: hidden; }
.event-box .date { float: left; width: 5em; background: #00175B; color: #FEFCF5; height: 100%; vertical-align: middle }
.event-right { float: right; width: 33% }

.event-box .date h3 { color: white; font-size: 28px; padding-top: .35em; margin-bottom: 0em; font-weight: 800; line-height: 100% }
.event-box .date h4 { color: white; font-size: 16px; padding-top: .25em; font-weight: 800 }
.event-box p { text-align: center; padding: .5em; color: #333; font-size: 18px }

.calendar .more a { display: inline }

.event-box:hover p { margin-top: -1px; font-size: 19px }

/** NEWS ******************************************************************************************/

.news h3 { color: #333 }
.news p { margin: 1em auto 0; line-height: 150%; color: #333 }
.news a { color: #333 }
.news a:hover { color: #2c97c5 }
.news .date { float: right; color: #555; font-weight: normal }
.news-more { width: 1850px; margin: 0 auto; text-align: right; }
.news-more a { display: inline }
.news img { margin-bottom: -4px } /** REMOVE **/
.news small { font-weight: bold; color: #333 }

.news img { display: block; max-width: 100%; max-height: 333px; width: auto; } 

.news .white-text { color: white }
.news .white-text a { color: #ddd }
.news .white-text .date { color: #ccc }
.news .white-text small { color: #ddd }

.news .column .box { height: 5em; border-radius: 0 0 3px 3px }
.news .left .box { background: #d7a17b; border: 1px #c6906a solid }
.news .middle .box { background: #b1d8bd; border: 1px #a0c7ac solid }
.news .right .box { background: #b1d8bd; border: 1px #a0c7ac solid }

.news .box { margin-bottom: 1em; position: relative }
.news .box:last-of-type { margin-bottom: 0 }

.news  .left .newsbox,
.news  .middle .newsbox,
.news  .right .newsbox { background: white; height: 3em; border: none; overflow: hidden; padding-left: 0 }

.news:nth-of-type(2) .box { margin-bottom: 2em }

.load-news { margin-top: -1em; padding-top: 0 }
.load-news > div { height: auto }
#loadimg { display: unset }

/** FOOTER ****************************************************************************************/

#footer .column { width: 25%; float: left; overflow: hidden; word-wrap: break-word }
#footer .column .box { padding: 1em; background: transparent; opacity: 1; height: 12em; color: #FEFCF5 }

#footer { background: #00175B; margin-top: 1em; color: #FEFCF5; font-size: 15px; border-top: 1px #FEFCF5 solid; opacity: 1; z-index: 100 }
#footer:hover a { border-bottom: 1px #aaa solid }
#footer h3 { color: inherit }
#footer ul { list-style: square outside; margin: 0 2em 0 1em; line-height: 125% }
#footer li { padding-left: .1em }
#footer a { color: inherit; border-bottom: 1px transparent solid }
#footer a:hover { color: #2c97c5; border-bottom-color: #2c97c5 }
#footer p { margin: 0 2em 1em 0; line-height: 125% }
#footer p.icons { margin-bottom: .75em }
#footer p.icons img { float: left; margin-right: 1em }
#footer p.icons a { margin-right: 1em }
#footer div.column { width: 25%; float: left }
#footer div.copyright { text-align: center; padding-bottom: 1em }

#footer .inner:last-of-type { margin: 0 }

/** ARTICLE ***************************************************************************************/

.article { float: right; width: 66%; text-align: left; font-size: 16px }
.narrow-article { text-align: left; font-size: 15px }
.narrow-article img, .article img { max-width: 100%; height: auto; margin-bottom: .25em }
.narrow-article img { width: auto; margin: 0 auto }
.narrow-article img.cover, .article img.cover,
.narrow-article div.shadow img, .article div.shadow img { border-radius: 3px; box-shadow: 0 8px 6px -6px #000; margin-bottom: 1em }

.narrow-article p, .article p { margin: 1em 0; color: #555; line-height: 130%; clear: both }
.narrow-article p a, .article p a { text-decoration: underline }
.narrow-article p a:hover, .article p a:hover { color: #2c97c5}

.narrow-article img.left, .article img.left { float: left; padding-right: .5em }
.narrow-article img.left, .article img.right { float: right; padding-left: .5em }

.text { text-align: left }
.text h2 { font-size: 38px; margin-top: 1em }

.article img.icon,
.narrow-article img.icon { width: 16px; height: 16px }

.sidebar { float: left; width: calc(34% - 2em); text-align: left; border-radius: 3px; color: #777; font-size: 15px; margin-right: 2em; font-weight: normal }
.sidebar ul { padding: 1em; margin-top: 1em; list-style: none; margin-left: 2em }
.sidebar li { list-style: outside disc; line-height: 125%; padding: 0 .5em 0 0 }
.sidebar li.home { list-style: outside circle }
.sidebar li small { vertical-align: -1px }
.sidebar ul a { color: inherit; margin: .25em 0; vertical-align: -1px }
.sidebar li a.active { text-decoration: underline }
.sidebar ul a:hover { color: #2c97c5; text-decoration: underline }
.sidebar li.back { list-style: none; margin-left: -23px }
.sidebar li.back img { vertical-align: -3px; margin-right: 5px }

.article h1, .narrow-article h1, h1.titles { font-size: 38px; color: #555 }
.article h2, .narrow-article h2, h2.titles { font-size: 26px; color: #555 }
.article h3, .narrow-article h3, h3.titles { font-size: 18px; color: #555 }
.article h4, .narrow-article h4, h4.titles { font-size: 13px; color: #555 }
.article h5, .narrow-article h5, h5.titles { font-size: 11px; color: #555 }

.article ol, .narrow-article ol { color: #555 }
.article ul, .narrow-article ul { color: #555; list-style: inside }
.article ol a, .article ul a { color: #2c97c5 }
.article ol a, .article ul a { text-decoration: underline }

.article a.mail { text-decoration: none }
.article a.mail:hover { text-decoration: underline }
.article a.mail img { vertical-align: -5px }

/** MISC ******************************************************************************************/

.e-mail:before { content: attr(data-website) "\0040" attr(data-user); unicode-bidi: bidi-override; direction: rtl }

.bigpage h1 { font-size: 10em; color: #d7a17b }

.admin-menu { width: 400px; max-width: 100%; margin: 0 auto; padding: 1em; font-size: 24px; color: #555; text-align: left }
.admin-menu a { color: #555 }
.admin-menu a:hover { color: #2c97c5 }

.login-name { background: #d7a17b; color: #fff; padding: 1px 3px }

a.button { border: 1px #2c97c5 solid; text-transform: lowercase; padding: 2px 7px; background: #a8d8e9; color: #468; border-radius: 3px; font-size: 14px; font-weight: bold }
a.button:hover { background: #2c97c5; color: #fff }

a.edit-button { float: right; color: #2c97c5; font-size: 12px; margin: .5em }
a.edit-button:hover { color: #555; text-decoration: underline }
a.edit-button img { margin: 0; padding: 0; vertical-align: -3px; box-shadow: none }

div.download { padding-top: 1em; margin: 0 auto; text-align: center }
div.download a { text-decoration: underline }

/** ALTERNATIVE TOP MENU **************************************************************************/

#popmenu { background: #333; color: #fff; text-align: left; position: absolute; top: 0; left: 0; z-index: 200; width: 100%; min-height: 100%; display: none }
#popmenu > li:nth-of-type(1) { padding-top: 2em }
#popmenu > li { padding: 0 0 1em 1em }
#popmenu ul { list-style: none }
#popmenu > ul > li > a { text-transform: uppercase }
#popmenu li { margin: .25em .5em; list-style: none }
#popmenu a { display: block; color: inherit; padding: 0 .5em; max-width: 85% }
#popmenu a:hover { background: #aaa }

#popmenu .close { position: fixed; text-align: center; right: 0; top: .5em; font-size: 32px; width: 2em; height: 2em; cursor: pointer }

/** LOGIN *****************************************************************************************/

.login { width: 300px; max-width: 100%; margin: 0 auto; padding: 1em }
.login div { clear: both }
.login input[type='text'] { width: 70%; padding: .25em; margin: .25em }
.login input[type='password'] { width: 100%; padding: .25em; margin: .25em }
.login input[type='submit'] { margin: .25em }

.error { color: #a44; margin: 0 auto; text-align: center; margin-bottom: 1em; font-weight: bold }
.warn { color: #4a4; margin: 0 auto; text-align: center; margin-bottom: 1em; font-weight: bold }

/** COOKIE WARNINGS *******************************************************************************/

.cookie-warning { position: fixed; height: auto; top: 0; left: 0; right: 0; z-index: 1000; background: yellow;
	background: #d80; color: #fff; border-bottom: 2px #fa0 solid; font-weight: bold; padding: 1em; font-size: 16px; opacity: .85 }
.cookie-warning:hover { opacity: 1 }
.cookie-warning button { background: #a8d8e9; color: #000; border: 1px #2c97c5 solid; cursor: pointer; border-radius: 3px; padding: .25em .35em; font-size: 15px }
.cookie-warning button:hover { color: #fff; background: #2c97c5 }

/** CALENDAR **************************************************************************************/

table.month { float: left; text-align: center; color: #555; width: 33%; margin: 7px 2px 0 1px; empty-cells: show; border-collapse: collapse; background: #fff; font-size: 15px }
table.month tr:first-of-type th { background: #cacaca; font-weight: bold }
table.month td, th { padding: .3em .5em; height: 1.2em; cursor: default }
table.month td[colspan='7'] { background: transparent }
table.month td:not(:empty):hover { background: #dadada; color: #2c97c5 }
table.month td:nth-of-type(6):not(.holidays),
table.month td:nth-of-type(7):not(.holidays) { color: #cc8888; font-weight: bold } 
table.month th { font-weight: normal; background: #ddd; color: #777 }
table.month td.today { font-weight: bold; background-color: #f9c3ae; border-radius: 3px }

table.month td.green { background: #5f5; border-radius: 3px }
table.month td.orange { background: #fa5; border-radius: 3px }
table.month td.red { background: #f55; border-radius: 3px }

table.month tr { border-bottom: 1px #eaeaea dotted }
table.month tr:last-of-type { border-bottom: 1px transparent solid }
table.month tr:first-of-type { border-bottom: none }

/** SCHEDULER *************************************************************************************/

table.week { margin: .5em auto 0; box-shadow: 0 4px 3px -2px #777; empty-cells: show; font-size: 15px }
table.week tr:first-of-type th { background: #caf0ca; font-weight: bold }
table.week tr:nth-of-type(2n) { background: #eafaea }
table.week tr:nth-of-type(2n + 1) { border-bottom: 1px #b1d78d solid }
table.week tr:not(:first-of-type):hover { background: #dbf1db }
table.week td, th { padding: .25em .5em }
table.week td:first-of-type { text-align: center; color: #777; vertical-align: top }
table.week td:not(:first-of-type) { border-left: 1px #caf0ca solid; width: 18% }
table.week th { font-weight: normal; background: #dfd; color: #777 }
table.week td.today { font-weight: bold; background-color: #f9c3ae; border-radius: 3px }
table.week td { overflow: hidden; font-size: 13px }
table.week tr th.today { font-weight: bold; background-color: #f9c3ae }
table.week td[data-time] { cursor: pointer }
table.week small { font-weight: normal }

table .more { text-align: center; vertical-align: middle; border-radius: 3px; color: #000; border: 1px #777 solid }
table .more > div { position: relative; height: 100%; font-size: 14px; padding: .25em 0 }
table .more > div > span { display: block; text-overflow: ellipsis; line-height: 1em; font-size: 15px }
table .more > div > span > small { font-size: 12px }

div.schedule-title { text-align: center; font-size: 18px; margin: 1em 0; text-transform: uppercase; color: #000 }
div.schedule-above { font-weight: bold; margin-bottom: .5em; color: #000 }
div.schedule-under { text-align: right; margin-top: .5em; color: #000 }
div.schedule-bottom { font-size: small; color: #777 }

/** LEGEND ****************************************************************************************/

div.legend { margin: 0 auto; text-align: center; letter-spacing: .75px; clear: both; font-size: 15px }
div.legend > div { float: left; width: 18%; margin: 1em 5px 0 0; border-radius: 2px; padding: .25em; border: 1px #ccc solid; overflow: hidden; white-space: nowrap }
div.legend > div:first-of-type { border-color: transparent; height: 4em }

/** PROGRAM ***************************************************************************************/

div.semester { margin-top: 1em }
div.semester-hover { opacity: .75 }
div.semester-hover:hover { opacity: 1; background: #f0f0f0 }
div.semester-hover div { color: #777 }
div.semester-hover > div { float: right; font-size: 1.2em; width: 40% }
div.semester-hover > div > div { width: 24%; float: left; text-align: center; min-width: 80px; margin-top: 7px }

div.semester-hover a { color: black; text-decoration: none; font-weight: bold } 
div.semester-hover a:hover { color: #2c97c5 }

div.buttons { margin-bottom: .5em }
div.buttons button { background: white; color: black; border-radius: 3px; font-size: 15px; letter-spacing: .5px; border: 1px #777 solid; padding: .25em .5em }
div.buttons button:hover { cursor: pointer; background: #2c97c5; color: white } 

div.semester { margin-top: 1em }
div.semester-hover { opacity: .75 }
div.semester-hover:hover { opacity: 1; background: #f0f0f0 }
div.semester-hover div { color: #777 }
div.semester-hover > div { float: right; font-size: 1.2em; width: 40% }
div.semester-hover > div > div { width: 24%; float: left; text-align: center; min-width: 80px; margin-top: 7px }

button.tab { background: white; color: black; border-radius: 3px; font-size: 15px; letter-spacing: .5px; border: 1px #777 solid; padding: .25em .5em }
button.tab:hover { cursor: pointer; background: #2c97c5; color: white } 

div.tab { color: #555 }

/** CUSTOM COLORS *********************************************************************************/

.lectures { background: #ccffcc; color: #000 }
.lectures-winter { background: #ccffcc; color: #000 }
.lectures-summer { background: #aaddaa; color: #000 }

.exams-autumn { background: #bbddee; color: #000 }
.exams-winter { background: #cfefff; color: #000 }
.exams-summer { background: #aaccdd; color: #000 }

.holidays { color: #dd3333; font-weight: bold; background: white }
.sitting { font-weight: bold; color: #55c }
/* stylelint-disable declaration-no-important */
.fair { background: #c08080; font-weight: bold; color: white !important }
/* stylelint-enable */

/** RESPONSIVE ************************************************************************************/

@media only screen and (max-width: 1890px)
{
	.inner { width: 1600px }
	.more { width: 1600px }
	.news-more { width: 1600px }
	.study { height: 18em }
	.middle { margin-left: 1.9em }
}

@media only screen and (max-width: 1750px)
{
	.inner { width: 1400px }
	.more { width: 1400px }
	.news-more { width: 1400px }
	.news img { max-height: 268px; }
	.middle { margin-left: 1.7em }
}

@media only screen and (max-width: 1700px)
{
	#menu ul { display: none }
	#hamburger { display: block }
	#motd { display: none }
	#panel { padding-left: 0 }
}

@media only screen and (max-width: 1550px)
{
	.news img { max-height: 234px } 
}

@media only screen and (max-width: 1440px)
{
	#logo { margin-left: 0 }
	#menu  { margin-right: 0 }
	.inner, .more, .news-more { width: 1200px }
	.middle { margin-left: 1.5em }
	#logo div h1 { font-size: 15px; margin-top: 1.5em }
	.news img { max-height: 201px } 
}

@media only screen and (max-width: 1260px)
{
	.inner, .more, .news-more { width: 1000px }
	.middle { margin-left: 1.2em }
	.study .column .box { height: 12em }
	.news .column .box { height: 4em }
	.news img { max-height: 167px } 
}

@media only screen and (max-width: 1080px)
{
	.inner, .more, .news-more { width: 800px }
	.middle { margin-left: .9em }
	.news img { max-height: 108.55px } 
	.study .column .box { height: 13em }
	.news .column .box { height: 5em }
	.bigpage h1 { font-size: 4.5em }
	.news img { max-height: 134px } 
}

@media only screen and (max-width: 840px)
{
	.inner, .more, .news-more { width: calc(100% - 32px) }
	.column { width: 100%; padding: 0 }
	.left, .middle, .right { float: none; margin: 0 0 2em }
	#footer div.column { width: 50%; float: left }
	.swap-tag { height: auto }
	.news .column .box { height: auto }
	.news .column { margin-bottom: 1em }
	.study, .study .column .box { height: auto }
	.event-box { float: none; width: 100%; border-top: 1px #dbdbda solid }
	.event-box:first-of-type { border-top: 0 }
	.news img { max-height: none }
	.newsbox { height: auto }
	.sidebar,
	.article { display: block; float: none; width: 100% }
	#header { position: relative }
	#header + * { margin-top: 0 }
	#header .suzg350 { padding-left: 0 }
	div.legend > div:first-of-type { display: block; width: 100%; text-align: left; height: auto }
	a.mobile { display: block }
	
	.swap-tag h3 { margin-top: 0 }
	.swap-tag .box p { display: block }
	.swap-tag:hover .box p { display: block }
	.swap-tag img { display: block }
	.swap-tag:hover img { display: block }
	.swap-tag .box ul { display: block }
	.swap-tag:hover .box ul { display: block }
}

@media only screen and (max-width: 640px)
{
	.study { display: block !important; height: auto !important }
	.left,.middle,.right { clear: both; display: block }
	#footer div.column { width: calc(100% - 32px); float: none }
	#footer div.column ul { margin-bottom: 1em }
	.news .date { float: none; width: 100%; display: block; font-size: 13px }
	.event .column .box { min-height: 6.5em; height: auto }
	div.legend > div { display: block; float: none; width: 75% }
	#logo div h1 { font-size: 10px; margin-top: 3em }
	.admin-sidebar ul[role='navigation'] { padding: 0  }
	.admin-sidebar span,
	.admin-sidebar .sidebar-icon { display: none }
	.admin-article .welcome div { font-size: 13px }
	#header-right div { display: none }
}

@media only screen and (max-width: 440px)
{
	#hamburger { padding-top: .1em }
	#logo div h1 { margin-top: 1.5em }
	#panel { display: none }
	.study h3 { font-size: 25px }
	#footer div.center { text-align: left }
	#footer div.center span::before { content: "\A"; white-space: pre }
	#logo div:nth-of-type(1) img,
	#logo div:nth-of-type(2) img { width: 52px; height: 48px }
	#logo div:nth-of-type(3) img { width: 46px; height: 42px }
}

@media only screen and (max-width: 350px)
{
	#logo div h1 { font-size: 7px; margin-top: 1em }
	#logo div:nth-of-type(1) img,
	#logo div:nth-of-type(2) img { width: 35px; height: 32px }
	#logo div:nth-of-type(3) img { width: 31px; height: 28px }
}

dialog::backdrop { opacity: .5; backdrop-filter: blur(10px) }
dialog { border: 1px #fff solid; border-radius: 3px !important; box-shadow: 0 4px 5px rgb(0 0 0 /30%)!important; font-size: 1.0em; padding-top: .25em; max-width: 1000px; 
margin: 0 auto !important;
margin-top: 200px !important;
padding: 1em !important;
text-transform: none; !important
font-weight: normal !important;
background-color: #00175B;
color: #dfe4e8;
}
dialog form { display: grid; grid-template-rows: auto 1fr auto; grid-gap: .5em }
dialog header { text-align: right }
dialog header button { background: white; border: none; font-size: 1.5em }
dialog h2 { font-size: 1.0em; margin: 0; opacity: .9 }
dialog div { text-align: left; margin: 0 auto }
dialog div p { margin: .25em 0 1.25em }
dialog footer { text-align: center }
dialog footer button { min-width: 80px; font-size: 1em }
dialog button:hover { color: blue }
dialog button { background: transparent !important; color: #dfe4e8 }