/* FORM STYLE DEFINITIONS */


/* -- BORDER - BACKGROUND - CELL SPACING -- */

/* Form border, border radius */

.crmEntityFormView {
    border: none !important;
    max-width: 700px;
    margin: 0;
    padding: 0;
}

/* Form background color */

/*Multistep form*/
#WebFormPanel.crmEntityFormView,
#WebFormPanel.crmEntityFormView label  {
    background-color: var(--form-background-color) !important;
}

/*Basic form*/
#EntityFormPanel.crmEntityFormView,
#EntityFormPanel.crmEntityFormView label {
    background-color: var(--form-background-color);
}

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

/* ---------------- TITLES & TEXTS -------------- */

/* Form main title */

h2.tab-title {
    margin-bottom: 2rem;
    display: none;
}


/* Field labels */

div.table-info label.field-label,
label#NewAttachFileLabel {
    color: var(--form-font-color);
    font-weight: 600;
    margin-bottom: 7px;
}

label.field-label {
    letter-spacing: 0.4px;
}

/* tab & section headings*/

div[data-form-name="Anonymous Complaint - Multistep Form"]#WebFormPanel div[data-name="tab_product"] h3, 
#WebFormPanel div[data-name="tab_feedback"] h3,
#WebFormPanel div[data-name="tab_contact"] h3 {
    font-family: var(--font-bold) !important;
    font-size: 26px;
    margin-bottom: 2rem;
}

#WebFormPanel div[data-name="tab_feedback"] h3 {
    margin-bottom: 1rem;
}

div[data-form-name="Anonymous Other Feedback Form - Power Pages"]#EntityFormPanel h3 {
    font-family: var(--font-bold) !important;
    font-size: 26px;
    margin-bottom: 1rem;
}

/* descriptions */

#WebFormPanel div[data-name="tab_feedback"] div.description.below {
    margin-top: 13rem !important;
}

#WebFormPanel div[data-name="tab_contact"] div.description.below {
    margin-top: 1rem !important;
}

#EntityFormPanel div.description.below {
    margin-top: 1rem !important;
}

table[data-name="tab_contact_section_address"] div.description {
    margin-bottom: 2rem;
    font-weight: 600;
    font-size: 18px;
}

table[data-name="tab_muupalaute_section_select_product"] div.description {
    margin-bottom: 1rem !important;
}

/* ------------ FORM CONTROLS ----------- */


/* Form control height and border */

.form-control,
input.form-control,
input.form-control.input-text-box,
select.form-control.form-select.picklist {
    height: var(--form-control-height);
    border: 1px solid var(--form-control-border-color);
}

textarea.form-control {
    height: unset;
}

select#dg_anonymous_productid > option {
    width: 100% !important;
    white-space: normal !important;
}


/* ---------------- BUTTONS -------------- */

/*Calendar button*/
span.input-group-addon.btn {
    align-items: center;
    border: 1px solid var(--form-control-border-color);
    border-radius: 0 .375rem .375rem 0;
    display: flex;
    font-size: 18px;
    height: var(--form-control-height);
    justify-content: center;
}

span.input-group-addon.btn:active  {
    border: 1px solid #ced4da;
    background-color: #fff;
    border-radius: 0 .375rem .375rem 0;
}

.input-group-addon:hover {
    background-color: var(--portalThemeColor1);
    border: 1px solid var(--portalThemeColor1);
    border-radius: 0 .375rem .375rem 0;
}

.input-group-addon:focus, .input-group-addon:focus-visible {
    border: none !important
}

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

/* Lookup buttons */
button.btn.btn-default.clearlookupfield,
button.btn.btn-default.launchentitylookup {
    border: 1px solid var(--form-control-border-color);
    border-radius: 0 .375rem .375rem 0;
    height: var(--form-control-height);
    background-color: #eeeeee;
}

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

button#eanSearchBtn {
    border-radius: 30px;
    background-color: var(--raisio-green);
    border: 1px solid var(--raisio-green);
    color: #fff;
    font-size: 16px;
}

button#eanSearchBtn:hover {
    background-color: var(--raisio-green-darker-hover);
}

.input-group-addon:hover,
.input-group-addon:focus {
    color: #ffffff;
    background-color: var(--raisio-green-darker-hover);
}

#UploadButton {
    border-radius: 30px;
    background-color: var(--raisio-green);
    border: 1px solid var(--raisio-green);
    color: #fff;
    font-size: 16px;
}

#UploadButton:hover {
    background-color: var(--raisio-green-darker-hover);
    border: 1px solid var(--raisio-green-darker-hover);
}

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

#PreviousButton {
    margin-right: 1rem;
}

#PreviousButton, 
#InsertButton, 
#NextButton {
    width: 9rem;
    border-radius: 20px;
    font-size: 18px;
}

#NextButton,
#InsertButton {
    background-color: var(--raisio-green);
    border: 1px solid var(--raisio-green);
}

#NextButton:hover,
#InsertButton:hover {
    background-color: var(--raisio-green-darker-hover);
    border: 1px solid var(--raisio-green-darker-hover);
}

#PreviousButton {
    background-color: #fff;
    border: 1px solid var(--raisio-green);
}

#btnManualSearch,
#btnEanSearch {
    font-size: 16px;
}

#PreviousButton:hover,
#btnEanSearch:hover,
#btnManualSearch:hover,
#btnEanSearch:active,
#btnManualSearch:active,
#btnEanSearch:focus,
#btnManualSearch:focus {
    background-color: var(--raisio-green) !important;
    border: 1px solid var(--raisio-green) !important;
}

#UploadButton {
    margin-top: 1rem;
}

/*MESSAGES*/

/* Error Message */
.validation-summary.alert {
    background-color: var(--error-message);
    border-color: var(--error-message);
    padding: 2rem;
}

.validation-summary a {
    /* color: #000000 !important; */
    font-size: 16px;
    text-decoration: underline;
}

.validation-summary a:hover {
    text-decoration: underline;
    font-weight: 700;
}


/*Success Message*/
div.message.success {
    background-color: var(--success-message);
    border-color: var(--success-message);
    color: #000000;
    padding: 2rem !important;
	font-size: 18px;
}

#MessagePanel span#MessageLabel > div:focus,
#MessagePanel span#MessageLabel > div:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

#MessagePanel span#MessageLabel > div > p > span {
    font-weight: 600;
}

#btnCloseMessage {
    display: none;
}

/* FILE UPLOAD */

div.file-cell {
    margin-bottom: 2rem;
}


/* CAPTCHA */

/* Make the Captcha-input + label group a column */
.RadCaptcha_Default #ctl00_ContentContainer_WebFormControl_4008e90fc3d840b8aa0b5ff7948d4407_EntityFormView_captcha_SpamProtectorPanel > p {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0.5rem 0;
}

/* Make sure the label doesn't try to go on the same line */
.RadCaptcha_Default label[id$="captcha_CaptchaTextBoxLabel"] {
  display: block;
  font-weight: 600;
}

/* Inputille width */
.RadCaptcha_Default input[id$="captcha_CaptchaTextBox"] {
  display: block;
  max-width: 320px;
  width: 100%;
}

/* Image and action link structure */
.RadCaptcha_Default a.rcRefreshImage,
.RadCaptcha_Default a.rcCaptchaAudioLink {
  display: inline-block;
  margin: 0.25rem 0;
  white-space: nowrap;
}

/* Captcha image */
.RadCaptcha_Default img[id$="captcha_CaptchaImageUP"] {
  display: block;
  margin-bottom: 0.25rem;
}

.RadCaptcha.RadCaptcha_Default {
        margin-bottom: 2rem;
}

.captcha-cell label {
    font-size: 16px;
}

.RadCaptcha_Default input[id$="captcha_CaptchaTextBox"] {
    height: var(--form-control-height);
    border: 1px solid var(--form-control-border-color);
    border-radius: .375rem;
    padding: .375rem .75rem;
}

/*FORM PAGE STYLES*/

.dg-page > .sectionBlockLayout > .container > .columnBlockLayout {
    border-bottom: 1px solid #2d8f2e;
    margin-bottom: 0 !important;
    padding-bottom: 2rem !important;
}

.container.dg-form-container {
    padding: 0;
}

.container.dg-form-container > .columnBlockLayout {
    border-bottom: none !important;
    margin-top: 0 !important;
}


.description.below p {
    margin-top: 10px;
}

.description.below p {
    font-size: 16px;
}

.description a {
    color: var(--raisio-green);
    font-size: 16px;
    font-weight: 600;
}


/************************************************************************/

/* CUSTOM LOGIC */

/*Code-generated instruction text for the Product tab of the complaint form*/
.search-mode-help {
    margin: 0 0 1rem 0 !important;
    color: var(--bs-body-color, #333);
    font-size: 18px;
}

/* CUSTOM ELEMNTS - PRODUCT TAB */

/*2 custom Buttons Logic related styles*/

.hidden {
    display: none !important;
}
.visible-table {
    display: table !important;
}
.visible-block {
    display: block !important;
}

/*custom button styles*/
.search-mode-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}

.search-mode-buttons .btn-secondary {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
}

/* Font size for the icon wrapper (replaces inline style) */
.search-mode-buttons .btn > span:first-child {
  font-size: 16px;
}


/*Styles for custom search input in Product dropdown*/

#productSearch {
    height: 40px;
}
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 6px;
    font-size: 14px;
    color: #aaa;
}

.search-container input {
    width: 100%;
    padding-right: 30px; /* Adjust padding to make space for the icon */
    box-sizing: border-box;
}

/* For most modern browsers */
.search-container input::placeholder {
    color: #aaa;
    opacity: 1;
}

/* For Internet Explorer 10-11 */
.search-container input:-ms-input-placeholder {
    color: #aaa; /* Change this to your desired color */
}

/* For Microsoft Edge */
.search-container input::-ms-input-placeholder {
    color: #aaa; /* Change this to your desired color */
}


/* Dropdown*/
#dg_anonymous_productid {
    width: 100%;
    height: auto;
    max-height: 300px;
    overflow-y: auto;
    display: block;
    font-size: 16px;
}

/* "No matching results" message */
#dg_anonymous_productid option.no-results {
    color: #999;
    font-style: italic;
}

/* Dropdown*/
#productid {
    width: 100%;
    height: auto;
    max-height: 300px; /* Voit säätää tätä tarpeen mukaan */
    overflow-y: auto;
    display: block;
    font-size: 16px;
}

/* "No matching results" message*/
#productid option.no-results {
    color: #999;
    font-style: italic;
}


/****************************************************************************/

/* Styles for custom product-Dropdown */

.custom-dropdown {
  position: relative;
  width: 100%;
}

#productSearchCustom {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
}

.custom-dropdown-list {
  max-height: 250px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
  display: none;
}

.custom-dropdown-list li {
  padding: 10px;
  cursor: pointer;
}

.custom-dropdown-list li:hover {
  background-color: #f0f0f0;
}

select#dg_anonymous_productid {
    margin-bottom: 1.2rem;
}

select#productid {
    margin-bottom: 1.2rem;
}

/* Custom buttons*/
.search-mode-buttons {
    margin-bottom: 2rem;
}

.search-mode-buttons button {
    background-color: #ffffff;
    border-radius: 30px;
    border: 1px solid var(--raisio-green);
}

h4.ean-result-title {
    font-size: 20px;
    margin-top: 2rem;
}

/***********************************************************************/

/* CUSTOM ELEMENTS - FEEDBACK TAB */

/* Product name */

#productNameContainer {
    margin-bottom: 2rem;
}

#productNameContainer h4 {
    font-size: 20px;
    text-align: left;
    font-weight: 400;
}

/* Display product image on form */
.product-image {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 300px;
    margin: auto;
    margin-bottom: 2rem;
    border-radius: var(--product-image-radius, 10px);
    /* box-shadow: var(--product-image-shadow, 0 2px 6px rgba(0,0,0,0.1)); */
    object-fit: contain;
}

@media (max-width: 767px) {
    .product-image {
        max-height: 350px;
    }

    .dg-page > .sectionBlockLayout > .container > .columnBlockLayout {
        margin-top: 2rem !important;
    }

    .container.dg-form-container {
        max-width: 540px;
    }
}

@media (max-width: 599px) {

    .dg-page > .sectionBlockLayout > .container > .columnBlockLayout {
        margin-top: 0rem !important;
    }

    h1 {
        font-size: 34px;
    }

    div[data-form-name="Anonymous Complaint - Multistep Form"]#WebFormPanel div[data-name="tab_product"] h3, #WebFormPanel div[data-name="tab_feedback"] h3, #WebFormPanel div[data-name="tab_contact"] h3 {
        margin-bottom: 1rem;
        font-size: 24px;
    }

    .product-image {
        max-height: 300px;
    }

    .crmEntityFormView fieldset {
    margin-bottom: 0;
    }

    #NextButton,
    #PreviousButton,
    #InsertButton {
        margin-top: 1rem !important;
        font-size: 14px;
    }

    #UploadButton {
        font-size: 14px;
    }

    #btnManualSearch, #btnEanSearch {
        font-size: 14px;
    }

}

@media (max-width: 500px) {
    .crmEntityFormView {
        padding: 0 !important;
    }  

    .page-complaint .row.sectionBlockLayout[data-component-theme] > .container > .columnBlockLayout {
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 16px;
    }

}

@media (max-width: 415px) {
    .page-complaint .row.sectionBlockLayout[data-component-theme] > .container > .columnBlockLayout {
        padding: 10px !important;
    }
    .search-mode-buttons .btn-secondary {
        gap: 5px;
        padding: 10px 5px;
    }
    .dg-page > .sectionBlockLayout > .container > .columnBlockLayout {
        padding: 10px;
    }
    input#NextButton {
        margin-top: 0rem;
    }
}

@media (max-width: 400px) {
    .search-mode-buttons .btn-secondary {
        padding: 10px 10px;
    }
    .page-complaint .row.sectionBlockLayout[data-component-theme] > .container > .columnBlockLayout {
        margin-bottom: 2rem !important;
    }
    .dg-page > .sectionBlockLayout > .container > .columnBlockLayout {
        padding-bottom: 1rem !important;
    }
    div[data-form-name="Anonymous Complaint - Multistep Form"]#WebFormPanel div[data-name="tab_product"] h3, #WebFormPanel div[data-name="tab_feedback"] h3, #WebFormPanel div[data-name="tab_contact"] h3 {
        margin-top: 1rem !important;
        font-size: 24px !important;
    }
    h1 {
        font-size: 30px !important;
    }
    label.field-label {
        letter-spacing: 0.4px;
        font-size: 14px !important;
    }

    h4.ean-result-title {
        font-size: 16px !important;
    }

    select#dg_anonymous_productid {
        margin-bottom: -1rem;
    }

    .crmEntityFormView .cell {
        padding: 0 0 10px !important;
    }
}