@media (max-width: 575.98px) {
    body {
        background: url(../../images/wire/Framework1-599px.jpg) no-repeat center center fixed;
        background-size: cover;
        overflow-x: hidden;
    }
}

@media (min-width: 576px) {
    body {
        background: url(../../images/wire/Framework1-1200px.jpg) no-repeat center center fixed;
        background-size: cover;
        overflow-x: hidden;
    }
}

@media (min-width: 992px) {
    body {
        background: url(../../images/wire/Framework1-1920px.jpg) no-repeat center center fixed;
        background-size: cover;
        overflow-x: hidden;
    }
}

@media (min-width: 1200px) {
	body {
		background: url(../../images/wire/Framework1-3000px.jpg) no-repeat center center fixed;
		background-size: cover;
		overflow-x: hidden;
	}
}

/*

  Section: Flex Input Field styles
  Purpose: include a variant of these styles
           into every feature-specific css file,
           where the feature uses the ucFlexInputField or ucFlexDropdown.

*/

.dx-fld-input-field {
    background-color: transparent !important;
}

    .dx-fld-input-field:focus,
    .dx-fld-input-field:hover {
        box-shadow: 0 0 0 .05rem white !important;
    }

.dx-fld-dropdown {
    height: 1.75rem !important;
}
.dx-fld-dropdown-proper {
    /* a hack to escape the application of the rule
        .custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid 
        from styles.css
    */
}

.dx-fld-input-field,
.dx-form-dropdown-dark,
.dx-fld-dropdown {
    caret-color: white !important;
}
/* End Section: Flex Input Field styles */

/*styled checkbox */
.dx-auth-checkbox label:after {
    content: '';
    display: table;
    clear: both;
}

.dx-auth-checkbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid white;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

    .dx-auth-checkbox .cr .cr-icon {
        position: absolute;
        font-size: .8em;
        line-height: 0;
        top: 50%;
        left: 15%;
    }

.dx-auth-checkbox label input[type="checkbox"] {
    opacity: 0;
}

    .dx-auth-checkbox label input[type="checkbox"] + .cr > .cr-icon {
        opacity: 0;
    }

    .dx-auth-checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
        opacity: 1;
    }

    .dx-auth-checkbox label input[type="checkbox"]:disabled + .cr {
        opacity: .5;
    }

    .dx-auth-checkbox label input[type="checkbox"]:focus + span,
    .dx-auth-checkbox label input[type="checkbox"]:hover + span {
        box-shadow: 0 0 0 .05rem white !important;
        outline: none;
    }

/* styling of the placeholder text in form elements */

::placeholder {
    color: rgba(255,255,255,0.5) !important; /* Don't have a hex color for 50% white */
}

/*ALM12399 have to use color containing opacity instead of opacity property */
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgba(255,255,255,0.5) !important; /* Don't have a hex color for 50% white */
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: rgba(255,255,255,0.5) !important; /* Don't have a hex color for 50% white */
}

.custom-select.is-invalid::placeholder,
.form-control.is-invalid::placeholder,
.was-validated .custom-select:invalid::placeholder,
.was-validated .form-control:invalid::placeholder {
    color: var(--dx-salmon) !important;
    opacity: .5 !important;
}

.custom-select.is-invalid:-ms-input-placeholder,
.form-control.is-invalid:-ms-input-placeholder,
.was-validated .custom-select:invalid:-ms-input-placeholder,
.was-validated .form-control:invalid:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--dx-salmon) !important;
    opacity: 1 !important;
}

/* end styling of the placeholder text in form elements */

/* Overriding bootstrap''s default colors for invalid fields */

.custom-select.is-invalid, .form-control.is-invalid, .was-invalidated .custom-select:invalid, .was-invalidated .form-control:invalid {
    border-color: var(--dx-salmon);
}

    .custom-select.is-invalid:focus, .form-control.is-invalid:focus, .was-invalidated .custom-select:invalid:focus, .was-invalidated .form-control:invalid:focus {
        border-color: var(--dx-salmon);
        box-shadow: 0 0 0 .2rem var(--dx-salmon);
        background-color: var(--dx-light-bright-orange);
    }

/* end Overriding bootstrap''s default colors for invalid fields */

/* the GREEN CHECKBOX adaptation to the FlexMemberTandC screen */

.custom-control-label::before,
.custom-control-label::after {
    border: .0625rem solid white;
    background-color: transparent;
    box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(19,55,90,0.5);
}

.custom-control-input:checked ~ .custom-control-label::before,
/*The after here is the checkmark inside checkbox*/
.custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--dx-light-green);
    transition: background-color 0.2s;
}

.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:hover ~ .custom-control-label::before,
/*The after here is the checkmark inside checkbox*/
.custom-control-input:focus ~ .custom-control-label::before,
.custom-control-input:hover ~ .custom-control-label::before {
    box-shadow: 0 0 0 .05rem white !important;
    background-color: transparent !important;
    transition: none;
}

/* end of the GREEN CHECKBOX adaptation to the FlexMemberTandC screen */

/* the scrollbox adaptation to the FlexMemberTandC screen */

.dx-box-base:focus,
.dx-box-base:hover {
    box-shadow: 0 0 0 .05rem white !important;
    outline: none;
    border-color: white !important;
    opacity: 0.85;
}

.dx-terms-scrollbox {
    height: 45vh;
    overflow-y: auto;
}

/* end of the scrollbox adaptation to the FlexMemberTandC screen */

/* overriding button style for dark screen */

.dx-btn-blue,
.dx-btn-blue:focus,
.dx-btn-blue:hover {
    box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(19,55,90,0.5) !important;
}

.dx-btn-green,
.dx-btn-green:focus,
.dx-btn-green:hover {
    box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(19,55,90,0.5) !important;
}

.dx-btn-gray,
.dx-btn-gray:focus,
.dx-btn-gray:hover {
    box-shadow: 0.0625rem 0.0625rem 0.125rem rgba(19,55,90,0.5) !important;
}

/* end of overriding button style for dark screen */