/* ---------------------------------------- Z-INDEX Uses ----------------------------------------
    - ui-tooltip = 10,005

    - Message Panel Bar = 10,002
    - Please Wait = 10,002
    - pnlConfirm = 10,002
    - pnlWaitText = 10,002

    - Item Specification Picker Container = 10,001
    - Journal Glossary = 10,001
    - Search Dialogue Box = 10,001
    - upload Dialogue Box (All) = 10,001

    - Avatar Details = 10,000
    - divCommentDetails = 10,000
    - pnlWait = 10,000

    - Chat Window = 9,999

    - Close Chat Window = 9,998
    
    - Side Panel Pinned = 1,011
    
    - Side Panel Unpinned = 1,010

    - Popup Info = 1,001

    - pnlMenu = 1,000
    - Suggested Panel = 1,000

    - Top Menu = 500

    - Glyph Selected = 150
    
    - CC = 49
    - Text Companies Account Contacts = 10
    - Complis Buttons - 5
    - rSlides_nav = 3
    - Stay Visible = 2
    - Options Box Button = 2
    - Hidden Confirm Button = -1
    - pageDiv = 1
    - Comment Box Avatar Left/Right = 1
*/

/* Start of system default CSS */
@media screen AND (max-width: 449px){
    #spnLoggedInAsName {
        display: none;
    }

    #lnkLoggedInAsAvatar{
        display: inline-block;
        transform: translate(10%, 10%);
    }
}

@media screen AND (min-width: 450px){
    #spnLoggedInAsName{
        display: inline-block;
    }

    #lnkLoggedInAsAvatar{
        display: inline-block;
    }
}

.estWizCatDdl {
    width: 100%;
    text-align: right;
}

#ctl00_tdSidePanel {
    display: block;
    width: auto;
    padding-right: 5px;
}

@media only print {
    #ctl00_tdSidePanel,
    .tblHeader,
    .TopMenu,
    .tblFooter,
    table[id*="_ucTabs_"],
    .TabTable,
    div[id$=pnlTabsDdl],
    .PanelMainContentHeader table tbody tr td table:nth-child(2) {
        display: none;
    }
}

#ctl00_tdSidePanel .PanelBorder, .PanelBorderOptionsBox {
    width: 200px;
}

.SidePanel td {
    max-width: 195px;
}

.SidePanel select, .SidePanel input, .SidePanel textarea {
    max-width: 100%;
}

#ctl00_tdContent {
    width: 100%;
}

input::-ms-clear {
    display: none;
}
/* fix for IE10 */
.ui-helper-hidden-accessible {
    display: none;
}
/*fix for tooltips appearing at bottom of screen*/

body {
    margin: 0px;
    background-color: White;
    font-family: Arial;
    font-size: 8pt;
    overflow-y: scroll;
    background-repeat: repeat-x;
}

a {
    color: #505050;
}

body, .PanelMainContent {
    color: #4c4c4c;
}

H2 {
    font-size: 10pt;
}

TABLE {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    font-family: Arial;
    font-size: 8pt;
    text-align: left;
    margin-top: 0px;
}

TH {
    border: none;
    vertical-align: bottom;
}

th[valign="top"] {
    vertical-align: top;
}

TH.Centre {
    border: none;
    text-align: center;
    vertical-align: bottom;
}

TR {
    border-style: none;
}

TD {
    vertical-align: top;
    border-style: none;
    max-width: 50ch;
    max-width: 100em;
}

INPUT, TEXTAREA, SELECT {
    padding: 0px 1px 0px 1px;
    font-family: Arial;
    font-size: 8pt;
    border-style: inset;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

[readonly="readonly"], [disabled="disabled"], .Disabled {
    padding: 0 0 0 0;
    border: 1px solid silver;
    color: #666;
}


.ComplisIcons.Disabled, [disabled=disabled].ComplisIcons {
    opacity: 0.5;
}

table [disabled="disabled"] {
    border: none;
}

INPUT[type="checkbox"], INPUT[type="radio"] {
    padding-left: 0px;
    margin-right: 2px;
    padding-right: 0px;
    border-style: none;
}

span[disabled="disabled"] {
    border: none;
}

INPUT[type="file"] {
    border-style: none;
    margin: 3px;
}

INPUT[type="image"].Button, .Button, a.Button, img.Button {
    border-style: none;
    padding: 0px;
    margin: 0px;
    height: 16px;
    cursor: pointer;
    width: 16px;
}

INPUT[type="image"].ImageLoading {
    min-width: 20px;
    min-height: 20px;
    max-width: 200px;
    height: auto;
    width: auto;
    content: url("../Images/ImageLoading.gif"); /*may not be working*/
}

#ctl00_pnlMainHeader .Button, #ctl00_pnlMainHeader img {
    height: 24px;
    width: 24px;
}

#ctl00_pnlMainHeader {
    height: auto !important;
}

img {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    margin-right: 0px;
}

/* -------------------------- */
/* -------- Buttons -------- */
/* ------------------------ */
/* Standard HTML Input Type=Button */
.StandardButton, .StandardButtonUp, .StandardButtonDown, .StandardButtonLeft, .StandardButtonRight, .StandardButtonAdd {
    color: #FFFFFF;
    background-color: #666666;
    background-repeat: no-repeat;
    min-width: 150px;
    min-height: 30px;
    height: max-content;
    width: max-content;
    max-width: 80%;
    border: none;
    white-space: normal;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    margin-top: 1px;
    margin-bottom: 1px;
    cursor: pointer;
}

    .StandardButton:hover, .StandardButtonUp:hover, .StandardButtonDown:hover, .StandardButtonLeft:hover, .StandardButtonRight:hover, .StandardButtonAdd:hover {
        background-color: #555555;
        color: #FFFFFF;
    }

.HiddenConfirmButton {
    display: none;
    z-index: -1;
    position: absolute;
}
/* Homepage style square buttons */
.LargeButtonContainer {
    margin: auto;
    text-align: center;
}

.LargeButton, .LargeButton:hover {
    background-color: transparent;
    background-repeat: no-repeat;
}

.LargeButtonDescription {
    margin: 5px 0 5px 0;
    width: 90%;
    padding: 0 5% 0 5%;
}

#ctl00_cph_pnlBroker, #ctl00_cph_pnlCustomer, #ctl00_cph_pnlSupplier {
    text-align: center;
    min-height: 700px;
}

.LargeButtonDiv > a {
    color: #505050;
}

.LargeButtonDiv {
    float: left;
    margin: 10px 1% 10px 1% !important;
    padding: 0 !important;
    height: 170px;
    background-color: #EEEEEE;
    vertical-align: middle;
    color: #505050;
    border: solid 1px #FFFFFF00;
}

    .LargeButtonDiv:hover {
        background-color: #DDDDDD;
    }

@media only screen and (max-width: 500px) {
    .tblFooter {
        display: none;
    }

    .LargeButtonContainer {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flow;
    }

        .LargeButtonContainer .LargeButton {
            display: none;
        }

        .LargeButtonContainer .LargeButtonDiv {
            height: auto !important;
            background-color: transparent;
            box-shadow: none;
        }

        .LargeButtonContainer .LargeButtonTitle {
            font-size: 20pt !important;
        }

    .LargeButtonDiv a {
        font-size: 20pt !important;
        margin-bottom: 10px;
        width: 96%;
    }
}

@media only screen and (max-width: 500px) {
    .LargeButtonDiv {
        width: 99%;
    }
}

@media only screen and (min-width: 501px) {
    .LargeButtonDiv {
        width: 47%;
    }
}

@media only screen and (min-width: 801px) {
    .LargeButtonDiv {
        width: 30%;
    }
}

@media only screen and (min-width: 1001px) {
    .LargeButtonDiv {
        width: 22%;
    }
}

@media only screen and (min-width: 1201px) {
    .LargeButtonDiv {
        width: 17%;
    }
}

@media only screen and (max-width: 500px) {
    .LargeButtonDiv {
        width: 99%;
    }
}

/*@media only screen and (min-width: 721px) and (max-width: 802px) {
    .LargeButtonContainer {
        width: 100%;
    }
}

@media only screen and (min-width: 1002px) and (max-width: 1201px) {
    .LargeButtonContainer {
        width: 100%;
    }
}

@media only screen and (min-width: 1202px) {
    .LargeButtonContainer {
        width: 100%;
    }
}*/

/*only 1 button button*/
span.LargeButtonDiv:nth-child(1):nth-last-child(1) {
    width: 98%;
}
/*only 2 button buttons*/
span.LargeButtonDiv:nth-child(1):nth-last-child(2),
span.LargeButtonDiv:nth-child(2):nth-last-child(1) {
    width: 48%;
}
/*only 3 button buttons*/
span.LargeButtonDiv:nth-child(1):nth-last-child(3),
span.LargeButtonDiv:nth-child(2):nth-last-child(2),
span.LargeButtonDiv:nth-child(3):nth-last-child(1) {
    width: 31%;
}
/*only 4 button buttons*/
span.LargeButtonDiv:nth-child(1):nth-last-child(4),
span.LargeButtonDiv:nth-child(2):nth-last-child(3),
span.LargeButtonDiv:nth-child(3):nth-last-child(2),
span.LargeButtonDiv:nth-child(4):nth-last-child(1) {
    width: 48%;
}


.MediumButtonContainer {
    width: 100%;
}

.MediumButtonDiv {
    float: left;
    margin: 20px;
    padding-top: 10px;
    height: 100px;
    background-color: #eee;
    vertical-align: middle;
}

@media only screen and (min-width: 480px) {
    .MediumButtonDiv {
        width: 100px;
    }
}

@media only screen and (max-width: 480px) {
    .MediumButtonDiv {
        width: 90%;
    }
}

.MediumButtonDiv:hover {
    background-color: #ddd;
}

.POConsoleDetailDiv {
    float: left;
    margin: 20px;
    min-width: 28%;
}


.LargeButtonTitle, .LargeButtonTitle:hover, .LargeButtonTitle:visited {
    background-color: #666666;
    color: #FFFFFF;
    text-decoration: none;
}

.LargeButtonTitle {
    font-size: 12pt;
}

/* -------------------------------- */
/* ------- End of Buttons -------- */
/* ------------------------------ */
.InputArea {
    font-family: Arial;
    border-style: inset;
    font-size: 8pt;
}

.center, .Center, th.center, th.Center {
    text-align: center;
}

a, hyperlink {
    text-decoration: underline;
    cursor: hand;
}

    A:visited {
        color: #505050;
        text-decoration: underline;
    }

    A:active {
        color: #505050;
        text-decoration: underline;
    }

    A:hover {
        color: #505050;
        text-decoration: underline;
        color: Black;
    }

.Header, .Footer {
    background-color: #CCCCCC;
    border: none;
    color: #000000;
}

.HeaderRight, .FooterRight {
    background-color: #CCCCCC;
    color: #000000;
    border: none;
    text-align: right;
}

.Row {
    background-image: linear-gradient(to bottom, #E1E1E144, #E1E1E144); /* Uses background image so that highlightedRow class can work at the same time */
}

.Alt:not(.HighlightNewTicketComment) {
    background-image: linear-gradient(to bottom, #FFFFFF44, #FFFFFF44); /* Uses background image so that highlightedRow class can work at the same time */
}

.Row:hover, .Alt:hover {
    background-image: linear-gradient(to bottom, #dddddd44, #dddddd44);
}

.BreakRow {
    border-top-color: #4c4c4c;
    border-top-style: dashed;
    border-top-width: thin;
}

.HiddenAlt {
    background-color: transparent;
}

    .HiddenAlt:hover {
        background-color: transparent;
    }

.HiddenRow:hover {
    background-color: transparent;
}

.SearchPanel {
    background-color: #EEEEEE;
    text-align: center;
    width: 100%;
    border: solid 1px #CCCCCC;
}

div.SearchPanel {
    display: inline-flex;
    justify-content: space-between;
}

.Highlighted, .PanelHeader span.ComplisIcons.Highlighted::before, .PanelHeaderOptionsBox span.ComplisIcons.Highlighted::before {
    /*color: Red !important;*/
    color: #ff0000 !important;
    font-weight: bold;
}

.SemiHighlighted, .PanelHeader span.ComplisIcons.SemiHighlighted::before, .PanelHeaderOptionsBox span.ComplisIcons.SemiHighlighted::before {
    /*color: #FF8000 !important;*/
    color: #FF8000 !important;
    font-weight: bold;
}

.Success, .PanelHeader span.ComplisIcons.Success::before, .PanelHeaderOptionsBox span.ComplisIcons.Success::before{
    color: #00BF30 !important;
    font-weight: bold;
}

div.Highlighted .ComplisIcons::before {
    /*color: Red !important;*/
    color: #ff0000 !important;
}

.Left {
    text-align: left;
}

INPUT[type="text"].Left {
    text-align: left;
}

.Right {
    text-align: right;
}


INPUT[type="text"].Right {
    text-align: right;
}

.Bottom {
    vertical-align: bottom;
}

a.Tree {
    padding-left: 0px;
}

div {
    font-family: Arial;
    font-size: 8pt;
}

/* Tabs */
.TabTable {
    height: 20px;
    border-width: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    width: fit-content;
    width: -moz-fit-content;
}

.TabSelected {
    border: 1px solid black;
    border-bottom-style: none;
    background-color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    margin: 1px 0px 0px 0px;
}

    .TabSelected a {
        color: #000000;
    }

.TabUnselected {
    border: 1px solid black;
    background-color: #CCCCCC;
    padding-left: 10px;
    padding-right: 10px;
    margin: 1px 0px 0px 0px;
}

    .TabUnselected a {
        color: #000000;
    }

.TabLink {
    text-decoration: none;
}

.TabDropdown {
    width: 100%;
    display: none;
}

@media only screen and (max-width: 800px) {
    .TabTable {
        display: none;
    }

    div[id$="pnlTabsDdl"] {
        display: block;
    }
}

@media only screen and (min-width: 799px) {
    div[id$="pnlTabsDdl"] {
        display: none;
    }

    .TabTable {
        display: block;
    }
}

/* End Tabs */
.Positional {
    padding: 0px;
    border: 0px;
    margin: 0px;
    outline: 0px;
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0px;
}

.Outline {
    border: thin outset silver !important;
}

.HighlightedRow {
    background-color: #FF800033 !important;
}

.SemiHighlightedRow {
    background-color: #FFFF0033 !important;
}

.SuccessRow{
    background-color: #00BF3033 !important;
}

.HighlightNewTicketComment {
    background-color: rgba(255,255,0,0.2);
}

.PagerStyle td {
    background-color: #CCCCCC;
    border: none;
    font-size: 1em;
    padding-right: 10px;
    text-decoration: none;
}

.PagerStyle a {
    text-decoration: none;
}


.PagerStyle span {
    font-weight: bolder;
    text-decoration: underline;
}

/* Digital Asset Management Browser */
.DamGrid {
    margin: 0px;
    padding: 0px;
}

.DamGridS {
    margin: 0px;
    padding: 0px;
}

.DamGridL {
    margin: 0px;
    padding: 0px;
}

.DamItem {
    margin-right: 10%;
    margin-bottom: 10%;
    text-align: center;
    width: 90%;
    border-style: solid;
    border-width: thin;
    border-color: #CCCCCC;
    background-color: #FAFAFA;
    vertical-align: top;
    height: 180px;
}

.DamItemInner {
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 10%;
    text-align: center;
    width: 90%;
    border-style: none;
    background-color: none;
    vertical-align: top;
}

div.DamFolder.DamItemInnerS {
    margin-right: 0%;
    margin-left: 0%;
    margin-bottom: 10%;
    text-align: center;
    border-style: none;
    background-color: none;
    vertical-align: top;
}

.DamItemInnerL {
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 10%;
    text-align: center;
    width: 90%;
    border-style: none;
    background-color: none;
    vertical-align: top;
    height: 100%;
}

.DamItemImageCell {
    text-align: center;
    vertical-align: top;
    padding: 10px;
    cursor: pointer;
}

.DamItemImageCellS {
    text-align: center;
    vertical-align: top;
    padding: 10px;
}

.DamItemImageCellL {
    text-align: center;
    vertical-align: top;
    padding: 10px;
}

.DamItemText {
    text-align: center;
    vertical-align: bottom;
}

.DamFolder {
    margin-right: 10%;
    margin-bottom: 10%;
    text-align: center;
    width: 90%;
    vertical-align: middle;
}

.DamFolderS {
    margin-right: 10%;
    margin-bottom: 10%;
    text-align: center;
    width: 90%;
    vertical-align: middle;
}

.DamFolderL {
    margin-right: 10%;
    margin-bottom: 10%;
    text-align: center;
    width: 90%;
    vertical-align: middle;
}

.DamFolderImageCell {
    text-align: center;
    vertical-align: top;
    margin: 10px;
}

.DamFolderImageCellS {
    text-align: center;
    vertical-align: top;
    margin: 10px;
}

.DamFolderImageCellL {
    text-align: center;
    vertical-align: top;
    margin: 10px;
}

div.DamFolderImageCell {
    height: 250px;
    margin: 10px;
}

div.DamFolderImageCellS {
    height: 200px;
    text-align: left;
    width: 130px;
    margin: 10px;
}

.DamCheckboxDiv {
    display: inline-block;
    text-align: left;
    width: 20%;
}

.DamButtonsDiv {
    display: inline-block;
    text-align: right;
    width: 80%;
    color: #505050;
}

div.DamFolderImageCellL {
    height: 400px;
}

.DamFolderText {
    text-align: center;
    vertical-align: top;
}

.DamFolderTextS {
    text-align: center;
    vertical-align: top;
}

.DamFolderTextL {
    text-align: center;
    vertical-align: top;
}

@media only screen and (min-width: 1000px) {
    .divDamDetailsImage {
        float: left;
        width: 50%;
        text-align: center;
    }

    .divDamDetailsSummary {
        float: left;
        width: 50%;
        text-align: center;
    }

    .divDamDetailsTabs {
        width: 100%;
    }
}

@media only screen and (max-width: 999px) {
    .divDamDetailsImage {
        float: none;
        width: 100%;
        text-align: center;
    }

    .divDamDetailsSummary {
        float: none;
        width: 100%;
        text-align: center;
    }

    .divDamDetailsTabs {
        width: 100%;
    }
}

.divDamDetailsImage img {
    border-width: 1px;
    border-style: Solid;
    padding: 2pt;
}

.divDamDetailsImage iframe {
    zoom: 0.5;
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    webkit-transform: scale(0.5);
}

.spanDamAssociated {
    padding-top: 25px;
    display: block;
}

.DamOuterDiv {
    float: left;
    cursor: pointer;
}

.DamMoreDiv, .TicketsCommentsMoreDiv {
    display: inline;
    float: left;
    width: 98%;
    font-weight: bold;
    position: relative;
}

.DamMoreText:hover {
    background-color: #CCCCCC;
}

.DamMoreText {
    display: inline-block;
    float: none;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    width: 100%;
    vertical-align: middle;
    background-color: #EEEEEE;
    font-size: 2em;
}

#divAdvancedSearch {
    width: 100%;
    display: none;
}

.AssetFolderTreeSelected {
    font-weight: bolder;
}

/* End of Digital Asset Management Browser */

.LeftFloat {
    float: left;
}

.RightFloat {
    float: right;
}

.PaddTableCell {
    padding-left: 10px;
    padding-right: 10px;
}

.PreviewImageItem, .PreviewImageCategory {
    border: none;
    display: block;
    height: auto;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.PreviewImageTemplate, .PreviewImage {
    display: block;
    border: 1px solid black !important;
    height: auto;
    width: auto;
}

.ShoppingGrid {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .ShoppingGrid tr td {
        text-align: center;
        padding: 10px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

.ShoppingBrowseItemCode {
    display: none;
}

@media only screen and (min-width: 995px) {
    .tblHeader {
        width: 90%;
    }
}

@media only screen and (max-width: 995px) {
    .tblHeader {
        display: none;
    }
}

.tblFooter, .tblContent, #pnlMenu {
    width: 90%;
}

.tblHeader, .tblFooter, .tblContent, #pnlMenu {
    margin-left: auto;
    margin-right: auto;
}

pageBody {
    border-style: none;
    padding: 0px;
    margin: 0px;
}

/*for menu*/
#pnlMenu {
    background-color: #EEEEEE;
    color: #000000;
    z-index: 1000;
    height: 25px;
}

    #pnlMenu a:hover {
        color: #000000;
        background: #CCCCCC;
        text-decoration: none;
    }

    #pnlMenu a, #pnlMenu h2 {
        font: normal 11px/16px arial;
        margin: 0;
        color: #000000;
        text-decoration: none;
        height: 20px;
        float: left;
    }

    #pnlMenu h2 {
        background: #EEEEEE;
        color: #000000;
    }

    #pnlMenu a {
        background: transparent;
        float: none;
    }

    #pnlMenu h2 {
        padding: 3px 5px 2px 5px;
    }

        #pnlMenu a:not(#ulMenu), #pnlMenu h2:not(#ulMenu) {
            display: block;
        }

    #pnlMenu ul li h2 a, #pnlMenu ul li h2 a:visited, #pnlMenu ul li h2 a:hover {
        display: block;
        position: relative;
    }

@media only screen and (min-width: 799px) {
    #pnlMenu ul#ulMenuMobile {
        display: none;
    }

    #pnlMenu ul#ulHelp {
        display: block;
    }

    #pnlMenu ul#ulHelpMobile {
        display: none;
    }

    #pnlMenu ul#ulLogOut {
        display: block;
    }

    #pnlMenu ul#ulLogOutMobile {
        display: none;
    }

    #pnlMenu ul#ulHomeMobile {
        display: none;
    }

    #pnlMenu ul#ulHome {
        display: block;
    }
}

@media only screen and (max-width: 1000px) {
    .LoggedInAs {
        display: none;
    }
}

@media only screen and (max-width: 799px) {
    #pnlMenu {
        width: 100%;
        padding: 0;
    }

        #pnlMenu h2 {
            padding: 0 0 0 0;
        }

        #pnlMenu ul {
            display: none;
        }

            #pnlMenu ul#ulMenuMobile, #pnlMenu ul#ulHelpMobile, #pnlMenu ul#ulLogOutMobile, #pnlMenu ul#ulHomeMobile {
                display: block;
                width: 25%;
                padding: 10px 0 10px 0;
                margin-inline-end: 0px;
                margin-right: 0px;
                text-align: center;
            }

                #pnlMenu ul#ulMenuMobile li h2, #pnlMenu ul#ulHelpMobile li h2, #pnlMenu ul#ulLogOutMobile li h2, #pnlMenu ul#ulHomeMobile li h2 {
                    width: 100%;
                }
}

#pnlMenu h2:hover {
    background: #CCCCCC;
    color: #000000;
}

.TopMenu ul {
    list-style: none;
    margin: 0px 10px 0px 0px;
    padding: 0px 0px 0px 0px;
    float: left;
}

.TopMenu li {
    position: relative;
}

    .TopMenu li li {
        width: 15em;
        padding: 5px 10px 0px 5px;
    }

.TopMenu ul ul {
    top: 100%;
    left: 0;
    z-index: 500;
    display: none;
    background: #EEEEEE;
    color: #000000;
    position: absolute;
    top: 25px;
    float: none;
}

.TopMenu li li:hover {
    background: #CCCCCC;
}

.LoggedInAs {
    color: #000000;
    padding: 0px 6px 0px 0px;
}

.menuitemopen::before {
    content: "< ";
}

.othermenuitemopen {
    display: none;
}
/*end menu*/
.PanelHeader, .PanelHeaderOptionsBox {
    background-color: #666666;
    width: 100%;
    height: 20px;
    vertical-align: middle;
}

    .PanelHeader table tr td, .PanelHeaderOptionsBox table tr td {
        padding: 0;
        width: 100%;
    }

A.PanelHeader, A.PanelHeaderOptionsBox {
    color: White;
    width: 250px;
    text-decoration: none;
    padding: 4px;
}

.PanelBorder, .PanelBorderOptionsBox {
    border-style: solid;
    border-color: #666666;
    border-width: medium;
    height: auto;
}

.PanelHeaderText, .PanelHeaderTextOptionsBox {
    color: #FFFFFF;
    width: 100%;
    text-decoration: none;
    text-align: left;
    font-weight: bold;
}

.glyphicons.PanelHeaderText, .glyphicons.PanelHeaderTextOptionsBox {
    top: 0px;
}

.PanelHeaderContent, .PanelHeaderContentOptionsBox {
    border-style: solid;
    border-color: #666666;
    background-color: #666666;
    /*width: 750px;*/
    border-width: medium;
    padding: 4px 8px 4px 0px;
}

.PanelMainContentHeaderText, .PanelMainContentHeader .ComplisIcons {
    color: #000;
    text-decoration: none;
}

.PanelMainContentHeader {
    border-style: solid;
    border-color: #EEEEEE;
    background-color: #EEEEEE;
    border-width: medium;
    padding: 4px 4px 0px 4px;
    font-weight: bold;
    color: #000;
}

.PanelMainContent {
    border-style: none;
    width: 100%;
    background-color: #FFFFFFCC; /*rgba(255,255,255,0.8);*/
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D0FFFFFF', EndColorStr='#D0FFFFFF');
    min-height: 750px;
}

.SidePanel {
    padding: 4px;
    background-color: rgba(255,255,255,0.8);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D0FFFFFF', EndColorStr='#D0FFFFFF');
}

.SideBar {
    width: 200px;
    vertical-align: top;
}

a.Trademark, a.Trademark:visited {
    text-decoration: none;
    color: #000;
    font-size: 7pt;
    background-color: rgba(255, 255, 255, 0.50);
    padding: 2px;
}

    a.Trademark:hover {
        text-decoration: underline;
    }

#pnlWait, #pnlBlock, .ItemsSpecificationPickerBackground {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    filter: alpha(opacity=70);
    opacity: 0.70;
    -moz-opacity: 0.70;
    cursor: wait;
    background-color: white;
    text-align: center;
    vertical-align: middle;
}

.ItemsSpecificationPickerContainer {
    z-index: 10001;
    position: absolute;
    left: 25vw;
    width: 50vw;
    filter: alpha(opacity = 100);
    opacity: 1;
    -moz-opacity: 1;
}

@media only screen and (max-width: 799px), only screen and (max-device-width: 799px) {
    .ItemsSpecificationPickerBackground {
        position: fixed;
        z-index: 10000;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        filter: alpha(opacity=70);
        opacity: 0.70;
        -moz-opacity: 0.70;
        cursor: wait;
        background-color: white;
        text-align: center;
        vertical-align: middle;
    }

    .ItemsSpecificationPickerContainer {
        z-index: 10001;
        position: absolute;
        left: 0vw;
        width: 100vw;
        filter: alpha(opacity = 100);
        opacity: 1;
        -moz-opacity: 1;
    }
}

#pnlWaitText {
    position: fixed;
    z-index: 100002;
    top: 25%;
    left: 25vw;
    width: 50vw;
    margin: 0px 0 0 0px;
    display: block;
    background-color: #ddd;
    text-align: center;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    color: #555;
    font-size: 16pt;
    vertical-align: middle;
    max-width: 100% !important;
}

.WaitTextMessage {
    padding: 25px 0 30px 0;
}

#pnlConfirm {
    position: fixed;
    z-index: 10002;
    top: 20%;
    left: 50%;
    width: 480px;
    margin: 0px 0 0 -200px;
    display: block;
    background-color: #ddd;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    color: #555;
    font-size: 16pt;
    vertical-align: middle;
}

@media only screen and (max-width: 6500px) {
    .UploadDialogBox {
        width: 100% !important;
    }
}

@media only screen and (min-width: 651px) {
    .UploadDialogBox {
        width: 90% !important;
        left: 30%;
        margin-left: -25%;
    }
}

.UploadDialogBox {
    position: fixed;
    z-index: 10001;
    top: 0%;
    left: 30%;
    height: 80%;
    width: 90%;
    overflow-x: no-display;
    margin-left: -25%;
    margin-top: 5%;
    display: block;
    background-color: #fff;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    vertical-align: middle;
    display: none;
}

@media only screen and (max-width: 6500px) {
    .UploadDialogBoxDAM {
        width: 100% !important;
    }
}

@media only screen and (min-width: 651px) {
    .UploadDialogBoxDAM {
        width: 50% !important;
        left: 50%;
        margin-left: -25%;
    }
}

.UploadDialogBoxDAM {
    position: fixed;
    z-index: 10001;
    top: 0%;
    left: 50%;
    height: 80%;
    overflow-x: no-display;
    margin-left: -25%;
    margin-top: 5%;
    display: block;
    background-color: #fff;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    vertical-align: middle;
}

.UploadDialogBoxMax {
    position: fixed;
    z-index: 10001;
    top: 2px;
    left: 2px;
    width: 99% !important;
    height: 99%;
    overflow-x: no-display;
    display: block;
    background-color: #fff;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    vertical-align: middle;
    display: none;
}

.UploadDialogBoxLong {
    position: fixed;
    z-index: 10001;
    top: 0px;
    left: 50%;
    width: 50% !important;
    height: 2000px;
    overflow-x: no-display;
    margin-left: -25%;
    margin-top: 5%;
    display: block;
    background-color: #fff;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    vertical-align: middle;
    display: none;
}

.UploadDialogBoxSmall {
    position: fixed;
    z-index: 10001;
    top: 0%;
    left: 50%;
    width: 50% !important;
    height: 50%;
    overflow-x: no-display;
    margin-left: -25%;
    margin-top: 5%;
    display: block;
    background-color: #fff;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    vertical-align: middle;
    display: none;
}

.SearchDialogBox {
    position: fixed;
    z-index: 10001;
    top: 0px;
    left: 50%;
    width: 90% !important;
    height: 80%;
    overflow-x: no-display;
    margin-left: -45%;
    margin-top: 5%;
    display: block;
    background-color: #fff;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    vertical-align: middle;
    display: none;
}

.SearchDialog {
    padding: 10px;
    height: 90%;
    width: 98%;
    overflow-x: auto;
}

#lblWait {
}

/* Ratings */
.RatingStarPanel {
}

.RatingStar {
    height: 16px;
    width: 16px;
    background-size: 100%;
}

.RatingStarWaiting {
    background-image: url(../images/RatingRed.png);
}

.RatingStarFilled {
    background-image: url(../images/RatingYellow.png);
}

.RatingStarEmpty {
    background-image: url(../images/RatingSilver.png);
}

.compliseditcontentarea {
    border-width: thin;
    border-style: solid;
    border-color: #ccc;
}

.compliseditcontentarealink {
    background-image: url(../images/EditInformation.png);
    display: block;
    text-indent: -9999px;
    width: 24px;
    height: 24px;
}

.complisaddcontentarealink {
    background-image: url(../images/add.png);
    background-size: contain;
    display: block;
    text-indent: -9999px;
    width: 24px;
    height: 24px;
}

.complisblankcontentarea {
    background-color: #CCC;
    text-align: center;
    vertical-align: middle;
    width: 600px;
    height: 50px;
}

.ElectronicDelivery {
    background-image: url(../images/Download.png);
    background-size: contain;
    width: 12px;
    height: 12px;
}

.SearchIcon {
    background-image: url(../images/Search.png);
    background-size: contain;
    width: 16px;
    height: 24px;
}

.SmallIcon {
    height: 12px;
}

.LargeIcon {
    height: 18px;
}

.XLargeIcon {
    height: 24px;
}

.ConfirmTitle {
    text-align: center;
    margin: 0 auto;
    font-size: 12pt;
}

.ConfirmMessage {
    font-size: 10pt;
    text-align: center;
    margin: 35px 10px 35px 10px;
}

.ConfirmButtons {
    width: 100%;
    text-align: center;
    margin: 5px 0 5px 0;
}

.ConfirmImage {
    margin: 5px 0 0 10px;
}

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

        .rslides li:first-child {
            position: relative;
            display: block;
            float: left;
        }

    .rslides img {
        display: block;
        height: auto;
        float: left;
        width: 100%;
        border: 0;
    }

.rslides_nav {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-position: right top;
    opacity: 0.7;
    z-index: 3;
    overflow: hidden;
    text-decoration: none;
    bottom: 0px;
}

    .rslides_nav:active {
        opacity: 1.0;
    }

    .rslides_nav.prev {
        //background: transparent url("../images/back.png") no-repeat left top;
    }

        .rslides_nav.prev::before {
            font-family: "ComplisIcons" !important;
            font-size: 12pt;
            font-weight: 500;
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 2px;
            padding-right: 2px;
            padding-top: 0px;
            padding-bottom: 0px;
            margin: 0px;
            cursor: pointer;
            content: "\E173";
        }

    .rslides_nav.next::after {
        font-family: "ComplisIcons" !important;
        font-size: 12pt;
        font-weight: 500;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 2px;
        padding-right: 2px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
        cursor: pointer;
        content: "\E177";
    }

    .rslides_nav.next {
        //background: transparent url("../images/forward.png") no-repeat scroll center top;
        float: right;
        padding-right: 20px;
    }

.rslides_container {
    position: relative;
    float: left;
    width: 100%;
}

.rslides_tabs {
    padding: 0;
    list-style: none;
    text-align: center;
    width: 100%;
}

    .rslides_tabs li {
        display: inline;
        float: none;
        margin-right: 1px;
    }

    .rslides_tabs a {
        width: auto;
        padding: 10px 10px;
        height: auto;
        background: transparent;
        display: inline;
        position: relative;
        top: -30px;
    }

    .rslides_tabs li:first-child {
        margin-left: 0;
    }

    .rslides_tabs .rslides_here a {
        font-weight: bold;
    }

.UserRegistrationText {
    width: 250px;
}

.UserRegistrationTextLong {
    width: 400px;
}

.ui-tooltip {
    width: 150px !important;
    z-index: 10005;
    background-color: white;
    padding: 10px 10px;
    line-height: 14px;
}

.CC {
    font-size: 9px;
    text-align: right;
    position: relative;
    background-color: white;
    pointer-events: none;
    width: 0px;
    height: 0px;
    opacity: 0;
    float: left;
    z-index: 49;
}

.RewardNo {
    color: red;
}

.RewardYes {
    color: green;
    font-weight: bold;
    font-size: large;
}

.RewardRedeem, .RewardRedeem:link, .RewardRedeem:visited {
    color: green;
    font-weight: bold;
    font-size: large;
    text-decoration: none;
}

.catBreadcrumb {
    text-align: left;
    width: 100%;
}

.div300x200 {
    width: 300px;
    height: 200px;
    float: left;
    margin: 10px;
    padding: 10px;
    border: solid thin black;
    overflow: auto;
}

.div600 {
    width: 640px;
    float: left;
    margin: 10px;
    padding: 10px;
    border: solid thin black;
    overflow: auto;
}

.AccordionHeaderClosed, .AccordionHeaderClosedOptionsBox {
    background-image: url(../Images/expand.jpg);
    background-position: right 5px center;
    background-repeat: no-repeat;
}

.AccordionHeaderOpen, .AccordionHeaderOpenOptionsBox {
    background-image: url(../Images/collapse.jpg);
    background-position: right 5px center;
    background-repeat: no-repeat;
}

.tblBreadcrumbs, .trBreadcrumbs, .tdBreadcrumbs {
}

.pnlBreadcrumbs {
    color: #4c4c4c;
}

.calWDlbl {
}

.calWDCell {
    height: 18%;
}

.calNWDlbl {
    color: grey;
}

.calNWDCell {
    background-color: #eee;
    height: 18%;
}

.calWMlbl {
    display: none;
}

.calWMCell {
    background-color: #ddd;
    height: 18%;
}

.calTBL {
    border-spacing: 0px;
}

    .calTBL td {
        width: 14.2857%;
        border: thin solid silver;
        padding: 4px;
        margin: 0px;
        outline-offset: 0px;
    }

div.calDN {
    text-align: left;
    width: 100%;
    display: block;
}

div.calDT {
    text-align: left;
    width: 100%;
    display: block;
}

div.calBtn {
    text-align: right;
    width: 100%;
    display: block;
}

div.clear {
    clear: both;
}

.Star:hover {
    cursor: pointer;
}

.Star {
    border-spacing: 0px;
}

.RatingStarDiv {
    white-space: nowrap;
}

#ctl00_pnlTipsBorder {
    background-color: White;
    visibility: hidden;
    width: 90%;
}

.DamTreeview ul,
.DamTreeview li {
    padding: 0;
    margin: 0;
    list-style: none;
}

.DamTreeview input {
    position: absolute;
    opacity: 0;
}

.DamTreeview {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

    .DamTreeview a {
        text-decoration: none;
    }

        .DamTreeview a:hover {
            text-decoration: underline;
        }

    .DamTreeview input + label + ul {
        margin: 0 0 0 16px;
    }

    .DamTreeview input ~ ul {
        display: none;
    }

    .DamTreeview label,
    .DamTreeview label::before {
        cursor: pointer;
    }

    .DamTreeview input:disabled + label {
        cursor: default;
    }

    .DamTreeview input:checked:not(:disabled) ~ ul {
        display: block;
    }

    .DamTreeview label::before {
        background: url("../images/icons.png") no-repeat;
    }

    .DamTreeview label, .DamTreeview a, .DamTreeview label::before {
        display: inline-flex;
        line-height: 16px;
        vertical-align: middle;
    }

        .DamTreeview label::before {
            content: "";
            width: 16px;
            margin: 0 0 0 0;
            vertical-align: middle;
            background-position: 0 -32px;
        }

    .DamTreeview input:checked + label::before {
        background-position: 0 -16px;
    }

/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .DamTreeview {
        -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
    }

    @-webkit-keyframes webkit-adjacent-element-selector-bugfix {
        from {
            padding: 0;
        }

        to {
            padding: 0;
        }
    }
}

#ComplisDropBox {
    height: 200px;
    background-color: #eee;
    overflow: auto;
}

#ComplisDropBox, .ComplisDropBoxOverallStatus {
    width: 98%;
    padding: 5px;
    border: 1px solid #eee;
}

.ComplisDropBoxOverallStatus {
    display: none;
}

    .ComplisDropBoxOverallStatus td {
        width: 16.666%;
    }

div#silverlightuploader {
    height: auto;
}

div.upload {
    border-top: thin solid silver;
    padding-bottom: 2px;
    padding-top: 2px;
    height: 25px;
}

    div.upload .uploadPercent, div.upload .uploadPercentRight {
        white-space: nowrap;
        display: inline;
        float: left;
    }

    div.upload .uploadPercent {
        background-color: #aaa;
    }

    div.upload .uploadPercentLeft {
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        border-right: none;
    }

    div.upload .uploadPercentRight {
        -moz-border-radius-topright: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-top-right-radius: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-left: none;
        margin-right: 5px;
    }

    div.upload .uploadFilename {
        display: block;
        width: 100%;
    }

    div.upload .uploadPercent.file {
        background-color: #fff !important;
    }

    div.upload .uploadPercent.bad {
        background-color: #f00 !important;
    }

    div.upload .uploadPercent.good {
        background-color: #0f0 !important;
    }

    div.upload .existed {
        opacity: 0.5;
        color: red;
        font-weight: 500;
    }

.uploadPercent {
    height: 15px;
}

div.uploadError {
    background-color: red !important;
}

.AdvDamSearchCalendar button {
    margin: 5px 3px 0 0 !important;
    position: relative !important;
    float: right !important;
}

.QuestionsBy, .QuestionsFor {
    margin-top: 10px;
}

.NavBtns {
    cursor: pointer;
}

.PageDiv {
    text-align: center;
    width: 100%;
    z-index: 1;
}

.margin10 {
    margin-left: 10%;
    margin-right: 10%;
}

/******** Tickets Comments Start ********/
.CommentsList {
    min-width: 400px;
    display: inline-grid;
}

.CommentHolder {
    width: 100%;
    height: 100%;
    display: inline-block;
}

.CommentBoxDetails {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    position: relative;
}

.CommentBox {
    padding-bottom: 10px;
    border-radius: 10px;
}

.CommentBoxAvatarLeft {
    float: left;
    display: inline;
    position: relative;
    margin-right: -12px;
    z-index: 1;
}

.CommentBoxAvatarRight {
    float: right;
    display: inline;
    position: relative;
    margin-left: -12px;
    z-index: 1;
}

.CommentBoxInternalNoteLeft {
    margin-top: 5px;
    margin-bottom: 5px;
    float: left;
    display: block;
    position: relative;
    border-radius: 10px;
    padding-bottom: 10px;
    overflow-wrap: break-word;
    min-width: 100px;
    max-width: 500px;
    border: 2px;
    border-style: solid;
    color: #ffffff;
    border-color: #ffffff;
    background-color: #666666;
}

.CommentBoxInternalNoteRight {
    margin-top: 5px;
    margin-bottom: 5px;
    float: right;
    display: block;
    position: relative;
    border-radius: 10px;
    padding-bottom: 10px;
    overflow-wrap: break-word;
    min-width: 100px;
    max-width: 500px;
    border: 2px;
    border-style: solid;
    color: #ffffff;
    border-color: #ffffff;
    background-color: #666666;
}

.CommentBoxLeft {
    margin-top: 5px;
    margin-bottom: 5px;
    float: left;
    display: block;
    position: relative;
    border-radius: 10px;
    padding-bottom: 10px;
    overflow-wrap: break-word;
    min-width: 100px;
    max-width: 500px;
    border: 2px;
    border-style: solid;
    color: #000000;
    border-color: #000000;
    background-color: #ffffff;
}

.CommentBoxRight {
    margin-top: 5px;
    margin-bottom: 5px;
    float: right;
    display: block;
    position: relative;
    border-radius: 10px;
    padding-bottom: 10px;
    overflow-wrap: break-word;
    min-width: 100px;
    max-width: 500px;
    border: 2px;
    border-style: solid;
    color: #000000;
    border-color: #000000;
    background-color: #cccccc;
}

.CommentBoxReportedLeft {
    margin-top: 5px;
    margin-bottom: 5px;
    float: left;
    display: block;
    position: relative;
    border-radius: 10px;
    padding-bottom: 10px;
    overflow-wrap: break-word;
    min-width: 100px;
    max-width: 500px;
    border: 2px;
    border-style: solid;
    color: #000000;
    border-color: #ff0000;
    background-color: #ffffff;
}

.CommentBoxReportedRight {
    margin-top: 5px;
    margin-bottom: 5px;
    float: right;
    display: block;
    position: relative;
    border-radius: 10px;
    padding-bottom: 10px;
    overflow-wrap: break-word;
    min-width: 100px;
    max-width: 500px;
    border: 2px;
    border-style: solid;
    color: #000000;
    border-color: #ff0000;
    background-color: #cccccc;
}

.CommentAttachment {
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
}

.imgCommentAttachment {
    margin-right: 10px;
}
/******** Tickets Comments End ********/

.rowHighlight tr:not(.Header):hover {
    /*background-color: #E1E1E1;*/
    background-color: #E1E1E1;
}


#dropboxDiv {
    cursor: default;
}

.fd-file {
    display: block;
    cursor: pointer;
}

#divClear {
    text-align: right;
    vertical-align: bottom;
}

#dboxMessage {
    margin: 20px auto 0 auto;
    vertical-align: middle;
    width: auto;
    padding: 10px;
    text-align: center;
    font-size: x-large;
    font-weight: 900;
}

.MetaWidthLeft {
    width: 40%;
}

.MetaWidthRight {
    width: 60%;
}

.DamInfoLeft {
    width: 200px;
}

.DamInfoRight {
    width: auto;
}

.DamMetadataTable {
    border-collapse: separate;
    border-spacing: 10px;
}

.ItemsCustomDiv, .MetadataDiv, .EstCustomDiv, .SOCustomDiv, .ProjCustomDiv {
    max-height: 200px;
    overflow-y: auto;
    padding: 2px 10px 2px 5px;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    margin-top: 3px;
    min-height: 0px;
}

/*Start Product Images*/
.divAltImgs {
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
    height: 100%;
}

.ThumbnailContainer {
    text-align: center;
    vertical-align: middle;
    margin: 0 auto;
    margin-bottom: 20px;
}

.AltTinyThumbs {
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    max-width: 250px;
}

    .AltTinyThumbs img {
        border: 2px solid silver !important;
        margin: 2px;
        vertical-align: middle;
    }

img.selectedThumb {
    border-color: red !important;
}

.divMainThumbnail {
    vertical-align: middle;
    white-space: nowrap;
    margin: 0 auto;
}

.spanMainThumbnail {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.MainThumbnail {
    vertical-align: middle;
}

.AltImgScroll {
    overflow-y: hidden;
    overflow-x: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    display: inline-block;
}

    .AltImgScroll img {
        margin: 5px;
        vertical-align: middle;
    }

/*End Product Images*/


body::-webkit-scrollbar-thumb {
    background-color: blue;
    outline: 1px solid slategrey;
}

.SearchDialog a:hover {
    cursor: pointer;
}

.poster {
    background-color: Black;
    overflow-wrap: normal;
    overflow: hidden;
    padding: 0px;
    cursor: none;
}

#canvas {
    width: 100vw;
    height: 100vh;
}

    #canvas.preload {
        display: none;
    }

.LineDeleted input, .LineDeleted td, .LineDeleted select {
    text-decoration: line-through;
}

.NoWrap {
    white-space: nowrap;
}

.RecentActivity {
    width: 90%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.hdnValidator {
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
    width: 0px;
    clear: left;
    float: right;
    cursor: default;
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.opacity50 {
    opacity: 0.5;
}

.ComplisApprovalButtons {
    vertical-align: middle;
    text-align: center;
    height: 50px;
    width: 33%;
}

.ComplisApprovalButtonsText {
    vertical-align: top;
    text-align: center;
}

.ComplisApprovalTable {
    width: 100%;
    margin: 0 auto;
}

.WrapText {
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
}

/* Assets Approve START */
.divCommentDetails {
    border: 2px outset #FFFF00;
    display: none;
    position: absolute;
    top: 100px;
    left: 250px;
    width: 300px;
    min-height: 200px;
    max-height: 400px;
    overflow: auto;
    background-color: #FFFF00;
    z-index: 10000;
    text-align: left;
}

#divCommentDetails .divCommentsBox {
    padding: 10px;
}

#divCommentDetails .dcdMove {
    width: 100%;
    height: 30px;
    font-size: large;
    cursor: move;
    box-sizing: border-box;
    background-color: paleGoldenrod;
}

    #divCommentDetails .dcdMove .dcdClose {
        min-width: 20px;
        min-height: 20px;
        height: 20px;
        float: right;
        font-size: large;
        cursor: pointer;
        padding: 5px;
        text-align: center;
        vertical-align: middle;
    }
/* Assets Approve END */

.auto-style1 {
    width: 500px;
}

.ImagePreviewBox {
    width: 40%;
    text-align: center;
    vertical-align: middle;
}

.width50pc {
    width: 50%;
}

.width100pc {
    width: 100%;
}

.height100pc {
    height: 100%;
}

.lazy {
    display: none;
}

.lazy-hidden {
    background: url('../Images/ImageLoading.gif') no-repeat 50% 50%;
    min-width: 50px;
    min-height: 50px;
}

.DamGrid td {
    width: 33%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.DamGridS td {
    width: 33%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.DamGridL td {
    width: 33%;
    overflow-x: hidden;
    overflow-y: hidden;
}

.imgareaselect-selection {
    background-color: #d3d3d3;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    display: block;
}

.imgareaselect-outer {
    color: transparent;
    cursor: crosshair;
}

.tdReviewContact {
    width: 200px;
}

    .tdReviewContact span {
        white-space: nowrap;
        text-align: right;
    }

.AlignBottom td {
    vertical-align: bottom;
}

/*  Calendar Textbox Start    */
.CalTextboxDateOnly {
    width: 100px;
}

.CalTextboxDateTime {
    width: 140px;
}

/*  Calendar Textbox End    */

/*  DAM Advance Search Start    */
.AdvSearchTitleColumns {
    width: 100px;
    height: 40px;
}

.AdvSearchTables {
    width: 360px;
    height: 40px;
}

.AdvSearchDataColumns {
    width: 250px;
}

.divAdvSearch {
    display: inline-block;
}
/*  DAM Advance Search End    */

/*   SalesOrdersBrowse Start   */
.PromotionBanner {
    /*Background/Text Colour and Font Colour Changed/Set in Code Behind*/
    width: 100%;
    height: 30px;
    transform: translateY(-70%);
    box-sizing: border-box;
    padding-top: 8px;
}

.PromotionCircle {
    /*Background/Text Colour and Font Colour Changed/Set in Code Behind*/
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin: -5px 10%;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    padding-top: 28px;
}

.CircleText {
    font-size: 0.8rem !important;
}

.BannerText {
    font-size: 1rem !important;
}

.BannerScrollText {
    font-size: 1rem !important;
    -moz-transform: translate(100%);
    -webkit-transform: translate(100%);
    transform: translateX(100%);
    -moz-animation: AnimBannerScrollText 10s linear infinite;
    -webkit-animation: AnimBannerScrollText 10s linear infinite;
    animation: AnimBannerScrollText 10s linear infinite;
}

@-moz-keyframes AnimBannerScrollText {
    from {
        -moz-transform: translateX(100%);
    }

    to {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes AnimBannerScrollText {
    from {
        -webkit-transform: translateX(100%);
    }

    to {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes AnimBannerScrollText {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

.CategoryGeneric {
    max-width: 70%;
    display: inline-block;
    clear: left;
}

.CategoryLevel1 {
}

.CategoryUL {
    margin-bottom: 2px;
    margin-top: 2px;
    padding: 0;
    list-style-type: square;
}

.TreeBnk {
    width: 15px;
    display: inline-block;
    margin-left: -2px;
}

.TreeClsp {
}

.TreeExpd {
}

/*  GRID VIEW  */

.LargeSalesButtonDiv {
    float: left;
    margin: 20px;
    padding-top: 10px;
    height: 200px;
    background-color: #eee;
    vertical-align: middle;
    border-radius: 20px;
}

@media only screen and (min-width: 480px) {
    .LargeSalesButtonDiv {
        min-width: 170px;
    }
}

@media only screen and (max-width: 480px) {
    .LargeSalesButtonDiv {
        width: 90%;
    }
}

.LargeSalesButtonDiv:hover {
    background-color: #ddd;
}

.SOBrowseContainerGRD {
    float: left;
    margin: 20px;
    padding-top: 20px;
    height: 350px;
    background-color: #eee;
    vertical-align: middle;
    width: 300px;
}

@media only screen and (min-width: 480px) {
    .SOBrowseContainerGRD {
        min-width: 200px;
    }
}

@media only screen and (max-width: 480px) {
    .SOBrowseContainerGRD {
        width: 90%;
    }
}

.SOThumbnailGRD {
    float: none;
    min-height: 70px;
    text-align: center;
    vertical-align: middle;
}

.SODivGRD, .SODescriptionGRD {
    float: none;
    max-height: 200px;
    overflow-y: auto;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    margin-top: 3px;
    min-height: 0px;
    margin-bottom: 5px;
}

/*  LIST VIEW  */

.SOBrowseContainerLST {
    float: none;
    display: table;
    width: 100%;
    margin: 0px;
    padding: 0px;
    max-height: 300px;
    vertical-align: middle;
}

@media only screen and (max-width: 480px) {
    .SOBrowseContainerLST {
        width: 90%;
    }
}

.SOThumbnailLST {
    float: left;
    margin: 10px;
    width: 30%;
    min-width: 250px;
}

.SODivLST {
    float: left;
    max-height: 200px;
    overflow-y: auto;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    margin: 10px;
    min-height: 0px;
    width: 13%;
    min-width: 75px;
    padding-top: 5px;
    padding-bottom: 20px;
}

.SODescriptionLST {
    float: left;
    max-height: 200px;
    overflow-y: auto;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    margin: 20px;
    min-height: 0px;
    width: 20%;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 100px;
}

.SOBrowseContainerLST:hover, .SOBrowseContainerGRD:hover {
    background-color: #ddd;
}

.HoverPointer:hover {
    cursor: pointer;
}

.divSobSortBy {
    display: inline;
}

/*  SalesOrdersBrowse End  */

/*  SalesOrdersItems Start */

.soItemSection {
    clear: both;
    padding: 0px;
    margin: 0px;
}

.soItemCol {
    display: block;
    float: left;
    margin: 0;
    margin-right: 20px;
}

    .soItemCol:first-child {
        margin-left: 0;
    }

.SOBrowseStk {
    font-weight: bold;
}

.SOBrowseDesc {
    font-weight: bold;
}

.SOBrowsePrice {
    font-weight: normal;
}

.SOBrowseCode {
    font-weight: bold;
}

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1; /* For IE 6/7 */
}

.soItem_1 {
}

.soItem_2 {
    width: 100%;
}

/*  GO FULL WIDTH AT LESS THAN 600 PIXELS */
@media only screen and (max-width: 600px) {
    .soItemCol {
        margin: 1% 0 1% 0%;
    }
}

@media only screen and (max-width: 600px) {
    .soItem_2, .soItem_1 {
        width: 100%;
    }
}

/*  SalesOrdersItems End */

.TableCenter {
    display: table;
    margin-left: auto;
    margin-right: auto;
}


.dfnDiv {
    padding-left: 5px;
    min-width: 200px;
    max-height: 50px;
    box-sizing: content-box;
    width: 100%;
    text-overflow: ellipsis;
}

.dfnLabel {
    font-style: italic;
    font-size: 0.8em;
    max-height: 20px;
    max-width: 650px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.SearchSubBorder > td {
    border-top: 1px #CCCCCC dashed;
}

.ContentBoxSizing {
    min-width: 200px;
    max-height: 700px;
    box-sizing: content-box;
    width: 100%;
}

.EstClassDiv {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
}

/*  Image Hover Start  */

.Magnifier {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-color: white;
    background-position: 0 0;
    position: absolute;
    left: -9999px;
    cursor: none;
    border: 4px solid #fff;
    pointer-events: none;
}

/*   Image Hover End   */

/* ComplisMessage */
.MessagePanelBar {
    position: fixed;
    top: 0;
    left: 50%;
    margin: auto;
    background-color: transparent;
    z-index: 10002;
    width: 400px;
    margin-left: -200px;
}

/*if backgorund colour changed needs to reflected on .ComplisCountdownPie::before */
.MessagePanelBox {
    width: 400px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(200,200,200,1);
    padding: 5px;
    display: none;
    box-sizing: border-box;
}

@media screen and (max-width: 100%) {
    .MessagePanelBox {
        width: 400px;
    }
}

@media screen and (min-width: 401px) {
    .MessagePanelBox {
        width: 400px;
    }
}

.MessagePanelHeader, .MessagePanelHeaderOptionsBox {
    background-color: rgba(160,160,160,1);
    padding-top: 5px;
    padding-bottom: 5px;
}

.Bold, .MessagePanelHeaderText, .MessagePanelHeaderTextOptionsBox {
    font-weight: bold;
}

.MessagePanel {
    padding: 0px;
}

.msgIcon {
    float: left;
    padding-right: 10px;
    line-height: 60px;
}

    .msgIcon.ComplisIcons::before {
        font-size: 36pt;
    }

    .msgIcon.ComplisIcons-Good {
        color: green;
    }

    .msgIcon.ComplisIcons-Warning {
        color: orange;
    }

    .msgIcon.ComplisIcons-Error {
        color: red;
    }

/* ComplisMessage End */

.GanttBar {
    margin-bottom: 5px;
    margin-top: 5px;
}

/* <-- AssetsDownload */
.tdDownload {
    max-width: 45%;
    min-width: 250px;
    min-height: 145px;
    float: left;
    text-align: center;
    padding: 5px 10px;
}

@media screen and (max-width: 550px) {
    .tdDownload {
        max-width: 90%;
        padding: 5px 5%;
    }
}

.pnlClose {
    width: 100%;
    height: 40px;
    text-align: center;
}

    .pnlClose div {
        padding: 5px 10px;
    }

.pnlClose-prescroll {
    position: fixed;
    text-align: unset;
    top: 0px;
    bottom: unset;
    background-color: white;
    display: unset;
    padding: unset;
}

    .pnlClose-prescroll div {
        float: right;
        min-width: unset;
        padding: 5px 10px;
    }

.pnlClose-bottom {
    margin-top: 30px;
    position: fixed;
    bottom: 0px;
    text-align: center;
    top: unset;
    background-color: unset;
    display: table;
}

    .pnlClose-bottom div {
        float: unset;
        padding: unset;
        min-width: 250px;
    }

.grdAssetsLists, .DownloadList {
    margin: 0 auto;
    text-align: center;
    min-width: 350px;
    max-width: 600px;
}

    .grdAssetsLists th, .grdAssetsLists td, .DownloadList th, .DownloadList td {
        padding: 1px 5px;
        min-width: 75px;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: content-box;
    }

    .grdAssetsLists .RowMiddle {
        vertical-align: middle;
    }

    .grdAssetsLists .Left, .DownloadList .Left {
        text-align: left;
    }

    .grdAssetsLists .Right, .DownloadList .Right {
        text-align: right;
    }

    .grdAssetsLists .Center, .DownloadList .Center {
        text-align: center;
    }

/* AssetsDownload Start */

.ImportTable {
    max-width: 700px;
    min-width: 30px;
}

    .ImportTable div {
        width: 100%;
        height: 100%;
    }

/* Assets Download End */

/*  Address Book Start  */

.AddressBookDiv {
    float: left;
    margin: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 290px;
    background-color: #eee;
    vertical-align: middle;
    border-radius: 20px;
}

@media only screen and (min-width: 480px) {
    .AddressBookDiv {
        width: 200px;
    }
}

@media only screen and (max-width: 480px) {
    .AddressBookDiv {
        width: 90%;
    }
}

.AddressBookDiv:hover {
    background-color: #ddd;
}

.AddressBookDescription {
    margin: 5px 0 5px 0;
    width: 90%;
    padding: 0 5% 0 5%;
}

.AddressBookOuter {
    position: absolute;
}

/*  Address Book End  */

.StandardScrollBox {
    overflow-y: auto;
    display: inline-block;
    max-height: 100px;
    min-width: 200px;
}

/*  Character Restriction Start  */
.CharacterRestrictionOK {
    color: #000000;
}

.CharacterRestrictionOver {
    color: #ff0000;
}
/*  Character Restriction End  */

.DisplayNone {
    display: none;
}

@media only screen and (min-width: 1000px) {
    .ShowIfSmallWidth {
        display: none;
    }
}

.SearchPanelGridViewRadioButtonList {
    margin: auto;
    text-align: left;
}

.ApprovalCommentHighlight {
    opacity: 0.3;
    background-color: yellow;
    border: 1px solid black;
    position: absolute;
}

.JournalGlossary {
    position: fixed;
    z-index: 10001;
    top: 0px;
    left: 60%;
    width: 25% !important;
    height: 70%;
    overflow-x: no-display;
    margin-left: -25%;
    margin-top: 5%;
    display: block;
    background-color: #fff;
    border-top: groove thin black;
    border-bottom: groove thin black;
    border-right: groove thin black;
    border-left: groove thin black;
    vertical-align: middle;
    display: none;
}

.GenericScrollBox, .JournalGlossaryScrollBox {
    overflow-y: auto !important;
    max-height: 90%;
}

.GenericScrollBoxWidth {
    overflow-x: auto;
    max-width: 90%;
}

.ContentAlignTop {
    text-align: center;
    vertical-align: top;
}

.StayVisible {
    -webkit-transition: position 0.05s, top 0.05s, left 0.05s, width 0.05s, opacity 0.05s;
    transition: position 0.05s, top 0.05s, left 0.05s, width 0.05s, opacity 0.05s;
    z-index: 2;
}

input[type=radio] + label {
    padding-right: 10px;
}

.PreviousSurveyResponsesToggle {
    font-size: 10pt;
}

.PreviousSurveyResponses {
    height: 300px;
    float: left;
    margin: 10px;
    padding: 10px;
    border: solid thin black;
    overflow: auto;
}

.PreviousSurveyResponsesHidden {
    display: none;
}

.PreviousSurveyHide {
    background-image: url(../images/collapse.jpg);
    content: url(../images/collapse.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
}

.PreviousSurveyShow {
    background-image: url(../images/expand.jpg);
    content: url(../images/expand.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
}

.SurveyGrid {
    border-collapse: collapse;
}

    .SurveyGrid tr {
        text-align: center;
        vertical-align: central;
    }

    .SurveyGrid td {
        vertical-align: middle;
        padding-right: 10px;
    }

.CheckBoxList, .RadioButtons {
    display: inline-block;
}

    .CheckBoxList label, .RadioButtons label {
        margin-right: 20px;
        display: inline;
        float: left;
    }

    .CheckBoxList input, .RadioButtons input {
    }

.CheckBoxList, .PickRadioButtons {
    display: block;
}

    .CheckBoxList label, .PickRadioButtons label {
        margin-right: 20px;
        display: inline;
    }

    .CheckBoxList input, .PickRadioButtons input {
    }

.EstimatesDistributionContacts, .ProjectEstimatesDistributionContacts {
    float: left;
    display: inline;
    margin: 10px;
}

.RowTopBorderSolid {
    border-top: solid;
}

/*  ucDateTime  */

.ucDateTimeUTC {
    font-size: 0.8em;
    cursor: pointer;
}

.ucDateTimeTextbox {
    width: 90px;
}

/*  ucDateTime  */

.SupplierItemsCategoryCount {
    float: right;
    margin-right: 20pt;
    font-size: 0.8em;
}

.SupplierClassificationGroupCount {
    float: right;
    margin-right: 20pt;
    font-size: 0.8em;
}

.SmallNote {
    font-size: 7pt;
}

/*         ProjecEstimatesQuantitiesOptions.aspx START             */
.ProjEstQtysCellsLeft {
    padding: 5px;
    text-align: left;
    min-width: 100px;
    vertical-align: middle;
}

.ProjEstQtysCellsCenter {
    padding: 5px;
    text-align: center;
    min-width: 100px;
    vertical-align: middle;
}

.CellInvalid {
}

    .CellInvalid:hover {
        background-color: #FA9A9A;
    }

.CellGood {
    background-color: #BFFFD2;
}

    .CellGood:hover {
        background-color: #73FF9D;
    }

.CellBad {
    background-color: #FDDDDD;
}

    .CellBad:hover {
        background-color: #FA9A9A;
    }
/*         ProjecEstimatesQuantitiesOptions.aspx END              */

.OptionsBoxButton {
    background-color: white;
    left: calc(90% - 160px);
    position: absolute;
    width: 160px; /*    Fixed width seems to be the perfect size for a normal button    */
    z-index: 2;
}

.ComplisInfo {
    font-weight: bold;
    font-style: italic;
    vertical-align: super;
    text-decoration: none;
}

.SalesInvoiceInvoiced {
    color: green;
    font-weight: bold;
}

.MakeLabelLookLikeLink {
    cursor: pointer;
    text-decoration: underline;
}

    .MakeLabelLookLikeLink:hover {
        text-decoration: none;
        text-shadow: 1px 1px 1px #555;
    }

h1 {
    color: #000000;
    margin-block-start: 5px;
}

h2 {
    color: #000000;
}

/******** Gantt / Glyph Start ********/
.GlyphInstructions {
    margin-top: 15px;
    margin-bottom: 15px;
}

.GlyphKeyIconPos {
    right: 10px;
}

.GlyphSelected {
    text-shadow: 0 0 10px rgba(255, 255, 0, 1), 0 0 10px rgba(255, 255, 0, 1);
    z-index: 150;
}

.GanttInstructionTitle {
    margin-top: 10px;
    text-align: center;
    vertical-align: middle;
}

.GlyphKeyContainer {
    width: 100%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.GlyphHighlighted {
    color: #ba001f;
}

.GanttHead {
    display: inline-block;
    font-weight: normal;
    width: 11.11%;
    float: left;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #eee;
}

.GanttHeadEnd {
    display: inline-block;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    float: right;
    border-bottom: 1px solid #eee;
    width: 11.11%;
    text-align: right;
}

tr.Gantt, tr.Gantt td {
    height: 21px;
}

.GanttBarContainer {
    vertical-align: middle;
    display: inline-block;
    width: 100%;
    height: 30px;
    position: relative;
}

.GanttBar {
    vertical-align: middle;
    display: inline-block;
    height: 21px;
}

.GanttNow {
    width: 1px;
    border-left: 2px dotted #f00;
    position: relative;
}

.GanttGap {
    float: left;
    width: 11px;
    margin: 0px;
    padding: 0px;
}

.GanttProgBar {
    /*background-image: linear-gradient(#eee, #aaa);*/
    margin: 0px;
    padding: 0px;
}

.GanttEnd {
    width: 11px;
}

.GanttBG {
    background: transparent url(../images/gantt/GanttBG.png) repeat;
}

.GanttRow {
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    border-bottom: 1px solid #eee;
}

.GanttIcon {
    position: absolute;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.GlyphIconPosition {
    position: relative;
    left: 12px;
}

.GlyphInProgress {
    color: #5f5a9c;
}

.GlyphCompleted {
    color: #118c69;
}

.GlyphHighlighted {
    color: #BA001F;
}

.GlyphSemiHighlighted {
    color: #D67F0D;
}

div.glyphicons {
    top: auto;
}

.glyphicons {
    font-family: "Glyphicons Regular" !important
}

/******** Gantt / Glyph End ********/
iframe {
    border: none;
    margin: 0;
    padding: 0;
}

.divW50FlTAc {
    width: 50%;
    float: left;
    text-align: center;
}



/* Sidebar */
#ctl00_tdSidePanel .PanelHeader td:nth-of-type(2) {
    width: 25px;
}

td#ctl00_tdSidePanel > div {
    margin-bottom: 20px;
}

.glyphicons:before {
    padding-top: 8px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding: 0px 0px;
    margin: 0px;
}

.glyphicons {
    font-size: 12pt;
}

/* WIP */
@keyframes WipUnpin {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    75% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    76% {
        position: absolute;
        top: 350px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 350px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelWipUnpinned {
    position: absolute;
    top: 350px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes WipPin {
    0% {
        position: absolute;
        top: 350px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 350px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelWipPinned {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes WipPeek {
    0% {
        position: absolute;
        top: 350px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 350px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes WipUnpeek {
    0% {
        position: absolute;
        top: 350px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 350px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes WipUnpin {
        0% {
            position: absolute;
            top: 350px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 350px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
        /* must match class below */
    }

    .SidePanelWipUnpinned {
        position: absolute;
        top: 350px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
    /* must match keyframe 100% above*/

    @keyframes WipPin {
        0% {
            position: absolute;
            top: 350px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 350px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelWipPinned {
        position: absolute;
        top: 350px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes WipPeek {
        0% {
            position: absolute;
            top: 350px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 350px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes WipUnpeek {
        0% {
            position: absolute;
            top: 350px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 350px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/* RECENT ACTIVITY */
@keyframes RecentUnpin {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    75% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    76% {
        position: absolute;
        top: 400px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 400px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelRecentUnpinned {
    position: absolute;
    top: 400px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes RecentPin {
    0% {
        position: absolute;
        top: 400px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 400px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelRecentPinned {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes RecentPeek {
    0% {
        position: absolute;
        top: 400px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 400px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes RecentUnpeek {
    0% {
        position: absolute;
        top: 400px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 400px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes RecentUnpin {
        0% {
            position: absolute;
            top: 400px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 400px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
        /* must match class below */
    }

    .SidePanelRecentUnpinned {
        position: absolute;
        top: 400px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
    /* must match keyframe 100% above*/

    @keyframes RecentPin {
        0% {
            position: absolute;
            top: 400px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 400px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelRecentPinned {
        position: absolute;
        top: 400px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes RecentPeek {
        0% {
            position: absolute;
            top: 400px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 400px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes RecentUnpeek {
        0% {
            position: absolute;
            top: 400px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 400px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/* PINNED ITEMS*/
@keyframes PinnedUnpin {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    75% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    76% {
        position: absolute;
        top: 450px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 450px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelPinnedUnpinned {
    position: absolute;
    top: 450px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes PinnedPin {
    0% {
        position: absolute;
        top: 450px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 450px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelPinnedPinned {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes PinnedPeek {
    0% {
        position: absolute;
        top: 450px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 450px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes PinnedUnpeek {
    0% {
        position: absolute;
        top: 450px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 450px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes PinnedUnpin {
        0% {
            position: absolute;
            top: 450px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 450px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
        /* must match class below */
    }

    .SidePanelPinnedUnpinned {
        position: absolute;
        top: 450px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
    /* must match keyframe 100% above*/

    @keyframes PinnedPin {
        0% {
            position: absolute;
            top: 450px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 450px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelPinnedPinned {
        position: absolute;
        top: 450px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes PinnedPeek {
        0% {
            position: absolute;
            top: 450px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 450px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes PinnedUnpeek {
        0% {
            position: absolute;
            top: 450px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 450px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/**** Presence 0 SidePanelPin/Unpin START ****/

@keyframes SidePanelGenericUnpin0 {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    25% {
        position: relative;
        top: 0px;
        left: -250px;
        opacity: 0.5;
    }

    26% {
        position: absolute;
        top: 50px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 50px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelGenericUnpinned0 {
    position: absolute;
    top: 50px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPin0 {
    0% {
        position: absolute;
        top: 50px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 50px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelGenericPinned0 {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPeek0 {
    0% {
        position: absolute;
        top: 50px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 50px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes SidePanelGenericUnpeek0 {
    0% {
        position: absolute;
        top: 50px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 50px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes SidePanelGenericUnpin0 {
        0% {
            position: absolute;
            top: 50px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 50px;
            left: -170px;
            opacity: 0.5;
        }
        /* must match class below */
    }

    .SidePanelGenericUnpinned0 {
        position: absolute;
        top: 50px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPin0 {
        0% {
            position: absolute;
            top: 50px;
            left: -170px;
            opacity: 0.5;
        }

        25% {
            position: absolute;
            top: 50px;
            left: -170px;
            opacity: 0.5;
        }

        26% {
            position: absolute;
            top: 50px;
            left: -170px;
            opacity: 0.5;
        }

        100% {
            position: absolute;
            top: 50px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelGenericPinned0 {
        position: absolute;
        top: 50px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPeek0 {
        0% {
            position: absolute;
            top: 50px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 50px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes SidePanelGenericUnpeek0 {
        0% {
            position: absolute;
            top: 50px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 50px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/**** Presence 0 SidePanelPin/Unpin END ****/

/* SidePanelGeneric 1-5 ITEMS*/

/**** 1 START ****/

@keyframes SidePanelGenericUnpin1 {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    25% {
        position: relative;
        top: 0px;
        left: -250px;
        opacity: 0.5;
    }

    26% {
        position: absolute;
        top: 100px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 100px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelGenericUnpinned1 {
    position: absolute;
    top: 100px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPin1 {
    0% {
        position: absolute;
        top: 100px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 100px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelGenericPinned1 {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPeek1 {
    0% {
        position: absolute;
        top: 100px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 100px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes SidePanelGenericUnpeek1 {
    0% {
        position: absolute;
        top: 100px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 100px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes SidePanelGenericUnpin1 {
        0% {
            position: absolute;
            top: 100px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 100px;
            left: -170px;
            opacity: 0.5;
        }
        /* must match class below */
    }

    .SidePanelGenericUnpinned1 {
        position: absolute;
        top: 100px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPin1 {
        0% {
            position: absolute;
            top: 100px;
            left: -170px;
            opacity: 0.5;
        }

        25% {
            position: absolute;
            top: 100px;
            left: -170px;
            opacity: 0.5;
        }

        26% {
            position: absolute;
            top: 100px;
            left: -170px;
            opacity: 0.5;
        }

        100% {
            position: absolute;
            top: 100px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelGenericPinned1 {
        position: absolute;
        top: 100px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPeek1 {
        0% {
            position: absolute;
            top: 100px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 100px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes SidePanelGenericUnpeek1 {
        0% {
            position: absolute;
            top: 100px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 100px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/**** 1 END ****/

/**** 2 START ****/

@keyframes SidePanelGenericUnpin2 {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    25% {
        position: relative;
        top: 0px;
        left: -250px;
        opacity: 0.5;
    }

    26% {
        position: absolute;
        top: 150px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 150px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelGenericUnpinned2 {
    position: absolute;
    top: 150px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPin2 {
    0% {
        position: absolute;
        top: 150px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 150px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelGenericPinned2 {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPeek2 {
    0% {
        position: absolute;
        top: 150px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 150px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes SidePanelGenericUnpeek2 {
    0% {
        position: absolute;
        top: 150px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 150px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes SidePanelGenericUnpin2 {
        0% {
            position: absolute;
            top: 150px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 150px;
            left: -170px;
            opacity: 0.5;
        }
        /* must match class below */
    }

    .SidePanelGenericUnpinned2 {
        position: absolute;
        top: 150px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPin2 {
        0% {
            position: absolute;
            top: 150px;
            left: -170px;
            opacity: 0.5;
        }

        25% {
            position: absolute;
            top: 150px;
            left: -170px;
            opacity: 0.5;
        }

        26% {
            position: absolute;
            top: 150px;
            left: -170px;
            opacity: 0.5;
        }

        100% {
            position: absolute;
            top: 150px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelGenericPinned2 {
        position: absolute;
        top: 150px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPeek2 {
        0% {
            position: absolute;
            top: 150px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 150px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes SidePanelGenericUnpeek2 {
        0% {
            position: absolute;
            top: 150px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 150px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/**** 2 END ****/

/**** 3 START ****/

@keyframes SidePanelGenericUnpin3 {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    25% {
        position: relative;
        top: 0px;
        left: -250px;
        opacity: 0.5;
    }

    26% {
        position: absolute;
        top: 200px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 200px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelGenericUnpinned3 {
    position: absolute;
    top: 200px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPin3 {
    0% {
        position: absolute;
        top: 200px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 200px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelGenericPinned3 {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPeek3 {
    0% {
        position: absolute;
        top: 200px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 200px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes SidePanelGenericUnpeek3 {
    0% {
        position: absolute;
        top: 200px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 200px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes SidePanelGenericUnpin3 {
        0% {
            position: absolute;
            top: 200px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 200px;
            left: -170px;
            opacity: 0.5;
        }
        /* must match class below */
    }

    .SidePanelGenericUnpinned3 {
        position: absolute;
        top: 200px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPin3 {
        0% {
            position: absolute;
            top: 200px;
            left: -170px;
            opacity: 0.5;
        }

        25% {
            position: absolute;
            top: 200px;
            left: -170px;
            opacity: 0.5;
        }

        26% {
            position: absolute;
            top: 200px;
            left: -170px;
            opacity: 0.5;
        }

        100% {
            position: absolute;
            top: 200px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelGenericPinned3 {
        position: absolute;
        top: 200px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPeek3 {
        0% {
            position: absolute;
            top: 200px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 200px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes SidePanelGenericUnpeek3 {
        0% {
            position: absolute;
            top: 200px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 200px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/**** 3 END ****/

/**** 4 START ****/

@keyframes SidePanelGenericUnpin4 {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    25% {
        position: relative;
        top: 0px;
        left: -250px;
        opacity: 0.5;
    }

    26% {
        position: absolute;
        top: 250px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 250px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelGenericUnpinned4 {
    position: absolute;
    top: 250px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPin4 {
    0% {
        position: absolute;
        top: 250px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 250px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelGenericPinned4 {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPeek4 {
    0% {
        position: absolute;
        top: 250px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 250px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes SidePanelGenericUnpeek4 {
    0% {
        position: absolute;
        top: 250px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 250px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes SidePanelGenericUnpin4 {
        0% {
            position: absolute;
            top: 250px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 250px;
            left: -170px;
            opacity: 0.5;
        }
        /* must match class below */
    }

    .SidePanelGenericUnpinned4 {
        position: absolute;
        top: 250px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPin4 {
        0% {
            position: absolute;
            top: 250px;
            left: -170px;
            opacity: 0.5;
        }

        25% {
            position: absolute;
            top: 250px;
            left: -170px;
            opacity: 0.5;
        }

        26% {
            position: absolute;
            top: 250px;
            left: -170px;
            opacity: 0.5;
        }

        100% {
            position: absolute;
            top: 250px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelGenericPinned4 {
        position: absolute;
        top: 250px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPeek4 {
        0% {
            position: absolute;
            top: 250px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 250px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes SidePanelGenericUnpeek4 {
        0% {
            position: absolute;
            top: 250px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 250px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/**** 4 END ****/

/**** 5 START ****/

@keyframes SidePanelGenericUnpin5 {
    0% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }

    25% {
        position: relative;
        top: 0px;
        left: -250px;
        opacity: 0.5;
    }

    26% {
        position: absolute;
        top: 300px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: absolute;
        top: 300px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match class below */
}

.SidePanelGenericUnpinned5 {
    position: absolute;
    top: 300px;
    left: -170px;
    opacity: 0.5;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPin5 {
    0% {
        position: absolute;
        top: 300px;
        left: -170px;
        opacity: 0.5;
    }

    25% {
        position: absolute;
        top: 300px;
        left: -500px;
        opacity: 0.5;
    }

    26% {
        position: relative;
        top: 0px;
        left: -500px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
    }
    /* must match class below */
}

.SidePanelGenericPinned5 {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
}
/* must match keyframe 100% above*/

@keyframes SidePanelGenericPeek5 {
    0% {
        position: absolute;
        top: 300px;
        left: -170px;
        opacity: 1.0;
        z-index: 1010;
    }

    100% {
        position: absolute;
        top: 300px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
}

@keyframes SidePanelGenericUnpeek5 {
    0% {
        position: absolute;
        top: 300px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }

    100% {
        position: absolute;
        top: 300px;
        left: -170px;
        opacity: 0.5;
        z-index: 1010;
    }
}

@media only screen and (max-width: 500px) {

    @keyframes SidePanelGenericUnpin5 {
        0% {
            position: absolute;
            top: 300px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 300px;
            left: -170px;
            opacity: 0.5;
        }
        /* must match class below */
    }

    .SidePanelGenericUnpinned5 {
        position: absolute;
        top: 300px;
        left: -170px;
        opacity: 0.5;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPin5 {
        0% {
            position: absolute;
            top: 300px;
            left: -170px;
            opacity: 0.5;
        }

        25% {
            position: absolute;
            top: 300px;
            left: -170px;
            opacity: 0.5;
        }

        26% {
            position: absolute;
            top: 300px;
            left: -170px;
            opacity: 0.5;
        }

        100% {
            position: absolute;
            top: 300px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
        /* must match class below */
    }

    .SidePanelGenericPinned5 {
        position: absolute;
        top: 300px;
        left: 5px;
        opacity: 1.0;
        z-index: 1011;
    }
    /* must match keyframe 100% above*/

    @keyframes SidePanelGenericPeek5 {
        0% {
            position: absolute;
            top: 300px;
            left: -170px;
            opacity: 1.0;
            z-index: 1010;
        }

        100% {
            position: absolute;
            top: 300px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }
    }

    @keyframes SidePanelGenericUnpeek5 {
        0% {
            position: absolute;
            top: 300px;
            left: 5px;
            opacity: 1.0;
            z-index: 1011;
        }

        100% {
            position: absolute;
            top: 300px;
            left: -170px;
            opacity: 0.5;
            z-index: 1010;
        }
    }
}

/**** 5 END ****/

/* End of Sidebar */

.WIPGrid {
    padding-top: 20px;
}

.WipChartTitles {
    height: 0px;
    padding-top: -50px;
    width: 60%;
    padding-left: 20%;
    padding-right: 20%;
    vertical-align: middle;
    text-align: center;
    position: relative;
    top: 100px;
}

.DivWip {
    float: left;
    width: 250px;
    height: 250px;
    margin: 15px;
}

.WipPin {
    /*position: relative;
    top: -250px;
    left: -10px;*/
    font-size: 10pt;
}

.WipPinDiv {
    position: relative;
    top: -120px;
    left: 120px;
    float: left;
}

.WipPinDivLarge {
    position: relative;
    top: -250px;
    left: 220px;
    float: left;
}

.StatsPin {
    position: relative;
    font-size: 10pt;
}

/* Start of ComplisIcons */
@font-face {
    font-family: 'ComplisIcons';
    src: url('../Fonts/ComplisIcons/ComplisIcons.eot'); /* IE9 Compat Modes */
    src: url('../Fonts/ComplisIcons/ComplisIcons.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../Fonts/ComplisIcons/ComplisIcons.woff') format('woff'), /* Modern Browsers */
    url('../Fonts/ComplisIcons/ComplisIcons.ttf') format('truetype'); /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

.ComplisIcons, .ComplisIcons:visited, .ComplisIcons:hover {
    text-decoration: none;
}

    .ComplisIcons::before {
        font-family: "ComplisIcons" !important;
        font-size: 12pt;
        font-weight: 500;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 2px;
        padding-right: 2px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px;
        cursor: pointer;
    }

.PanelMainContentHeader .ComplisIcons::before {
    padding-left: 5px;
    padding-right: 5px;
}

.LargeButton.ComplisIcons::before {
    font-family: "ComplisIcons" !important;
    font-size: 40pt;
    font-weight: 500;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
}

/* toolbar */
.PanelMainContentHeader .ComplisIcons::before {
    font-size: 18pt;
}
/* side panel */
.SidePanel .ComplisIcons::before {
    font-size: 10pt;
}
/* header panels */
.PanelHeader .ComplisIcons::before, .PanelHeaderOptionsBox .ComplisIcons::before {
    color: #FFFFFF;
    font-weight: 400;
}

.ComplisIcons-ListView::before {
    content: "\E183";
}

.ComplisIcons-Basket::before {
    content: "\E203";
}

.ComplisIcons-Add::before {
    content: "\E191";
}

.ComplisIcons-Stop::before {
    content: "\E192";
}

.ComplisIcons-Alert::before {
    content: "\E334";
}

.ComplisIcons-AlertEmpty::before {
    content: "\EC35";
}

.ComplisIcons-ArrowDown::before {
    content: "\E213";
}

.ComplisIcons-ArrowLeft::before {
    content: "\E211";
}

.ComplisIcons-ArrowRight::before {
    content: "\E212";
}

.ComplisIcons-ArrowUp::before {
    content: "\E214";
}

.ComplisIcons-ArrowCircleDown::before {
    content: "\E220";
}

.ComplisIcons-ArrowCircleLeft::before {
    content: "\E217";
}

.ComplisIcons-ArrowCircleRight::before {
    content: "\E218";
}

.ComplisIcons-ArrowCircleUp::before {
    content: "\E219";
}

.ComplisIcons-AttachFile::before {
    content: "\E063";
}

.ComplisIcons-Calculator::before {
    content: "\E120";
}

.ComplisIcons-Copy::before {
    content: "\E512";
}

.ComplisIcons-Download::before {
    content: "\E365";
}

.ComplisIcons-Edit::before {
    content: "\E151";
}

.ComplisIcons-Email::before {
    content: "\E011";
}

.ComplisIcons-Camera::before {
    content: "\E012";
}

.ComplisIcons-EmailNew::before {
    content: "\E125";
}

.ComplisIcons-Error::before {
    content: "\E533";
}

.ComplisIcons-Delete::before {
    content: "\E533";
}

.ComplisIcons-Pallet::before {
    content: "\E060";
}

.ComplisIcons-Sheet::before {
    content: "\E040";
}

.ComplisIcons-MeetNow::before {
    content: "\E044";
}

.ComplisIcons-Favourites::before {
    content: "\E049";
}

.ComplisIcons-FavouritesSolid::before {
    content: "\E050";
}

.ComplisIcons-Filter::before {
    content: "\E790";
}

.ComplisIcons-FolderAdd::before {
    content: "\E146";
}

.ComplisIcons-FolderDelete::before {
    content: "\E147";
}

.ComplisIcons-FolderEdit::before {
    content: "\E150";
}

.ComplisIcons-Forward::before {
    content: "\E174";
}

.ComplisIcons-Backward::before {
    content: "\EC23";
}

.ComplisIcons-Good::before {
    content: "\E659";
}

.ComplisIcons-Group::before {
    content: "\E159";
}

.ComplisIcons-Journal::before {
    content: "\E072";
}

.ComplisIcons-Links::before {
    content: "\E051";
}

.ComplisIcons-MyDownloads::before {
    content: "\E132";
}

.ComplisIcons-PaymentCard::before {
    content: "\E617";
}

.ComplisIcons-Print::before {
    content: "\E016";
}

.ComplisIcons-Trash::before {
    content: "\E017";
}

.ComplisIcons-Word::before {
    content: "\EC06";
}

.ComplisIcons-Question::before {
    content: "\E195";
}

.ComplisIcons-Refresh::before {
    content: "\E082";
}

.ComplisIcons-Sustainable::before {
    content: "\EC37";
    font-weight: bold;
}

.ComplisIcons-Money::before {
    content: "\E228";
    font-weight: bold;
}

.ComplisIcons-Loop::before {
    content: "\E086";
}

.ComplisIcons-Save::before {
    content: "\E444";
}

.ComplisIcons-Search::before {
    content: "\E028";
}

.ComplisIcons-Clipboard::before {
    content: "\E030";
}

.ComplisIcons-Security::before {
    content: "\E204";
}

.ComplisIcons-SecurityUnlocked::before {
    content: "\E205";
}

.ComplisIcons-Tick::before {
    content: "\E207";
}

.ComplisIcons-Cross::before {
    content: "\EC32";
}

.ComplisIcons-Uncomplete::before {
    content: "\E436";
}

.ComplisIcons-Undo::before {
    content: "\E436";
}

.ComplisIcons-Upload::before {
    content: "\E364";
}

.ComplisIcons-Wizard::before {
    content: "\E010";
}

.ComplisIcons-ListView::before {
    content: "\E158";
}

.ComplisIcons-GridSmall::before {
    content: "\EC26";
}

.ComplisIcons-Magnet::before {
    content: "\EC27";
}

.ComplisIcons-GridMedium::before {
    content: "\E157";
}

.ComplisIcons-GridLarge::before {
    content: "\E156";
}

.ComplisIcons-Sort::before {
    content: "\E405";
}

.ComplisIcons-SortZYX::before {
    content: "\E406";
}

.ComplisIcons-SortDefault::before {
    content: "\E407";
}

.ComplisIcons-SortDescending::before {
    content: "\E408";
}

.ComplisIcons-SortDefaultAlternative::before {
    content: "\E409";
}

.ComplisIcons-SortDescendingAlternative::before {
    content: "\E410";
}

.ComplisIcons-Person::before {
    content: "\E004";
}

.ComplisIcons-Show::before {
    content: "\E052";
}

.ComplisIcons-Hide::before {
    content: "\E053";
}

.ComplisIcons-AlarmClock::before {
    content: "\E054";
}

.ComplisIcons-Blank::before {
    content: "\0020";
}

.ComplisIcons-Book::before {
    content: "\E352";
}

.ComplisIcons-LoopBack::before {
    content: "\E366";
}

.ComplisIcons-NewPage::before {
    content: "\E703";
}

.ComplisIcons-Recycled::before {
    content: "\E700";
}

.ComplisIcons-PrintOptions::before {
    content: "\EC01";
}

.ComplisIcons-Price::before {
    content: "\EC02";
}

.ComplisIcons-FolderMove::before {
    content: "\EC03";
}

.ComplisIcons-BackToSearch::before {
    content: "\EC04";
}

.ComplisIcons-EstimateHistory::before {
    content: "\EC05";
}

.ComplisIcons-Redact::before {
    content: "\EC07";
}

.ComplisIcons-Back::before {
    content: "\EC08";
}

.ComplisIcons-FavouritesAdd::before {
    content: "\EC09";
}

.ComplisIcons-FavouritesRemove::before {
    content: "\EC10";
}

.ComplisIcons-Excel::before {
    content: "\EC11";
}

.ComplisIcons-AddressLink::before {
    content: "\EC12";
}

.ComplisIcons-Keyboard::before {
    content: "\E269";
}

.ComplisIcons-AddressBreak::before {
    content: "\EC13";
}

.ComplisIcons-Reprint::before {
    content: "\EC14";
}

.ComplisIcons-InsertBefore::before {
    content: "\EC15";
}

.ComplisIcons-InsertAfter::before {
    content: "\EC16";
}

.ComplisIcons-Insert::before {
    content: "\EC17";
}

.ComplisIcons-StockMove::before {
    content: "\EC18";
}

.ComplisIcons-PinOut::before {
    content: "\EC19";
}

.ComplisIcons-PinIn::before {
    content: "\EC20";
}

.ComplisIcons-Document::before {
    content: "\E037";
}

.ComplisIcons-DataFirst::before {
    content: "\E172";
}

.ComplisIcons-DataPrevious::before {
    content: "\E173";
}

.ComplisIcons-DataNext::before {
    content: "\E177";
}

.ComplisIcons-DataLast::before {
    content: "\E178";
}

.ComplisIcons-Picture::before {
    content: "\E139";
}

.ComplisIcons-InDesign::before {
    content: "\EC21";
}

.ComplisIcons-PDF::before {
    content: "\EC22";
}

.ComplisIcons-Schedule::before {
    content: "\E055";
}

.ComplisIcons-History::before {
    content: "\E058";
}

.ComplisIcons-Information::before {
    content: "\E196";
}

.ComplisIcons-Inbox::before {
    content: "\E131";
}

.ComplisIcons-Warning::before {
    content: "\E079";
}

.ComplisIcons-Swap::before {
    content: "\EC24";
}

.ComplisIcons-PieChart::before {
    content: "\E043";
}

.ComplisIcons-Pencil::before {
    content: "\E031";
}

.ComplisIcons-Keys::before {
    content: "\E045";
}

.ComplisIcons-Calendar::before {
    content: "\E046";
}

.ComplisIcons-Chat::before {
    content: "\E246";
}

.ComplisIcons-Call::before {
    content: "\E443";
}

.ComplisIcons-Home::before {
    content: "\E021";
}

.ComplisIcons-Exit::before {
    content: "\E389";
}

.ComplisIcons-FindPlus::before {
    content: "\E237";
}

.ComplisIcons-CopyPicture::before {
    content: "\E738";
}

.ComplisIcons-Columns::before {
    content: "\EC25";
}

.ComplisIcons-Van::before {
    content: "\E059";
}

.ComplisIcons-Globe::before {
    content: "\E371";
}

.ComplisIcons-Plus::before {
    content: "\E433";
}

.ComplisIcons-Minus::before {
    content: "\E434";
}

.ComplisIcons-Pause::before {
    content: "\E175";
}

.ComplisIcons-Settings::before {
    content: "\E137";
}

.ComplisIcons-PictureUpload::before {
    content: "\EC28";
}

.ComplisIcons-QRCode::before {
    content: "\EC29";
}

.ComplisIcons-Text::before {
    content: "\EC30";
}

.ComplisIcons-PendingUpdate::before {
    content: "\E151";
}

.ComplisIcons-SelectAll::before {
    content: "\E153";
}

.ComplisIcons-FolderClosed::before {
    content: "\E441";
}

.ComplisIcons-FolderOpen::before {
    content: "\E145";
}

.ComplisIcons-MoveUpDown::before {
    content: "\EC31";
}

.ComplisIcons-Tag::before {
    content: "\E066";
}

.ComplisIcons-Tags::before {
    content: "\E067";
}

.ComplisIcons-Coins::before {
    content: "\E038";
}

.ComplisIcons-Screen::before {
    content: "\E087";
}

.ComplisIcons-ThumbsUp::before {
    content: "\E344";
}

.ComplisIcons-ThumbsUpFilled::before {
    content: "\EC33";
}

.ComplisIcons-ThumbsDown::before {
    content: "\E345";
}

.ComplisIcons-ThumbsDownFilled::before {
    content: "\EC34";
}

.ComplisIcons-ChatBubble::before {
    content: "\E246";
}

.ComplisIcons-Report::before {
    content: "\E197";
}

.ComplisIcons-PopOut::before {
    content: "\E390";
}

.ComplisIcons-PopIn::before {
    content: "\E388";
}

.ComplisIcons-FilledDelete::before {
    content: "\E193";
}

.ComplisIcons-FilledTick::before {
    content: "\E194";
}

.ComplisIcons-SendChat::before {
    content: "\EC36";
}

.ComplisIcons-SplitOut::before{
    content: "\E387"
}

.ComplisIcons-Tracking::before {
    content: "\EC42"
}
/*Variables that can be changed through javascript so that the pseudo element ::before cam have fields that change*/
/*Variables have to be set in a valid "selector" I.E. :root*/
:root {
    --ComplisStandardButtonIconTranslateX: 130%;
    --ComplisStandardButtonIconTranslateY: 0%;
    --ComplisStandardButtonLeftIconTranslateX: 130%;
    --ComplisStandardButtonLeftIconTranslateY: 0%;
    --ComplisStandardButtonRightIconTranslateX: 590%;
    --ComplisStandardButtonRightIconTranslateY: 0%;
    --ComplisStandardButtonUpIconTranslateX: 130%;
    --ComplisStandardButtonUpIconTranslateY: 0%;
    --ComplisStandardButtonDownIconTranslateX: 130%;
    --ComplisStandardButtonDownIconTranslateY: 0%;
    --ComplisStandardButtonAddIconTranslateX: 130%;
    --ComplisStandardButtonAddIconTranslateY: 0%;
    --ComplisButtonIconAlternateTranslateX: 0%;
    --ComplisButtonIconAlternateTranslateY: 0%;
    --ComplisButtonIconDisplay: flex;
    --ComplisButtonIconWidth: 0;
    --ComplisButtonIconLeft: 0px;
}

.ComplisStandardButtonIcon, .ComplisStandardButtonRightIcon, .ComplisStandardButtonLeftIcon, .ComplisStandardButtonUpIcon, .ComplisStandardButtonDownIcon, .ComplisStandardButtonAddIcon {
    align-items: center;
    display: var(--ComplisButtonIconDisplay);
    margin: 0;
    padding: 0;
    width: var(--ComplisButtonIconWidth);
    z-index: 5;
    position: relative;
    left: var(--ComplisButtonIconLeft);
}

    .ComplisStandardButtonIcon::before, .ComplisStandardButtonRightIcon::before, .ComplisStandardButtonLeftIcon::before, .ComplisStandardButtonUpIcon::before, .ComplisStandardButtonDownIcon::before, .ComplisStandardButtonAddIcon::before {
        color: #FFFFFF;
        scale: 1.2;
        z-index: 5;
    }

    .ComplisStandardButtonIcon:hover::before, .ComplisStandardButtonRightIcon:hover::before, .ComplisStandardButtonLeftIcon:hover::before, .ComplisStandardButtonUpIcon:hover::before, .ComplisStandardButtonDownIcon:hover::before, .ComplisStandardButtonAddIcon:hover::before {
        color: #FFFFFF;
    }

    .ComplisStandardButtonIcon::before {
        transform: translate(var(--ComplisStandardButtonIconTranslateX), var(--ComplisStandardButtonIconTranslateY)); /*translateX(130%);*/
    }

    .ComplisStandardButtonRightIcon:before {
        transform: translate(var(--ComplisStandardButtonRightIconTranslateX), var(--ComplisStandardButtonRightIconTranslateY));
    }

    .ComplisStandardButtonLeftIcon::before {
        transform: translate(var(--ComplisStandardButtonLeftIconTranslateX), var(--ComplisStandardButtonLeftIconTranslateY));
    }

    .ComplisStandardButtonUpIcon::before {
        transform: translate(var(--ComplisStandardButtonUpIconTranslateX), var(--ComplisStandardButtonUpIconTranslateY));
    }

    .ComplisStandardButtonDownIcon::before {
        transform: translate(var(--ComplisStandardButtonDownIconTranslateX), var(--ComplisStandardButtonDownIconTranslateY));
    }

    .ComplisStandardButtonAddIcon::before {
        transform: translate(var(--ComplisStandardButtonAddIconTranslateX), var(--ComplisStandardButtonAddIconTranslateY));
    }


.ComplisButtonIconRight::before {
    color: #FFFFFF;
    transform: translate(var(--ComplisButtonIconRightTranslateX), var(--ComplisButtonIconRightTranslateY));
    scale: 1.2;
    z-index: 5;
}

.ComplisButtonIconRight:hover::before {
    color: #FFFFFF;
}

.ComplisButtonIconAlternate::before {
    transform: translate(var(--ComplisButtonIconAlternateTranslateX), var(--ComplisButtonIconAlternateTranslateY));
}
/* End of ComplisIcons */

/* START Picker */
.PickerContainerGRD {
    float: left;
    margin: 5px;
    background-color: #eee;
    vertical-align: middle;
    width: 20%;
}

.PickerThumbnailGRD {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 10px;
    cursor: default;
}

.PickerDescriptionGRD {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 10px;
}

.PickerDrillGRD {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 10px;
    cursor: pointer;
}

.PickerSelectGRD {
    text-align: center;
    vertical-align: middle;
    padding-bottom: 10px;
    cursor: pointer;
}

.PickerContainerLST {
    float: none;
    display: table;
    width: 100%;
    margin: 0px;
    padding: 0px;
    max-height: 300px;
    vertical-align: middle;
}

.PickerThumbnailLST {
    float: left;
    margin: 10px;
    width: 10%;
    cursor: default;
}

.PickerDescriptionLST {
    float: left;
    margin: 10px;
    width: 15%;
}

.PickerDrillLST {
    float: left;
    margin: 10px;
    width: 15%;
    cursor: pointer;
}

.PickerSelectLST {
    float: left;
    margin: 10px;
    width: 15%;
    cursor: pointer;
}

/* END Picker */

/* Flex Panel */
.FlexPanel {
    float: left;
    margin: 0px;
    padding: 0px;
    border: none;
    overflow: hidden;
}

.FlexPanelInner {
    margin: 10px;
    padding: 10px;
    border: solid thin black;
    overflow: auto;
}

@media only screen and (max-width: 999px) {
    .FlexPanel {
        height: auto;
    }

    .FlexPanelInner {
        height: auto;
    }
}

@media only screen and (min-width: 1000px) {
    .FlexPanelMin500 .FlexPanelInner {
        height: 300px;
    }
}

/* FlexPanelMin300 */
@media only print {
    .FlexPanelMin300 {
        width: 100%;
    }
}

@media only screen and (max-width: 599px) {
    .FlexPanelMin300 {
        width: 100%;
    }
}

@media only screen and (min-width: 600px) {
    .FlexPanelMin300 {
        width: 50%;
    }
}

@media only screen and (min-width: 900px) {
    .FlexPanelMin300 {
        width: 33.33%;
    }
}

@media only screen and (min-width: 1200px) {
    .FlexPanelMin300 {
        width: 25%;
    }
}

/* FlexPanelMin500 */
@media only print {
    .FlexPanelMin500 {
        width: 100%;
    }
}

@media only screen and (max-width: 999px) {
    .FlexPanelMin500 {
        width: 100%;
    }
}

@media only screen and (min-width: 1000px) {
    .FlexPanelMin500 {
        width: 50%;
    }
}

@media only screen and (min-width: 1500px) {
    .FlexPanelMin500 {
        width: 33.33%;
    }
}

@media only screen and (min-width: 2000px) {
    .FlexPanelMin500 {
        width: 25%;
    }
}
/* End Flex Panel */

/*  Surveys - Start */

.SurveysVerticalDisplay {
    margin: 10px;
}

.SurveysHorizontalDisplay {
    margin: 10px;
    float: left;
}

.SurveysHorizontalHeader {
    margin-top: 10px;
    bottom: 0;
}

.SurveysDivIsGroup {
    display: inline-block;
    position: relative;
    width: 100%;
}

.SurveysDivNotGroup {
    display: table;
    position: relative;
    width: 100%;
}

.SurveyGroupMainHolder {
    display: flex;
}

.SurveysScoringThinBorder {
    border-bottom: solid;
    border-bottom-color: black;
    border-bottom-width: thin;
}

.SurveysScoringThickBorder {
    border-bottom: solid;
    border-bottom-color: black;
    border-bottom-width: medium;
}

/*  Surveys - End */

/*Complis Navigation Utilities Start*/
div.ComplisAlternativeAltSaveBtn {
    font-size: 30pt;
    padding-top: 0;
    height: 20px;
}

    div.ComplisAlternativeAltSaveBtn span {
        position: absolute;
        right: 2px;
        top: -1px;
    }

div.ComplisAltSaveBtn {
    background-color: #EEEEEE;
    color: #000000;
    font-size: 30pt;
    padding-top: 0;
    height: 20px;
}

.ComplisAltBtns {
    background-color: #EEEEEE;
    border: 1.8px solid #000000;
    border-radius: 100%;
    color: #000000;
    font-size: 12pt;
    font-weight: bold;
    padding-top: 1px;
    width: 20px;
    height: 19px;
    position: absolute;
    text-align: center;
    right: auto;
    z-index: 1;
}

.ComplisAltBtnsLeft {
    left: -25px;
    bottom: -5px;
}

.ComplisAltBtnsUp {
    top: -30px;
    right: 50%;
}

.ComplisAltBtnsDown {
    bottom: -30px;
    right: 50%;
}

.ComplisAltBtnsTopRight {
    top: -30px;
    right: -15px;
}

.ComplisAltBtnsTopLeft {
    top: -30px;
    left: -15px;
}

.ComplisAltBtnsBottomLeft {
    bottom: -30px;
    left: -15px;
}

.ComplisAltBtnsBottomRight {
    bottom: -30px;
    right: -15px;
}

.AltBtnsWrapper {
    position: relative;
    display: inline;
}
/*Complis Navigation Utilities End*/

/* End of system default CSS */

.SsrsRpt {
}

    .SsrsRpt td {
        vertical-align: revert;
    }

.MSRS-RVC .DisabledButton {
    height: initial !important;
}

.SsrsRpt .WidgetSet {
}

div.CmsBreadcrumb {
    padding-top: 10px;
    padding-bottom: 10px;
}

rte-toolbar-button.rte_command_togglemore {
    display: none;
}

rte-toolbar.rte-toolbar-desktop {
    display: block !important;
}

.valSummary ul, .ValidationSummary ul {
    display: none;
    visibility: hidden;
}

.DAMToolBarOptions {
    display: inline-block;
}

.DAMdivCompressedAssets {
    overflow-y: auto;
    max-height: 200px;
    top: 0;
    bottom: 0;
}

.BoarderCollapse {
    border-collapse: collapse;
}

.TicketAttDiv {
    float: left;
    display: inline-block;
    padding-right: 20px;
    padding-bottom: 10px;
}

.lblCommentAttachment {
    cursor: pointer;
}

.Avatar {
    border-radius: 50%;
}

.Avatar img{
    object-fit: cover;
}

div.AvatarDetails {
    min-height: 200px;
    width: 300px;
    border: 3px solid black;
    border-radius: 5px;
    position: absolute;
    z-index: 10000;
    background-color: #666666;
    color: #FFFFFF;
    text-align: left;
    padding: 5px;
    display: none;
}

    div.AvatarDetails a {
        color: #FFFFFF;
    }

.AvatarContactCardImage {
    max-width: 100px;
    max-height: 100px;
}

.AvatarContactCardImageDiv {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.AvatarContactCardName {
    width: 200px;
    min-height: 100px;
    vertical-align: middle;
    text-align: center;
    float: left;
}

.SidePanelPresence .Avatar {
    float: left;
}

#pnlPresence.SidePanel {
    display: flow-root;
}

.AvatarContactDetails {
    display: inline-block;
    padding-top: 5px;
}

.AvatarOptionsVCard {
    width: 50%;
    float: left;
}

.AvatarOptionsTask {
    width: 50%;
    float: left;
    text-align: right;
}

/*Customers Categories Styling*/
.CustomersCategoriesListImage {
    transform: scale(1.5) translate(-30%, 50%);
}

#imgCategoriesShownInWebshop, #imgCategoriesShownOnEstimates, #btnCategoriesItemSearch, #btnCategoriesDeleteCategory, #btnCategoriesItemAdd {
    transform: scale(1.5) translateY(475%);
}

.ShownInSection {
    opacity: 100%
}

.NotShownInSection {
    opacity: 25%
}

#btnAddNewCategory, #btnReturnCategory {
    transform: translateY(725%);
}

.btnEditCategory, .btnSelectCategory {
    transform: translateY(450%);
}


.ComplisPeopleSearchResults, .ItemSearchResults, .ComplisCompanySearchResults {
    width: 100%;
    border-collapse: collapse;
}

/*  START Assets Browse Styling   */

.DamFolder {
    margin: 10% 5% !important;
    text-align: center;
    width: 90%;
    vertical-align: middle;
    overflow-wrap: break-word;
    overflow-y: auto;
}

div.DamFolderImageCell, div.DamFolderImageCellS {
    height: 270px;
    margin: 5px !important;
    width: 150px;
    position: relative;
    margin-bottom: 50px;
    border: 1px #FFFFFF00 solid;
    color: #505050;
    background-color: #EEEEEE
}

div.DamFolderImageCellL {
    position: relative;
    margin-bottom: 50px;
    margin: 5px;
    width: 250px !important;
    border: 1px #FFFFFF00 solid;
    color: #505050;
    background-color: #EEEEEE
}

    div.DamFolderImageCellL > a, div.DamFolderImageCell > a, div.DamFolderImageCellS > a {
        color: #505050;
    }

.DamButtonsDiv {
    display: inline-block;
    text-align: right;
    width: 80%;
    position: absolute;
    bottom: 0;
    right: 5px;
    color: #505050;
}

.DamCheckboxDiv {
    display: inline-block;
    text-align: left;
    width: 20%;
    position: absolute;
    bottom: 0;
    left: 5px;
}

.DamItemImageCellL {
    width: 75%;
}

#divAssetViewDetails > div > table > tr td:first-child {
    width: 25%;
    vertical-align: middle;
}

#divAssetViewDetails > div > table > tr td {
    vertical-align: middle;
}

#divAssetViewControls {
    margin-bottom: 30px;
}

#divAssetViewDetails > div > table {
    width: 50%;
    max-width: 600px;
}

#divAssetViewDetails input, #divAssetViewDetails textarea {
    vertical-align: top;
}

#divAssetViewDetails > div.divAssetControls.divAssetCurrentView > table > tr:nth-child(2) > td:nth-child(3) {
    min-width: 200px;
}

.DamDetailsText {
    height: 170px;
}

/*  END Assets Browse Styling   */

/*  START Jobboard Status */

.JobboardStatusDiv {
    text-align: left;
    display: inline-block !important;
    vertical-align: top;
}

.JobboardStatusLabel {
    position: absolute;
}

/*  END Jobboard Status */

.PointerOnHover {
    cursor: pointer;
}

.PopUpInfo {
    position: fixed;
    left: 10%;
    width: 80%;
    top: 10%;
    height: 80%;
    background-color: white;
    border: 2px solid black;
    z-index: 1001;
    overflow: auto;
    padding: 10px;
}

.PopUpInfoCloseDiv {
    width: 79%;
    text-align: right;
    position: fixed;
}

.TicketPopupLeft {
    float: left;
    padding: 0;
    width: 75%;
}

.TicketPopupRight {
    float: right;
    padding: 0;
    width: 25%;
}

@media only screen and (max-width: 500px) {
    .TicketPopupRight {
        display: none;
    }
}

.NewTicketCommentFlash {
    border: 2px solid yellow;
    margin: 0px;
    animation-name: flashing;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes flashing {
    50% {
        border-color: red;
    }
}

.PadLeft10 {
    padding-left: 10px;
}

.PadLeft20 {
    padding-left: 20px;
}

.PadRight10 {
    padding-right: 10px;
}

.PadRight20 {
    padding-right: 20px;
}

.TextCompaniesAccountContacts {
    background-color: white;
    border: 2px solid black;
    width: 200px;
    padding: 10px;
    z-index: 10;
    position: absolute;
}

    .TextCompaniesAccountContacts a:focus {
        background-color: yellow;
    }

.divDisabled {
    pointer-events: none;
    background: #CCC;
    opacity: 0.5;
}


.SuggestedPanel {
    background-color: white;
    border: 2px solid black;
    min-width: 200px;
    padding: 10px;
    display: none;
    z-index: 1000;
}

    .SuggestedPanel a:focus {
        background-color: yellow;
    }


[class^="Calendar"] {
    color: #ddd;
}

.CalendarTask {
    color: #FF9999;
}

.CalendarHoliday {
    color: #99FF99;
}

.CalendarGeneralAbsence {
    color: #9999FF;
}

.ReqHideCtrls, .TasksHideCtrls {
    display: none;
}

.ChatAtContactSearch {
    background-color: #EEEEEE;
}

div .NewEstimatesCategorySize {
    width: max-content;
    height: max-content;
    max-width: 250px;
    padding: 20px;
    box-sizing: border-box;
}
/*Popout Chat Start*/
.PopoutChatNavLink {
    color: #000000;
    border-color: #000000;
    background-color: #ffffff;
}

.PopoutChatAltNavLink {
    color: #000000;
    border-color: #000000;
    background-color: #cccccc;
}

.PopoutChatNavSelected {
    color: #ffffff;
    border-color: #ffffff;
    background-color: #666666;
}

.divPopoutChatMessageControls {
    color: #000000;
    background-color: #EEEEEE;
}

/*Popout Chat End*/

/*ComplisMessage Countdown Timer Start*/
.ComplisCountdownPie {
    font-size: 240%;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    border: 0.05em solid var(--color);
    --color: #4c4c4c;
    left: 85%;
    bottom: -10px;
}

    .ComplisCountdownPie::before,
    .ComplisCountdownPie::after {
        content: '';
        width: 50%;
        height: 100%;
        border-radius: 0.5em 0 0 0.5em;
        position: absolute;
        left: 0;
        transform-origin: center right;
    }

    .ComplisCountdownPie::before {
        z-index: 1;
        background-color: rgba(200,200,200,1);
    }

    .ComplisCountdownPie::after {
        background-color: var(--color);
    }

    .ComplisCountdownPie::before,
    .ComplisCountdownPie::after {
        animation-duration: var(--ComplisMessageTimer);
        animation-iteration-count: infinite;
    }

    .ComplisCountdownPie::before {
        animation-name: mask;
        animation-timing-function: steps(1);
    }

    .ComplisCountdownPie::after {
        animation-name: rotate;
        animation-timing-function: linear;
    }

@keyframes mask {
    50%, 100% {
        background-color: var(--color);
        transform: rotate(0.5turn);
    }
}

@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}
/*ComplisMessage Countdown Timer End*/

.FormLabel {
    display: block;
    padding-top: 10px;
    padding-bottom: 5px;
}

.FormInput {
}

.SOBrowseContainerGRD {
    height: 400px;
}

    .SOBrowseContainerGRD a img {
        max-height: 250px;
    }

.SecurityRolesSearch {
    background-color: white;
    border: 2px solid black;
    width: 200px;
    padding: 10px;
    max-height: 200px;
    overflow: scroll;
    position: relative;
    display: none;
}

    .SecurityRolesSearch a:focus {
        background-color: yellow;
    }

.divTableRow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.divTableColumn {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.divTableColumn table {
    width: fit-content;
}


.MailingSidePanel table tbody tr {
    padding-bottom: 10px;
    display: block;
}

.Instructions {
    border: #000000ff 1px solid;
    padding: 20px;
    background-color: #00000010;
    border-radius: 15px;
    margin-right: 20px;
    text-align:left;
}

.MailingWindowArea {
    position: absolute;
    opacity: 0.1;
    background-color: lightgreen;
}

.MailSimplex, .MailDuplex, .MailMono, .MailColour, .MailFoldYes, .MailFoldNo {
    float:left;
}

.MailDuplex, .MailColour, .MailFoldYes {
    padding-left: 40px;
}

.MailSimplex::before, .MailDuplex::before, .MailMono::before, .MailColour::before, .MailFoldYes::before, .MailFoldNo::before {
    font-family: "ComplisIcons" !important;
    font-size: 50pt;
    font-weight: 500;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    cursor: pointer;
    display: block;
}

.MailSimplex::before {
    content: "\EC38";
}

.MailDuplex::before {
    content: "\EC39";
}

.MailMono::before {
    content: "\E780";
    background: -webkit-linear-gradient(#555, #eee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-fill-color: -webkit-linear-gradient(#555, #eee);
}

.MailColour::before {
    content: "\E780";
    background: -webkit-linear-gradient(rgb(188, 12, 241), rgb(212, 4, 4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-fill-color: -webkit-linear-gradient(#eee, #333);
}

.MailFoldNo::before {
    content: "\EC41";
}

.MailFoldYes::before {
    content: "\EC40";
}

tr:has(td:has(.MailMono)), tr:has(td:has(.MailFoldNo)) {
    padding-top: 50px;
}

.MailingSideHeading {
    display:block;
    font-weight:bold;
}

.TextBoxVerySmall, .VeryNarrowWidth {
    width: 35px;
}

.TextBoxSmall, .NarrowWidth {
    width: 50px;
}

.TextBoxMediumSmall {
    width: 100px;
}

.TextBoxMedium, .NormalWidth {
    width: 175px;
}

.TextBoxLarge, .WideWidth {
    width: 250px;
}

.TextBoxVeryLarge, .VeryWideWidth {
    width: 500px;
}

.ReportsToShadow {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}

.OrDividerHolder {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.OrDividerLeft {
    width: 49%;
    border-bottom: #4c4c4c solid 1px;
    text-align: left;
}

.OrDividerRight {
    width: 49%;
    border-bottom: #4c4c4c solid 1px;
    text-align: right;
}

.NewWindowLink::after {
    content: "\E390";
    font-size: 8pt;
    font-family: "ComplisIcons" !important;
    padding-left: 2px;
    text-decoration: none;
}

@-webkit-keyframes MailingWarning {
    0% {
        background-color: Red;
        opacity: 0.25;
    }

    20% {
        background-color: Red;
        opacity: 0.50;
    }

    40% {
        background-color: Red;
        opacity: 0.75;
    }

    60% {
        background-color: Red;
        opacity: 0.75;
    }

    80% {
        background-color: Red;
        opacity: 0.50;
    }

    100% {
        background-color: Red;
        opacity: 0.25;
    }
}

.MailingWarning {
    height: 100px;
    width: 100px;
    background-color: #777;
    position: absolute;
    left: 5px;
    top: 5px;
    opacity: 0;
    -webkit-animation-name: MailingWarning;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.tooltip {
    border: none;
    display: inline;
    float: none;
}
.tooltip::after {
    content: "\E195";
    font-family: "ComplisIcons" !important;
    font-size: 6pt;
    cursor: pointer;
    padding-left: 2px;
    font-weight:100;
}


/*      Slider Start        */
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #EEEEEE;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #666666;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #666666;
        cursor: pointer;
    }
/*      Slider End         */table[id*='grd'] > tbody > tr.Header {    position: sticky;    background-color: #CCCCCC;    color: #000000;    top: 0;}/*Main*/
/*
old rgba(238, 24, 53, 1) #ef1835
new rgba(248, 17, 106, 1) #f8116a
*/

a, body, p, html, td, h1, h2, h3, h4, h5, #ctl00_cph_lblMessage, INPUT, TEXTAREA, SELECT, .InputArea, ul, li {
font-weight: 100; 
font-family: 'Nunito', sans-serif;
font-weight: initial;
}

.HighlightedRow
{
background-color:#FF8076;
}

body,table 
{
font-size: 10pt;
}

a:link,
a:visited	{
    text-decoration:none;
}

a:hover	{
    text-decoration:underline;
}

#ctl00_tblHeader
{
/*width:995px;*/
margin-bottom: -50px;
}

#ctl00_tblContent {
margin: 0 auto;
/*width: 995px;*/
}

#ctl00_tblContent {
background-color:White;
text-decoration: none;
margin-top: 8px;

}

#ctl00_pageBackground, body, html {
min-width:100%;
width:100%;
background-position:center top;
background-repeat:repeat-x;
background: url("https://www.complis.co.uk/Complis/assets/original/4351bc5a-beff-45d1-ba67-8856442348af/download/2843841_vitality_bg.png") repeat-x;
}

#ctl00_pageBody {
background-position:center top;
/*background-repeat:repeat-x;
background: url("https://www.complis.co.uk/Complis/assets/original/4351bc5a-beff-45d1-ba67-8856442348af/download/2843841_vitality_bg.png");*/
}

#ctl00_pageBackground {min-height:1000px;}

tr {height:20px;}

H2 {font-size: 12pt;
text-decoration: none;}

.SidePanel td, .SidePanel a {
/*font-size:8pt;*/
}

.SidePanel
{
	filter: none;
}

INPUT, TEXTAREA, SELECT, input[type="text"].Right
{
border-style: solid;
border-width:2px;
border-color:Silver;
}

INPUT, TEXTAREA, SELECT
{
margin: 0px;
padding: 0px 5px 0px 5px ;
font-size: 10pt;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px; 
/*behavior: url(/complis/css/border-radius.htc); breaks everything */
border-radius:5px; 
outline:none;
resize:none;}


INPUT, SELECT {height:20px;}

.InputArea
{
font-family:Arial;
border-style: solid;
border-width:2px;
font-size: 10pt;
}

div 
{
font-family: Arial;
font-size: 10pt;
text-decoration: none;
}

.LoggedInAs
{
position: relative;
/*left: -50px;
font-size:8pt;*/
top: 4px;
color:#ffffff;
}

*:first-child+html .LoggedInAs
{
position: relative;
left: -50px;
/*font-size:8pt;*/
top: -20px;
}

li a, li h2,li h2 a
{
color: #000;
padding:0 0 0 0;
margin:0 0 0 0;
vertical-align:top;
text-decoration: none;
}

/*MainEnd*/

/*Top Menu*/

#pnlMenu
{
background-color: Transparent;
position: relative;
top: -30px;
/*left: 25px;*/
font-size: 11pt;
font-weight:lighter;
text-decoration: none;
/*width: 1000px;*/
height: 18px;
}

#pnlMenu h2
{
color: #ffffff;
background-color: #f8116a;
font-size: 11pt;
font-weight:lighter;
padding: 0 0 0 0;
vertical-align:top;
margin: 0 0 0 0;
line-height: 15pt;
text-decoration: none;
}

#pnlMenu h2:hover
{
color: #000;
background: transparent;
padding: 0 0 0 0;
vertical-align:top;
margin: 0 0 0 0;
line-height: 15pt;
text-decoration: none;
}

#pnlMenu a
{
color: #ffffff;
background: transparent;
font-size: 11pt;
font-weight:lighter;
margin: 0 0 0 0;
padding: 0 0 0 0;
line-height: 15pt;
text-decoration: none;
}

div#pnlMenu ul li,
div#pnlMenu ul ul li,
div#pnlMenu ul ul ul li
{
color: #000;
background: #f8116a;
padding: 2px 0 5px 10px; 
margin: 0 0 0 0;
vertical-align:top;
line-height: 15pt;
border: none;
text-decoration: none;
}
div#pnlMenu ul li:hover,
div#pnlMenu ul ul li:hover,
div#pnlMenu ul ul ul li:hover
{
color: #000;
background: #f8116a;
padding: 2px 0 5px 10px;
vertical-align:top;
margin: 0 0 0 0;
line-height: 15pt;
text-decoration: none;
}

#pnlMenu a:hover
{
color: #000;
background: transparent;
padding: 0 0 0 0;
vertical-align:top;
margin: 0 0 0 0;
line-height: 15pt; 
text-decoration: none;
}

/*Top Menu End*/

/*Headers*/

.PanelHeader
{
color:#fff;
background-color:#DAD8D6;
}

#ctl00_lblTitleHeader {
/*color:#fff;*/
}
#ctl00_trTitleHeader
{
/*background-color:#f8116a;*/
border-width:2px;
}

#ctl00_pnlTitleBody {
/*background-color:#f8116a;*/
}

.SidePanel {
    filter:none;
background-color:#DAD8D6;
}

#ctl00_lblTitleBody 
{
padding: 10px 0 0 0;
/*color:#ffffff;*/
}

.PanelHeaderText
{
text-decoration: none;
color:#000;
font-size: 10pt;
padding: 0 0 0 0;
margin-left: 4px;
white-space: nowrap;
line-height:1.2;
}

.PanelHeaderContent {border: thin solid #f8116a;}

.PanelMainContentHeaderText
{
color:#000;
font-size: 10pt;
}



.Header
{
background-color: #D2D2D0;
}

.Header a
{
text-decoration:underline;
}

.HeaderRight
{
background-color: #D2D2D0;
}

/*.Alt
{
background-color: #DAD8D6;
}*/

.SearchPanel
{
background-color: #DAD8D6;
border: 1px solid #DAD8D6;
}

.PanelBorder {
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px; 
border-radius:5px; 
border: #ebebeb solid 2px;
background-color:#DAD8D6;
}

#ctl00_pnlTitleBorder
{
/*    border-color:#f8116a;*/
    border-width:2px;
}

/*.PanelMainContentHeader
{
color: Black;
border-color: #f8116a;
background-color: #f8116a;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px; 
/*behavior: url(/complis/css/border-radius.htc); breaks everything */
/*border-radius:5px; 
}*/


/*Header End*/

/*Content*/

.PanelMainContent
{
color:Black;
border: none;
background-color:#ffffff;
/*margin: -15px 0 0 0;*/
}

.HomepageBox
{
border-color:#ebebeb;
background-color: #ebebeb;
border-width:2px;
border-style:solid;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px; 
border-radius:5px; 
height:200px;
text-align: left;
text-decoration: none;
width: 100%;
}

.HomepageBox:hover
{
border-color:#f8116a;
background-color: #f8116a;
border-width:2px;
border-style:solid;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px; 
border-radius:5px; 
height:200px;
text-decoration: none;
}

.HomepageBox:hover a.HomepageLink 
{
color:#fff;
text-decoration:none;
}

HomepageBox:hover a.HomepageNarative
{
color:#000;
text-decoration: none;

}

.HomepageHeader
{
    height:75px;
    background-color: transparent;
    border-color: transparent;
    text-decoration: none;
    font-size: 11pt;
    text-align: left;
    display:inline;
    vertical-align:middle;
    width:100%;
}

.HomepageImage
{
border:none;
width: 75px;
height:75px;
display:inline;
float:left;
}

.HomepageHeaderText {
    height:75px;
    width:280px;
    display:inline;
    vertical-align:middle;
    float:left;
    font-size:12pt;
    line-height:75px;
}

a.HomepageNarative
{
color:#000;
text-decoration: none;

}

div.HomepageNarative {
color:#000;
background-color: #fff;
height:105px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px; 
border-radius:3px;
border-top-left-radius:0px; 
border-top-right-radius:0px;
text-decoration: none;
font-size: 10pt;
padding: 15px 10px 5px 10px;
clear:both;
}

.ComplisApprovalTable {
width:80%;
}

.StandardButton, .StandardButtonUp, .StandardButtonDown, .StandardButtonLeft, .StandardButtonRight, .StandardButtonAdd {
background-color: #f8116a;
height:36px;
}

.StandardButton:hover, .StandardButtonUp:hover, .StandardButtonDown:hover, .StandardButtonLeft:hover, .StandardButtonRight:hover, .StandardButtonAdd:hover {
background-color: #505050;
height:36px;
}

.StandardButtonUp, .StandardButtonDown, .StandardButtonLeft, .StandardButtonAdd {
padding-right:8px;
padding-left:25px;
}

.StandardButtonRight {
padding-left:8px;
padding-right:25px;
}

.LargeButtonContainer span a {
font-size: 12pt;
}

.LargeButtonDiv {
/*font-size:1.2em;*/
padding:5px;
height:130px;
width:45%;
background-color:#F7F7F7;
color:#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px; 
border-radius:10px; 
border: thick solid #F7F7F7;
text-align: left;
margin:20px 0 0 20px;
}

div.LargeButtonDiv a{
/*font-size:1.2em;*/
font-weight:bold;
}

.LargeButton {
/*margin:10px;*/
float: right;
margin-top: -70px;
}

.LargeButtonDiv:hover
{
    border: thick solid #797D83;
}

.LargeButtonTitle
{
text-decoration:none;
font-size:13pt;
color:#F8116A;
font-weight:bold;
line-height:250%;
width:100%;
/*background-color:#46A2E5;*/
margin-bottom:10px;
text-align: left;
}



.LargeButtonDescription {
display: block;
text-align: left;
padding: 0px;
width: 70%;
}

.ShoppingBrowseDescription
{
font-weight:bold;
}

.ShoppingBrowseDetails
{
font-size:0.9em;
}

input.PreviewImageCategory {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 1px;
    background-color: transparent;
}

input.PreviewImageItem {
    margin-left: auto;
    margin-right: auto;
   border-style: solid;
   border-color: #505050;
}

#ctl00_cph_grdBroker span, #ctl00_cph_grdCustomer span, #ctl00_cph_grdSupplier span {
width:45%;
}

input[type='image'] [id$='ImgPrevCirc'] {
opacity: 0;
visibility: hidden;
display: none;
}

/*HIDE DEADLINE FIELDS*/

#ctl00_cph_trProjectManager {
    visibility: hidden;
    display: none;
}

img#ctl00_cph_imgAccountManager {
float: none;
margin: 10px;
}

img#ctl00_cph_imgManagingDirector {
float: none;
margin: 10px;
}

#ctl00_cph_btnTrack {
    background-color: #4D7287;
}

/*----------------------------------------------------HIDE DOWNLOAD OPTIONS----------------------------------------*/

/*#ctl00_cph_divIDBEditor table tr td + td {
 display: none;
}

table table tr td td tr td + td {
    display: none;
}*/

/*---------------------------------------------------- INVOICE ADDRESS--------------------------------------------------*/

#ctl00_cph_tblInvoiceAddress tr:nth-child(1) {
    display: none;
}


/*-----------------------------------------BUTTONS FOR ORDERING--------------------------------------------------*/

.SOBrowseContainerGRD {
background-color: #fff;
    border: 1px solid;
    border-color: #fff;
}

.SOBrowseContainerLST:hover, .SOBrowseContainerGRD:hover {
    background-color: #fff;
    border: 1px solid;
    border-color: #DAD8D6;
}

/*---------------------------------------------------- Vitality Homepage CMS ----------------------------------------------*/

/*  SECTIONS  */

.Vitsection {
	clear: both;
	padding: 0px;
	margin: 0px;
}

#ctl00_pnlMainContent {
    margin-top: 20px;
}

#ctl00_pnlMainHeader  {
/*margin: -19px 0 0 0;*/
display: none;
}

/*  COLUMN SETUP  */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

/*  GROUPING  */

.Vitgroup:before,
.Vitgroup:after { content:""; display:table; }
.Vitgroup:after { clear:both;}
.Vitgroup { zoom:1; /* For IE 6/7 */ }


/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 49.2%;
}

/*  GRID OF THREE  */

.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}



/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

input#ctl00_cph_ucItemAssets1_UcAssetsUpload_ucAssetsApproval_grdSteps_ctl02_btnMoveDown, input#ctl00_cph_ucItemAssets1_UcAssetsUpload_ucAssetsApproval_grdSteps_ctl02_btnMoveUp,
input#ctl00_cph_ucItemAssets1_UcAssetsUpload_ucAssetsApproval_grdSteps_ctl03_btnMoveUp, input#ctl00_cph_ucItemAssets1_UcAssetsUpload_ucAssetsApproval_grdSteps_ctl03_btnMoveDown,
 {
display: none;
visibilty: hidden;
}

input[id*="btnMove"] {
visibility: hidden;
/*display: none;*/
}

img#ctl00_cph_imgAsset {
width: 10%;
}


@media only screen and (max-width: 680px) {
#ctl00_cph_grdBroker span, #ctl00_cph_grdCustomer span, #ctl00_cph_grdSupplier span {
width:90%;
}
}







/*Migrated from Theme Path*/
.PanelMainContentHeader .ComplisIcons {color: white;}
.PanelMainContentHeader .ComplisIcons:visited {color: white;}
.PanelMainContentHeader .ComplisIcons:hover {color: gray;}
/*End of migrated from Theme Path*/
.StandardButtonLeft{text-align:right; background-image: url('https://cdn.complis.com/live/mosaic/assets/d34e7e11-d049-466c-b23c-03a8fe680313.png'); background-position: left; background-repeat: no-repeat;}.StandardButtonLeft:hover{text-align:right; background-image: url('https://cdn.complis.com/live/mosaic/assets/d34e7e11-d049-466c-b23c-03a8fe680313.png'); background-position: left; background-repeat: no-repeat;}.StandardButtonRight{text-align:left; background-image: url('https://cdn.complis.com/live/mosaic/assets/e8cd45da-9081-4808-835c-31aefaa59cbf.png'); background-position: center; background-repeat: no-repeat;}.StandardButtonRight:hover{text-align:left; background-image: url('https://cdn.complis.com/live/mosaic/assets/e8cd45da-9081-4808-835c-31aefaa59cbf.png'); background-position: center; background-repeat: no-repeat;}.StandardButtonUp{text-align:right; background-image: url('https://cdn.complis.com/live/mosaic/assets/0ba33a6b-8cb7-4509-8a45-2200f3129eae.png'); background-position: center; background-repeat: no-repeat;}.StandardButtonUp:hover{text-align:right; background-image: url('https://cdn.complis.com/live/mosaic/assets/0ba33a6b-8cb7-4509-8a45-2200f3129eae.png'); background-position: center; background-repeat: no-repeat;}.StandardButtonDown{text-align:right; background-image: url('https://cdn.complis.com/live/mosaic/assets/1cc5dbb6-3cb6-40b9-bd99-42332de44300.png'); background-position: left; background-repeat: no-repeat;}.StandardButtonDown:hover{text-align:right; background-image: url('https://cdn.complis.com/live/mosaic/assets/1cc5dbb6-3cb6-40b9-bd99-42332de44300.png'); background-position: left; background-repeat: no-repeat;}.StandardButtonAdd{text-align:right; background-image: url('https://cdn.complis.com/live/mosaic/assets/c582c5ee-a166-43f9-8bc2-1f44608b2dbe.png'); background-position: center; background-repeat: no-repeat;}.StandardButtonAdd:hover{text-align:right; background-image: url('https://cdn.complis.com/live/mosaic/assets/c582c5ee-a166-43f9-8bc2-1f44608b2dbe.png'); background-position: center; background-repeat: no-repeat;}