/*========== SUBJECTS STYLESHEET =============*/
/* raadix.com 2020-2024                       */
/* Modified:: july/august 2024                */
/*============================================*/

#page-subjects {
	display: none;
	z-index: 1;
	padding: 5mm 5mm;
	background: none;
    margin: 15mm 0 0 0;
    width: 100%
}

.subject-list {
    display: grid;
	grid-template-columns: 1fr;
    grid-gap: 5mm 5mm;
    max-width: 500mm;
    margin: 5mm auto 5mm auto;
    padding: 4mm 4mm;
    font-size: 4mm;
    border: 0.5mm solid #575757;
    border-radius: 2mm;
}
.subject-list legend {
    display: inline-flex;
    font-size: inherit;
    line-height: 5.0mm;
    min-width: 50mm;
    max-width: 80%;
    border: 0.5mm solid #575757;
    border-radius: 2mm;
    padding: 1mm 3mm;
    background-color: white;
    color: #575757;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.subject-list legend:hover {
    outline: 0.7mm solid var(--yellow-color);
}
.subject-list legend select {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    padding: 1mm 2mm 1mm 0mm;
    margin: 0;
    text-align: left;
    min-width: 50mm;
    border: none;
    cursor: pointer;
}
.subject-list legend select:focus {
    outline: none;
}
.subject-list legend div {
    font-size: 5.0mm;
    line-height: inherit;
    color: inherit;
	padding: 1mm 2mm 1mm 0mm;
	margin: 0;
	text-align: left;
}
.subject-list #subject-notice {
    align-content: start;
    grid-column: 1;
    grid-row: 1;
    padding: 2mm 4mm;
    background-color: #F0F0F0;
    text-align: justify;
    font-size: 4mm;
    line-height: 5.6mm;
    border-radius: 2mm;
    height: 36mm; 
    overflow: hidden;
    border: 0.5mm solid var(--grey-text);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.24);
}
.subject-warning {
    color: var(--red-color);
}
.subject-classroom {
    color: var(--blue-color);
}
.subject-personal {
    color: var(--blue-color);
}
.subject-group {
    color: var(--grey-text);
}
.subject-warning:hover, .subject-classroom:hover, 
.subject-personal:hover, .subject-group:hover {
    outline: 0.7mm solid var(--yellow-color);
}
.subject-warning:active, .subject-classroom:active, 
.subject-personal:active, .subject-group:active {
    outline: 1.4mm solid var(--yellow-color);
}

.subject-small {
    white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis; 
}
#subject-delete-warning {
    display: block;
    padding: 1mm 2mm;
    margin: 2mm 0;
    font-size: 3.5mm;
    line-height: 4.5mm;
    text-align: center;
    border: 0.7mm solid #E53312;
    color: #E53312;
    background-color: white;
}


.subject-card {
    display: grid;
    grid-template-columns: 10mm auto 10mm 10mm;
    grid-template-rows: 10mm;
    gap: 0 0;
    align-content: start;
    margin: 0 0;
    border: 1px solid var(--blue-color);
    border-radius: 2mm;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.24);
    cursor: pointer;
    background-color: none;
    overflow: hidden;
}

.subject-card > button {
    grid-column: span 1;
    height: 10mm;
    text-align: center;
    color: white;
    background-color: var(--blue-color);
    font-size: 4.5mm;
    line-height: 6mm;
    padding: 2mm 2mm;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
	cursor: pointer; 
}
.subject-card:hover {
    outline: 0.7mm solid var(--yellow-color);
}
.subject-card:active {
	outline: 1.4mm solid var(--yellow-color);
}
.subject-select {
    background-color: var(--yellow-color);
    /*animation: subject-select 0.7s linear 1;*/
}

@keyframes subject-select {
    0%   { outline-width: 1mm;}
    25%  { outline-width: 2mm;}
    50%  { outline-width: 3mm;}
    75%  { outline-width: 2mm;}
    100% { outline-width: 1mm;}
}
.icon-beat {
	animation-name: icon-beat;
	animation-duration: 0.7s;
	animation-iteration-count: 1;
    animation-timing-function: linear;
}
@keyframes icon-beat {
    0% { scale: 1.0; }
    50% { scale: 1.5; }
    100% { scale: 1.0; }
}



.subject-top {
    grid-column: span 1;
    height: 10mm;

    text-align: left;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;

    font-size: 4.0mm;
	line-height: 6mm;
    color: white;
    background-color: #164194;
	font-weight: normal;
    padding: 2mm 0;
    margin: 0;
}

.subject-body {
    grid-column: 1/-1;
    /*vertical-align: text-top;*/
    height: 17.5mm;
	font-size: 3.5mm;
	line-height: 4.5mm;
    text-align: left;
    padding: 2mm 2mm;
    margin: 0;
    background-color: none;
	overflow-y: hidden;
}

.subject-footer {
    display: none;
    grid-column: 1/-1;
	font-size: 3.0mm;
	line-height: 4.0mm;
    text-align: left;
    padding: 2mm 2mm;
    margin: 0;
    background-color: #E0E0E0;
    border-top: 1px solid #164194;

    white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}

#sub-last-modified, #root-last-modified,
#ct-last-modified, #tl-last-modified,
#nt-last-modified, #def-last-modified  {
    grid-column: 1/-1;
    display: block;
    min-height: 7mm;
	margin: 4mm 0;
	padding: 2mm 2mm;
	background-color: #E0E0E0;
    font-size: 3mm;
    color: #575757;
    text-align: center;
    white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}

@media only screen and (min-width: 20cm) {
	.subject-list { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (min-width: 30cm) {
	.subject-list { grid-template-columns: repeat(3, 1fr); }
}
@media only screen and (min-width: 40cm) {
	.subject-list { grid-template-columns: repeat(4, 1fr); }
}