/* dynamically adjust text size based on screen width */

@media (min-width: 858px) {
    html { font-size: 18px; }
    nav.navbar { font-size:150%; }
}

@media (min-width: 780px) and (max-width: 858px) {
    html { font-size: 16px; }
    nav.navbar { font-size:150%; }
}

@media (min-width: 702px) and (max-width: 780px) {
    html { font-size: 15px; }
    nav.navbar { font-size:150%; }

}

@media (min-width: 624px) and (max-width: 702px) {
    html { font-size: 14px; }
    nav.navbar { font-size:150%; }

}

@media (min-width: 480px) and (max-width: 624px) {
    html { font-size: 13px; }
    nav.navbar { font-size:150%; }
}

@media (min-width: 320px) and (max-width: 480px) {
    html { font-size: 13px; }
    nav.navbar { font-size:100%; }
}

@media (min-width: 250px) and (max-width: 320px) {
    html { font-size: 13px; }
    nav.navbar { font-size:80%; }
}

@media (max-width: 250px) {
    html { font-size: 13px; }
    nav.navbar { font-size:60%; }
}


html {
    font-family:'Nunito', sans-serif;
    scroll-behavior: smooth; /* Cause scrolling to links to be smooth. */
}

.contact_detail {
    text-align:center;
}
.contact_data {
    font-style:italic;
}

table.centered {  /* Used to center table on page. */
    margin-left:auto;
    margin-right:auto;
}

/* used for heading at top of content */
.text_heading {
    font-family: 'Roboto', sans-serif; /* Override normal Nunito font. */
    text-align:center;
    font-weight:bold;
    font-size: 180%;
    margin-top: 50px;
}

.text_subheading {
    text-align:center;
    font-weight:bold;
    font-size: 125%;
    margin-top: 30px;
}

.text_subheading_nomargin {
    text-align:center;
    font-weight:bold;
    font-size: 125%;
    margin-top: 0;
}

.text_subsubheading {
    text-align:center;
    font-style:italic;
    font-weight:bold;
    font-size: 110%;
    margin-top: 20px;
}

/* Used for basic paragraphs of narrative text content. */
.text_body {
    margin: 0 auto;
    max-width: 80%;
    text-align: justify;
    text-justify: inter-word;
}

.text_body_spaced {
    margin: 0 auto;
    max-width: 80%;
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 10pt;
}

/* Used for short content that would not fill a full line. */
.text_center {
    margin: 0 auto;
    max-width: 80%;
    text-align: center;
}

div.key_box {
    margin: 0 auto 15px auto;
    border: solid thin black;
    max-width: 60%;
    padding: 15px;
    background: #f0f0f0;
}

p.key_label {
    margin: 0 auto;
    text-align:center;
    font-size:100%;
}

.product_key {
    font-family: 'Courier New', sans-serif;
    margin: 0 auto;
    /*max-width: 60%;*/
    font-size: 80%;
    text-align:center;
    word-wrap: break-word;
}

.copy_button {
    display: block;
    margin:15px auto 0 auto;
}

.error_message {
    text-align:center;
    color: red;
}

.username {
    color: blue;
}

.form_item {

}

.color_new {
    color: #3070ff;
}
.color_old {
    color: #ff0000;
}

/* Special styling for logos */


.logo { /* used for bline logo on main page*/
    display: block;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
    width: 55%;
    max-width: 350px;
}

.small_logo {  /* used for small logos on pages other than main page. */
    display: block;
    margin: 5% auto;
    width: 30%;
    max-width: 250px;
}

.small_logo_smallbottommargin {  /* used for small logos on pages other than main page. */
    display: block;
    margin: 5% auto 1% auto;
    width: 30%;
    max-width: 250px;
}

.tiny_logo {  /* used for small logos on pages other than main page. */
    display: block;
    margin-top: 5%;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    width: 10%;
    max-width: 150px;
}

.compact_logo {  /* used for small logos on pages other than main page. */
    display: block;
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 35%;
    max-width: 300px;
}

/* used for copyright notice below logo on main page */
.copyright {
    font-size:80%;
    font-style: italic;
    margin-bottom:50px;
    text-align:center;
}



/* Special styling for BLine_Desktop page. */

/*.desktop_video {*/
/*    display: block;*/
/*    margin-top: 0%;*/
/*    margin-bottom: 0%;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/

.desktop_video {
    overflow:hidden;  /* clip outside box */
    padding-bottom:56.25%;  /* This causes a 16:9 aspect ratio (bottom padding given as a percent of width) */
    position:relative;  /* make element positioned, so the absolute on iframe is relative to this. */
    height:0;
}
.desktop_video iframe {
    left:10%;
    top:0;
    height:100%;
    width:80%;
    position:absolute;
}

.desktop_bottom_image { /* used for screenshot of desktop fixed at bottom of page. */
    display: block;
    margin-top: 5%;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    max-width: 781px;
}

/* Special styling for screenshots */

.image_group { /* used for set of images displayed horizontally */
    margin:auto;
    margin-top: 50px;
    width:100%;
    /* max-width: 1000px; */
    text-align: center;  /* causes centering of the individual (inline) screenshots */
}

.caption_wrapper { /* used for wrapping individual screenshot with a border */
    width: 33%;
    min-width:470px;
    max-width: 470px;
    display: inline-block;
    text-align: center;
    font-style: italic;
    margin-bottom: 20px;
}

.screenshot_border {  /* this is a div that contains an image with a grey, rounded border placed around it. */
    padding: 15px;
    background: black;
    border-width:15px;
    border-radius:15px;
    margin-top: 5px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline-block;
}

.screenshot {  /* used for the image/video itself */
    width:100%; /* limit the size to the size of the containing element */
}

/* formatting for a horizontal line -- appears under navigation bar */
hr {
    display: block;
    /*margin-before: 0.5em;*/
    /*margin-after: 0.5em;*/
    /*margin-start: auto;*/
    /*margin-end: auto;*/
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

/* formatting in the navigation bar -- which is set-up as a flex box*/

/* div that contains the navigation bar */
div.navcontainer {
    top:0;  /* Position the container at the top of the window, and make it stick there */
    position: sticky;
    background: white;
    z-index: 100; /* cause nav bar to float on top of other things. */
}

nav.navbar {
    display: flex;
    justify-content: space-around;
}

a {
    transition: all .2s ease-in; /* Cause gradual color change on all links */
}

/* Links on navbar */

a:link.navbar_item, a:visited.navbar_item {
    color: blue;
}

a:hover.navbar_item {
    color: deepskyblue;
}

a:link.navbar_account, a:visited.navbar_account {
    color: green;
}

a:hover.navbar_account {
    color: lime;
}

a:link.navbar_logout, a:visited.navbar_logout {
    color: darkred;
}

a:hover.navbar_logout {
    color: red;
}

/* other links */

/* download links */
a:link.download, a:visited.download {
    color: blue;
}

a:hover.download {
    color: deepskyblue;
}

/* controls on the account page */
a:link.accountcontrol, a:visited.accountcontrol {
    color: darkgreen;
}

a:hover.accountcontrol {
    color: lime;
}

td.accounttableitem {
    text-align:center;
    width:25%;
}