:root {
  --vDocumentMaxWidth: 1440px;
  
  --vColorLink: #007bff;
  --vColorLightGray: #f9f9f9;
  --vColorGray: #eee;
  --vColorDarkGray: #ddd;
  --vColorGrayText: #999;
  --vColorDarkGrayText: #777;
  --vColorVeryDarkGrayText: #333;
  --vColorDarkBlue: #3b547f;
  --vColorLightBlue: #c6d2e4;
  --vColorRed: rgb(180, 67, 55);
  --vColorOrange: orange;
  --vColorGreen: green;
  --vColorLightGreen: rgb(228, 251, 214);
  --vColorLinkBlue: rgb(13, 110, 253);
  
  --vMedkeyBlue: #2c67b4;
  --vColorVmBlue: rgb(44, 103, 180);
  
  --vMedkeyGray: #848587;
  
  --vColorErrorBg: rgb(242, 222, 222);
  --vColorError: var(--red);
  --vColorErrorBorder: rgb(235, 204, 209);
  
  --vColorText: rgb(33, 37, 41);
  
  --vShadow: 7px 5px 15px -15px rgba(66, 68, 90, 1);
  --vShadowSmall: 2px 2px 5px 0px rgba(0,0,0,0.43);
  
  --vThemeColor: var(--vColorDarkBlue);
  --vLayoutBorderColor: var(--vColorDarkGray);
  --vBgColor: #fff;
  
  --vButtonBgColor: var(--vColorVmBlue);
  --vButtonTextColor: #fff;
  --vThemeButtonBgColor: var(--vButtonBgColor);
  --vThemeButtonTextColor: var(--vButtonTextColor);
  --vButtonMinWidth: 30px;
  --vButtonMinHeight: 30px;
  
  --vFooterBgColor: var(--vThemeColor);
  --vFooterColor: #fff;
}

body, html {
    width: 100%;
    overflow-x: hidden;
}

.strong {
    font-weight: 600;
}

.desktop {
    display: initial;
}

.tablet {
    display: none;
}

.red {
    color: var(--vColorRed);
}

.orange {
    color: var(--vColorOrange);
}

.green {
    color: var(--vColorGreen);
}

.mobile {
    display: none;
}

body > .windowFog {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 20;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: none;
}

body > .windowFog i {
    color: var(--vColorDarkBlue);
    font-size: 2em;
    opacity: 0.6;
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--vColorVmBlue);
    font-size: 0.85em;
}

div.validation-error {
    margin-bottom: 0px !important;
    margin-top: 1rem !important;
    position: relative;
    top: 13px;
}

div.validation-error + div input,
div.validation-error + div select,
div.validation-error + div textarea {
    border-color: var(--vColorRed);
}

.validation-error {
    color: var(--vColorRed);
}

.validation-error p {
    margin-bottom: 0px;
}

.head-image {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    position: relative;
}

button.navbar-toggler {
    border-color: var(--vColorVmBlue) !important;
    border-width: 2px !important;
    background-color: #fff !important;
    opacity: 0.7;
    transition: none !important;
    box-shadow: none !important;
}

header {
    position: relative;
}

.iconsHeadBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.iconsHeadBox > * {
    margin-left: 10px;
}

.iconsHeadBox ul {
    list-style: none;
    margin-bottom: 0px;
}

.textAlignRight {
    text-align: right;
}

.vProgress2 {
    min-height: 200px;
    cursor: wait;
    position: relative;
}

.vProgress2 i[class*="fa-flip"] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

.vProgress2 .curtain {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 10;
    background-color: #fff;
}

.button {
    display: inline-block;
    border-style: solid;
    border-width: 0px;
    background-color: var(--vButtonBgColor);
    padding: 5px 10px;
    min-width: var(--vButtonMinWidth);
    min-height: var(--vButtonMinHeight);
}



.voucherBox {
    border-bottom: solid var(--vColorLightGray) 2px;
    margin-bottom: 30px;
    padding-bottom: 6px;
}

.voucherBox > p {
    margin-bottom: 0px;
}

.voucherBox a {
    text-decoration: none;
}

.voucherFormBox {
    min-width: 350px;
}


.voucherFormBox .formGroup {
    padding-bottom: 0px;
}

.voucherFormBox .row > *,
.voucherFormBox .formGroup {
    display: flex;
    justify-content: center;
}

.voucherFormBox .row > *:first-child {
    padding-right: 0px;
}

.voucherFormBox .row > *:last-child {
    padding-left: 3px;
}

.voucherFormBox #voucherCode {
    border-radius: 0px;
}

.productAction .qrCode {
    cursor: zoom-in !important;
}

.button, 
.button a {
    color: var(--vButtonTextColor);    
    text-decoration: none;
    white-space: nowrap;
}

.button.icon i[class^="fa-"] + span {
    margin-left: 10px;
}

.button a:hover,
.button:hover {
    text-decoration: none;
    color: var(--vButtonTextColor);
}

.language-selector ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.language-selector ul a {
    text-decoration: none;
    color: inherit;
    text-transform: uppercase;
    font-weight: 200;
}

.language-selector ul a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.language-selector ul a > img {
    display: block;
}

.language-selector ul a > span {
    margin-left: 10px;
    font-weight: 600;
    color: var(--vColorDarkGrayText);
}

.vTooltip.userMenu {
    padding: 0px;
    min-width: 250px;
}

.vTooltip.userMenu ul {
    list-style: none;    
    padding: 0px;
    margin: 0px;
}

.vTooltip.userMenu li a {
    display: block;
    padding: 12px 10px;
    color: initial;
    text-decoration: none;
    border-right: solid transparent 3px;
}

.vTooltip.userMenu li a:hover {
    border-right-color: var(--vLayoutBorderColor);
    background-color: var(--vColorLightGray);
}

.vTooltip.userMenu .userMenu > p {
  padding: 12px 16px;
  margin-bottom: 0px;
  background-color: var(--vColorGray);
}

.vTooltip.userMenu .fa-user {
    margin-right: 10px;
}

.headBoxContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.containerNavbar {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: flex;
    justify-content: center;
}

.containerNavbar .boxNavbar > * {
    position: relative;
    z-index: 4;
    background-color: #fff;
}

#pageContainer.container {
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px !important;
}

.content-box {
    min-height: 500px;
    padding-bottom: 200px;
}

.pageWrapper .container,
#main-content > .container {
    max-width: none;
}

#main-content > header {
    border-bottom: solid var(--vThemeColor) 1px;
}

.site-footer {
    font-weight: 200;
}

.site-footer .publisher {
    font-size: 1.2em;
}

.pageWrapper {
    max-width: var(--vDocumentMaxWidth);
    margin: 0px auto;
}

@media screen and (max-width: 1460px) { 
    .pageWrapper {
        padding: 0px 20px;
    }
}

.containerNavbar .boxNavbar {
    width: 100%;
}

.containerNavbar .headerBar {
    padding: 6px 0px;
    border-bottom: solid var(--vLayoutBorderColor) 1px;
}

h4.mainTitle {
    color: var(--vColorDarkGrayText);
    font-size: 1.3em;
    font-weight: 600;
    margin: 0px;
}

h4.mainTitle a {
    color: var(--vColorVmBlue);
    text-decoration: none;
    display: inline-block;
}

.head-image img {
    width: auto;
    height: auto;
    max-width: unset;
}

.site-footer {
    /*background-*/
    padding: 20px 0px;
}

.site-footer .organizerCol img {
    width: 80px;
    height: auto;
}

.site-footer .organizerCol a {
    display: inline-block;
    /*background-color: var(--vThemeColor);*/
    border-radius: 80px;
}

.site-footer, .site-footer a {
    color: var(--vColorDarkGrayText);
}

.site-footer .contactRow {
    justify-content: space-between;
}

.site-footer .addressRow {
    margin-top: 20px;
    border-top: solid var(--vLayoutBorderColor) 1px;
    padding-top: 20px;
}

.site-footer .footerLabel {
    display: block;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.3em;
    margin-bottom: 10px;
    color: var(--vColorVeryDarkGrayText);
}

.site-footer .contactCol {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 992px) { 
    #navbarMenu.bg-light {
        background-color: transparent !important;
    }
}

/*Medkey*/

.medkeyGrayColor {
    color: var(--vMedkeyGray);
}

.medkeyBlueColor {
    color: var(--vMedkeyBlue);
}

.medkeyLogoInline {
    display: flex;
    margin: 10px;
    margin-bottom: 30px;
    justify-content: center;
    align-items: center;
}

.medkeyLogoInline img {
    width: 150px;
    height: auto;
}

body .medkeyView {
    background-color: var(--vColorLightGray);
}

body .medkeyView h1 {
    color: inherit;
    font-weight: 500;
}

body .medkeyView input[type="checkbox"], body .medkeyView input[type="radio"] {
    width: 1em;
}

body .medkeyView,
body .medkeyView *:not([class^="fa-"]) {
    font-family: inherit !important;
}

body .medkeyView {
    font-size: 0.9em;
}

body .medkeyView {
    padding-top: 50px !important;
}

body .medkeyView .medkeyViewWrapper > div:first-child * {
    font-weight: 200;
}

body .medkeyView .medkeyViewWrapper > div:first-child h2 {
    font-size: 2em;    
}

body .medkeyView .medkeyViewWrapper h2 {
    color: var(--vColorVmBlue);
}

body .medkeyView .medkeyViewWrapper h2.registerHeader {
    text-align: left;
    color: var(--vColorVmBlue);
    font-weight: 600;
}

body .medkeyView .medkeyViewWrapper > div:first-child h4 {
    font-size: 1.2em;    
}

#mainDashboard,
.insideWrapper,
body .medkeyView .medkeyViewWrapper > div {
    max-width: 850px;
    margin: 0px auto;
}

.buttonLink {
    display: inline-block;
    background-color: var(--vColorVmBlue);
    color: #fff;
    text-align: center;
    width: 100%;
    min-width: 120px;
    max-width: 200px;
    text-decoration: none;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.2;
}

.buttonLink:hover {
    color: #fff;
    text-decoration: none;
}

.messageSummary,
.insideWrapper {
    max-width: 1000px;
    margin: 0px auto;
}

.insideWrapper {
    padding-top: 50px;
}

.insideWrapper h1,
.insideWrapper h2,
.insideWrapper h3,
.insideWrapper h4,
.insideWrapper .panel-heading,
.insideWrapper h5 {
    color: var(--vColorVmBlue);
}

.likeTableContainer.bordered {
    border: solid var(--vColorLightGray);
    padding: 20px;
}

.likeTableContainer.bordered.borderTransparent {
    border-color: transparent;
}

.likeTableContainer:not(.noMarginBottom) {
    margin-bottom: 50px;
}

.likeTable:not(.noMargin) {
    margin-top: 30px;
}

.likeTable.bordered {
    border: solid var(--vColorLightGray);
    padding: 20px;
}

.likeTable .moveLeft {
    position: relative;
    left: -32px;
}

.likeTable.bordered.borderTransparent {
    border-color: transparent;
}

.likeTable.noPadding,
.likeTableContainer .likeTable .noPadding {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.likeTableContainer .likeTable .noPadding [class*="col-"] {
    padding-left: 0px;
    padding-right: 0px;
}

.likeTable .row {
    margin-left: 0px;
    margin-right: 0px;
}

.likeTable .right {
    text-align: right;
}

.likeTable .center {
    text-align: center;
}

.likeTable .left {
    text-align: left;
}

.likeTable .row {
    display: flex;
    align-items: center;
}

.likeTable .row:not(.head) {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 0.9em;
}

.likeTable .row:not(.head):not(:last-child) {
    border-bottom: solid var(--vLayoutBorderColor) 1px;    
}

.likeTable .row.head {
    font-size: 1.2em;
    color: var(--vColorGrayText);
    font-weight: 600;
    border-bottom: solid var(--vColorDarkGrayText) 1px;
    padding-bottom: 10px;
}

.likeTable .order-status.status-2,
.likeTable .order-status.status-1 {
    color: var(--vColorRed);
}

.likeTable .order-status.status-5,
.likeTable .order-status.status-6,
.likeTable .order-status.status-7 {
    color: var(--vColorGreen);
}

.likeTable .summary {
    font-weight: 600;
}

.likeTable .summary .priceLabel {
    color: var(--vColorDarkGrayText);
}

.likeTable .dataLabel {
    margin-right: 10px;
}

.likeTable .dataValue {
    color: var(--vColorVmBlue);
}

.likeTable a.linkWithIcon {
    display: flex;
    line-height: 1.2;
    text-decoration: none;
    align-items: center;
}

.likeTable a.linkWithIcon i[class^="fa-"] {
    margin-right: 5px;
}

.likeTable .fa-3x {
    font-size: 14px;
    color: var(--vColorVmBlue);
}

.checkboxIconed:not(.valid) i[class^="fa-"] {
    display: none;
}

.checkboxIconed.valid {
    display: flex;
    align-items: center;
}

.checkboxIconed.valid input[type="checkbox"] {
    display: none;
}

.checkboxIconed.valid .icon {
    width: 25px;
    height: 25px;
    border: solid var(--vColorDarkGrayText) 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.checkboxIconed.valid .icon i {
    font-size: 3em;
    display: none;
}

.checkboxIconed.valid .icon.checked i {
    display: inherit;
}

.checkboxIconed.valid label {
    margin: 0px 10px;
}

.availableProducts:not(.payOrder) ~ .form-userOrderInvoice {
    height: 0px;
    overflow: hidden;
}

/*.availableProducts.payOrder ~ .form-userOrderInvoice {
    position: relative;
    top: -60px;
}*/

.availableProducts ~ .form-userOrderInvoice [data-group="submitGroup"] > .mb-3 {
    text-align: center;
}

.availableProducts ~ .form-userOrderInvoice [data-group="invoiceWant"] .form-check {
    padding-left: 0px;
}

.nextButtonNoPayment a {
    display: block;
    margin: 0px auto;
    text-decoration: none;
    color: #fff;
    background-color: var(--vColorVmBlue);
    text-align: center;
    padding: 8px;
}

.nextButtonNoPayment a,
.availableProducts ~ .form-userOrderInvoice [data-group="submitGroup"] .btn {
    margin-top: 50px;
    width: 100%;
    max-width: 250px;
}

.availableProducts:not(.productsSelected) ~ .nextButtonNoPayment,
.availableProducts.payOrder ~ .nextButtonNoPayment {
    display: none;
}

.orderOperations {
    padding: 0px 30px;
}

.orderOperations a,
.orderOperations > .operationContainer {
    display: flex;
    align-items: center;
}

.invoiceDowload a {
    text-decoration: none;
}

.orderOperations + .orderOperations {
    margin-top: 15px;
}

.orderOperations a {
    font-weight: 200;
}

.orderOperations .operationIcon {
    width: 20px;
    display: inline-block;
    margin-right: 15px;
    text-align: center;
}

.orderOperations a,
.orderOperations i[class*="fa-"] {
    color: var(--vColorVmBlue);
}

.orderOperations a i[class*="fa-"] {
    font-size: 1.2em;
    margin-right: 10px;
}

.orderOperations a i[class*="fa-"] {
    color: inherit;
}

.popupMessageContainer {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.popupMessageContainer .popupMessageBox {
    max-width: 450px;
    width: 98%;
    min-height: 300px;
    background-color: #fff;
    position: relative;
    color: var(--vColorDarkGrayText);
    padding: 50px 20px;
    box-shadow: var(--vShadow);
}

.popupMessageContainer .popupMessageBox i[class^="fa-"] {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 1.2em;
    display: inline-block;
    cursor: pointer;
}

.popupMessageContainer .popupMessageBox .messagePopupContent {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    color: var(--vColorVmBlue);
}

.popupMessageContainer .popupMessageBox .messagePopupContent h1,
.popupMessageContainer .popupMessageBox .messagePopupContent h2,
.popupMessageContainer .popupMessageBox .messagePopupContent h3,
.popupMessageContainer .popupMessageBox .messagePopupContent h4,
.popupMessageContainer .popupMessageBox .messagePopupContent h5,
.popupMessageContainer .popupMessageBox .messagePopupContent h6 {
    margin-bottom: 30px;
}

.popupMessageContainer .vouchersInfo,
.popupMessageContainer .vouchersInfo * {
    text-align: left !important;
}

body .medkeyView select {
    font-size: inherit;
}

body .medkeyView input {
    font-size: unset;
}

body .medkeyView.contextUserMedkeyView,
body .medkeyView.contextUserMedkeyView ~ .medkeyView {
    background-color: #fff;
}

body .medkeyView.contextUserMedkeyView .contextUserView {
    max-width: 600px;
    text-align: left;
    margin: 0px auto;
}

body .medkeyView.contextUserMedkeyView .contextUserView * {
    font-size: 1.1em;
    font-weight: 200;
    line-height: 1;
    color: inherit;
}

body .medkeyView.contextUserMedkeyView .contextUserView h2 {
    font-size: 1.5em;
    font-weight: 400;
}

body .medkeyView.contextUserMedkeyView .contextUserView h2,
body .medkeyView.contextUserMedkeyView .contextUserView h2 + h5 {
    text-align: center;    
}

body .medkeyView.contextUserMedkeyView .contextUserView a {
    color: var(--vThemeColor);
    font-size: inherit;
}

body .medkeyView .medkeyForm.noLogo {
    background-image: none;
    padding-top: 50px;
}

body .medkeyForm .medkeyError,
body .medkeyForm.login .medkeyError {
    background-color: #fff;
    padding: 0px;
    margin-bottom: 10px;
    font-size: 1em;
    font-weight: 600;
}

body .medkeyView .block {
    margin-bottom: 10px;
}

body .medkeyView .medkeyForm input[type="submit"].noButton {
    color: var(--vMedkeyBlue);
    background-color: #fff !important;
    width: auto;
    margin: 0px auto;
}

body .medkeyView .resendLink {
    margin-top: 10px;
}

body .medkeyView .medkey-account-line + div {
    margin-bottom: 50px;
}

.medkeyRegistrationInfo {
    margin-bottom: 50px;
    display: flex;
    align-items: center;
}

.medkeyRegistrationInfo .logo {
    width: 76px;
    overflow: hidden;
    margin-right: 10px;
}

.medkeyRegistrationInfo .info {
    width: calc(100% - 76px);
}

.personalDataExtender {
    margin-bottom: 20px;
}

.personalDataExtender .fa-chevron-up {
    display: none;
}

.personalDataExtender [data-mode="down"] .fa-chevron-up {
    display: inherit;
}

.personalDataExtender [data-mode="down"] .fa-chevron-down {
    display: none;
}

.personalDataExtender a {
    text-decoration: none;
    font-weight: 400 !important;
    display: flex;
    align-items: center;
}

.personalDataExtender a span {
    margin-right: 5px;
}

.medkeyView .personalDataExtender a {
    font-size: inherit;    
}

.personalDataExtender ~ .mb-3 {
    display: none;
}

#userRegistrationForm_submit {
    width: 100%;
    max-width: 250px;
    border-radius: 0px;
    background-color: var(--vColorVmBlue);
    display: block;
    margin: 0px auto;
    padding: 10px 10px;
}

.infoIconContainer {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infoWithIcon .infoBoxIcon,
.generalInfoBox .infoBoxIcon,
.infoIconContainer a.infoIcon {
    color: var(--vColorVmBlue);
    font-size: 0.6em;
    display: flex;
    align-items: center;
    border: solid var(--vColorVmBlue) 1px;
    border-radius: 25px;
    padding: 2.2px 5px;
    cursor: pointer;
}

.infoIconContainer a.infoIcon {
    width: 20px;
    height: 20px;
    justify-content: center;
}

.infoWithIcon .infoBoxIcon {
    width: 19px;
    height: 19px;
}

.infoWithIcon,
.generalInfoBox {
    display: flex;
    align-items: center;
}

.infoWithIcon.iconInText {
    display: inline;
}

.infoWithIcon.iconInText .infoBoxIcon {
    display: inline-flex;
    margin-left: 5px;
    color: inherit;
}

a .infoWithIcon.iconInText .infoBoxIcon {
    border-color: var(--vColorLinkBlue);
}

.generalInfoBox {
    margin-top: 20px;
    padding: 5px 10px;
    border: solid var(--vColorLightGray) 2px;
}

.generalInfoBox .infoBoxIcon {
    padding: 3px 6px;    
    margin-right: 8px;
    cursor: inherit;
}

.infoWithIcon .infoBoxIcon {
    padding: 3px 7px;    
}

.infoWithIcon .boxText,
.generalInfoBox .boxText {
    font-size: 0.85em;
    line-height: 1.2;
    color: var(--vColorDarkGrayText);
}

.generalInfoBox + div {
    margin-top: 10px;
}

.vTooltip.infoIconBox {
    width: 350px;
    
}

.vTooltip.infoIconBox p {
    margin-bottom: 0px;
    color: var(--vColorVeryDarkGrayText);
    font-size: 0.85em;
    font-weight: 200;
}

.conferenceTitle {
    color: var(--vColorVmBlue);
    max-width: 800px;
    text-align: left;
    margin: 50px auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
}

.conferenceTitle > i[class^="fa"] {
    opacity: 0.15;
    font-size: 2.5rem;
    margin-right: 30px;
}

.conferenceTitle h1 {
    font-weight: 300;
    margin-bottom: 0px;
}

.emptyButton a {
    color: var(--vColorDarkGrayText);
    font-weight: 500;
    text-decoration: none;
    border: solid var(--vLayoutBorderColor) 3px;
    line-height: 1;
    display: block;
    padding: 15px 10px;
    white-space: nowrap;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    width: 300px;
}

.bottomSocialMedia {
    margin-top: 20px;
    padding-top: 15px;
    border-top: solid var(--vLayoutBorderColor) 1px;
}

.bottomSocialMedia .links img {
    width: 30px;
}

.bottomSocialMedia .links {
    margin-top: 15px;
}

.bottomSocialMedia .links >a:not(:last-child) {
    margin-right: 10px;
}

.login-card {
    width: 100%;
    max-width: 500px;
    margin: 30px auto;
    border: solid var(--vLayoutBorderColor) 1px;
    padding: 50px 30px;
}

.login-card [href="/register.php"] {
    display: none;
}

.login-card form > input {
    margin-bottom: 15px;
}

.login-card form > button {
    margin-bottom: 50px;
}

.emptyButton.gotoLoginPage a {
    border-color: var(--vColorVmBlue);
    background-color: var(--vColorVmBlue);
    color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: 200;
    font-size: 1.2em;
}

.gotoLoginPage {
    margin-top: 80px;
}

/* Forms */

form .mb-3 > label {
    position: relative;
    top: 13px;
    left: 5px;
    background-color: #fff;
    font-size: 0.8em !important;
    line-height: 1;
    padding: 0px 3px;
    border-radius: 3px;
    color: inherit !important;
}

form .form-check {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

form .form-select {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: rgb(206, 212, 218) !important;
    border-radius: 3px !important;
}

form label.field-required:before {
    content: "* ";
}

.formGroup > h1 {
    font-size: 24px;
    font-weight: 200;
}

.formGroup {
    /*padding-top: 30px;*/
    margin-bottom: 0px;
    padding-bottom: 30px;
}

.subForm-userRegistrationForm\.acceptances {
    padding: 30px;
    border: solid var(--vColorLightGray) 2px;
}

.formGroup.group-hidden {
    display: none;
}

form .formGroup:first-child {
    padding-top: 0px;
}

.form-userProfileForm,
.form-userRegistrationForm {
    padding: 0px;
}

.form-userProfileForm #userProfileForm,
.form-userRegistrationForm #userRegistrationForm {
    display: block;
    max-width: 800px;
}

#mainDashboard {
    padding: 50px 0px;
}

#mainDashboard .topTitle {
    text-align: center;
    color: var(--vColorVmBlue);
}

#mainDashboard .editData {
    text-align: center;
    margin-bottom: 50px;
}

#mainDashboard .editData a {
    text-decoration: none;
}

#mainDashboard #participateForm label {
    color: var(--vColorVmBlue);
}

#mainDashboard #participateForm label a {
    text-decoration: none;
}

#mainDashboard .dashboardDataValue {
    color: var(--vColorVmBlue);
}

.data-box-container {
    position: relative;    
    width: 100%;
    max-width: var(--vDocumentMaxWidth);
    margin: 40px auto 15px auto;
    padding: 30px 20px;
    border: solid var(--vColorLightGray) 2px;
}

.data-box-container .user-data > div {
    padding-top: 20px;
    padding-bottom: 20px;
}

.data-box-container .user-data > div:first-child {
    border-right: solid var(--vColorLightGray) 1px;
}

.data-box-container > .edit-icon {
    position: absolute;
    right: 3px;
    top: 3px;
    display: inline;
    color: var(--vThemeColor);
    font-size: 1.5em;
    cursor: pointer;
    opacity: 0.6;
}

.data-box-container > .edit-icon:hover {
    opacity: 1;
}

.data-box {
    width: 100%;
}

.data-box .dataContent {
    font-weight: 200;
}

.data-box .dataBoxTitle {
    font-size: 1.3em;
    font-weight: 500;
    color: var(--vColorVmBlue);
}

.data-box .dataIcon {
    color: var(--vColorVmBlue);
    font-size: 3em;
    padding: 0px 25px;
    line-height: 1.2;
}

.data-box .dataWithIcon {
    display: flex;
}

.formContainer.form-participateForm {
    padding: 30px 20px;
    display: flex;
    justify-content: center;
}

.formContainer.form-participateForm .mb-3 {
    display: flex;
    justify-content: center;
    margin-top: 35px;
}

/* Dashboard */

.calendarData {
    margin: 50px auto;
    font-size: 12px;
}

.calendarData > .row {
    max-width: 800px;
    margin: 30px auto;
    border: solid var(--vColorLightGray) 3px;
    padding: 8px 8px 8px 0px;
}

.calendarData .calendarIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vColorDarkGray);
    font-size: 30px;
}

.calendarData .c-name {
    font-size: 2em;
    font-weight: 200;
    margin-bottom: 15px;
}

.calendarData .dateTimeStrSquare {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--vColorLightGray);
    padding: 8px;
}

.calendarData .dateStr > * {
    display: block;
    text-align: center;
}

.calendarData .dateStr > .separator {
    display: none;
}

.calendarData .dateStr .week {
    font-size: 0.9em;
    font-weight: 200;
}

.calendarData .dateStr .month,
.calendarData .dateStr .day {
    color: var(--vThemeColor);
}

.calendarData .dateStr .day {
    font-size: 3em;
    line-height: 0.75;
}

.calendarData .dateStr .year {
    font-size: 0.9em;
}

.calendarData .timeStr {
    font-size: 1.7em;
    font-weight: 200;
}

.calendarData .dateTimeStr > .row > div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.calendarData .dateTimeStr .c-group {
    display: block;
}

.calendarData .dateTimeDiffStrSquare,
.calendarData .dateTimeDiffStrSquare > section {
    display: flex;
    align-items: center;
}

.calendarData .dateTimeDiffStrSquare > * {
    margin-right: 8px;
    line-height: 0.75;
}

.calendarData .dateTimeDiffStrSquare .dateDiffIn {
    font-size: 1.5em;
}

.calendarData .dateTimeDiffStrSquare .dateVal {
    font-size: 2.5em;
    padding: 15px 10px;
    background-color: var(--vColorLightGray);
    margin-right: 8px;
    
}

/* User icons */
.user-icons {
    margin: 50px auto;
    max-width: var(--vDocumentMaxWidth);
    padding: 50px 15px;
    border: solid var(--vColorLightGray) 2px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.user-icons > div {
    
}

.warningBox {
    display: flex;
    background-color: var(--vColorLightGray);
    padding: 20px;
    margin: 20px auto;
    color: var(--vColorVeryDarkGrayText);
    align-items: center;
}

.warningBox > .icon {
    font-size: 3.5em;
    opacity: 0.3;
}

.warningBox > .content {
    font-weight: 200;
    margin-left: 20px;
}

.user-icons > div .btn {
    border-radius: 0px;
    border-width: 0px;
    width: 100%;
    background-color: var(--vThemeColor);
    color: #fff;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3em;
    font-weight: 200;
    line-height: 1.2;
    margin-bottom: 15px;
}

.user-icons > div .btn i[class*="fa-"] {
    font-size: 1.4em;
    /*opacity: 0.6;*/
    float: left;
    margin-right: 15px;
}

.borderedWrapper {
    max-width: 1000px;
    margin: 0px auto;
    border-left: solid var(--vColorLightGray) 3px;
    border-right: solid var(--vColorLightGray) 3px;
    margin-top: 50px;
}

.borderedWrapper > div {
    max-width: 800px;
    margin: 0px auto;
}

#orderProgress {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

#orderProgress .progressBox {
    display: flex;
    justify-content: center;
    align-items: center;
}

#orderProgress .progressBox .stage {
    border-radius: 25px;
    width: 30px;
    height: 30px;
    border: solid var(--vLayoutBorderColor) 3px;    
    background-color: var(--vLayoutBorderColor);
}

#orderProgress .progressBox .stage.active {
    border: solid var(--vColorVmBlue) 3px;    
    background-color: #fff;
}

#orderProgress .progressBox .stage.done {
    border: solid var(--vColorVmBlue) 3px;    
    background-color: var(--vColorVmBlue);
}

#orderProgress .progressLine {
    border-top: solid var(--vLayoutBorderColor) 1px;    
    border-bottom: solid var(--vLayoutBorderColor) 1px;    
    width: 70px;
}

#orderProgress .progressBox .stage.done + .progressLine {
    border-top-color: var(--vColorVmBlue);    
    border-bottom-color: var(--vColorVmBlue);    
}

.ordersWrapper .panel-heading {
    font-size: 2em;
}

.ordersWrapper .priceCell,
.ordersWrapper .orderItemButton {
    text-align: right;
}

.ordersWrapper .productUnavailable {
    opacity: 0.3;
}

.ordersWrapper .productChosen {
    font-weight: 700;
    background-color: var(--vColorLightGreen);
}

.ordersWrapper .orderItemButton {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ordersWrapper .orderItemButton a {
    border-radius: 0px;
    border-width: 0px;
    background-color: transparent;
    width: 36px;
    height: 35px;
    border: solid var(--vColorDarkGrayText) 3px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 3.5em;
}

.ordersWrapper .productChosen .orderItemButton a {
    color: var(--vColorGreen);
    border-color: var(--vColorGreen);
}

.ordersWrapper .submitButton a {
    background-color: #198754;
    display: inline-flex;
    margin-right: auto;
}

.ordersWrapper .submitButton a,
.ordersWrapper .submitButton button {
    background-color: var(--vColorVmBlue);
    border: none;
    width: auto;
    min-width: 50px;
    border-radius: 0px;
    align-items: center;
    line-height: 1;
    padding: 12px 12px;
}

.ordersWrapper .submitButton button,
.ordersWrapper .submitButton a span {
    font-size: 0.85em;
    line-height: 1;
    width: 100%;
    max-width: 220px
}

.ordersWrapper .orderItemButton a.blocked {
    cursor: not-allowed;
}

.borderedWrapper table td {
    vertical-align: middle;
}

.borderedWrapper table {
    margin-top: 15px !important;
    margin-bottom: 30px;
}

.ordersWrapper .summary td {
    border-top: solid #000 2px;
    font-weight: 600;
    color: var(--vThemeColor);
    padding-top: 30px;
}

.ordersWrapper .invoiceData p {
    margin-bottom: 0px;
}

.panel-heading {
    margin-bottom: 20px;
}

.gray {
    color: var(--vColorDarkGrayText);
}

.btn.btn-info {
    background-color: var(--bs-blue); 
    border-color: var(--bs-blue); 
    color: #fff;
}

.btn {
    border-radius: 0px;
    padding-left: 30px;
    padding-right: 30px;
}

.btn.btn-primary {
    border-color: var(--vColorVmBlue);
    background-color: var(--vColorVmBlue);
}

.btn.marginTop {
    margin-top: 20px;
}

.btn.marginBottom {
    margin-bottom: 20px;
}

.onlinePayment {
    padding: 15px;
}

.onlinePayment .info {
    font-size: 0.7em;
    margin-top: 50px;
    color: var(--vColorGrayText);
    text-align: center;
    line-height: 1.2;
}

.onlinePayment .info p {
    margin-bottom: 0px;
}

.price .amount {
    font-weight: 600;
}

.price .discountData {
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    font-weight: 200;
}

.price .discountData .originAmount {
    text-decoration: line-through;
}

.price .discountData .discountVal {
    color: var(--vColorGreen);    
}

.availableProducts + h5 {
    display: none;
}

.availableProducts.payOrder + h5 {
    display: inherit;
}