/*\Dashboards\UserControls\PinToDashboardLinks.ascx*/
/*\USERCONTROLS\PinToDashboard.ascx*/

/*To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block:*/
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}    

/* START - Dashboard control */

input.dashconfigure {
    float: right;
}
a#ctl00_Main_content_ucPinToDashboard_btnPinToDashboard.pin-to-dashboard {
    color: #FFFFFF;
}
select.dashconfigure {
    float: left;
}
div.qlo-cog-adjustment div.dropdown-menu.show,
div.po-dropdown-width {
    min-width: 220px;
}
div.po-dropdown-width button.dropdown-item.dashconfigure {
    color: #3651b7 !important;
    background-color: transparent !important;
    padding: 0.25rem 1rem;
}
div.po-dropdown-width div.dropdown-header {
    padding: 0.25rem 1rem;
}

/* END - Dashboard control */

/* START - Dashboard links */

div.PTDLinkIcon, div.PTDLinkTitle {
    display: table-cell;
    height: 54px;
}
div.PTDLinkTitle > a {
    font-size: 0.75em;
}
div.ptdLinkColumn > div {
 /*   padding-bottom: 10px;*/
}


span.dashlinks {
    font-size: 20px !important;
}

section.ptdSectionDashboardLinks {
    width: 100%;
    overflow: hidden;
}

section.ptdSectionDashboardLinks>div:not(.ptdNoData) {
    height: 100%;
    margin: 3px 3px 3px 0;
    padding: 2px;
    float: left;
}
section.ptdSectionDashboardLinks.v20Dashboard > div {
    width: 100% !important;
}

div.ptdLinkPlaceholder {
    border: 1px dashed #eee;
    background-color: lightgray;
    min-height: 70px;
}

div.ptdLinkContainer div {
    /*margin: 0px 5px;*/
    padding: 2px 5px;
    width: 100%;
    cursor: pointer;
}

div[id$=divDetailLinks].v20FlexLinks.ptdLinkContainer div {
    padding: 2px 5px;
    min-width: 33%;
    max-width:100%

}

.spacer {
    clear: both;
}

.ui-sortable-placeholder {
    visibility: visible !important;
    background-color: lightgray;    
}
div.ui-sortable-placeholder {
    margin-top: 7px;
}

.ptdLinkContainer .waterwheelSlidePlaceholder {
    height: 70px !important;
    background-color: lightgray;
}

.ptdPlaceholderList  {
    visibility: hidden;
    height: 0 !important;
    width: 0 !important;
}
.ptdPlaceholderList.selectedPlaceholder {
    visibility: visible;
    height: auto !important;
    width: 100% !important;
}

.ptdLinkContainer, .ptdLinkColumn {
    min-height: 10px;
}

.ptdPlaceholderList .ptdPinLink {
    display: none;
}

div.ptdPinLink {
    vertical-align: top;
}

div.ptdPinLink a {
    /*font-family: Arial, Helvetica, sans-serif;*/
    /*font-size: 14px;*/
    color: #555555;
    text-decoration: none !important;
}

div.ptdPinLink a:hover, div.ptdPinLink a:focus {
    color: #0d76bd;
    text-decoration: underline !important;
}
div.editEnabled div.ptdPinLink a:hover, div.ptdPinLink div.editEnabled a:focus {
    color: inherit;
    text-decoration: none !important;
}

div[id$="divPinToDashboard"] a:focus,
div[id$="divPinToDashboard"] a:hover {
    color: #FFFFFF !important;
    background-color: #4c4456 !important;
}

#mstContent div[id$="divPinToDashboard"] a:focus,
#mstContent div[id$="divPinToDashboard"] a:hover {
    color: #FFFFFF !important;
    background-color: #4c4456 !important;
}

.iconimg {
    padding: 3px 5px 3px 3px;
}

.pinOptionsContainer {
    display: flex;
    place-content: center;
}

@media (max-width: 767px) {
    section .ptdSectionMenuWidgets > div {
        width: 100%;
    }
    .ptdPlaceholderList.selectedPlaceholder {
        width: 100% !important;
    }        
    section.ptdSectionMenuWidgets > div {
        width: 98%;
    }
    .ptdm-deleteBtn {
        width: 10vw;
    }
    div.pinOptionsContainer > span {
        margin: 5px -0.5vw !important;
    }
}

@media (min-width: 768px) and (max-width:991px) {
    section.ptdSectionDashboardLinks > div,
    div[id$="divDashboardLinksRight"] > div {
        width: 49%;
        float: left;
    }
    section.ptdSectionMenuWidgets > div {
        width: 48%;
    }
    div[id$="divDashboardLinksRight"] {
        width: 100% !important;
    }
    .ptdm-deleteBtn {
        width: 8vw;
    }
    div.pinOptionsContainer > span {
        margin: 5px -0.8vw !important;
    }
}

@media (min-width: 991px) {
    section.ptdSectionDashboardLinks > div {
        width: 33%;
    }
    section.ptdSectionMenuWidgets > div {
        width: 32%;
    }
}
@media (min-width: 1200px) {
    div.pinOptionsContainer > span {
        margin: 5px .1vw !important;
    }
}

/*END - Dashboard links */
/* START - Dashboard icons */
.icon-color-black {
    color: black;
}
.icon-color-white {color:#ffffff;}
.icon-color-orange {color:#ff6500;}
.icon-color-darkblue {color:#1863a3;}
.icon-color-purple {color:#831df6;}
.icon-color-red {color:#ff4d4d;}
.icon-color-lightblue {color:#3bb7ff;}
.icon-color-green {color:#0dc23d;}
.icon-color-pink {color:#f849b4;}

.icon-background-orange {
    color: #bbf0ff;
}

.icon-background-orangeborder {
    color:#0d76bd;
}

.icon-background-gray {
    color: #bbf0ff;
}

.icon-background-grayborder {
    color:#0d76bd;
}
icon-background-whiteborder {
    color:#fff;
}

.icon-background-purple {
    color: #bbf0ff;
}

.icon-background-purpleborder {
    color:#0d76bd;
}

.icon-background-red {
    color: #bbf0ff;
}

.icon-background-redborder {
    color:#0d76bd;
}

.icon-background-blue {
    color: #bbf0ff;
}

.icon-background-mediumblue {
    color: #0d76bd;
}

.icon-background-blueborder {
    color:#0d76bd;
}

.icon-background-green {
    color: #bbf0ff;
}

.icon-background-greenborder {
    color:#0d76bd;
}

/*END - Dashboard icons */

/*START - \USERCONTROLS\LMI\PinToDashboard.ascx */

.pin-to-dashboard  {
    height: 35px;
    /*background-color: #0D76BD;*/
    color: #4c4456;  /*gray;*/
    border: none;
    border-radius: 5px;
    padding: 5px;
    /*box-shadow: 3px 6px 6px 0px #777;*/
    font-size: 24px;
    cursor: pointer;
    text-decoration: none !important;
}

.pin-to-dashboard:focus {
        outline-color: #007bff;
        color: #4c4456;
    }

.pinned-to-dashboard {
    height: 35px;
    border: none;
    border-radius: 5px;
    /*background-color: #83d6fb;
    box-shadow: 0px 0px 6px 3px #777;*/
    padding: 5px;
    font-size: 24px;
    cursor: pointer;
    text-decoration: none !important;
    color: #007bff !important;
}

.ptdLittleTourButton {
    height:17px !important;
    display: inline-block;
    margin: auto;
    border-radius: 2px!important;
    box-shadow: 0px 0px 3px 1px #777 !important;
    padding: 2px !important;
    font-size: 12px !important;
    }

.ptdLTBspan {
    text-align: center;
}

.pinned-to-dashboard:hover {
    background-color: #007bff;
    color: white !important;
}

.pinned-to-dashboard:focus {
    /*background-color: #4c4456;*/
    color: #007bff;
    outline-color: #007bff;
}

.litTitle2 {
    text-decoration: none !important;
    font-size: 0.85em;
}

.spnHeaderTitle {
    cursor: pointer;
    font-size: 18px;
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
}

/* Darker background on mouse-over */
.pin-to-dashboard:hover {
    background-color: #4c4456;    
    color:white;
}

.pin-to-dashboard:active {
    background-color: #4c4456;
    color: white;
    /*box-shadow: 2px 4px 6px 0px #555;
    transform: translateY(4px);*/
}

/*Show greyed-out button when page is pinnable, but not with current options*/
.pin-to-dashboard.disabled {
  background-color: #9f9f9f !important;  
  color:#fff !important;
  transform: translateY(4px);
  cursor:not-allowed;
}

.pin_dashboard {
    display: inline-block;
    width: auto;
    max-width: 65px;
    float: left !important;
}

#gui_header .pin_dashboard a.pin-to-dashboard {
    background-color: #666;
    color: white;
}
#gui_header .pin_dashboard a.pin-to-dashboard:hover {
    background-color: white;
    color: #4c4456;
}

div.PTDDataVisualizationsSection > div.helpbutton2 {
    display: inline;
}

div.PTDDataVisualizationsSection > div.helpbutton2 > div[id*="divReqFields"] {
        display: none;
    }

div.PTDDataVisualizationsSection > div.helpbutton2 > div[id*="divHelpLink"] {
        text-align: left !important;
        margin-top: -10px;
        width: auto;
        min-width: 30px;
    }

div.PTDPinLinksSection > div.helpbutton2 {
    display: inline;
}

div.PTDPinLinksSection > div.helpbutton2 > div[id*="divReqFields"] {
    display: none;
}

div.PTDPinLinksSection > div.helpbutton2 > div[id*="divHelpLink"] {
    text-align: left !important;
    margin-top: -10px;
    width: auto;
    min-width: 30px;
}

.PTDSectionToggle {
    clear: both;
}
.PTDSectionToggle .button {
    width: 24px;
    /*height: 24px;*/
    border-radius: 3px;
    text-align: center;
    font-size: 1.6em;
    margin-left: 2px;
    cursor: pointer;
    position: relative;
    top: 3px;
}
.PTDSectionToggle > h3, .PTDSectionToggle > h2 {
    display: inline-block;
    position: relative;
}
.PTDSectionToggle > a.collapsed {
    background: none;
    padding-left: 0;
}
.PTDsectionTitle {
    cursor: pointer;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}
.ptdSection {
    overflow: auto;
}
.ptdSection.collapse {
    padding-left: 0;
}

section.ptdSectionMenuWidgets > div {
    display: inline-block;
    vertical-align: top;
    padding: 7px;
    margin: 5px;
    float: left;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: 1px solid #eee;
    background-color: white !important;
    box-shadow: 5px 10px 8px #888888;
    cursor: pointer;
}
.dash-header.portlet-header {
    font-size: 1.25rem;
}

.contrastWrapper{
    background: rgba(72,72,72,0.8);
    color: #fff !important;
    border-radius: 5px;
    padding: 10px;
}

.contrastWrapper a.LinkHand, .contrastWrapper a:link, .contrastWrapper a:visited, .contrastWrapper span.fa.fa-cog:before {
    color: #fff;
}


.fullTextPin {
    padding: 0px 0px 30px 0px;
}

/*END - \USERCONTROLS\PinToDashboard.ascx*/

/*START - \USERCONTROLS\PinToDashboardLinkListModal.ascx*/

@media (min-width: 992px) {
    .ptdm-dialog {
        min-width: 40rem;
        max-width: 600px !important;
    }
}

.modal-content.ptdm-content  {
    height: 90vh;
}
#spnTitleModal.dashlinks{
    font-size: 16px !important;    
    color: whitesmoke;
    font-weight: bold;
}
.modal-header-bg {    
    background-color: #0d76bd;
}
#PinListModalHeader.title {
    font-size: 25px;
    line-height: 1.33;
    color: #fff;
}
.ptdm-alert-instructional {
    color: #3651b7;
    background-color: #fff3c4;
}
.ptdm-alert {
    color: #FFF;
    background-color: #ff2525;
}
.display-none {
    display: none;
}

.display-none-imp {
    display: none !important;
}

.ptdm-body {
    height: 20rem;
    overflow-y: auto;
    overflow-x: hidden;
}
.ptdm-card-heading-bg {
    background-color: #EEEEEE;
}

.ptdm-active-color {
    border: 2px solid DeepSkyBlue;
    border-radius: 5px;
}

.ptdm-list-group-item, div.ptdLinkColumn.editEnabled > div.ptdPinLink > div {
    color: black;
    display: flex;
    margin: 5px;
    border: 1px solid black !important;
    border-radius: 8px !important;
    align-items: center;
}
div.pinLinkContainer {
    display: inline-block;
    width: 100%;
}
div.pinLinkContainer > a {
    line-height: 1.3em;
    max-height: 4em;
    overflow: hidden;
}
div.ptdLinkColumn.editEnabled > div.ptdPinLink {
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    cursor: pointer;
}
div.ptdLinkColumn.editEnabled > div.ptdPinLink > div {
    height: 75px;
    width: 100%;
    background-color: white;
}
div.ptdLinkColumn.editEnabled a {
    cursor: pointer;
}
div.ptdLinkColumn.editEnabled span.iconContainer {
    display: none !important;
}
.ptdm-list-group-item:hover {
    color: darkorange;
    cursor: context-menu;
}
.ptdm-list-group-item > span,
.ptdm-list-group-item > div {
    padding: 2px;
}
.state-icon, .qlo-tmp-adjustments {
    text-align: center;
}
input.pinDisplayOrder {
    height: 42px !important;
    width: 48px !important;
    min-width: 48px !important;
    font-size: 20px !important;
    font-weight: 500;
    border-radius: 5px;
    margin: 2px;
}
.ptdm-list-options {
    color: black;
    padding: clamp(.1em, .1em + 1vw, .7em);
    font-size: clamp(1em, 1em + 2vw, 2em);
    text-align: center;
}
li.ptdm-list-group-item div.pinOptionsContainer {
    width: 100vw;
}

div.pinOptionsContainer::before,
div.pinOptionsContainer::after {
    box-sizing: revert !important;
}

div.pinOptionsContainer > span:first-child {
    margin-left: 5px !important;
}
div.pinOptionsContainer > span:last-child {
    margin-right: 5px !important;
}
div.pinOptionsContainer > span.disabled {
    cursor: not-allowed !important;
}
span.optionSelected {
    background-color: #0d76bd;
    color: white;
    border-radius: 5px;
    padding: .5vw !important;
}
.ptdm-rename-wrapper {
    display: flex;
    width: 100%;
    padding-right: 8px;
}
input.pinRenameField {
    margin: 0 5px 0 0 !important;
    height: 42px !important;
    width: 100%;
}
input.pinRenameField {
    margin: 0 5px 0 0 !important;
    height: 42px !important;
    width: 100%;
}
.ptdm-delete-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.ptdm-color-wrapper {
    display: flex;
    width: 100%;
    place-items: center;
}
.ptdm-delete-message {
    width: 100%;
    font-size: 14px;
    line-height: 1.3;
    margin: auto;
}
.ptdm-deleteBtn {
    color: white;
    font-size: 18px;
    font-weight: bold;
    width: 5vw;
    border-radius: 5px;
    border-color: lightgray;
}
.ptdm-deleteYes {
    background-color: #0d76bd;
}
.ptdm-deleteNo {
    background-color: #c20000;
}

.fa-check-circle:before {
    color: #5cb85c !important;
}
.fa-times-circle:before {
   /* color: #c20000 !important;*/
}
.ptdm-tabs-link-text-decoration {    
    text-decoration: none !important;
    font-weight: bold;
}

.formbutt.ptdmodalbtn {
    font-size: 1.0em !important;
    border-radius: 12px !important;
}
.ptdmodalbtn.toggleButtonActive {
    background-color: #c20000 !important;
}
.modal-footer > .btn-group, section.ptdSectionDashboardLinks > .btn-group {
    margin: .25rem auto !important;
}
section.ptdSectionDashboardLinks > .btn-group {
    display: flex;
    justify-content: center;
}

.ptdNoData {
    text-align: center;
    width: 100% !important;
    padding: 10px !important;
}
.ptd-managed-pins-diabled {
    border: none !important;
    cursor: not-allowed !important;
}

.db_module.portlet {
    border-radius: 0 30px 0 0;
    border: solid 1px lightgrey;
}

div.dash-header.portlet-header {
    overflow: initial;
}

.portlet-header.userWidget {
    height: 45px;
}
.portlet-header.userWidget > span,
.portlet-header.userWidget > img,
.portlet-header.userWidget > h3 {
    display: inline-block;
    vertical-align:middle;
}
.portlet-header.userWidget > span {
    max-width: 15%;
    margin-top: -10px;
}
.portlet-header.userWidget > h3 {
    width: 70%;    
}
img.widget-icon {
    float: right;
    text-align: end;
    max-height: 40px;
    max-width: 50px;
    width: 15%;
}
.widgetContentIcon { 
    margin-top: 3px;   
    width: 100%;
    max-height: 20px;
    min-width: 20px;
}
.rcbLabel {
    display: contents;
}

.ptdSectionDashboardLinks.v20Dashboard .iconimg {
    margin-top: -6px;
    max-width: 28px;
}

.iconimg {
    margin-top: -6px;
    max-width: 28px;
}


.modal.v20Dashboard .ptdm-card-heading-bg {
    vertical-align: middle;
}
.modal.v20Dashboard .ptdm-card-heading-bg .iconimg {    
    margin-top: -7px;
    max-width: 30px;
}

.ptdSectionDashboardLinks.v20Dashboard > div[id$="divDashboardLinksLeft"] {
    width: 100% !important;
    display: block !important;
}

div.v20extendLink {
    border-top: 1px solid black;
    margin-top: -1px;
    padding: 10px 15px;
}
div.v20extendLink div.PTDLinkIcon, 
div.v20extendLink div.PTDLinkTitle {
    display: none;
}

.ptdSectionDashboardLinks.v20Dashboard > div[id$="divDashboardLinksLeft"] > div.v20extendLink {
    width: 100% !important;
}
.ptdV20Tabs {
    width: 100% !important;
    padding-bottom: 0px !important;
}

.ptdV20Tab {
    display: inline-block;
    padding: 1px 10px;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.ptdV20Tab.active {
    border: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 3px solid white;
    width: 100% !important;
}
.ptdConfigure {
    float: right;
    background: none;
    pointer-events: all !important;
    margin-top: -30px;
}

.ptdConfigureSlider {
    float: right;
    position: relative !important;
    background: none;
    pointer-events: all !important;
    margin-top: -35px;
}

.ServicesCardIcon {
    height: 70px;
    margin-top: -35px;
}

.ServicesCardHeader h4 {
    font-size: 1.2rem;
}

.ServicesCardHeader {
    padding: .75rem .75rem 0rem .75rem !important;
    font-size: 14px;
    line-height: 1.2rem;
}
ul.ServicesCardLinks {
    list-style-type: none;
}
.ServicesCardLinks span::before {
    -webkit-font-smoothing: antialiased;
    content: '\f111';
    color: rgba(0,0,0,.5); 
    position: absolute;
    left: 0.75rem;
    font-weight: 900;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}
.ServicesCardLinks li {
    position: relative;
    padding: .4rem .75rem .4rem 2.5rem;
    font-size: 14px;
}

.ServicesCardLinks li a {
    color: #555555 !important;
    text-decoration: none !important;
}

.ServicesCardH4 {
    color: #555555 !important;
    text-decoration: none !important;
}

.ServicesCardLinks li a:hover, .ServicesCardLinks li a:focus {
    color: #0d76bd !important;
    text-decoration: underline !important;
}

.highcharts-credits {
    cursor: default !important;
}

@media (max-width: 640px) {
    input.pinRenameField {
        margin: 4px 5px 0 0 !important;
        height: 42px !important;
        width: 100%;
    }
}

@media (min-width: 641px) and (max-width:1007px) {
    input.pinRenameField {
        margin: 8px 5px 0 0 !important;
        height: 42px !important;
        width: 100%;
    }
}

@media (min-width: 1008px) and (max-width:1400px) {
    input.pinRenameField {
        margin: 10px 5px 0 0 !important;
        height: 42px !important;
        width: 100%;
    }
}

@media (min-width:1401px) {
    input.pinRenameField {
        margin: 15px 5px 0 0 !important;
        height: 42px !important;
        width: 100%;
    }
}
ul.checked-list-box > li.ptdm-list-group-item {
    height: 75px !important;
}
/*END - \USERCONTROLS\PinToDashboardLinkListModal.ascx*/