.leaflet-overlay-pane svg path{
    pointer-events: auto;
}

.viz {
    width: 100%;
}

main.back {
    background-color: #f8f2e5;
}

main .control {
    display: flex;
    flex-direction: row;
    align-items: center;
}

main .launchpad {
    display: grid;
    width: 60%;
    margin: 8px auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 8px;
    row-gap: 8px;
}

main .launchpad .launchitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(241, 241, 241);
    border-radius: 16px;
    padding: 8px;
    position: relative;
}

main .launchpad .launchitem.launchlock::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 32px;
    height: 32px;
    background-image: url("../images/ico-lock-32.svg");
}

main .launchpad .launchitem .launchname {
    font: 80%;
    font-weight: bold;
    margin-bottom: 8px;
}

main .launchpad .launchitem .launchDesc {
    font: 80%;
}

main .content {
    width: 80%;
    margin: 8px auto;
}

main .emaillist {
    border: 1px solid #777;
    padding: 8px;
    font-size: 90%;
}

main .info {
    display: flex;
    flex-direction: column;
}

main .info .item {
    display: grid;
    width: calc(100% - 24px);
    margin: 4px auto;
    color: rgb(110, 110, 110);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 8px;
    row-gap: 4px;
    grid-template-areas: 
        "label value";
}

main .info .label {
    grid-area: label;
    font-size: 0.8em;
    font-weight: bold;
}

main .info .value {
    grid-area: value;
    font-size: 0.8em;
}

main .about {
    display: flex;
    flex-direction: column;
}

main .about .item {
    display: grid;
    width: calc(100% - 24px);
    margin: 4px auto;
    color: rgb(110, 110, 110);
    grid-template-columns: 1fr 6fr;
    grid-template-rows: auto;
    column-gap: 8px;
    row-gap: 4px;
    grid-template-areas: 
        "label value";
}

main .about .item .label {
    grid-area: label;
    font-size: 0.8em;
    font-weight: bold;
}

main .about .item .value {
    grid-area: value;
    font-size: 0.8em;
}

main .cards .card-header {
    text-align: center;
    padding: 8px 0;
    color: rgb(248, 248, 248);
    background-color: rgb(117, 117, 117);
}

main .cards .card-header h2 {
    font-size: 100%;
    font-weight: normal;
    padding: 4px 0;
}

main .cards {
    width: calc(100% - 24px);
    margin: 8px auto;
}

main .cards.ace {
    background-color: #ebe8cc;
    display: grid;
    width: calc(100% - 16px);
    margin: 8px auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-areas: 
        "card-one";
}

main .cards.pair {
    display: grid;
    width: calc(100% - 24px);
    margin: 8px auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 18px;
    row-gap: 8px;
    grid-template-areas: 
        "card-one card-two";
}

main .cards.pair .card-one,
main .cards.pair .card-two {
    text-align: justify;
}

main .cards.pair .card-one {
    grid-area: card-one;
}

main .cards.pair .card-two {
    grid-area: card-two;
}

main .cards.trip {

    display: grid;
    width: 100%;
    grid-template-columns: 1fr 2fr 2fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "card-one card-two card-three";
    margin: 8px auto;
    column-gap: 18px;
    row-gap: 8px;
}

main .cards.trip .card-one,
main .cards.trip .card-two,
main .cards.trip .card-three {
    text-align: justify;
}

main .cards.trip .card-one {
    grid-area: card-one;
}

main .cards.trip .card-two {
    grid-area: card-two;
}

main .cards.trip .card-three {
    grid-area: card-three;
}

main .cards.jack {
    display: grid;
    width: calc(100% - 24px);
    margin: 8px auto;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-areas: 
        "card-one card-two";
}

main .cards.jack .card-one,
main .cards.jack .card-two {
    text-align: justify;
}

main .cards.jack .card-one {
    grid-area: card-one;
}

main .cards.jack .card-two {
    grid-area: card-two;
}

main .tutorial {
    display: flex;
    flex-direction: column;
    width: 60%;
    margin: 8px auto;
}

main .tutorial .chapter{
    display: grid;
    grid-template-columns: minmax(0px, 1fr);
    grid-template-rows: auto;
    width: 100%;
    column-gap: 8px;
    row-gap: 8px;
    grid-template-areas: 
        "topic"
        "lesson";
}

main .tutorial .chapter .topic {
    grid-area: topic;
}

main .tutorial .chapter .topic .subtitle{
    font-size: 80%;
    font-weight: bold;
}

main .tutorial .chapter .lesson {
    min-width: 0;
    grid-area: lesson;
    text-align: justify;
}


main .tutorial .chapter .lesson ul {
    list-style: circle inside;
    font-size: 0.8em;
    margin: 4px 0 8px 24px;
}

main .tutorial .chapter .lesson .keyinput {
    margin: 4px 0 8px 0;
}

main .tutorial .chapter .lesson .keyinput label{
    font-size: 80%;
}

main .tutorial .chapter .lesson .keyinput input{
    font-size: 80%;
    margin: 0 4px;
    padding: 4px;
    width: 40px;
}

main .tutorial .chapter .lesson pre {
    max-width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    color: #000;
    background-color: #fdfbef;
    border: 1px solid #898989;
    padding: 0 8px;
    margin: 8px 0;
}

main .tutorial .chapter .lesson .jsonbox{
    height:400px;
    overflow-y:scroll;
    white-space: pre-wrap;
    font-family:monospace;
    text-align:left;
    border: 1px solid #ccc;
    padding: 3px 5px;
}

main .tutorial .chapter .lesson .endpoints {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 4px;
}

main .tutorial .chapter .lesson .endpoint {
    display: grid;
    padding: 6px 0;
    cursor: pointer;
    background-color: #fdfbef;
    grid-template-columns: 7fr 4fr 1fr;
    grid-template-rows: auto;
    column-gap: 4px;
    grid-template-areas: 
        "url desc ctype";
}

main .tutorial .chapter .lesson .endpoint .url {
    grid-area: url;
    padding-left: 4px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 14px;
}

main .tutorial .chapter .lesson .endpoint .desc,
main .tutorial .chapter .lesson .endpoint .ctype {
    padding: 0 4px;
    font-size: 80%;
}

main .tutorial .chapter .lesson .endpoint .desc {
    grid-area: desc;
}

main .tutorial .chapter .lesson .endpoint .ctype {
    grid-area: ctype;
    text-align: right;
}

main .infomessage {
    font-size: 80%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}
main .infomessage::before {
    content: "\1F6C8";
    font-size:20px;
    margin-right: 12px;
}

p.figure {
    text-align: center;
    text-decoration: underline;
    font-style: italic;
}

@media (max-width: 1600px) {

    main .about .item {
        grid-template-columns: 1fr 3fr;
    }

    main .tutorial .chapter .lesson .endpoint {
        grid-template-columns: 5fr 1fr;
        grid-template-areas: 
            "url url"
            "desc ctype";
    }

}

@media (max-width: 750px) {

    main .content {
        width: 96%;
        grid-template-columns: 1fr;
        grid-template-areas: 
            "hero"
            "header"
            "main"
            "sidebar"
            "footer";
    }

    main .cards.pair {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "card-one"
            "card-two";
    }
    main .cards.jack {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "card-one"
            "card-two";
    }

    header {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "right"
            "center";
    }

    header .right {
        align-self: center;
        justify-self: center;
    }
    
    main .about .item {
        grid-template-columns: 1fr 2fr;
    }

}