:root {

--starter: hsl(30, 100%, 48%);

--forest-starter: hsl(120, 100%, 40%);
--forest-basic: hsl(120, 100%, 32%);
--forest-classic: hsl(30, 100%, 48%);
--forest-premium: hsl(120, 100%, 26%);

--timber-starter: hsl(34, 86%, 40%);
--timber-basic: hsl(34, 86%, 32%);
--timber-classic: hsl(30, 100%, 48%);
--timber-premium: hsl(34, 86%, 26%);

--craft-starter: hsl(210, 94%, 50%);
--craft-basic: hsl(210, 94%, 42%);
--craft-classic: hsl(30, 100%, 48%);
--craft-premium: hsl(210, 94%, 36%);

--woodline-starter: hsl(0, 66%, 50%);
--woodline-basic: hsl(0, 66%, 42%);
--woodline-classic: hsl(30, 100%, 48%);
--woodline-premium: hsl(0, 66%, 36%);

--service-starter: hsl(330, 84%, 50%);
--service-basic: hsl(330, 84%, 42%);
--service-classic: hsl(30, 100%, 48%);
--service-premium: hsl(330, 84%, 36%);

--business-starter: hsl(20, 82%, 55%);
--business-basic: hsl(20, 82%, 45%);
--business-classic: hsl(30, 100%, 48%);
--business-premium: hsl(20, 82%, 35%);

--featureColor_1: #d35400;
--featureColor_1_hover: #a44200;
--featureColor_2: #e9960c;
--featureColor_2_hover: #ac6f09;
--featureColor_3: #D3AF37;
--featureColor_3_hover: #9d8222;
--featureColor_4: #5fc12f;
--featureColor_4_hover: #418420;
--featureColor_5: #1da389;
--featureColor_5_hover: #126756;
--featureColor_6: #2980b9;
--featureColor_6_hover: #1e5c86;
--featureColor_7: #8e44ad;
--featureColor_7_hover: #612e76;
--featureColor_8: #d35400;
--featureColor_8_hover: #a24100;
--featureColor_9: #b34866;
--featureColor_9_hover: #7a3246;
--featureColor_10: #d35400;
--featureColor_10_hover: #a44200;
--featureColor_11: #e9960c;
--featureColor_11_hover: #ac6f09;
--featureColor_12: #D3AF37;
--featureColor_12_hover: #9d8222;
--featureColor_13: #5fc12f;
--featureColor_13_hover: #418420;
--featureColor_14: #1da389;
--featureColor_14_hover: #126756;

}


/* ==== REGISTRATION / registration ==== */


/* REGISTRATION COUNTER BAR */
.processReg {margin: 0; border:0; display: flex; gap: 8px; align-items: center;}
.processReg svg {max-height: 28px; max-width: 28px}
.processReg svg.arrow {max-height: 18px; max-width: 18px}
.processReg svg {fill: rgba(0,0,0,0.25)}
.processReg svg.current {fill: var(--green)}


body.registrationPage .s_privat_subject_wrap {margin: 14px 0 0 4px;}
body.registrationPage .s_privat_subject_wrap label {width: fit-content; font-size: calc( var(--fontSizeSmall) - 0.1rem); padding: 0;margin:0;}

body.registrationPage #vat_result {color: red; font-size: calc( var(--fontSizeSmall) - 0.1rem); font-weight: bold}


:is(body.registrationPage,body.payment) .subscriptionWrapper {max-width: 1280px; background: var(--lightestGrey); margin: var(--gap) auto; padding: var(--gapSmall); border: 2px solid var(--lighterGrey); border-radius: 12px;}

:is(body.registrationPage,body.payment) .mainActivitySelect {display: flex; flex-direction: row; gap: 12px; align-items: center; border-bottom: 1px solid rgba(0,0,0,0.1); padding: 0 0 var(--gapSmall) 0;}
:is(body.registrationPage,body.payment) .mainActivitySelect .textPart {display: flex; flex-direction: column; gap:2px;}
:is(body.registrationPage,body.payment) .mainActivitySelect .textPart b {font-size: var(--fontSizeLarge);}
:is(body.registrationPage,body.payment) .mainActivitySelect .textPart small {display: block; font-size: var(--fontSizeXSmall); color: red}
:is(body.registrationPage,body.payment) .mainActivitySelect .selectPart * {font-size: calc(var(--fontSizeLarge) - 0.1rem)}
:is(body.registrationPage,body.payment) .mainActivitySelect .selectPart select {max-width: 250px; background: white;}

:is(body.registrationPage,body.payment) .orderXtraFeatures {display: none;}

:is(body.registrationPage,body.payment) .warningText.info {margin-top: 0;}

/* EMAIL ALREADY EXISTS */
:is(body.registrationPage,body.payment) #check_t_email p {color: red; font-weight: bold; margin-left: 12px}
:is(body.registrationPage,body.payment) #check_t_email p a {float: none}
:is(body.registrationPage,body.payment) #check_t_email p,:is(body.registrationPage,body.payment) #check_t_email p * {font-size: var(--fontSizeSmall);}
.no-data:is(:is(body.registrationPage,body.payment) #check_t_email) p,.ok-data:is(:is(body.registrationPage,body.payment) #check_t_email) p {display:none}



/* GDPR */
:is(body.registrationPage,body.payment) .gdprBox {background: var(--lightestGrey); padding: 12px 20px;}
:is(body.registrationPage,body.payment) .gdprBox .gdprLabel {display: flex; gap: 2px; font-size: var(--fontSizeSmall);}
:is(body.registrationPage,body.payment) .gdprBox .gdprLabel div {width: 35px; margin-right: 8px;}

:is(body.registrationPage,body.payment) button {width: auto; padding-inline: 50px; font-size: 18px}
:is(body.registrationPage,body.payment) .hereby {font-size: var(--fontSizeXSmall); color: var(--darkGrey); text-align: center; line-height: 1.2;}
:is(body.registrationPage,body.payment) .hereby a {display: block; font-size: var(--fontSizeXSmall);}


@media screen and (max-width: 1024px) {


:is(body.registrationPage,body.payment) .subscriptionWrapper {max-width: 1920px; background: none; margin: 0; padding: 0; border: none; border-radius: 0;}


}

@media screen and (max-width: 768px) {


:is(body.registrationPage,body.payment) .subscriptionWrapper {margin: var(--gapSmall) 0 var(--gapLarge) 0}
:is(body.registrationPage,body.payment) .mainActivitySelect {flex-direction: column; gap: 12px; justify-content: center; text-align: center; padding: 0; border: 0;}
:is(body.registrationPage,body.payment) .mainActivitySelect .selectPart select {max-width: 330px;}

}


/* ==== LOGIN /com_user_activation.tpl ==== */


.comLogin h1 {margin-top:0}

.comLogin .form {width: 100%; max-width: 330px; text-align: center;}
.comLogin button {margin: var(--gapSmall) auto var(--gapLarge) auto;}

.comLogin .passwordDiv {display: flex; justify-content: space-between; gap: 12px; align-items: center;}
.comLogin .passwordDiv input {width: calc(100% - 70px)}
.comLogin .passwordDiv label {display: flex; width: 70px; margin: 0; align-items: center;}
.comLogin .passwordDiv label .showPasswordCheckbox {width: 20px; height: 20px; margin: 0; vertical-align: middle}
.comLogin .passwordDiv label svg {width: 32px; height: 32px; margin-left: 8px; vertical-align: middle}

.comLogin .comLoginRegistration {display: flex;

}
.comLogin .comLoginRegistration .registrationBox {flex-grow: 1; align-items: center; display: flex; justify-content: center; background-size: cover; padding: var(--gap);}
.comLogin .comLoginRegistration .registrationBox .registrationBoxCenter {background: rgba(0,0,0,0.3); backdrop-filter: blur(3px); font-size: var(--fontSizeXLarge); line-height: 1.35; color: white; font-weight: bold; width: 100%; max-width: 80%; text-align: center; padding: var(--gapSmall)}
.comLogin .comLoginRegistration .registrationBox a {display: block; font-size: var(--fontSizeLarge); padding: 14px; background: var(--link); color: white; width: auto; margin: var(--gapSmall) auto 0 auto; border: 3px solid rgba(255,255,255,0.7); border-radius: 12px; text-transform: uppercase;}
.comLogin .comLoginRegistration .registrationBox a:hover {background: var(--linkHover)}


/* ==== SETTINGS ==== */


.settings h3 {font-size: calc( var(--fontSizeXLarge) - 2px);}
.settings h3 svg {width: 20px; height: 20px; fill: red; margin: -4px 0 0 8px; vertical-align: middle}

.settings .asideRight {max-width: 230px; min-width: 210px;}
.settings .asideRight div {background: var(--lightestGrey); margin: var(--gap) 0 0 0;; padding: var(--gapSmall); border-radius: 4px;}
.settings .asideRight .user li:not(b) {font-size: 15px}


.settingsListing {display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: flex-start;

}
.settingsListing a {display: flex; flex-direction: row; flex: 1 1 280px; padding: var(--gapSmall); border: 1px solid var(--lightGrey); background: white; align-items: center; border-radius: var(--borderRadius); position: relative; box-shadow: var(--materialShadow); transition: .5s}
.settingsListing a:hover,.settingsListing a.current {box-shadow: var(--materialShadow); border: 1px solid var(--linkHover); color: var(--linkHover); z-index: 10; transform: scale(1.02);}
.settingsListing a:hover,.settingsListing a:hover * {color: var(--linkHover); fill: var(--linkHover); transition: transform .5s; text-decoration: none;}
.settingsListing a svg {height: 48px; width: 48px; min-width: 48px; margin-right: 24px; fill: var(--lightGrey); transition: .5s}
.settingsListing .main-setting {border: 2px solid var(--linkHover)}
.settingsListing .main-setting:hover {border: 2px solid var(--linkHover)}
.settingsListing .main-setting svg.warningIcon {fill: orange; margin: 0; position: absolute; top: 8px; right: -6px; width: 18px; height: 18px;}
.settingsListing a div {display: flex; flex-direction: column; align-items: flex-start; align-content: flex-start; margin: 0 0 auto 0;}
.settingsListing a div.new {position: absolute; color: red; font-size: var(--fontSizeXSmall); font-weight: bold; right: 6px; top: 2px}
.settingsListing a div b {line-height: 1.1; display: block; margin-bottom: 0}
.settingsListing a div ul {display: flex; flex-direction: column; line-height: 16px; margin: 3px 0 0 0; list-style: none;}
.settingsListing a div ul :is(li,li *) {color: var(--darkGrey); font-size: calc(var(--fontSizeSmall) - 2px);}
.settingsListing a.mnAct svg:not(.warningIcon),.settingsListing a.mnAct li.mAct {display: none}

.settingsListing .mainActiv,.settingsListing .mainActiv * {color: red; border-color: red;}
:is(.settingsListing .mainActiv,.settingsListing .mainActiv *) svg.warningIcon {fill: red}

.settingsListing a.mnAct.mainActiv .mAct1,.settingsListing a.mnAct.mainActiv1 .mAct1,.settingsListing a.mnAct.mainActiv5 .mAct5,.settingsListing a.mnAct.mainActiv10 .mAct10,.settingsListing a.mnAct.mainActiv12 .mAct12,.settingsListing a.mnAct.mainActiv15 .mAct15,.settingsListing a.mnAct.mainActiv20 .mAct20 {display: block}

.settingsListing .notPaid {opacity: 0.6; cursor: not-allowed; order: 100;}
:is(.settingsListing .notPaid):hover {border: 1px solid var(--lightestGrey); transform: none}
:is(.settingsListing .notPaid):hover * {color: var(--fontColor); fill: var(--lightGrey) !important}

@media screen and (max-width: 768px) {
.settingsListing a {padding: var(--gap) var(--gapSmall); max-width: none;}
}

@media screen and (min-width: 1920px) {
.settingsListing {gap: calc( var(--gapSmall) + 4px);}
.settingsListing a {flex: 1 1 300px}
}


/* PREFERENCES */

body.preferences .titleBlockWithRightItem a {display: none}
body.preferences.prefAssortment a.assortMenu,body.preferences.prefTallies a.tallyMenu,body.preferences.prefSpecies a.speciesMenu,body.preferences.prefSpeciesParams a.speciesTuningMenu,body.preferences.prefContact a.contactMenu {display: inline-block}
body.preferences.contactPartners .contactNewGroup {display: none !important}
body.preferences.contactGroups .contactNewContact {display: none !important}


/* PREFERED SPECIES */


:is(body.prefSpecies,body.prefSpeciesParams) .prefSpeciesWrap {width: 100%; margin: 0 auto;}
:is(body.prefSpecies,body.prefSpeciesParams) .prefSpeciesWrap .formNoticeAboveForm {width: 100%;}

:is(body.prefSpecies,body.prefSpeciesParams) .accordion .accordionContent {padding: var(--gapSmall); }
:is(body.prefSpecies,body.prefSpeciesParams) .accordion .accordionSpecListing {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px;}
:is(body.prefSpecies,body.prefSpeciesParams) .accordion .accordionSpecListing label {display: flex; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 4px; margin: 0; align-items: center; gap: 4px;}
:is(body.prefSpecies,body.prefSpeciesParams) .accordion .accordionSpecListing label input {flex-shrink: 0;}
:is(body.prefSpecies,body.prefSpeciesParams) .accordion .accordionSpecListing label species {display: block; font-size: var(--fontSizeSmall); line-height: 1.15}
:is(body.prefSpecies,body.prefSpeciesParams) .accordion .accordionSpecListing label small {display: block; text-decoration: none; color: var(--darkGrey); font-size: var(--fontSizeXSmall); margin: 0}
:is(body.prefSpecies,body.prefSpeciesParams) .accordion .accordionSpecListing label:hover * {text-decoration: none; font-weight: bold; color: var(--linkHover);}
:is(body.prefSpecies,body.prefSpeciesParams) .accordion .accordionSpecListing label.selected {font-weight:bold}


:is(body.prefSpecies,body.prefSpeciesParams) .spiecesOwnNames {display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; max-width: none;

}
:is(body.prefSpecies,body.prefSpeciesParams) .spiecesOwnNames fieldset {width: 100%; max-width: 450px; box-sizing: border-box; border: 1.5px solid var(--lightGrey);
border-radius: 8px; padding: 18px var(--gapSmall); margin: 0 auto;}
:is(body.prefSpecies,body.prefSpeciesParams) .spiecesOwnNames fieldset .column {margin:0}


:is(body.prefSpecies,body.prefSpeciesParams) .spiecesTuningListing table thead th small {font-weight: bold;}

:is(body.prefSpecies,body.prefSpeciesParams) .spiecesTuningListing table thead th.mergedCells {background: var(--darkGrey); color: white}


/* NEWSLETTER */


:is(.userNewsletter,.userLanguage,.userActivities) .icon_in_row {flex-wrap: wrap;}
:is(.userNewsletter,.userLanguage,.userActivities) .icon_in_row div {display: flex; align-items: center; justify-content: space-between;}
:is(.userNewsletter,.userLanguage,.userActivities) .icon_in_row div select {background: #fff5df;}
:is(.userNewsletter,.userLanguage,.userActivities) .icon_in_row div a {float: none}
:is(.userNewsletter,.userLanguage,.userActivities) .icon_in_row div a svg {width: 22px !important; height: 22px !important; margin: 0 !important}


/* USER DATA */


.user_data .titleBlockWithRightItem a {display: none}
.user_data.userLoginData .titleBlockWithRightItem a {display: inline-block}
.user_data label.logotype {padding: 0;}
.user_data label.logotype a {display: flex; gap: 12px; align-items: center;}
.user_data label.logotype a img {max-width: 42px; max-height: 42px;}


/* USER DATA - LOGIN DATA + MULTI */
/* /com_user_data.php?form=login + /com_user_data.php?form=multi */


:is(body.userLoginData,body.userMulti) .wrong {display: none}


/* MY CLASSIFED ADS */

.myClassifiedsTable tbody td,.myClassifiedsTable tbody th {vertical-align: top;}
.myClassifiedsTable tbody th small {font-size: var(--fontSizeXSmall); line-height: 1.1; white-space: nowrap; margin-top: 3px;}
.myClassifiedsTable tbody td.image {padding: 4px !important; text-align: center; vertical-align: middle;}
.myClassifiedsTable tbody td.image a {display: block; margin: auto;}
.myClassifiedsTable tbody td.image a img {max-width: 50px; max-height: 50px; margin: auto;}
.myClassifiedsTable tbody a.title {display: block; margin-bottom: 3px; font-weight: bold;}
.myClassifiedsTable tbody p {white-space: normal; min-width: 450px; font-size: var(--fontSizeSmall)}


.myClassifiedsTPTable .myClassifiedsTable .priceCell {text-align: left; width: 220px;}
.myClassifiedsTPTable .myClassifiedsTable .priceCell .price_edit {border: 1px solid var(--link) !important; width: calc(100% - 80px);}
.myClassifiedsTPTable .myClassifiedsTable .actionCol {width: 80px;}
.myClassifiedsTPTable .myClassifiedsTable td.small.smallerIfEmpty:has(a.show0) {width: 0!important; padding:0}
.actualAds:is(.myClassifiedsTPTable .myClassifiedsTable) th.mainLink a {font-weight: bold}


/* MESSAGES /com_message.php */

.messagesTable .sender {width: 250px;}
.messagesTable .sender a {display: block; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.messagesTable .flag {margin-right: 6px; vertical-align: -2px}
.messagesTable .noticeEmpty {text-align: center; font-style: italic; color: var(--darkGrey)}

.messagesTable.newMessages a {font-weight: bold}


.messageDetail .messageSubject,.messageDetail .messageText {background: var(--lightestGrey); padding: var(--gapSmall);
line-height: 1.6;}
.messageDetail .messageSubject {font-weight: bold;}
.messageDetail label.messageSender:hover {text-decoration: none; cursor: default;}


.newMessagesInactiveUser {display: flex; align-items: center; margin: 0 auto var(--gap) auto; justify-content: center; font-size: var(--fontSizeXXLarge); font-weight: bold;}
.newMessagesInactiveUser img {width: 70px; height: auto; margin-right: 12px}

.newMessagesInactiveUser.showMessage0,.newMessagesInactiveUser.showMessage {display: none}

@media only screen and (max-width: 968px) {
.newMessagesInactiveUser {margin: var(--gap) auto var(--gapLarge) auto;}
.newMessagesInactiveUser img {width: 50px; height: auto}
}


/* ===== DEMO ===== */

/* DEMO WELCOME LIGHTBOX + ACTIVITIES */

.demo_welcome {width: 100%; height: 100vh; left: 0px; top: 0px; position: absolute;}

.demo_welcome_lightbox {text-align: center; border: 1px solid white; padding: 32px 20px 22px 20px; z-index: 99999; box-shadow: #000 0px 0px 42px; border-radius: 7px; background: rgba(255,255,255,0.97); position: fixed; width: 100%; max-width: 600px; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);

}
.demo_welcome_lightbox .txt4 {font-weight: bold; display: block; text-align: center; margin: 0 auto; color: red;}


.demo_welcome_headline .txt1 {font-size: 64px; font-weight: 300; text-align: center; margin: 10px auto 0px auto; color: rgba(0,0,0,0.4);}
.demo_welcome_headline .txt2 {font-size: 30px; font-weight: 500; text-align: center; padding: 0px 0px 26px 0px; color: rgba(0,0,0,0.8);}

.demo_welcome_activity a {font-size: 15px; font-weight: normal; text-align: left; margin: 0 auto; display: block; border-bottom: 1px solid rgba(0,0,0,0.12); padding: 14px 40px 14px 14px; background-position: right center; background-repeat: no-repeat; background-size: 36px 36px; transition: 0.4s}
.demo_welcome_activity a:last-child {border-bottom: 1px solid transparent;}
.demo_welcome_activity a:hover {background-image: url(/ico/ArrowRight2.svg);}
.demo_welcome_activity a b {color: var(--link); font-weight: bold; margin: 0 0 2px 0; display: block;}
.demo_welcome_activity a div {font-size: var(--fontSizeSmall); color: var(--darkGrey); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.demo_welcome_activity a:hover div {color: rgba(0,0,0,1);}
.demo_welcome_activity a:hover,.demo_welcome_activity a:hover div {text-decoration: none;}
.demo_welcome_activity a:hover b {text-decoration: underline; color: var(--linkHover);}


@media screen and (max-width: 768px), screen and (max-height: 700px) {
.demo_welcome_headline .txt2 {display: none;}
.demo_welcome_lightbox .txt4 {margin: 5px auto 0px auto;}
}


.demo-div {background: red; color: white; line-height: 24px; padding: 25px 10px 20px 10px; font-size: 20px;}
.demo-div b {display: block; color: white; font-size: 31px; margin-bottom: 10px;}
.demo-div small {display: block; color: white; font-size: 14px; margin-top: 15px; border-top: 1px solid rgba(255,255,255,0.5); padding-top: 15px; line-height: 18px;}
.demo-div a {display: block; color: white; font-size: 17px; margin: 0px;}


/* WARNING CONTENT */

.warningContent {margin: 0 auto var(--gap) auto; padding: var(--gap); width: max(600px); background-color: white; border-radius: var(--borderRadius); box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2), 0 0 56px rgba(255, 0, 0, 0.2);}
.warningContent h3 {color: red;}
.warningContent h3 svg {height: 32px; width: 32px; fill: red; margin: 0 8px 0 0;}
.warningContent hr {margin: var(--gapSmall) auto;}
.warningContent p {margin: var(--gapSmall) auto;}


@media screen and (max-width: 768px) {
.warningContent {margin: var(--gap) auto; width: auto}
}


/* USER PROGRAM TABLE - FAQ*/


.programTable .tableTop {align-items: center; width: 100%; max-width: 1900px; justify-content: flex-start;}
.programTable .tableTop b {color: red}
.programTable .tableTop  > div {white-space: nowrap;}
.programTable .tableTop select {margin-left: 12px; display: inline-block;}

.programTable table.subscrPlans {
margin: 0 auto var(--gapSmall) auto;
border: none;
background: none;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
max-width: 1900px;}

.programTable table.subscrPlans :is(tbody,thead) :is(td,th) {
box-shadow: inset -6px 0 4px -2px rgba(0,0,0,0.1);}

.programTable table.subscrPlans tbody td {text-align: center; vertical-align: middle; position: relative; z-index: 2; width: 18%;}
.programTable table.subscrPlans tbody td b {display: none}

.programTable table.subscrPlans :is(tbody,thead) th {
padding-left: 18px !important;
white-space: nowrap;}

.programTable table.subscrPlans tbody {
border: 2px solid var(--lightGrey) !important;}

.programTable .noshadow {box-shadow: none !important;}
.programTable .noborder {border: none !important;}
.programTable .noborderRight {border-right: none !important;}

.programTable .extraFeatures {margin: var(--gapSmall) auto; font-size: var(--fontSizeSmall); text-align: center; line-height: 1.2;}
.programTable .extraFeatures svg {height: 16px; width: 16px; fill: red; margin: 0 8px 0 0; vertical-align: middle;}


/* THEAD */

table.subscrPlans thead {text-align: center; vertical-align: middle; position: relative; z-index: 2; width: 18%;

}
table.subscrPlans thead th {padding: 0 12px; line-height: 1.3; text-align: right; color: var(--darkGrey); font-weight: bold; font-size: 16px; background: none;}
table.subscrPlans thead th,table.subscrPlans thead td {border: none}


table.subscrPlans thead .programRow td.starter {background: var(--starter)}
table.subscrPlans thead .programRow td {font-weight: bold; font-size: 24px; padding: 20px 10px; line-height: 1.2; color: white; position: relative;}
table.subscrPlans thead .programRow b {display: block; font-weight: 600; font-size: 17px; line-height: 1.1; color: rgba(255,255,255,0.9); letter-spacing: 0.5px; text-transform: uppercase;}
table.subscrPlans thead .programRow div {background: hsl(0, 100%, 50%);	color: white; position: absolute; font-size: 12px; font-weight: bold; bottom: -10px; left: 50%; transform: translateX(-50%); border-radius: 12px; padding: 3px 8px; white-space: nowrap; border: 2px solid white;}

table.subscrPlans thead .priceRow td,table.subscrPlans thead .priceRow span {font-weight: 700; font-size: 38px}
table.subscrPlans thead .priceRow td {padding: 24px 12px 22px 12px; background: var(--lightestGrey);}
table.subscrPlans thead .priceRow td p {font-weight: 700; font-size: 16px; display: inline-block; margin: 0 0 0 8px; line-height: 100%; text-align: left}
table.subscrPlans thead .priceRow td small {font-weight: 500; font-size: 12px; display: block; margin: 3px auto 0 auto}

table.subscrPlans thead tr {display: none}
table.subscrPlans thead td {border: 2px solid var(--lightGrey) !important;}


table.subscrPlans tbody th,table.subscrPlans tbody td {border-bottom: 1px solid #ddd;}
table.subscrPlans tbody th,table.subscrPlans tbody th *,table.subscrPlans tbody td,table.subscrPlans tbody td * { font-size: calc(var(--fontSize) + 0.0rem)}


table.subscrPlans tbody .infoRow th {background: var(--darkGrey); color: white; font-weight: bold !important; font-size: calc(var(--fontSize) + 0.1rem)}
table.subscrPlans tbody .infoRow td {font-size: 14px; line-height: 1.3;padding: 4px 6px; text-wrap: pretty}


table.subscrPlans tbody .featureRow th {min-width: 320px}
table.subscrPlans tbody .featureRow th,table.subscrPlans tbody .featureRow td {padding: 18px !important;}
table.subscrPlans tbody .featureRow th > div {display: flex; justify-content: space-between;}
table.subscrPlans tbody .featureRow label {all: unset; font-weight: bold; white-space: nowrap; line-height: 1.15; text-align: left;}
table.subscrPlans tbody .featureRow small {all: unset; font-weight: normal; display: block; font-size: calc(var(--fontSizeSmall) - 0.1rem)}
table.subscrPlans tbody .featureRow td {font-size: calc(var(--fontSize) - 0.1rem); min-width: 250px; padding: 8px 10px}
table.subscrPlans tbody .featureRow td svg {fill: var(--green); margin-right: 6px; width: 18px; height: 18px}
table.subscrPlans tbody .featureRow td a {margin: 0 0 0 3px}
table.subscrPlans tbody .featureRow td a svg.iconInlineSmall {fill: var(--infoColor); margin: 0px}
table.subscrPlans tbody .featureRow td i {color: var(--darkGrey); font-size: var(--fontSizeSmall);}
table.subscrPlans tbody .featureRow td small {color: var(--darkGrey); font-size: 12px; line-height: 1.1; margin-top: 2px}
table.subscrPlans tbody .featureRow p {margin: 2px 0 0 0; white-space: normal; font-size: var(--fontSizeSmall); display: none}


.subscrPlans tfoot .orderRow {display: none;}
.subscrPlans tfoot .orderRow th  > div {display: flex; font-size: 13px; color: red; margin: 0; max-width: 320px; white-space: normal; line-height: 1.2; font-weight: normal; gap: 8px}
.subscrPlans tfoot .orderRow th svg {fill: red; width: 24px; height: 18px}
.subscrPlans tfoot .orderRow td,.subscrPlans tfoot .orderRow th {background: none; border: none}
.subscrPlans tfoot .orderRow td {text-align: center; padding: 10px 4px}
.subscrPlans tfoot .orderRow a,.subscrPlans tfoot .orderRow button {width: auto; padding: 14px 24px; font-size: 1.8rem; margin: 8px auto 0 auto; letter-spacing: 0.5px; border-radius: 8px;}


@media screen and (max-width: 768px) {
.programTable .tableTop {justify-content: center; flex-direction: column; text-align: center;}
.programTable .tableTop  > div {margin: 14px auto 0 auto}
.programTable .tableTop select {margin: 2px auto 0 auto; display: block;}
}


.forestPricing table.subscrPlans thead tr.forest {display: table-row}
.forestPricing table.subscrPlans thead .programRow td.starter {background: var(--forest-starter)}
.forestPricing table.subscrPlans thead .programRow td.basic {background: var(--forest-basic)}
.forestPricing table.subscrPlans thead .programRow td.classic {background: var(--forest-classic)}
.forestPricing table.subscrPlans thead .programRow td.premium {background: var(--forest-premium)}

.forestPricing table.subscrPlans tbody tr.optiTimb,.forestPricing table.subscrPlans tbody tr.cutPlans,.forestPricing table.subscrPlans tbody tr.showRoom,.forestPricing table.subscrPlans tbody tr.flyers,.forestPricing table.subscrPlans tbody tr.articles,.forestPricing table.subscrPlans tbody tr.directMailing,.forestPricing table.subscrPlans tbody tr.adCampaign,.forestPricing table.subscrPlans tbody tr.coupon,.forestPricing table.subscrPlans tbody tr.cmrfor15 {display: none}
.forestPricing table.subscrPlans tbody td b.forest {display: inline-block;}


.forestPricing table.subscrPlans tfoot tr.forest {display: table-row}


.timberPricing table.subscrPlans thead tr.timber {display: table-row}
.timberPricing table.subscrPlans thead .programRow td.starter {background: var(--timber-starter)}
.timberPricing table.subscrPlans thead .programRow td.basic {background: var(--timber-basic)}
.timberPricing table.subscrPlans thead .programRow td.classic {background: var(--timber-classic)}
.timberPricing table.subscrPlans thead .programRow td.premium {background: var(--timber-premium)}

.timberPricing table.subscrPlans tbody tr.cutPlans,.timberPricing table.subscrPlans tbody tr.showRoom,.timberPricing table.subscrPlans tbody tr.flyers,.timberPricing table.subscrPlans tbody tr.articles,.timberPricing table.subscrPlans tbody tr.directMailing,.timberPricing table.subscrPlans tbody tr.adCampaign,.timberPricing table.subscrPlans tbody tr.coupon,.timberPricing table.subscrPlans tbody tr.cmrfor15 {display: none}
.timberPricing table.subscrPlans tbody td b.timber {display: inline-block;}

.timberPricing table.subscrPlans tfoot tr.timber {display: table-row}


.craftPricing table.subscrPlans thead tr.craft {display: table-row}
.craftPricing table.subscrPlans thead .programRow td.starter {background: var(--craft-starter)}
.craftPricing table.subscrPlans thead .programRow td.basic {background: var(--craft-basic)}
.craftPricing table.subscrPlans thead .programRow td.classic {background: var(--craft-classic)}
.craftPricing table.subscrPlans thead .programRow td.premium {background: var(--craft-premium)}

.craftPricing table.subscrPlans tbody tr.optiTimb,.craftPricing table.subscrPlans tbody tr.stockInventory,.craftPricing table.subscrPlans tbody tr.recApp,.craftPricing table.subscrPlans tbody tr.woodProfi,.craftPricing table.subscrPlans tbody tr.showRoom,.craftPricing table.subscrPlans tbody tr.flyers,.craftPricing table.subscrPlans tbody tr.articles,.craftPricing table.subscrPlans tbody tr.directMailing,.craftPricing table.subscrPlans tbody tr.adCampaign,.craftPricing table.subscrPlans tbody tr.coupon,.craftPricing table.subscrPlans tbody tr.cmr,.craftPricing table.subscrPlans tbody tr.cmrfor15 {display: none}
.craftPricing table.subscrPlans tbody td b.craft {display: inline-block;}

.craftPricing table.subscrPlans tfoot tr.craft {display: table-row}


.woodlinePricing table.subscrPlans thead tr.woodline {display: table-row}
.woodlinePricing table.subscrPlans thead .programRow td.starter {background: var(--woodline-starter)}
.woodlinePricing table.subscrPlans thead .programRow td.basic {background: var(--woodline-basic)}
.woodlinePricing table.subscrPlans thead .programRow td.classic {background: var(--woodline-classic)}
.woodlinePricing table.subscrPlans thead .programRow td.premium {background: var(--woodline-premium)}

.woodlinePricing table.subscrPlans tbody tr.cutPlans,.woodlinePricing table.subscrPlans tbody tr.showRoom,.woodlinePricing table.subscrPlans tbody tr.flyers,.woodlinePricing table.subscrPlans tbody tr.articles,.woodlinePricing table.subscrPlans tbody tr.directMailing,.woodlinePricing table.subscrPlans tbody tr.adCampaign,.woodlinePricing table.subscrPlans tbody tr.coupon,.woodlinePricing table.subscrPlans tbody tr.cmrfor15 {display: none}
.woodlinePricing table.subscrPlans tbody td b.woodline {display: inline-block;}

.woodlinePricing table.subscrPlans tfoot tr.woodline {display: table-row}


.servicePricing table.subscrPlans thead tr.service {display: table-row}
.servicePricing table.subscrPlans thead .programRow td.starter {background: var(--service-starter)}
.servicePricing table.subscrPlans thead .programRow td.basic {background: var(--service-basic)}
.servicePricing table.subscrPlans thead .programRow td.classic {background: var(--service-classic)}
.servicePricing table.subscrPlans thead .programRow td.premium {background: var(--service-premium)}

.servicePricing table.subscrPlans tbody tr.optiTimb,.servicePricing table.subscrPlans tbody tr.cutPlans,.servicePricing table.subscrPlans tbody tr.showRoom,.servicePricing table.subscrPlans tbody tr.flyers,.servicePricing table.subscrPlans tbody tr.articles,.servicePricing table.subscrPlans tbody tr.directMailing,.servicePricing table.subscrPlans tbody tr.adCampaign,.servicePricing table.subscrPlans tbody tr.coupon,.servicePricing table.subscrPlans tbody tr.cmr {display: none}
.servicePricing table.subscrPlans tbody td b.service {display: inline-block;}

.servicePricing table.subscrPlans tfoot tr.service {display: table-row}


.businessPricing table.subscrPlans thead tr.business {display: table-row}
.businessPricing table.subscrPlans thead .programRow td.starter {background: var(--business-starter)}
.businessPricing table.subscrPlans thead .programRow td.basic {background: var(--business-basic)}
.businessPricing table.subscrPlans thead .programRow td.classic {background: var(--business-classic)}
.businessPricing table.subscrPlans thead .programRow td.premium {background: var(--business-premium)}

.businessPricing table.subscrPlans tbody tr.cutPlans,.businessPricing table.subscrPlans tbody tr.optiTimb,.businessPricing table.subscrPlans tbody tr.stockInventory,.businessPricing table.subscrPlans tbody tr.recApp,.businessPricing table.subscrPlans tbody tr.woodProfi,.businessPricing table.subscrPlans tbody tr.capacity,.businessPricing table.subscrPlans tbody tr.coupon,.businessPricing table.subscrPlans tbody tr.cmrfor15,.businessPricing table.subscrPlans tbody tr.cmr {display: none}
.businessPricing table.subscrPlans tbody td b.business {display: inline-block;}

.businessPricing table.subscrPlans tfoot tr.business {display: table-row}


/* ==== USER PROGRAM TABLE - /user_account ==== */


:is(.userPassive,.userProgram,.session) .mainActivitySelect {display: flex; flex-direction: column; justify-content: center; gap: 8px; margin: 0 0 8px 0;

}
:is(.userPassive,.userProgram,.session) .mainActivitySelect .noticeTop {display: block; flex: 1; font-size: calc( var(--fontSizeSmall) - 0.17rem); color: red; text-align: center; line-height: 1.2; z-index: 999;}

:is(.userPassive,.userProgram,.session) .mainActivitySelect .selectPart,:is(.userPassive,.userProgram,.session) .mainActivitySelect .selectPart * {font-size: calc( var(--fontSizeLarge) - 0.1rem);}

:is(.userPassive,.userProgram,.session) .mainActivitySelect .selectPart {justify-content: center; text-align: center; position: relative; color: var(--darkGrey); margin: var(--gapSmall) auto;}
:is(.userPassive,.userProgram,.session) .mainActivitySelect .selectPart select {display: inline-block; margin: 0 0 0 12px; max-width: 250px; transition: border-color 3s ease;}
:is(.userPassive,.userProgram,.session) .mainActivitySelect small {font-size: calc( var(--fontSizeSmall) - 0.25rem) !important; color: white; background: red; margin: 0 0 2px 0; position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); width: max-content; line-height: 1.1; font-weight: bold; padding: 5px 10px; border-radius: 16px; z-ndex: 1000;}
:is(.userPassive,.userProgram,.session) .mainActivitySelect small svg {height: 10px; width: 10px; position: absolute; top: calc(100% - 3px); left: 50%; transform: translateX(-50%); fill: red;}


.programTable.programTable4Columns .pricingGrid {
display: none;
flex-direction: row;
flex-wrap: nowrap;
gap: 18px;
margin: 18px auto;
max-width: 1178px;
width: 100%;}

.programTable.programTable4Columns .hideStarter.pricingGrid {max-width: 1024px;}
.programTable.programTable4Columns .hideStarter.pricingGrid .starter.pricingColumn {display: none}

.programTable.programTable4Columns .pricingGrid.forest,.programTable.programTable4Columns .pricingGrid.timber,.programTable.programTable4Columns .pricingGrid.craft,.programTable.programTable4Columns .pricingGrid.woodline,.programTable.programTable4Columns .pricingGrid.service,.programTable.programTable4Columns .pricingGrid.business {display: flex;}

.programTable.programTable4Columns .orderButton {display: none}

.programTable.programTable4Columns .pricingGrid.forest .pricingHeader.forest,.programTable.programTable4Columns .pricingGrid.timber .pricingHeader.timber,.programTable.programTable4Columns .pricingGrid.craft .pricingHeader.craft,.programTable.programTable4Columns .pricingGrid.woodline .pricingHeader.woodline,.programTable.programTable4Columns .pricingGrid.service .pricingHeader.service,.programTable.programTable4Columns .pricingGrid.business .pricingHeader.business,.programTable.programTable4Columns .pricingGrid.forest .orderButton.forest,.programTable.programTable4Columns .pricingGrid.timber .orderButton.timber,.programTable.programTable4Columns .pricingGrid.craft .orderButton.craft,.programTable.programTable4Columns .pricingGrid.woodline .orderButton.woodline,.programTable.programTable4Columns .pricingGrid.service .orderButton.service,.programTable.programTable4Columns .pricingGrid.business .orderButton.business {display: block;}


/* HEADER */

.programTable.programTable4Columns .pricingHeader {display: none; padding: 20px 10px; text-align: center; font-size: 2.3rem; font-weight: bold; color: white; position: relative; border-radius: 8px 8px 0 0;}
.programTable.programTable4Columns .pricingHeader b {font-size: 2.1rem; font-weight: bold; color: white; display: inline-block; margin-right: 6px;}

.programTable.programTable4Columns .pricingColumn.basic .pricingHeader.forest {background: var(--forest-basic);}
.programTable.programTable4Columns .pricingColumn.basic .pricingHeader.timber {background: var(--timber-basic);}
.programTable.programTable4Columns .pricingColumn.basic .pricingHeader.craft {background: var(--craft-basic);}
.programTable.programTable4Columns .pricingColumn.basic .pricingHeader.woodline {background: var(--woodline-basic);}
.programTable.programTable4Columns .pricingColumn.basic .pricingHeader.service {background: var(--service-basic);}
.programTable.programTable4Columns .pricingColumn.basic .pricingHeader.business {background: var(--business-basic);}

.programTable.programTable4Columns .pricingColumn.classic .pricingHeader.forest {background: var(--forest-classic);}
.programTable.programTable4Columns .pricingColumn.classic .pricingHeader.timber {background: var(--timber-classic);}
.programTable.programTable4Columns .pricingColumn.classic .pricingHeader.craft {background: var(--craft-classic);}
.programTable.programTable4Columns .pricingColumn.classic .pricingHeader.woodline {background: var(--woodline-classic);}
.programTable.programTable4Columns .pricingColumn.classic .pricingHeader.service {background: var(--service-classic);}
.programTable.programTable4Columns .pricingColumn.classic .pricingHeader.business {background: var(--business-classic);}

.programTable.programTable4Columns .pricingColumn.premium .pricingHeader.forest {background: var(--forest-premium);}
.programTable.programTable4Columns .pricingColumn.premium .pricingHeader.timber {background: var(--timber-premium);}
.programTable.programTable4Columns .pricingColumn.premium .pricingHeader.craft {background: var(--craft-premium);}
.programTable.programTable4Columns .pricingColumn.premium .pricingHeader.woodline {background: var(--woodline-premium);}
.programTable.programTable4Columns .pricingColumn.premium .pricingHeader.service {background: var(--service-premium);}
.programTable.programTable4Columns .pricingColumn.premium .pricingHeader.business {background: var(--business-premium);}

.programTable.programTable4Columns .pricingColumn.starter .pricingHeader.forest {background: var(--forest-starter);}
.programTable.programTable4Columns .pricingColumn.starter .pricingHeader.timber {background: var(--timber-starter);}
.programTable.programTable4Columns .pricingColumn.starter .pricingHeader.craft {background: var(--craft-starter);}
.programTable.programTable4Columns .pricingColumn.starter .pricingHeader.woodline {background: var(--woodline-starter);}
.programTable.programTable4Columns .pricingColumn.starter .pricingHeader.service {background: var(--service-starter);}
.programTable.programTable4Columns .pricingColumn.starter .pricingHeader.business {background: var(--business-starter);}


/* Recommended */
.programTable.programTable4Columns .pricingHeader div {position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 1.2rem; background: #ff0000; color: white; padding: 3px 14px; border-radius: 18px; border: 2px solid white; font-weight: bold;}


/* Pricing Column Container */
.programTable.programTable4Columns .pricingColumn {display: flex; flex-direction: column; flex: 1 1 270px; min-width: 270px; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); background: #fff; transition: transform 0.4s, box-shadow 0.4s;}
.programTable.programTable4Columns .pricingColumn:hover {box-shadow: 0 6px 20px rgba(0,0,0,0.18);}


/* Price Styles */
.programTable.programTable4Columns .pricingPrice {border-bottom: 1px solid #e9ecef; background: #fff; padding: 20px 5px; text-align: center; position: relative;}
.programTable.programTable4Columns .pricingPrice  > div {display: flex; color: #333; justify-content: center; align-items: center;}
.programTable.programTable4Columns .pricingPrice b {font-weight: 700; font-size: 4.2rem; display: none}
.programTable.programTable4Columns .pricingPrice p {font-size: 1.5rem; margin: 0 0 0 8px; font-weight: normal; color: #555; line-height: 1.2; text-align: left}
.programTable.programTable4Columns .pricingPrice small {font-size: 1.1rem; margin: 2px auto 0 auto; font-weight: normal; color: var(--darkGrey); line-height: 1.2; position: absolute; left: 50%; transform: translateX(-50%); width: 100%;}


.programTable.programTable4Columns .pricingGrid.forest .pricingPrice div b.forest {display: block}
.programTable.programTable4Columns .pricingGrid.timber .pricingPrice div b.timber {display: block}
.programTable.programTable4Columns .pricingGrid.craft .pricingPrice div b.craft {display: block}
.programTable.programTable4Columns .pricingGrid.woodline .pricingPrice div b.woodline {display: block}
.programTable.programTable4Columns .pricingGrid.service .pricingPrice div b.service {display: block}
.programTable.programTable4Columns .pricingGrid.business .pricingPrice div b.business {display: block}


/* Info Row */
.programTable.programTable4Columns .pricingInfo {background: var(--lightestGrey); padding: 8px 5px; text-align: center; font-size: 1.35rem; line-height: 1.1;color: #777; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e9ecef;}


/* Features Section */
.programTable.programTable4Columns .featuresInfo {flex-grow: 1; padding: 20px 18px; background: #fff; border-bottom: 1px solid #e9ecef;}
.programTable.programTable4Columns .featuresInfo ul {list-style: none; padding: 0; margin: 0;}
.programTable.programTable4Columns .featuresInfo ul li {line-height: 1.1; display: list-item; position: relative; padding-left: 25px; margin-bottom: 12px;}
.programTable.programTable4Columns .featuresInfo ul li  > b {display: block; font-size: 1.35rem}
.programTable.programTable4Columns .featuresInfo ul li small {display: block; font-size: 1.3rem; color: var(--darkGrey); margin: 0; line-height: 1.1;}
.programTable.programTable4Columns .featuresInfo ul li small b {font-size: 1.35rem; display: none; color: var(--darkGrey)}
.programTable.programTable4Columns .featuresInfo ul li small b.fixed {display: inline-block}
.programTable.programTable4Columns .featuresInfo ul li a.info {margin-left: 2px;}
.programTable.programTable4Columns .featuresInfo ul li a.info svg.iconInline {width: 12px; height: 12px; margin:0}
.listed:is(.programTable.programTable4Columns .featuresInfo ul li):last-child {margin-bottom: 0px;}
:is(.programTable.programTable4Columns .featuresInfo ul li)::before {content: ''; position: absolute; left: 0; top: 0px; width: 18px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat;}

.programTable.programTable4Columns .pricingGrid.forest .featuresInfo ul li small b.forest {display: inline-block}
.programTable.programTable4Columns .pricingGrid.timber .featuresInfo ul li small b.timber {display: inline-block}
.programTable.programTable4Columns .pricingGrid.craft .featuresInfo ul li small b.craft {display: inline-block}
.programTable.programTable4Columns .pricingGrid.woodline .featuresInfo ul li small b.woodline {display: inline-block}
.programTable.programTable4Columns .pricingGrid.service .featuresInfo ul li small b.service {display: inline-block}
.programTable.programTable4Columns .pricingGrid.business .featuresInfo ul li small b.business {display: inline-block}


/* Hidden info popups */

.programTable.programTable4Columns .fader-show {display: none; margin-block: 6px; padding: 6px; background: var(--lightestGrey);}
.programTable.programTable4Columns .fader-show,.programTable.programTable4Columns .fader-show * {font-size: 1.25rem}


/* Order Button */

.programTable.programTable4Columns .orderButton {padding: 10px; text-align: center; background: var(--lightestGrey); border-top: 1px solid #fff; border-radius: 0 0 8px 8px; justify-content: center; align-items: center;}
.programTable.programTable4Columns .orderButton button {background: #007bff; color: white; border: none; padding: 14px 10px; font-size: 17px; font-weight: bold; cursor: pointer; border-radius: 6px; transition: background 0.3s, transform 0.5s; width: 100%; max-width: 220px; margin: 8px auto; text-transform: uppercase;}
.programTable.programTable4Columns .orderButton button:hover {background: #0056b3; transform: scale(1.05);}
.programTable.programTable4Columns .orderButton svg {fill: var(--green); display: none; margin: 14px auto; height: 32px; width: 32px;}


/* Highlight the recommended CLASSIC column */

.programTable.programTable4Columns .pricingGrid.forest .pricingColumn.classic {border: 2px solid var(--forest-classic)}
.programTable.programTable4Columns .pricingGrid.forest .pricingColumn.classic .orderButton button {background: var(--forest-classic)}
.programTable.programTable4Columns .pricingGrid.forest .pricingColumn.classic .orderButton button:hover {background: var(--forest-premium)}

.programTable.programTable4Columns .pricingGrid.timber .pricingColumn.classic {border: 2px solid var(--timber-classic)}
.programTable.programTable4Columns .pricingGrid.timber .pricingColumn.classic .orderButton button {background: var(--timber-classic)}
.programTable.programTable4Columns .pricingGrid.timber .pricingColumn.classic .orderButton button:hover {background: var(--timber-premium)}

.programTable.programTable4Columns .pricingGrid.craft .pricingColumn.classic {border: 2px solid var(--craft-classic)}
.programTable.programTable4Columns .pricingGrid.craft .pricingColumn.classic .orderButton button {background: var(--craft-classic)}
.programTable.programTable4Columns .pricingGrid.craft .pricingColumn.classic .orderButton button:hover {background: var(--craft-premium)}

.programTable.programTable4Columns .pricingGrid.woodline .pricingColumn.classic {border: 2px solid var(--woodline-classic)}
.programTable.programTable4Columns .pricingGrid.woodline .pricingColumn.classic .orderButton button {background: var(--woodline-classic)}
.programTable.programTable4Columns .pricingGrid.woodline .pricingColumn.classic .orderButton button:hover {background: var(--woodline-premium)}

.programTable.programTable4Columns .pricingGrid.service .pricingColumn.classic {border: 2px solid var(--service-classic)}
.programTable.programTable4Columns .pricingGrid.service .pricingColumn.classic .orderButton button {background: var(--service-classic)}
.programTable.programTable4Columns .pricingGrid.service .pricingColumn.classic .orderButton button:hover {background: var(--service-premium)}

.programTable.programTable4Columns .pricingGrid.business .pricingColumn.classic {border: 2px solid var(--business-classic)}
.programTable.programTable4Columns .pricingGrid.business .pricingColumn.classic .orderButton button {background: var(--business-classic)}
.programTable.programTable4Columns .pricingGrid.business .pricingColumn.classic .orderButton button:hover {background: var(--business-premium)}


.programTable.programTable4Columns .orderFooter {padding: 0 10px; display: flex; flex-wrap: wrap; margin-top: 0px;}
.programTable.programTable4Columns .orderFooter svg {width: 14px; height: 14px; fill: #ff0000; vertical-align: middle; margin-inline: 6px; display: inline-block}
.programTable.programTable4Columns .orderFooter .orderXtraFeatures {text-align: left; font-size: 1.4rem; flex: 1; color: red; margin: 0 auto; text-align: center;line-height:1.2}
.programTable.programTable4Columns .orderFooter .expandFeatures {display: none; text-align: center; flex: 1;}
.programTable.programTable4Columns .orderFooter .expandFeatures a {font-size: 1.4rem;}
.programTable.programTable4Columns .orderFooter .expandFeatures a svg {fill: var(--link)}


/* AFTER CLICK ON ORDER BUTTON */

.programTable.programTable4Columns .minimalized .featuresInfo,.programTable.programTable4Columns .minimalized .pricingInfo {display: none}
.programTable.programTable4Columns .minimalized .orderButton {flex-grow: 1; align-items: flex-end;}

.programTable.programTable4Columns .minimalized:not(.selected) {opacity: 0.8;}
.programTable.programTable4Columns .minimalized:not(.selected) .pricingHeader,.programTable.programTable4Columns .minimalized:not(.selected) .orderButton button {background: var(--darkGrey) !important;}
.programTable.programTable4Columns .minimalized:not(.selected) .pricingPrice * {color: var(--darkGrey) !important;}
.pricingColumn:is(.programTable.programTable4Columns .minimalized:not(.selected)) {border: 1px solid #ddd !important;}

.programTable.programTable4Columns .minimalized:not(.selected):hover {opacity: 1}

.programTable.programTable4Columns .selected .orderButton button {display: none}
.programTable.programTable4Columns .selected svg {display: block;}
.programTable.programTable4Columns .orderFooter.minimalized {display: none}


/* Responsive Design */
@media (max-width: 1280px) {

.programTable.programTable4Columns .programTable.programTable4Columns .pricingGrid {flex-wrap: wrap;}
.programTable.programTable4Columns .programTable.programTable4Columns .pricingColumn {flex: 1 1 320px;}
}

@media (max-width: 768px) {

.programTable.programTable4Columns .programTable.programTable4Columns .pricingGrid {gap: 34px;}
.programTable.programTable4Columns .programTable.programTable4Columns .pricingColumn {flex: 1 1 100%;}

}


/* ==== PAYMENT /payment.php ==== */


.payment .payContext {margin: 0 0 var(--gapLarge) 0;}
.payment .payContext h6 {margin: 0 0 8px 0; width: auto; display: block;}
.payment .payContext info {background-color: #fff7db; padding: var(--gapSmall); display: block;}

.payment .userProgramSelect.hideStarter option.starterOption { display: none; }
.payment .pricingColumn.hideStarter { display: none; }


.paymentWrap {display: flex; margin: var(--gapSmall) auto var(--gap) auto; gap: var(--gapXLarge); width: 100%; max-width: 1178px; align-self: start; justify-content: space-between;

}
.paymentWrap h4 {margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;}
.paymentWrap h4 .formNotice {margin: 0; font-size: 1.3rem; font-weight: normal}

.paymentWrap .is0,.paymentWrap .not1 {display: none !important}


.paymentProgram.form {flex: 1; margin: 0; max-width: calc( 50% - 0.5 * var(--gapXLarge));

}
.paymentProgram.form label {margin: 0 !important}

.paymentProgram.form div.userProgramSelectWrap::before {content: none; display: none;}

.paymentProgram.form select.userProgramSelect {font-size: 20px}
.paymentProgram.form select.userProgramSelect optgroup {font-size: 20px; color: white; background: var(--darkGrey); font-style: normal;}
.paymentProgram.form select.userProgramSelect option {font-size: 19px; background: white; padding: 4px}

.paymentProgram.form .renewalCouponRow {flex-direction: column; gap: 12px;}
.paymentProgram.form .renewalCouponRow input[type="checkbox"] {margin: -3px 12px 0 0}
.paymentProgram.form .renewalCouponRow  > div {}

.paymentProgram.form .couponDiv svg.validIcon {display: none; width: 24px; height: 24px; fill: var(--green); margin-left: 12px;}
.paymentProgram.form .couponDiv div {white-space: nowrap;}
.paymentProgram.form .couponDiv input {width: calc(100% - 65px); display: inline-block;}
.paymentProgram.form .couponDiv button {padding: 12px 18px; margin: -3px 0 0 10px;}
.paymentProgram.form .couponDiv button svg {width: 18px; height: 18px}
.paymentProgram.form .couponDiv .couponMessage {color: red; font-weight: bold}
.paymentProgram.form .couponDiv .couponValid {color: green; font-weight: bold; display: flex; margin: 4px 0 0 12px; justify-content: normal; align-items: center;}
.paymentProgram.form .couponDiv .couponValid * {font-size: var(--fontSizeSmall); line-height: 1.2;}
.paymentProgram.form .couponDiv .couponValid small {display: inline-block; margin: 0}
.paymentProgram.form .couponDiv .couponValid #discount-text {color: green; font-weight: bold;}
.paymentProgram.form .couponDiv .couponValid  > div {width: auto; margin-left: 6px; font-weight: normal}
.paymentProgram.form .couponDiv .couponLoading {color: var(--darkGrey); display: none}


.paymentProgram.form .userDiscountDiv label {font-weight: bold; background: var(--green); color: white; border-radius: 4px; text-align: center; line-height: 1.2;}
.paymentProgram.form .userDiscountDiv label b {font-size: var(--fontSizeLarge); color: white; display: inline-block; margin-inline: 8px;}
.paymentProgram.form .userDiscountDiv label svg {fill: white; height: 16px; width: 16px; display: inline-block}


.paymentProgram.form .orderSection {margin: var(--gap) 0;}
.paymentProgram.form .cart {background: var(--lightestGrey); padding: var(--gapSmall); display: flex; justify-content: space-between; align-items: center;

}
.paymentProgram.form .cart .is0,.paymentProgram.form .cart .not1 {display: none !important}
.paymentProgram.form .cart #program-name {font-size: var(--fontSizeXLarge); font-weight: bold; flex: 1}

.paymentProgram.form .cart .priceDiv {width: auto; display: flex; align-items: center;}
.paymentProgram.form .cart .priceDiv .price-year-tax,.paymentProgram.form .cart .priceDiv strong.price-year {font-size: calc(var(--fontSizeXXLarge) + 0rem); font-weight: bold; margin: 0 8px 0 0}
.paymentProgram.form .cart .priceDiv div {font-size: calc(var(--fontSizeLarge) - 0.5rem); display: block; line-height: 1;}
.paymentProgram.form .cart .priceDiv div  > p {white-space: nowrap; margin: 0; line-height: 1}
.paymentProgram.form .cart .priceDiv small {margin: 0; display: inline}

.paymentCheckout {flex: 1; display: flex; gap: var(--gapLarge); flex-direction: column;

}
.paymentCheckout img,.paymentCheckout svg {width: 100px; height: auto;}
.paymentCheckout button span {letter-spacing: normal}

.paymentCheckout .paymentMethods {display: flex; gap: 2px; flex-direction: column;

}
.paymentCheckout .paymentMethods label {display: flex; gap: 8px; padding: 14px 14px; border-radius: 2px; border: 2px solid var(--lighterGrey); transition: 0.4s; align-items: center;}
.paymentCheckout .paymentMethods label b {font-size: 18px; display: block;}
.paymentCheckout .paymentMethods label small {margin-top:0}
.paymentCheckout .paymentMethods label img {max-width: 100px; width: auto; max-height: 35px; height: auto; display: block; align-self: center}
.paymentCheckout .paymentMethods label div {flex: 1}
.paymentCheckout .paymentMethods label:hover,.paymentCheckout .paymentMethods label.selected:hover {border: 2px solid var(--linkHover); border-radius: 8px; text-decoration: none}
.paymentCheckout .paymentMethods label:hover b,.paymentCheckout .paymentMethods label.selected:hover b {color: var(--linkHover)}
.paymentCheckout .paymentMethods label.selected {border: 2px solid var(--link); border-radius: 8px; background: rgba(255,255,255,1); box-shadow: var(--materialShadow);}
.paymentCheckout .paymentMethods label.selected b {color: var(--link)}


.paymentCheckout .payment-method-section button {width: 100%;}
.paymentCheckout .payment-method-section button span {color: white; font-weight: bold; font-size: inherit}


@media screen and (max-width: 968px) {

.paymentWrap {flex-direction: column; gap: 0;

}
.paymentWrap .paymentCheckout {width: 100%;}


.paymentProgram.form {max-width: none;}
.paymentProgram.form .cart {flex-direction: column; justify-content: center; gap: 8px;}
.paymentProgram.form .cart #program-name {text-align: center;}

.payContext info {margin: 8px 0 0 0; font-size: var(--fontSizeSmall)}


}


/* USER PROGRAM CONVERT */


.programConvert h1 {font-weight: bold; font-size: calc(var(--fontSizeXLarge) + 0.3rem);}
.programConvert p,.programConvert .convertMainPart,.programConvert .convertMainPart *,.programConvert .convertData * {font-size: calc(var(--fontSizeLarge) - 0.25rem);}
.programConvert p {line-height: 1.4;}

.programConvert .convertWarning {color: white; padding: 12px 24px; margin: var(--gap) 0; width: max-content;
max-width: var(--formWidth); padding: 20px var(--gapSmall) 20px 60px; color: white; text-align: left; box-shadow: var(--materialShadow); border-radius: var(--borderRadius); font-size: var(--fontSizeLarge); font-weight: bold; background-repeat: no-repeat; background-size: 24px; background-position: 24px center; line-height: 1.3; background-color: var(--addColorHover); background-image: url("/ico/ok-white-128.png");}


.programConvert .convertMainPart {background: var(--lightestGrey); padding: var(--gapSmall); margin: var(--gapSmall) auto; display: flex; flex-direction: column; gap: 16px;

}
.programConvert .convertMainPart form {display: flex; margin: 0; align-items: center; gap: 16px;}
.programConvert .convertMainPart form select {padding-right: 32px; margin: 0; max-width: 300px;}
.programConvert .convertMainPart form button {margin: 0; border-radius: 6px; width: auto; font-size: var(--fontSize); padding: 10px 20px;}

.programConvert .convertMainPart small {font-size: var(--fontSize); font-weight: bold; color: red;}


.programConvert .mainActivitySelect {margin: var(--gapXLarge) 0 0 0;}


.programConvert .programTable.programTable4Columns .pricingPrice,.programConvert .programTable.programTable4Columns .orderButton,.programConvert .programTable.programTable4Columns .orderXtraFeatures,.programConvert .programTable.programTable4Columns .pricingHeader div {display: none !important}


@media screen and (max-width: 968px) {

.programConvert .convertWarning {width: 100%}
.programConvert .convertMainPart {gap: 16px; text-align: center;}
.programConvert .convertMainPart div b {display: block; text-align: center; margin: 0 auto 4px auto}
.programConvert .convertMainPart form {display: flex; flex-direction: column; gap: 12px;}
.programConvert .convertMainPart form button {width: 100%;}
}


/* PAYMENT BANK TRANSFER /payment-transfer.php */


.paymentTransfer .flex {margin: var(--gap) auto; display: flex; width: 100%; max-width: 1200px; gap: var(--gapLarge); justify-content: center;

}
.paymentTransfer .flex  > div {width: 45%}


.paymentTransfer .logo {display: flex; align-items: center; font-size: var(--fontSizeLarge); font-weight: bolder; flex-direction: row; gap: 18px;}
.paymentTransfer .logo img {max-width: 100px; max-height: 40px; display: block;}

.paymentTransfer .tatra,.paymentTransfer .rf {display: none}
.paymentTransfer .bank-transfer-rf .rf,.paymentTransfer .bank-transfer-tatra .tatra {display: block;}
.paymentTransfer .bank-transfer-rf .rf.logo,.paymentTransfer .bank-transfer-tatra .tatra.logo {display: flex;}

.paymentTransfer .pricePart strong { font-size: var(--fontSizeLarge) !important;}
.paymentTransfer .pricePart .infoBox {margin: var(--gapSmall) 0 0 0;}
.paymentTransfer .pricePart .infoBox i {font-size: var(--fontSizeSmall);}


/* SUBSCRIPTION - USER PROGRAM */
/* === com_user_program.php === */


.userProgram .titleBlock.titleBlockWithRightItem .titleBlockRightItem {margin: 0;}

.userProgram .titleBlockWithRightItem a {display: block}

.userProgram .userProgramContainer {display: flex; gap: var(--gap); flex-direction: column; margin: 0;

}

.userProgram .userProgramContainer .expiredProgram table tbody td,.userProgram .userProgramContainer .expiredProgram table tbody th,.userProgram .userProgramContainer .expiredProgram table tbody div {color: var(--darkGrey);}


.userProgram table.tableContentNoWrap .discountApplied {font-weight: bold; font-size: var(--fontSizeSmall); color: blue}
.userProgram table.tableContentNoWrap .price small {margin: 0; font-size: calc(var(--fontSizeSmall) - 0.1rem)}
.userProgram table.tableContentNoWrap .recurr-0,.userProgram table.tableContentNoWrap .discountApplied:empty {display: none !important}

.userProgram table.tableContentNoWrap > tbody th,.userProgram table.tableContentNoWrap > tbody td {font-size: calc( var(--fontSize) + 0.05rem); padding: 8px 16px !important}
.userProgram table.tableContentNoWrap > tbody .recurr-1 {white-space: normal; font-size: var(--fontSizeSmall); line-height: 1.2;}
.userProgram table.tableContentNoWrap > tbody .recurr-1 a {display: block; padding: 3px 0px; font-size: var(--fontSizeSmall);}

.userProgram table.tableContentNoWrap > tbody .price {width: 10%}

.userProgram table.tableContentNoWrap > tbody .period {width: 10%}
.userProgram table.tableContentNoWrap > tbody .actionCol {width: 10%; padding-inline: 12px;}
.userProgram table.tableContentNoWrap > tbody .actionCol div {display: flex; gap: 8px; justify-content: flex-end; flex-direction: column; text-align: center;}
.userProgram table.tableContentNoWrap > tbody .actionCol div button,.userProgram table.tableContentNoWrap > tbody .actionCol div a.actionButton {border-radius: 7px; padding-inline: 18px; width: 100%;}


/* USER ACCOUNT */
/* ============ */


.userAccount.userValid .accountTopPart {position: relative; margin: 0 0 var(--gapLarge) 0;}

.userAccount.userValid .featuresGrid {display: flex; flex-wrap: wrap; margin: 0 0 var(--gapSmall) 0; gap: var(--gap) var(--gapSmall); justify-content: center;

}
.userAccount.userValid .featuresGrid  > div {background: #9a5b05; flex: 1 0 220px; max-width: 340px; border-radius: 4px; border: 1px solid var(--lightGrey); padding: 20px 24px 32px 24px; transition: 0.4s; display: flex; flex-wrap: nowrap; gap: 18px; align-items: flex-start; position: relative;

}
.userAccount.userValid .featuresGrid > div * {color: white; line-height: 1;}

:is(.userAccount.userValid .featuresGrid > div):nth-child(1),:is(.userAccount.userValid .featuresGrid > div):nth-child(1) a.newItem:hover {background: var(--featureColor_1);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(1):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(1) a.newItem {background: var(--featureColor_1_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(2),:is(.userAccount.userValid .featuresGrid > div):nth-child(2) a.newItem:hover {background: var(--featureColor_2);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(2):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(2) a.newItem {background: var(--featureColor_2_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(3),:is(.userAccount.userValid .featuresGrid > div):nth-child(3) a.newItem:hover {background: var(--featureColor_3);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(3):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(3) a.newItem {background: var(--featureColor_3_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(4),:is(.userAccount.userValid .featuresGrid > div):nth-child(4) a.newItem:hover {background: var(--featureColor_4);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(4):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(4) a.newItem {background: var(--featureColor_4_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(5),:is(.userAccount.userValid .featuresGrid > div):nth-child(5) a.newItem:hover {background: var(--featureColor_5);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(5):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(5) a.newItem {background: var(--featureColor_5_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(6),:is(.userAccount.userValid .featuresGrid > div):nth-child(6) a.newItem:hover {background: var(--featureColor_6);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(6):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(6) a.newItem {background: var(--featureColor_6_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(7),:is(.userAccount.userValid .featuresGrid > div):nth-child(7) a.newItem:hover {background: var(--featureColor_7);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(7):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(7) a.newItem {background: var(--featureColor_7_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(8),:is(.userAccount.userValid .featuresGrid > div):nth-child(8) a.newItem:hover {background: var(--featureColor_8);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(8):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(8) a.newItem {background: var(--featureColor_8_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(9),:is(.userAccount.userValid .featuresGrid > div):nth-child(9) a.newItem:hover {background: var(--featureColor_9);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(9):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(9) a.newItem {background: var(--featureColor_9_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(10),:is(.userAccount.userValid .featuresGrid > div):nth-child(10) a.newItem:hover {background: var(--featureColor_10);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(10):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(10) a.newItem {background: var(--featureColor_10_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(11),:is(.userAccount.userValid .featuresGrid > div):nth-child(11) a.newItem:hover {background: var(--featureColor_11);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(11):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(11) a.newItem {background: var(--featureColor_11_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(12),:is(.userAccount.userValid .featuresGrid > div):nth-child(12) a.newItem:hover {background: var(--featureColor_12);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(12):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(12) a.newItem {background: var(--featureColor_12_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(13),:is(.userAccount.userValid .featuresGrid > div):nth-child(13) a.newItem:hover {background: var(--featureColor_13);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(13):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(13) a.newItem {background: var(--featureColor_13_hover);}

:is(.userAccount.userValid .featuresGrid > div):nth-child(14),:is(.userAccount.userValid .featuresGrid > div):nth-child(14) a.newItem:hover {background: var(--featureColor_14);}
:is(.userAccount.userValid .featuresGrid > div):nth-child(14):hover,:is(.userAccount.userValid .featuresGrid > div):nth-child(14) a.newItem {background: var(--featureColor_14_hover);}


.userAccount.userValid .featuresGrid > div svg {width: 42px; height: 42px; fill: white; flex-shrink: 0}
.userAccount.userValid .featuresGrid > div a.bold {display: block; white-space: nowrap; padding: 0 0 4px 0; margin: 0 0 4px 0; overflow: hidden; text-overflow: ellipsis;}
.userAccount.userValid .featuresGrid > div ul li {list-style: none;}
.userAccount.userValid .featuresGrid > div ul li a {font-size: calc( var(--fontSizeSmall) - 0rem); color: white; white-space: nowrap; padding: 3px 0; display: block;}


.userAccount.userValid .featuresGrid > div a.newItem {border: 2px solid white; padding: 10px 18px; border-radius: 32px; width: fit-content; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: calc( var(--fontSizeSmall) - 0.1rem); color: white; white-space: nowrap; font-weight: bold; box-shadow: var(--materialShadow);}
.userAccount.userValid .featuresGrid > div a.newItem:hover {box-shadow: var(--materialShadowHover);}


.userAccount.userValid .featuresGrid  > div:hover {box-shadow: var(--materialShadow);}

:is(.userAccount.userValid .featuresGrid .featApps,.userAccount.userValid .featuresGrid .featStock) a {display: inline-block}


.userAccount.userValid .warning.message {position: fixed; bottom: 32px; right: 24px; z-index: 9999; margin: 0; background-size: 32px; background-position: 22px center; padding: 18px var(--gapSmall) 22px 67px; min-width: 0;}
.userAccount.userValid .warning.message h4 {font-size: calc(var(--fontSizeLarge) - 0.2rem); font-weight: bold;}


.userAccount .paymentResult {margin: 0 auto var(--gap) auto}

.userAccount h4 a {font-weight: normal; margin: 0 0 0 8px !important; font-size: var(--fontSizeSmall); display: inline-block;}
.userAccount h4 a svg {height: 12px; width: 12px; margin: -3px 4px 0 0}

.userAccount .userAccountTables {margin: var(--gapSmall) 0; gap: var(--gap) var(--gapSmall);

}
.userAccount .userAccountTables .feature_table_scroll {overflow-x: auto;}

.userAccount .userAccountTables .empty {color: var(--darkGrey); font-style: italic; margin: var(--gapSmall) auto;}
.userAccount .userAccountTables .addButton.actionButton {margin: var(--gapSmall) auto; font-style: normal;}


.userAccount .userAccountTables table.tableContentNoWrap * {font-size: calc( var(--fontSizeSmall) - 0rem); white-space: nowrap;}
.userAccount .userAccountTables table.tableContentNoWrap thead td,.userAccount .userAccountTables table.tableContentNoWrap thead th {padding: 8px 10px !important}

.userAccount .userAccountTables table.tableContentNoWrap tbody .unreadMessages * {font-weight: bold;}
.userAccount .userAccountTables table.tableContentNoWrap tbody td,.userAccount .userAccountTables table.tableContentNoWrap tbody th {padding: 7px 10px !important}
.userAccount .userAccountTables table.tableContentNoWrap tbody a {display: block; max-width: 200px;}
.userAccount .userAccountTables table.tableContentNoWrap tbody a,.userAccount .userAccountTables table.tableContentNoWrap tbody .overFlow { overflow: hidden; text-overflow: ellipsis;}
.userAccount .userAccountTables table.tableContentNoWrap tbody .overFlow {max-width: 200px}
.userAccount .userAccountTables table.tableContentNoWrap tbody svg {height: 12px; width: 12px;}
.userAccount .userAccountTables table.tableContentNoWrap tbody svg.iconDeliv {display:inline-block;margin-left:8px}
.userAccount .userAccountTables table.tableContentNoWrap tbody .date {width: 80px;}
.userAccount .userAccountTables table.tableContentNoWrap tbody .id {width: 90px;}
.userAccount .userAccountTables table.tableContentNoWrap tbody .price {width: 120px;}
.userAccount .userAccountTables table.tableContentNoWrap tbody .flag {margin-right: 6px; vertical-align: -2px;}
.userAccount .userAccountTables table.tableContentNoWrap tbody .out_stock,.userAccount .userAccountTables table.tableContentNoWrap tbody .in_stock,.userAccount .userAccountTables table.tableContentNoWrap tbody .off_stock {display: none;}
.userAccount .userAccountTables table.tableContentNoWrap tbody .out_stock.stock-1,.userAccount .userAccountTables table.tableContentNoWrap tbody .in_stock.stock1,.userAccount .userAccountTables table.tableContentNoWrap tbody .off_stock.stock0 {display: block;}


.userAccount .userAccountProfileTopPart {margin: 0 0 var(--gap) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--gapLarge);

}

.userAccount .userAccountProfileTopPart > div a {font-size: calc( var(--fontSizeSmall) - 0.15rem); position: relative; margin-left: var(--gapSmall);}
.userAccount .userAccountProfileTopPart > div a img {width: 80px; height: auto; display: block; margin: 0 auto}
.userAccount .userAccountProfileTopPart > div a img.defaultLogo {width: 60px; opacity: 0.7;}
.userAccount .userAccountProfileTopPart > div a small {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: inherit; padding: 4px 10px; background-color: rgba(255,255,255,0.85); font-weight: bold; white-space: nowrap; border: 1px solid var(--link); box-shadow: var(--materialShadow); transition: 1s; display: none;}
.userAccount .userAccountProfileTopPart > div a:hover small {display: block;}

.userAccount .userAccountProfileTopPart > div h1 {margin: 0; font-size: 2.8rem; line-height: 1.1}

.userAccount .userAccountProfileTopPart .userAccountTopName {display: flex; gap: var(--gapSmall); align-items: center; width: fit-content; justify-content: flex-start; background-color: var(--lightBrown); margin: 0; padding: var(--gapSmall) 0; flex: 1;}

.userAccount .userAccountProfileTopPart .userAccountTopSubscription {margin: 0; flex: 1;}


.userAccount .userAccountProfile {display: flex; gap: var(--gapLarge);

}
.userAccount .userAccountProfile .userAccountProfileLogo {width: 120px; text-align: center;}
.userAccount .userAccountProfile .userAccountProfileLogo img {max-width: 120px; max-height: 120px; margin: 0 auto;}
.userAccount .userAccountProfile .userAccountProfileLogo a {display: block; margin: 8px auto; font-size: var(--fontSizeSmall)}

.userAccount .userAccountProfile .userAccountProfileData {flex: 1}
.userAccount .userAccountProfile .userAccountProfileServices {flex: 1}

.userAccount .userAccountProfile ul.userAccountPrepaidServices {margin: 0 0 0 0px; list-style: none;

}
.userAccount .userAccountProfile ul.userAccountPrepaidServices li {margin: 0 0 12px 0;

}
.userAccount .userAccountProfile ul.userAccountPrepaidServices li small,.userAccount .userAccountProfile ul.userAccountPrepaidServices li b {margin: 0; font-size: 1.35rem;}
.userAccount .userAccountProfile ul.userAccountPrepaidServices li small a {display: inline-block; margin: 0 8px 0 0 ; font-size: 1.35rem; font-weight: bold;}


/* SHOWROOM */


.showroomNew div.labelPart label {text-align: center;}
.showroomNew div.labelPart label input {display: block; margin: 0 auto 8px auto}


/* ARTICLES */

.articlesListing table tr th {white-space: normal; padding: 24px !important; line-height: 1.5; position: relative;}
.articlesListing table tr th h6 {margin: 0 0 8px 0; font-weight: bold;}
.articlesListing table tr th h6 a {font-weight: bold;}
.articlesListing table tr th h6,.articlesListing table tr th h6 a {font-size: calc(var(--fontSize) + 0.07rem);}
.articlesListing table tr th div {margin: 0 0 8px 0; color: var(--darkGrey);}
.articlesListing table tr th div b {font-weight: bold !important;}
.articlesListing table tr th svg.articleStatus {display: inline-block;}
.articlesListing table tr td.small a,.articlesListing table tr td.small svg {display: block; margin-block: 12px}


@media screen and (max-width: 1280px) {


.userAccount.userValid .featuresGrid  > div {flex: 1 0 40%;}


}


@media screen and (max-width: 768px) {


.userAccount.userValid .featuresGrid {flex-direction: column;}
.userAccount.userValid .featuresGrid  > div {flex: 1; max-width: none; width: 100%;}


.userAccount .userAccountProfileTopPart {flex-direction: column; justify-content: flex-start; align-items: flex-start;

}
.userAccount .userAccountProfileTopPart  > div {}

.userAccount .userAccountProfileTopPart .userAccountTopName {padding: 0;

}
.userAccount .userAccountProfileTopPart .userAccountTopName a {margin: 0}

.userAccount .userAccountProfileTopPart .userAccountTopSubscription {}


.userAccount .userAccountProfile {flex-direction: column;

}
.userAccount .userAccountProfile .userAccountProfileLogo {}

.userAccount .userAccountProfile .userAccountProfileData {flex: 1; order: 2}
.userAccount .userAccountProfile .userAccountProfileServices {flex: 1; order: 1}


}