:root {
	--bs-blue: #0d6efd;
	--bs-indigo: #6610f2;
	--bs-purple: #6f42c1;
	--bs-pink: #d63384;
	--bs-red: #dc3545;
	--bs-orange: #fd7e14;
	--bs-yellow: #ffc107;
	--bs-green: #198754;
	--bs-teal: #20c997;
	--bs-cyan: #0dcaf0;
	--bs-white: #fff;
	--bs-gray: #6c757d;
	--bs-gray-dark: #343a40;
	--bs-gray-100: #f8f9fa;
	--bs-gray-200: #e9ecef;
	--bs-gray-300: #dee2e6;
	--bs-gray-400: #ced4da;
	--bs-gray-500: #adb5bd;
	--bs-gray-600: #6c757d;
	--bs-gray-700: #495057;
	--bs-gray-800: #343a40;
	--bs-gray-900: #212529;
	--bs-primary: #0d6efd;
	--bs-secondary: #6c757d;
	--bs-success: #198754;
	--bs-info: #0dcaf0;
	--bs-warning: #ffc107;
	--bs-danger: #dc3545;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;
	--bs-primary-rgb: 13,110,253;
	--bs-secondary-rgb: 108,117,125;
	--bs-success-rgb: 25,135,84;
	--bs-info-rgb: 13,202,240;
	--bs-warning-rgb: 255,193,7;
	--bs-danger-rgb: 220,53,69;
	--bs-light-rgb: 248,249,250;
	--bs-dark-rgb: 33,37,41;
	--bs-white-rgb: 255,255,255;
	--bs-black-rgb: 0,0,0;
	/*--bs-body-color-rgb: 33,37,41;*/
	--bs-body-color-rgb: 51,51,51;
	--bs-body-bg-rgb: 255,255,255;
	--bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-size: 1rem;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.5;
	--bs-body-color: #212529;
	--bs-body-bg: #fff;
}

body {
	background-color: #F5F5F6;
}

.h1, h1 {
	font-size: calc(1.375rem + 1.5vw);
}

.h2, h2 {
	font-size: calc(1.325rem + .9vw);
}

.h3, h3 {
	font-size: 1.75rem;
}

.h4, h4 {
	font-size: 1.55rem;
}

.h5, h5 {
	font-size: 1.35rem;
}

.h6, h6 {
	font-size: 1rem;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 400;
	line-height: 1.2;
}

#page_content {
	box-sizing: border-box;
    min-height: 92vh;

    border-left: 2px solid #ECEBF1;
    border-right: 2px solid #ECEBF1;

    padding: 0em 3.5em 3.3em 3.5em;

    background-color: #ffffff;

    margin: auto;
}

/* Header */

.body_index #web_header {
    background-color: #ffffff;
}

#web_header {
	box-sizing: border-box;
	display: flex;

    padding: 1.2em 1.9em;
    margin: auto;
}

#web_logo {
    display: flex;

    padding-top: 0.2em;

    min-width: 12em;
}

.web_links {
    display: inline-block;
    flex: 1;

    padding-top: 0.4em;

    text-align: center;
}

.web_links a {
	padding: 0.2em 1em;
	color: #121212;

	text-decoration: none;
}

.web_links a:hover {
	background-color: #eee;
}

.body_index a.link_index {
    background-color: #eee;
}

.body_how a.link_how {
    background-color: #eee;
}

.body_quickstart a.link_quickstart {
    background-color: #eee;
}

.body_pricing a.link_pricing {
    background-color: #eee;
}

.header_link {
    padding: 0.2em 1em;
}

.user_links {
    display: inline-block;
}

.logo_main {
    float: left;
    max-width: 9.5em;
}

.img_projects_button {
    padding: 5px 1px;
}

.header_centered {
    text-align: center;
}

/* Footer */

.footer {
    display: flex;
    box-sizing: border-box;

    border-left: 2px solid #ECEBF1;
    border-right: 2px solid #ECEBF1;
    border-bottom: 2px solid #ECEBF1;

    padding: 2em 1.5em;

    background-color: #ececec;

    margin: auto;
    text-align: center;
}

.footer_fill {
    flex: 1;
}

.footer ul {
    display: block;

    text-align: left;
    padding-right: 2em;

    list-style-type: none;
    margin: 0;
    padding: 0;
}

.footer ul li {
    display: block;
}

.footer a {
    color: #444;
    display: inline-block;

    padding: 2px 1em;

    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer a:visited {
    color: #444;
}

/* Main */

.frame_intro {
	box-sizing: border-box;

    margin: auto;

    padding: 38px 0em;
    text-align: center;
    font-weight: bold;

    background-image: url("../img_web/intro1.jpg");

    color: #efefef;
    font-family: Arial;
    font-size: 2.8em;
}

/* Infoboxes */

.infobox1 {
    display: flex;

    padding: 1em 2em 1em 2em;
}

.infobox2 {
    display: flex;

    flex-direction: column;
}

.infobox1_left {
    flex: 1;

    padding-right: 1em;
}

.infobox1_right {
    flex: 1;
}

.infobox2_row {
    text-align: center;
}

.info_bullet {
    display: flex;

    flex-direction: row;

    padding: 0.6em 0em;
}

.info_bullet_left img {
    width: 2.4em;

    padding-right: 0.4em;
}

.info_title {
    font-size: 2.5em;
}

.infobox2_title {
    font-size: 2.5em;

    text-align: center;
}

.info_subtitle {
    font-size: 1.5em;

    color: #999;
}

.info_subtitle_strong {
    padding-top: 0.3em;

    font-size: 1.4em;
}

.info_bullet_title {
    font-size: 1.3em;
}

.info_bullets ul li {
    padding: 0.3em 0em;
}

.info_see_more {
    display: flex;
}

.info_see_more_content {
    width: 25%;

    padding-right: 2em;
}

.info_see_more_title {
    padding: 0.3em 0em;
}

.web_links_default {
	padding: 1.3em 0em 1em 0em;
}

.web_links_big {
    text-align: center;

    padding: 1.8em 0em 1em 0em;
}

/* Basic Layouts */

.infobox_centered {
    margin: auto;

    width: 50%;
}

.infobox_centered .info_subtitle {
    font-size: 1.3em;
}

.infobox_centered .info_desc {
    font-size: 1.2em;
}

/* Projects */

#recent_projects_info {
    padding-top: 0.4em;
}

#recent_projects_info div.pane_project {
}

#recent_projects_info .pane_project_group {
    padding-bottom: 0.1em;
}

#my_projects_info {
    clear: both;
}

#recent_projects_content {
    text-align: right;
}

#recent_projects_options {
    text-align: right;
    padding-bottom: 0.5em;
}

#recent_projects_options button {
    padding: 0.5em 1em;
}

#my_projects_info {
    text-align: right;
}

.my_projects_header {
    padding-top: 0.3em;
}

.projects_footer {
    margin: auto;
    width: 25em;

    padding: 0.2em 0 2.7em 0;
}

.content_empty_account {
    text-align: left;
}

.content_empty_account_decoration {
    padding-right: 0.8em;
}

/* Project */

.pane_project_group {
    display: flex;
    width: 100%;

    font-size: 1.4em;

    padding-bottom: 0.8em;
    padding-right: 0.8em;

    text-align: initial;
}

.pane_project_group_label {
    flex-grow: 1;
}

.pane_project_group_content {
    flex-grow: 2;

    max-width: 70%;
}

.pane_project {
    display: flex;

    gap: 6px;

    margin-bottom: 0.4em;

    font-size: 0.89em;
}

.pane_project_is_public_readable,
.pane_project_data_shared
{
    display: inline-block;

    padding-right: 0.5em;
    padding-top: 0.4em;
}

.pane_project_current .pane_project_border {
    background-color: #4F90BC;
}

.pane_project_current .project_title {
    color: #fff !important;
}

.pane_project_current .pane_project_desc {
    color: #fff;
}

.pane_project_border {
    flex-grow: 1;

    padding: 3px 5px;

    cursor: pointer;

    background-color: #ddd;
    border: 1px solid #666;
    border-radius: 4px;

    min-width: 10em;
}

.pane_project_group_controls {
}

.pane_project_content {
    display: flex;
}

.pane_project_border:hover {
    opacity: 0.9;
}

.pane_project_fill {
    flex: 1;
}

.pane_project_img {
    margin-right: 0.2em;
    margin-top: 4;

    float: right;
}

.pane_project_img:hover {
    opacity: 0.6;
}

.pane_project_text {
    padding: 3px 8px;

    display: inline;
}

.pane_project_text:hover {
    opacity: 0.6;
}

.pane_project_desc {
	line-height: 0.9em;
	font-size: 0.72em;

	padding: 3px 8px 4px 8px;
}

.project_title {
    text-decoration: none;
}

.project_key {
    font-family: monospace;
}

.pane_project_key {
    font-family: monospace;
}

#user_wrapper {
    background-color: f2f2f2;

    padding: 0.4em 0.5em;
}

#project_actions {
    padding: 0.3em 0 2.5em 0;

    text-align: right;
}

#user_block {
    display: flex;
}

.user_block_start {
    display: inline-block;

    padding: 0.6em;

    border-right: 1px solid #666;
}

.user_block_content {
    display: inline-block;

    padding: 0.6em;
}

.user_block_login {
    padding: 0.6em 1.7em 0.6em 1.1em;
}

.user_login_username {
    min-height: 2em;
    min-width: 13em;
}

.user_login_password {
    min-height: 2em;
    min-width: 13em;
}

.user_block_login button,
 .user_block_register button {
    padding: 0.5em 1.7em;
}

.user_block_login_submit {
    text-align: right;

    padding-top: 0.4em;
}

/* Register */

.pricing_infotext {
    padding: 0.9em 0;
}

.user_block_register {
    display: inline-block;

    padding: 0.6em 0;
}

.user_register_username {
    min-height: 2em;
    min-width: 13em;
}

.user_register_password {
    min-height: 2em;
    min-width: 13em;
}

.user_actions {
    padding: 0.4em 0;
}

#user_logged_in {
    display: inline-block;

    font-weight: bold;
}

#user_logged_in_second {
    color: #666;
}

/* Known Logins */

#user_extra_wrapper {
    margin-top: 1.1em;
    margin-bottom: 1.8em;
}

#known_logins_wrapper {
    font-size: 0.9em;

    padding: 0.2em 0.2em;
}

.known_login_title {
    display: inline-block;

    padding: 0.2em 0.2em;
    min-width: 7em;

    font-size: 1.9em;
}

.known_login_info {
    display: flex;

    padding: 0.2em 0.2em;
}

.known_login_info_main {
}

.known_login_info_title {
    background-color: #f2f2f2;
    border: 1px solid #ddd;

    min-width: 11vw;

    cursor: pointer;
}

.known_login_info_title:hover {
    opacity: 0.8;
}

.known_login_info_options_wrapper {
    padding: 0 2.3em 0 1.6em;
}

.known_login_info_options {
    padding: 0.5em 0.5em;

	background-color: #f2f2f2;
	border: 1px solid #ddd;
}

.known_login_info_options:hover {
    opacity: 0.8;

    cursor: pointer;
}

.known_login_info_content {
    display: flex;

    flex-direction: column;
}

.known_login_wrapper {
    display: flex;

    padding: 3px 0;
}

.known_login_projects {
    display: inline-block;
}

.known_login_app_title {
    min-width: 7em;

    font-size: 1.2em;
}

.known_login_link {
    display: inline-block;

    margin-left: 0.4em;
    margin-right: 0.4em;
}

/* Quickstart */

.example_application_1,
 .example_application_2 {
    width: 40%;

    vertical-align: top;
    display: inline-block;
}

.example_application_1 {
    margin-right: 1.6em;
}

.layout_1,
 .layout_2 {
    width: 40%;

    vertical-align: top;
    display: inline-block;
}

.layout_1 {
    margin-right: 1.6em;
}

.docs_listing {
    padding-left: 0px;
}

.docs_listing li {
    display: block;
    background-color: #efefef;

    min-width: 12em;

    padding: 0.4em 1em;
    margin-bottom: 0.6em;
}

.docs_listing_entry {
    padding: 0.5em 1.6em 0.5em 0.7em;
    margin-bottom: 0.4em;
    background-color: #EEEEEE;
}

.docs_listing_link {
	display: inline-block;
	min-width: 8em;
	padding: 0.2em 1em;
}

.docs_listing_link:hover {
	background-color: #ccc;
}

.docs_listing_desc {
	display: inline-block;
	padding: 0 1em 0 0.3em;
}

/* Pricing */

.pricing_introduction_container {
    width: 45%;
    margin: auto;

    padding: 0.8em 0;
}

.pricing_container {
    padding-top: 1.5em;

    display: flex;
}

.pricing_fill {
    flex: 0.5;
}

.pricing_wrapper {
    display: inline-block;

    vertical-align: top;

    margin-right: 1.5em;
}

.pricing {
    padding: 1em 1em;

    text-align: center;

    border: 1px solid black;

    border-radius: 5px;
}

.pricing_wrapper_free {
    width: 15em;
}

.pricing_wrapper_paid {
    width: 15em;

    background-color: #BCE3FF;
}

.pricing_visitor {
    background-color: #fff;
}

.pricing_free {
    background-color: #efefef;
}

.pricing_title {
    font-size: 2em;

    display: inline-block;
    padding-bottom: 0.6em;
}

.pricing_wrapper_free .pricing_title
{
    font-size: 1.7em;
}

.pricing_info {
    padding-bottom: 0.6em;
}

.pricing_plus {
    display: table;

    padding: 0.2em 0em;

    text-align: left;
}

.pricing_plus img {
    display: table-cell;

    vertical-align: top;

    padding-top: 0.1em;
    padding-right: 0.4em;
}

.pricing_plus_text {
    display: table-cell;

    vertical-align: top;
}

.link_goto_register {
    padding-top: 0.5em;
}

.order_contact_us {
    padding: 1em 0 1em 0;
}

.form_place_order {
    background-color: #efefef;

    padding: 5 0.8em;
    margin: 0 2em;
}

/* Executions */

.execution_pane {
    padding: 8 8;

    border: 1px dashed #666;
    background-color: #ddd;
}

.execution_pane_start {
    display: inline-block;
    padding-right: 8px;
}

.execution_pane_content {
    display: inline-block;
}

.execution_pane_title {
    font-weight: bold;
}

/* Misc */

.content_narrow_30 {
    max-width: 30em;
    margin: auto;
}

.box_guide {
    max-width: 30em;

    border: 1px solid #555;

    padding: 0.8em 1em;
    margin: 2em auto 1.4em auto;

    background-color: #efe;
}

.code_block {
    display: block;
}

.screenshot {
	vertical-align: top;

	margin-top: 15px;
	margin-bottom: 15px;
}

.screenshot img {
	padding: 5px 5px;
}

.screenshot_small img {
    width: 80%;
}

.img_with_border {
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.screenshot_border {
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.placeholder {
	border: 2px dotted #dedede;

	padding: 4px 12px;
	font-style: italic;

	vertical-align: top;

	background-image: url(../img_web/placeholder.png);
}

.user_hint {
    display: inline-block;
	border: 2px dotted #dedede;

	padding: 4px 12px;
	font-style: italic;

	margin-top: 0.6em;
	margin-bottom: 0.6em;

	background-color: #FFDA77;
}

.important_message {
    border: 1px dashed #999;
    background-color: #efefef;

    padding: 0.2em 0.6em;
    margin: 0.2em 0.2em;
}

.ph_big {
	display: inline-block;

	min-width: 11em;
	min-height: 6em;
}

.ph_demo {
	display: inline-block;

	font-weight: 500;

	width: 9em;
	height: 8em;

	margin-top: 10px;
	margin-right: 10px;
}

.ph_info {
	font-weight: initial;
	font-size: 0.8em;
}

/* Order */

.order_form tr td {
    padding: 3 3;
}

.order_form tr th {
    text-align: left;

    padding-right: 1em;
}

.order_form tr td input {
    padding: 4 6;
}

.current_subdomain {
    font-weight: bold;
}

/* Contact */

.contact_form tr td {
    vertical-align: top;

    padding-right: 0.6em;
}

.contact_form tr td input {
    min-width: 15em;

    padding: 5 8;
}

/** Captcha */

.captcha_button {
	min-width: 60px;

	padding: 0.4em 2em;
	margin-bottom: 6;

	border: 0;

	cursor: pointer;
}

.captcha_button:hover {
	background-color: #FFE97F !important;
}

.captcha_need_selected:not(.captcha_selected) {
	background-color: #4088B8;
}

.captcha_do_not_select.captcha_selected {
	background-color: #B76040;
}

.captcha_need_selected.captcha_selected {
	background-color: #75B740;
}