/* Font */
@font-face {
    font-family: 'Webfont';
    font-weight: 400;
    src: url('https://www.straumann.com/content/dam/external/shared/fonts/SourceSans3-Regular.ttf')  format('truetype');

}

@font-face {
    font-family: 'Webfont';
    font-weight: 700;
    src: url('https://www.straumann.com/content/dam/external/shared/fonts/SourceSans3-SemiBold.ttf')  format('truetype');

}

/* Overriding settings for the iFrame */

body {
    background-color: transparent !important;
    margin: 0 !important
}

.sapLandingPage {
    background-color: transparent !important;
    padding-left: 15px !important; /* eliminating all paddings for having full iframe width due to 1/2 columns */
    padding-bottom: 0 !important; /* eliminating all paddings for having full iframe width due to 1/2 columns */
    padding-top: 0 !important; /* eliminating all paddings for having full iframe width due to 1/2 columns */
    padding-right: 0 !important; /* eliminating all paddings for having full iframe width due to 1/2 columns */

}
.sapLandingPage div {
    background-color: transparent !important;
    max-width: 1200px !important;
    padding-left: 0 !important; /* eliminating all paddings for having full iframe width due to 1/2 columns */
    padding-bottom: 0 !important; /* eliminating all paddings for having full iframe width due to 1/2 columns */
    padding-top: 0 !important; /* eliminating all paddings for having full iframe width due to 1/2 columns */
}

.col-sm-12 {
    padding: 0 !important; /* eliminating all paddings for having full iframe width due to 1/2 columns */
}

/* Remove blue focus on Chrome */

input:focus, textarea:focus, select:focus {
    outline: none;
}

/* Base */

.sapCpRuntime {
    width: 100%;
    height: 100%;
}

.sapCpRuntime .sapCpBody {
    margin: 0;
    width: 100%;
    height: 100%;
}

.sapCpContentPageLoading {
    opacity: 0;
    cursor: wait;
}

/* Widget */

.sapCpWidget {
    box-sizing: inherit;
    min-height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 20px !important; /* SiS: CI/CD adaption to AEM forms */
}

.sapCpContentPage .sapCpWidget.sapCpWidgetHidden {
    display: none;
}

/* does a hickup when multi-columns are used */
/*.sapCpWidget ~ .sapCpWidget {
    margin-top: 0 !important;
}*/

.sapCpWidgetContentLeft {
    min-height: 1px;
    float: left;
}

.sapCpWidgetContentRight {
    min-height: 1px;
    text-align: left;
    vertical-align: top;
}

.sapCRLWidgetFixContent {
    clear: both;
}

.sapCpWidgetContentNoIndent {
    min-height: 1px;
    width: 100% !important; /* wins over flex for setting width */
}

.sapCpWidgetContentLeft .sapCpLabel {
    margin-top: 6px;
    margin-right: 10px;
}

.sapCpWidgetMandatoryMissing {
    background-color: lightcoral;
}

.sapCpWidgetInvalid {
    background-color: orange;
}

/* Button Widget */

.sapCpButtonWidget .sapCpButtonWidgetExtraText {
    display: block;
    padding-top: 5px;
}

.sapCpButtonWidget .sapCpMissingMandatoryFieldLabel {
    display: block;
    color: red;
}

.sapCpContentPage:not(.sapCpMissingMandatoryField) .sapCpButtonWidget .sapCpMissingMandatoryFieldLabel {
    display: none;
}

.sapCpButtonWidget .sapCpErrorMessageText {
    display: block;
    color: red;
}

.sapCpContentPage:not(.sapCpSubmitError) .sapCpButtonWidget .sapCpErrorMessageText {
    display: none;
}

.sapCpButtonWidget .sapCpSuccessMessageLabel {
    display: block;
    color: green;
}

.sapCpContentPage:not(.sapCpSubmitCompleted) .sapCpButtonWidget .sapCpSuccessMessageLabel {
    display: none;
}

.sapCpContentPage:not(.sapCpSubmitCompleted) .sapCpButtonWidget .sapCpButtonWidgetDownloadLink {
    display: none;
}

.sapCpButtonWidget .sapCpButtonWidgetDownloadLink:not(.sapCpButtonWidgetDownloadLinkVisible) {
    display: none;
}

.sapCpButtonWidget.sapCpButtonWidgetLoading button {
    cursor: wait;
}

/* Label */

.sapCpLabel {
    position: relative;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sapCpLabelRequiredBefore {
    padding-left: 10px !important; /* enforcing distance between * and text */
}

.sapCpLabel:not(.sapCpLabelRequiredBefore):after {
    content: "*";
    color: #36393a !important; /* SiS: from RoyalBlue to #36393a */
    visibility: hidden;
}

.sapCpWidgetContentLeft .sapCpLabel:not(.sapCpLabelRequiredBefore):after {
    position: absolute;
}

.sapCpLabel:not(.sapCpLabelRequiredBefore).sapCpLabelRequired:after {
    visibility: visible;
}

.sapCpLabel.sapCpLabelRequiredBefore:before {
    content: "*";
    color: #36393a !important; /* SiS: from RoyalBlue to #36393a */
    visibility: hidden;
    position: absolute;
    left: 1px;
    top: -2px;
}

.sapCpLabel.sapCpLabelRequiredBefore.sapCpLabelRequired:before {
    visibility: visible;
}

.sapCpCheckBox ~ .sapCpLabel {
    margin-left: 2px;
}

.sapCpCheckBox + .sapCpLabel {
    display: block;
    font-weight: 400;
}

/* Input */

.sapCpInput {
    font-size: inherit;
    font-family: Webfont;
    padding: 4px 8px;
    text-overflow: ellipsis;
}

/* CheckBox */

.sapCpCheckBox {
    vertical-align: top;
    min-width: 20px;
    float: left;
}

.sapCpCheckBox input {
    font-size: inherit;
    font-family: Webfont;
}

/* DropDown */

.sapCpDropDown {
    font-size: inherit;
    font-family: Webfont;
    background-color: white;
    color: #36393a; /* SiS: CI/CD color */
    padding: 4px 8px;
    min-width: 215px;
}

.sapCpDropDown>option {
    color: black;
}

.sapCpDropDownPlaceholder {
    color: gray;
}

/* Date Picker */

.sapCpDatePicker option {
    color: black;
}

.sapCpDatePicker .sapCpDropDown~.sapCpDropDown {
    margin-left: 10px;
}

.sapCpDatePicker .sapCpDatePickerDay {
    min-width: 50px;
    width: 26%; /* SiS: adapting formatting */
}

.sapCpInputWidget .sapCpDatePickerMonth {
    min-width: 100px;
    width: 45%; /* SiS: adapting formatting */
}

.sapCpInputWidget .sapCpDatePickerYear {
    min-width: 50px;
    width: 26%; /* SiS: adapting formatting */
}

/* ENABLE MULTI-COLUMNS FIELDS USING FLEXBOX */
/* SiS: taken from https://blogs.sap.com/2020/02/13/styling-forms-enable-multi-column-fields-using-flexbox/ */

/******************************************************************************************
	General comments:

	- Prefix .sapCpContentPage:not(.sapCpContentPageEditable)
		This disables the styles for the edit mode in the Form editor to avoid any
		interference with the editor functionality (e.g. drag&drop)

	- Prefix .W2L-Fields-Wrapper
		This enables the styles if used/displayed as embedded form inside a Landing Page

	- If you use a form embedded in a Landing Page it is recommended to set the parameter
		"Label Placement" to "On Top" for best results

	- The section "Fields width = 100%" is only needed to see a nice preview in the Forms
		app. In the embedded form in a Landing Page the same is achieved with the
		parameter "Label Placement" = "On Top"

    - To enable form fields you need to add a CSS class in the "Advanced Properties"
      section:
      - inline20, inline30, inline50, inline70, inline80:
         The number indicates the percentage of the width to use
      - inline:
         For checkboxes with a fixed width

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


/******************************************************************************************
	Fields width = 100%
******************************************************************************************/
/*
	This makes all fields fill 100% of the width.
*/

/*--- Text Input Fields ---*/
.sapCpInputWidget .sapCpInput {
    width: 100%;
    margin: 10px 0 2px !important;
    border-color: #EBEBEB !important; /* SiS: adding border to active fields for visibility */
    border-width: 1px !important; /* SiS: adding border to active fields for visibility */
}

.sapCpInputWidget .sapCpInput:focus {
    margin: 10px 0 2px !important;
    border-color: #36393a !important; /* SiS: adding border to active fields for visibility */
    border-width: 1px !important; /* SiS: adding border to active fields for visibility */
}

/*--- Dropdown Fields ---*/
.sapCpInputWidget .sapCpDropDown {
    width: 100%;
    height: 40px;
    margin: 10px 0 2px !important;
    border-color: #EBEBEB !important; /* SiS: adding border to active fields for visibility */
    border-width: 1px !important; /* SiS: adding border to active fields for visibility */
}

.sapCpInputWidget .sapCpDropDown:focus {
    border-color: #36393a !important; /* SiS: adding border to active fields for visibility */
    border-width: 1px !important; /* SiS: adding border to active fields for visibility */
}

/*--- Note Field ---*/
.sapCpNoteWidget .sapCpTextArea {
    width: 100%;
    border-color: #EBEBEB !important; /* SiS: adding border to active fields for visibility */
    border-width: 1px !important; /* SiS: adding border to active fields for visibility */
}

.sapCpNoteWidget .sapCpTextArea:focus {
    border-color: #36393a !important; /* SiS: adding border to active fields for visibility */
    border-width: 1px !important; /* SiS: adding border to active fields for visibility */
}

/******************************************************************************************
	Switch to Flex Display Model
 ******************************************************************************************/

/*----------------------------------------------------------------------------------------
	Set default to flex and width 100%
  ----------------------------------------------------------------------------------------*/
.sapCpLayout {
    display: flex;
    flex-flow: wrap;
    min-height: unset;
}
.sapCpWidget {
    flex-basis: 100%;
    width: 100%;
    margin-top: 8px;
    padding-right: 10px !important; /* SiS: adding some space between multi column fields */
}

/*-----------------------------------------------------------------------------------------
	Custom classes 'inline##' for different widths
  -----------------------------------------------------------------------------------------*/
.sapCpContentPage:not(.sapCpContentPageEditable) .inline80,
.W2L-Fields-Wrapper .inline80 {
    flex: 1 3 80%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline70,
.W2L-Fields-Wrapper .inline70 {
    flex: 1 1 70%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline50,
.W2L-Fields-Wrapper .inline50 {
    flex: 1 3 50%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline30,
.W2L-Fields-Wrapper .inline30 {
    flex: 1 1 30%;
    min-width: 150px;
}
.sapCpContentPage:not(.sapCpContentPageEditable) .inline20,
.W2L-Fields-Wrapper .inline20 {
    flex: 1 1 20%;
    min-width: 150px;
}

/*-----------------------------------------------------------------------------------------
	Custom class 'inline' for checkbox elements
  -----------------------------------------------------------------------------------------*/
.sapCpContentPage:not(.sapCpContentPageEditable) .inline,
.W2L-Fields-Wrapper .inline {
    flex-basis: 160px;
    flex-shrink: 1;
}

/*  For usage in landing Pages */

.sapCpContentPage {
    font-family: Webfont;
    font-size: 15px;
    line-height: 20px;
    color: #36393a; /* SiS: adapted to CI/CD */
    -webkit-font-smoothing: auto;
}

.sapCpContentPage *, .sapCpContentPage *:before, .sapCpContentPage *:after {
    box-sizing: inherit;
}

.sapCpTextArea {
    font-family: Webfont;
    font-size: inherit;
    color: #36393a; /* SiS: adapted to CI/CD */
    width: 100%;
}

.sapCpWidget input[type=checkbox] {
    -webkit-appearance: checkbox;
    font-size: inherit;
    margin-top: 0px;
}

.sapCpCheckBox {
    line-height: 18px;
}

.sapCpInputWidget select {
    -webkit-appearance: menulist;
    background-image: none;
    height: 40px;
    font-family: Webfont;
    font-size: inherit;
    color: #36393a; /* SiS: adapted to CI/CD */
    width: 100%; /* SiS: adapted from auto to 100% */
}

.sapCpInputWidget .sapCpInput {
    font-family: Webfont;
    font-size: inherit;
    color: #36393a !important; /* SiS: adapted to CI/CD */
    width: 100% !important; /* SiS: adapted from auto to 100% */
    height: 40px;
}

.sapCpLabel {
    font-family: Webfont;
    font-weight: 700;
    font-size: 15px; /* SiS: adapted to CI/CD */
    color: #36393a !important; /* SiS: adapted to CI/CD */
    line-height: 20px;
}

.sapCpButton {
    font-family: Webfont;
    font-size: 20px; /* SiS: adapt to CI/CD */
    font-weight: 400;
    line-height: 24px;
    background-color: #00b9be !important; /* SiS: adapt to CI/CD */
    color: #ffffff !important; /* SiS: added white font color */
    border-radius: 0px !important; /* SiS: adapt to CI/CD */
    border-style: solid;
    border-color: #00b9be !important; /* SiS: no border color */
    border-width: 1px;
    padding: 5px 25px !important; /* SiS: adapt to CI/CD */
    width: auto;
    cursor: pointer; /* SiS: adding some movement :) */
}

/* SiS: Adding some hovering */

.sapCpButton:hover {
    background-color: #007578 !important; /* SiS: hovering c2 */
    color: #ffffff; /* SiS: added white font color */
    border-color: #007578 !important; /* SiS: no border color */
}

/******************************************************************************************
    Hide Form Button after Submit
    SiS: taken from https://blogs.sap.com/2020/05/08/hide-the-form-button-with-css-to-avoid-multiple-submissions/
 ******************************************************************************************/

/*--- Hide all Form fields after submit - except the button widget ---*/
.sapCpSubmitCompleted .sapCpWidget:not(.sapCpButtonWidget) input {
    pointer-events: none;
}

/*--- Hide only the button part of the button widget leaving the message visible ---*/
.sapCpSubmitCompleted .sapCpButton {
    display: none;
}

/* Links */

a {
    color: #00b9be !important; /* SiS: adapt to CI/CD */
    text-decoration: none;
}

a:hover {
    color: #00b9be !important; /* SiS: adapt to CI/CD */
    text-decoration: underline;
}

/* Responsive layout */

@media screen and (min-width: 481px) {
    .sapCpLabel:not(.sapCpLabelRequiredBefore):after {
        right: 1px;
        top: -2px;
    }
    .sapCpLabel:not(.sapCpLabelRequiredBefore) {
        padding-right: 10px;
    }
}

@media screen and (max-width: 480px) {
    /* Widget */
    .sapCpWidgetContent {
        width: 100% !important;
        text-align: left;
        margin-bottom: 30px !important; /* SiS: adapt to CI/CD */
    }
    /* Input */
    .sapCpWidgetContent .sapCpInput {
        width: 100%;
    }
    /* Text Area */
    .sapCpWidgetContent .sapCpTextArea {
        width: 98%;
    }
    /* DropDown */
    .sapCpWidgetContent .sapCpDropDown {
        width: 100%;
    }
    /* Date Picker */
    .sapCpDatePicker .sapCpDropDown~.sapCpDropDown {
        margin-left: 0 !important;
    }
    .sapCpDatePicker .sapCpDatePickerDay {
        width: 100%; /* SiS: adapting formatting */
    }
    .sapCpInputWidget .sapCpDatePickerMonth {
        width: 100%; /* SiS: adapting formatting */
    }
    .sapCpInputWidget .sapCpDatePickerYear {
        width: 100%; /* SiS: adapting formatting */
    }
    .sapCpWidgetContentRight {
        padding-left: 0% !important;
    }
}