@charset "utf-8";



@font-face {

    font-family: 'Inter';

    src: url('../fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');

    font-weight: 100 900;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'Inter';

    src: url('../fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');

    font-weight: 100 900;

    font-style: italic;

    font-display: swap;

}



* {

    margin: 0px;

    padding: 0px;

    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;

    font-weight: 400;

    box-sizing: border-box;

}



h1, h2, h3, h4 {

    font-weight: 600;

}



strong {

    font-weight: 600;

}



html {

    height: 100%;

    scroll-behavior: smooth;

}



#body {

    color: #333333;

    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, #f4f3f1 20%, #f4f3f1 100%);

    min-height: 100vh;

}



#header {

    background-color: rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    height: 75px;

    position: fixed;

    width: 100%;

    z-index: 1000;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);

}



#header-img img {

    margin-top: 15px;

    margin-right: 10px;

    margin-left: 5px;

    float: right;

    cursor: pointer;

    width: 40px;

}



#logo a {

    height: 17px;

    width: 227px;

    background-size: 227px;

    margin-top: 29px;

    margin-left: 10px;

    position: absolute;

    background-image: url(../img/logo.png?v=1.0);

    background-repeat: no-repeat;

}



#logo span {

    display: none;

}



#logo img {

    display: none;

}



#search {

    display: none;

}



#search-under {

    background-color: #ffffff;

    width: 100%;

    height: 86px;

    border-bottom: 1px solid #e6e6e6;

    border-top: 1px solid #e6e6e6;

    float: left;

    display: none;

    margin-top: 20px;

    padding-top: 3px;

    z-index: 1001;

}



#searchbox {

    padding: 0px 10px 0px 10px;

    color: #333333;

}



#searchbox label, #login label {

    font-weight: normal;

    cursor: pointer;

}



#searchbox .search, #login {

    display: table;

}



#searchbox .search-field, #searchbox .search-control, #login .login-field, #login .login-control  {

    display: table-cell;

    width: 100%;

}



#searchbox .search-input {

    width: 100%;

}



#searchbox input[type=text], #searchbox input[type=password] {

    border-radius: 12px;

    float: left;

    width: 100%;

    height: 40px;

    font-size: 16px;

    background-color: #f4f3f1;

    border: 1px solid #e6e6e6;

    padding: 0px 0px 0px 10px;

}



#login {

    width: 100%;

}



#login input[type=text] {

    width: 100%;

}



#login input[type=submit] {

    width: 110px;

    margin-left: 10px;

}



#searchbox input[type=submit] {

    width: 100px;

    height: 40px;

    background: #ff7442;

    border-radius: 12px;

    cursor: pointer;

    float: right;

    margin-left: 10px;

    border: 1px solid transparent;

    color: #ffffff;

    font-weight: normal;

    vertical-align: middle;

}



#searchbox input[type=submit]:hover {

    background: #FF7E51;

}



#menu-fixed {

    display: none;

    border-top: 1px solid #e6e6e6;

    margin-top: 20px;

    margin-right: 55px;

    width: 100%;

    z-index: 1000;

    float: left;

}



#main-menu {

    background-color: #ffffff;

}



#main-menu nav.menu a {

    display: block;

    padding: 0 15px;

    color: #333333;

    line-height: 64px;

    text-decoration: none;

    border-bottom: 1px solid #e6e6e6;

    font-size: 18px;

    font-weight: 500;

}



#main-menu nav.menu a:hover, .active:hover {

    background-color: #f4f3f1;

}



.active {

    background-color: #f4f3f1;

}



#main-menu nav.menu ul li a span {

    font-weight: inherit;

}



#section {

    top: 75px;

    position: relative;

    background-color: #ffffff;

}



#section ul {

    padding-left: 24px;

}



#section-under {

    font-size: 16px;

    Line-height: 1.5;

    padding-bottom: 25px;

}



#section-under ul {

    Line-height: 2;

}



#section-under p {

    Line-height: 1.8;

}



#footer {

    top: 75px;

    position: relative;

    padding-bottom: 10px;

    Line-height: 2;

    color: #333333;

    background-color: #f4f3f1;

    border-top: 1px solid #e6e6e6;

}



#footer-under {

    padding: 0px 10px 10px 0px;

}



#footer a {

    color: #333333;

}



#footer h4 {

    padding-bottom: 10px;

}



#footer h4 a {

    color: #FF7442;

    font-weight: 600;

}



#footer h4 a:hover {

    text-decoration: none;

    color: #FF7E51;

}



#copyright {

    padding-top: 60px;

    padding-bottom: 20px;

    text-align: center;
    color: #8a8a8a;
}



#progress-container {

    display: none;

    width: 100%;

    height: 6px;

    background: #e6e6e6;

    margin-top: 75px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

}



#progress-bar {

    height: 6px;

    background: #ff7442;

    width: 0%;

}



.row::after {

    content: "";

    clear: both;

    display: block;

}



[class*="col-"] {

    width: 100%;

    padding-top: 20px;

    padding-left: 10px;

    padding-right: 10px;

}



input[type=text], input[type=email], input[type=number], input[type=password] {

    width: 100%;

    padding: 10px 10px;

    margin: 8px 0;

    display: inline-block;

    outline: none;

    border: 1px solid #d4d4d4;

    border-radius: 12px;

    font-size: 14px;

}



input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus {

    border: 1px solid #4a4b4b;

}



select {

    height: 38px;

    width: 100%;

    margin: 8px 0;

    display: inline-block;

    outline: none;

    border: 1px solid #d4d4d4;

    border-radius: 12px;

    font-size: 16px;

    background-color: #ffffff;

    padding-left: 5px;

}



select:focus {

    border: 1px solid #4a4b4b;

}



input[type=submit] {

    width: 100%;

    padding: 10px 10px;

    margin: 8px 0;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    font-size: 16px;

    background-image: url(../img/pixel.png?v=1);

    background-repeat: no-repeat;

    background-size: 1px;

    background: #ff7442;

    color: #ffffff;

    font-weight: 500;

}



input[type=submit]:hover {

    background: #FF7E51;

}



textarea {

    height: 100px;

    width: 100%;

    padding: 10px 10px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid #d4d4d4;

    border-radius: 12px;

    outline: none;

    font-size: 14px;

}



textarea:focus {

    border: 1px solid #4a4b4b;

}



.g-recaptcha {

    margin-bottom: 4px;

}



label {

    font-weight: 600;

}



#logout {

    text-align: right;

    margin-bottom: 10px;

    z-index: 100000;

}



#logout a {

    color: #333333;

    font-weight: 600;

}



#logout a:hover {

    text-decoration: none;

}



#logout span {

    background-color: #FF7442;

    padding: 10px 32px 10px 32px;

    border-radius: 8px;

}



#logout span:hover {

    background-color: #FF8C5E;

}



#form-order {

    border-radius: 12px;

    background-color: #f4f3f1;

    border: 1px solid #dadada;

    padding: 20px;

}



#form-order td {

    border: 0px;

    padding: 8px 10px 0px 0px;

    background-color: #f4f3f1;

    vertical-align: top;

}



#form-order [type=submit] {

    color: #ffffff;

}



#module {

    font-size: 14px;

}



#module-overflow {

    font-size: 14px;

    max-height: 999px;

    overflow-y: scroll;

}



#module-logo {

    width: 100%;

}



#module-logo td {

    border: 0px;

    padding: 10px;

    text-align: center;

}



#module-logo tr {

    background-color: transparent;

}



#module-logo tr:nth-child(even) {

    background-color: transparent;

}



#module-logo img {

    width: 100%;

    margin-top: 8px;

    padding: 10px;

}



.module-logo {

    border: 1px solid #e6e6e6;

    border-radius: 16px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

    position: relative;

    background-color: #ffffff;

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.module-logo img {

    width: 100%;

    height: auto;

    transition: transform 0.35s ease;

}



.module-logo:hover {

    transform: translateY(-6px);

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}



.module-logo:hover img {

    transform: scale(1.05);

}



.image {

    display: block;

    width: 100%;

    height: auto;

}



.text {

    font-size: 18px;

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    text-align: center;

    font-weight: 500;

}



.input-error {

    margin-bottom: 10px;

    font-size: 16px;

    color: red;

}



.input-error-small {

    font-size: 14px;

    color: red;

    margin-bottom: 0x;

}



#input-error, #input-error-billing-information {

    font-size: 14px;

    color: red;

}



.alert {

    padding: 10px 12px;

    border: 1px solid transparent;

    border-radius: 12px;

    font-weight: 400;

    font-size: 15px;

}



.alert a {text-decoration: none;}

.alert-success {color:#3a6a22; background-color:#eef6e7; border-color:#c3e0ab;}

.alert-success a {color:#3a6a22;}

.alert-success .alert-link {color:#2b542c;}

.alert-info {color:#57534d; background-color:#faf6f3; border-color:#ece6e0;}

.alert-info a {color:#57534d;}

.alert-info .alert-link {color:#3f3b36;}

.alert-warning {color:#8a5200; background-color:#fff4e5; border-color:#ffd39b;}

.alert-warning a {color:#8a5200;}

.alert-warning .alert-link {color:#66512c;}

.alert-danger {color:#9b2c31; background-color:#fdecee; border-color:#f3b5ba;}

.alert-danger a {color:#9b2c31;}

.alert-danger .alert-link {color:#843534;}



#highlight, #price-highlight {

    padding: 30px;

    background-color: #f4f3f1;

    border: 1px solid #e6e6e6;

    border-radius: 20px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

    text-align: center;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



#highlight:hover, #price-highlight:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

}



#highlight h2 {

    font-size: 50px;

}



#price-highlight h2 {

    font-size: 30px;

}



#highlight-link a {

    color: #333333;

}



#highlight-link a:hover {

    text-decoration: none;

}



a {

    color: #1E88E5;

    text-decoration: none;

    transition: color 0.2s ease, text-decoration-color 0.2s ease;

}



a:hover {

    color: #2594EB;

    text-decoration: underline;

    text-underline-offset: 3px;

}



.overflow {

    overflow-x:auto;

}



.button {

    width: 100%;

    border: 1px solid transparent;

    background: #ff7442;

    color: #ffffff;

    padding: 10px 10px;

    margin: 8px 0;

    border-radius: 12px;

    cursor: pointer;

    height: 50px;

    font-weight: 500;

    font-size: 18px;

    transition: all 0.2s ease;

}



.button-homepage {

    height: 100%;

    min-height: 50px;

    border-radius: 20px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

    margin-bottom: 10px;

    font-weight: 600;

}



.button:hover {

    transform: translateY(-2px);

    background: #FF7E51;

}



.button-product-key {

    height: 40px;

    width: 160px;

    font-size: 16px;

}



.button-meeting {

    background: #1E88E5;

    border: 1px solid transparent;

    color: #ffffff;

    font-weight: 500;

    padding: 10px 10px;

    width: 230px;

    border-radius: 12px;

    cursor: pointer;

    font-size: 16px;

    transition: all 0.2s ease;

}





.button-meeting:hover {

    background: #2594EB;

    transform: translateY(-2px);

}



#more-module {

    border: 1px solid #FF7442;

    background-color: #FF7442;

    border-radius: 8px;

    width: 100%;

    font-size: 16px;

    padding: 6px;

    text-align: center;

    font-weight: 600;

    cursor: pointer;

}



#more-module:hover {

    background-color: #FF8C5E;

    border: 1px solid #FF8C5E;

}



#remove-module {

    padding-left: 4px;

    padding-right: 4px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;

    font-size: 12px;

    float: right;

    color: #ed2939;

    margin-top: 2px;

}



#unite-module a:hover {

    text-decoration: none;

}



#unite-module-a {

    border-radius: 8px;

    background-color: #f4f3f1;

    padding: 4px;

    color: #333333;

    font-weight: 600;

    font-size: 14px;

}



#unite-module-a:hover {

    background-color: #d4d4d4;

}



#product-key-billing-information {

    font-size: 14px;

}



#edit-billing-information {

    font-size: 14px;

    margin-left: 10px;

    overflow-x: auto;

}



#regenerate-product-key a:hover {

    text-decoration: underline solid 1px;

}



#regenerate-product-key span {

    font-size: 14px;

    font-weight: normal;

    margin-left: 2px;

}



#remove-module:hover {

    text-decoration: underline;

}



h1 {

    font-size: 30px;

}



h2 {

    font-size: 1.25em;

}



.heading {

    padding-top: 10px;

    padding-bottom: 10px;

}



ul.pagination {

    margin-left: -24px;

}



ul.pagination li {

    display: inline-block;

    text-align: center;

}



ul.pagination li a {

    color: #333333;

    padding: 12px 16px;

    border-radius: 8px;

    text-decoration: none;

}



ul.pagination li a:hover {

    padding: 12px 16px;

    border-radius: 8px;

    background: #f4f3f1;

}



ul.pagination li:hover {

    background: #f4f3f1;

}



ul.pagination li.active {

    padding: 7px 15px;

    border-radius: 8px;

    color: #ffffff;

    background: #333333;

    text-decoration: none;

}



ul.pagination li.noactive:hover {

    background: none;

}



#arrow-top {

    position: fixed;

    float: left;

    margin-left: 1205px;

    bottom: 5px;

    display: none;

    z-index: 1000;

}



#arrow-top img {

    width: 70px;

    height: 70px;

}



#up {

    width: 100%;

    display: block;

    text-align: right;

}



#up a {

    color: #0000ee;

    text-decoration: underline;

    border-bottom: 0px;

}



#article-top {

    margin-top: -20px;

}



#article-top .time {

    padding-right: 10px;

    color:  #333333;

    font-weight: 600;

}



#article-top .time img {

    width: 16px;

}



#article-menu {

    border-radius: 16px;

    border: 1px solid #e6e6e6;

    padding: 10px;

    font-size: 16px;

    Line-height: 2;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

    background-color: #ffffff;

}



#article-menu ul {

    list-style-type: circle;

}



table {

    border-collapse: collapse;

    border-radius: 12px 12px 0 0;

    overflow: hidden;

}



tr {

    background-color: #ffffff;

}



tr:nth-child(even) {

    background-color: #e6e6e6;

}



td, th {

    border: 1px solid #d0d0d0;

    padding: 8px;

    vertical-align: middle;

}



th {

    background: #ff7442;

    color: #ffffff;

}



table a {

    color: #333333;

    text-decoration: none;

}



#buy-modules table{

    width: 100%;

}



#buy-modules label, #new-modules label  {

    cursor: pointer;

    font-weight: normal;

}



#buy-modules table td{

    vertical-align: top;

}



#select-all, #select-all-1  {

    width: 18px;

    height: 18px;

    margin-top: 2px;

    margin-left: 4px;

    margin-right: 10px;

    float: left;

    cursor: pointer;

}



.buy-module, .buy-module-1 {

    width: 18px;

    height: 18px;

    margin-top: 2px;

    margin-left: 4px;

    margin-right: 10px;

    float: left;

    cursor: pointer;

}



.dot {

    height: 18px;

    width: 18px;

    margin-top: 2px;

    margin-left: 4px;

    margin-right: 10px;

    float: left;

    border-radius: 50%;

    display: inline-block;

}



.good {background-color: #90c209;}

.medium {background-color: #ff8400;}

.bad {background-color: #ed2939;}



.free {

    margin-right: 6px;

    color: #437c29;

    font-size: 15px;

}



#new-modules {

    display: none;

}



#img-small {

    width: 100%;

    border-radius: 8px;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

}



#img-small:hover {

    opacity: 0.7;

}



.modal {

    display: none;

    position: fixed;

    z-index: 1001;

    padding-top: 100px;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0,0.9);}



.modal-content {

    margin: auto;

    display: block;

    width: 96%;

    max-width: 1080px;}



#caption {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

    text-align: center;

    color: #e6e6e6;

    padding: 10px 0;

    height: 150px;}



.modal-content, #caption {

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;}



@-webkit-keyframes zoom {

    from {-webkit-transform:scale(0)}

    to {-webkit-transform:scale(1)}}



@keyframes zoom {

    from {transform:scale(0)}

    to {transform:scale(1)}}



.close {

    position: absolute;

    top: 15px;

    right: 20px;

    color: #f1f1f1;

    font-size: 50px;

    font-weight: 600;

    transition: 0.3s;

}



.close:hover, .close:focus {

    color: #4a4b4b;

    text-decoration: none;

    cursor: pointer;

}



.tooltip {

    cursor: pointer;

    position: relative;

    display: inline-block;

}



.tooltip .tooltiptext {

    visibility: hidden;

    width: 140px;

    text-align: center;

    border-radius: 8px;

    padding: 4px 0;

    position: absolute;

    z-index: 1;

    bottom: 125%;

    left: 50%;

    margin-left: -60px;

    opacity: 0;

    font-size: 14px;

    border: 1px solid #4a4b4b;

    background-color: #f4f3f1;

}



.tooltip .tooltiptext::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: #4a4b4b transparent transparent transparent;

}



.tooltip:hover .tooltiptext {

    visibility: visible;

    opacity: 1;

}



.check {color: green;}



.wrong {color: red;}



.table-filter select {width: 150px;}



.hide {display: none;}



.img-hover:hover {

    opacity: 0.7;

}



.homepage h1 {

    font-size: 31px;

}



.homepage h2 {

    font-size: 26px;

}



.article h1 {

    font-size: 1.5em;

}



#references {

    padding: 10px 20px 10px 20px;

    width: 50%;

}



.agree {

    font-weight: normal;

    font-size: 14px;

    cursor: pointer;

}



.agree input[type='checkbox'] {

    width: 16px;

    height: 16px;

    float: left;

    margin-top: 4px;

    margin-right: 5px;

}



#info {

    padding-left: 6px;

    padding-right: 6px;

    border-radius: 50%;

    cursor: pointer;

    font-weight: 600;

    font-size: 12px;

    float: right;

    border: 1px solid #333333;

    margin-top: 2px;

    margin-left: 6px;

}



#info:hover {

    background-color: #FF7442;

}



#token {

    background-color: #FF7442;

    padding-left: 4px;

    padding-right: 4px;

    border-radius: 8px;

    cursor: pointer;

    font-weight: 600;

    font-size: 12px;

    float: right;

    border: 1px solid #333333;

    margin-top: 2px;

}



#token:hover {

    background-color: #FF8C5E;

}



.token {

    margin-left: 32px;

    font-size: 14px;

    display: none;

    padding-bottom: 4px;

}



.token a:hover {

    text-decoration: none;

}



.button-token {

    width: 200px;

    cursor: pointer;

    border-radius: 8px;

    background-color: #ffffff;

    border: 1px solid #c9c9c9;

    padding: 1px;

    text-align: center;

}



.button-token:hover {

    background-color: #f4f3f1;

    text-decoration: none;

}



.generate {

    color: green;

    margin-top: 4px;

    margin-bottom: 6px;

}



.deactivate {

    color: red;

}



#instruction {

    padding: 20px;

    border: 1px solid #e6e6e6;

    border-radius: 20px;

    background-color: #f4f3f1;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

}



#instruction img {

    width: 16px;

    margin-right: 4px;

}



#instruction a {

    font-size: 18px;

    color: #333333;

}



#instruction a:hover {

    color: #000000;

    text-underline-offset: 6px;

}



#instruction-logo {

    margin-bottom: 20px;

}



#instruction-logo img {

    float: left;

    width: 30px;

}



#instruction-logo h2 {

    margin-left: 46px;

    padding-top: 4px;

    font-size: 24px;

}



#instruction-logo span {

    margin-left: 10px;

}



#administration-menu {

    float: left;

    padding-top: 55px;

}



#administration-menu-under {

    border-right: 1px solid #333333;

    width: 151px;

}



#administration-menu-under a {

    color: #333333;

}



#administration-menu-under a:hover {

    text-decoration: none;

}



#administration-menu-under li {

    padding-left: 10px;

    padding-top: 2px;

    padding-bottom: 2px;

    margin-top: 3px;

    margin-bottom: 3px;

}



#administration-menu-under li:hover, #administration-menu-under .active {

    font-weight: 600;

    text-decoration: none;

    background: #ff7442;

    color: #ffffff;

    border-top-left-radius: 16px;

    border-bottom-left-radius: 16px;

}



#administration-menu-under ul {

    list-style-type: none;

    margin-left: -18px;

    margin-top: 10px;

}



#administration-section {

    padding-left: 180px;

}



#administration-section ul {

    padding-left: 18px;

}



#administration-section h1 {

    font-size: 30px;

    padding-bottom: 10px;

}



#period {

    margin-top: 4px;

    margin-left: -15px;

}



#period label {

    font-weight: normal;

    cursor: pointer;

}



#period input[type=radio] {

    margin-right: 5px;

    margin-left: 15px;

}



#period table {

    margin-top: -10px;

}



#contact a {

    color: #333333;

}



.rotator-wrapper {

    display: inline-flex;

    flex-direction: column;

    height: 1.2em;

    overflow: hidden;

    color: #3f96e2;

}



.rotator-item {

    display: block;

    height: 1.2em;

    line-height: 1.2em;

    white-space: nowrap;

    animation: infiniteScroll 9s infinite;

    font-weight: 600;

}



@keyframes infiniteScroll {

    0%, 20% { transform: translateY(0); }

    30%, 50% { transform: translateY(-100%); }

    60%, 80% { transform: translateY(-200%); }

    90%, 100% { transform: translateY(-300%); }

}



/***********************************************************************************************************/

@media (min-width: 800px) {



    #header-img img {

        display: none;

    }



    #logo a {

        margin-top: 27px;

        height: 21px;

        width: 281px;

        background-size: 281px;

        background-image: url(../img/logo.png?v=1.0);

    }



    #search {

        margin-top: -55px;

        margin-right: 10px;

        float: right;

        padding-left: 20px;

        display: block;

    }



    #search a {

        text-decoration: none;

    }



    #product-key {

        cursor: pointer;

        background: #FF7442;

        border-radius: 16px;

        height: 35px;

        width: 150px;

        display: flex;

        justify-content: center;

        align-items: center;

        color: #ffffff;

        font-size: 18px;

        font-weight: 500;

        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);

        transition: all 0.2s ease;

    }



    #product-key:hover {

        transform: translateY(-2px);

        background: #FF7E51;

    }



    #search-under {

        margin-top: 0px;

    }



    #menu-fixed {

        margin-top: 0px;

        display: block;

        width: 100%;

        z-index: 1000;

        float: right;

        border-bottom: 0px;

        border-top: 0px;

    }



    #main-menu {

        background-color: transparent;

    }



    #main-menu nav.menu ul {

        width: 100%;

        text-align: right;

    }



    #main-menu nav.menu ul li {

        display: inline-block;

    }



    #main-menu nav.menu a {

        line-height: 75px;

        border-bottom: none;

    }



    #menu-under {

        padding-right: 130px;

    }



    #section ul {

        padding-left: 18px;

    }



    #footer {

        Line-height: 1.8;

    }



    [class*="col-"] {

        float: left;

        padding-bottom: 10px;

    }



    .col-1 {width: 8.33%;}

    .col-2 {width: 16.66%;}

    .col-3 {width: 25%;}

    .col-4 {width: 33.33%;}

    .col-5 {width: 41.66%;}

    .col-6 {width: 50%;}

    .col-7 {width: 58.33%;}

    .col-8 {width: 66.66%;}

    .col-9 {width: 75%;}

    .col-10 {width: 83.33%;}

    .col-11 {width: 91.66%;}

    .col-12 {width: 100%;}



    #article .article-img {

        float: left;

        margin-right: 20px;

        margin-bottom: 0px;

        background-color: #ffffff;}



    #article-menu {

        padding: 20px;

        font-size: 18px;}



    ul.pagination {

        margin-left: -18px;

    }



    h1 {

        font-size: 34px;

    }



    .article h1 {

        font-size: 1.75em;

    }



    h2 {

        font-size: 1.5em;

    }



    .heading {

        padding-bottom: 0;

    }



    #logout {

        margin-bottom: -44px;

    }



    #references {

        padding: 10px 40px 20px 40px;

    }



    #more-module {

        width: 500px;

    }



    #module-logo td {

        padding: 15px;

    }



    #module-logo img {

        padding: 15px;

    }



    .logo-module {

        margin-left: -15px;

    }



    #main-menu nav.menu a:hover, .active:hover, .active {

        background-color: transparent;

    }



    #main-menu nav.menu ul li a {

        position: relative;

        display: inline-block;

        padding: 0 15px;

        line-height: 75px;

        text-decoration: none;

        color: #333333;

        font-size: 18px;

        transition: color .2s ease;

    }



    #main-menu nav.menu ul li a::after {

        content: "";

        position: absolute;

        left: 15px;

        bottom: 22px;

        width: calc(100% - 30px);

        height: 2px;

        background-color: #FF7442;

        transform: scaleX(0);

        transform-origin: right;

        transition: transform 0.25s ease;

    }



    #main-menu nav.menu ul li:hover > a::after,

    #main-menu nav.menu ul li.active > a::after {

        transform: scaleX(1);

        transform-origin: left;

    }



    #instruction a {

        font-size: 20px;

    }



    #instruction-logo {

        margin-bottom: 30px;

    }



    #instruction-logo img {

        width: 35px;

    }



    #instruction-logo h2 {

        margin-left: 52px;

        padding-top: 4px;

        font-size: 28px;

    }



    .homepage h1 {

        font-size: 35px;

    }



    .homepage h2 {

        font-size: 30px;

    }



}



/***********************************************************************************************************/

@media (min-width: 1000px) {



    .homepage h1 {

        font-size: 44px;

    }



    .homepage h2 {

        font-size: 34px;

    }



}



/***********************************************************************************************************/

@media (min-width: 1220px) {

    #header-under, #searchbox, #menu-under, #section-under, #footer-under {

        width: 1200px;

        margin-left: auto;

        margin-right: auto;

    }



    .homepage h1 {

        font-size: 54px;

        padding-top: 30px;

    }



    .homepage h2 {

        font-size: 39px;

    }



    .button-homepage {

        font-size: 19px;

    }



    #highlight h3 {

        font-size: 20px;

    }



    #price-highlight h2 {

        font-size: 34px;

    }



    #price-highlight h3 {

        font-size: 20px;

    }



    h3 {

        font-size: 20px;

    }



    .form-product-key-fixed {

        top: 95px;

        position: fixed;

        width: 530px;

        z-index: 1000;

    }



}



/***********************************************************************************************************/

@media (min-width: 1260px) {

    #up {

        display: none;

    }



}



/***********************************************************************************************************/

@media (min-width: 1366px) {



    #background {

        /*background-image: url("../img/background.png?v=1.0");*/

        background-repeat: no-repeat;

        background-size: 100%;

    }



}

/***********************************************************************************************************/

/* Homepage */

.homepage-accent {
    color: #3f96e2;
    font-weight: 600;
}

.pw-field {
    position: relative;
}

.pw-field input, #searchbox .pw-field input {
    padding-right: 40px;
    float: none;
}

#searchbox .pw-field input {
    margin: 0;
}

#searchbox .search-field, #searchbox .search-control {
    vertical-align: middle;
}

.pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    stroke: #8a8a8a;
}

.pw-toggle:hover, .pw-toggle.on {
    stroke: #333333;
}


/* Front connectors page — search + grid (ported from cost-import.cz/konektory) */
.module-searchgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 28px; }
.module-searchgrid .module-search { grid-column: span 2; }
.module-search { position: relative; margin: 0; }
.module-search input { width: 100%; height: 46px; padding: 0 14px 0 44px; border: 1px solid #e6e6e6; border-radius: 12px; font-size: 16px; background-color: #ffffff; outline: none; }
.module-search input:hover, .module-search input:focus { border-color: #e6e6e6; }
.module-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: #8a8a8a; fill: none; stroke-width: 2; pointer-events: none; }
.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.module-cell { display: block; }
.module-grid .module-logo { display: flex; align-items: center; justify-content: center; padding: 24px; }
.module-grid .module-logo img { width: 100%; height: auto; margin: 0; padding: 0; }
.module-empty { padding: 20px 10px; color: #8a8a8a; font-size: 16px; }
@media (min-width: 560px) { .module-searchgrid, .module-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .module-searchgrid, .module-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .module-searchgrid, .module-grid { grid-template-columns: repeat(5, 1fr); } }


/***********************************************************************************************************/
/* Design tokens (same palette as the admin; ported from cost-import.cz 2026-09-11).
   Note the radius differs from administration-style.css on purpose: the front end
   uses 12/9, the admin 16/12. */

:root {
    --surface: #ffffff;
    --surface-2: #faf9f8;
    --border: #e8e6e3;
    --border-soft: #f0eeeb;
    --text: #333333;
    --text-mid: #57534d;
    --text-muted: #8b8781;
    --text-faint: #a8a39c;
    --accent: #ff7442;
    --accent-hover: #ff7e51;
    --accent-tint: #ffe9df;
    --radius: 12px;
    --radius-sm: 9px;
    --ease: cubic-bezier(.4, 0, .2, 1);
}

/***********************************************************************************************************/
/* Header panels (mobile menu + API key sign-in)
   Both are taken out of flow (position: absolute under the header), so they never
   push each other around and opening one touches no layout. The outer box is
   anchored exactly to the bottom edge of the header (top: 100%, i.e. 75px) and is
   revealed with clip-path, so it never spills into the header; only the content
   inside shifts. No fade: the panels are opaque white and cross-fading would let
   the page content show through them. */

#search-under {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 0;
    float: none;
    display: block;
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.28s var(--ease), visibility 0s linear 0.28s;
}

#search-under.panel-open {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.28s var(--ease), visibility 0s;
}

#searchbox {
    transform: translateY(-10px);
    transition: transform 0.28s var(--ease);
}

#search-under.panel-open #searchbox {
    transform: translateY(0);
}

#searchbox input[type=submit] {
    margin: 0 0 0 10px;
}

#searchbox input[type=submit].is-busy {
    background: #ff9a74;
    cursor: default;
}

#product-key.is-open {
    transform: translateY(-2px);
    background: #ff7e51;
}

@media (max-width: 799px) {

    #menu-fixed {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        margin: 0;
        float: none;
        display: block;
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.28s var(--ease), visibility 0s linear 0.28s;
    }

    #menu-fixed.panel-open {
        visibility: visible;
        clip-path: inset(0 0 0 0);
        transition: clip-path 0.28s var(--ease), visibility 0s;
    }

    /* shift #menu-under, not #main-menu: #main-menu carries the white background
       and as a child it paints ON TOP of the parent's border-top, which would hide
       the hairline for the whole animation and pop it in at the end */
    #menu-under {
        transform: translateY(-10px);
        transition: transform 0.28s var(--ease);
    }

    #menu-fixed.panel-open #menu-under {
        transform: translateY(0);
    }

    #main-menu nav.menu a {
        transition: background-color 0.15s var(--ease);
    }

}

@media (prefers-reduced-motion: reduce) {

    #menu-fixed,
    #menu-fixed.panel-open,
    #search-under,
    #search-under.panel-open,
    #menu-under,
    #searchbox {
        transform: none;
        transition: none;
    }

}

/***********************************************************************************************************/
/* Hamburger (three bars <-> cross)
   Replaces the PNG icon: menu-show.png and menu-hide.png were byte identical, so
   swapping src never changed anything and an open menu had no indication at all.
   The geometry is measured from the original menu-show.png (200x200, drawn at
   40px): bar 30px tall = 6px, width 198/200 = 39.6px, gap 30px = 6px, radius 15px
   = full pill 3px, colour #333333. The cross follows from that: bar centres are
   12px apart, so the outer bars move 12px inward and rotate 45 degrees. */

.nav-toggle {
    display: none;
    float: right;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-top: 15px;
    margin-right: 10px;
    margin-left: 5px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
    display: block;
    width: 39.6px;
    height: 6px;
    border-radius: 3px;
    background-color: #333333;
    transition: transform 0.28s var(--ease), opacity 0.16s var(--ease);
}

.nav-toggle span + span {
    margin-top: 6px;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.3);
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
}

/* The header is translucent by default; with a panel open it must be fully white,
   otherwise the dim and the page content show through it. */
#header {
    transition: background-color 0.2s var(--ease);
}

#header.has-panel {
    background-color: #ffffff;
}

/* Dim behind an open panel. Starts below the header (75px): the header is
   translucent, so a dim underneath it would turn it grey. Scroll lock on mobile
   only, on desktop the vanishing scrollbar would shift the layout. */
#menu-backdrop {
    position: fixed;
    top: 75px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}

#menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.28s var(--ease), visibility 0s;
}

@media (max-width: 799px) {

    .nav-toggle {
        display: flex;
    }

    body.nav-locked {
        overflow: hidden;
    }

}

/***********************************************************************************************************/
/* Sign in page (/sign-in/) and the checkbox in the header panel */

.login-flash {
    margin-bottom: 16px;
}

#login, #login form {
    display: block;
    width: 100%;
}

#login .login-field {
    display: block;
    width: 100%;
    margin-bottom: 14px;
}

#login input[type=password] {
    width: 100%;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    background-color: #f4f3f1;
    border: 1px solid #e6e6e6;
    border-radius: var(--radius);
    padding: 10px 40px 10px 12px;
}

#login input[type=password]:focus {
    border: 1px solid #4a4b4b;
}

#login .login-control {
    display: block;
    width: 100%;
}

#login input[type=submit] {
    width: 100%;
    margin: 0;
    margin-left: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    padding: 11px 14px;
    border-radius: var(--radius);
}

/* flex, not inline-flex: an inline element carries ~4px of line box under it */
#login label {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--text-mid);
}

/* sign in page: the checkbox sits above the button */
#login .login-remember {
    margin-bottom: 16px;
}

/* homepage: the checkbox sits under the button, keep it off it (the submit used
   to carry margin: 8px 0, which the full width button above no longer has) */
#login .login-control + label {
    margin-top: 14px;
}

/* same checkbox as in the admin; blue is the homepage accent (.homepage-accent) */
#login input[type=checkbox], #searchbox input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    float: none;
    flex-shrink: 0;
    background-color: #ffffff;
    border: 1.5px solid var(--text-faint);
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

#login input[type=checkbox]:checked, #searchbox input[type=checkbox]:checked {
    background-color: #3f96e2;
    border-color: #3f96e2;
}

#login input[type=checkbox]:checked::after, #searchbox input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* flex, not inline-flex: an inline element carries ~4px of line box under it,
   which would break the symmetric gap below the checkbox */
#searchbox label {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--text-mid);
    margin-top: 14px;
}