@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
/*
:root is used to set global variables for css. This way, we can set these values once, and
then reuse them as many times as we need to.
*/
:root {
/* This section is for colors, this way, we can have a color pallot which can be changed if needed. */
--primary: #008000;
--secondary: #0F52BA;
--warn: #fffacd;
--error: #a30202;
--dark: #333;
/* spacing units this is designed to be changed latter on. right now, I am using pixles */
--sunset: auto;
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: 16px;
--s5: 20px;
--s6: 24px;
--s7: 28px;
--s8: 32px;
}
body {
font-family: calibri, Arial, Helvetica, sans-serif;
line-height: 1.5;
background-color: #eee;
word-break: normal;
}
.content-panel {
margin: 0px 1rem
}
.BLOG_video_class {
width: 100%;
aspect-ratio: 16 / 9;
}
.main {
background-color: white;
padding: 0;
max-width: 50rem;
margin-top: 0;
margin-bottom: 3rem;
margin-left: auto;
margin-right: auto;
}
.post-title {
visibility: hidden;
display: none;
}
.hanging-indent {
text-indent: -1rem;
padding-left: 2rem;
}
.console {
color: greenyellow;
background-color: black;
font-family: 'Courier New', Courier, monospace;
padding-left: 1rem;
margin: 0;
}
.topnav {
overflow: hidden;
background-color: var(--dark);
font-weight: bold;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #4682B4;
text-decoration: none;
}
.topnav a.active {
background-color: var(--secondary);
;
color: white;
}
.page-link:hover {
text-decoration: underline;
}
.page-link {
font-weight: bold;
cursor: pointer;
color: var(--primary);
}
.copy-block {
margin: 0;
}
.code {
padding: 0 1rem .5rem 0;
background-color: #666;
color: white;
overflow: auto;
overflow-y: hidden;
}
.button {
cursor: pointer
}
summary {
margin-top: 10px;
cursor: pointer;
background-color: var(--secondary);
color: white;
padding-left: 7px;
}
a {
color: var(--primary);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.material-symbols-outlined {
font-variation-settings:
'
FILL'
0,
'
wght'
400,
'
GRAD'
0,
'
opsz'
48
}
.inline-icon {
vertical-align: middle;
font-size: 18px !important;
}
.row {
display: flex;
}
.column {
flex: 50%;
}
#message-center {
position: fixed;
right: 0;
top: 0;
padding: 0 .3rem .3rem .3rem;
z-index: 10;
min-width: 10rem;
max-width: 20rem;
}
.msg-ctrl {
float: right;
margin: 0 .2rem 0 .5rem;
}
.msg-head {
margin-top: .3rem;
padding: .1rem .1rem .1rem .3rem;
color: white;
background-color: var(--primary);
}
.warning {
background-color: #ffeb3b;
color: black;
}
.error {
background-color: rgb(184, 0, 0);
}
.info {
background-color: blue;
}
.msg-body {
background-color: white;
padding: .2rem;
border: 1px solid black;
}
.overlay-menu{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0);
display: table;
}
.span-link{
color:green;
cursor:pointer;
}
.span-link:hover{
text-decoration: underline;
}
.user-menu{
background-color: var(--dark);
color:white;
font-weight: bold;
width:200px
}
.user-menu-item{
border-bottom: 1px solid #aaa;
padding-left: .5rem;
cursor:pointer;
}
.user-menu-item:hover {
background-color: #4682B4;
text-decoration: none;
}
#grader_updates {
text-align: center;
font-size: 1rem;
font-family: monospace;
color: var(--primary);
}
#student_grade_results {
padding: 0 1rem;
padding-bottom: 1rem;
background-color: #eee;
}
.i {
font-style: italic;
}
.gray {
color: lightslategray;
}
.center {
text-align: center;
}
.right {
text-align: right !important;
}
.left {
text-align: left;
}
.sidebar{
width:90%;
margin:auto;
margin-top:1rem;
margin-bottom:1.5rem;
}
.sidebar.title{
margin-top: 0;
margin-bottom: 0;
border-radius: 5px 5px 0 0;
padding:.2rem .4rem;
border-left: 1px solid #555;
border-right: 1px solid #555;
border-top: 1px solid #555;
filter: drop-shadow(4px 4px 4px #888);
width: auto;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color:white;
}
.sidebar.body{
font-family:Verdana, Geneva, Tahoma, sans-serif;
margin-top: 0;
margin-bottom: 0;
filter: drop-shadow(4px 4px 4px #888);
border-radius: 0 0 5px 5px;
background-color: whitesmoke;
padding:.4rem .8rem .8rem .8rem;
border-left: 1px solid #555;
border-right: 1px solid #555;
border-bottom: 1px solid #555;
width: auto;
}
.sidebar.title tr{
color:white;
font-size: larger;
}
.sidebar.title.caution tr{
color:black;
}
.sidebar.note{
background-color: darkgreen;
}
.sidebar.tip{
background-color: purple;
}
.sidebar.term{
background-color: darkblue;
}
.sidebar.caution{
background-color: gold;
color:#111
}
.sidebar.objectives{
background-color: maroon;
color:#111;
}
.sidebar.review{
background-color: salmon;
color:#111;
}
.figure-container{
text-align: center;
}
.figure{
display:inline-block;
margin-top:1rem;
margin-bottom:1.5rem;
}
.figure.title{
text-align: left;
display:block;
margin-top: 0;
margin-bottom: 0;
border-radius: 0 0 5px 5px;
padding:.2rem .4rem;
border-left: 1px solid #555;
border-right: 1px solid #555;
border-bottom: 1px solid #555;
filter: drop-shadow(4px 4px 4px #888);
width: auto;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color:white;
background-color: #555;
}
.figure.body{
display:block;
font-family:Verdana, Geneva, Tahoma, sans-serif;
margin-top: 0;
margin-bottom: 0;
filter: drop-shadow(4px 4px 4px #888);
border-radius: 5px 5px 0 0 ;
background-color: whitesmoke;
padding:.4rem .8rem .8rem .8rem;
border-left: 1px solid #555;
border-right: 1px solid #555;
border-top: 1px solid #555;
width: auto;
}
/*************** Card *****************/
.ui-card-container {
text-align: center;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin-left: 0.5rem;
margin-top: 0.5rem;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.card-head {
padding: 0.5rem;
background-color: #4682B4;
color: #eee;
text-align: center;
}
.ui-card-title {
font-size: 1.2rem;
color: white;
}
.ui-card-subtitle {
font-size: 0.9rem;
}
.card-body {
padding: 0.5rem;
background-color: #fff;
text-align: left;
}
.card-body-item {
padding-top: 0px;
}
.max-height-350 {
max-height: 350px;
overflow-y: scroll;
}
.max-height-300 {
max-height: 300px;
overflow-y: scroll;
}
.price-tag {
font-size: 1.5rem;
font-family: 'Poppins', Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.card-ul-padding {
padding-left: 15px;
}
.user-payments-item-card {
border: 1px solid #aaa;
padding: 10px;
margin-bottom: 5px;
border-radius: 5px;
}
/*************************************/
/************* Test ******************/
.header-text {
font-weight: bold;
margin: 5px 0;
}
.content-text {
margin: 5px 0;
}
/*************************************/
/************* Grid ******************/
.ui-grid-container {
display: grid;
padding: 10px;
}
.ui-grid-item {
padding: 10px;
min-height: auto;
}
.ui-grid-columns-1 {
grid-template-columns: repeat(1, 1fr);
}
.ui-grid-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.ui-grid-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.ui-grid-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.ui-grid-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.ui-grid-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
/*************************************/
/*********** FLEX ***************/
.ui-flex {
display: flex;
}
.ui-flex-row {
display: flex;
flex-direction: row;
}
.ui-flex-row-reverse {
display: flex;
flex-direction: row-reverse;
}
.ui-flex-column {
display: flex;
flex-direction: column;
}
.ui-flex-column-reverse {
display: flex;
flex-direction: column-reverse;
}
.ui-flex-wrap {
flex-wrap: wrap;
}
.ui-flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.ui-justify-content-start {
justify-content: flex-start;
}
.ui-justify-content-end {
justify-content: flex-end;
}
.ui-justify-content-center {
justify-content: center;
}
.ui-flex-item {
margin: auto;
}
.ui-flex-wide {
flex: 100 0 auto;
}
.user-payments {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.user-payments-item-card {
max-width: 40%;
min-width: 400px;
}
/*********** END FLEX ************/
.clickable {
transition: 0.3s;
}
.clickable:hover {
color: var(--secondary);
;
cursor: pointer;
}
.ui-inline-block {
display: inline-block;
vertical-align: top;
}
.ui-min-width {
min-width: 250px;
}
.ui-max-width {
max-width: 300px;
}
.ui-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 4px;
text-align: center;
text-decoration: none;
display: inline-block;
transition-duration: 0.3s;
cursor: pointer;
}
.ui-button.primary {
background-color: var(--primary);
color: white;
border: 2px solid var(--primary);
}
.ui-button.primary:hover {
background-color: white;
color: var(--primary);
}
.ui-button.info {
background-color: var(--secondary);
color: white;
border: 2px solid var(--secondary);
}
.ui-button.info:hover {
background-color: white;
color: var(--secondary);
}
.ui-button.error {
background-color: var(--error);
color: white;
border: 2px solid var(--error);
}
.ui-button.error:hover {
background-color: white;
color: var(--error);
}
.ui-button-link{
background: none!important;
border: none;
padding: 0!important;
color: var(--primary);
cursor: pointer;
}
.ui-button-link:hover{
text-decoration: underline;
}
.ui-input {
font-size: 1rem;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.auth-container {
width: 300px;
text-align: left;
}
.ui-full-width {
width: 100%;
}
.ui-google-sign-in-buttton{
display: inline-block;
background: white;
color: #444;
border-radius: 5px;
border: thin solid #888;
white-space: nowrap;
}
.ui-google-sign-in-buttton:hover{
cursor: pointer;
}
span.ui-button-text {
display: inline-block;
vertical-align: middle;
padding: 0 20px 0 5px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the */
/* font-family: 'Roboto', sans-serif; */
}
.ui-bg-clear{
background-color: transparent;
}
.ui-line{
width: 100%;
}
span.ui-icon {
background: url('https://img.icons8.com/color/32/000000/google-logo.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
}
.no-padding {
padding: 0;
}
.no-margin {
margin: 0;
}
.user-info {
width: 250px;
text-align: center;
display: inline-block;
}
.user-icon {
width: 100px;
height: 100px;
background-color: var(--primary);
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 4rem;
font-weight: lighter;
color: #eee;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
display: table;
}
.modal-title {
padding:0 .3rem;
text-align: center;
font-weight: bold;
background-color: var(--secondary);
color: white;
}
.modal-footer {
text-align: right;
padding: 5px;
}
.modal-page {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.modal {
display: inline-block;
min-width: 250px;
background-color: whitesmoke;
text-align: left;
}
.modal-content {
padding: 5px
}
.auth-container-in-modal{
background-color: white;
}
/************ MARGIN built by tools/dev/css_builder.py **************/
.m1 {
margin: var(--s1) var(--s1) var(--s1) var(--s1)
}
.mx1 {
margin: var(--sunset) var(--s1) var(--sunset) var(--s1)
}
.my1 {
margin: var(--s1) var(--sunset) var(--s1) var(--sunset)
}
.mt1 {
margin: var(--s1) var(--sunset) var(--sunset) var(--sunset)
}
.mb1 {
margin: var(--sunset) var(--sunset) var(--s1) var(--sunset)
}
.ml1 {
margin: var(--sunset) var(--sunset) var(--sunset) var(--s1)
}
.mr1 {
margin: var(--sunset) var(--s1) var(--sunset) var(--sunset)
}
.m2 {
margin: var(--s2) var(--s2) var(--s2) var(--s2)
}
.mx2 {
margin: var(--sunset) var(--s2) var(--sunset) var(--s2)
}
.my2 {
margin: var(--s2) var(--sunset) var(--s2) var(--sunset)
}
.mt2 {
margin: var(--s2) var(--sunset) var(--sunset) var(--sunset)
}
.mb2 {
margin: var(--sunset) var(--sunset) 4px var(--sunset);
}
.ml2 {
margin: var(--sunset) var(--sunset) var(--sunset) var(--s2)
}
.mr2 {
margin: var(--sunset) var(--s2) var(--sunset) var(--sunset)
}
.m3 {
margin: var(--s3) var(--s3) var(--s3) var(--s3)
}
.mx3 {
margin: var(--sunset) var(--s3) var(--sunset) var(--s3)
}
.my3 {
margin: var(--s3) var(--sunset) var(--s3) var(--sunset)
}
.mt3 {
margin: var(--s3) var(--sunset) var(--sunset) var(--sunset)
}
.mb3 {
margin: var(--sunset) var(--sunset) var(--s3) var(--sunset)
}
.ml3 {
margin: var(--sunset) var(--sunset) var(--sunset) var(--s3)
}
.mr3 {
margin: var(--sunset) var(--s3) var(--sunset) var(--sunset)
}
.m4 {
margin: var(--s4) var(--s4) var(--s4) var(--s4)
}
.mx4 {
margin: var(--sunset) var(--s4) var(--sunset) var(--s4)
}
.my4 {
margin: var(--s4) var(--sunset) var(--s4) var(--sunset)
}
.mt4 {
margin: var(--s4) var(--sunset) var(--sunset) var(--sunset)
}
.mb4 {
margin: var(--sunset) var(--sunset) var(--s4) var(--sunset)
}
.ml4 {
margin: var(--sunset) var(--sunset) var(--sunset) var(--s4)
}
.mr4 {
margin: var(--sunset) var(--s4) var(--sunset) var(--sunset)
}
.m5 {
margin: var(--s5) var(--s5) var(--s5) var(--s5)
}
.mx5 {
margin: var(--sunset) var(--s5) var(--sunset) var(--s5)
}
.my5 {
margin: var(--s5) var(--sunset) var(--s5) var(--sunset)
}
.mt5 {
margin: var(--s5) var(--sunset) var(--sunset) var(--sunset)
}
.mb5 {
margin: var(--sunset) var(--sunset) var(--s5) var(--sunset)
}
.ml5 {
margin: var(--sunset) var(--sunset) var(--sunset) var(--s5)
}
.mr5 {
margin: var(--sunset) var(--s5) var(--sunset) var(--sunset)
}
.m6 {
margin: var(--s6) var(--s6) var(--s6) var(--s6)
}
.mx6 {
margin: var(--sunset) var(--s6) var(--sunset) var(--s6)
}
.my6 {
margin: var(--s6) var(--sunset) var(--s6) var(--sunset)
}
.mt6 {
margin: var(--s6) var(--sunset) var(--sunset) var(--sunset)
}
.mb6 {
margin: var(--sunset) var(--sunset) var(--s6) var(--sunset)
}
.ml6 {
margin: var(--sunset) var(--sunset) var(--sunset) var(--s6)
}
.mr6 {
margin: var(--sunset) var(--s6) var(--sunset) var(--sunset)
}
.m7 {
margin: var(--s7) var(--s7) var(--s7) var(--s7)
}
.mx7 {
margin: var(--sunset) var(--s7) var(--sunset) var(--s7)
}
.my7 {
margin: var(--s7) var(--sunset) var(--s7) var(--sunset)
}
.mt7 {
margin: var(--s7) var(--sunset) var(--sunset) var(--sunset)
}
.mb7 {
margin: var(--sunset) var(--sunset) var(--s7) var(--sunset)
}
.ml7 {
margin: var(--sunset) var(--sunset) var(--sunset) var(--s7)
}
.mr7 {
margin: var(--sunset) var(--s7) var(--sunset) var(--sunset)
}
.m8 {
margin: var(--s8) var(--s8) var(--s8) var(--s8)
}
.mx8 {
margin: var(--sunset) var(--s8) var(--sunset) var(--s8)
}
.my8 {
margin: var(--s8) var(--sunset) var(--s8) var(--sunset)
}
.mt8 {
margin: var(--s8) var(--sunset) var(--sunset) var(--sunset)
}
.mb8 {
margin: var(--sunset) var(--sunset) var(--s8) var(--sunset)
}
.ml8 {
margin: var(--sunset) var(--sunset) var(--sunset) var(--s8)
}
.mr8 {
margin: var(--sunset) var(--s8) var(--sunset) var(--sunset)
}
/********* END MARGIN **********/
/************ PADDING built by tools/dev/css_builder.py ***********/
.p1 {
padding: var(--s1) var(--s1) var(--s1) var(--s1)
}
.px1 {
padding: var(--sunset) var(--s1) var(--sunset) var(--s1)
}
.py1 {
padding: var(--s1) var(--sunset) var(--s1) var(--sunset)
}
.pt1 {
padding: var(--s1) var(--sunset) var(--sunset) var(--sunset)
}
.pb1 {
padding: var(--sunset) var(--sunset) var(--s1) var(--sunset)
}
.pl1 {
padding: var(--sunset) var(--sunset) var(--sunset) var(--s1)
}
.pr1 {
padding: var(--sunset) var(--s1) var(--sunset) var(--sunset)
}
.p2 {
padding: var(--s2) var(--s2) var(--s2) var(--s2)
}
.px2 {
padding: var(--sunset) var(--s2) var(--sunset) var(--s2)
}
.py2 {
padding: var(--s2) var(--sunset) var(--s2) var(--sunset)
}
.pt2 {
padding: var(--s2) var(--sunset) var(--sunset) var(--sunset)
}
.pb2 {
padding: var(--sunset) var(--sunset) var(--s2) var(--sunset)
}
.pl2 {
padding: var(--sunset) var(--sunset) var(--sunset) var(--s2)
}
.pr2 {
padding: var(--sunset) var(--s2) var(--sunset) var(--sunset)
}
.p3 {
padding: var(--s3) var(--s3) var(--s3) var(--s3)
}
.px3 {
padding: var(--sunset) var(--s3) var(--sunset) var(--s3)
}
.py3 {
padding: var(--s3) var(--sunset) var(--s3) var(--sunset)
}
.pt3 {
padding: var(--s3) var(--sunset) var(--sunset) var(--sunset)
}
.pb3 {
padding: var(--sunset) var(--sunset) var(--s3) var(--sunset)
}
.pl3 {
padding: var(--sunset) var(--sunset) var(--sunset) var(--s3)
}
.pr3 {
padding: var(--sunset) var(--s3) var(--sunset) var(--sunset)
}
.p4 {
padding: var(--s4) var(--s4) var(--s4) var(--s4)
}
.px4 {
padding: var(--sunset) var(--s4) var(--sunset) var(--s4)
}
.py4 {
padding: var(--s4) var(--sunset) var(--s4) var(--sunset)
}
.pt4 {
padding: var(--s4) var(--sunset) var(--sunset) var(--sunset)
}
.pb4 {
padding: var(--sunset) var(--sunset) var(--s4) var(--sunset)
}
.pl4 {
padding: var(--sunset) var(--sunset) var(--sunset) var(--s4)
}
.pr4 {
padding: var(--sunset) var(--s4) var(--sunset) var(--sunset)
}
.p5 {
padding: var(--s5) var(--s5) var(--s5) var(--s5)
}
.px5 {
padding: var(--sunset) var(--s5) var(--sunset) var(--s5)
}
.py5 {
padding: var(--s5) var(--sunset) var(--s5) var(--sunset)
}
.pt5 {
padding: var(--s5) var(--sunset) var(--sunset) var(--sunset)
}
.pb5 {
padding: var(--sunset) var(--sunset) var(--s5) var(--sunset)
}
.pl5 {
padding: var(--sunset) var(--sunset) var(--sunset) var(--s5)
}
.pr5 {
padding: var(--sunset) var(--s5) var(--sunset) var(--sunset)
}
.p6 {
padding: var(--s6) var(--s6) var(--s6) var(--s6)
}
.px6 {
padding: var(--sunset) var(--s6) var(--sunset) var(--s6)
}
.py6 {
padding: var(--s6) var(--sunset) var(--s6) var(--sunset)
}
.pt6 {
padding: var(--s6) var(--sunset) var(--sunset) var(--sunset)
}
.pb6 {
padding: var(--sunset) var(--sunset) var(--s6) var(--sunset)
}
.pl6 {
padding: var(--sunset) var(--sunset) var(--sunset) var(--s6)
}
.pr6 {
padding: var(--sunset) var(--s6) var(--sunset) var(--sunset)
}
.p7 {
padding: var(--s7) var(--s7) var(--s7) var(--s7)
}
.px7 {
padding: var(--sunset) var(--s7) var(--sunset) var(--s7)
}
.py7 {
padding: var(--s7) var(--sunset) var(--s7) var(--sunset)
}
.pt7 {
padding: var(--s7) var(--sunset) var(--sunset) var(--sunset)
}
.pb7 {
padding: var(--sunset) var(--sunset) var(--s7) var(--sunset)
}
.pl7 {
padding: var(--sunset) var(--sunset) var(--sunset) var(--s7)
}
.pr7 {
padding: var(--sunset) var(--s7) var(--sunset) var(--sunset)
}
.p8 {
padding: var(--s8) var(--s8) var(--s8) var(--s8)
}
.px8 {
padding: var(--sunset) var(--s8) var(--sunset) var(--s8)
}
.py8 {
padding: var(--s8) var(--sunset) var(--s8) var(--sunset)
}
.pt8 {
padding: var(--s8) var(--sunset) var(--sunset) var(--sunset)
}
.pb8 {
padding: var(--sunset) var(--sunset) var(--s8) var(--sunset)
}
.pl8 {
padding: var(--sunset) var(--sunset) var(--sunset) var(--s8)
}
.pr8 {
padding: var(--sunset) var(--s8) var(--sunset) var(--sunset)
}
/******************* END PADDING ********************/