@font-face {
    font-family: PTSans;
    src: url(static/PTSans-Regular.ttf);
}

body {
    margin:0px;
    background-color:#2d7d82/*#112032*/;
}

h1 {
    font-size: 18px;
    font-family: 'Segoe UI';
    margin-left: 8px;
    margin-top: 4px;
    margin-bottom: 0px;
}

h2 {
    color:#2d7d82 /* #d71e00 */;
    font-size: 14px;
    font-family: 'Segoe UI';
    margin-left: 0px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.span {
    font-family: 'Segoe UI';
}

hr {
    color: transparent;
    background:none;
    border: solid 1px rgb(207, 207, 207);
}

div.graybox {
    background-color: rgb(238, 238, 238);
    border: solid 1px rgb(207, 207, 207);
    border-radius: 4px;
    color: rgb(87, 87, 87);
}

/* Top title */
.topTitle {
    color: white;
}
.topTitle:hover {
    box-shadow:#2d7d82 0px 0px 5px;
    text-decoration:underline;
    cursor:pointer;
}
.topTitle:active {
    background-color:#2d7d82;
    cursor:pointer;
    text-decoration:none;
}

/* Top link (menu bar) */
.topLink {
    margin-right:0px;
    margin-left:0px;
    padding-left:20px;
    padding-right:20px;
    border-radius: 20px;
    margin-bottom: 0px;
    padding-bottom:4px;
    padding-top:4px;
    color:white;
    display:inline;
}
.topLink:hover {
    /*box-shadow:#2d7d82 0px 0px 5px;*/
    display:inline;
    background-color: rgb(0, 19, 43);
    color: #46aea3;
    cursor:pointer; /* toadd */
}
.topLink:active {
    text-decoration:none;
    color: #2d7d82;
}
.topLink:disabled {
    color:#9edad4;
    background-color:#2d7d82;
}
/* HOVER/DROPDOWN section */
.topLink:hover .dropdown-content {
    background-color: #46aea3;
    display:inline;
    position:absolute;
    transform: translate(-65px, 20px);
    width:100px; /* 150 */
}

.dropdown-content {
    box-shadow:#2d7d82 0px 0px 5px;
    display:none;
}

/* Misc divs */
.header { /* header old (no image; blue) */
    background-color: #46aea3;
    color: white;
    margin: 0px;
    padding: 2px;
    box-shadow: black 0px -8px 15px;
    position:sticky;
    display:block;
}
.headerimg { /* header new */
    background-color: #46aea3;
    color: white;
    margin: 0px;
    padding: 12px; /* 2px */
    box-shadow: black 0px -8px 15px;
    position:sticky;
    display:block;
    background-image: url("images/StudyingWorks_Banner_v2_dark.png");
    background-repeat: repeat, repeat;
    background-size: 800px;
    background-position: 0px, 100px;
}
.footer {
    background-color: #46aea3;
    color: white;
    margin: 0px;
    padding: 2px;
}
.pagediv {
    margin:8px;
    padding:16px;
    background-color:#fafafa;
    border-radius:5px;
    font-size: 13px;
    font-family: 'Segoe UI';
    color: rgb(31, 31, 31);
    width: 1000px; /*98%;*/ /* 800px */ /* todo: good width? check cb, phone */
    box-shadow: #1d495e 0px 0px 10px;
    box-sizing: border-box;
    /* margin-left:auto;
    margin-right:auto; */
}
.t_gray {
    color: rgb(175, 175, 175);
}
.vidsdiv {
    padding:4px;
    display:flex;
    flex-flow:row-wrap;
    flex-wrap:wrap;
    justify-content:space-between;
}
.vidsdiv iframe {
    display:inline-block;
}

/* a */
a {
    text-decoration:none;
    color:white;
    font-size:13px;
    margin-right:0px;
    padding-left: 25px;
    padding-right:25px;
}
a:hover {
    text-decoration:underline;
    color:white;
    cursor:pointer;
    font-size:13px;
    box-shadow:#2d7d82 0px 0px 5px;
}
a:active {
    text-decoration:underline;
    color:white;
    cursor:pointer;
    font-size:13px;
    background-color:#2d7d82;
}

/* Regular link class */
.link {
    text-decoration:underline;
    color:#46aea3;
    cursor:pointer;
    font-size:13px;
    background:none;
    margin-left:0px;
    padding-left:0px;
    padding-right:0px;
}
.link:hover {
    text-decoration:underline;
    color:#2d7d82;
    cursor:pointer;
    font-size:13px;
    background:none;
    margin-left:0px;
    padding-left:0px;
    padding-right:0px;
}
.link:active {
    text-decoration:underline;
    color:#46aea3;
    cursor:pointer;
    font-size:13px;
    background:none;
    margin-left:0px;
    padding-left:0px;
    padding-right:0px;
}

/* Button */
button {
    color: white;
    font-weight: bold;
    background-color: #46aea3;
    padding: 8px;
    border-style: none;
}
button:hover {
    background-color: #2d7d82;
}
button:focus {
    background-color: #2d7d82;
}
button:active {
    background-color: #1d495e;
}
button:disabled {
    background-color: #818181;
}

/* Practice lightbox classes */
.practiceLightboxBg {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    position: fixed;
    z-index: 5;
    padding: 25px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.plbButton {
    height:16px;
    padding:2px;
    font-size:12px;
}

/* Scrolling lesson link divider container */
.scrolldivcontainer {
    background-color: rgb(238, 238, 238);
    padding:0px;
}

/* Scrolling lesson link divider */
.scrolldiv {
    padding:10px;
    padding-top:0px;
    /*background-color:rgb(238, 238, 238);*/
    max-height:500px;
    overflow-y:scroll;
    /* Scroll tip shadow */
    background:
        linear-gradient(rgb(238, 238, 238) 30%, rgba(255, 255, 255, 0)) center top,
        linear-gradient(rgba(255, 255, 255, 0), rgb(238, 238, 238) 70%) center bottom,
        radial-gradient(
            farthest-side at 50% 0,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)
        ) center top,
        radial-gradient(
            farthest-side at 50% 100%,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0)
        ) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
    border: solid 1px rgb(207, 207, 207);
    border-radius: 4px;
}

/* YT button */
.ytButton {
    color: white;
    font-weight: bold;
    background-color: #c20000;
    padding: 8px;
    border-radius:20px;
    border-style: none;
    cursor: pointer;
}
.ytButton:hover {
    background-color: #9c0008;
}
.ytButton:focus {
    background-color: #9c0008;
}
.ytButton:active {
    background-color: rgb(122, 0, 10);
}
.ytButton:disabled {
    background-color: #818181;
}

/* Flex container */
.flex-container {
    display: flex;
}
.flex-item-div {
    margin: 6px;
    padding: 8px;
    width: 150px;
    height: 160px;
}

/* iframe */
iframe {
    border-radius: 8px;
    box-shadow: 0px 2px 6px rgb(185, 185, 185);
}

/* Inputs */
input[type="text"] {
    border-radius: 20px;
    padding: 4px;
    padding-left: 8px;
    background-color: rgb(238, 238, 238);
    border: solid 1px rgb(207, 207, 207);
}
input[type="text"]:hover {
    background-color: white;
}