/* Downloads */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400&display=swap');

@font-face {
    font-family: 'Comfortaa-Medium';
    src:  url('/css/fonts/Comfortaa-Medium.woff2') format('woff2'); }

@font-face {
    font-family: 'Comfortaa-Regular';
    src:  url('/css/fonts/Comfortaa-Regular.woff2') format('woff2'); }

* { 
	margin: 0; 
	padding: 0; 
	border: 0; 
	list-style-type: none; }

html, body { 
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0; }

::-moz-selection {
	color: #fff;
	background: #04A1C4; }

::selection { 
	color: #fff;
	background: #04A1C4; }

* { 
    font-family: 'Open Sans', sans-serif; 
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); }

h1, h2, h3 { 
    font-family: 'Comfortaa-Regular', sans-serif; 
    display: block; }

h1 { padding: 10px 0; font-size: 2.5rem; }
h2 { padding: 10px 0 15px 0; font-size: 2.0rem; }
h3 { padding: 20px 0 15px 0 !important; font-size: 1.25rem !important; }

p { font-size: 1rem; margin: 0 0 10px 0; }

ul { padding: 15px 0 20px 40px; }
ul li { list-style: square; margin: 3px 0; }

header { text-align: center; padding: 35px 50px 35px 50px; height: 190px; box-sizing: border-box; }
header img { width: 300px; height: auto; margin: 0 0 0 0; }

.wrapper { 
    background: #1e656b;
    margin: 0 auto;
    border-radius: 30px 30px 0 0;
    display: flex;
    flex-direction: row;
    padding: 30px 0 0 0; 
    flex-wrap: wrap;
    width: calc(100% - 100px);
    max-width: 1500px;
    box-sizing: border-box;
    min-height: calc(100vh - 190px);
    color: #fff; }

.wrapper section { 
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    box-sizing: border-box;
    padding: 25px 50px; }

.wrapper section:first-of-type { 
    border-width: 0 1px 0 0; 
    border-style: solid;
    border-color: rgba(255,255,255,0.1); }

section a {
    color: #ccc;
    text-decoration: none; }

section a i { 
    margin: 0 0 0 8px; }

section a:hover {
    color: #fff;
    text-decoration: underline; }

div.appstorebuttons {
    background: #ccc; 
    color: #000;
    border-radius: 15px;
    text-align: center;
    width: 100%; 
    padding: 5px 10px 20px 10px; 
    margin: 15px 0 40px 0; }

div.appstorebuttons img {
    margin: 0px 10px; }

div.appstorebuttons img.apple { 
    height: 55px;
    margin: 7px;
    width: auto; }

div.appstorebuttons img.google { 
    height: 70px;
    width: auto; }

section.softphone .version { font-weight: bold; }
section.softphone .date { color: #ccc; }

section.softphone a i { size: 0.8 !important; }

div.systemrequirements p { 
    font-size: 0.8rem;
    color: #ccc; }

span.code {
    color: #ccc; 
    display: inline-block;
    border-color: rgba(255,255,255,0.3); 
    border-radius: 4px; 
    border-width: 1px;
    border-style: solid; 
    padding: 3px 4px; 
    font-family: 'IBM Plex Mono', monospace; }

span.code { background: rgba(255,255,255,0.1); }

div.popout { 
    background: #ffffff;
    position: absolute;
    left: 300px;
    top: 220px;
    display: none; 
    width: calc(100vw - 600px);
    height: calc(100vh - 220px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 30px 50px;
    border-radius: 30px 0 0 0;
    box-sizing: border-box;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.6);
}
div.popoutclose { 
    font-size: 2.5rem;
    position: absolute;
    right: 50px;
    top: 30px;
    color: #000;
    transition: transform 0.2s ease-in-out, color 0.2s;
}
div.popoutclose:hover { 
    color: #04A1C4;
    cursor: pointer;
    transform: rotate(90deg);
}
div.changelogcol { 
    width: 49%;
    vertical-align: top;
    box-sizing: border-box;
    display: inline-block;
}
@media screen and (max-width: 1480px)
{
    div.changelogcol { width: 100%; } 
}

nav {  width: 100%; }
nav ul { list-style: none; position: relative; display: flex; justify-content: center; }
nav ul li { display: inline-block; text-align: center; margin: 0 15px; }
nav ul li a { color: #1e656b; text-decoration: none; font-weight: 700; border-radius: 10px; background-color: #ececec; padding: 5px 15px; }