@bodyWidth: 1280px;
@companyBaseColor: rgba(206, 206,206, 0.9);
@headerHeight: 50px;
@bodyBackground: transparent;
@footerHeight: 24px;
@paramPanelHeight:35px;
@companyFont: Arial;
@gray: rgba(128, 128, 128, 0.2);
@defaultContentSize: 10px;
@panelBackgroundColor: rgb(239,239,242);
@panelBorderColor: rgba(206, 206,206, 0.9);
@panelInnerBorderColor: rgba(206, 206,206, 0.5);

/*============================= 
  ***** Rockit.Master ******
============================= */
*{
    margin:0; 
    padding:0;
}

html, body{
    height: 100vh;
	font-family: @companyFont;
}

#divHeader {
    height: @headerHeight;
    width: 100vw; 
    max-width: @bodyWidth;
	margin: 0px Auto;
    border-bottom: 2px solid @companyBaseColor;
}

#divRockitNav {
    height: @paramPanelHeight;
    max-width: @bodyWidth;
    width: 100vw;
	margin: 0px Auto;
	background: transparent;
	font-family: @companyFont;
	font-size: small;
}

#systemMenu{
	float:left;
    width:55%;
}

#systemButtons{
	float:right;
}

.dxbButton_Metropolis {
    color: #333333;
    border: none !important;
    background-color: white;
    padding: 1px;
    font: 12px "Segoe UI", Helvetica, "Droid Sans", Tahoma, Geneva, sans-serif;
}

.dxgvEditFormDisplayRow_Moderno td.dxgv,
.dxgvInlineEditRow_Moderno td.dxgv,
.dxgvDetailCell_Moderno td.dxgv,
.dxgvDataRow_Moderno td.dxgv,
.dxgvDetailRow_Moderno.dxgvADR td.dxgvAIC {
    border-bottom: 1px Solid #d1d1d1;
    border-right: none !important;
}

.dxgvTable_Moderno {
    border: none !important;
}

.dxgvDataRowAlt_Moderno {
    background-color: #fafafa;
}

.dxpcLite_Moderno, .dxdpLite_Moderno {
    color: #9f9f9f;
}

.dxgvHeader_Moderno, .dxgvHeader_Moderno table {
    color: #a6a6a6;
}

.linklook {
    cursor: pointer;
    color: #045CAD;
}
.dxeListBoxItem_Moderno {
    border-left: none !important;
    border-right: none !important;
}
.dxeListBox_Moderno td.dxeTM, .dxeListBox_Moderno td.dxeLTM, .dxeListBox_Moderno td.dxeMIM {
    border-left: none !important;
}

.dxeListBox_Moderno td.dxeIM {
    padding: 12px 6px 8px 8px;
}

.dxeListBox_Moderno td.dxeLTM {
    padding: 0px !important;
}

.dxeListBox_Moderno .dxeHLC {
    border-right: 1px solid #d1d1d1;
}

td.dxeListBoxItem_Moderno.dxeHLC {
    padding: 0px !important;
}

    #systemButtons > div, #systemButtons > span { /* forcing DevEx controls to float left*/
        float: right;
        //max-width: 120px;
    }

    #divParam, #divParamPerformance {
        max-width: @bodyWidth;
        width: 100vw;
        height: 45px;
        margin: 0px auto;
        background: @panelBackgroundColor;
        font-family: @companyFont;
        font-size: small;
        border: 1px solid @panelBorderColor;
    }

    #divParam > div {
        float: left;
        //padding-top:5px;
        display: inline;
    }

    #divParam > div.paramLabel {
        margin: 0px;
        padding-left: 4px;
        padding-right: 2px;
        padding-top: 12px;
    }

    #divParamPerformance > div.paramLabel {
        margin: 0px;
        padding-top: 7px;
        padding-left: 3px;
        padding-right: 2px;
    }

    #divParamPerformance > div, #divParamPerformance > label, #divParamPerformance > img {
        display: inline;
        float: left;
    }

    #divAccountPerf, #divClientPerf, #divParamPerformance > img {
        padding-top: 4px;
    }

    #divRefreshPerf {
        float: right;
        margin-top: 5px;
    }

    #divFromToPerf {
        float: right;
        margin-top: 3px;
        margin-right: 2px;
        padding: 2px;
        padding-right: 0px;
        border: 1px solid @panelInnerBorderColor;
    }

    #divFromToPerf > div, #divFromToPerf > label {
        display: inline;
        float: right;
    }

    #divFromToPerf .paramLabel {
        display: inline;
        padding-top: 3px;
    }

    #divAccountPerfLabel, #divAccountPerf, #divToDatePerf, #divRefreshPerf {
        display: inline;
        padding-right: 3px;
        float: right;
    }
    /*============================= 
  ***** Header.ascx ******
============================= */
    #companyHeader {
        max-width: @bodyWidth;
        width: 100vw;
        height: 100%;
        margin: 0px Auto;
        background-repeat: no-repeat;
    }

    #wrapper {
        min-height: 240px;
        max-width: @bodyWidth;
        height: auto;
        width: 100vw;
        margin: 0px auto;
    }

    #divBody {
        background: @bodyBackground;
        height: auto;
        width: 100vw;
        max-width: @bodyWidth;
        margin: 0px Auto;
        text-align: left;
    }
    /*=================================*/
    /*Side Menu*/
    /*=================================*/
    #divSideMenu {
        width: 25px;
        height: 25px;
        visibility: hidden; // ******* Should be hidden to start with
        cursor: pointer;
    }

    #divSideMenu > img {
        height: 25px;
        width: 25px;
    }

    #divSideMenuItems {
        width: 100px;
        height: 150px;
        cursor: pointer;
    }

    #divSideMenuItems > div {
        float: left;
    }

    #divSideMenuItems > div > div {
        float: left;
        padding-left: 2px;
    }

    .sideMenuItem {
        border: 1px solid white;
        margin: 1px auto;
        height: 25px;
        width: 25px;
    }

    #divFooter {
        height: auto;
        max-width: @bodyWidth;
        width: 100vw;
        margin: 0px auto;
    }

    #footerContent {
        text-align: left;
        font-family: @companyFont;
        font-size: small;
        height: 20px;
        padding-left: 2px;
        color: black;
        max-width: @bodyWidth;
        width: 100vw;
        background: @panelBackgroundColor;
    }

    #ulFooter li {
        list-style: none;
        float: left;
        position: relative;
        height: 17px !important;
        padding: 0px 5px;
    }

    #ulFooter li a {
        font-family: @companyFont;
        font-size: 11px;
        text-decoration: none;
        color: #0026ff;
        height: 17px !important;
    }

    #divOverviewContainer {
        //min-height: 768px;
        height: auto;
    }

    .col-1, .col-3, .col-5 {
        margin: 0px;
        padding-left: 8px;
        padding-right: 2px;
        padding-top: 13px;
    }

    #divMenuMobile {
        width: 0%;
        visibility: hidden;
    }
    //Media queries for various devices
    /* phones, 600px and down */
    @media screen and (min-width: 360px) and (max-width: 750px) {
        #myLeft,
        #myRight {
            float: left;
            width: 100vw - 0.6vw;
            margin-top: 5px;
            margin-left: 1px;
        }

        #divSideMenu {
            width: 0px;
            height: 0px;
            visibility: hidden;
        }

        #divSideMenu > img {
            height: 0px;
            width: 0px;
        }

        #divParam {
            height: 125px;
        }

        #divMenuMobile {
            width: 55%;
            visibility: visible;
        }

        #systemMenu {
            width: 0%;
            visibility: hidden;
        }

        .col-1, .col-3, .col-5 {
            margin: 0px;
            padding-left: 4px;
        }

        .col-1 {
            padding-right: 16px;
        }

        .col-5 {
            padding-right: 12px;
        }

        .col-2, .col-4, .col-6 {
            width: 83vw;
            padding-top: 5px;
        }

        #trCompatability, #trWhatsNew, #divHeader {
            width: 0px;
            height: 0px;
            visibility: hidden;
            border-bottom: none;
        }
    }
    /* Medium devices (landscape and portrait tablets, 768px and up) */
    @media only screen and (min-width: 768px) and (max-width : 1024px) {
        #myLeft,
        #myRight {
            float: left;
            width: 100vw - 0.6vw;
            margin-top: 5px;
            margin-left: 1px;
        }

        #divSideMenu {
            width: 0px;
            height: 0px;
            visibility: hidden;
        }

        #divSideMenu > img {
            height: 0px;
            width: 0px;
        }

        .col-2 {
            width: 35vw;
            padding-top: 5px;
        }

        .col-4 {
            width: 25vw;
            padding-top: 5px;
        }

        .col-6 {
            min-width: 120px;
            width: 15vw;
            padding-top: 5px;
        }
    }
    /* Larger devices (laptops/desktops/tablets 1080px and up) */
    @media only screen and (min-width: 1080px) and (max-width : 1280px) {
        #myLeft {
            width: calc(100vw/2-0.4vw);
            margin-top: 5px;
            margin-right: 4px;
            float: left;
        }

        #myRight {
            width: calc(100vw/2);
            /*min-height: 400px;*/
            margin-top: 5px;
            float: right;
        }

        .col-2 {
            width: 20vw;
            padding-top: 5px;
        }

        .col-4 {
            width: 15vw;
            padding-top: 5px;
        }

        .col-6 {
            min-width: 120px;
            width: 10vw;
            padding-top: 5px;
        }
    }
    /* Extra large devices (large laptops and desktops, 1280px and up) */
    @media only screen and (min-width: 1280px) {
        #myLeft {
            width: 635px;
            margin-top: 5px;
            margin-right: 8px;
            float: left;
        }

        #myRight {
            width: 635px;
            /*min-height: 400px;*/
            margin-top: 5px;
            float: right;
        }

        .col-2 {
            width: 20vw;
            padding-top: 5px;
        }

        .col-4 {
            width: 15vw;
            padding-top: 5px;
        }

        .col-6 {
            min-width: 120px;
            width: 10vw;
            padding-top: 5px;
        }
    }