@supports (font: -apple-system-body) {
    html {
        font: -apple-system-body !important;
    }
}

:root {
    --md-button-primary-bg-color: #000000f2;
    --md-button-primary-hover-bg-color: #000000cc;
    --md-button-primary-pressed-bg-color: #000000B2;
    --md-button-primary-text-color: #fffffff2;
    --md-button-primary-outline-color: #1170CF;
    --md-button-primary-outline-text-color: #1170CF;
    --md-button-secondary-bg-color: #DEDEDE;
    --md-button-secondary-hover-bg-color: #CCCCCC;
    --md-button-secondary-pressed-bg-color: #B2B2B2;
    --md-button-secondary-text-color: #121212;
    --md-button-secondary-outline-color: #545454;
    --md-button-secondary-outline-text-color: #545454;
    --md-button-join-bg-color: #00853C;
    --md-button-join-hover-bg-color: #03612C;
    --md-button-join-pressed-bg-color: #08421F;
    --md-button-join-text-color: #F7F7F7;
    --md-button-join-outline-color: #03612C;
    --md-button-join-outline-text-color: #03612C;
    --md-button-cancel-bg-color: #D4371C;
    --md-button-cancel-hover-bg-color: #A12512;
    --md-button-cancel-pressed-bg-color: #6E1D13;
    --md-button-cancel-text-color: #F7F7F7;
    --md-button-cancel-outline-color: #A12512;
    --md-button-cancel-outline-text-color: #A12512;
    --md-button-ghost-bg-color: none;
    --md-button-ghost-hover-bg-color: #545454;
    --md-button-ghost-pressed-bg-color: #3B3B3B;
    --md-button-ghost-text-color: #121212;
    --md-button-focus-ring-color: #007AA3;
    --md-button-disabled-bg-color: #00000033;
    --md-button-disabled-text-color: #00000066;
    --md-input-background-color: #FFFFFF;
    --md-input-background-hover: #0000001C;
    --md-input-background-pressed: #CCCCCC;
    --md-input-background-active: #DEDEDE;
    --md-input-background-theme-color: #007AA3;
    --md-input-background-theme-hover: #005E7D;
    --md-input-background-theme-pressed: #064157;
    --md-input-background-theme-active: #064157;
    --md-input-background-theme-disabled: #EBFCFF;
    --md-input-background-error: #FFF5F2;
    --md-input-disabled: #EDEDED;
    --md-input-focusRing: #007AA3;
    --md-input-outline-color: #00000080;
    --md-input-outline-active: #000000E5;
    --md-input-outline-error: #AB0A15;
    --md-input-text-primary: #121212;
    --md-input-text-secondary: #545454;
    --md-input-text-disabled: #B2B2B2;
    --md-input-text-error: #AB0A15;
    --md-input-text-success: #185E46;
    --md-textColor-primary: #121212;
    --md-textColor-secondary: #545454;
    --md-textColor-disabled: #B2B2B2;
    --md-textColor-highlight: #DEDEDE;
    --md-textColor-hyperlink-color: #0353A8;
    --md-textColor-hyperlink-hover: #0A274A;
    --md-textColor-hyperlink-focus: #0353A8;
    --md-background-primary: #FFFFFF;
    --md-background-secondary: #F7F7F7;
    --md-background-tertiary: #EDEDED;
    --md-background-quaternary: #DEDEDE;
    --md-presence-busy: #FC9D03;
    --md-presence-doNotDisturb: #D4371C;
    --md-presence-active: #00AB50;
    --md-presence-away: #CCCCCC;
    --md-alert-background-warning: #FFECC2;
    --md-alert-background-error: #FFFFFF;
    --md-alert-background-error-hover: #0000001C;
    --md-alert-background-theme: #C9F4FF;
    --md-alert-background-success: #BEFADE;
    --md-alert-text-warning: #7D4705;
    --md-alert-text-error: #A12512;
    --md-alert-text-theme: #005E7D;
    --md-alert-text-success: #03612C;
    --md-avatar-cobalt: #99DDFF;
    --md-avatar-cyan: #67E7F0;
    --md-avatar-gold: #EBD460;
    --md-avatar-gray: #CCCCCC;
    --md-avatar-lime: #BCE36F;
    --md-avatar-mint: #74E8D1;
    --md-avatar-orange: #FFCA99;
    --md-avatar-pink: #FFC7D2;
    --md-avatar-purple: #FAC3F8;
    --md-avatar-slate: #CED2ED;
    --md-avatar-violet: #E2CAFC;
    --md-separator-primary: #CCCCCC;
    --md-separator-secondary: #B2B2B2;
    --label-text-color: #000000F2;
    --md-input-focus-shadow:  0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #1170CF, 0px 0px 0px 5px #1170CF4D;
    --md-button-focus-shadow: 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 4px #1170CF, 0px 0px 0px 5px #1170CF4D;
    --color-theme-outline-input-normal: #00000080;
    /* broker custom properties*/
    --body-background-image: url("/idb/images/webex-background-light.svg");
    --body-background-fallback-color: #E9E9E9;
    --body-background-image-ie: url('/idb/images/webex-background-light.svg');
    --footer-url: url("/idb/images/webex-footer-black.svg");

    --apple-icon-image-url: url("/idb/images/apple-logo-black.svg");
    --arrow-right-optical, url("../images/arrow-right-optical.svg");
}

[data-theme="dark"] {
    --md-button-primary-bg-color: #FFFFFFF2;
    --md-button-primary-hover-bg-color: #FFFFFFCC;
    --md-button-primary-pressed-bg-color: #FFFFFFB2;
    --md-button-primary-text-color: #000000F2;
    --md-button-primary-outline-color: #07C1F5;
    --md-button-primary-outline-text-color: #07C1F5;
    --md-button-secondary-bg-color: #707070;
    --md-button-secondary-hover-bg-color: #545454;
    --md-button-secondary-pressed-bg-color: #3B3B3B;
    --md-button-secondary-text-color: #F7F7F7;
    --md-button-secondary-outline-color: #B2B2B2;
    --md-button-secondary-outline-text-color: #B2B2B2;
    --md-button-join-bg-color: #00853C;
    --md-button-join-hover-bg-color: #03612C;
    --md-button-join-pressed-bg-color: #08421F;
    --md-button-join-text-color: #F7F7F7;
    --md-button-join-outline-color: #00CF64;
    --md-button-join-outline-text-color: #00CF64;
    --md-button-cancel-bg-color: #D4371C;
    --md-button-cancel-hover-bg-color: #A12512;
    --md-button-cancel-pressed-bg-color: #6E1D13;
    --md-button-cancel-text-color: #F7F7F7;
    --md-button-cancel-outline-color: #FF9580;
    --md-button-cancel-outline-text-color: #FF9580;
    --md-button-ghost-bg-color: none;
    --md-button-ghost-hover-bg-color: #545454;
    --md-button-ghost-pressed-bg-color: #707070;
    --md-button-ghost-text-color: #F7F7F7;
    --md-button-focus-ring-color: #07C1F5;
    --md-button-disabled-bg-color: #FFFFFF33;
    --md-button-disabled-text-color: #FFFFFF66;
    --md-input-background-color: #121212;
    --md-input-background-hover: #FFFFFF1C;
    --md-input-background-pressed: #545454;
    --md-input-background-active: #3B3B3B;
    --md-input-background-theme-color: #07C1F5;
    --md-input-background-theme-hover: #00A0D1;
    --md-input-background-theme-pressed: #007AA3;
    --md-input-background-theme-active: #007AA3;
    --md-input-background-theme-disabled: #092D3B;
    --md-input-background-error: #4A1812;
    --md-input-disabled: #292929;
    --md-input-focusRing: #07C1F5;
    --md-input-outline-color: #FFFFFF80;
    --md-input-outline-active: #FFFFFFE5;
    --md-input-outline-error: #FC8B98;
    --md-input-text-primary: #F7F7F7;
    --md-input-text-secondary: #545454;
    --md-input-text-disabled: #B2B2B2;
    --md-input-text-error: #FC8B98;
    --md-input-text-success: #3CC29A;
    --md-textColor-primary: #F7F7F7;
    --md-textColor-secondary: #B2B2B2;
    --md-textColor-disabled: #545454;
    --md-textColor-highlight: #3B3B3B;
    --md-textColor-hyperlink-color: #64B4FA;
    --md-textColor-hyperlink-hover: #BFE3FF;
    --md-textColor-hyperlink-focus: #64B4FA;
    --md-background-primary: #121212;
    --md-background-secondary: #1C1C1C;
    --md-background-tertiary: #292929;
    --md-background-quaternary: #3B3B3B;
    --md-presence-busy: #FC9D03;
    --md-presence-doNotDisturb: #D4371C;
    --md-presence-active: #00AB50;
    --md-presence-away: #CCCCCC;
    --md-alert-background-warning: #54330D;
    --md-alert-background-error: #000000;
    --md-alert-background-error-hover: #FFFFFF1C;
    --md-alert-background-theme: #064157;
    --md-alert-background-success: #08421F;
    --md-alert-text-warning: #FC9D03;
    --md-alert-text-error: #FF9580;
    --md-alert-text-theme: #07C1F5;
    --md-alert-text-success: #00CF64;
    --md-avatar-cobalt: #99DDFF;
    --md-avatar-cyan: #67E7F0;
    --md-avatar-gold: #EBD460;
    --md-avatar-gray: #CCCCCC;
    --md-avatar-lime: #BCE36F;
    --md-avatar-mint: #74E8D1;
    --md-avatar-orange: #FFCA99;
    --md-avatar-pink: #FFC7D2;
    --md-avatar-purple: #FAC3F8;
    --md-avatar-slate: #CED2ED;
    --md-avatar-violet: #E2CAFC;
    --md-separator-primary: #545454;
    --md-separator-secondary: #707070;
    --label-text-color: #FFFFFFF2;
    --md-input-focus-shadow:  0px 0px 0px 2px #000000,  0px 0px 0px 4px #64B4FA, 0px 0px 0px 5px #64B4FA4D;
    --md-button-focus-shadow: 0px 0px 0px 2px #000000F2, 0px 0px 0px 4px #64B4FA, 0px 0px 0px 5px #64B4FA59;
    --color-theme-outline-input-normal: #FFFFFFF2;

    /* broker custom properties*/
    --body-background-image: url("/idb/images/webex-background-dark.svg");
    --body-background-fallback-color: #1C1B1A;
    --body-background-image-ie: url('/idb/images/webex-background-dark.svg');
    --footer-url: url('/idb/images/webex-footer-white.svg');

    --apple-icon-image-url: url("/idb/images/apple-logo.svg");
    --arrow-right-optical, url("../images/arrow-right-optical.svg")
}