﻿:root {
    /*RH: Set up CSS variables so that they only need editing on one place and can also be set/ modified easily in javascript.*/
    /*You can then use these as follows within any stylesheet:

        Example:

        .fixed-background {
           background-image: var(--background-image-url);
           background-color: var(--background-color);
        }

    */

    /*Edit these per client, either here, or in javascript*/
    /*e.g. 
        document.documentElement.style.setProperty('--background-color', 'pink');
    */

    /*--background-image-url: url('../img/arm-background-04.png'); */
    --background-image-url: 'none';
    --background-color: #F0ECE1; /* background color selectable by variable name --background-color*/
}



/* For Microsoft Edge and Internet Explorer */
input[type="password"]::-ms-reveal {
    display: none;
}

/* For Google Chrome, Safari, and potentially other WebKit/Blink-based browsers */
input[type="password"]::-webkit-credentials-store {
    display: none;
}

/*:root {
    font-size: 120%;
}*/

input {
    margin-bottom: -1px; /* Negative margin pulls elements closer */
}

.errorShow {
    font-size: small;
}

.tab-navigation-buttons {
    text-align: center;
    margin-top: 20px;
}

    .tab-navigation-buttons .btn {
        margin: 0 5px;
    }

.transition_hide {
    transition: opacity 0.5s ease, max-height 0.5s ease, visibility 0.5s;
    opacity: 1;
    visibility: visible;
    max-height: 1500px; /* Adjust this value based on your content */
    overflow: hidden;
}

    .transition_hide.hidden {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }

/*    .transition_hide.d-none {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }*/


body {
    overflow-y: scroll;
}

    body ul {
        list-style-type: none;
    }


#frmAppIndividual {
    padding-top: 0px; /* Adjust this value based on the height of your tab bar */
}
    /*#ulMyTab .nav-link.active {
    background-color: #e9ecef;*/ /* Slightly darker gray for active tab */
    /*border-bottom-color: transparent;*/ /* Optionally remove the bottom border for active tab */
    /*}*/
    /*#ulMyTab .nav-link:hover {
    background-color: #dee2e6;*/ /* Slightly darker gray for hover state */
    /*}*/
    /*.button-outline {
    display: inline-block;
    padding: 6px 12px;*/ /* Adjust padding as needed */
    /*margin: 5px;*/ /* Optional spacing */
    /*border: 1px solid orange;*/ /*#007bff;  Bootstrap primary color for outline */
    /*border-radius: 4px;*/ /* Rounded corners like Bootstrap buttons */
    /*color: #007bff;*/ /* Text color */
    /*text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;*/ /* Transparent background */
    /*text-decoration: none;*/ /* Removes underline from links */
    /*cursor: pointer;*/ /* Cursor like a button */
    /*transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

    .button-outline:hover, .button-outline:focus {
        color: #0056b3;*/ /* Darker shade for hover state */
    /*background-color: #e9ecef;*/ /* Light background on hover */
    /*border-color: #0056b3;
    }*/



    .underline {
    text-decoration: underline;
}


/* fatten sup the document select menu icons */
button > i {
    line-height: 2 !important;
}

    /*a > i:before {
        content: "";
        position: absolute;
        top: -10px;*/ /* Adjust as needed */
        /*bottom: -10px;*/ /* Adjust as needed */
        /*left: -10px;*/ /* Adjust as needed */
        /*right: -10px;*/ /* Adjust as needed */
    /*}*/

.error-message {
    color: #dc3545;
    font-size: 12px;
}


/*"I want to" - was in Field -25202*/

a.disabled, a.p.disabled, a.i.disabled {
    pointer-events: none !important;
    cursor: default !important;
    background-color: lightgrey !important;
}

/* Chart.js - This is required because the chart bundle tries to insert an inline style in the head of the document */
@-webkit-keyframes chartjs-render-animation {
    from
    {
        opacity: 0.99
    }

    to {
        opacity: 1
    }
}

@keyframes chartjs-render-animation {
    from {
        opacity: 0.99
    }

    to {
        opacity: 1
    }
}

.chartjs-render-monitor {
    -webkit-animation: chartjs-render-animation 0.001s;
    animation: chartjs-render-animation 0.001s;
}

/* Password Change html */
.BOX_NONE {
    box-shadow: none;
}

.BRD_DASH {
    border-bottom-style: dashed;    
}

.HGT_20 {
    height: 20px !important;
}

/* LOG IN */
.PAD_RT0 {
    padding-right:0rem;
}

.PAD_TOP60 {
    padding-top: 60px;
}

/* For Fields */
/*TD*/
.CLA_010 {
    cursor: pointer;
}

/*TD*/
.CLA_142 {

    background-color: #008643;
}
/*TD*/
.CLA_143 {
   
    background-color: #FC5400;
    height: 8px;
}

/*TD*/
.CLA_147 {
    width: 100%;

}
/*TD*/
.CLA_150 {
    width: 75px;
    height: 75px;
    font-size: 0.95rem;
    float: right;

}
/*TD*/
.CLA_151 {
    width: 75px;
    height: 75px;
    font-size: 0.95rem;
    float: right;

}
/*TD*/

.CLA_005 {
    color: #636466 !important;
    width: 100%;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_006 {
    color: #636466 !important;
}

.CLA_013 {
    font-size: 24px;
}

.CLA_014 {
    font-size: 24px;
    color: #636466 !important;
}

.CLA_015 {
    height: 10rem;
}

.CLA_016 {
    max-height: calc(100vh - 280px)
}

.CLA_017 {
    max-height: calc(100vh - 310px)
}

.CLA_018 {
    max-height: calc(100vh - 310px);
    color: #636466;
}

.CLA_019 {
    max-height: calc(100vh - 366px);
    min-height: calc(100vh - 366px);
}

.CLA_020 {
    max-height: calc(100vh - 370px);
    color: #636466;
}

.CLA_021 {
    max-height: calc(100vh - 370px);
    color: #636466;
    width: 100%;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_022 {
    max-height: calc(100vh - 385px)
}

.CLA_023 {
    max-height: calc(100vh - 425px);
    color: #636466;
}

.CLA_024 {
    max-height: calc(100vh - 455px);
}

.CLA_025 {
    max-height: calc(100vh - 495px);
    color: #636466;
}

.CLA_026 {
    max-height: calc(100vh - 495px);
    min-height: calc(100vh - 495px);
    color: #636466;
    width: 100%;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_027 {
    max-height: calc(100vh - 510px);
    min-height: calc(100vh - 510px);
    color: #636466;
    width: 100%;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_028 {
    max-height: calc(100vh - 515px);
    color: #636466;
}

.CLA_029 {
    max-height: calc(100vh - 520px);
    min-height: calc(100vh - 520px);
    color: #636466;
    width: 100%;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_030 {
    max-height: calc(100vh - 528px);
    color: #636466;
}

.CLA_031 {
    max-height: calc(100vh - 545px);
    color: #636466;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_032 {
    max-height: calc(100vh - 550px);
    min-height: calc(100vh - 550px);
    color: #636466;
    width: 100%;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_033 {
    max-height: calc(100vh - 588px);
    min-height: calc(100vh - 588px);
    color: #636466;
    width: 100%;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_034 {
    max-height: calc(200vh - 825px);
    color: #636466;
}

.CLA_035 {
    max-width: 150px;
}

.CLA_036 {
    max-width: 150px;
    overflow: hidden;
}

.CLA_037 {
    min-height: calc(100vh - 530px);
    max-height: calc(100vh - 530px);
    color: #636466;
}

.CLA_038 {
    min-width: 75px;
}

.CLA_039 {
    min-width: 350px;
}

.CLA_040 {
    padding-right: 0px;
}

.CLA_041 {
    padding-right: 0px;
    z-index: 1;
}

.CLA_042 {
    padding-right: 30px;
}

.CLA_043 {
    position: sticky;
    left: -1px;
    width: 30px;
    min-width: 30px;
    z-index: 1;
}

.CLA_044 {
    position: sticky;
    left: -1px;
    width: 30px;
    min-width: 30px;
    z-index: 2;
    padding-right: 0px;
}

.CLA_045 {
    width: 95%;
}

.CLA_046 {
    word-wrap: break-word;
    table-layout: fixed;
    max-height: calc(100vh - 510px);
    min-height: calc(100vh - 510px);
    color: #636466;
    width: 100%;
    border-right-width: 1px;
    border-radius: 5px;
}

.CLA_047 {
    z-index: 1;
}

.CLA_048 {
    z-index: 1005;
}

.CLA_049 {
    z-index: 2
}


.CLA_057 {
    background-color: #f9f9f9;
}

.CLA_058 {
    background-color: #e9ecef !important;
}

.CLA_059 {
    background-color: #fff;
}

.CLA_060 {
    background-color: white;
}

.CLA_061 {
    border-bottom-style: dashed;
}

.CLA_062 {
    border-color: #FFF;
    background-color: #FFF;
}

.CLA_063 {
    border-color: red;
}

.CLA_064 {
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: lightgrey;
}

.CLA_065 {
    color: #636466;
}

.CLA_066 {
    color: #FC5400 !important;
}

.CLA_068 {
    color: #0f87ff;
}

.CLA_069 {
    color: #a9a9a9;
}

.CLA_071 {
    color: black;
    font-size: 0.8rem;
}

.CLA_072 {
    cursor: none;
}

.CLA_073 {
    display: none !important
}

.CLA_074 {
    display: none;
}

.CLA_075 {
    display: table;
}

.CLA_076 {
    float: right;
}

.CLA_077 {
    font-size: 13px;
    line-height: 1.6;
    color: #303030;
    margin-bottom: 0;
    margin-top: 0;
    vertical-align: top;
    white-space: nowrap;
    margin-left: 15px
}

.CLA_078 {
    font-size: 24px;
}

.CLA_079 {
    font-size: 32px;
}

.CLA_080 {
    font-size: 1.1rem;
}

.CLA_081 {
    font-size: 1.2rem;
}

.CLA_082 {
    font-size: 1rem;
}

.CLA_083 {
    font-size: 24px;
}

.CLA_084 {
    font-size: 32px;
}

.CLA_085 {
    font-size: larger;
}

.CLA_086 {
    font-size: xx-large;
}

.CLA_087 {
    font-weight: 900;
}

.CLA_088 {
    font-weight: 600;
}

.CLA_089 {
    font-weight: bold;
    color: red;
}

.CLA_090 {
    height: 10rem;
}

.CLA_091 {
    height: 1px;
    border-bottom-color: #f3f3f3;
}

.CLA_092 {
    height: 300px;
}

.CLA_093 {
    height: 15px;
}

.CLA_094 {
    height: 30px;
    width: 30px;
}

.CLA_095 {
    height: 70px;
}

.CLA_096 {
    height: 8px;
}

.CLA_097 {
    line-height: 1rem !important
}

.CLA_098 {
    line-height: 45px;
}

.CLA_099 {
    line-height: 62px;
}

.CLA_100 {
    margin-bottom: 0rem
}

.CLA_101 {
    max-height: 200px;
}

.CLA_102 {
    max-height: 300px;
    min-height: 300px;
}

.CLA_103 {
    max-height: 360px;
    min-height: 360px;
}

.CLA_104 {
    min-height: 101px;
}

.CLA_105 {
    min-height: 200px;
    font-size: 12px;
}

.CLA_106 {
    min-height: 30px;
}

.CLA_107 {
    min-height: 340px;
    max-height: 340px;
    min-width: 500px;
    max-width: 500px;
}

.CLA_108 {
    min-height: 85px;
    max-height: 85px;
    min-width: 150px;
    max-width: 150px;
}

.CLA_109 {
    min-width: 245px;
}

.CLA_110 {
    min-width: 100px;
}

.CLA_111 {
    min-width: 150px;
}

.CLA_112 {
    min-width: 175px;
}

.CLA_113 {
    min-width: 200px;
}

.CLA_114 {
    padding-bottom: .5rem;
    padding-top: .5rem;
}

.CLA_115 {
    padding-left: 1rem;
}

.CLA_116 {
    padding-top: 0.5rem;
    padding-right: 0.5rem;
}

.CLA_117 {
    padding-top: 0.5rem;
    padding-bottom: 0rem;
}

.CLA_118 {
    padding-top: 0px;
    text-align: right;
    border-top: 1px solid;
    border-top-style: dashed;
}

.CLA_119 {
    padding-top: 0px;
    text-align: right;
}

.CLA_120 {
    padding-top: 0px;
    padding-bottom: 0px;
    min-height: 35px;
}

.CLA_121 {
    padding-top: 14px;
}

.CLA_122 {
    padding-top: 3px;
}

.CLA_123 {
    padding-top: 8px;
}

.CLA_124 {
    padding: .5rem;
}

.CLA_125 {
    padding: 0px;
    width: 100%
}

.CLA_126 {
    padding: .3rem;
}

.CLA_127 {
    padding: .5rem;
}

.CLA_128 {
    padding: 0rem 0.5rem;
    min-height: 130px;
    max-height: 160px;
}

.CLA_129 {
    padding: 0rem 0.5rem
}

.CLA_130 {
    padding: 0rem;
}

.CLA_131 {
    padding: 5px;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.6;
    color: #2a2a2a;
    margin-top: 0px;
    margin-bottom: 0;
    text-align: right;
}

.CLA_132 {
    text-align: right;
    border-top: 1px solid;
    border-bottom: 2px solid;
    border-top-style: dashed;
    border-bottom-style: solid;
}

.CLA_133 {
    text-align: right;
}

.CLA_134 {
    text-align: right;
}

.CLA_135 {
    text-align: right;
    background-color: #e9ecef !important;
}

.CLA_136 {
    text-align: right;
    display: none;
}

.CLA_137 {
    text-align: right;
    font-size: 1rem;
}

.CLA_138 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    word-wrap: break-word !important;
    max-width: 700px
}

.CLA_139 {
    vertical-align: baseline !important;
}

.CLA_140 {
    vertical-align: top !important;
}

.CLA_141 {
    white-space: pre-line;
}

.CLA_145 {
    width: 100%;
    border-right: 5px solid white;
}

.CLA_146 {
    width: 100%;
}

.CLA_148 {
    width: 240px;
}

.CLA_149 {
    width: 0%;
    background: url(img/arm-background-04.png) repeat center top;
}

.CLA_152 {
    word-wrap: break-word;
    max-width: 700px
}

.CLA_153 {
    z-index: 1;
} 
/*For HTML pages*/

.CLA_201 {
    color: #636466 !important;
}

.CLA_202 {
    font-size: 24px;
    color: #636466 !important;
}

.CLA_203 {
    max-height: calc(100vh - 210px)
}

.CLA_204 {
    max-height: calc(100vh - 260px);
    min-height: calc(100vh - 260px);
}

.CLA_205 {
    max-height: calc(100vh - 270px);
    min-height: calc(100vh - 270px);
}

.CLA_206 {
    max-height: calc(100vh - 275px)
}

.CLA_207 {
    max-height: calc(100vh - 315px);
    min-height: calc(100vh - 455px);
}

.CLA_208 {
    max-height: calc(100vh - 345px);
    min-height: calc(100vh - 345px);
}

.CLA_209 {
    max-height: calc(100vh - 170px);
    min-height: calc(100vh - 170px);
}

.CLA_210 {
    max-height: calc(100vh - 400px);
    min-height: calc(100vh - 400px);
}

.CLA_211 {
    max-height: calc(100vh - 405px);
    min-height: calc(100vh - 405px);
}

.CLA_212 {
    max-height: calc(100vh - 480x);
    min-height: calc(100vh - 480px);
}

.CLA_213 {
    max-height: calc(100vh - 630px);
    min-height: calc(100vh - 380px);
}

.CLA_214 {
    max-height: calc(100vh - 630px);
    min-height: calc(100vh - 395px);
}

.CLA_215 {
    min-height: calc(100vh - 473px);
}

.CLA_216 {
    min-height: calc(100vh - 473px);
    max-height: calc(100vh - 473px);
}

.CLA_217 {
    z-index: 1002 !important;
}

.CLA_218 {
    z-index: 1003 !important;
}

.CLA_219 {
    background-color: #FC5400;
}

.CLA_220 {
    background-color: #f9f9f9;
}

.CLA_221 {
    background-color: #e9ecef !important;
}

.CLA_222 {
    background: #e9ecef;
    border: #d7d7d7;
}

.CLA_223 {
    background: url(img/AU/AU_Logo_2.png ) no-repeat;
    Height: 65px;
}

.CLA_224 {
    border-bottom-style: dashed;
}

.CLA_225 {
    border-right-style: dashed;
    border-right-width: thin;
}

.CLA_226 {
    border-width: 2px;
}

.CLA_227 {
    border-width: 2px;
    margin-top: -7px;
}

.CLA_228 {
    color: #636466 !important;
}

.CLA_229 {
    color: #FC5400 !important;
}

.CLA_230 {
    color: #FC5400
}

.CLA_231 {
    color: #FC5400 !important;
}

.CLA_237 {
    color: black;
    font-size: 1rem;
}

.CLA_238 {
    display: block;
    height: 259px;
    width: 171px;
}

.CLA_239 {
    display: inline;
}

.CLA_240 {
    display: none;
}

.CLA_241 {
    display: none !important;
}

.CLA_242 {
    display: none;
}

.CLA_243 {
    display: table;
    margin: 0 auto;
}

.CLA_244 {
    font-size: 13px;
    line-height: 1.6;
    color: #303030;
    margin-bottom: 0;
    margin-top: 0;
    vertical-align: top;
    white-space: nowrap;
    margin-left: 15px
}

.CLA_245 {
    font-size: 1rem;
}

.CLA_246 {
    font-size: 24px;
}

.CLA_247 {
    font-size: xx-large;
}

.CLA_248 {
    font-weight: 600;
}

.CLA_249 {
    font-weight: 600;
}

.CLA_250 {
    height: 1px;
    border-bottom-color: #f3f3f3;
}

.CLA_251 {
    margin-bottom: 10px !important;
}

.CLA_252 {
    margin-top: -10px;
}

.CLA_253 {
    max-height: 200px;
}

.CLA_254 {
    max-height: 300px;
    min-height: 300px;
}

.CLA_255 {
    max-height: 320px;
    min-height: 320px;
}

.CLA_256 {
    max-height: 360px;
    min-height: 320px;
}

.CLA_257 {
    max-height: 360px;
    min-height: 360px;
}

.CLA_257a {
    max-height: 380px;
    min-height: 380px;
}

.CLA_258 {
    min-height: 1112px;
}

.CLA_259 {
    min-height: 455px;
}

.CLA_260 {
    min-height: 119px;
}

.CLA_261 {
    min-height: 1248px;
    max-height: 1248px;
}

.CLA_262 {
    min-height: 1250px;
    max-height: 1250px;
}

.CLA_263 {
    min-height: 300px;
}

.CLA_264 {
    min-height: 30px;
}

.CLA_265 {
    min-height: 485px;
}

.CLA_266 {
    min-height: 632px;
}

.CLA_267 {
    padding-bottom: 5px;
}

.CLA_268 {
    padding-bottom: .5rem;
    padding-top: .5rem;
}

.CLA_269 {
    padding-right: 0rem;
}

.CLA_270 {
    padding-right: 100px;
}

.CLA_271 {
    padding-top: 0.5rem;
    padding-bottom: 0rem;
}

.CLA_272 {
    padding-top: 0px;
    text-align: right;
}

.CLA_273 {
    padding-top: 14px;
}

.CLA_274 {
    padding: 0px;
    width: 100%
}

.CLA_275 {
    padding: 5px;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.6;
    color: #2a2a2a;
    margin-top: 0px;
    margin-bottom: 0;
    text-align: right;
}

.CLA_276 {
    position: absolute;
    inset: 0px;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    z-index: -1;
}

.CLA_277 {
    position: absolute;
    will-change: transform;
    top: 0px;
    left: 0px;
    transform: translate3d(86px, 43px, 0px);
}

.CLA_278 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    z-index: -1;
}

.CLA_279 {
    position: absolute;
    width: 1000000px;
    height: 1000000px;
    left: 0;
    top: 0
}

.CLA_280 {
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0
}

.CLA_281 {
    text-align: right;
    border-top: 1px solid;
    border-bottom: 2px solid;
    border-top-style: dashed;
    border-bottom-style: solid;
}

.CLA_282 {
    text-align: right;
    Display: none;
}

.CLA_283 {
    text-align: right;
}

.CLA_284 {
    text-align: right;
}

.CLA_285 {
    text-align: right;
    background-color: #e9ecef !important;
}

.CLA_286 {
    text-align: right;
    font-size: 1rem;
}

.CLA_287 {
    width: 100%;
    border-right: 5px solid white;
}

.CLA_288 {
    width: 100%;
}

.CLA_289 {
    width: 15%;
}

.CLA_290 {
    width: 20%;
}

.CLA_291 {
    width: 50%;
}

.CLA_292 {
    width: 0%;
    background: url(img/arm-background-04.png) repeat center top;
}

.CLA_293 {
    width: 0%;
    background: url(img/arm-background-04.png) repeat center top;
    white-space: pre-line;
}

.CLA_294 {
    width: 2500px;
}

.CLA_295 {
    width: 75px;
    height: 75px;
    font-size: 0.95rem;
    float: right;
    background-color: #FC5400;
}

.CLA_310 {
    padding: 5px;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.6;
    color: #2a2a2a;
    margin-top: 0px;
    margin-bottom: 0;
    text-align: left;
}

.CLA_311 {
    padding-top: 0px;
    text-align: left;
}

.STYL_001 {
    color: #636466;
    display: inline;
}

.STYL_002 {
	padding-top: 8px;
	left: 40px;
	position: absolute;
}

.STYL_003 {
	padding-bottom: .5rem;
	padding-top: .5rem;
}

.STYL_004 {
	margin-bottom: 0rem;
}

.STYL_005 {
	border-left-color: #d0e4e7;
	border-left-width: 5px;
	border-left-style: solid;
}

.STYL_006 {
	vertical-align: top !important;
}

.STYL_007 {
	padding-top: 8px;
	right: 40px;
	position: absolute;
}

.STYL_008 {
	left: 2%;
	max-width: 96%
}

.STYL_009 {
	position: sticky;
	left: -1px;
	width: 30px;
	min-width: 30px;
	z-index: 2;
	padding-right: 0px;
}

.STYL_010mobile {
	min-height: calc(100vh - 950px);
	max-height: calc(100vh - 950px);
}

.STYL_011 {
	margin-left: 10px;
}

/* General settings for the tabs container */
#mytab-container, #ulMyTab {
    position: fixed;
    top: 100px;
    width: 80vw;
    z-index: 1000;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background-color: #f8f8f8;
    border-bottom: none;
}

    /* Specific styles for individual tab items */
    #ulMyTab .nav-item {
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        box-sizing: border-box;
        position: relative;
    }

    /* Styling links inside tab items for consistent appearance and layout */
    #ulMyTab .nav-link {
        border: 1px solid transparent;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f5f5f5;
        box-sizing: border-box;
        cursor: pointer;
        border-bottom: 3px solid transparent; /* Maintains consistent height */
        transition: border-color 0.2s ease-in-out; /* Smooth transition for border color */
    }

        /* Styles for hover and active states to highlight current tab */
        #ulMyTab .nav-link.active, #ulMyTab .nav-link:hover {
            border-bottom-color: #FF4500; /* Changes only the color of the border */
        }

/* Correct alignment of tabs when wrapped */
#ulMyTab {
    text-align: left;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #ulMyTab .nav-item {
        flex: 1 0 100%;
    }

    #ulMyTab .nav-link {
        padding: 10px;
        font-size: 14px;
    }
}

/* Padding at the top of the tab content to ensure visibility of the page title */
.tab-content {
/*    padding-top: 80px;
    margin-top: 20px; */
}

/* For Experian Address Lookup */

/* Ensure the parent container is relatively positioned */
.address-container {
    position: relative;
}

/* Style the dropdown */
.dropdown {
    position: absolute;
    top: 100%; /* Position below the input field */
    left: 0;
    width: 100%; /* Match the width of the input field */
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensure it is above other elements */
    display: none; /* Hidden by default */
}

/* Style each dropdown item */
.dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
}

    /* Change background on hover */
    .dropdown-item:hover {
        background: #f0f0f0;
    }

#notificationDropdown {
	min-width: 450px;
}

span#imgLogoWeb {
    margin: -30px;
}


.card .card-body {
    padding: 1rem;
}

.truncate2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1; 
    -webkit-line-clamp: 1; /* Number of lines you want */
    -webkit-box-orient: vertical;
    width: 100%; /* Adjust as needed */
}

.image-container {
    position: relative;
    width: 100%;  /* Responsive width */
    height: 0;    /* Initial height to zero */
    padding-bottom: 50%;  /* Adjust this percentage to control the height */
    overflow: hidden;
}

.image-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;   /* This ensures the image fills the container height */
    transform: translate(-50%, -50%); /* Centers the image in the container */
    max-width: none;
}

ul.custom-indent {
    list-style-type: disc;
    padding-left: 2rem; /* Controls the indent of the bullet points from the edge */
}

ul.custom-indent li {
    padding-left: 0; /* Remove padding on the <li> itself */
    margin-left: 1rem; /* Add margin to create spacing for the bullet without affecting text alignment */
    text-indent: 0; /* Remove the negative text-indent */
}

.text-small p {
    font-size: .76rem !important;
    line-height: .9rem !important;
}

/* Remove any paging button borders that are added by the user-agent style sheet */
.dt-paging-button {
    border: none !important; /* Removes borders */
    outline: none; /* Removes focus outline if needed */
}

/* Hide unwanted data-table elements which appear by default in new version*/
.dt-length, .dt-search {
    display: none;
}

/* Remove any unwanted table button borders that are added by the user-agent style sheet */
table button {
    border: none !important; /* Removes borders */
    outline: none; /* Removes focus outline if needed */
}

.tab-content {
    overflow: visible !important;
}

/*
#rpt-123813_wrapper .dataTables_scrollBody,
#rpt-123812_wrapper .dataTables_scrollBody {
    max-height: calc(100vh - 250px);
    min-height: 150px;
    overflow-y: auto !important;
}


#rpt-123813_wrapper .dataTables_scrollHead,
#rpt-123812_wrapper .dataTables_scrollHead {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}


#rpt-123813_wrapper .dataTables_paginate,
#rpt-123812_wrapper .dataTables_paginate {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px;
    z-index: 10;
}

.dt-scroll-headInner {
    width: auto !important;
    min-width: 100% !important;
}
*/

/* Override bootstrap colours */

.text-success {
    color: #636466 !important
}

a.text-success:hover,
a.text-success:focus {
    color: #19692c !important
}

.text-info {
    color: #636466 !important
}
 
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #3a3a3a !important;
    background-color: #e9ecef !important;
}

.select2-container--disabled .select2-selection {
    background-color: #e9ecef !important;
}

.force-primary {
    color: #636466 !important
}