@import url('https://cors.uicdn.net/fonts/opensans-regular-subset.woff2');
@import url('https://cors.uicdn.net/fonts/opensans-bold-subset.woff2');

@font-face {
    font-family: "Open Sans";
    src: url('https://cors.uicdn.net/fonts/opensans-regular-subset.woff2') format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "Open Sans";
    src: url('https://cors.uicdn.net/fonts/opensans-bold-subset.woff2') format("woff2");
    font-weight: 600;
}


/**********
 * Colors *
 **********

 // 1&1 colors?
 primary: #003D8F;
 primary-dark: #0B3476;

 // IONOS colors?
 secondary: #0B9DCC;
 secondary-dark: #3C9DDB;

 black: #000;
 dark-grey: #001B41;

*/

:root {
    --primary-color: #003D8F;
    --primary-color-light: #95CAEB;
}


/***********
 * General *
 * & Text  *
 ***********/

html, body {
    font: 12px "Open Sans", Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

.flat h1,.flat h2 {
    font-weight: normal;
    letter-spacing: 1px;
}

.flat .dcdColorPrimary {
    color: #003D8F;
}


/*********
 * Menus *
 *********/

/* Mainmenu */
.flat .MainMenu {
    background: #003D8F;
}

/* Button node */
.flat .MainMenuButton {
    color: #FFF;
}

.flat .MainMenuButton .dijitButtonNode {
    border-left: 1px solid #003D8F;
    border-right: 1px solid #003D8F;
}

/* Hover States */
.flat .MainMenuButton.dijitDropDownButtonHover .dijitButtonNode {
    background: transparent;
    color: #FFF;
}

/* Opened States */
.flat .MainMenuButton.dijitDropDownButtonOpened .dijitButtonNode {
    background: #FFF;
    color: #003D8F;
    font-weight: normal;
}

/* Dropdown */
.flat .MainMenuPopup {
    border-left: 1px solid #003D8F;
    border-right: 1px solid #003D8F;
    border-bottom: 1px solid #003D8F;
    border-top:none;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
}

.flat .dijitMenuItem,
.flat .dijitMenuItem td {
    transition: background-color 150ms ease-in-out;
}

/* Notifier */

.flat .NotifierButtonIcon {
    border-color: #FFF;
}

.flat .dijitDropDownButtonOpened .NotifierButtonIcon {
    border-color: #003D8F;
}

.flat .level_error::after,
.flat .level_fatal::after,
.flat .level_info::after,
.flat .level_message::after,
.flat .level_warning::after {
    border-color: #FFF;
}

.flat .dijitDropDownButtonOpened .level_error::after,
.flat .dijitDropDownButtonOpened .level_fatal::after,
.flat .dijitDropDownButtonOpened .level_info::after,
.flat .dijitDropDownButtonOpened .level_message::after,
.flat .dijitDropDownButtonOpened .level_warning::after {
    border-color: #003D8F;
}

.flat .Logentry {
    padding: 10px;
    padding-left: 40px;
}

.flat .Logentry::before {
    top: 20px;
}


/*************
 * Dashboard *
 *************/

.flat .dcdSplash {
    background: #FFF;
}

.flat .dcdSplashTitle {
    color: #FFF;
    background: #0B3476;
    height: 100px;
}

.flat .dcdSplashContainer {
    margin-top: -102px;
}

.flat .dcdSplashPortlet {
    border-radius: 3px;
}

.flat .dcdSplashPortlet.dijitAlignCenter {
    margin-bottom: 6px; /* fix layout alignment issue */
}

.flat .dcdSplashRow {
    width: 27%;
}

.flat .dcdGenericPanelTitleContainer {
    padding: 0;
    margin: 0;
}

.flat .dcdGenericPanelTop {
    padding-top: 0;
}

/***********
 * Buttons *
 ***********/

/* Basic */

.flat .dijitButton .dijitButtonNode {
    background: transparent;
    color: #003D8F;
    border: 1px solid #003D8F;
    box-shadow: none;
    padding: 7px 10px 8px;
}

.flat .dijitButton .dijitButtonNode:hover,
.flat .dijitButton .dijitButtonNode:focus,
.flat .dijitButton .dijitButtonNode:active {
    transform: translateY(0px);
    box-shadow: none;
}

.flat .dijitButton .dijitButtonNode:hover,
.flat .dijitButton .dijitButtonNode:focus {
    color: #FFF;
    background: #0674B2;
    border-color: #0674B2;
}

.flat .dijitButton .dijitButtonNode:active {
    color: #FFF;
    background: #0B3476;
    border-color: #0B3476;
}

/* Primary */

.flat .dcdPrimary .dijitButtonNode {
    color: #FFF;
    background: #003D8F;
    border-color: #003D8F;
}

.flat .dcdPrimary .dijitButtonNode:hover,
.flat .dcdPrimary .dijitButtonNode:focus {
    background: #0674B2;
    border-color: #0674B2;
}

.flat .dcdPrimary .dijitButtonNode:active {
    background: #0B3476;
    border-color: #0B3476;
}

/* Primary ALT */

.flat .dcdPrimaryAlt .dijitButtonNode {
    background: #87E2F2;
    border-color: #87E2F2;
}

.flat .dcdPrimaryAlt .dijitButtonNode:hover,
.flat .dcdPrimaryAlt .dijitButtonNode:focus {
    background: #FFF;
    border-color: #FFF;
}

.flat .dcdPrimaryAlt .dijitButtonNode:active {
    background: #57D7ED;
    border-color: #57D7ED;
}

/* Provision */

.flat .dcdProvisionButton .dijitButtonNode {
    background: #0B9DCC;
    border-color: #0B9DCC;
    color: #FFF;
}

.flat .dcdProvisionButton .dijitButtonNode:hover,
.flat .dcdProvisionButton .dijitButtonNode:focus {
    background: #30c4f4;
    border-color: #30c4f4;
    color: #FFF;
}

.flat .dcdProvisionButton .dijitButtonNode:active {
    background: #0674B2;
    border-color: #0674B2;
    color: #FFF;
}

.flat .dcdValidationButton .dijitButtonNode,
.flat .dcdValidationButton .dijitButtonNode:focus,
.flat .dcdValidationButton .dijitButtonNode:hover,
.flat .dcdValidationButton .dijitButtonNode:active {
    background: white;
    color: black;
    padding: 0;
}

/* Combo */

.flat .dijitComboButton .dijitButtonNodeHover,
.flat .dijitComboButton .dijitDownArrowButtonHover {
    color: #0B3476;
}

/* SimpleButton */
/* use this class on elements within tablecells, mainly inputs. i.e. crip quick buy button */
.flat .dcdInputSimpleButton {
    height: 38px;
    margin: 0;
}

.flat .dcdInputSimpleButton .dijitButtonNode {
    border-radius: 3px;
    padding: 8px;
    padding-right: 0;
}

/* dcdNoButton */
.flat .dijitToolbar .dijitComboButton .dijitButtonNode,
.flat .dijitToolbar .dijitButtonNode,
.flat .dijitToolbar .dijitButtonNode:hover,
.flat .dijitToolbar .dijitButtonNode:focus,
.flat .dijitToolbar .dijitButtonNode:active,
.flat .MainMenuButton.dcdNoButton .dijitButtonNode,
.flat .dcdNoButton.dijitDisabled .dijitButtonNode,
.flat .dcdNoButton > .dijitButtonNode,
.flat .dcdNoButton > .dijitButtonNode:hover,
.flat .dcdNoButton > .dijitButtonNode:focus,
.flat .dcdNoButton > .dijitButtonNode:active
{
    background-color: transparent;
    background: transparent;
    transform: none;
    box-shadow: none;
    border: 0;
    outline: none;
    transition: none;
    cursor: default;
    color: inherit;
}

.flat .dcdShowHideButton {
    top: 50%;
    right: 8px;
    transform: translate(0, -55%);
}

.flat .dcdNoButton.dcdShowHideButton .dijitButtonNode {
    padding: 0;
}

/* Marketing */
.flat .dcdMarketingButton .dijitButtonNode {
    color: #FFF;
}

/* Disabled */
.flat .dijitDisabled.dijitButton .dijitButtonNode,
.flat .dijitDisabled.dijitButton .dijitButtonNode:hover,
.flat .dijitDisabled.dijitButton .dijitButtonNode:focus
{
    color: #95A0B0;
    border-color: #DFE2E7;
    background-color: transparent;
}

.flat .dijitDisabled .dijitButtonNode:hover,
.flat .dijitDisabled .dijitButtonNode:focus {
    box-shadow: none;
}

.flat .dijitDisabled.dcdPrimaryAlt .dijitButtonNode,
.flat .dijitDisabled.dcdPrimaryAlt .dijitButtonNode:hover,
.flat .dijitDisabled.dcdPrimaryAlt .dijitButtonNode:focus,
.flat .dijitDisabled.dcdPrimary .dijitButtonNode,
.flat .dijitDisabled.dcdPrimary .dijitButtonNode:hover,
.flat .dijitDisabled.dcdPrimary .dijitButtonNode:focus
{
    color: #95A0B0;
    background-color: #DFE2E7;
    border-color: #DFE2E7;
}

.flat .dijitButtonDisabled,
.flat .dijitDropDownButtonDisabled,
.flat .dijitComboButtonDisabled,
.flat .dijitToggleButtonDisabled {
    color: #95A0B0;
}

/*********
 * Links *
 *********/

.flat a {
    color: #0674B2;
    text-decoration: none;
}

.flat a:hover {
    color: #30c4f4;
    text-decoration: underline;
}

.flat .dcdLink {
    transition: color 150ms ease-in-out;
}

.flat .dcdLink:hover {
    color: #30c4f4;
}


/********
 * Logo *
 ********/

.flat .logo {
    background-image: url("../img/logos/logo.ionos.v2.svg");
}

.flat .logo.alt {
    background-image: url("../img/logos/logo.ionos.v2.svg");
}

.flat .MainMenu .logo {
    background-image: url("../img/logos/logo.ionos.v2.svg");
}

.flat .MainMenu .logo.medium {
    height: 26px;
    margin-bottom: 1px;
}

.flat .logo.color {
    background-image: url("../img/logos/logo.ionos.v2.color.svg");
}

.flat .logo.icon {
    background-image: url("../img/logos/logo.ionos.v2.svg");
}

.flat .dijitMenuItem .logo.icon {
    background-image: url("../img/logos/logo.ionos.v2.color.svg");
}

.flat .dijitMenuItemSelected .logo.icon,
.flat .dijitMenuItemHover .logo.icon {
    background-image: url("../img/logos/logo.ionos.v2.svg");
}

.flat .logo.small {
    width: 80px;
    height: 25px;
}

.flat .logo.medium {
    width: 100px;
    height: 40px;
}

.flat .logo.large {
    width: 120px; /* svg rendering edges */
    height: 90px;
}


/*********
 * Icons *
 *********/

.flat .flat-help {
    color: #003D8F;
}

/* might be replaced with DCD branding path in future since branding might use its own icons? */
.MainMenu .dcdIcon-dcd { background: url("../../default/img/icons/dcd_icon.white.svg") no-repeat; }
.MainMenu .dcdIcon-dcd.alt { background: url("../../default/img/icons/dcd_icon.black.svg") no-repeat; }

.MainMenu .dcdIcon-cube { background: url("../../default/img/icons/item_cube.white.svg") no-repeat; }
.MainMenu .dcdIcon-cube.alt { background: url("../../default/img/icons/item_cube.black.svg") no-repeat; }

.MainMenu .dcdIcon-backups { background: url("../../default/img/icons/item_backups.white.svg") no-repeat; }
.MainMenu .dcdIcon-backups.alt { background: url("../../default/img/icons/item_backups.black.svg") no-repeat; }

.MainMenu .dcdIcon-manager { background: url("../../default/img/icons/dcd_manager.white.svg") no-repeat; }
.MainMenu .dcdIcon-manager.alt { background: url("../../default/img/icons/dcd_manager.black.svg") no-repeat; }

.MainMenu .dcdIcon-user { background: url("../../default/img/icons/dcd_user.white.svg") no-repeat; }
.MainMenu .dcdIcon-user.alt { background: url("../../default/img/icons/dcd_user.black.svg") no-repeat; }

/*****************
 * Tabcontainers *
 *****************
*/

.flat .dijitTabCloseButton {
    border-radius: 50%;
    color: #fff;
}

.flat .dijitTabCloseButton:focus,
.flat .dijitTabCloseButton:hover {
    color: #003275;
    background: #fff;
}

.flat .dijitTabChecked .dijitTabCloseButton {
    color: #003275;
}

.flat .dijitTabChecked .dijitTabCloseButton:hover,
.flat .dijitTabChecked .dijitTabCloseButton:focus {
    color: #fff;
    background: #000;
}

.flat .dijitTabListContainer-top .dijitTab,
.flat .dcdInspector .dijitTabListWrapper {
    border: 0;
}

.flat .dijitTabListContainer-top {
    border-top: 0;
    border-color: #E6E6E6;
}

.flat .dijitTabContainerTop .dijitTab {
    border: 0 solid white;  /* << preset the color to white */
    background: transparent;
    padding: 9px 15px;
    transition:
        color 150ms ease-in-out,
        border-color 150ms ease-in-out,
        border-size 150ms ease-in-out,
        background-color 150ms ease-in-out;
}

.flat .dijitTabContainerTop:not(.dcdMainTabs) .dijitTabHover {
    background: transparent;
    color: #0674B2;
    border-bottom: 2px solid #30c4f4;
}

.flat .dijitTabContainerTop:not(.dcdMainTabs) .dijitTabChecked,
.flat .dijitTabContainerTop:not(.dcdMainTabs) .dijitTabActive {
    background: transparent;
    color: #0674B2;
    border-bottom: 2px solid #0674B2;
}

.flat .dcdDesignerTabs-top {
    border-top: none;
    border-bottom-color: #003275;
}

.flat .dcdDesignerTabs-top .dijitTabChecked {
    background: #003275;
}

.flat .dcdDesignerTabs-tab {
    margin-top: 0;
}

/* Maintabs */
.flat .dcdMainTabs > .dijitTabListContainer-top {
    border: none;
    background: #003275;
    color: #fff;
}

.flat .dcdMainTabs > .dijitTabListContainer-top .dijitTabHover {
    background: #0674B2;
}

.flat .dcdMainTabs > .dijitTabListContainer-top .dijitTabChecked {
    background: #fff;
    color: #003275;
}

.flat .dcdMainTabs > .dijitTabListContainer-top .dijitTab {
    padding: 10px 15px;
}


/************
 * Designer *
 ************
*/

/* Drag and Drop Items */
.flat .dcdDndItem {
    background: #001B41;
}

/* Drag and Drop Handle */
.flat .dcdStorageSortList .dojoDndHandle {
    background: #001B41;
}


/*********
 * Panel *
 *********/

.flat .dcdPanel {
    background: #FFF;
}

.flat .dcdPanelHeader {
    background: #003D8F;
}

.flat .dcdPanelControls {
    overflow: hidden;
}

.flat .dcdPanelContainer {
    background: #003275;
    border-radius: 3px;
    box-shadow: 1px 1px 35px rgba(0, 0, 0, .2);
    width: calc(100% - 90px) !important;
    height: calc(100% - 80px) !important;
}

.flat .dcdPanelBody {
    background: #FFF;
}


/*************
 * Accordion *
 ************/

.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
    background: #003D8F;
}


/*********
 * Lists *
 *********/

.flat .dcdListItem,
.flat .dcdListItem > td
{
    padding: 10px;
    padding-left: 45px;
    line-height: 24px;
    transition:
        color 150ms ease-in-out,
        background-color 150ms ease-in-out;
    border-left: 5px solid transparent;
}

.flat .dcdListItem:focus,
.flat .dcdListItem:hover,
.flat .dcdListItem:focus td,
.flat .dcdListItem:hover td
{
    color: #30c4f4;
}

.flat .dcdListItem_Selected,
.flat .dcdListItem.dijitMenuItemSelected
{
    color: black;
    border-left-color: #003D8F;
}

.flat .dijitMenuItemHover td,
.flat .dijitMenuItemSelected td {
    background-color: #003D8F;
}


/***********
 * Dialogs *
 ***********/

.flat .dijitDialog {
    border-color: #003D8F;
}

.flat .QuickHelp {
    width: 350px;
}

.flat .dcdLoginDialog_underlay {
    background: #003D8F;
    background: linear-gradient(to top right, #0881ba 0,#0dacd5);
}

.flat .dcdLoginDialogScreen {
    background: #3072ec;
    background: url('../img/backgrounds/entryImage.jpg');
    background-size: cover;
    background-position-x: center;
}

.flat .dcdLoginDialogLeft {
    background: linear-gradient(to top right, #0881ba 0,#0dacd5);
    width: 40%;
}

.flat .dcdLoginDialogRight {
    width: 60%;
    background: #FFF;
}

.flat .dcdLoginDialog {
    border: 0;
    overflow: hidden;
}

.flat .dijitDialogTitleBar {
    background-color: #003D8F;
    color: #FFF;
    border-color: #003D8F;
    padding: 10px 15px;
    width: 100% !important;
}

.flat .dijitDialogCloseIcon {
    color: white;
}

/* Provisioning */
.flat .dcdProvisioningDialog .dcdProvisioningSolver {
    width: 100px;
}


/**********
 * Inputs *
 **********/

.flat .dijitSliderDecrementIconH,
.flat .dijitSliderIncrementIconH,
.flat .dijitSliderDecrementIconV,
.flat .dijitSliderIncrementIconV {
    color: #003D8F;
}

.flat .dijitSlider .dijitSliderProgressBarH,
.flat .dijitSlider .dijitSliderLeftBumper,
.flat .dijitCheckBoxChecked,
.flat .dijitRadio:after,
.flat .dijitRadioIcon:after {
    background: #003D8F;
}

.flat .dijitCheckBoxChecked,
.flat .dijitRadio,
.flat .dijitRadioIcon,
.flat .dijitSliderImageHandle {
    border-color: #003D8F;
}

.flat .dijitCheckBoxChecked::before {
    background: #003D8F;
}

.flat .dijitButtonNode {
    padding-top: 10px;
    padding-bottom: 10px;
}

.flat .dijitTextBox {
    padding: 4px 0 4px 7px;
}

/* unfortunately have to set important to overwrite TABLE.dijitSelect with already has an important :'( */
.flat .dijitSelect {
    padding: 4px 0 4px 7px !important;
}

.flat .dcdPinField {
    width: 7rem;
    padding-right: 25px;
}

.flat .dcdShowHideInput {
    padding-right: 25px;
}

.flat .dijitCheckBox {
    width: 20px;
    height: 20px;
}

.flat .dcdPasswordEnableToEditText {
    padding-top: 5px;
    white-space: nowrap;
}

.flat .dcdDCCreateInput {
    margin-bottom: 8px;
}

.flat .dcdNicInspectorDelete {
    transform: translateY(-5px);
}

.flat .dijitStretch.dijitButtonNode {
    padding: 7px 10px;
}

.flat table.dijitComboButton .dijitArrowButton {
    padding: 0 6px;
}

/* align with other arrow inputs */
.flat .dijitSpinner .dijitSpinnerButtonInner {
    width: 20px;
}

.flat .blockWidget {
    display: inline-block;
    position: relative;
}

.flat .dcdLabelField {
    overflow-y: hidden;
    padding: 10px;
}

.flat .dijitToolbar .dcdSearchField {
    box-sizing: border-box;
}

.flat .dijitToolbar .dijitTextBox {
    padding: 0;
}

.flat .dcdSearchToolbar {
    padding: 8px;
}

/*************
 * Inspector *
 *************/

.flat .dcdDocumentTitlePane {
    background: #fff;
    color: inherit;
    border-bottom: 1px solid #E6E6E6;
}

.flat .dcdStorageSortListItem {
    min-height: 120px;
}

.flat .dcdInspector {
    width: 430px;
}


/***************
 * Progressbar *
 ***************/

.flat .dijitProgressBarFull {
    background-color: #003D8F;
}

.flat .dijitProgressBar {
    padding-top: 5px;
    padding-bottom: 5px;
}

/*********************
 * Context Help Pane *
 *********************/
.flat .ContextHelpPane .ContextHelpPaneTitleBar {
    background:#003275;
    color:#FFFFFF;
}


/**************
 * Dijitfixes *
 **************/

.flat .dijitTooltipContainer {
    color: inherit;
}

.flat .dijitTitlePaneContentOuter .dijitLayoutContainer {
    display: inline-block;
}

.flat .dijitDialogPaneActionBar {
    padding: 10px;
}


/*************
 * Selection *
 *************/

.ds-selected {
    stroke: #30c4f4;
}


.front.ias-zone {
}

.ias-zone:not(.ias-survey-zone, .advertiser-widget) {
    margin-bottom: 23px;
}