/* Button Text colors may need to invert to be readable depending on customer's color palettes*/
:root {
    /* The following are used to control the header and logo */
    --header-height: 75px;
    --negative-header-height: -75px; /* should be the same size as header height just negative for the admin console*/
    --logo-padding: 5px; /* MMO expects this to be x when --logo-height-max == 2x */
    --logo-height-max: 60px; 

    /* The below is using MMO's color palette */
    --text-color: 86, 86, 86; /* If the customer does not have a dark grey in their color palette, use #565656 or black*/
    --message-background-color: 188, 232, 241;
    --hover-text-color: 10, 107, 204;
    --default-button-text: 255, 255, 255; /* Invert with the hover-button-color if needed */
    --default-button-color: 10, 110, 209;
    --hover-button-text: 255, 255, 255;
    --hover-button-color: 2, 82, 162;
    /* The following variables should be the same color with varying opacity */
    --primary-color: 81, 85, 89;
    --submenu-hover-color: 230,245,244; /* Use an rgba to rgb converter to get the right color. The color above is the foreground. The color above is the background. Transparency is assumed to .1 to match the expanded sidebar. */
    --default-submenu-color: 255, 255, 255; /* To prevent transparency in the submenu */
    /* Color of Error text is used as a semi-transparent background for errors */
    --error-text-color: 255, 0, 0;

    /* --filter: brightness(0) saturate(100%) invert(37%) sepia(72%) saturate(1386%) hue-rotate(145deg) brightness(89%) contrast(106%);*/
}

/* Custom Login Page */
#login-logo{
  content:url(https://social.webcomserver.com/wpm/download/70x367?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJCVucjA3bLCOXQ4xsCWLZcV);
  width:367px;
  height:70px;
}

/* Work Arounds */
.hidden_workaround {
    position: absolute;
    left: -1000px;
}

.hidden_field_value span[systemid="true"] {
    opacity: 0;
}

/* INSTRUCTIONS */
.message_note, span.message, div.message, .caseFormAutoSaveMessageInfo {
/*    color: rgb(var(--text-color));
    background-color: rgba(var(--message-background-color),.25); */
    border: none;
}

.small_instructions {
    color: rgb(var(--text-color)) !important;
}

.message_error {
    background-color: rgba(var(--error-text-color), .25);
    color: rgb(var(--error-text-color));
    padding: 10px;
    margin: 5px 0 !important;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.message_note > .scrDraggable, .message_error > .scrDraggable, .message > .scrDraggable {
    border: none;
}

/* Mass settings */
.bulk-table {
    border:1px solid rgb(var(--text-color));
    border-collapse:collapse;
    padding:5px;
    margin:15px;
}
.bulk-table th {
    font-weight: bold;
    font-size: 14px;
    border:1px solid rgb(var(--text-color));
    padding:5px;
    background:#F0F0F0;
}
.bulk-table td {
    font-size: 14px;
    border:1px solid rgb(var(--text-color));
    padding:5px;
}

/* ACTION ICONS */
img[src*='wpm/img/case/closed.png'], img[src*='wpm/img/remove.png'],  img[src*='wpm/img/case/case_tools.png'] {
    filter: var(--filter);
}
.caseAction img {
    filter: var(--filter);
}

img[src*='wpm/img/case']:hover {
    filter: var(--filter);
}

div#tabPublicAttachments img {
    filter: var(--filter);
}

.commentControls img {
    filter: var(--filter);
}

.icon_void > a > img {
    content: url(https://social.webcomserver.com/wpm/download/wf_trash?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJBv8lfu1Hl2okbfxMqlJIcD);
    height: 32px;
}

.icon_decline > a > img {
    content: url(https://social.webcomserver.com/wpm/download/wf_reject?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJCoJTm6S7%2BqvFE5zlU08Rto);
    height: 32px;
}

.icon_approve > a > img {
    content: url(https://social.webcomserver.com/wpm/download/wf_approve?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJAiTYy07o2szaXlIoW4eMQE);
    height: 32px;
}

.icon_mail_send > a > img {
    content: url(https://social.webcomserver.com/wpm/download/wf_mail_send?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJAmGLUizaeyNsSx8leZ%2BcUk);
    height: 32px;
}

.icon_edit_fields > a > img {
    content: url(https://social.webcomserver.com/wpm/download/icon_edit_fields?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJCQ3VA%2BN4%2BJfUkT16wLlcSH);
    height: 32px;
}

.icon_change_status > a > img {
    content: url(https://social.webcomserver.com/wpm/download/icon_change_status?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJB%2FBSAghj73JDOcQJ4Ls%2Fgy);
    height: 32px;
}
.icon_view > a > img {
    content: url(https://social.webcomserver.com/wpm/download/icon_view?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJCBNWr72wc0q%2BO802%2FqxXuU);
    height: 32px;
}
.icon_reopen > a > img {
    content: url(https://social.webcomserver.com/wpm/download/icon_reopen?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJB2VsL1RUVjC0k5kqx0StlF);
    height: 32px;
}
.icon_skip > a > img {
    content: url(https://social.webcomserver.com/wpm/download/icon_skip?token=bgA2uKK0q894j7vqXrM%2BT7kJ02Z2ury7%2BZUqcfeRKJCpfv5tHLZbD0B23fWxQUMT);
    height: 32px;
}
.icon_close > a > img {
    content: url(https://social.webcomserver.com/wpm/download/ico_close?token=bgA2uKK0q894j7vqXrM%2BT6A9juQt%2Fipysrdxj8qcbAjWNqDyNXWq%2BeOMuvEw2Hnr);
    height: 32px;
}

/* Header Edits To Meet Logo Requirements */
.logo-img-custom {
    pointer-events: none;
    max-width: 1000px;
    max-height: var(--logo-height-max);
    padding: calc(var(--logo-padding) - 5px) var(--logo-padding) var(--logo-padding) var(--logo-padding);
    margin: 0px;
}

.topbg {
    height: var(--header-height);
}

#mainContent { /* Must adjust the pixels in the calc to remove a useless scroll bar when header size has been edited */
    min-height: calc(100vh - 130px); /* Original is 117px */
}

.sidebar { /* sidebar edit for the Header */
    top: var(--header-height); 
    height: calc(100% - var(--header-height));
}

/* General */
body {
    margin: var(--header-height) 0px 0px 0px;
    background-color: rgba(var(--primary-color), .05);
}

#admin_content {
    margin: var(--negative-header-height) 0px 0px 0px;
}

a:not(.noPhotoImage) {
    color: rgb(var(--text-color));
}

a.box:link {
    color: rgb(var(--text-color));
    font-weight:bold;
}

a:hover:not(.noPhotoImage), ul.tablayout a:hover, a.box:link:hover {
    color: rgb(var(--text-color));
    text-decoration: underline;
    font-weight: bold;
    text-decoration-color: rgb(var(--primary-color)) !important;
    transition: text-decoration .2s ease;
}

/*.caseActionContent .head {
    background-color: rgb(var(--text-color)); 
}

ul.tablayout li, .nextCaseBrowser .cfLabel {
    background-color: rgba(var(--primary-color),.1);
}

input[type="text"], input[type="password"], select, .wpmCalendar, textarea {
    border: 1px solid rgba(var(--text-color), .5);
}

input[type="text"]:focus, input[type="password"]:focus, select:focus, .wpmCalendar:focus, textarea:focus {
    border-color: rgba(var(--primary-color),.75);
}

input[type="text"]:hover, input[type="password"]:hover, select:hover, .wpmCalendar:hover, textarea:hover {
    border-color: rgba(var(--primary-color),.5);
}

input[type="checkbox"], input[type="radio"] {
    accent-color: rgb(var(--primary-color));
}*/

/* Side Panel (vertical ribbon) */
.user-side-user-panel ul {
    height: 36px; /* resizes the icon to be a consistent height */
}

/*.user-side-user-panel:hover:not(.ddsubmenustyle:hover) ul, .user-side-user-panel:hover #userPanelIcon[style] {
    color: rgb(var(--hover-text-color)) !important;
    font-weight: bold;
    cursor: pointer;
}

#headerTopOptions :hover span:before {
    color: rgb(var(--hover-text-color)) !important;
    font-weight: bold;
}

#userMenuItem.user-side-user-panel:hover, #newCaseMenuItem:hover, #helpLink.help-menu-item:hover {
    background-color: rgba(var(--primary-color),.2);
}

#newCaseMenuItem.active, #userMenuItem.active {
    background-color: rgba(var(--primary-color),.5) !important;
}

#new-casedropdown.menu-dropdown a {
    color: rgb(var(--text-color));
}

#new-casedropdown.menu-dropdown a:hover {
    color: rgb(var(--text-color));
    text-decoration: underline;
}*/

/* Sidebar (expanded ribbon) */
/*.sidebar, .sidebar .secondary {
    background-color: rgba(var(--primary-color), .1);
}
.sidebar .nav > li > a span:before{
    color: rgb(var(--text-color));
}

.sidebar .nav > li.activeMenuItem > a:before {
    border-left: 2px solid rgb(var(--primary-color));
}

.sidebar .nav > li.activeMenuItem > a {
    background-color: rgba(var(--primary-color),.5);
}

.menu_item, .menu_item span:before{
    color: rgb(var(--text-color)) !important;
}

.menu_item :hover, .menu_item :hover span:before {
    color: rgb(var(--hover-text-color)) !important;
    font-weight: bold !important;
    transition: color .2s ease;
}

.menu_item :hover:not(span), .menu_item :hover a:before {
    background-color: rgba(var(--primary-color),.1) !important;
    transition: background-color .2s ease;
}

.sidebar.collapsed .nav.secondary.float-menu a {
    background-color: white;
}

.sidebar.collapsed .nav.nav-sidebar .submenu-title:hover, .sidebar.collapsed .nav.nav-sidebar .submenu-title > span:hover, .sidebar.collapsed .nav.nav-sidebar .submenu-title > span {
    background-color: rgb(var(--default-submenu-color)) !important;
    font-weight: normal !important;
    color: rgb(var(--text-color)) !important;
    transition: background-color .2s ease;
}

.sidebar.collapsed .nav > li > .float-menu a:hover, .submenu-title:hover {
    background-color: rgb(var(--submenu-hover-color)) !important;
    transition: background-color .2s ease;
}

#user-menu-collapse {
    background: none;
}

/* AutoSave Pop-up */
/*.caseFormAutoSaveMessagesWrapper {
    border-top-color: rgb(var(--primary-color));
}

.caseFormAutoSaveMessageInfoColor, .caseFormAutoSaveMessagesDiscardDraftText {
    color: rgb(var(--text-color));
}

.caseFormAutoSaveMessagesInfoIcon {
    color: rgb(var(--primary-color));
}

.caseFormAutoSaveMessagesDiscardDraftText:hover {
    color: rgb(var(--text-color));
    text-decoration: underline;
    font-weight: bold;
    text-decoration-color: rgb(var(--primary-color)) !important;
    transition: text-decoration .2s ease;
}

.caseFormAutoSaveMessagesDiscardDraftIcon {
    filter: var(--filter);
}*/

/* Custom */
/*
span.exclusionList .taxid {
    display: none;
}

span.exclusionList:hover .hoverText {
    display: none;
}

span.exclusionList:hover .taxid {
    display: inline;
}
*/

/* Buttons */
/*.buttons, .btn, a.replyOnComment, .buttons[value=Search], .apBtnWorkflow, .apBtnFormDesigner, .apCancelAndDelete, .addNewWorkflowWizardSubmit, .customTableControllerConfirmationSave, .customTableControllerConfirmationCancel {
    color: rgb(var(--default-button-text));
    background-color: rgb(var(--default-button-color));
}

.buttons:hover, .btn:hover, a.replyOnComment:hover, .buttons[value=Search]:hover, .apBtnWorkflow:hover, .apBtnFormDesigner:hover, .apCancelAndDelete:hover, .addNewWorkflowWizardSubmit:hover, .customTableControllerConfirmationSave:hover, .customTableControllerConfirmationCancel:hover {
    color: rgb(var(--hover-button-text));
    background-color: rgb(var(--hover-button-color));
    transition: background-color .2s ease, color .2s ease;

}

/* This text is typically on a white button */
/*.buttons[value=Cancel], .buttons[value=Previous], .buttons[value=Back], .buttons[value=Remove], .buttons[value=Reset], .input[value=Cancel], .apCancelAndDelete, .addNewWorkflowWizardSubmit[value~=Back], .addNewWorkflowWizardSubmit[value=Cancel], .customTableControllerConfirmationCancel, ul.tablayout a {
    color: rgb(var(--text-color));
}

.buttons[value=Cancel]:hover, .buttons[value=Previous]:hover, .buttons[value=Back]:hover, .buttons[value=Remove]:hover, .buttons[value=Reset]:hover, .input[value=Cancel]:hover, .apCancelAndDelete:hover, .addNewWorkflowWizardSubmit[value~=Back]:hover, .addNewWorkflowWizardSubmit[value=Cancel]:hover, .customTableControllerConfirmationCancel:hover {
    color: rgb(var(--text-color));
    background-color: rgba(var(--primary-color),.5);
    transition: background-color .2s ease, color .2s ease;
}

.noPhotoImage, .noPhotoImageMedium, .noPhotoImageMediumComments {
    background-color: rgba(var(--primary-color),.75);
}

.portlet_status_symbol.portlet_symbol_expanded, .portlet_status_symbol.portlet_symbol_collapsed, #user-menu-collapse, .portlet_label, .portlet_status_symbol, #closeLeftLink, #openLeftLink {
    color: rgb(var(--text-color));
}

.portlet_status_symbol.portlet_symbol_expanded:hover, .portlet_status_symbol.portlet_symbol_collapsed:hover, #user-menu-collapse:hover, #closeLeftLink:hover {
    color: rgb(var(--hover-text-color));
    font-weight: bold;
    transition: color .2s ease;
}

.view_wf_l1 {
    text-align: center;
    color: rgb(var(--text-color));
}

.view_wf_l2 {
    text-align: center;
    color: rgb(var(--primary-color));
}

.view_wf_s2 {
    color: white;
}*/


/*
input[type='radio']:after {
width: 11px;
height: 11px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #white;
content: '';
display: inline-block;
visibility: visible;
}


input[type='radio']:checked:after {
width: 11.5px;
height: 11.5px;
top: -.5px;
left: -.5px;
position: relative;
background-color: #ED8B00;
content: '';
display: inline-block;
visibility: visible;
border: 1px solid #000000;
}

[type=checkbox]:checked:after {
background-color:#ED8B00 !important;
width: 14px;
height: 14px;
content: '\2714';
display: inline-block;
position: relative;
top: -1.5px;
left: -.5px;
bottom: 15px;
border-radius: 2.5px;
font-size: 10px;
padding-left: 21%;
box-sizing: border-box;
}
*/