* { box-sizing: border-box; }
/*html { font-size: 0.875em; }*/
html,body { height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: column; text-align: center; font-family: "Noto Sans", Arial, Helvetica, sans-serif;
    color: hsl(208, 27%, 89%);
}

h3 { margin: 0 0 0.3rem 0; }
h1 { color: hsl(208, 27%, 89%);  }
a { color: hsl(188, 71%, 42%); }
ul { list-style: none; margin: 0; padding: 0; }

header, footer { background-color: #333334; background: radial-gradient(circle, rgba(51,51,52,1) 33%, rgba(30,30,31,1) 100%); display: flex; }
header { padding: 0.75em 0; }
header h1 { font-size: 2.75vmax; font-weight: 300; margin: 0 0 0.5em 0; }
header h3 { margin:0 0 1em 0; }
header .brand-logo img { max-width: 40vmax;  flex: 0 1 auto; }
header a { text-decoration: none; }
header a:hover { text-decoration: underline; }

.dropdown { visibility: hidden; opacity: 0; display: none; position: absolute; right: 0; 
    margin-top: 1rem; padding: 1.25em 1.75em; transition: all 0.5s ease; text-align: left; color: #333;
    background-color: #fff;  box-shadow: 0 0 5px 5px rgba(0,0,0,0.25); }
.dropdown h3 { font-weight: 300; font-size: 1.14em; }
.dropdown li { text-align: left; margin: 0.5em 0; }

.menu { position: relative; text-align: right; }
.menu button { background:none; border: none; color: hsl(208, 27%, 89%); cursor: pointer; font-size: 1em; padding:0; }
.menu button:hover { color: hsl(208, 27%, 79%); }
.menu button:active { padding:0; }
nav:focus-within .dropdown
{
  visibility: visible;
  opacity: 1;
  display: block;
}


main { height: 100%;  display: flex; flex-direction: column; align-items: center; }
main, header { font-size: 0.875em; }

.container { width: 95%; height: 100%; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }

#appList { margin: 1em 0; }
#appDetails { width: 100%; height: 100%; border: none; }

table { border-collapse: collapse; border-spacing: 0; width: 100%;}
th, td { text-align: left; padding: 0.6em; color: #333;  vertical-align: middle; }
th { background-color: hsl(188, 71%, 42%); color: #fff; }
tr.break > td { padding: 1em 0; }

tr.strong { font-weight: 600; }

td:has(strong.new) { position: relative; }
strong.new { position: absolute; left: -0.75rem; top:0.375rem; font-size: 0.6875rem; color: hsl(188, 71%, 42%); }

i.icon { display: inline-block; width: 1.5em; height: 1.5em; margin-right: 0.5em; vertical-align: middle;
    background-position: center center; background-repeat: no-repeat; background-size: contain; }
i.icon.webrtc { background-image: url('/assets/webrtc.svg'); }
i.icon.windows { background-image: url('/assets/microsoft-windows.svg'); }
i.icon.salesforce { background-image: url('/assets/salesforce.svg'); }
i.icon.freshdesk { background-image: url('/assets/freshdesk.svg'); }
i.icon.dynamics { background-image: url('/assets/dynamics.svg'); }
i.icon.zoho { background-image: url('/assets/zoho.png'); height: 18px; }
i.icon.clio { background-image: url('/assets/clio.svg'); }
i.icon.zendesk { background-image: url('/assets/zendesk.svg'); height: 26px; }

.valign { vertical-align: middle; }


footer .container { display: flex; font-size: 0.875em; padding: 0 0 1.5rem 0; }
footer .logo { width: calc(max(15vmax, 175px)); display:block; margin: 0 0 0.75rem 0; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .col { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 1rem 0 0 0; }
footer small { color: #aaa; }





@media (min-width: 576px) {
    
    .container { width: 80vw; }

    header > .container { display: flex; align-items: flex-end; flex-wrap: wrap; }
    header h1 { order: 3; margin: 0; font-size: calc(min(2.5vw, 1.35em)); flex: 1 0 auto; text-align: left; }
    
    header .brand-logo img { max-width: calc(min(30vw, 260px)); }
    
    .menu { flex: 1 1 215px; margin-bottom: 0.35em;  }
    .menu .dropdown { font-size: 0.875rem; }

    main, header { font-size: 1em; }
    
    #appList { margin: 3em 0; }

    i.icon { width: 2.5em; height: 1.75em; margin-right: 0.75em; }    
}


@media (min-width: 900px) {
    header .brand-logo { display:flex; align-items: flex-end; }
    header h1 { order: unset; margin: 0 0.5em 0.25em 1.5em; }
    header h1:before { content: ''; border: solid 1px #fff; border-width: 0 0 0 1px; margin: 0 1.2em 0 0; }
    
    footer .col { width: unset; align-items: flex-start;  text-align: left; min-width: 10em; margin: 0 0 0 2em; }
    footer .col:first-of-type { margin-right: auto; }
}