/* TRIGGER */
.mooring-calc-trigger-btn { margin: 0; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
.mooring-calc-trigger-container { position: fixed; bottom: 0; right: 100px; z-index: 900; }

/* LAYOUT */
.mooring-calc-blocker { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #353327; opacity: 0.8; z-index: 10001; }
.mooring-calc-popout { display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 10002; overflow-y: auto; }
.mooring-calc-popout-container { width: 100%; height: 100%; position: relative; display: flex; align-items: flex-start; justify-content: center; }
.mooring-calc-popout-inner { padding: 50px 0; width: 100%; }
.mooring-calc-popout-body { background: #E5E5E5; border-radius: 15px; display: flex; flex-direction: column; width: calc(100% - 15px); max-width: 1290px; margin: auto; }

/* TAB LAYOUT */
.mooring-calc-tab { display: none; }
.mooring-calc-tab-container { display: flex; flex-direction: column; min-height: 559px; }
.mooring-calc-tab-init { display: block; }
@media (max-width: 1600px) {
    .mooring-calc-tab-container { min-height: 480px; }
}
@media (max-width: 1600px) {
    .mooring-calc-tab-container { min-height: 450px; }
}

/* TAB NAV */
.mooring-cal-tab-nav { display: flex; align-items: center; justify-content: center; margin: 32px 0 12px; position: relative; }
.mooring-calc-tab-nav-item { width: 40px; height: 40px; font-family: inherit; padding: 0 0 1px; box-sizing: border-box; margin: 0 30px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #D9D9D9; font-size: 18px; color: #000000; border: 0; font-weight: 600; }
.mooring-calc-tab-nav-item[disabled] { cursor: default; pointer-events: none; }
.mooring-calc-tab-nav-item.active { background: var(--button-primary); color: var(--button-text); }
@media (max-width: 1600px) {
    .mooring-cal-tab-nav { margin: 24px 0 12px; }
}

@media (max-width: 750px) {
    .mooring-calc-tab-nav-item { margin: 0 12px; }
}

/* LAYOUT ELEMENTS */
.mooring-calc-header { padding: 24px 80px; position: relative; }
.mooring-calc-content { padding: 0 88px 24px; box-sizing: border-box; }
.mooring-calc-footer { background: #FFFCFC; margin-top: auto; padding: 24px 32px; text-align: center; border-radius: 0 0 15px 15px; }
@media (max-width: 1600px) {
    .mooring-calc-header { padding: 20px 80px; }
    .mooring-calc-footer { padding: 20px 32px 32px; }
}
@media (max-width: 750px) {
    .mooring-calc-header { padding: 20px 15px; }
    .mooring-calc-content { padding: 12px 15px 32px; max-width: 500px; margin: 0 auto; width: 100%; }
    .mooring-calc-footer { padding: 20px 15px; }
}

/* CLOSE */
.mooring-calc-close { position: absolute; cursor: pointer; display: flex; justify-content: center; align-items: center; top: 50%; width: 30px; height: 30px; border: 0; right: 20px; padding: 0; background: transparent; -webkit-transform: translate3d(0,-50%,0);-moz-transform: translate3d(0,-50%,0);transform: translate3d(0,-50%,0); }
.mooring-calc-close svg { position: relative; }
.mooring-calc-close:before { content: ''; width: 16px; height: 16px; position: absolute; margin: auto; border: 1px solid #1c1b1f; border-radius: 4px; box-sizing: border-box; background: transparent; -webkit-transition: background 0.2s ease;-moz-transition: background 0.2s ease;transition: background 0.2s ease; }
.mooring-calc-close:hover:before { background: #ffffff; }

/* ELEMENTS */
.mooring-calc-tab-title { font-size: 18px; text-align: center; color: #3F455D; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 0; }
.mooring-btn-next { font-weight: 500; border-radius: 5px; border: 0; margin: 0; padding: 12px 20px 13px; min-width: 330px; text-align: center; }
.mooring-btn-next[disabled] { opacity: 0.2; cursor: default; pointer-events: none; }

@media (max-width: 400px) {
    .mooring-btn-next { min-width: 1px; }
}

/* DROPDOWNS */
.mooring-dropdowns { display: flex; justify-content: space-between; max-width: 932px; margin: 0 auto; flex-wrap: wrap; }
.mooring-dropdown { width: calc(50% - 16px); background: #ffffff; text-align: center; border-radius: 8px; border: 1px solid var(--button-primary); padding: 12px 15px 16px; box-sizing: border-box; position: relative; }
.mooring-dropdown.open { z-index: 2; }
.mooring-dropdown:nth-child(n+3) { margin-top: 32px; }
.mooring-dropdown-title { font-size: 14px; color: #555555; font-weight: 400; text-transform: none; }
.mooring-dropdown-trigger { font-size: 32px; font-weight: 600; font-family: inherit; color: #3F455D; background: transparent; border: 0; padding: 0; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.mooring-dropdown-trigger svg { margin-left: 18px; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform: rotate(0deg); -webkit-transition: transform 0.2s ease;-moz-transition: transform 0.2s ease;transition: transform 0.2s ease; }
.mooring-dropdown-trigger[aria-expanded="true"] svg { -webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);transform: rotate(-180deg); }
.mooring-dropdown-list-container { position: absolute; z-index: 1; left: -1px; right: -1px; background: #ffffff; border-radius: 0 0 8px 8px; border: solid var(--button-primary); border-width: 0 1px 1px 1px; padding: 0 32px; min-height: 16px; }
.mooring-dropdown-list { border-bottom: 1px solid #dfe1e4; padding: 0; margin: 12px 0; display: none; }
.mooring-dropdown-btn { font-family: inherit; cursor: pointer; width: 100%; background: transparent; border: solid #dfe1e4; color: #3F455D; border-width: 1px 0 0; font-size: 14px; padding: 12px 0; }

@media (max-width: 1600px) {
    .mooring-dropdown-trigger { font-size: 28px; }
}

@media (max-width: 1400px) {
    .mooring-dropdown { padding: 6px 15px 10px; }
    .mooring-dropdown:nth-child(n+3) { margin-top: 24px; }
}

@media (max-width: 750px) {
    .mooring-dropdowns { display: block; }
    .mooring-dropdown { width: 100%; padding: 6px 10px 10px; }
    .mooring-dropdown:nth-child(n+2) { margin-top: 18px; }
    .mooring-dropdown-trigger { font-size: 20px; }
    .mooring-dropdown-trigger svg { margin-left: 10px; }
}

/* FORM */
.mooring-form-cols { display: flex; margin: 0 -16px; flex-wrap: wrap; }
.mooring-form-cols .mooring-form-group { width: calc(33.33% - 32px); margin: 32px 16px 0; flex-grow: 1; }
.mooring-form-cols:first-of-type .mooring-form-group:nth-child(-n+3) { margin-top: 0; }
.mooring-form-group { margin-top: 32px; }
.mooring-calc-form > .mooring-form-group:first-of-type { margin-top: 0; }
.mooring-calc-form label { font-size: 18px; margin-bottom: 12px; display: inline-block; }
.mooring-calc-form input, .mooring-calc-form select { display: block; font-size: 14px; padding: 12px 15px; border-radius: 8px; border: 1px solid var(--button-primary); background: #ffffff; width: 100%; box-sizing: border-box; font-family: inherit; }
.mooring-calc-form select { -webkit-appearance: none;-moz-appearance: none;appearance: none; padding-right: 30px; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 27' width='47' height='27' fill='%23646466'%3E%3Cpath d='M5.95 1.05c-1.4-1.4-3.6-1.4-4.9 0-1.4 1.4-1.4 3.6 0 4.9l20 20c1.4 1.4 3.6 1.4 4.9 0l20-20c1.4-1.4 1.4-3.6 0-4.9-1.4-1.4-3.6-1.4-4.9 0l-17.5 17.5z' clip-rule='evenodd' fill-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:10px auto;background-position:right 10px center; }
@media (max-width: 1400px) {
    .mooring-calc-form label { font-size: 16px; margin-bottom: 10px; }
    .mooring-form-cols .mooring-form-group { margin: 24px 16px 0; }
    .mooring-form-group:nth-child(n+4) { margin-top: 24px; }
}
@media (max-width: 1050px) {
    .mooring-form-cols .mooring-form-group { width: calc(50% - 32px); margin-top: 24px; }
    .mooring-form-group { margin-top: 24px; }
    .mooring-form-cols:first-of-type .mooring-form-group:nth-child(1n) { margin-top: 24px; }
    .mooring-form-cols:first-of-type .mooring-form-group:nth-child(-n+2) { margin-top: 0; }
}
@media (max-width: 750px) {
    .mooring-form-cols { display: block; margin: 0; }
    .mooring-form-cols .mooring-form-group { width: 100%; margin: 0; }
    .mooring-form-cols:first-of-type .mooring-form-group:nth-child(1n) { margin-top: 24px; }
    .mooring-form-cols:first-of-type .mooring-form-group:first-child { margin-top: 0; }
}

/* PRICES */
.mooring-calc-prices-inner { display: flex; justify-content: space-between; max-width: 932px; margin: 0 auto; flex-wrap: wrap; }
.mooring-calc-prices-inner + .mooring-calc-price-year, .mooring-calc-prices-inner + .mooring-calc-price-address-title { margin-top: 32px; }
.mooring-calc-price { width: calc(50% - 16px); background: #ffffff; text-align: center; border-radius: 8px; border: 1px solid var(--button-primary); padding: 12px 15px 16px; box-sizing: border-box; position: relative; }
.mooring-calc-price:nth-child(n+3) { margin-top: 32px; }
.mooring-calc-price-year, .mooring-calc-price-address-title { width: 100%; text-align: center; font-size: 16px; color: #555555; font-weight: 600; text-transform: none; margin-bottom: 8px; }
.mooring-calc-price-title { font-size: 14px; color: #555555; font-weight: 400; text-transform: none; }
.mooring-calc-price-value { font-size: 32px; font-weight: 600; color: #3F455D; padding: 0; line-height: normal; }
.mooring-calc-price-address { text-align: center; }

@media (max-width: 1600px) {
    .mooring-calc-price-value { font-size: 28px; }
}

@media (max-width: 1400px) {
    .mooring-calc-price { padding: 6px 15px 10px; }
    .mooring-calc-price:nth-child(n+3) { margin-top: 24px; }
}

@media (max-width: 750px) {
    .mooring-calc-prices { display: block; }
    .mooring-calc-price { width: 100%; padding: 6px 10px 10px; }
    .mooring-calc-price:nth-child(n+2) { margin-top: 18px; }
    .mooring-calc-price-value { font-size: 20px; }
}

/* ERRORS */
.mooring-calc-error { margin-top: 32px; background: #ffffff; border-bottom: 3px solid #dd0000; padding: 12px 16px; display: block; }