@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');

.faq-head { margin:0; padding:60px 0 30px 0; text-align: left }

.faq-section .faq-item:first-child { border-radius:10px 10px 0 0 }
.faq-section .faq-item:first-child .question { border-radius:8px 8px 0 0 }
.faq-section .faq-item:last-child { border-radius:0 0 10px 10px }
.faq-section .faq-item:last-child .question { border-radius:0 0 8px 8px }
.faq-section + h2 { pointer-events:none }

.faq-item { border: 1px solid #ffffffcc; border-top: 0; transition:border-color .3s ease }
.faq-item .question { font-size:18px; font-weight: bold; padding:10px 20px; text-align: left; cursor: pointer; background: #f6f6f6; color:#333; user-select:none; transition:background-color .3s ease }
.faq-item .question:hover { background: #eee }
.faq-item .answer { display: none; font-size:18px; color:#fff; padding:30px; text-align: left }
.faq-item .answer .video { position: relative; height: 50%; width: 100% }
.faq-item .answer iframe { background:transparent; max-height: calc(100vh - 200px); }
.faq-item ul, .faq-item ol { font-size:18px; text-align: left }
.faq-item a { color:var(--sky) !important; cursor:pointer }
.faq-item.show-answer .answer { display:block }

.faq-item.highlight { border-color:#ffff75 }
.faq-item.highlight .question { background:#ffff75 !important }

.sectioncontent a { color:#fff; text-decoration: none }
.sectioncontent a:hover { text-decoration: underline }

.hide { display: none }

#searchInput { width: 100%; padding: 12px 40px; border: 1px solid #ddd; margin:50px 0 0 0; font-family:'europa', sans-serif; border-radius: 10px; font-size: 22px; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); }

#searchList { display:flex; flex-direction: column; padding: 0; margin:10px 0 50px 0; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); }
#searchList a { display:none; border-top: 1px solid #ddd; margin-top: -1px; background-color: #f6f6f6; padding: 12px 40px; text-decoration: none; font-size: 18px; color: black; text-align: left; font-weight: bold; }
#searchList a:hover:not(.header) { background-color: #eee; }

#supportHead { font-family:'futura-pt-bold', sans-serif; font-weight:bold; font-size:3em; line-height:1; margin:0; padding:0; text-decoration:none; text-shadow:4px 8px 20px #00000080; }

#mainButtons { width:100%; max-width:1200px; height:auto; display:flex; align-items:center; justify-content:center; margin:auto; padding:50px; box-sizing: border-box }
.main-button { width:33%; height:300px; display:flex; align-items:center; justify-content:space-evenly; flex-direction: column; flex-grow:1; cursor: pointer; text-decoration: none; background:#F7F8F9; border-radius:10px; padding:20px; box-shadow:0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); transition:box-shadow .3s ease, transform .3s ease; box-sizing: border-box; position:relative }
.main-button:nth-child(2) { margin:0 40px; }
.main-button:hover { box-shadow: 0 0 20px #ffffff40; transform:scale(1.05); text-decoration: none !important; }
.main-button:active { transform:scale(1); transition:transform 0s }
.main-button.disabled { opacity:.5; }
.main-button img, .main-button i { width:auto; height: 125px; font-size: 125px; color: var(--space) !important; text-align: center; -webkit-user-drag: none; }
.main-button-text { width:100%; margin:20px 0; color:#333 !important; font-size:22px; font-weight: bold; line-height:1; text-align: center !important }
.callout-button { width: 33%; margin: 5px; background-color: white; display: flex; align-items: center; justify-content: space-evenly; flex-direction: row; cursor: pointer; border-radius: 10px; box-shadow:0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); transition:box-shadow .3s ease, transform .3s ease; box-sizing: border-box }
.callout-button:hover { box-shadow: 0 0 20px #ffffff40; transform:scale(1.05); text-decoration: none !important; }
.callout-button:active { transform:scale(1); transition:transform 0s }
.callout-button-disabled { width: 33%; margin: 5px; background-color: #808080; display: flex; align-items: center; justify-content: space-evenly; flex-direction: row; cursor: pointer; border-radius: 10px; box-sizing: border-box }
.callout-button-disabled { text-decoration: none !important; } 

@media screen and (max-width: 1100px) {
    .topic-content .main-button { width:40% !important }
}
@media screen and (max-width: 800px) {
    #mainButtons { flex-direction: column; } 
    .main-button { width:100% !important; }
    .topic-content .main-button { width:100% !important; }
    .main-button:nth-child(2) { margin:40px 0; }
}


.topic-content { text-align: left }
.topic-content #mainButtons { padding:0; flex-wrap:wrap }
.topic-content .main-button { margin:10px; width:20%; height:250px; /*flex-grow:0*/ }
.topic-content .main-button:nth-child(2) { margin:10px; }
.topic-content .main-button i { height: 80px; font-size: 80px; }
.topic-content .main-button img { margin:0; height:auto; max-height:80px; max-width:200px; box-shadow:none; border-radius:unset; }
.topic-content .main-button-text { font-size:22px; }

.topic-content h1,
.topic-content h2,
.topic-content h3,
.topic-content h4 { text-align:left; font-family:'europa', 'helvetica', sans-serif; text-transform:none }

.topic-content h1 { font-size:2.5em; padding:0; margin:60px 0 30px 0; }
.topic-content h2 { font-size:2.0em; padding:0; margin:60px 0 30px 0; font-weight: bold; }
.topic-content h3 { font-size:1.2em; padding-bottom:.7em; margin:60px 0 0 0; font-weight: bold; }
.topic-content h4 { font-size:1.1em; padding-bottom:.7em; margin:60px 0 0 0; font-weight: normal; }

.topic-content h2:before,
.topic-content [data-search]:before { content:''; display:block; margin-top:-150px; padding-top:150px; pointer-events:none; }
.h3 { margin: 50px 0 0 0; font-size: 1.3em;}


.topic-content .topic-outline { margin:0; text-align: left; }
.topic-content img + .topic-outline,
.topic-content video + .topic-outline,
.topic-content .video-embed + .topic-outline { margin-top:30px }
.topic-content > div { color:#ffffffcc; text-align: left; font-size: 1.3em }
.topic-content > section { color:#fff; text-align: left; font-size: 1.3em; padding:20px; border-radius:20px; background:#ffffff20 }
.topic-content > section ul { font-size:inherit }
.topic-content hr { border:0; border-top: 1px solid #ffffff80; margin-top:60px }
.topic-content img,
.topic-content video,
.topic-content .video-embed { width: 100%; max-width:75vh; margin-top:30px; border-radius:10px; box-shadow:0 0 10px #00000080 }
.support-text {font-size: .85em; color: #ddd; text-align: left;}

.topic-content .video-embed iframe { width:100vh; max-width:calc(100vw - 120px); height:calc(100vh * .5625) /* 1920 x 1080 */ }
.topic-content h1 + .video-embed { margin-left:0; width:max-content; height: auto; max-height:none; }
.topic-content iframe { border-radius:10px; }

.topic-content .text-icon { width: 100%; height: auto; display: flex; margin-bottom: 1em; background: #E7E7E9; color: black; padding: 1em; border-radius: .5em; box-sizing: border-box;}
.topic-content .text-icon img { width: 30px; height: 30px; margin: 0 10px 0 0; box-shadow: none; }


.topic-content .center-box { text-align: center; border-style: solid; border-width: 1px; border-radius:1em; margin:2em; padding:2em 0; background-color: #f3f3f3; }
.topic-content .center-box h3 { text-align:center; color:#000; margin:0 0 2em 0; line-height:1 }
#support-page-feedback { color:#fff; font-size:24px; padding:2em 0; display: flex; align-items: center; justify-content: center; align-content: center; }
#support-page-feedback button { width:85px }
#support-page-feedback button:first-of-type { margin:0 15px }

#timeAvailable { opacity:.5; font-size:16px; color:#333; margin:0 10px; text-align: center }



details[open] summary~*, .faq-item .answer {
    animation: sweep .5s ease;
}

@keyframes sweep {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.hero-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.content-item {
    width: 33%;
}

.content-image {
    width: 75%;
    height: auto;
}

.content-title {
    font-size: 1.3em;
    font-weight: 500;
}

.rich-text {
    font-size: .75em;
    font-weight: 300;
    padding-top: 10px;
}

.content-3-wide {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}


.box {
    margin-bottom: 1.3em;
    background: #fff;
    border-radius: 7px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .3);
}

.box .heading {
    background: #34afe3;
    border-radius: 7px 7px 0px 0px;
    padding: 10px;
    color: #fff;
    text-align: center;
    font-family: "Rubik";
}

.faqs {
    padding: 0px 20px 20px;
}

::-webkit-details-marker {
    float: right;
    margin-top: 3px;
}

details {
    background: #e1e1e1;
    padding: 10px 20px;
    border-radius: 7px;
    margin-top: 20px;
    font-family: 'europa', sans-serif;
    font-size: .8em;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    color: black;
}

details summary {
    outline: none;
}

.article-content {
    padding-left: 1em;
}

/* Outline Sidebar */
.outline {
    display: flex;
    float: left;
    background-color: #226590;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 1em;
    padding-right: 1em;
    border-right: 2px solid #1a4f70;
    position: fixed;
    top: 100px;
    left: 0;
    width: 200px;
    height: calc(100% - 50px);
}

.outline a:hover {
    text-decoration: none;
  }

.topic {
    padding: 10px;
    margin: 5px;
    color: black;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
}

.topic:hover,
.active {
    background-color: #1a4f70;
    border-radius: .3em;
    width: 100%;
    text-decoration: none;
    padding: 10px;
    margin: 5px;
}

@media only screen and (max-width: 600px) {
    .outline{
        display: none;
    }
    .sectioncontent{
        padding: 1em 1em 1em 1em !important;
    }
    body {
        margin-left: 0 !important;
    }
    #searchInput {
        width: 100%;
    }
    #searchList {
        width: 100%;
    }
    #mainButtons {
        flex-direction: column;
    }
    #mainButtons button {
        width: 80%;
        margin: 10px auto;
    }
    #supportHead {
        font-size: 2em;
    }
}