/*
    Created By: Mark Greep
    Created On: 22/Oct/2021

    Relates to view(s):
    Shared/_Layout.cshtml

    Group prefix - Should also be listed in site.css to avoid conflict:
    -sh

    *****************************************************
    sh- Shared Layout (_Layout.cshtml)
    *****************************************************
*/
.sh-body {
    /*Added as when items are in drag, and the item goes into the border of the BODY then scrollbars appear*/
    overflow: hidden;
}
.sh-body .sh-stagingdb-msg {
    position: absolute;
    left: 69px;
    top: 0px;
    z-index: 500;
    background-color: #87ff7c;
    border: 1px solid #279220;
    padding: 2px;
    width: 340px;
}
    .sh-body .sh-stagingdb-msg span {
        font-size: 10px;
    }

/****** Start styling Next Approver column in Kendo grid *****/

.sh-approver-cell-container {
    display: block;
    font-size: 12px;
    margin: 0px 0px 0px 10px;
}

.sh-column-next-approver-missing {
    white-space: normal;
    font-size: 14px;
    font-style: italic;
}

.sh-level-mode-wrapper {
    display: flex;
    margin: 5px 0 0 0;
    line-height: 18px;
}

.sh-approver-level {
    font-weight: 600;
    margin: 0px 8px 0px 0px
}

.sh-approvers-container {
    font-size: 13px;    
    margin: 0px 0px 1px 20px;
    padding: 0;
}

.sh-approver-container {
    display: flex;
}

.sh-approver {
    margin: 0px 0px 0px 2px;
    line-height: 26px;
}

.sh-person-icon {
    transform: scale(.8);
}

/***** End styling form Next Approver column input Kendo grid *****/
.sh-maincontent-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background-color: rgb(222, 225, 229);
    /*
        DO NOT SET THIS TO AUTO. We want it as 100% (of the initial view height) and
        not to adjust afterwards. Setting to auto, removes it's scrolling as the whole
        Div is resized
    */
    -webkit-box-flex: 1 1 100%; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1 1 100%; /* OLD - Firefox 19- */
    -webkit-flex: 1 1 100%; /* Safari 6.1+ */
    -ms-flex: 1 1 100%; /* IE 10 */
    flex: 1 1 100%;
    overflow-y: hidden;
    /*This takes up the entire viewport - so makes sense that it is the root parent for all absolute positioning
    position: relative;*/
}

    .sh-maincontent-container .sh-maincontent-leftmenu-container {
        width: 70px;
        min-width: 70px;
        background-color: #3c566d;
    }



.sh-maincontent-rightcontent {
    width: 100%;
    /*The kendo grids appear to resize incorrectly without this max-width and overflow.*/
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

.sh-maincontent-container .sh-maincontent-scrollable-body {
    width:100%;
    /*formally .ly-body-content*/
    -webkit-box-flex: 1 1 100%; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1 1 100%; /* OLD - Firefox 19- */
    -webkit-flex: 1 1 100%; /* Safari 6.1+ */
    -ms-flex: 1 1 100%; /* IE 10 */
    flex: 1 1 100%;
    /*md-content has a backcolor of white - we want to inherit it instead*/
    background-color: transparent;

    /*hide any overflow - scrollbar appears briefly when sliding in sidenavs from right. This fixes it
    overflow: hidden; -- WARNING: BREAKS SCROLLING ON MOBILE DEVICES. DO NOT USE
    */
}

.sh-maincontent-container .sh-maincontent-topnav-container {
    background-color: yellow;
    min-height: 64px;
    height: 64px;
}

.sh-maincontent-floating-inprogress {
    /*The global progressbar when a controller is performing an operation - floated over the page, as every is shows it makes the page jump up a little*/
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.sh-maincontent-floating-totop-button {
    top: auto;
    right: 32px;
    bottom: 24px;
    left: auto;

    /*This is the pink button that pops up when scrolled*/
    position: fixed !important;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    z-index: 104 !important; /*Keep it below the IMshared.showToast (=105)*/
}

    .sh-maincontent-floating-totop-button.scrolling {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

/*This is the class that every cshtml content page starts with*/
.ly-page-container {
    padding-right: 0px;
    padding-left: 10px;
    min-height: unset;
    box-sizing: border-box;
    /*
        We make ALL of these layouts into a vertical flex, which means the page naturally fills
        it's container. This is an alternative to going through every view and adding the 'flex'
        directive.
    */
    display: flex;
    -webkit-box-flex: 1 1 auto; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1 1 auto; /* OLD - Firefox 19- */
    -webkit-flex: 1 1 auto; /* Safari 6.1+ */
    -ms-flex: 1 1 auto; /* IE 10 */
    flex: 1 1 auto;


    
}



.sh-maincontent-leftmenu-container .md-button {
    margin: 0;
    height: 48px;
    padding: 0;
    min-width: 100%;
    width: 100%;
    
}

.hm-overflow-icon-container {
    /*
        This will move any overflowing buttons to another column - however due to
        overflow, this column is hidden.
        It's an elegant way of handling icons that overflow, while always showing
        the account/logout shortcuts
    */
    flex-flow: column wrap;
    overflow-y: hidden;
    overflow-x: hidden;
}


    .sh-maincontent-leftmenu-container .md-button.sh-maincontent-leftmanu-nav {
        background-color: #344758;
        width: 70px;
    }
    .sh-maincontent-leftmenu-container .md-button.sh-maincontent-leftmanu-nav md-icon {
        font-size: 24px;
        height: 24px;
        width: 28px;
        color: whitesmoke;
    }
    .sh-maincontent-leftmenu-container .md-button.sh-maincontent-leftmanu-nav:hover md-icon {
        color: orangered;
    }




.sh-maincontent-leftmenu-menubutton-container {
    height: 80px;
    min-height: 80px;
}
    .sh-maincontent-leftmenu-menubutton-container .md-button {
        width: 48px;
        max-width: 48px;
        
    }



.sh-maincontent-leftmenu-sidenav {
    z-index: 100;
}

.sh-maincontent-leftmenu-sidenav.md-sidenav-left {
    background-color: white;
}
    .sh-maincontent-leftmenu-sidenav.md-sidenav-left .sh-sidenav-content {
        background-color: #3c566d;
    }
    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-list {
        width: 100%;
    }


.sh-sidenav-toolbar {
    height: 48px;
    min-height: 48px;
}

    .sh-sidenav-toolbar .md-toolbar-tools {
        height: inherit;
        font-size: 18px;
        cursor: default;
    }

.sh-sidenav-toolbar h1 {
    font-size: 24px;
    color: #fe6015;
}
.sh-sidenav-toolbar .sh-company-logo {
    margin: 0 20px 0 0;
    
    height: 40px;
}
.sh-sidenav-profile-container {
    padding: 10px;
    background-color: white;
}
.sh-sidenav-profile-container .sh-sidenav-profile-left img {
    width: 120px;
}
    .sh-sidenav-profile-container .sh-sidenav-profile-right {
        margin: 0 0 0 20px;
        
    }
    .sh-sidenav-profile-container .sh-sidenav-profile-right .sh-sidenav-profile-name {
        font-size: 22px;
        margin: 0 0 5px 0;
    }

.sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item {
    background-color: #2d3e4e;
    height: 48px;
    min-height: 48px;
}
    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item.sh-childmenu {
        background-color: #465f78;
    }

    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item:before {
        height: 48px;
        min-height: 48px;
    }

    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item .md-list-item-inner {
        height: 48px;
        min-height: 48px;
    }
    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item.md-2-line .md-button {
        padding: 0 0 0 16px;
        min-height: 48px;
    }
        .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item.md-2-line .md-button:before {
            min-height: 48px;
        }

    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item.md-2-line.sh-childmenu .md-button {
        padding: 0 0 0 32px;
    }

    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item.md-2-line .md-list-item-text h3 {
        font-size: 14px;
    }

    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item md-icon {
        color: white;
    }
    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item .md-list-item-text h3 {
        color: white;
    }
    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item md-divider {
        background-color: #55616c;
    }
    .sh-maincontent-leftmenu-sidenav.md-sidenav-left md-content md-list md-list-item:hover md-icon {
        color: orangered;
    }


.sh-sidenav-navigationtoolbar {
    height: 32px;
    min-height: 32px;
}
    .sh-sidenav-navigationtoolbar .md-toolbar-tools {
        height: inherit;
        font-size: 12px;
        background-color: #243442;
        color: white;
        cursor: default;
        border-top: 1px solid #5d2800;
    }

.sh-maincontent-topnav {
    /*Hidden by default - Shown on mobiles*/
    display: none;
    background-color: #344758;
}
    .sh-maincontent-topnav img {
        margin: 0 20px 0 0;
        height: 50px
    }


.sh-sidenav-content .sh-footer-container {
    background-color: #3c566d;
    border-top: 1px solid #344758;
    padding: 8px;
    width: 100%;
    min-height: 28px;
}
.sh-footer-container a {
    font-size: 12px;
    color: darkorange;
    margin: 0 0 0 10px;
}
    .sh-footer-container span {
        font-size: 12px;
        margin: 0 0 0 10px;
        color: white;
    }




/* RESPONSIVE LAYOUT TEMPLATE - Copy this when adding media queries so we always stick to fixed widths */
@media (min-width: 0px) and (max-width: 320px) {
    /* layout-xs = 0 - 320px - iPhone 5 */

    .sh-maincontent-topnav {
        display: flex;
    }
    .sh-maincontent-leftmenu-container {
        display: none;
    }
    .sh-sidenav-profile-container .sh-sidenav-profile-left img {
        width: 50px;
    }
    .sh-sidenav-profile-tools-container {
        display: none;
    }
    .sh-sidenav-profile-container .sh-sidenav-profile-right .sh-sidenav-profile-name {
        font-size: 18px;
        margin: 0 0 2px 0;
    }
    .sh-sidenav-profile-container .sh-sidenav-profile-right .sh-sidenav-profile-title {
        font-size: 12px;
    }
    .sh-body .sh-stagingdb-msg {
        position: fixed;
        left: 0;
        width: 100%;
    }
}

@media (min-width: 321px) and (max-width: 599px) {
    /* layout-xs = 321 - 599px - Most Phones */

    .sh-maincontent-topnav {
        display: flex;
    }
    .sh-maincontent-leftmenu-container {
        display: none;
    }
    .sh-sidenav-profile-container .sh-sidenav-profile-left img {
        width: 50px;
    }
    .sh-sidenav-profile-tools-container {
        display: none;
    }
    .sh-sidenav-profile-container .sh-sidenav-profile-right .sh-sidenav-profile-name {
        font-size: 18px;
        margin: 0 0 2px 0;
    }
    .sh-sidenav-profile-container .sh-sidenav-profile-right .sh-sidenav-profile-title {
        font-size: 12px;
    }


    .sh-body .sh-stagingdb-msg {
        position: fixed;
        left: 0;
        width: 100%;
    }

}

@media (min-width: 600px) and (max-width: 964px) {
    /* layout-sm = 600 - 959px - iPad Landscape */

    .sh-maincontent-topnav {
        display: flex;
    }

    .sh-maincontent-leftmenu-container {
        display: none;
    }

    .sh-sidenav-profile-container .sh-sidenav-profile-left img {
        width: 50px;
    }

    .sh-sidenav-profile-tools-container {
        display: none;
    }

    .sh-sidenav-profile-container .sh-sidenav-profile-right .sh-sidenav-profile-name {
        font-size: 18px;
        margin: 0 0 2px 0;
    }

    .sh-sidenav-profile-container .sh-sidenav-profile-right .sh-sidenav-profile-title {
        font-size: 12px;
    }
}

@media (min-width: 965px) and (max-width: 1279px) {
    /* layout-?? = 1280 - 1440px - small resolutions */
}

@media (min-width: 1280px) and (max-width: 1440px) {
    /* layout-md = 960 - 1279px - iPad Portrait */
}