.flat .dcdPanel {
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    align-items: center;
    background: #EAEAEA;
    display: flex;
    justify-content: center;
    margin-top: 1px; /* fix layout issue */
}

.flat .dcdPanelContainer {
    background: white;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    height: calc(100% - 100px) !important;  /* unfortunately have to overwrite dojo calculations */
    max-height: 1000px;
    max-width: 1400px;
    min-width: 700px;
    min-height: 300px;
    overflow: hidden;
}

.flat .dcdPanelHeader {
    background: #2196f3;
    box-sizing: border-box;
    color: white;
    padding: 60px 45px;
    position: relative;
    width: 100%;
}

.flat .dcdPanelTitle {
    line-height: 0;
}

.flat .dcdPanelControls {
    background: transparent;
    bottom: 0;
    height: 35px !important;  /* unfortunately dojo overwrites the height with 0 */
    position: absolute;
    right: 15px;
}

.flat .dcdPanelBody {
    box-sizing: border-box;
    height: calc(100% - 117px);
    padding: 30px 45px 15px;
    position: relative;
    width: 100%;
}

.flat .dcdDetailsPane {
    padding: 0;
}

.flat .dcdDetailsPane .dcdTableWrapper {
    border: 1px solid #B8C0CA;
}

.flat .dcdGenericPanel {
    padding-top: 0px;
    padding-bottom:12px;
    margin-bottom: 3px;
}

.flat .dcdGenericPanelTitleContainer {
    padding-bottom: 0px;
    margin-top: 6px;
}

.flat .dcdGenericPanel .titleControlContainer {
    z-index: 100;
    position: absolute;
    margin-left: 30px;
    top: 10px;
    right: 10px;
}

.flat .ControlPanelPortlet {
    float: left;
    width: 32%;
    min-height: 350px;
    height: 90%;
    padding-right: 10px;
    margin-right: 10px;
    border-right:1px solid #EEE;
}

.flat .ControlPanelPortlet:only-child,
.flat .ControlPanelPortlet:last-child {
    border-right: none;
    margin-right: 0px;
    padding-right: 0px;
}

.flat .dcdCostDetailPanel .titlePane {
    border-bottom: 1px solid #CCC;
    padding-right: 0px;
}

.flat .dcdCostDetailPanel .detailsPane {
    background-color: #FAFAFA;
}

.flat .dcdCostDetailPanel .sumPane {
    border-top: 1px solid #CCC;
    background-color: #EEE;
    text-align: right;
    font-size: 1.25em;
}


/****************************
 * Data Center Create Panel *
 ****************************/

.flat .dcdDCCreatePanel {
    height: 425px;
    padding: 10px 0 3px 0;
}

.flat .dcdDCCreatePanelTitle {
    padding: 0 30px;
}

.flat .dcdDCCreatePanelList {
    height: 270px;
    padding: 0 20px 0 30px;
}

.flat .dcdDCCreatePanelListButton {
    padding: 8px 20px;
}

.flat .dcdDCCreatePanelForm {
    max-width: 400px; /* IE fix where the form would be huge */
}

.flat .dcdSplashPortlet .dcdDCCreate {
    width: 100% !important; /* fix layout issue where empty DC panels gets a weird size */
}

.flat .dcdDCCreateContainer {
    padding: 20px 20px 0;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
}