.crmEntityFormView {
    border: none !important;
}

.crmEntityFormView .cell {
    padding: 0 10px 20px;
}

@media (max-width: 430px) {
   .crmEntityFormView .cell {
        padding: 0 10px 10px;
    }
}

/* Tab Title */
h2.tab-title {
    margin-bottom: 3rem;
    padding-bottom: 20px;
    margin-left: 10px;
}

.crmEntityFormView .tab-title {
    border-bottom: none;
}

#accordionOmatTiedot h2.tab-title,
.crmEntityFormView[data-form-name="Omat tiedot - Viestintä - Power Pages"] h2.tab-title,
.crmEntityFormView[data-form-name="Jäsentyypin muutos - Power Pages"] h2.tab-title,
.crmEntityFormView[data-form-name="Eroilmoitus - Power Pages"] h2.tab-title,
.crmEntityFormView[data-form-name="Omat tiedot - Vaihda laskutus - Power Pages"] h2.tab-title {
    display: none !important;
}


.crmEntityFormView[data-form-name="Omat tiedot - Viestintä - Power Pages"] .tab,
.crmEntityFormView[data-form-name="Jäsentyypin muutos - Power Pages"] .tab,
.crmEntityFormView[data-form-name="Eroilmoitus - Power Pages"] .tab,
.crmEntityFormView[data-form-name="Ota yhteyttä - Power Pages"] div[data-name="tab_2"],
div[data-name="dg_hakemus_jasentyyppi_tab_tyosuhteet"],
div[data-name="dg_hakemus_jasentyyppi_tab_tyosuhde_section_tyosuhde"],
div[data-name="dg_hakemus_jasentyyppi_tab_lisatietoja"] {
    margin-top: 0 !important;
}

.crmEntityFormView[data-form-name="Ota yhteyttä - Power Pages"] .tab,
div[data-name="dg_hakemus_jasentyyppi_tab_main"],
div[data-name="omattiedot_tab_perustiedot"],
div[data-name="omattiedot_tab_perustiedot"] fieldset:last-child,
.crmEntityFormView[data-form-name="Jäsentyypin muutos - Power Pages"] fieldset:has(+ fieldset.d-none) {
    margin-bottom: 0;
}

.crmEntityFormView[data-form-name="Jäsentyypin muutos - Power Pages"] td:empty,
.crmEntityFormView[data-form-name="Eroilmoitus - Power Pages"] td:empty,
.crmEntityFormView[data-form-name="Omat tiedot - Vaihda laskutus - Power Pages"] td:empty,
.crmEntityFormView[data-form-name="Alennushakemus - Power Pages"] td:empty,
.crmEntityFormView[data-form-name="Ota yhteyttä - Power Pages"] td:empty,
.crmEntityFormView[data-form-name="Kassahakemus - Power Pages"] td:empty
{
    display: none !important;
}

/* Section Title */
legend.section-title h3 {
    margin-left: 10px;    
    margin-bottom: var(--container-margin-y-medium) !important;
    margin-top: 0 !important;
}

.crmEntityFormView legend.section-title,
.crmEntityFormView legend.section-title.show-bar {
    border-bottom-width: 0 !important;
    padding-bottom: 0 !important;
}

.crmEntityFormView .description,
.crmEntityFormView .form-control,
.crmEntityFormView .form-control.readonly,
.crmEntityFormView .boolean-radio label,
.crmEntityFormView input::placeholder,
html[dir=ltr] .crmEntityFormView .cell .picklist label {
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-light);
    color: var(--brand-color-8) !important;
    font-size: 14px;
} 

.crmEntityFormView p.description {
    margin-top: 14px;
}

/* Form control height and border */
.form-control,
input.form-control,
input.form-control.input-text-box,
select.form-control.form-select.picklist {
    height: 3rem;
    border: 1px solid var(--brand-color-tuhka-50);
}

.crmEntityFormView .form-control.readonly {
    height: 3rem;
    background-color: var(--brand-color-tuhka-50) !important;
}

.crmEntityFormView .cell:not(.text.form-control-cell) .description.below {
    margin-top: 14px;
}

.crmEntityFormView .text.form-control-cell .description.below {
    margin-top: 58px !important; 
}

.crmEntityFormView .cell .description.below.dg-description-relative,
.crmEntityFormView .cell .description.below.dg-form-dropdown {
    display: inline-block;
    margin-top: 14px;
    margin-bottom: 0px;
}

.crmEntityFormView .cell .description.above {
    margin-top: 14px;
    margin-bottom: 14px;
}

.crmEntityFormView .tab {
    margin-top: 2.5rem;
}

/* Font size */
div.table-info label.field-label {
    font-size: 14px;
    color: var(--brand-color-8);
    margin-bottom: var(--container-margin-y-xsmall);
    font-family: var(--font-family-h5);
    font-weight: var(--font-weight-medium);
}

/* Text inputs and textareas */
html[dir=ltr] .crmEntityFormView .cell textarea {
    min-height: 230px;
    padding: var(--container-padding-y-small);
}

/*Calendar button*/
span.input-group-addon.btn {
    border-radius: 0 .375rem .375rem 0;
    font-size: 18px;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--brand-color-tuhka-50);
    border: none;
    transition-property: color, background-color !important;
}

.input-group-addon.btn:hover,
span.input-group-addon.btn:active,
span.input-group-addon.btn.active {
    background-color: var(--portalThemeColor6);
    border: 1px solid var(--portalThemeColor6);
}

span.input-group-addon.btn:active,
span.input-group-addon.btn.active,
.input-group.datetimepicker:has(span.input-group-addon.btn.active) {
    border-radius: 0 .375rem 0 0 !important;
}

.input-group-addon:focus, .input-group-addon:focus-visible {
    border: none !important;
    border-radius: 0 .375rem .375rem 0;
}

/* Open calendar Widget */
.bootstrap-datetimepicker-widget.dropdown-menu {
    border: none;
    padding: 0;
    margin: 0;
}

.bootstrap-datetimepicker-widget.dropdown-menu::before,
.bootstrap-datetimepicker-widget.dropdown-menu::after {
    display: none !important;
}

.bootstrap-datetimepicker-widget {
    font-size: 14px;
}

.bootstrap-datetimepicker-widget thead {
    background-color: var(--brand-color-tuhka-50);
    border-radius: 0;
}

.bootstrap-datetimepicker-widget table thead th,
.bootstrap-datetimepicker-widget table thead th button,
.bootstrap-datetimepicker-widget table tbody td,
.bootstrap-datetimepicker-widget table tbody td button,
.bootstrap-datetimepicker-widget table tbody td span {
    border-radius: 0;
}

.bootstrap-datetimepicker-widget thead tr:first-child th button {
    color: var(--brand-color-4);
    font-weight: 500;
    font-family: var(--font-family-nav);
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: var(--brand-color-tuhka);
}

.bootstrap-datetimepicker-widget thead th.dow {
    color: var(--brand-color-8);
    font-weight: 500;
    font-family: var(--font-family-nav);
    text-transform: uppercase;
    font-size: 10px;
}

.bootstrap-datetimepicker-widget table tbody td,
.bootstrap-datetimepicker-widget table thead th {
    border-width: 1px;
    border-color: var(--brand-color-tuhka-50);
}

.bootstrap-datetimepicker-widget .datepicker-days tbody td.day, 
.bootstrap-datetimepicker-widget .datepicker-days tr td button {
    color: var(--brand-color-8);
    font-weight: 300;
    font-family: var(--font-family-paragraph);
    &:hover {
        background-color: var(--brand-color-6);
        color: var(--brand-color-8);
    }
}

.bootstrap-datetimepicker-widget table tbody td.day:hover button {
    background-color: var(--brand-color-6);
    color: var(--brand-color-8);
}

.bootstrap-datetimepicker-widget tr td.day.active:hover button {
    background-color: var(--brand-color-4);
    color: var(--brand-color-7);
}

.bootstrap-datetimepicker-widget .datepicker-days tbody td.active, 
.bootstrap-datetimepicker-widget .datepicker-days tr td.active button {
    background-color: var(--brand-color-4);
    color: var(--brand-color-7);
    &:hover {
        background-color: var(--brand-color-4);
    }
}

.bootstrap-datetimepicker-widget .datepicker-months span.month,
.bootstrap-datetimepicker-widget .datepicker-years span.year,
.bootstrap-datetimepicker-widget .datepicker-decades span.decade
{
    margin: 0;
}

.bootstrap-datetimepicker-widget .datepicker-months span.month button,
.bootstrap-datetimepicker-widget .datepicker-years span.year button,
.bootstrap-datetimepicker-widget .datepicker-decades span.decade button {
    color: var(--brand-color-4);
    font-family: var(--font-family-paragraph);
    font-weight: var(--font-weight-light);
    text-decoration: underline;
    &:hover {
        color: var(--brand-color-8);
        text-decoration: none;
    }
}

.bootstrap-datetimepicker-widget .datepicker-months span.month.active button,
.bootstrap-datetimepicker-widget .datepicker-years span.year.active button,
.bootstrap-datetimepicker-widget .datepicker-decades span.decade.active button {
    color: var(--brand-color-8);
    text-decoration: none;
    font-family: var(--font-family-nav);
    font-weight: var(--font-weight-medium);
}

.bootstrap-datetimepicker-widget .datepicker-months tbody td,
.bootstrap-datetimepicker-widget .datepicker-months tbody td span:hover,
.bootstrap-datetimepicker-widget .datepicker-months tbody td span.active,
.bootstrap-datetimepicker-widget .datepicker-years tbody td,
.bootstrap-datetimepicker-widget .datepicker-years tbody td span:hover,
.bootstrap-datetimepicker-widget .datepicker-years tbody td span.active,
.bootstrap-datetimepicker-widget .datepicker-decades tbody td,
.bootstrap-datetimepicker-widget .datepicker-decades tbody td span:hover,
.bootstrap-datetimepicker-widget .datepicker-decades tbody td span.active {
    background-color: transparent;
    &:hover {
        background-color: transparent;
    }
}

.bootstrap-datetimepicker-widget .datepicker-decades span.decade button {
    text-align: left;
}

select.dg-form-dropdown {
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); 
}

/* Calendar icon */
html[dir=ltr] .iconBorder {
    padding: 3px 6px;
}

/* Lookup buttons */
button.btn.btn-default.clearlookupfield,
button.btn.btn-default.launchentitylookup {
    height: 3rem;
    border-radius: 0 .375rem .375rem 0;
}

/* Radio button */
html[dir=ltr] .crmEntityFormView .cell.boolean-radio-cell input[type=radio],
html[dir=ltr] .crmEntityFormView .cell .picklist input[type=radio] {
    margin: 5px 8px 3px 12px;
    height: 18px;
    width: 18px;
}

html[dir=ltr] .crmEntityFormView .cell div.control span.checkbox input[type=checkbox] {
    margin: 5px 8px 3px 0;
    height: 18px;
    width: 18px;
}

html[dir=ltr] .crmEntityFormView .cell.checkbox-cell div.table-info {
    padding-left: 8px;
}

/* Radio button & Checkbox color */
input[type="checkbox"], input[type='radio'] {
accent-color: var(--portalThemeColor4) !important;
}

/* Bottom actions section */
.crmEntityFormView .actions {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Valildation alert */
.validation-summary h2.validation-header {
    margin-top: 8px !important;
    color: var(--brand-color-8);
}

.validation-summary h2.validation-header .fa {
    margin-right: 8px;
}

.validation-summary ul {
    margin-top: 8px !important;
    margin-left: 24px !important;
}

.validation-summary h2.validation-header,
.validation-summary li a {
	font-size: 14px;
    font-family: var(--font-family-nav);
    font-weight: var(--font-weight-medium);
}

.validation-summary li a {
    color: var(--brand-color-4) !important;
    text-decoration: none;
}

#ValidationSummaryEntityFormView {
    padding: 2rem;
}

#ValidationSummaryEntityFormView.alert-danger {
    background-color: #f4d7e3;
    border-color: #f4d7e3;
}

#ValidationSummaryEntityFormView h2.validation-header {
    margin-top: 10px;
    margin-bottom: 20px !important;
}

div#ValidationSummaryEntityFormView > ul > li > a {
font-family: var(--font-family-paragraph);
}

/* Required mark*/
.crmEntityFormView .cell div.table-info.required label:after {
    color: var(--portalThemeColor3);
}

/* Form dialog */
.modal.show .modal-dialog {
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
    height: inherit;
}

.modal.show .modal-dialog .modal-content {
    margin-top: auto;
    margin-bottom: auto;
}

.dg-form-dialog.modal-form .modal-body iframe {
    height: calc(100vh - 18rem) !important;
}

.dg-form-dialog .modal-body .form-loading {
    position: initial;
}

.dg-form-dialog.modal-form .modal-header {
    padding-right: 38px;
    padding-left: 38px;
    margin-top: 24px;
    border-bottom: 0;
}

.dg-form-dialog.modal-form .modal-header .btn-close {
    color: var(--brand-color-8);
    font-size: 36px;
}

@media (min-width: 992px) {
    .dg-form-dialog.modal-form .modal-header {
        margin-left: 38px;
        margin-right: 28px;
    }
    .dg-form-dialog.modal-form .modal-dialog {
        --bs-modal-width: 700px; 
    }
}

@media (max-width: 576px) {
    .dg-form-dialog.modal-form .modal-body iframe {
        height: calc(100vmax - 150px) !important;
    }
}

.dg-form-dialog.modal-form .modal-header h4.dg-form-dialog-heading {
    font-family: var(--font-family-h2) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--font-line-height-h2);
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-size: 30px;
}

/* Subscriptions form */
span#aes_sahkoiset_jasentiedotteet {
    display: flex;
    align-items: center;
}

input#aes_sahkoiset_jasentiedotteet_0 {
    order: 3;
    margin-left: 0 !important;
}
label[for="aes_sahkoiset_jasentiedotteet_0"] {
    order: 4;
}

input#aes_sahkoiset_jasentiedotteet_1 {
    order: 1;
    margin-left: 12px !important;
}

label[for="aes_sahkoiset_jasentiedotteet_1"] {
    order: 2;
}

/* PROGRESS BAR */
.progress-bar-container {
    width: 100%;
    padding: 0;
}

.progress-bar {
    display: flex;
    flex-direction: row;
    list-style-type: none; /* Remove default list markers */
    padding: 0;
}

.step {
    flex: 1;
    font-size: 18px;
    text-align: center;
    padding: 30px 10px;
    background-color: #eee6f3;
    border-radius: 50% 25px 40% 20px;;
    margin: 0 2.5px;
    white-space: normal;
    word-break: break-word;

}
.step.active {
    background-color: var(--portalThemeColor6);
    color: var(--portalThemeColor4);
    font-weight: 600;
}

@media (max-width: 991px) {
    .step {
        padding: 30px 10px;
        white-space: normal;
        word-break: break-word;
        font-size: 1rem;
        padding: 15px 5px;
        text-align: center;
        justify-content: center;
        height: 90px;
        align-items: center;
        display: flex;
    }
}

@media (max-width: 768px) {
    .form-container h2.tab-title {
        margin-top: 30px !important;
    }

    .heading-liity {
        font-size: 40px !important;
    }

    div.columnBlockLayout.heading-liity-container {
        margin: 60px 0px 40px !important;
    }

}

@media (max-width: 529px) {
    .step {
        font-size: 0.94rem;
        margin: 0 1.5px;
    }
    div.columnBlockLayout.heading-liity-container {
        margin: 60px 0px 20px !important;
    }
}

@media (max-width: 497px) {
    .form-container h2.tab-title {
        padding-bottom: 0px !important;
    }
}

@media (max-width: 460px) {
    .step {
        font-size: 0.875rem;
    }
}

@media (max-width: 429px) {
    .progress-bar-container {
        padding: 1rem;
    }
    .progress-bar {
        justify-content: space-between;
        /* flex-wrap: wrap; sallii rivittymisen */
        gap: 5px;
    }
    .step {
        flex: 1 1 45%;
        margin-bottom: 3px;
        /* font-size: 0.94rem; */
        font-size: 0; /* Piilottaa tekstin */
        padding: 10px 10px;
        position: relative; /* Tarvitaan pseudo-elementille */
        height: 60px;
    }

    .progress-bar .step::before {
        content: attr(step); /* Näyttää step-arvon */
        display: inline-block;
        font-size: 16px; /* Näytä numero */
        color: inherit; /* Käyttää samaa väriä kuin teksti */
    }

    .progress-bar .step.active::before {
        font-weight: 700; /* Boldaa aktiivisen numeron */
    }

    .form-container h2.tab-title {
        margin-top: 0px !important;
    }

}

@media (max-width: 400px) {
    .heading-liity {
        font-size: 30px !important;
    }

    .progress-bar-container {
        padding: 7px;
    }

    div.columnBlockLayout.heading-liity-container {
        padding: 0px !important;
    }
    .form-container h2.tab-title {
        margin-top: 10px !important;
    }
    .form-container h2.tab-title {
        font-size: 24px !important;
    }
}

div.container.form-container > .col-lg-12.columnBlockLayout {
    margin-top: 1px;
}

@media (min-width: 1400px) {
    .row.sectionBlockLayout > .container.form-container {
        max-width: 900px !important;
    }
}

@media (max-width: 1399px) {
    .row.sectionBlockLayout > .container.form-container {
        max-width: 900px !important;
    }
}

@media (max-width: 991px) {
    .row.sectionBlockLayout > .container.form-container {
        max-width: 720px !important;
    }
}

@media (max-width: 767px) {
    .row.sectionBlockLayout > .container.form-container {
        max-width: 540px !important;
    }
}

/* button style */
input[type="submit"],
input[type="button"],
a.btn.btn-primary,
a.btn.btn-secondary,
.btn.button1,
.btn.button2,
#NextButton,
#InsertButton,
#UploadButton {
    font-style: normal;
    -webkit-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: var(--container-padding-y-small) 1.5rem;
    letter-spacing: .04125rem;
    font-size: 14px;
    line-height: 16px;
    border-radius: 3px;
    font-weight: var(--font-weight-medium);
    border: none;
    text-decoration: none;
    border-style: none;
    width: fit-content;
    margin: var(--container-margin-y-small) auto ;
    min-width: 13.125rem;
    max-width: 20rem;

    &:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    &:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
}

div.datetimepicker .btn {
    &:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    &:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }
}

input[type="submit"],
input[type="button"],
a.btn.btn-primary,
.btn.button1,
#NextButton,
#PreviousButton,
#InsertButton,
#UpdateButton {
    &:focus {
        color: var(--brand-color-7);
        background-color: var(--brand-color-1);
        outline: none !important;
        box-shadow: none !important;
    }
    &:focus-visible {
        color: var(--brand-color-7);
        background-color: var(--brand-color-1);
        outline: none !important;
        box-shadow: none !important;
    }
    &:hover {
        color: var(--brand-color-7);
        background-color: var(--brand-color-1);
    }
}

a.btn.btn-secondary,
.btn.button2 {
    &:focus {
        color: var(--brand-color-4);
        background-color: var(--brand-color-5);
    }
    &:focus-visible {
        color: var(--brand-color-4);
        background-color: var(--brand-color-5);;
    }
    &:hover {
        color: var(--brand-color-4);
        background-color: var(--brand-color-5);;
    }
}

#PreviousButton, #InsertButton, #NextButton,
.form-action-container-left #UpdateButton {
    margin-left: 10px;
}

#NextButton, #InsertButton {
    background-color: var(--brand-color-4);
    color: white;
}

@media (max-width: 500px) {
    input[type="submit"],
    input[type="button"] {
        width: 10.125rem;
    }
}

@media (max-width: 400px) {
   div.container.form-container .columnBlockLayout {
        /* margin-top: 60px;
        margin-bottom: 60px; */
        padding: 0px;
    }
}

@media (max-width: 370px) {
    input[type="submit"],
    input[type="button"] {
        width: 45%;
    }
}

div.control select.form-control.form-select.picklist:not(.dg-modal-form-picklist) {
    margin-bottom: 14px;
}

.dg-modal-form-picklist {
    margin-bottom: 0;
}

/*link inside description*/
div.description.below a {
  color: var(--brand-color-4) !important;
  font-size: 14px !important;
  font-weight: 600;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-decoration: none;
}

div.description.below a:hover {
  text-decoration: underline;
}

/*file attach font*/
div.table-info,
div.table-info #NewAttachFileLabel {
    font-family: var(--font-family-paragraph) !important;
    color: #44464d;
}

div.view-empty.message {
    font-family: var(--font-family-paragraph) !important;
    color: #44464d;
}

#postalCodeError1 {
    font-size: 14px;
    font-family: var(--font-family-paragraph) !important;
}