a {
    color: #1f77b4;
    text-decoration: none;
}

#map-list li {
    padding: 4px 0 4px 4px;
}

#map-list .current-chap,
#map-list .current-chap a {
    color: #2ca02c;
}

#map-list .current-chap {
    list-style: none;
    margin-left: -8px;
}

#map-list .current-chap:before {
    border-color: transparent #2ca02c;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    content: "";
    display: inline-block;
    height: 0;
    left: -12px;
    position: relative;
    top: 0;
    width: 0;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}

#status-container {
    margin-top: 0;
}

#theory-area,
#app-area {
    margin-bottom: 10px;
}

#theory-area p {
    margin-bottom: 20px;
    text-align: justify;
}

#theory-area {
    display: inline-block;
}

#theory-area svg {
    cursor: auto;
    display: inline-block;
    vertical-align: middle;
}

div.toggle-container {
    background: #eee;
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 10px;
}

/*text coloring*/
.toggle-link,
.graph-event-link {
    color: #2ca02c;
    cursor: pointer;
    margin-bottom: 10px;
    text-decoration: underline;
}

.toggle-link:hover,
.graph-event-link {
    font-style: italic;
}

div.hint,
div.note,
div.result {
    background: #ffb;
    border-radius: 6px;
    margin-bottom: 20px;
    padding: 10px;
}

div.result {
    background-color: #dfd;
}

.hint-word,
.note-word {
    color: #ff7f0e;
}

.result-word {
    color: #2ca02c;
}

/*text coloring ends*/

/*To deal with resizing windows*/
/*app-area isn't needed when disabled max-height*/
#theory-area,
#map-list {
    overflow-y: auto;
}

/*scrollbar customization*/
body::-webkit-scrollbar-track,
#theory-area::-webkit-scrollbar-track,
#map-list::-webkit-scrollbar-track {
    background-color: #ccc;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar,
#theory-area::-webkit-scrollbar,
#map-list::-webkit-scrollbar {
    background-color: #f5f5f5;
    height: 5px;
    width: 10px;
}

body::-webkit-scrollbar-thumb,
#theory-area::-webkit-scrollbar-thumb,
#map-list::-webkit-scrollbar-thumb {
    background-color: #1f77b4;
}

#application-container {
    background-color: #f8f8f8;
}

/*scrollbar customizations end*/

#app-interface {
    margin-top: 30px;
}

#controls {
    margin-bottom: 10px;
    margin-top: 10px;
}

#canvas svg {
    border: 1px solid #eee;
}

#canvas svg text {
    user-select: none;
}