h1
{
    font: bold 16pt "Century Gothic";
    color: #1050a0;
    margin-top: 1em;
    margin-bottom: 0.5em;
    text-indent: 0;
}

h2
{
    font:  18px "Trebuchet MS";
    /*color: #8080C0;*/
	margin-top: 1em;
	margin-bottom: 0.25em;
	text-indent: 0;	
}

h3
{
    font: italic 16px "Trebuchet MS";
    /*color: #8080C0;*/
	margin-top: 0.5em;
	margin-bottom: 0.125em;
	text-indent: 0;
}

p
{
    margin-top: 0.2em;
    margin-bottom: 0;
    text-indent: 2em;
}

/*Вывод сведений из БД*/
.Info_Block
{
	font: 14px "Trebuchet MS";
	width: 100%;
	/*border: solid 1px #AAA;*/
	display: inline-flex;
	min-height: 400px;		
}

.info-block {
    font: 14pt/16pt 'Segoe UI',sans-serif;
    text-align: justify;
}

.info-block p {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.Menu_List
{
	width: 20%;
	border: solid 1px #AAA;
	height: max-content;
}

.Menu_List a
{
	text-decoration: none;
	color: #000;
}

.Menu_List div
{
	font: 12pt "Trebuchet MS";
    background-color: #F0F0FF80;
	padding: 0.5em;	
}

.Menu_List div:hover
{
    background-color: #D0D0FFD0;
}

.Data
{
	width: 80%;
	min-height: 400px;
	padding-left: 1em;
	margin: 0 auto;
}

.invisible
{
	display: none;
}

.free-margin
{
    margin: 0;
}

.free-indent
{
    text-indent: 0;
}

.bold
{
    font-weight: 600;
}

.page-caption {
    font: bold 20pt "Century Gothic";
    color: #1050a0;
    margin-top: 1em;
    margin-bottom: 0.5em;
    text-indent: 0;
    text-align: center;
}

ul {
    margin: 0;
}

.img-block {
    text-align: center;
    margin: 16pt auto;
}

.img-block img {
    width: 60%;
}
 .table-block {
    overflow: auto;
    max-width: fit-content;
    /*margin: 0 auto;*/
}

table
{
	margin: 16px 0;
}

td
{
	vertical-align: top;
}

.info_table
{
	/*border-spacing: 0;*/
	border-collapse: collapse;
}

.info_table th, .info_table td
{	
	font: normal 10pt "Trebuchet MS";
	border: solid 1px #555;
	padding: 2pt 4pt;
}
 .Message
{
	margin: 64px auto;
	padding: 32px 24px;
	width: 320px;
	border: 2px solid #888D;
	background-color: #ed5D;
	font: normal 14pt "Trebuchet MS";
	text-align: center;
} .PAForm
{
	font: 12pt/14pt 'Roboto';
	text-align: center;
	padding: 16px;
	margin: 32px auto;
}

.InputField
{
    margin: 8px auto;	
    max-width: 480px;
}

.InputCaption
{
    top: 4px;
    position: relative;
}

input, optgroup, select, textarea 
{
	font-size: 100%;
	line-height: 1.15;
	padding: 8px;
	width: 100%;
	margin: 8px 0;
}

button {
    padding: 0.5em 1em;
    min-width: 6em;
}

.InputButton
{
    width: 240px;
    margin: 32px auto 16px auto;
}

.PAForm h1
{
	color: #222;
	font-size: 14pt;
	margin: 16px auto;
}

input[type=checkbox] 
{
	position: relative;
	cursor: pointer;
	width: initial;
	margin-right: 16px;
}

input[type=checkbox]:before 
{
         content: "";
         display: block;
         position: absolute;
         width: 20px;
         height: 20px;
         top: 0;
         left: 0;
         border: 2px solid #555555;
         border-radius: 3px;
         background-color: white;
}

input[type=checkbox]:checked:after 
{
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    border: solid black;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    transform: rotate(40deg);
    position: absolute;
    top: 3px;
    left: 8px;
}

label
{
    margin: auto 1em auto 0;
}

.WaitingBlock
{
    display: block;
}

 .change:hover
{
    border: 1px solid #a88;
} .EIOS_menu-list
{
    border: solid 1px #AAA;    
    display: flex;
    background-color: #dde8f8;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    font: 14pt / 32pt "Segoe UI";
    width: fit-content;
    box-sizing: border-box;
}

.EIOS_menu-list a
{
    text-decoration: none;
}

.fixed-top-pos
{
    position: fixed;    
    top: 0;
    position-area: top;
}

.EIOS_selected-menu-item
{
    background-color: #94b4e4;
    color: #fff;
}

.EIOS_menu-item
{
    padding: 0 1em;
}

.EIOS_info-block
{
    font: 14px "Trebuchet MS";
    width: 100%;    
    display: flex;
    min-height: 400px;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: start;
    align-content: center;
    align-items: center;
}

.EIOS_Data {
    min-height: 400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.schedule-block {
    font-family: Segoe UI, system-ui;
    font-size: 12pt;
    line-height: 12pt;
    margin-top: 16pt;
}

.schedule-item-day {
    padding: 1em 0.5em;
    max-width: 36em;
}

.shedule-current-day {
    border-left: 2px solid #A00;
    background-color: #fdd;
}

.sid-date {
    font-family: Roboto, system-ui;
    font-size: 14pt;
}

.sid-line {
    border-bottom: 1px solid #444;
    margin: 0.25em 0;
}

.sid-class {
    display: grid;
    //grid-template-areas: "time dname anum" ". tname .";
    grid-template-areas: "time items";
    //grid-template-columns: 1fr 2.5fr 0.5fr;
    grid-template-columns: 1fr 4fr;
    margin-bottom: 4pt;
}

.sidc-items {
    display: flex;
    flex-flow: column;
}

.sidci-item {
    display: grid;
    grid-template-areas: "dname anum" "tname .";
    grid-template-columns: 2.5fr 0.5fr;
}

.sidc-ctime {
    grid-area: time;
    margin: 0 1em 0 0.5em;
    color: #4b0082;
    min-width: 6em;
}

.sidc-dname {
    grid-area: dname;
    font-weight: 500;
}

.sidc-tname {
    grid-area: tname;
    font-size: 10pt;
}

.sidc-anum {
    grid-area: anum;
    text-align: right;
    margin: 0 0.5em 0 1em;
}

span.sidc-gnum {
    font-size: 8pt;
    padding-bottom: 2pt;
    vertical-align: top;
    background-color: cornflowerblue;
    width: 1.5em;
    height: 10pt;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-weight: 500;
}

.align-center {
    width: max-content;
    margin: 0 auto;
}

.user-info-block {
    display: grid;
    grid-template-areas: "uibCap uibCap"
        "uibFN uibBtn"
        "uibPN uibBtn";
    margin: 16px auto;
    border: 1px solid #5b429d;
    font-size: 12pt;
    width: max-content;
}
.uib-caption {
    grid-area: uibCap;
    padding: 0.5em;
    font-weight: 600;
    background-color: #5b429d;
    color: #fff;
}
.uib-fullname-block {
    grid-area: uibFN;
    padding: 0.5em 0.5em 0.2em 0.5em;
    font-size: 13pt;
}
.uib-privname-block {
    grid-area: uibPN;
    padding: 0.2em 0.5em 0.5em 0.5em;
}
.uib-logout-btn {
    grid-area: uibBtn;
    padding: 0.5em;
}
.logout-btn {
    width: 100%;
    min-width: 3em;
    height: 100%;
    background-color: lightcoral;
    border: 1px solid #914d4d;
    border-radius: 8px;
    /* background-image: url(./img/del.png); */
}

.form-bg {
    display: none; /*flex;*/
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    position-area: top;
    background-color: #444a;
    justify-content: center;
    align-items: center;
    overflow: auto;
    z-index: 999;
}

.form-cnt {
    position: absolute;
    top: 0;
    padding: 8pt;
}

.LoginForm
{
    display: grid;
    grid-template-areas: 
    "fcap fcap fcap fcap fcap"
    "inc1 inc1 inf1 inf1 inf1"
    "inc2 inc2 inf2 inf2 inf2"
    "inb1 inb1 inb1 inb1 inb1";
}

.btn-bar {
    text-align: center;
    margin: 16px auto;
    display: flex;
    gap: 4pt;
}

.btn-save {
    color: darkgreen;
}

.btn-cancel {
    color: black;
}

.btn-new {
    color: darkblue;
}

.btn-del {
    color: darkred;
}
 #NewsPage {
    font: 12pt / 14pt 'Segoe UI', sans-serif;
    text-align: left;
    max-width: 500pt;
    margin: 0 auto;
}

.nf-list {
    display: flex;
    flex-direction: row;
    grid-gap: 4pt;
}

.nf-list a, .nl-list a {
    background-color: transparent;
    text-decoration: none;
    color: currentColor;
    flex: 1;
}

.nf-item {
    flex: 1;
    background: center;
    font-family: Segoe UI, system-ui;
    height: 150pt;
}

.nf-date {
    background-color: #555b;
    font-size: 12pt;
    padding: 4pt 4pt;
    font-weight: 400;
    color: #fff;
}

.nf-title {
    background-color: #fffa;
    font-size: 12pt;
    padding: 2pt 4pt;
    font-weight: 600;
    height: 2.4em;
    overflow: hidden;
}

.nf-anno-bg {
    background: -webkit-linear-gradient(top, #555b 100%, #5550);
    padding: 2pt 4pt;
    font-weight: 300;
    font-size: 10pt;
    height: 55pt;
    overflow: hidden;
    position: relative; 
}

.nf-anno-text {    
    font-weight: 500;
    font-size: 10pt;
    height: 54pt;
    overflow: hidden;
    position: relative;
    color: #fff;
    background: -webkit-linear-gradient(top, #fff 80%, #fff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*.nf-anno:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10pt;
    background: linear-gradient(180deg, transparent, #555 80%);
}*/

.nl-list {
    max-width: 500pt;
    margin: 0 auto;
    font-family: Segoe UI, system-ui;
}

.nl-item {
    display: grid;
    grid-template-areas: 
        "gaPhoto gaDate"
        "gaPhoto gaTitle" 
        "gaPhoto gaAnno"
        "gaPhoto gaAnno"
        "gaPhoto gaAnno"
        "gaPhoto gaAnno";
    align-items: start;
    margin-bottom: 12pt;
    grid-template-columns: 1fr 3fr;
}

.nl-photo {
    grid-area: gaPhoto;
    background-position: center;
    width: 120pt;    
    height: 80pt;
    margin: 0 8pt 4pt 0;
}

.nl-date {
    grid-area: gaDate;
    font-size: 12pt;
    font-weight: 400;
    margin-bottom: 4pt;
}

.nl-title {
    grid-area: gaTitle;
    font-size: 14pt;
    font-weight: 600;
    margin-bottom: 4pt;
}

.nl-anno {
    grid-area: gaAnno;
    font-size: 12pt;    
    font-weight: 400;
}

.phgal-block {
    display: flex;
/*    display: none;*/
    width: 100%;
    margin: 12pt 0;
}

.phgal-list {
    width: 20%;
    min-height: 10px;
    background-color: black;
    max-height: 400px;
    overflow: scroll;
    scrollbar-width: none;
    display: flex;
    padding: 4pt;
    align-items: center;
    gap: 4pt;
    flex-flow: wrap;
    align-content: flex-start;
}

.phgal-list table {
    margin: 0;
}

.phgal-list-item {
    height: 86px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.phgal-photobox {
    width: 80%;
    min-height: 10px;
    background-color: black;
    height: 411px;
}

.phgal-photo {
    background-size: contain;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
} .view-table {
    max-height: 25em;
    overflow: auto;
}

.sched-view table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.view-caption {
    font: 14pt/16pt 'Trebuchet MS';
}

.sched-view thead {
    position: sticky;
    top: 0;
    background-color: #fff;
}

.sched-view th {
    font: 10pt/12pt 'Segoe UI';
    font-weight: 600;
    padding: 0.2em 0.4em;
    border: solid 1px #666;
}
.sched-view td {
    font: 10pt/12pt 'Segoe UI';
    font-weight: 400;
    padding: 0.2em 0.4em;
    border: solid 1px #666;
}

.sched-view tbody tr:hover {
    background-color: #ded8ed;
}

.SchedFilterForm {
    display: grid;
    grid-template-areas: "fcap fcap"
        "l1 f1"
        "l2 f2"
        "l3 f3"
        "inb1 inb1";
    align-content: center;
    justify-items: end;
    width: max-content;
    margin: auto;
    border: solid 1px #888;
    padding: 2pt 16pt;
    border-radius: 8pt;
}

.title1 {
    font-size: 14pt;
    line-height: 16pt;
    margin: 12pt auto 8pt auto;
}

.title2 {
    font-size: 12pt;
    line-height: 14pt;
    margin: 8pt auto;
}

.view-btn-bar {
    display: flex;
    justify-content: flex-start;
    margin: 12pt 0;
    gap: 4pt;
}

.form-caption {
    margin: 8pt auto;
    font-size: 14pt;
    line-height: 16pt;
}

.SchedUpdForm {
    max-width: 50em;
    background-color: #ddd;
    padding: 8pt 16pt;
    border: solid 2px #e59d55;
    border-radius: 8pt;
    display: grid;
    grid-template-areas: "fcap fcap"
        "lf1 f1"
        "lf2 f2"
        "lf3 f3"
        "lf4 f4"
        "lf5 f5"
        "lf6 f6"
        "lf7 f7"
        "lf8 f8"
        "lf9 f9"
        "lf10 f10"
        "lf11 f11"
        "inb1 inb1";
} .menuep-block {
    display: inline-flex;
    flex-direction: row;
    align-content: stretch;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8pt;
}

.menuep-block a {
    outline: none;
    text-decoration: none;
    color: black;
}

.menuep-item {
    padding: 8pt 16pt;
    border: 1px solid #888;
    /* border-radius: 4pt; */
    max-width: 16em;
    height: -webkit-fill-available;
} .AplUpdForm {
    max-width: 50em;
    background-color: #ddd;
    padding: 8pt 16pt;
    border: solid 2px #e59d55;
    border-radius: 8pt;
    display: grid;
    grid-template-areas: "fcap fcap"
        "lf1 f1"
        "lf2 f2"
        "lf3 f3"
        "lf4 f4"
        "lf5 f5"
        "lf6 f6"
        "lf7 f7"
        "lf8 f8"
        "lf9 f9"
        "lf10 f10"
        "lf11 f11"
        "lf12 f12"
        "lf13 f13"
        "lf14 f14"
        "inb1 inb1";
}