* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5384616;
    background: #e0e7ef;
    color: #333333;
}
a, a:focus, a:hover  {
    color: inherit;
    text-decoration: none;
}

.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
}

.fixedButton {
    position: fixed;
    top: 10px;
    right: 260px;
    background: white;
    z-index: 11;
    text-align: center;
    padding: 5px;
    border-radius: 50%;
    color: black;
    font-size: 24px;
    box-shadow: 0 0px 28px 0 rgba(111, 110, 110, 0.3);
    width: 50px;
    height: 50px;
    border: 1px solid #dcdcdc;
}
.homebutton {
    position: fixed;
    top: 10px;
    right: 320px;
    background: white;
    z-index: 11;
    text-align: center;
    padding: 5px;
    border-radius: 50%;
    color: black;
    font-size: 24px;
    box-shadow: 0 0px 28px 0 rgba(111, 110, 110, 0.3);
    width: 50px;
    height: 50px;
    border: 1px solid #dcdcdc;
}

.userButton {
    position: fixed;
    top: 10px;
    right: 200px;
    background: white;
    z-index: 11;
    text-align: center;
    padding: 5px;
    border-radius: 50%;
    color: black;
    font-size: 24px;
    box-shadow: 0 0px 28px 0 rgba(111, 110, 110, 0.3);
    width: 50px;
    height: 50px;
    border: 1px solid #dcdcdc;
}


.content{
    padding: 20px 20px 0 20px;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.panel-heading {
    padding: 0;
    position: relative;
}

.data-table{
    padding: 20px;
    position: relative;
}
.panel-heading a.textCollapsed{
    padding: 20px 20px 20px 50px;
    font-size: 16px;
    display: block;
}

.panel-group-control .panel-heading > a.textCollapsed:before {
    content: '\e9c1';
    font-family: 'icomoon';
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    left: 20px;
    transition: all ease-in-out .2s;
    transform: rotate(180deg);;
}
.panel-group-control .panel-heading > a.textCollapsed.collapsed:before {
    transform: rotate(270deg);
}

.page2Content {
    position: fixed;
    width: 100%;
    max-width: 500px;
    top: 0;
    background: #fff;
    height: 100%;
    right: -82%;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    transition: all .3s ease-in-out;
}

.page2Content.visible {
    right: 0;
}

.page2User {
    position: fixed;
    width: 100%;
    max-width: 500px;
    top: 0;
    background: #fff;
    height: 100%;
    right: -82%;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
    transition: all .3s ease-in-out;
}

.page2User.visible {
    right: 0;
}

.panel-body {
    padding: 20px;
}
.peopleList .customCheckBox{
    margin-bottom: 10px;
    display: block;
}

.bg-success-400 {
    background-color: #66BB6A;
    border-color: #66BB6A;
    color: #fff;
}

.bg-error-400 {
    background-color: #fb2222;
    border-color: #66BB6A;
    color: #fff;
}

.bg-connect-400{
    background-color: #2d388c;
    border-color: #2d388c;
    color: #fff;
}

a.clickToConnectText {
    color: #0000ee;
    cursor: pointer;
}
.clickToConnectText {
    position: absolute;
    left: 140px;
    top: 0;
    bottom: 0;
    max-height: 20px;
    margin: auto;
    font-size: 14px;
}
.label {
    display: inline-block;
    font-weight: 500;
    padding: 2px 5px 1px 5px;
    line-height: 1.5384616;
    border: 1px solid transparent;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.1px;
    border-radius: 2px;
}


.customSwitchContain{
    margin-bottom: 10px;
}
.customSwitchContain:last-child{
    margin-bottom: 0;
}
.customSwitchText{
    font-weight: 600;
    padding-left: 10px;
}
/*Custom Switch Start*/
.customSwitch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 16px;
}

.customSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.customSwitch .slider {
    position: absolute;
    cursor: pointer;
    top: 2px;
    left: 0;
    right: 0;
    bottom: -2px;
    border-radius: 34px;
    border: 1px solid rgb(221, 221, 221);
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.customSwitch .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 1px;
    bottom: 0px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    border-radius: 50%;
}

.customSwitch input:checked + .slider {
    box-shadow: rgb(100, 189, 99) 0px 0px 0px 8px inset;
    border-color: rgb(100, 189, 99);
    background-color: rgb(100, 189, 99);
}

.customSwitch input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

/*Custom Switch End*/



.limiter {
    width: 100%;
    margin: 0 auto;
}
.container-login100 {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.container-log {
    width: 100%;
    min-height: 100vh;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.wrap-login100 {
    width: 960px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 100px;
}
.wrap-map {
    width: 960px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 100px;
    padding-top: 30px;
}

.login100-pic {
    width: 316px;
}
.login100-pic img {
    max-width: 100%;
    vertical-align: middle;
    border-style: none;
}
.login100-form {
    width: 290px;
}
.login100-form-title {
    font-size: 24px;
    color: #333333;
    line-height: 0;
    text-align: center;
    width: 100%;
    display: block;
    padding-bottom: 30px;
}
.login100-form-text{
    font-size: 14px;
    color: #465665;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    display: block;
    padding-bottom: 30px;
}
.validate-input {
    position: relative;
}

.login100-form-label{
    font-size: 14px;
    color: #465665;
    width: 100%;
    display: block;
}

.wrap-input100 {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: 10px;
}
.input100 {
    font-size: 15px;
    line-height: 1.5;
    color: #666666;
    display: block;
    width: 100%;
    background: #e6e6e6;
    height: 50px;
    border-radius: 25px;
    padding: 0 30px 0px 40px;
    border:none;
}
.input100:focus{
    outline: 0
}
.focus-input100 {
    display: block;
    position: absolute;
    border-radius: 25px;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 0px 0px;
    color: rgba(87,184,70, 0.8);
}

.symbol-input100 {
    font-size: 15px;
    display: flex;
    position: absolute;
    border-radius: 25px;
    bottom: -17px;
    left: -23px;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    pointer-events: none;
    color: #666666;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
.login100-form-btn {
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    background: #337ab7;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    transition: all 0.4s;
    border:none;
}

.login100-form-btn:focus{
    outline: 0;
    background: #337ab7;
}

.error{
    color: #e41414;
}

.success{
     color: #0f4c04;
}

.message {
    margin-left: 15px;
}

.info-text {
    margin-top: 15px;
    margin-left: 15px;
}
.info-text a{
    color: #337ab7;
}
/*Window Loading Start*/
.pLoader, .pLoader:before {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    z-index: 1112;
}
.pLoader:before {
    content: '';
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 111;
}
.pLoader .pLoaderInner{
    animation: rotation 1s infinite;
    transform: rotate(45deg);
    width: 50px;
    height: 50px;
    position: relative;
    z-index: 113;
}
.pLoader .shape1, .pLoader .shape2, .pLoader .shape3, .pLoader .shape4 {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.15);
}
.pLoader .shape1 {
    left: 0;
    background-color: #5C6BC0;
    animation: animation4shape1 0.3s ease 0s infinite alternate;
}
.pLoader .shape2 {
    right: 0;
    background-color: #8BC34A;
    animation: animation4shape2 0.3s ease 0.3s infinite alternate;
}
.pLoader .shape3 {
    bottom: 0;
    background-color: #F8B334;
    animation: animation4shape3 0.3s ease 0.3s infinite alternate;
}
.pLoader .shape4 {
    bottom: 0;
    right: 0;
    background-color: #CB2025;
    animation: animation4shape4 0.3s ease 0s infinite alternate;
}

@keyframes animation4shape1 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(5px, 5px);
    }
}
@keyframes animation4shape2 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-5px, 5px);
    }
}
@keyframes animation4shape3 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(5px, -5px);
    }
}
@keyframes animation4shape4 {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-5px, -5px);
    }
}
/*Window Loading End*/

@keyframes rotation {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.syncBtn {
    padding: 10px 40px;
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}

.search_categories{
  width: 100%;
  font-size: 13px;
  padding: 10px 8px 10px 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  appearance: none;
  margin-bottom: 10px;
}



.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;

}

.active, .accordion:hover {
  background-color: #ccc; 
}
.image {
    border: solid 1px;
    width: 100%;
}

.panel-map {
  display: none;
  background-color: white;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;
  background-color: #fff;
  margin-top: 1px;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
/*table{
        width: 100%;
}
th,td {
    border: 1px solid grey !important;
    padding: 10px !important;
}
th {
    text-align: center !important;
}*/
.slno {
    text-align: center !important;
    width: 10%;
}
.map_keyPay {
    width: 40%;
}
.headings
{
    font-style: italic;
}
.note {
    margin-left: 20px;
}
.map_div {
width: 100%;
}
.map_panel
{
    margin-left: 20px;
}

.help-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 20px;
}

.help-text .text{
    color: #337ab7 ;
}

.help-text .error{
    color: #e02020 ;
}
.help-text .support{
    color: #2d388c ;
}
.help-text a{
    margin-right: 20px;
    text-decoration: none !important;
}

.limiteraccordion .wrap-login100 {
        display: block;
    }
    .limiteraccordion .panel-map {
           background-color: rgba(77, 133, 202, 0.17);
    color: black;
    }
    .limiteraccordion .map_panel {
        margin-left: 0px;
        padding-left: 20px;
        padding-top: 10px;
    }
    .limiteraccordion .panel-map {
        display: block;
        margin-bottom: 0px;
    }
    .limiteraccordion .panel-group .panel-heading {
/*    background-color: rgba(77, 132, 202, 0.9294117647058824);*/
/*    color: #fff;*/
        cursor: pointer;
/*        padding: 18px;*/
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }
    .limiteraccordion .panel-heading:active, .limiteraccordion .panel-heading:hover {
        background-color: rgba(77, 133, 202, 0.17);
    }
    .limiteraccordion a:focus, a:hover {
    text-decoration: none;
    }
    
    .limiteraccordion .panel {
    border: none;
            margin-bottom: 15px !important;
    }
    
    .limiteraccordion .panel-group-control.panel-group-control-right .panel-heading:before {
    left: auto;
    right: 15px;
    }
    
    .limiteraccordion .panel-group-control .panel-heading.collapsed:before {
        content: "\e9c5";
            margin-top: -8px;
    margin-right: 4px;
    }
    .limiteraccordion .panel-group-control .panel-heading:before {
        content: "\ee61";
        font-family: icomoon;
        position: absolute;
        top: 50%;
        margin-top: -5px;
        left: 8px;
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .limiteraccordion .panel-title, th {
        font-weight: 600;
     }
    
    .limiteraccordion .headings {
    color: rgb(76, 131, 202);
        font-weight: 600;
}

.mapping .panel .row:hover .col-sm-5 .edit {
    display: block;
    cursor: pointer;
}

.edit {
    display: none;
}

.mapping{
    margin-bottom: 50px;
    margin-top: 50px;
    background: white;
    border-radius: 5px;
    position: relative;
}

.mapping .row {
    cursor: pointer;

}

/*Custom Checkbox and Radio Start*/
.customCheckBox,
.customRadio {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    margin: 0;
    color: #333;
}

.input-group-addon .customCheckBox,
.input-group-addon .customRadio {
    width: 18px;
    height: 18px;
    padding-left: 0;
}

.customCheckBox input,
.customRadio input {
    opacity: 0;
    left: 0;
    z-index: -1;
    position: absolute;
}

.customCheckBox .customCheckSpan,
.customRadio .customRadioSpan {
    color: #455a64;
    border: 2px solid #607d8b;
    border-radius: 2px;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 1px;
    left: 0;
}

.customRadio .customRadioSpan {
    border-radius: 100%;
}

.customCheckSpan:before,
.customRadioSpan:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    opacity: 0;
    border-width: 0 0 2px 2px;
    border-color: #455a64;
    border-style: solid;
    width: 9px;
    height: 5px;
    transform: rotate(-45deg);
    transition: all ease-in-out .15s;
}

.customRadioSpan:before {
    left: 3px;
    border: 4px solid;
    border-color: inherit;
    width: 0;
    height: 0;
    border-radius: 100%;
}

.customCheckBox input:checked + .customCheckSpan:before,
.customRadio input:checked + .customRadioSpan:before {
    opacity: 1;
}

/*/custom checkbox, radio btn*/

.details h5 {
    font-weight: 400;
}

.mapping .panel {
    border-radius: 5px;
    box-shadow: 0px 0px 7px 4px rgba(0, 0, 0, 0.07);
}


.mapping-link {
    left: 0;
    display: inline-block;
    padding-left: 10px;
    color: #337ab7;
}

.change-mapping {
    left: 0;
    display: inline-block;
    padding-left: 10px;
    color: #337ab7;
    font-size: 11px;
}

.pricing-img {
    margin-top: 30px;
    margin-bottom: 20px;
}

.plan-block .main-price {
    padding: 0 10% 30px;
}

.goal a,
.main-price span {
    display: block;
}

.price-figure {
    margin-left: -12px;
    color: #0f1719;
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -2px;
    line-height: 55px;
}

.price-figure small {
    display: inline-block;
    font-size: 30px !important;
    font-weight: 400;
    line-height: 30px;
    position: relative;
    top: -5px;
}

.main-price .price-value,
.main-price .price-value span {
    display: inline;
}

.goal a,
.main-price span {
    display: block;
}

.price-term {
    font-size: 14px;
    margin-bottom: 15px;
    min-height: 19px;
    font-style: italic;
    font-weight: bolder;
}

.goal a {
    background: #28A5ED;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 0;
    text-transform: uppercase;
    width: 100%;
    text-decoration: none;
}
.pricing-table ul>li {
    border-bottom: none;
}

.contentdesign {
        width: 230px;
        display: inline-block;
        margin: 30px;
    }

.alertAlignItem{
    position: absolute;
    left: 0;
    right: 0;
    width: calc(100% - 54%);
    margin: auto;
    margin-top: 10px;
}

.error-div{
    background: #ff3526;
    border-radius: 4px;
    padding: 9px;
    color: #ffffff;
    text-align: justify;
    font-size: 14px;
    margin-bottom: 15px;
}



/* === 2026-05-02 — Transparent glass icons + IH chat button + panels === */
.fixedButton, .homebutton, .userButton {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(26,58,138,0.22) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.28) !important;
    color: rgba(26, 58, 138, 0.88) !important;
}
.ihButton {
    position: fixed;
    top: 10px;
    right: 140px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 11;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.28);
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255,255,255,0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
}
.ihButton img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 50%;
}
.ihButton:hover, .fixedButton:hover, .homebutton:hover, .userButton:hover {
    background: rgba(255, 255, 255, 0.30) !important;
    opacity: 1;
}
.panel-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #888;
    line-height: 1;
    z-index: 200;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.panel-close-btn:hover {
    background: rgba(0,0,0,0.07);
    color: #333;
}
.page2Content, .page2User {
    /* position kept as fixed (see original rules above) */
}
/* IH Chat Panel */
#ihChatPanel {
    position: fixed;
    top: 65px;
    right: 0;
    width: 21vw;
    min-width: 280px;
    max-width: 65vw;
    height: calc(100vh - 65px);
    background: #fff;
    z-index: 10;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    display: none;
    flex-direction: column;
}
.ih-chat-header {
    background: #1a3a8a;
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ih-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f8fafc;
}
.ih-chat-input-row {
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    background: #fff;
}

/* Resize handle */
#ihResizeHandle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    background: rgba(26,58,138,0.08);
    transition: background 0.15s;
    z-index: 20;
}
#ihResizeHandle:hover {
    background: rgba(26,58,138,0.22);
}

/* ---- 2026-05-03 Infrahub header polish (v2 per Stuart feedback) ---- */
/* 1) Cog matches home + person glass style (NOT solid navy).
      Make all three MORE transparent than before (alpha 0.08 vs 0.18).      */
.fixedButton,
.homebutton,
.userButton {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(26, 58, 138, 0.22) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18) !important;
    color: rgba(26, 58, 138, 0.88) !important;
}
.fixedButton i,
.homebutton i,
.userButton i {
    color: rgba(26, 58, 138, 0.88) !important;
}
.fixedButton:hover,
.homebutton:hover,
.userButton:hover {
    background: rgba(255, 255, 255, 0.20) !important;
    opacity: 1 !important;
}

/* 2) Payroll Hub logo badge (.ihButton) restored to TOP-RIGHT next to the
      other nav buttons, with a more-transparent white background.
      Override any previous bottom-right / solid-navy styling.             */
.ihButton {
    position: fixed !important;
    top: 10px !important;
    right: 140px !important;
    bottom: auto !important;
    left: auto !important;
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    z-index: 11 !important;
    text-align: center !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(26, 58, 138, 0.22) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    text-decoration: none !important;
    animation: none !important;
    transform: none !important;
}
.ihButton img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    background: transparent !important;
    padding: 0 !important;
}
.ihButton:hover {
    background: rgba(255, 255, 255, 0.20) !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 3) NEW: bottom-right "Support" pill badge matching the shape of the grey
      Zendesk Support widget it covers. Clicking it opens the Infrahub AI
      chat panel. The Zendesk widget is hidden behind this badge via
      z-index + an absolutely-positioned overlay.                           */
#ihSupportPill {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 2147483646 !important;     /* below ihChatPanel, above iframe */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px 10px 14px !important;
    border-radius: 24px !important;     /* pill, same curvature as Zendesk */
    background: #1a3a8a !important;     /* Infrahub navy */
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 24px rgba(26, 58, 138, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap !important;
    animation: ih-support-pulse 2.6s ease-in-out infinite;
}
#ihSupportPill:hover {
    background: #2563eb !important;
    transform: translateY(-1px);
    animation: none;
}
#ihSupportPill .ih-support-q {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-right: 2px !important;
}
#ihSupportPill .ih-support-logo {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    padding: 2px !important;
    margin-right: 2px !important;
    object-fit: contain !important;
}
@keyframes ih-support-pulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(26, 58, 138, 0.45); }
    50%      { box-shadow: 0 6px 36px rgba(37, 99, 235, 0.78),
                           0 0 0 6px rgba(37, 99, 235, 0.14); }
}

/* Hide any top-left raw fallback text link if it leaks through */
.ih-ai-chat-link { display: none !important; }

/* ---- 2026-05-03 Infrahub header polish (v3 per Stuart feedback) ----
 *  - Widen chat panel resize range so users can actually maximise it
 *  - Hide #ihSupportPill when chat panel is open (one badge at a time,
 *    stops pill overlapping the "Ask me anything..." input row)
 *  - Extra belt-and-braces: hide any leftover "Open Infrahub AI Chat"
 *    raw text link via CSS (belt for cached index.php renders)
 */

/* Chat panel — widen resize envelope */
#ihChatPanel {
    min-width: 360px !important;
    max-width: 85vw !important;
    /* keep default width at 32vw so it opens at a reasonable size */
    width: 32vw !important;
}
/* Make the resize handle more visible so users know they CAN drag it */
#ihResizeHandle {
    width: 8px !important;
    background: rgba(26, 58, 138, 0.18) !important;
}
#ihResizeHandle::before {
    content: "";
    position: absolute;
    left: 2px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 44px;
    border-radius: 2px;
    background: rgba(26, 58, 138, 0.55);
}
#ihResizeHandle:hover {
    background: rgba(26, 58, 138, 0.45) !important;
}

/* Hide the support pill while chat panel is open — declared via a body-level
   data attribute toggled by JS in openIHChat() / closeIHChat() */
body[data-ih-chat-open="1"] #ihSupportPill {
    opacity: 0 !important;
    transform: translateX(60px) !important;
    pointer-events: none !important;
}
#ihSupportPill {
    transition: opacity 0.22s ease, transform 0.22s ease, background 0.2s ease !important;
}

/* Belt + braces: hide any stray "Open Infrahub AI Chat" raw text link
   that a cached / alternate template render might still emit */
a.ih-ai-chat-link,
a[title="Open Infrahub AI Chat"] {
    display: none !important;
    visibility: hidden !important;
}

/* ---- 2026-05-03 Infrahub support pill v4 — FULL COVER ----
 * Feedback: pill must fully cover the grey EH Support widget AND the cyan
 * secondary circle peeking out behind it. Solution: a wider, taller pill
 * sitting on top of an opaque background shield that matches the page bg
 * so NOTHING leaks through. Both fade when chat panel is open. */

#ihSupportShield {
    position: fixed !important;
    bottom: 10px !important;
    right: 10px !important;
    width: 240px !important;
    height: 90px !important;
    z-index: 2147483645 !important;
    pointer-events: none !important;  /* let clicks pass through to pill */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Opaque page-colour rectangle behind the pill — hides any widget
       underneath. Rounded so it doesn't look like a rectangular patch. */
    background: #f1f4f8 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08) !important;
}

/* Upsize the pill + ensure it sits on top of the shield */
#ihSupportPill {
    position: static !important;              /* shield handles placement */
    pointer-events: auto !important;
    padding: 14px 26px 14px 20px !important;  /* larger hit-area */
    font-size: 16px !important;               /* larger "Support" text */
    border-radius: 22px !important;
    min-width: 180px !important;
    min-height: 62px !important;
    justify-content: center !important;
    z-index: 2147483647 !important;           /* above shield */
    gap: 10px !important;
    box-shadow: 0 10px 32px rgba(26, 58, 138, 0.55) !important;
}
#ihSupportPill .ih-support-q {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
}

/* Hide BOTH shield + pill when chat panel is open */
body[data-ih-chat-open="1"] #ihSupportShield,
body[data-ih-chat-open="1"] #ihSupportPill {
    opacity: 0 !important;
    transform: translateX(60px) !important;
    pointer-events: none !important;
}
#ihSupportShield {
    transition: opacity 0.22s ease, transform 0.22s ease !important;
}