a, body, div, form, h1, h2, h3, h4, h5, h6, html, iframe, img, li, ul, il, object, ol, p, pre,
span, sub, sup, table, tbody, td, tfoot, th, thead, tr, button
{ border:0px; margin:0px; padding:0px; outline:none; }
textarea, input, button, select { font-family: inherit; font-size: inherit; }
p + p
{ margin-top:0.75rem; }
.text_list
{ padding:0px; margin:0.5rem 0 0.5rem 2rem; }
.text_list > li + li
{ margin-top: 0.25rem; }
/*
a
{ line-height: 1rem; }
*/
input,select,textarea
{ margin:0px; padding:1px 2px 1px 2px; outline:none; }
button
{ box-sizing: border-box; }
td,th
{text-align:left}
/*
a{text-decoration:underline;color:#0060BF;}
a:hover{text-decoration:underline;color:#000;}
a:visited{text-decoration:underline;color:#003090;}
*/
th,td
{ background-repeat:repeat; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.60rem; }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.30rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1.00rem; }
table
{ border-spacing:0; border-collapse:collapse; }
td, th
{ padding: 0; }
/*
a { position: relative; }
*/
a:focus {
outline: 1px dotted black;
}
*
{
box-sizing: content-box;
}
a { text-decoration:none; }
a:hover { text-decoration:underline; }
.notselect
{
user-select: none; /* CSS 4 w*/
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
.yesscript { display: none; }
.script_enabled .yesscript { display: inherit; }
#skip
{
display: block;
position:absolute;
top:-2rem;
z-index:100;
outline:none;
text-decoration:none;
padding:0.2rem;
border:1px solid black;
background-color: rgba(255,255,255,1);
color: rgba(0,0,0,1);
transition: top 0.3s ease-out;
}
/* skip content */
#skip:focus { top:0; transition: top 0.3s ease-in; }
/* logo */
.logo
{
width: 8rem;
min-width: 8rem;
max-width: 8rem;
vertical-align: middle;
text-align: center;
white-space: nowrap;
}
/* main menu */
#main_menu { list-style-type: none; }
#main_menu li { display:inline; }
#main_menu li a
{
display: inline-block;
color: black;
text-decoration: none;
border-left: 0.01rem solid rgb(160,160,160);
padding: 0.25rem 0.5rem;
transition: background-color 0.25s ease;
}
#main_menu li:last-child a { border-right:0.01rem solid rgb(160,160,160); }
#main_menu li a:hover { background-color: rgb(210,210,210); transition: background-color 0s ease;}
#main_menu li a:focus { text-decoration: underline; }
.title_item { padding: 0.75rem 0; }
@media all and (max-width:38rem)
{
.title_item { padding: 0.4rem 0; }
}
@media all and (max-width:25rem)
{
.title_item { padding: 0.2rem 0; }
}
@media all and (max-width:20rem)
{
#main_menu li a { padding-left: 0.3rem; padding-right: 0.3rem; }
}
.main_title_user
{
width: 100%;
}
/* cards */
.card_title
{
padding: 0.3rem;
background-color: rgb(14, 116, 178);
color: white;
}
.card_body
{
padding: 0.5rem;
}
.card_main { min-height: 15rem; }
.card1
{
box-shadow: 0 0 0.2rem rgba(0,0,0,0.5);
background-color: rgb(255,255,255);
}
.card1_list { list-style-type: none; }
.card1_list > li { display: block; }
.card1_list > li:not(:last-child) { margin-bottom: 1rem; }
.card2
{
box-shadow: 0 0 0.3rem rgba(0,0,0,0.75);
background-color: rgb(255,255,255);
}
/* global buttons */
.button_list { list-style-type: none; }
.button_list li { list-style-type: none; display:inline-block; }
.button_list li a { margin-left: 0.2rem; }
.button_list li:first-child a { margin-left: 0; }
.button
{
display: inline-block;
background-color: rgb(240,240,240);
padding: 0.2rem 0.5rem;
text-decoration: none;
border: 1px solid rgb(110,110,110);
box-shadow: 0 0.0 0.05rem rgba(0,0,0,0.5);
position: relative;
text-align: center;
cursor: pointer;
color: inherit;
box-sizing: border-box;
}
.button:focus { outline: 1px dotted black; }
.button:hover { background-color: rgb(255,255,255); background-image: initial; text-decoration: underline; box-shadow: 0 0 0.15rem rgba(0,0,0,0.5); }
.button:visited { color: black; }
.critical { background-color: rgb(250,220,220); }
.critical:hover { background-color: rgb(255,235,235); }
.safe { background-color: rgb(130,250,130); }
.safe:hover { background-color: rgb(150,255,150); }
.distant { margin: 0.2rem; }
.image_thumbnail
{
display: inline-block;
background-color: rgb(230,230,230);
padding: 0.2rem;
border: 1px solid rgb(110,110,110);
box-shadow: 0 0.0 0.05rem rgba(0,0,0,0.5);
position: relative;
cursor: pointer;
box-sizing: border-box;
}
.image_thumbnail:focus { outline: 1px dotted black; }
.image_thumbnail:hover { background-color: rgb(255,255,255); background-image: initial; text-decoration: underline; box-shadow: 0 0 0.15rem rgba(0,0,0,0.5); }
.image_thumbnail:visited { color: black; }
.operation_list { text-align: center; margin: 2rem auto; max-width: 20rem; }
.operation_list > div > a { width: 100%; }
.user_container
{
max-width: 22em;
margin-left: auto;
margin-right: auto;
margin-top: 2rem;
margin-bottom: 2rem;
}
@media all and (max-width:35rem)
{
.user_container { margin-top: 0rem; margin-bottom: 0rem; }
}
.user_input
{
width: 100%;
padding: 0.3rem 0.5rem;
margin: 0.4rem 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.user_submit_long
{
background-color: #4CAF50;
color: white;
padding: 1rem 3rem;
margin: 0.5rem 0;
border: none;
cursor: pointer;
width: 100%;
}
.user_login_left { float: left; padding-top: 1rem; }
.user_login_right { float: right; padding-top: 1rem; }
.yesnoform { }
.yesnoform button, .yesnoform a
{
vertical-align:middle;
margin-right: 1rem;
width: 5rem;
box-sizing: border-box;
text-align: center;
}
.buy_wizard_support_table
{
border: 1px solid rgba(100,100,100,0.5);
margin:auto;
width: 100%;
}
.buy_wizard_support_table > tbody > tr > td
{ padding: 0.25rem; }
.buy_wizard_support_table > tbody > tr:not(:last-child) > td
{ border-bottom: 1px solid rgba(100,100,100,0.5); }
/*
.buy_wizard_support_table > tbody > tr:nth-of-type(2n+0) > td
{ background-color: rgb(220,220,220) }
.buy_wizard_support_table > tbody > tr:nth-of-type(2n+1) > td
{ background-color: rgb(235,235,235) }
*/
.buy_wizard_support_table > tbody > tr > th:nth-child(2),
.buy_wizard_support_table > tbody > tr > td:nth-child(2),
.buy_wizard_support_table > tbody > tr > th:nth-child(3),
.buy_wizard_support_table > tbody > tr > td:nth-child(3)
{ text-align: center; }
.buy_wizard_support_table > tbody > tr > th:nth-child(4),
.buy_wizard_support_table > tbody > tr > td:nth-child(4)
{ text-align: right; white-space: nowrap; }
.order_list_table { list-style-type: none; display: table; margin:auto; } /*border: 1px solid rgba(100,100,100,0.5); */
.order_list_table > li { display: table-row; }
.order_list_table > li > div { display:table-cell; padding: 0.2rem; vertical-align: middle; }
.order_list_table > li:not(:last-child) > div { border-bottom: 1px solid rgba(100,100,100,0.5); }
.order_list_table > li > div:not(:last-child) { border-right: 1px solid rgba(100,100,100,0.5); }
/* */
.tab_container
{
background-color: rgba(0,175,250,0.5);
border-radius: 0.25rem;
padding: 0.75rem;
border: 1px solid rgba(0,0,0,0.5);
box-shadow: 0 0 0.1rem rgba(0,0,0,0.5);
}
.tab_container:not(:first-child) { margin-top: 0.5rem; }
.tab_container:not(:last-child) { margin-bottom: 0.5rem; }
.tab_links { list-style-type: none; }
.tab_links + .admin_links { margin-top: 0.5rem; }
.tab_links > li { display: inline-block; }
.tab_links > li:not(:last-child) > a { margin-right: 0.1rem; }
.tab_button
{
display: inline-block;
background-color: rgb(240,240,240);
padding: 0.5rem 1rem;
margin-top: 0.15rem;
text-decoration: none;
position: relative;
text-align: center;
cursor: pointer;
color: inherit;
box-sizing: border-box;
border-top: 1px solid rgb(110,110,110);
border-left: 1px solid rgb(110,110,110);
border-right: 1px solid rgb(110,110,110);
box-shadow: 0 -0.05rem 0.05rem rgba(0,0,0,0.5);
}
.tab_button:hover { background-color: rgb(255,255,255); }
.tab_active { font-weight: bold; }
.tab_admin { background-color: rgb(255,188,100); }
.tab_admin:hover { background-color: rgb(255,200,120); }
.tab_critical { background-color: rgb(255,180,180); }
.tab_critical:hover { background-color: rgb(255,200,200); }
.user_purchase_view
{
box-sizing: border-box;
width: 100%;
margin: auto;
border: 1px solid black;
}
.user_purchase_view_field
{
white-space: nowrap;
padding: 0.25rem;
font-weight: bold;
color: white;
background-color: rgb(14, 116, 178);
border: 1px solid black;
}
.user_purchase_view > tbody > tr:not(:first-child) > td { border-top: 1px solid rgba(100,100,100,0.5); }
.user_purchase_view > tbody > tr > td:not(:first-child) { border-left: 1px solid rgba(100,100,100,0.5); }
.user_purchase_view_value
{
padding: 0.25rem;
width: 100%;
background-color: white;
color: black;
}
.user_purchase_client_info { display: table; width: 100%; }
.user_purchase_client_info > div { display: table-row; }
.user_purchase_client_info > div > div { display: table-cell; }
.user_purchase_client_info > div > div:first-child { white-space: nowrap; padding-right: 0.5rem; font-style: italic; }
.user_purchase_client_info > div > div:last-child { width: 100%; font-weight: bold; }
.user_purchase_options
{
width: 100%;
max-width: 25rem;
margin: auto;
}
.user_purchase_options > tbody > tr > td
{
padding: 0.5rem 0;
}
.user_purchase_options > tbody > tr > td:not(:last-child)
{
padding-right: 0.5rem;
}
.user_purchase_options > tbody > tr:not(:last-child) > td
{
border-bottom: 1px solid rgba(100,100,100,0.5);
}
.admin_container
{
background-color: rgba(0,180,250,0.5);
padding: 0.75rem;
border: 1px solid rgba(0,0,0,0.5);
box-shadow: 0 0 0.1rem rgba(0,0,0,0.5);
}
.admin_container:not(:first-child) { margin-top: 0.5rem; }
.admin_container:not(:last-child) { margin-bottom: 0.5rem; }
.admin_container > a + a { margin-left: 0.5rem; }
.admin_container .button { padding-left: 1rem; padding-right: 1rem; }
.admin_form
{
display:table;
width:100%;
margin: auto;
box-sizing: border-box;
}
.admin_links { list-style-type: none; margin: 0px; }
.admin_links + .admin_links { margin-top: 0.5rem; }
.admin_links > li { display: inline-block; margin: 0px; }
.admin_links > li:not(:last-child) > a { margin-right: 0.25rem; }
.admin_button { background-color: rgb(200,180,50); }
.admin_button:hover { background-color: rgb(220,200,70); }
.admin_critical { background-color: rgb(255,180,180); }
.admin_critical:hover { background-color: rgb(255,200,200); }
.admin_visit_summary { display: table; width: 100%; margin: 2rem auto 2rem auto; }
.admin_visit_summary > div { display: table-row; }
.admin_visit_summary > div > div { display: table-cell; padding: 0.1rem 0.3rem 0.1rem 0.3rem; border-bottom: 1px solid rgba(64,64,64,0.5); border-right: 1px solid rgba(64,64,64,0.5); }
.admin_visit_summary > div:first-child > div { border-top: 1px solid rgba(64,64,64,0.5) }
.admin_visit_summary > div > div:first-child { border-left: 1px solid rgba(64,64,64,0.5); }
.admin_visit_summary > div:nth-child(1) > div { background-color: rgb(150,150,150); font-weight: bold; }
.admin_visit_summary > div:nth-child(2n+2) > div { background-color: rgb(220,220,220); }
.admin_visit_summary > div:nth-child(2n+3) > div { background-color: rgb(240,240,240); }
.admin_visit_summary_center { text-align: center; }
.admin_admins_roles { width: 30rem; margin: auto; }
.admin_admins_roles > div { margin-bottom: 1rem; }
.admin_admins_roles > div > div:first-child { background-color: rgb(200,200,200); border: 1px solid rgb(100,100,100); text-align: center; padding: 0.2rem; }
.admin_admins_table_users { display: table; width: 100%; }
.admin_admins_table_users > div { display: table-row; }
.admin_admins_table_users > div > div { display: table-cell; padding: 0.1rem 0 0.1rem 0; }
.admin_admins_table_users > div > div:last-child { width: 3rem; text-align: right; }
.server_status_table { width: 25rem; margin: auto }
.server_status_table > div { display: table; margin: 2rem auto 2rem auto; }
.server_status_table > div > div { display: table-row; }
.server_status_table > div > div > div { display: table-cell; padding: 0.5rem; }
.server_status_table > div > div > div:first-child { white-space: nowrap; border-right: 1px solid rgb(200,200,200); }
.server_status_table > div > div > div:not(:first-child) { width: 100%; font-weight: bold; text-align: right; }
.server_status_table > div > div:not(:last-child) > div { border-bottom: 1px solid rgb(200,200,200); }
.server_status_table_success { background-color: rgb(80,180,80); }
.server_status_table_loading { background-color: rgb(130,130,130); color: white; }
.server_status_table_fail { background-color: rgb(230,80,80); color: white; }
.server_variables_table { display: table; width: 25rem; margin: 2rem auto 2rem auto; }
.server_variables_table > div { display: table-row; }
.server_variables_table > div > div { display: table-cell; padding: 0.5rem; }
.server_variables_table > div > div:first-child { white-space: nowrap; border-right: 1px solid rgb(200,200,200); }
.server_variables_table > div > div:not(:first-child) { width: 100%; font-weight: bold; text-align: right; }
/*=============================================*/
.hide_sequence_radio ~ .hide_sequence { display: table-row; }
.hide_sequence_radio:checked ~ .hide_sequence { display: none; }
.hide_sequence_adddel > div { padding-top: 0.2rem; }
.hide_sequence_radio + .hide_sequence_adddel { display: none; }
.hide_sequence_radio:checked + .hide_sequence_adddel { display: table-row; }
/*=============================================*/
.admin_toggle_button
{
margin-left: 0.5rem;
display: inline-block;
vertical-align: middle;
width: 1rem;
height: 1rem;
white-space: nowrap;
background-repeat: repeat;
background-position: center center;
background-size: 100%;
}
.admin_enable
{
background-image: url(/direct/images/refresh_white.svg);
}
.admin_disable
{
background-image: url(/direct/images/refresh_red.svg);
}
/* */
input[class~="data_display_type_radio"] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
input[class~="data_display_type_radio"] + label { cursor: pointer; }
input[class~="data_display_type_radio"]:focus + label { outline: 1px dotted black; }
input[class~="data_display_type_radio"] + label span
{
display: inline-block;
width: 0.65rem;
height: 0.65rem;
border-radius: 0.325rem;
margin-right: 0.2rem;
border: 1px solid black;
background-color: rgb(255,255,255);
box-sizing: border-box;
}
input[class~="data_display_type_radio"]:not(:checked):hover + label span { background-color: rgb(150,150,150); border: 2px solid black; }
input[class~="data_display_type_radio"]:checked + label span { background-color: rgb(0,200,0); border-color: black; }
input[class~="data_display_type_radio"]:checked:hover + label span { background-color: rgb(50,250,50); border: 2px solid black;}
/* */
input[class~="data_display_type_far_radio1"] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
input[class~="data_display_type_far_radio1"] ~ label[class~="data_display_type_far_label1"] { cursor: pointer; }
input[class~="data_display_type_far_radio1"]:focus ~ label[class~="data_display_type_far_label1"] { outline: 1px dotted black; }
input[class~="data_display_type_far_radio1"] ~ label[class~="data_display_type_far_label1"] span { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 0.325rem; margin-right: 0.2rem; border: 1px solid black; background-color: rgb(100,100,100); box-sizing: border-box; }
input[class~="data_display_type_far_radio1"]:not(:checked):hover ~ label[class~="data_display_type_far_label1"] span { background-color: rgb(150,150,150); }
input[class~="data_display_type_far_radio1"]:checked ~ label[class~="data_display_type_far_label1"] span { background-color: rgb(0,225,0); }
input[class~="data_display_type_far_radio1"]:checked:hover ~ label[class~="data_display_type_far_label1"] span { background-color: rgb(150,255,150); }
input[class~="data_display_type_far_radio2"] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
input[class~="data_display_type_far_radio2"] ~ label[class~="data_display_type_far_label2"] { cursor: pointer; }
input[class~="data_display_type_far_radio2"]:focus ~ label[class~="data_display_type_far_label2"] { outline: 1px dotted black; }
input[class~="data_display_type_far_radio2"] ~ label[class~="data_display_type_far_label2"] span { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 0.325rem; margin-right: 0.2rem; border: 1px solid black; background-color: rgb(100,100,100); box-sizing: border-box; }
input[class~="data_display_type_far_radio2"]:not(:checked):hover ~ label[class~="data_display_type_far_label2"] span { background-color: rgb(150,150,150); }
input[class~="data_display_type_far_radio2"]:checked ~ label[class~="data_display_type_far_label2"] span { background-color: rgb(0,225,0); }
input[class~="data_display_type_far_radio2"]:checked:hover ~ label[class~="data_display_type_far_label2"] span { background-color: rgb(150,255,150); }
/* */
input[class~="data_display_type_check"] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
input[class~="data_display_type_check"] + label { cursor: pointer; }
input[class~="data_display_type_check"]:focus + label { outline: 1px dotted black; }
input[class~="data_display_type_check"] + label span
{
display: inline-block;
width: 0.62rem;
height: 0.62rem;
margin-right: 0.2rem;
border: 1px solid black;
background-color: rgb(100,100,100);
transition: background-color 0.25s ease;
box-sizing: border-box;
}
input[class~="data_display_type_check"]:not(:checked):hover + label span
{
background-color: rgb(150,150,150);
transition: background-color 0s ease;
}
input[class~="data_display_type_check"]:checked + label span
{
background-color: rgb(0,225,0);
}
input[class~="data_display_type_check"]:checked:hover + label span
{
background-color: rgb(150,255,150);
transition: background-color 0s ease;
}
/* */
input[class~="data_display_type_flag"] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
input[class~="data_display_type_flag"] + label { cursor: pointer; }
input[class~="data_display_type_flag"]:focus + label { outline: 1px dotted black; }
input[class~="data_display_type_flag"] + label span
{
vertical-align: middle;
white-space: nowrap;
line-height: 1rem;
}
input[class~="data_display_type_flag"] + label .dspan
{
position: relative;
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 0.2rem;
margin-bottom: 0.1rem;
border: 1px solid black;
background-color: transparent;
transition: background-color 0.25s ease;
box-sizing: border-box;
box-shadow: -1px 1px 10px black;
}
input[class~="data_display_type_flag"]:not(:checked):hover + label .dspan
{
background-color: rgb(200,220,200);
transition: background-color 0s ease;
}
input[class~="data_display_type_flag"]:checked + label .dspan
{
background-color: rgb(0,225,0);
background-image: url(/direct/images/checkmark.svg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
}
input[class~="data_display_type_flag"]:checked:hover + label .dspan
{
background-color: rgb(150,255,150);
transition: background-color 0s ease;
}
/* */
input[class~="data_display_type_notcheck"] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
input[class~="data_display_type_notcheck"] + label { cursor: pointer; }
input[class~="data_display_type_notcheck"]:focus + label { outline:1px dotted black; }
input[class~="data_display_type_notcheck"] + label span
{
display: inline-block;
width: 0.62rem;
height: 0.62rem;
margin-right: 0.2rem;
border: 1px solid black;
background-color: rgb(0,225,0);
transition: background-color 0.25s ease;
box-sizing: border-box;
}
input[class~="data_display_type_notcheck"]:not(:checked):hover + label span
{
background-color: rgb(150,255,150);
transition: background-color 0s ease;
}
input[class~="data_display_type_notcheck"]:checked + label span
{
background-color: rgb(100,100,100);
}
input[class~="data_display_type_notcheck"]:checked:hover + label span
{
background-color: rgb(150,150,150);
transition: background-color 0s ease;
}
/* */
input[class~="data_display_type_dropdown"] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
input[class~="data_display_type_dropdown"] + label { cursor: pointer; }
input[class~="data_display_type_dropdown"]:focus + label { outline: 1px dotted black; }
input[class~="data_display_type_dropdown"] + label span
{
display: inline-block;
width: 0;
height: 0;
margin-left: 0.2rem;
border-left: 0.3rem solid transparent;
border-right: 0.3rem solid transparent;
border-top: 0.6rem solid black;
border-bottom: 0rem solid transparent;
box-sizing: border-box;
}
input[class~="data_display_type_dropdown"]:checked + label span
{
border-left: 0.3rem solid transparent;
border-right: 0.3rem solid transparent;
border-top: 0rem solid transparent;
border-bottom: 0.6rem solid rgb(0,225,0);
}
.checkbox + input { width: 0; height: 1rem; padding: 0; margin: 0; position: absolute; opacity: 0; }
.checkbox + input:focus + label > span:first-child { outline: 1px dotted black; }
.checkbox + input + label > span:not(:first-child)
{
vertical-align: middle;
}
.checkbox + input + label > span:first-child
{
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: middle;
margin-right: 0.2rem;
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
box-sizing: border-box;
border: 0.15rem ridge rgb(200,200,200);
}
.checkbox + input[type="radio"] + label > span:first-child
{
border-radius: 0.5rem;
border: 0.15rem solid rgb(100,100,100);
}
.checkbox + input:not(:disabled):not(:checked):hover + label > span:first-child { background-color: rgba(100,255,100,1); }
.checkbox + input:not(:disabled):checked:hover + label > span:first-child { background-color: rgba(255,255,255,0); }
.checkbox + input:not(:disabled):not(:checked) + label > span:first-child { background-color: rgba(255,255,255,0); }
.checkbox + input:not(:disabled):checked + label > span:first-child { background-color: rgba(100,255,100,1); }
.checkbox + input:disabled + label > span:first-child { background-color: rgba(200,200,200,1); }
/* default, just in case for any input type, if checkbox class is used by accident, may be ugly but to see it */
.checkbox + input:checked + label > span:first-child
{
background-image: url(/direct/images/checkmark.svg);
}
.checkbox + input[type="radio"]:checked + label > span:first-child
{
background-image: url(/direct/images/checkradio.svg);
}
.body
{
background-color: rgb(235,235,235);
background-image: url(/direct/images/back.svg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
}
#logo
{
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-image: url(/direct/images/logo.png);
background-repeat: no-repeat;
background-position: center;
background-size: 1.5rem 1.5rem;
}
#search
{
background: url(/direct/images/search.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 1rem 1rem;
width: 1.5rem;
height: 1.75rem;
border: 1px solid black;
border-left: 0px;
background-color: transparent;
}
#login_displayname
{
text-decoration: none;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
max-width: 6rem;
margin-left: 1rem;
margin-right: 0.5rem;
display: block;
text-overflow: ellipsis;
}
.LogInOut
{
background-color: transparent;
white-space: nowrap;
/* height: 1.75rem; */
/* margin: 0.1rem 0 0.1rem 0.8rem;
padding: 0.1rem 0 0.1rem 0;*/
cursor: pointer;
text-decoration: none;
}
.LogInOut:hover { text-decoration:underline; }
.user_entry_block { display: table; width: 100%; }
.user_entry_block > div { display: table-row; }
.user_entry_block > div > div { display: table-cell; }
.user_entry_extras { display: table; width: 100%; margin-top: 1rem; }
.user_entry_extras > div { display: table-row; }
.user_entry_extras > div > div { display: table-cell }
.user_entry_extras > div > div:last-child { text-align: right; }
#nav_links { list-style-type: none; }
#nav_links li { display:inline; }
#nav_links li a
{
font-size:1.0rem;
display:inline-block;
padding:0.1rem 0.3rem 0.1rem 0;
text-decoration: none;
color: white;
}
#nav_links li:after
{
display: inline-block;
width:0.5em;
padding-right: 0.3rem;
height:0.5em;
content: url('/direct/images/nav_links_pointer.svg');
}
#nav_links li:first-child a { padding-left: 0; }
#nav_links li:last-child:after { display: none; }
#nav_links li a:hover { text-decoration: underline; }
#nav_links li a:focus { text-decoration: underline; }
/* navigation */
.subscribe_list { list-style-type: none; line-height: 0rem; }
.subscribe_list li { list-style-type: none; display: inline-block; }
.subscribe_list li a { margin-left: 0.5rem; }
.subscribe_list li:first-child a { margin-left: 0; }
#follow_list { list-style-type: none; }
#follow_list li { list-style-type: none; display:inline-block; }
#follow_list li a { margin-left: 0.2rem; }
#follow_list li:first-child a { margin-left: 0; }
#nav_content { width:6rem; position: relative; top: auto; }
#nav_content.fixed { position: fixed; top: 0px; }
/* user help */
#help_content { width:12rem; position: relative; top: auto; }
#help_content.fixed { position: fixed; top: 0px; }
.download
{
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: middle;
margin-right: 0.5rem;
}
/* news */
.latest_news
{
display: table;
width: 100%;
box-sizing: border-box;
padding-top: 1rem;
}
.latest_news > div { display: table-row; }
.latest_news > div > div
{
display: table-cell;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media all and (max-width:35rem)
{
.latest_news
{
padding-top: 0.5rem;
}
}
.latest_news_list { list-style-type: none; }
.latest_news_list li
{
position: relative;
overflow: hidden;
text-overflow: ellipsis;
padding: 0.2rem 0;
}
.news_line { vertical-align: middle;}
.news_link { text-decoration: none; }
.news_link:hover { text-decoration: underline; }
.news_title { text-decoration: none; }
.news_title:hover { text-decoration: underline; }
.news_title:link { color: black; }
.news_title:visited { color: black; }
.news_division { display: block; margin-top: 0.1rem; margin-bottom: 0.1rem; background-color: gray; height: 1px; }
.news_small_icon { display: none; }
.news_big_icon
{
display: table-cell;
text-align:center;
vertical-align:top;
width:5rem;
max-width:5rem;
padding-right:0.5rem;
}
@media all and (max-width:35rem)
{
.news_small_icon { display:table-cell; }
.news_big_icon { display:none; }
}
.news_article_list { list-style-type: none; }
.news_article_list li { margin-bottom: 1rem; }
/* main layout */
.main_content
{
height: 10rem;
min-height: 10rem;
}
.footer_button
{
padding: 0.5rem 1rem;
display: block;
box-sizing: border-box;
}
.footer_items_height
{
width: 20rem;
white-space: nowrap;
}
@media all and (max-width:45rem)
{
.footer_items_height { padding: 0.25rem 0rem; }
}
@media all and (max-width:30rem)
{
.footer_items_height { width: auto; }
}
.free_lr { min-width:0.5rem; }
.free_tb { height:0.75rem; min-height:0.75rem; }
.nav_right { display: block; white-space: nowrap; }
.subscribe_intitle { display: none; }
@media all and (max-width:65rem)
{
.main_column_left { display: none !important; }
.subscribe_intitle { display: inline-block; vertical-align: middle; }
}
@media all and (max-width:55rem) { .main_column_right { display: none !important; } }
.page_title
{
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0.3rem rgba(0,0,0,1);
line-height: 1rem;
}
.page_title_margin_up { height: 3rem; min-height: 3rem; }
.page_title_margin_down { height: 2rem; min-height: 2rem; }
@media all and (max-width:50rem)
{
.page_title_margin_up { height: 2rem; min-height: 2rem; }
.page_title_margin_down { height: 1rem; min-height: 1rem; }
}
@media all and (max-width:30rem)
{
.page_title_margin_up { height: initial; }
.page_title_margin_down { height: 0.25rem; min-height: 0.25rem; }
.free_tb { height:0.25rem; min-height:0.25rem; }
/* .page_title_margin_down { height: initial; }
.page_title { box-shadow: initial; }*/
}
.page_center
{
padding:0 0.75rem;
width: 50rem;
max-width: 50rem;
position: relative;
}
.footer_margin { height:3rem; min-height:3rem; }
@media all and (max-width:30rem)
{
.page_center
{
padding: 0 0.15rem;
}
.footer_margin
{
height:1rem; min-height:1rem;
}
}
/* subscriptions list */
.channels_list { list-style-type: none; }
.channels_list .channels_list { margin-left: 1.5rem; }
.channels_list li { position: relative; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.5rem; }
.channels_list li:last-child { margin-bottom: 0; }
/* paging list and its buttons */
.paging_page_list { list-style-type: none; font-size:1.2rem; margin:0.5rem 0 }
.paging_page_list li { display:inline-block; }
.paging_page_list li .button { margin-right:0.25rem; }
.paging_page_list li:last-child .button { margin-right:0; }
.paging_page_list li div
{
margin-right: 0.5rem;
display: inline-block;
color: black;
padding: 0.2rem 0.5rem;
}
.current_page_button { font-weight: bold; }
/* subscribe and follow media links*/
.media_link { display: inline-block; height: 1.75rem; }
.media_link img { display: inline-block; height: 1.75rem; }
/* current location nav line */
.nav_line { background-color: rgb(14, 116, 178); }
/* footer */
.footer
{
background-color: rgb(200,200,200);
box-shadow: 0 -0.2rem 0.2rem rgba(0,0,0,0.5), 0 0.2rem 0.2rem rgba(0,0,0,0.5);
}
/* products page */
.product { }
.product > div:first-child { display:table; width: 100%; }
.product > div:first-child > div { display:table-row; }
.product_image { display:table-cell; }
.product_text { display:table-cell; }
.product_image_mini { display: none; }
.product .product_image
{
width: 10rem;
min-width: 10rem;
max-width: 10rem;
padding: 0.5rem;
vertical-align: top;
}
.product_image img { width: 10rem; }
.product_text { width:100%; box-sizing: border-box; vertical-align:top; padding:0.5rem; }
.product_title { vertical-align: middle; }
@media all and (max-width:35rem)
{
.product_image
{
display: none;
}
.product_text { padding:0.3rem; }
.product_image_mini { display: inline-block; vertical-align: middle; line-height: 0; }
.product_image_mini > img { width: 3rem; height: 3rem;}
}
@media all and (max-width:25rem)
{
.product_text > h3 { text-align: center; }
.product_title { display: block; }
.product_text { padding: 0; }
}
.product_article
{
padding: 1rem 1rem 1rem 1rem;
min-height: 10rem;
}
.product_article_info
{
float: right;
clear: right;
width: 15rem;
max-width: 15rem;
border: 1px solid rgb(150,150,150);
padding: 0.5rem;
margin: 0.5rem 0 0.5rem 1rem;
}
@media all and (max-width:25rem)
{
.product_article
{
padding: 0.25rem;
}
.product_article_info
{
padding: 0;
}
}
.product_article_info_image { margin-bottom: 1rem; text-align: center; }
.product_article_info_image > img { width: 75%;}
.product_article_buttons { margin-top: 0.5rem; text-align: center; }
.product_article_buttons > a { width: 75%; padding: 0.4rem 1rem; white-space: nowrap; }
.product_article_buttons > a:not(:last-child) { margin-bottom: 0.5rem; }
.product_navigation_buttons { margin: 2rem 0 2rem 0; text-align: center; }
.product_navigation_buttons > a { padding: 0.2rem 1.5rem; margin: 0.2rem 0 0.2rem 0 }
.product_navigation_buttons > a:not(:last-child) { margin-right: 0.5rem; }
@media all and (min-width: 30rem) and (max-width:45rem)
{
.product_article_info { float: initial; clear: initial; max-width:initial; width:100%; max-width:27rem; box-sizing: border-box; margin:0 auto 0.5rem auto; }
.product_article_info > div { display: table; width:100%; }
.product_article_info > div > div { display: table-row; }
.product_article_info_image { display: table-cell; vertical-align:middle; padding-right: 0.5rem; margin:0; width: 9rem; text-align: center; }
.product_article_info_table { display: table-cell; vertical-align:top; }
}
@media all and (max-width:30rem)
{
.product_article_info { float: initial; clear: initial; max-width:initial; width:100%; box-sizing: border-box; margin:0 0 0.5rem 0; }
.product_article_info > div { display: initial; width:100%; }
.product_article_info > div > div { display: initial; }
.product_article_info_image { text-align: center; display: block; width:100%; margin:0.5rem 0 0.5rem 0; }
.product_article_info_image > img { width:10rem; }
.product_article_info_table { display: block; width:100%; }
}
.product_article_info_table > table
{
width:100%;
}
.product_article_info_table > table > tbody > tr > td
{
padding: 0.2rem;
}
.product_article_info_table > table > tbody > tr > td:first-child
{
white-space: nowrap;
vertical-align:top;
font-weight: bold;
}
.product_tableofcontent
{
display: inline-block;
margin: 0;
border: 1px solid rgb(150,150,150);
}
.product_tableofcontent a
{
padding: 0.15rem;
margin-bottom: 0.05rem;
display: inline-block;
}
@media all and (max-width:45rem)
{
.product_tableofcontent a { padding: 0.25rem;}
}
@media all and (max-width:30rem)
{
.product_tableofcontent a { padding: 0.35rem;}
}
.product_tableofcontent > div
{
padding: 0rem 2rem 0.5rem 0.5rem;
}
.product_tableofcontent > div ul
{
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
.product_tableofcontent > div ul > li
{
display: table;
counter-increment: item;
}
.product_tableofcontent > div ul > li:before
{
display: table-cell;
content: counters(item, ".") ". ";
padding-right: 0.5em;
}
.product_tableofcontent > div li ul > li:before { content: counters(item, ".") " "; }
.references { list-style-type: number; margin-left: 1rem; }
.references > li { padding-left: 0.5rem; }
.product_doc_download_title { }
.product_doc_download_title > div { float:right; clear:right; margin:0 0 1rem 1rem; }
.product_doc_download_title > div > img { height: 2rem; } /* the h1 size */
.product_version_descr_check ~ div { display: none; border:1px solid gray; padding: 0.5rem; }
.product_version_descr_check:checked ~ div { display: block; }
.star_superscript
{
vertical-align: top;
display: inline-block;
width: 0.5rem;
height: 0.5rem;
background-image: url(/direct/images/star_gold.svg)
}
.product_version > table tr th,
.product_version > table tr td { padding: 0.25rem; }
@media print
{
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
}
/* support */
.support_faq_radio { display: none; }
.support_faq_block { display: block; border: 1px solid gray; padding: 0rem; margin-bottom:0.2rem; }
.support_faq_answer { padding: 0.5rem;border-top: 1px solid gray; }
.support_faq_question { display: block; background-color: rgb(150,230,150); font-weight: bold; padding: 0.2rem 0.2rem 0.2rem 0.5rem; }
.support_faq_answer_0 { display: block; } .support_faq_radio_0:not(:checked) ~ .support_faq_block_0 > .support_faq_answer_0 { display: none; }
.support_faq_answer_1 { display: block; } .support_faq_radio_1:not(:checked) ~ .support_faq_block_1 > .support_faq_answer_1 { display: none; }
.support_faq_answer_2 { display: block; } .support_faq_radio_2:not(:checked) ~ .support_faq_block_2 > .support_faq_answer_2 { display: none; }
.support_faq_answer_3 { display: block; } .support_faq_radio_3:not(:checked) ~ .support_faq_block_3 > .support_faq_answer_3 { display: none; }
.support_faq_answer_4 { display: block; } .support_faq_radio_4:not(:checked) ~ .support_faq_block_4 > .support_faq_answer_4 { display: none; }
.support_faq_answer_5 { display: block; } .support_faq_radio_5:not(:checked) ~ .support_faq_block_5 > .support_faq_answer_5 { display: none; }
.support_faq_answer_6 { display: block; } .support_faq_radio_6:not(:checked) ~ .support_faq_block_6 > .support_faq_answer_6 { display: none; }
.support_faq_answer_7 { display: block; } .support_faq_radio_7:not(:checked) ~ .support_faq_block_7 > .support_faq_answer_7 { display: none; }
.support_faq_answer_8 { display: block; } .support_faq_radio_8:not(:checked) ~ .support_faq_block_8 > .support_faq_answer_8 { display: none; }
.support_faq_answer_9 { display: block; } .support_faq_radio_9:not(:checked) ~ .support_faq_block_9 > .support_faq_answer_9 { display: none; }
/* contact */
.contact_form { max-width: 35rem; margin: 2rem auto 2rem auto; }
.contact_form > div:first-of-type { display: table; width: 100%; text-align: left; }
.contact_form > div:first-of-type > div { display: table-row; }
.contact_form > div:first-of-type > div > div { display: table-cell; padding: 0.2rem; vertical-align: top; }
.contact_form > div:first-of-type > div > div:first-child { white-space: nowrap; width: 6rem; }
.contact_form > div:first-of-type > div > div > input,
.contact_form > div:first-of-type > div > div > textarea { width:100%; box-sizing: border-box; }
@media all and (max-width:45rem)
{
.contact_form > div:first-of-type > div { display: block; }
.contact_form > div:first-of-type > div > div { display: block; }
.contact_form > div:first-of-type > div > div { padding: 0rem; }
.contact_form > div:first-of-type > div:not(:first-child) > div:first-child { display: block; padding-top: 0.5rem;}
}
.contact_details { max-width: 35rem; margin: 2rem auto 2rem auto; text-align: center }
.contact_mails { max-width: 30rem; margin: 2rem auto 2rem auto; }
.contact_mails > div:first-of-type { display: table; width: 100%; text-align: left; }
.contact_mails > div:first-of-type > div { display: table-row; }
.contact_mails > div:first-of-type > div > div { display: table-cell; padding: 0.2rem 0.5rem 0.2rem 0.5rem; vertical-align: middle; }
.contact_mails > div:first-of-type > div > div:first-child { width: 17rem; text-align: right; line-height:0; }
.contact_mails > div:first-of-type > div > div:not(:first-child) { text-align: left; vertical-align: middle; border-left: 1px solid lightgray }
.contact_mails > div:first-of-type > div:not(:first-child) > div { border-top: 1px solid lightgray }
.contact_email_big { display: inline-block; width: 16.5rem; height: auto; }
.contact_email_small { display: none; width: 11rem; height: auto; }
@media all and (max-width:30rem)
{
.contact_email_big { display: none; }
.contact_email_small { display: inline-block; }
}
@media all and (max-width:45rem)
{
.contact_mails > div:first-of-type { display: block; }
.contact_mails > div:first-of-type > div { display: block; }
.contact_mails > div:first-of-type > div > div:first-child { display: block; text-align: center; padding: 0.2rem 0.0rem 0.2rem 0.0rem; text-align: center; border: 0; width: auto; }
.contact_mails > div:first-of-type > div > div:not(:first-child) { display: block; text-align: center; padding: 0.2rem 0.0rem 0.2rem 0.0rem; text-align: center; border: 0; width: auto; }
.contact_mails > div:first-of-type > div:not(:first-child) > div:first-child { border-top: 1px solid lightgray; margin-top: 1rem; padding-top: 1rem; }
}
.system_page_title
{
color: rgb(64,64,64);
text-align: center;
font-size: 1.2rem;
padding: 2rem;
}
.rating_block { display: table; width: 100%; margin: auto }
.rating_block > div { display: table-row; }
.rating_block > div > div { display: table-cell; vertical-align: middle; }
.rating_block > div:not(:first-child) > div { border-top: 1px solid gray; padding-top: 1rem }
.rating_block > div:not(:last-child) > div { padding-bottom: 1rem }
.rating_block > div > div:nth-child(1) { width: 3rem; min-width: 3rem; max-width: 3rem;text-align:center; }
.rating_block > div > div:nth-child(1) > img { width: 2rem; min-width: 2rem; max-width: 2rem;}
.rating_block > div > div:nth-child(2) { min-width: 8rem; text-align:left; }
.rating_item { display: table; width:100%; }
.rating_item > div { display: table-row; }
.rating_item > div > div { display: table-cell; }
.rating_item > div > div:first-child { text-align:left; padding:0 1rem 0 1rem; }
.rating_item > div > div:not(:first-child) { width: 5rem; min-width: 5rem; max-width: 5rem; }
.rating_item > div > div > span { display: inline-block; }
.rating_none ~ label
{
width:1rem; height: 1rem;
display: inline-block;
vertical-align: middle;
background-image: url(/direct/images/star_none.svg);
}
.rating_none:not(:checked) ~ label { background-image: url(/direct/images/star_gold.svg); }
.rating_none:not(:checked) ~ input:checked ~ label { background-image: url(/direct/images/star_gray.svg); }
.rating_none { display: none; }
.rating_value { display: none; }
/* main table, that will be split first */
.buy_wizzard_title { display: table; width: 100%; margin-bottom: 1rem; }
.buy_wizzard_title > div { display: table-row; }
.buy_wizzard_title > div > div { display: table-cell; width: 50%; }
/* inner table, that will be split second */
.buy_wizzard_title > div > div > div { display: table; width: 100%; }
.buy_wizzard_title > div > div > div > div { display: table-row; }
.buy_wizzard_title > div > div > div > div > div { display: table-cell; width: 50%; }
.buy_wizard_content { max-width:35rem; margin:auto; min-height: 20rem; }
.buy_wizzard_title_step { display: table; width:100%; white-space: nowrap; }
.buy_wizzard_title_step > div { display: table-row; }
.buy_wizzard_title_step > div > div { display: table-cell; }
.buy_wizzard_title_text
{
border: 1px solid black;
padding: 0.3rem;
}
.buy_wizzard_title_text > span:first-child
{
display: inline-block;
text-align: center;
line-height: 1.5rem;
width: 1.5rem;
margin-right: 0.5rem;
border: 1px solid black;
}
@media all and (max-width:45rem)
{
.buy_wizzard_title { display: block; width: auto; }
.buy_wizzard_title > div { display: block; width: auto; }
.buy_wizzard_title > div > div { display: block; width: auto; }
.buy_wizzard_title_text { padding:0.2rem; }
}
@media all and (max-width:25rem)
{
.buy_wizzard_title > div > div > div { display: block; width: auto; }
.buy_wizzard_title > div > div > div > div { display: block; width: auto; }
.buy_wizzard_title > div > div > div > div > div { display: block; width: auto; }
}
.buy_wizzard_title_arrow
{
width: 0.5rem;
min-width: 0.5rem;
vertical-align: middle;
}
.buy_wizzard_title_arrow > span
{
display: block;
height:0;
border-right:0 ;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-left: 0.5rem solid black;
}
.buy_wizzard_step_prev { background-color: rgb(58, 124, 55); color: white; }
.buy_wizzard_step_curr { background-color: rgb(139, 195, 134); color: black; }
.buy_wizzard_step_next { background-color: rgb(236, 236, 236); color: black; }
.buy_wizzard_button { padding: 0.25rem 1rem; }
.buy_wizzard_button_prev { }
.buy_wizard_module_container { max-width: 28rem; margin: auto; padding: 0 0.5rem; }
.buy_wizzard_module_list { list-style-type: none; width:100%; display: table; }
.buy_wizzard_module_list > li { display: table-row; }
.buy_wizzard_module_list > li > div { display: table-cell; }
.buy_wizzard_module_list > li:not(:last-child) > p { padding-bottom: 0.5rem; }
.buy_wizard_support { border: 2px solid rgba(100,100,100,0.5); padding: 0.5rem; margin-top: 0.5rem; }
.buy_wizard_module { display: table; width: 100%; }
.buy_wizard_navigation { text-align:center; margin-top: 2rem; }
.buy_wizard_module_check { display: table-cell; width: 1.2rem; }
.buy_wizard_module_name { display: table-cell; position: relative; overflow: hidden; padding-right: 0.5rem; font-weight: bold; }
.buy_wizard_module_price { display: table-cell; width: 0.01%; vertical-align: bottom; white-space: nowrap; padding-left: 0.5rem; font-weight: bold; }
.buy_wizard_module_name:after
{
content: "";
position: absolute;
bottom: 0.45em;
margin-left: 0.5em;
width: 100%;
border-bottom: 1px dotted rgba(0,0,0,0.5);
}
.buy_wizard_func_title {}
.buy_wizard_func_title_text
{
padding: 0.5rem;
background-color: rgb(230,230,230);
background-image: linear-gradient(rgba(250,250,250,1), rgba(220,220,220,1));
border: 1px solid rgba(100,100,100,0.75);
position: relative;
font-size: 1.25rem;
font-weight: bold;
z-index: 2;
}
.buy_wizard_func_title_text:before
{
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height:50%;
display: block;
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255, 0.25));
z-index: -1;
}
.buy_wizard_func_title_text:after
{
content: "";
position: absolute;
right: 1rem;
top: -0.375rem;
width: 2.5rem;
height: 2.5rem;
background-image: url(/direct/images/buy_flag.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 100% 100%;
}
.buy_wizard_func_title_descr { padding:0.5rem; }
.buy_wizard_functionality
{
margin-top: 1rem;
}
.user_verify_options { display: table; width: 100%; }
.user_verify_option { display: table; width: 100%; border: 1px solid gray; margin: 1rem 0; padding: 0.5rem; box-sizing: border-box;}
.user_verify_option > div { display: table-row; }
.user_verify_option > div > div { display: table-cell; width:40%; vertical-align:middle; }
.user_verify_control { display: table; width:100%; }
.user_verify_control > div { display: table-row; }
.user_verify_control > div > div { display: table-cell; vertical-align:middle; }
.user_verify_input { width: 100%; box-sizing: border-box; margin-bottom:0.5rem; border: 1px solid black; background-color: white; padding: 0.25rem; }
.user_verify_original { width: 100%; box-sizing: border-box; margin-bottom:0.5rem; border: 1px solid black; color: gray; background-color: lightgray; padding: 0.25rem; }
.user_verify_button { white-space: nowrap; width: 100%; box-sizing: border-box; }
@media all and (max-width:30rem)
{
.user_verify_options { display: block; width: initial; }
.user_verify_option { display: block; }
.user_verify_option > div { display: block; }
.user_verify_option > div > div { display: block; width: initial; }
}
/*=============================================*/
.functionality + .functionality { margin-top: 1rem; }
.functionality_title
{
padding: 0.5rem;
background-color: rgb(230,230,230);
background-image: linear-gradient(rgba(250,250,250,1), rgba(220,220,220,1));
border: 1px solid rgba(100,100,100,0.75);
position: relative;
z-index: 2;
}
.functionality_title:before
{
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height:50%;
display: block;
background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255, 0.25));
z-index: -1;
}
.module
{
border: 1px solid rgba(100,100,100,0.5);
padding: 0.25rem;
margin-left: 1rem;
}
/*=============================================*/
.user_purchase_list { display: table; list-style-type: none; width: 100%; border: 1px solid black; }
.user_purchase_list > li { display: table-row; }
.user_purchase_list > li > div { display: table-cell; padding: 0.5rem; }
.buy_wizard_bill_table { display: table; width: 100%; margin: 1rem 0; }
.buy_wizard_bill_table > div:nth-of-type(2n ) > div { background-color:rgba(255,255,255,1); }
.buy_wizard_bill_table > div:nth-of-type(2n+1) > div { background-color:rgba(240,240,240,1); }
.buy_wizard_bill_table > div > div { padding: 0.5rem 0.25rem }
.buy_wizard_bill_table > div > div:first-child { white-space: nowrap; padding-right: 1rem; vertical-align: middle; width:27%; }
.buy_wizard_bill_table > div > div:last-child { width: 100%; }
/*=============================================*/
.bill_company_row { display: none; }
.bill_private_row { display: none; }
.bill_company_text { display: none; }
.bill_private_text { display: none; }
.bill_company_cell_text { display: none; }
.bill_private_cell_text { display: none; }
#bill_type_company:checked ~ div .bill_company_row { display: table-row; }
#bill_type_company:checked ~ .bill_company_text { display: block; }
#bill_type_company:checked ~ div .bill_private_row { display: table-row; }
#bill_type_company:checked ~ div .bill_company_cell_text { display: block; }
#bill_type_private:checked ~ div .bill_private_cell_text { display: block; }
#bill_type_private:checked ~ div .bill_private_row { display: table-row; }
#bill_type_private:checked ~ .bill_private_text { display: block; }
.buy_wizard_input { padding: 0.2rem; }
/*=============================================*/
.buy_wizard_summary_bill { width: 100%; }
.buy_wizard_summary_bill > tbody > tr > td { vertical-align: top; padding: 0.2rem 0; }
.buy_wizard_summary_bill > tbody > tr > td:first-child { width: 0.01%; white-space: nowrap; }
.buy_wizard_summary_bill > tbody > tr > td:not(:first-child) { width: 100%; }
.buy_wizard_summary_bill > tbody > tr > td:last-child { font-weight: bold; padding-left: 0.5rem; }
.buy_wizard_summary_bill > tbody > tr:not(:last-child) > td:last-child { margin-bottom: 0.5rem; }
/*
.delicate_shadow
{
box-shadow: 0 0 0.1rem rgba(0,0,0,0.5);
}
.delicate_shadow:before
{
box-shadow: -0.25rem 0 0.25rem -0.25rem inset;
content: "";
height: 100%;
left: -15px;
position: absolute;
top: 0;
width: 15px;
}
.delicate_shadow:after
{
box-shadow: 0.25rem 0 0.25rem -0.25rem inset;
content: "";
height: 100%;
position: absolute;
top:0px;
right: -15px;
width: 15px;
} */
.latest_ver_item + .latest_ver_item { margin-top: 0.5rem; }
.latest_ver_item > div > div > .latest_ver_middle { display: none; }
.latest_ver_item:hover > div > div > .latest_ver_middle { display: block; }
/*=============================================*/
.section + .section { margin-top: 1rem }
.section ul { margin: 0.5rem 0 0.5rem 2rem; }
.section ul > li + li { margin-top: 0.5rem; }
/* explicitly disable this for the table of content */
.product_tableofcontent ul > li + li { margin: 0; }
.hidden_switch
{
font-style: italic;
color: #0000EE;
}
.hidden_switch:hover
{
text-decoration: underline;
cursor: pointer;
}
.hidden > input[value="0"] ~ span:first-of-type { display: inherit; }
.hidden > input[value="0"] ~ span:first-of-type { display: inherit; }
.hidden > input[value="0"]:checked ~ span:first-of-type { display: none; }
.hidden > input[value="0"] ~ span:not(:first-of-type) { display: none; }
.hidden > input[value="0"]:checked ~ span:not(:first-of-type) { display: inherit; }
.grammar
{
text-align: center;
}
.grammar > div
{
min-width: 20rem;
margin: 0.5rem;
border: 1px solid rgba(100,100,100,0.5);
display: inline-block;
}
.grammar > div > div
{
border-bottom: 1px solid rgba(100,100,100,0.5);
padding: 0.5rem;
white-space: nowrap;
}
.grammar > div > pre
{
text-align: left;
padding: 0.5rem;
}
.captcha_refresh
{
background-color: transparent;
background-image: url(/direct/images/refresh_green.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 100%;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}
.captcha_border
{
display: block;
border: 1px solid rgb(110,110,110);
box-shadow: 0 0.0 0.05rem rgba(0,0,0,0.5);
}
.captcha_refresh:hover
{
border-color: black;
background-size: 95%;
}
.captcha { display: table; width: 100%; box-sizing: border-box; }
.captcha > span { display:table-row; }
.captcha > span > span { display:table-cell; vertical-align: middle; width: 100%; white-space: nowrap; }
.captcha > span > span:not(:first-child) { padding-left: 0.1rem; }
.captcha > span > span > span { display: block; }
.captcha_image_table { display: table; width: 100%; box-sizing: border-box; }
.captcha_image_table > span { display: table-row; }
.captcha_image_table > span > span { display: table-cell; }
.captcha_image_table > span > span:first-child { }
.captcha_refresh_image
{
display: inline-block; vertical-align: middle; width: 6rem; height: 3rem;
}
.captcha_refresh_button
{
display: inline-block; margin-left: 0.1rem; vertical-align: middle; width: 2rem; height: 3rem;
}
@media all and (max-width:25rem)
{
.captcha { display: inline-block; width: 100%; box-sizing: border-box; }
.captcha > span { display: table; width: 100%; box-sizing: border-box; }
.captcha > span > span { display:table-row; }
.captcha > span > span > span { display:table-cell; vertical-align: middle; width: 100%; padding-left: 0rem; }
.captcha_image_table > span > span:first-child { width: 100%; text-align: center; }
}
.print_company_title { display: table; width: 100% }
.print_company_title > div { display: table-row; }
.print_company_title > div > div { display: table-cell; }
.print_company_title > div > div > div { white-space: nowrap; }
.license_details_wrap { display: table; width: 100%; max-width: 25rem; margin: auto; border-top: 1px solid rgb(160,160,160); border-bottom: 1px solid rgb(200,200,200); }
.license_details_wrap > div { display: table-row; }
.license_details_wrap > div > div { display: table-cell; vertical-align: middle; padding: 0.5rem; }
.license_details_wrap > div > div:first-child { width: 100%; }
.license_details_wrap > div > div:not(:first-child) { line-height: 1rem; text-align: center; }
.license_details { display: table; width: 100%; }
.license_details > div { display: table-row; }
.license_details > div > div { display: table-cell; }
.license_details > div > div:first-child { white-space: nowrap; padding-right: 1rem; font-style: italic; }
.license_details > div > div:not(:first-child) { width: 100%; font-weight: bold; }
@media all and (max-width:30rem)
{
.license_details { display: block; width: 100%; text-align: center; }
.license_details > div { display: block; }
.license_details > div > div { display: block; }
.license_details > div > div:first-child { white-space: nowrap; padding-right: 0rem; }
.license_details > div > div:not(:first-child) { width: 100%; font-weight: bold; }
.license_details_wrap { display: block; width: 100%; max-width: 30rem; margin: auto; }
.license_details_wrap > div { display: block; }
.license_details_wrap > div > div { display: block; vertical-align: middle; padding: 0.5rem; }
.license_details_wrap > div > div:first-child { width: 100%; }
.license_details_wrap > div > div:not(:first-child) { line-height: 1rem; }
}
/*=============================================*/
.tgs_main
{
display: table;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.tgs_main_row
{
display: table-row;
height: 100%;
}
.tgs_main_cell
{
display: table-cell;
padding: 0 0.5rem;
vertical-align: top;
height: 100%;
}
.tgs_main_cell_buttons
{
padding: 0;
min-width: 6rem;
}
.tgs_main_cell_middle
{
width: 100%;
box-sizing: border-box;
}
.tgs_main_cell_middle > div
{
width: 100%;
height: 100%;
box-sizing: border-box;
}
.tgs_main_fullscreen_row { display: table-row; }
.tgs_main_fullscreen_row > div { display: table-cell; text-align: center; vertical-align: middle; }
#tgs_welcome
{
display: block;
text-align: justify;
max-width: 25rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#tgs_start
{
padding-left: 2rem;
padding-right: 2rem;
}
.tgs_button
{
white-space: nowrap;
display: block;
background-color: rgb(150,220,150);
padding: 0.2rem 0.5rem;
height: 2rem;
line-height: 1.5rem;
width: 100%;
text-decoration: none;
border: 1px solid rgb(110,110,110);
box-shadow: 0 0.0 0.05rem rgba(0,0,0,0.5);
text-align: center;
cursor: pointer;
color: inherit;
box-sizing: border-box;
position: relative;
}
.tgs_button:focus
{
outline: 1px dotted black;
}
.tgs_button:hover
{
background-color: rgb(150,245,150);
background-image: initial;
text-decoration: underline;
}
.tgs_button_different { background-color: rgb(70,190,70); }
.tgs_button_active
{
background-color: rgb(255,255,210);
border-color: black;
font-weight: bold;
box-shadow: 0 0 0.2rem rgba(0,0,0,1);
}
.tgs_button_active:hover
{
background-color: rgb(190,250,190);
}
.tgs_tab_mark
{
display: inline-block;
box-sizing: border-box;
border-radius: 0.3rem;
vertical-align: middle;
text-align: center;
position: absolute;
top:0.1rem;
right:0.1rem;
width: 0.7rem;
height: 0.7rem;
font-size: 0.6rem;
line-height: 0.6rem;
border: 1px solid black;
color: black;
background-color: rgb(255,250,190);
}
.tgs_tab_mark_disabled { display: none; }
.tgs_tab
{
display: none;
width: 100%;
height: 100%;
min-height: 5rem;
box-sizing: border-box;
border: 0.1rem ridge rgb(200,200,200);
}
.tgs_tab_active
{
display: block;
}
.tgs_lp_container
{
width: 100%;
display: table;
box-sizing: border-box;
}
.tgs_lp_container > div { display: table-row; }
.tgs_lp_container > div:last-child { height: 2rem; }
.tgs_lp_container > div > div { display: table-cell; position: relative; }
.tgs_lp_menu
{
width: 100%;
box-sizing: border-box;
height: 2rem;
display: table;
background-color: rgb(96,96,96);
}
.tgs_lp_menu > div { display: table-row; }
.tgs_lp_menu > div > div { display: table-cell; vertical-align: middle; }
.tgs_lp_menu > div > div:first-child { width: 100%; text-align: left; padding-left: 0.25rem; }
.tgs_operation_button
{
white-space: nowrap;
display: inline-block;
vertical-align: middle;
margin: 0.1rem;
}
.tgs_text
{
position: absolute;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
resize: none;
padding: 0.25rem;
overflow: auto;
white-space: pre;
border: none;
background-color: rgb(32,32,32);
color: white;
}
.tgs_height
{
height: 100%;
}
.tag_view_loading
{
height: 10rem;
padding: 3rem;
box-sizing: border-box;
}
#tgs_view
{
width: 100%;
overflow: auto;
box-sizing: border-box;
background-color: rgb(64,64,64);
color: white;
position: relative;
}
#tgs_options
{
width: 100%;
padding: 0.5rem;
overflow: auto;
box-sizing: border-box;
background-color: rgb(96,96,96);
color: white;
}
#tgs_options > div { display: table; width: 100% }
#tgs_options > div > div { display: table-row; }
#tgs_options > div > div > div { display: table-cell; padding: 0.1rem 0rem; text-align: left; }
#tgs_options > div > div > div:first-child { width: 15rem; }
#tgs_options > div > div > div > select { width: 100%; box-sizing: border-box; }
#tgs_examples
{
width: 100%;
overflow: auto;
box-sizing: border-box;
background-color: rgb(96,96,96);
position: absolute;
color: white;
}
#tgs_examples > div { display: table; width: 100%; padding: 0.5rem; box-sizing: border-box; }
#tgs_examples > div > div { display: table-row; }
#tgs_examples > div > div > div { display: table-cell; padding: 0.1rem 0rem; text-align: left; vertical-align: middle; }
#tgs_examples > div > div > div:last-child { width: 5rem; text-align: center; }
#tgs_examples > div > div:not(:last-child) > div { border-bottom: 1px dashed rgb(150,150,150); }
.tgs_example_load
{
white-space: nowrap;
vertical-align: middle;
margin: 0.1rem;
display: block;
background-color: rgb(200,200,200);
padding: 0.2rem 0.5rem;
height: 2rem;
line-height: 1.5rem;
width: 5rem;
text-decoration: none;
border: 1px solid rgb(110,110,110);
box-shadow: 0 0.0 0.05rem rgba(0,0,0,0.5);
text-align: center;
cursor: pointer;
color: black;
box-sizing: border-box;
box-shadow: 0 0 0.1rem rgba(0,0,0,0.5);
}
.tgs_example_load:focus
{
outline: 1px dotted black;
}
.tgs_example_load:hover
{
background-color: rgb(240,240,200);
text-decoration: underline;
}
#tgs_view > div { display: table; width: 100%; position: absolute; }
#tgs_view > div > div { display: table-row; }
#tgs_view > div > div > div { display: table-cell; vertical-align: middle; line-height: 0rem; }
#tgs_log
{
width: 100%;
box-sizing: border-box;
overflow: auto;
background-color: rgb(64,64,64);
color: white;
}
.tgs_log_message
{
display: block;
text-align: left;
padding: 0 0.25rem;
background-color: rgb(96,96,96);
color: white;
}
.tgs_log_message + .tgs_log_message
{
border-top: 1px solid black;
}
.tag_view_image
{
display: inline-block;
}
.tgs_fullscreen
{
text-align: center;
position: fixed;
z-index:90;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: auto;
background-color: rgba(200,200,200,1);
padding: 0.1rem;
background-color: rgb(235,235,235);
background-image: url(/direct/images/back.svg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
}
.tgs_normalscreen
{
text-align: center;
width: 100%;
height: 25rem;
}
.tgs_container
{
text-align: center;
overflow: auto;
}
.tgs_buttons_table
{
width: 100%;
box-sizing: border-box;
}
.tgs_buttons_table > div > div
{
padding-bottom: 0.5rem;
}
.tgs_bar
{
display: none;
}
.tgs_bar_fs_big
{
display: block;
padding-bottom: 0.5rem;
}
.tgs_bar_fs_small
{
display: none;
}
@media all and (max-width:35rem)
{
.tgs_bar_fs_big
{
display: none;
}
.tgs_bar_fs_small
{
display: block;
}
.tgs_main
{
display: block;
}
.tgs_main_row
{
display: table;
box-sizing: border-box;
width: 100%;
}
.tgs_main_cell
{
display: table-row;
height: 100%;
}
.tgs_main_cell:first-child,
.tgs_main_cell:last-child
{
height: 1rem;
}
.tgs_main_cell > div
{
display: table-cell;
vertical-align: top;
}
.tgs_main_cell_middle
{
}
.tgs_bar_table
{
display: table;
width: 100%;
box-sizing: border-box;
}
.tgs_bar_table > div
{
display: table-row;
}
.tgs_bar_table > div > div
{
display: table-cell;
padding-bottom: 0.1rem;
}
.tgs_buttons_table
{
display: table;
}
.tgs_buttons_table > div
{
display: table-row;
}
.tgs_buttons_table > div > div
{
display: table-cell;
width: 6rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
.tgs_buttons_table > div > div:not(:first-child)
{
padding-left: 0.25rem;
}
.tgs_buttons_table > div > div:not(:last-child)
{
padding-right: 0.25rem;
}
.tgs_main_fullscreen_row { display: block; }
.tgs_main_fullscreen_row > div { display: block; }
.tgs_button
{
height: 1.8rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
line-height: 1rem;
}
}
/*=============================================*/
.views_main
{
display: table;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.views_main_row
{
display: table-row;
height: 100%;
}
.views_main_cell
{
display: table-cell;
padding: 0 0.5rem;
vertical-align: top;
height: 100%;
}
.views_main_cell_buttons
{
padding: 0;
min-width: 6rem;
}
.views_main_cell_middle
{
width: 100%;
box-sizing: border-box;
}
.views_main_cell_middle > div
{
width: 100%;
height: 100%;
box-sizing: border-box;
}
.views_main_fullscreen_row { display: table-row; }
.views_main_fullscreen_row > div { display: table-cell; text-align: center; vertical-align: middle; }
#views_welcome
{
display: block;
text-align: justify;
max-width: 25rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#views_start
{
padding-left: 2rem;
padding-right: 2rem;
}
.views_button
{
white-space: nowrap;
display: block;
background-color: rgb(150,220,150);
padding: 0.2rem 0.5rem;
height: 2rem;
line-height: 1.5rem;
width: 100%;
text-decoration: none;
border: 1px solid rgb(110,110,110);
box-shadow: 0 0.0 0.05rem rgba(0,0,0,0.5);
text-align: center;
cursor: pointer;
color: inherit;
box-sizing: border-box;
position: relative;
}
.views_button_different { background-color: rgb(70,190,70); }
.views_button:focus
{
outline: 1px dotted black;
}
.views_button:hover
{
background-color: rgb(150,245,150);
background-image: initial;
text-decoration: underline;
}
.views_button_active
{
background-color: rgb(255,255,210);
border-color: black;
font-weight: bold;
box-shadow: 0 0 0.2rem rgba(0,0,0,1);
}
.views_button_active:hover
{
background-color: rgb(190,250,190);
}
.views_tab_mark
{
display: inline-block;
box-sizing: border-box;
border-radius: 0.3rem;
vertical-align: middle;
text-align: center;
position: absolute;
top:0.1rem;
right:0.1rem;
width: 0.7rem;
height: 0.7rem;
font-size: 0.6rem;
line-height: 0.6rem;
border: 1px solid black;
color: black;
background-color: rgb(255,250,190);
}
.views_tab_mark_disabled { display: none; }
.views_tab
{
display: none;
width: 100%;
height: 100%;
min-height: 5rem;
box-sizing: border-box;
border: 0.1rem ridge rgb(200,200,200);
}
.views_tab_active
{
display: block;
}
.views_lp_container
{
width: 100%;
display: table;
box-sizing: border-box;
}
.views_lp_container > div { display: table-row; }
.views_lp_container > div:last-child { height: 2rem; }
.views_lp_container > div > div { display: table-cell; position: relative; }
.views_lp_menu
{
width: 100%;
box-sizing: border-box;
height: 2rem;
display: table;
background-color: rgb(96,96,96);
}
.views_lp_menu > div { display: table-row; }
.views_lp_menu > div > div { display: table-cell; vertical-align: middle; }
.views_lp_menu > div > div:first-child { width: 100%; text-align: left; padding-left: 0.25rem; }
.views_operation_button
{
white-space: nowrap;
display: inline-block;
vertical-align: middle;
margin: 0.1rem;
}
.views_text
{
position: absolute;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
resize: none;
padding: 0.25rem;
overflow: auto;
white-space: pre;
border: none;
background-color: rgb(32,32,32);
color: white;
font-family: "Courier New", "Courier", "monospace";
}
.views_height
{
height: 100%;
}
.tag_view_loading
{
height: 10rem;
padding: 3rem;
box-sizing: border-box;
}
#views_view
{
width: 100%;
overflow: auto;
box-sizing: border-box;
position: relative;
background-position: 0px 0px, 20px 20px;
background-size: 40px 40px;
background-image: linear-gradient(45deg, rgb(240,240,240) 25%, transparent 25%, transparent 75%, rgb(240,240,240) 75%, rgb(240,240,240) 100%),
linear-gradient(45deg, rgb(240,240,240) 25%, white 25%, white 75%, rgb(240,240,240) 75%, rgb(240,240,240) 100%);
}
#pdfview
{
width: 100%;
height: 100%;
overflow: none;
box-sizing: border-box;
position: relative;
}
#pdfview > object
{
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
position: absolute;
}
#views_options
{
width: 100%;
padding: 0.5rem;
overflow: auto;
box-sizing: border-box;
background-color: rgb(96,96,96);
color: white;
}
#views_options > div { display: table; width: 100% }
#views_options > div > div { display: table-row; }
#views_options > div > div > div { display: table-cell; padding: 0.1rem 0rem; text-align: left; }
#views_options > div > div > div:first-child { width: 10rem; }
#views_options > div > div > div > select { width: 100%; box-sizing: border-box; }
#views_examples
{
width: 100%;
overflow: auto;
box-sizing: border-box;
background-color: rgb(96,96,96);
position: absolute;
color: white;
}
#views_examples > div { display: table; width: 100%; padding: 0.5rem; box-sizing: border-box; }
#views_examples > div > div { display: table-row; }
#views_examples > div > div > div { display: table-cell; padding: 0.1rem 0rem; text-align: left; vertical-align: middle; }
#views_examples > div > div > div:last-child { width: 5rem; text-align: center; }
#views_examples > div > div:not(:last-child) > div { border-bottom: 1px dashed rgb(150,150,150); }
.views_example_load
{
white-space: nowrap;
vertical-align: middle;
margin: 0.1rem;
display: block;
background-color: rgb(200,200,200);
padding: 0.2rem 0.5rem;
height: 2rem;
line-height: 1.5rem;
width: 5rem;
text-decoration: none;
border: 1px solid rgb(110,110,110);
box-shadow: 0 0.0 0.05rem rgba(0,0,0,0.5);
text-align: center;
cursor: pointer;
color: black;
box-sizing: border-box;
box-shadow: 0 0 0.1rem rgba(0,0,0,0.5);
}
.views_example_load:focus
{
outline: 1px dotted black;
}
.views_example_load:hover
{
background-color: rgb(240,240,200);
text-decoration: underline;
}
#views_view > div { display: table; width: 100%; position: absolute; }
#views_view > div > div { display: table-row; }
#views_view > div > div > div { display: table-cell; vertical-align: middle; line-height: 0rem; }
#views_log
{
width: 100%;
box-sizing: border-box;
overflow: auto;
background-color: rgb(64,64,64);
color: white;
}
.views_log_message
{
display: block;
text-align: left;
padding: 0 0.25rem;
background-color: rgb(96,96,96);
color: white;
}
.views_log_message + .views_log_message
{
border-top: 1px solid black;
}
.tag_view_image
{
display: inline-block;
}
.views_fullscreen
{
text-align: center;
position: fixed;
z-index:90;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: auto;
background-color: rgba(200,200,200,1);
padding: 0.1rem;
background-color: rgb(235,235,235);
background-image: url(/direct/images/back.svg);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
}
.views_normalscreen
{
text-align: center;
width: 100%;
height: 25rem;
}
.views_container
{
text-align: center;
overflow: auto;
}
.views_buttons_table
{
width: 100%;
box-sizing: border-box;
}
.views_buttons_table > div > div
{
padding-bottom: 0.5rem;
}
.views_bar
{
display: none;
}
.views_bar_fs_big
{
display: block;
padding-bottom: 0.5rem;
}
.views_bar_fs_small
{
display: none;
}
@media all and (max-width:35rem)
{
.views_bar_fs_big
{
display: none;
}
.views_bar_fs_small
{
display: block;
}
.views_main
{
display: block;
}
.views_main_row
{
display: table;
box-sizing: border-box;
width: 100%;
}
.views_main_cell
{
display: table-row;
height: 100%;
}
.views_main_cell:first-child,
.views_main_cell:last-child
{
height: 1rem;
}
.views_main_cell > div
{
display: table-cell;
vertical-align: top;
}
.views_main_cell_middle
{
}
.views_bar_table
{
display: table;
width: 100%;
box-sizing: border-box;
}
.views_bar_table > div
{
display: table-row;
}
.views_bar_table > div > div
{
display: table-cell;
padding-bottom: 0.1rem;
}
.views_buttons_table
{
display: table;
}
.views_buttons_table > div
{
display: table-row;
}
.views_buttons_table > div > div
{
display: table-cell;
width: 6rem;
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
.views_buttons_table > div > div:not(:first-child)
{
padding-left: 0.25rem;
}
.views_buttons_table > div > div:not(:last-child)
{
padding-right: 0.25rem;
}
.views_main_fullscreen_row { display: block; }
.views_main_fullscreen_row > div { display: block; }
.views_button
{
height: 1.8rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
line-height: 1rem;
}
}
/* styles */
.data_table { width:100%; table-layout:fixed; margin-top:0.2rem;}
.data_table thead { }
.data_table tbody { }
.data_table tr { }
.data_table tr th,
.data_table tr td { vertical-align:top; padding: 0.2rem; border:1px solid gray; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.data_table_content { }
.data_table tr:hover { word-wrap:break-word; }
.data_table_header { display: none; }
@media screen and (max-width: 40rem)
{
.data_table { display: block; width: initial; }
.data_table thead { display: none; }
.data_table tbody { display: table; width:100%; }
.data_table tr { display: table-row-group; }
.data_table tr td { display: table-row; padding: initial; border: initial; max-width: initial; overflow: initial; text-overflow: initial; }
.data_table tr:hover { word-wrap:unset; }
.data_table_header { font-weight: bold; }
.data_table_header,
.data_table_content { display: table-cell; padding: 0.2rem; border:1px solid gray; text-align:left; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.data_table td:hover { word-wrap:break-word; }
}
.data_table tr th { background-color:rgb(205,205,235); }
.data_table tr:nth-of-type(2n ) td { background-color:rgba(255,255,255,1); }
.data_table tr:nth-of-type(2n+1) td { background-color:rgba(240,240,240,1); }
/* table column visibility control */
/* the splitter 'hr' visibility depends also from the switch */
.columnlist_split_top { display:none; }
.columnlist_split_bottom { display:none; }
.columnlist_switch:checked ~ .columnlist_split_top { display: block; margin:0.1rem 0 0.2rem; }
.columnlist_switch:checked ~ .columnlist_split_bottom { display: block; margin:0.2rem 0 0.2rem; }
.columnlist_switch + label
{
display:inline-block;
border:1px solid black;
padding:0.1rem 0.2rem;
margin-top:0.2rem;
}
/* when switch is 'on' the checks + their label are visible */
.columnlist_switch:checked ~ .column_check,
.columnlist_switch:checked ~ .column_check + label,
.columnlist_switch:checked ~ .columnlist_switch_submit
{ display: inline-block; }
.columnlist_sort_block { display: none; }
.columnlist_sort:checked ~ .columnlist_sort_block { display: block; margin:0.1rem 0 0.2rem; }
.columnlist_sort + label
{
display:inline-block;
border:1px solid black;
padding:0.1rem 0.2rem;
margin-top:0.2rem;
}
/* all column checkers are hidden by default */
.column_check,
.column_check + label,
.columnlist_switch_submit
{ display: none; }
/* the column checks labels have small right padding from each other */
.column_check + label { margin:0 0.5rem 0 0.0rem; }
/* when the column checked is not marked the column is not visible*/
.colid1:checked ~ table tr th:nth-of-type(1),
.colid1:checked ~ table tr > td:nth-of-type(1),
.colid2:checked ~ table tr th:nth-of-type(2),
.colid2:checked ~ table tr > td:nth-of-type(2),
.colid3:checked ~ table tr th:nth-of-type(3),
.colid3:checked ~ table tr > td:nth-of-type(3),
.colid4:checked ~ table tr th:nth-of-type(4),
.colid4:checked ~ table tr > td:nth-of-type(4),
.colid5:checked ~ table tr th:nth-of-type(5),
.colid5:checked ~ table tr > td:nth-of-type(5),
.colid6:checked ~ table tr th:nth-of-type(6),
.colid6:checked ~ table tr > td:nth-of-type(6),
.colid7:checked ~ table tr th:nth-of-type(7),
.colid7:checked ~ table tr > td:nth-of-type(7),
.colid8:checked ~ table tr th:nth-of-type(8),
.colid8:checked ~ table tr > td:nth-of-type(8),
.colid9:checked ~ table tr th:nth-of-type(9),
.colid9:checked ~ table tr > td:nth-of-type(9)
{ display:none; }
.slide_show { width: 100%; display: block; margin-bottom:1rem; }
.slide_screen { display: block; width: 100%; }
.slide_screen > div { display: table; width:100%; }
.slide_screen > div > div { display: table-row; }
.slide_screen > div > div > div { display: none; position: relative; width: 100%; }
.slide_screen > div > div > div > div { width: 100%; }
#p0:checked ~ .slide_screen > div > div > div:nth-of-type(1) { display: table-cell; }
#p1:checked ~ .slide_screen > div > div > div:nth-of-type(2) { display: table-cell; }
#p2:checked ~ .slide_screen > div > div > div:nth-of-type(3) { display: table-cell; }
/* radio buttons */
.slide_show > input[type='checkbox'] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
.slide_show_radio_controls { position: relative; line-height: 1rem; }
.slide_show_radio_controls > div
{
position: absolute;
top: 0;
z-index: 1;
top: 0rem;
right: 0rem;
/* background-color: red; */ /* uncomment to see the missclick area */
}
/* extra border, for miss-clickers */
.slide_show_radio_controls > div > div
{
padding: 0.25rem 0.25rem 0.25rem 0.5rem;
}
.slide_show_radio_controls > div > div > div > label[class~="data_slideshow_page_radio"]:not(:last-child)
{
margin-right: 0.25rem;
}
/* */
.presentation_auto_play
{
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: 1.25rem, 1.25rem;
width: 1.25rem;
height: 1.25rem;
opacity: 0.3;
margin-right:0.5rem;
}
#auto_play ~ .slide_show_radio_controls > div > div > .presentation_auto_play { background-image: url(/direct/images/page_autoplay_run.svg); }
#auto_play:checked ~ .slide_show_radio_controls > div > div > .presentation_auto_play { background-image: url(/direct/images/page_autoplay_pause.svg); }
.presentation_auto_play:hover { opacity: 1; }
#auto_play:focus ~ .slide_show_radio_controls > div > div > .presentation_auto_play
{
opacity: 1;
outline: 1px dotted black;
}
/* slideshow left-right buttons */
.presentation_button
{
display: none;
margin:0 0.25rem;
opacity: 0.3;
background-repeat: no-repeat;
background-position: center;
background-size: 1.25rem, 1.25rem;
color: white;
border:0;
width: 1.25rem;
height: 1.25rem;
}
.presentation_button:hover { opacity: 1; }
.present_button_left { background-image: url(/direct/images/page_arrow_left.svg);}
.present_button_right { background-image: url(/direct/images/page_arrow_right.svg); }
#p0:checked ~ .slide_show_radio_controls > div > div > .present_button_left[class~="data_nextof_p0"] { display: inline-block; }
#p1:checked ~ .slide_show_radio_controls > div > div > .present_button_left[class~="data_nextof_p1"] { display: inline-block; }
#p2:checked ~ .slide_show_radio_controls > div > div > .present_button_left[class~="data_nextof_p2"] { display: inline-block; }
#p0:checked ~ .slide_show_radio_controls > div > div > .present_button_right[class~="data_prevof_p0"] { display: inline-block; }
#p1:checked ~ .slide_show_radio_controls > div > div > .present_button_right[class~="data_prevof_p1"] { display: inline-block; }
#p2:checked ~ .slide_show_radio_controls > div > div > .present_button_right[class~="data_prevof_p2"] { display: inline-block; }
/* */
input[class~="data_slideshow_page_radio"] { width: 0; height: 0; padding: 0; margin: 0; position: absolute; opacity: 0; transform: scale(0); }
input[class~="data_slideshow_page_radio"] ~ div div label[class~="data_slideshow_page_radio"] { cursor: pointer; }
input[class~="data_slideshow_page_radio"] ~ div div label[class~="data_slideshow_page_radio"] span
{
display: inline-block;
width: 0.75rem;
height: 0.75rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
border-radius: 0.4rem;
border: 1px solid black;
background-color: rgb(100,100,100);
box-sizing: border-box;
}
input[id="p0"]:focus ~ div div label[for="p0"] { outline : 1px dotted black; }
input[id="p0"]:not(:checked):hover ~ div div label[for="p0"] span { background-color: rgb(150,150,150); }
input[id="p0"]:checked ~ div div label[for="p0"] span { background-color: rgb(255,255,255); }
input[id="p0"]:checked:hover ~ div div label[for="p0"] span { background-color: rgb(225,225,225); }
input[id="p1"]:focus ~ div div label[for="p1"] { outline : 1px dotted black; }
input[id="p1"]:not(:checked):hover ~ div div label[for="p1"] span { background-color: rgb(150,150,150); }
input[id="p1"]:checked ~ div div label[for="p1"] span { background-color: rgb(255,255,255); }
input[id="p1"]:checked:hover ~ div div label[for="p1"] span { background-color: rgb(225,225,225); }
input[id="p2"]:focus ~ div div label[for="p2"] { outline : 1px dotted black; }
input[id="p2"]:not(:checked):hover ~ div div label[for="p2"] span { background-color: rgb(150,150,150); }
input[id="p2"]:checked ~ div div label[for="p2"] span { background-color: rgb(255,255,255); }
input[id="p2"]:checked:hover ~ div div label[for="p2"] span { background-color: rgb(225,225,225); }
.slideshow_buttons
{
position: absolute;
white-space: nowrap;
bottom: 0; left: 0; right: 0;
}
.slideshow_margin { display: block; height: 3rem; }
.slideshow_buttons > span
{
display: inline-block;
}
.slideshow_buttons > span > a
{
padding: 0.25rem 1.5rem;
}
.slideshow_buttons > span > a + a { margin-left: 1rem; }
.slideshow_auto_show { display: none; }
.slideshow_auto_hide { display: table-cell; }
.slideshow_auto_show > span > img
{
display: inline-block;
max-width: 100%;
max-height: 100%;
}
@media screen and (max-width: 45rem)
{
.slideshow_margin { height:7rem; }
.slideshow_buttons { text-align: center; }
.slideshow_buttons > span > a { padding: 0.2rem 3rem; }
.slideshow_buttons > span > a + a { display: block; margin-left: 0rem; margin-top: 0.3rem; }
}
@media screen and (max-width: 35rem)
{
.slideshow_auto_show { display: table-cell; }
.slideshow_auto_show > span > img { box-sizing: content-box; width: 15rem; max-height: auto; }
.slideshow_auto_hide { display: none; }
}
@media screen and (max-width: 20rem)
{
.slideshow_buttons > span > a { padding: 0.2rem 1rem; }
}
.slideshow
{
display: block;
padding: 2rem 2rem 2rem 2rem;
min-height: 18rem;
}
@media screen and (max-width: 25rem)
{
.slideshow
{
padding: 2rem 0.25rem 1rem 0.25rem;
}
}