.text-editor-editable { -webkit-user-modify: read-only !important; } /* Old selector */
.content-view.script > .text-editor { -webkit-user-modify: read-only !important; } /* Older selector */
.editing { -webkit-user-modify: read-only !important; } /* Generic Selector */

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/BebasNeue-webfont.woff') format('woff'),
        url('../fonts/BebasNeue-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'digital-clock-font';
    src: url('../fonts/DS-DIGI.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'digital-clock-font-bold';
    src: url('../fonts/DS-DIGIB.TTF') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'san-francisco-regular';
    src: url('../fonts/SFUIDisplay-Light.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.san-francisco-regular{
    font-family: san-francisco-regular;
}

.digital-clock-font{

    font-family: digital-clock-font;
    font-size: 20pt;
    font-weight: bold;

}
.digital-clock-font-bold{

    font-family: digital-clock-font-bold;
    font-size: 18pt;
    font-weight: bold;

}
.uk-title-info{
    color: #fff;/*282828 222*/
    text-shadow: 0 1px 0 rgba(3, 63, 108, -8);
    font-family: 'BebasNeueRegular';
    font-size: 18pt;
    line-height: 90%;
}
.uk-title{
    color: #414449;/*282828*/
    font-family: 'BebasNeueRegular';
    /*margin-top: 15px;*/
    font-size: 20pt;
}
.result-lbl{
    color: #333333;/*282828
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);*/
    margin-top: 15px;
    font-size: 11pt;
}
.account-name{
    color: #272727;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    font-family: 'BebasNeueRegular';
    margin-top: 15px;
    font-size: 23pt;
}
.uk-content-label{
    color: #282828;/*282828*/
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    font-family: 'BebasNeueRegular';
    margin-top: 15px;
    font-size: 19pt;
}
.uk-title-search{
    color: #A50202;
    font-family: 'BebasNeueRegular';
    font-size: 16pt;
}
.uk-title-success{
    color: #4DA90C;/*67C127;*/
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    font-family: 'BebasNeueRegular';
    margin-top: 15px;
    font-size: 21pt;
}
.uk-title-error{
    color: #FF2424;/*67C127;*/
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    font-family: 'BebasNeueRegular';
    margin-top: 15px;
    font-size: 21pt;
}
.uk-title-warning{
    color: #FFCD00;/*67C127;*/
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    font-family: 'BebasNeueRegular';
    margin-top: 15px;
    font-size: 21pt;
}
.instruction{
    color: #565656;
    font-family: "BebasNeueRegular";
    font-size: 22px;
    margin-top: 4px;
    margin-bottom: 4px;
}
a:link,
a:visited,a:hover,a:active{
    text-decoration:none;
}
/*.actions{display:none;}*/
.valid{
    color:#808080;
}

.error-text{
    border:solid 1px #FE4E4E!important;
}/*

.valid-text{
    border:solid 1px #B0B0B0!important;
}*/

.application-msg-close{
    position:relative;
    float:right;
    display: inline-block;
    width:16px; 
    background: transparent url(../images/close_icon.png) no-repeat 0px 50%;
}
.application-msg-close:hover{
    opacity:0.5;
    cursor:pointer;
    filter:alpha(opacity=50);
}

.no-close .ui-dialog-titlebar-close {display: none }
.no-close .ui-dialog-titlebar {display: none }

/*DATE PICKER font size*/
div.ui-datepicker{
    font-size:10px;
}

/*input[type="radio"], label {
    margin-top: -1px;
    vertical-align: middle;
}
input[type="checkbox"], label {
    margin-top: -1px;
    vertical-align: middle;
}*/
/*PASSWORD VALIDATOR*/
#toolTip {
    position:absolute;
    top: 0;
    background-color: #fef3c6 !important;
    width: 50px; /*Default width of hint.*/
    padding: 5px;
    border:#73a7f0 solid 2px;
    font:normal 11px Verdana;
    line-height:18px;
    z-index:999999;
    border-right: #73a7f0 solid 2px;
    border-bottom: #73a7f0 solid 2px;
    visibility: hidden;
    filter:alpha(opacity=100);
    /* CSS3 standard */
    -moz-opacity:1.0;
    -khtml-opacity: 1.0;
    opacity: 1.0;
    color:#404040 !important;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 8px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 0px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #fef3c6 transparent transparent;
    position:absolute;
    left: -18px;
    top: 0px;
}

.return-link {

    color:#3C9F02; 
    text-decoration: none;
}

/**************************************************************************************************************/
/****************************************************PADDINGS*************************************************/
/************************************************************************************************************/
.pad-top-5{ padding-top:5px;}
.pad-top-8{ padding-top:8px;}
.pad-top-10{ padding-top:10px;}
.pad-top-11{ padding-top:11px;}
.pad-top-12{ padding-top:12px;}
.pad-top-15{ padding-top:15px;}
.pad-top-20{ padding-top:20px;}
.pad-top-25{ padding-top:25px;}
.pad-top-30{ padding-top:30px;}
.pad-top-40{ padding-top:40px;}
.pad-top-100{ padding-top:100px;}
.pad-top-120{ padding-top:120px;}
.pad-top-125{ padding-top:125px;}

.pad-bottom-none {padding-bottom:0px;}
.pad-bottom-10{ padding-bottom:10px;}
.pad-bottom-15{ padding-bottom:15px;}
.pad-bottom-25{ padding-bottom:25px;}
.pad-bottom-30{ padding-bottom:30px;}
.pad-bottom-8{ padding-bottom:8px;}
.pad-bottom-5{ padding-bottom:5px;}

.pad-left-5{ padding-left:5px;}
.pad-left-10{ padding-left:10px;}
.pad-left-15{ padding-left:15px;}
.pad-left-11{ padding-left:11px;}
.pad-left-20{ padding-left:20px;}
.pad-left-25{ padding-left:25px;}
.pad-left-30{ padding-left:30px;}
.pad-left-35{ padding-left:35px;}
.pad-left-40{ padding-left:40px;}
.pad-left-50{ padding-left:50px;}
.pad-left-60{ padding-left:60px;}
.pad-left-100{ padding-left:100px;}
.pad-left-110{ padding-left:110px;}

.pad-right-40{ padding-right:40px;}
.pad-right-30{ padding-right:30px;}
.pad-right-20{ padding-right:20px;}
.pad-right-50{ padding-right:50px;}
.pad-right-18{ padding-right:18px;}
.pad-right-15{ padding-right:10px;}
.pad-right-10{ padding-right:10px;}
.pad-right-8{ padding-right:8px;}
.pad-right-7{ padding-right:7px;}
.pad-right-5{ padding-right:5px;}

.pad-lr-5{ padding:0 5px;}
.pad-lr-tb-5{ padding:5px 5px 5px 5px}

.pad-tb-20{ padding-top:20px; padding-bottom:20px;}
.pad-tb-10{ padding-top:10px; padding-bottom:10px;}

.padd-all-3{ padding-left:3px; padding-right:3px; padding-top:3px; padding-bottom:3px;}
.padd-5{ padding:5px;}
.padd-6{ padding:6px;}
.padd-7{ padding:7px;}
.padd-10{ padding:10px;}
.padd-15{ padding:15px;}
.padd-20{ padding:20px;}
.padd-30{ padding:30px;}

/**************************************************************************************************************/
/*************************************************SPACE-MARGINS***********************************************/
/************************************************************************************************************/

.text-no-wrap{white-space:nowrap;}
.space3 {display: block;height: 3px;clear: both;}
.space { display: block; height: 5px; clear: both; }
.space5 { display: block; height: 5px; clear: both; }
.space7 { display: block; height: 7px; clear: both; }
.space8 { display: block; height: 8px; clear: both; }
.space10 { display: block; height: 10px; clear: both; }
.space15 { display: block; height: 15px; clear: both; }
.space20 { display: block; height: 20px; clear: both; }
.space30 { display: block; height: 30px; clear: both; }
.space40 { display: block; height: 40px; clear: both; }
.space42 { display: block; height: 42px; clear: both; }
.space46 { display: block; height: 46px; clear: both; }
.space45 { display: block; height: 45px; clear: both; }
.space50 { display: block; height: 50px; clear: both; }
.space55 { display: block; height: 55px; clear: both; }
.space85 { display: block; height: 85px; clear: both; }
.space110 { display: block; height: 110px; clear: both; }

.margin-left-10{ margin-left:10px;}
.margin-right-10{ margin-right:10px;}

.margin-left-25{ margin-left:25px;}
.margin-right-25{ margin-right:25px;}

.center{
    margin: auto;
    width: 60%;
}
.right{
    float:right;
    padding-right: 50px;
    padding-top: 27px;
}
/**************************************************************************************************************/
/*****************************************************BUTTONS*************************************************/
/************************************************************************************************************/

.gray-btn {
    background-color:#ebebeb;
    text-indent:0;
    border:1px solid #adadad;
    display:inline-block;
    color:#333333;
    font-family:Arial;
    font-size:11px;
    text-decoration:none;
    text-align:center;
    padding:5px 10px;
    margin:5px 5px;
}
.gray-btn:hover {
    background-color:#fff;
}
.disabled-btn{
    background-color: #B20000;
    color: #EAEAEA;
    opacity: 0.6;
    filter: Alpha(opacity=60); /* IE8 and earlier */
}
.export-btn{
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size:9pt;
    padding: 5px 8px 5px 8px; 
    text-decoration:none; 
    display:inline-block;
    font-weight:bold; 
    color: #FFFFFF;
    background-color: #5DB427; /*52B72B-green*/
}
.pdf-btn{
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size:9pt;
    padding: 5px 8px 5px 8px; 
    text-decoration:none; 
    display:inline-block;
    font-weight:bold; 
    color: #FFFFFF;
    background-color: #990000; /*52B72B-green*/
}
#mult-button, #cc-button, #mult-button-submit, #mult-button-cncl, #retailLoc-button{display:none;}

/**************************************************************************************************************/
/*****************************************************LINKS***************************************************/
/************************************************************************************************************/
a.gray-btn:link,
a.gray-btn:visited,a.gray-btn:hover,a.gray-btn:active{
    color:#4F4F4F;
    cursor:pointer;
}
a.red-link{
    color:#AC0707;
}
a.red-link:visited,a.red-link:hover,a.red-link:active{
    color:#990000;
}
a.link-btn{
    color: #8B6300; /*FF7300*/
    font-weight: bold;
}
a.link-btn:hover{
    color: #735300; /*FF7300*/
    font-weight: bold;
}
a.link-with-record{
    color: #DF6400;
}
a.link-with-record:hover{
    color: #D55601; /*FF7300*/
    font-weight: bold;
}
a.content-link:link, 
a.content-link:active, a.content-link:visited{
    color: #717171;
    font-weight: bold;
}
a.content-link:hover{
    color: #D19602; /*FF7300*/
    font-weight: bold;
}
a.report-link{
    color: #67BA09; /*FF7300*/
    font-weight: bold;
}
a.report-link:hover{
    color: #D58401; /*FF7300*/
    font-weight: bold;
}
a.orange-button{
    background-color: #303030;
    color: #fff;
}
a.orange-button:hover{
    background-color: #303030;
    color: #fff;
}
a.export-link{
    background-color: #56AE0A;
    color: #fff;
}
a.export-link:hover{
    background-color: #82C647;
    color: #fff;
}
a.card-order-link{
    background-color: #56AE0A;
    color: #fff;
    font-weight: bold;
}
a.card-order-link:hover{
    background-color: #82C647;
    color: #fff;
    font-weight: bold;
}
a.yes-link{
    width: 35px;
    background-color: #56AE0A;
    color: #fff;
    font-weight: bold;
}
a.yes-link:hover{
    background-color: #82C647;
    color: #fff;
    font-weight: bold;
}
a.no-link{
    width: 35px;
    background-color: #CA0A0A;
    color: #fff;
    font-weight: bold;
}

a.hire-yes-link{
    width: 45px;
    background-color: #56AE0A;
    color: #fff;

}
a.hire-yes-link:hover{
    background-color: #82C647;
    color: #fff;

}
a.hire-no-link{
    width: 45px;
    background-color: #CA0A0A;
    color: #fff;

}
a.hire-no-link:hover{
    background-color: #E43E3E;
    color: #fff;

}

a.resend-link{
    background-color: #56AE0A;
    color: #fff;
    font-weight: bold;
}
a.resend-link:hover{
    background-color: #82C647;
    color: #fff;
    font-weight: bold;
}
a.delete-link{
    background-color: #CA0A0A;
    color: #fff;
    font-weight: bold;
}
a.delete-link:hover{
    background-color: #E43E3E;
    color: #fff;
    font-weight: bold;
}

.confirmoverlay a:link,.confirmoverlay a:visited, 
.loaderoverlay a:link,.loaderoverlay a:visited,
.fomroverlay a:link,.fomroverlay a:visited{
    display: block;
    color:#000000;
}
.confirmoverlay a:hover,
.loaderoverlay a:hover,
.fomroverlay a:hover{
    color:#ff9c00;
}
.confirmoverlay a:active,
.loaderoverlay a:active,
.fomroverlay a:active{
    color:#000000;
}

.uk-big-button{
    background-color: #333333; /* 042926 f6f7fe  FCFDFF 0D71FE  707070 A4A4A4*/
    background-image: none;
    border-color: #042926;
    border-style: solid;
    /*    border-width: 2px;*/
    border-right: 1px;
    border-bottom: 1px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    /*    color: #5C5C5C !important; 878a92*/
    /*text-shadow: 0 1px 0 rgba(255, 255, 255, 1);*/
    text-align: center;
    padding: 25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

}
.uk-big-button i#icon-blue{
    color: #2F93F7 !important;
}
.uk-big-button i#icon-yellow{
    color: #E6D949 !important;
}
.uk-big-button i#icon-green{
    color: #3E910E !important;
}
.uk-big-button i#icon-red{
    color: #970A0A !important;
}
.uk-big-button i#icon-gray{
    color: #707070 !important;
}
.uk-big-button i#icon-darkgray{
    color: #fff !important;/*232323*/
}
.uk-big-button2{
    background-color: #FCFDFF; /*f6f7fe*/
    background-image: none;
    border-color: #fff;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    color: #5C5C5C !important; /*878a92*/
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    text-align: center;
    padding: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

}

/*************************************************************************************************************/
/****************************************************FONTS***************************************************/
/***********************************************************************************************************/

.fontpt-7{font-size:7pt;}
.fontpt-8{font-size:8pt;}
.fontpt-9{font-size:9pt;}
.fontpt-10{font-size:10pt;}
.fontpt-11{font-size:11pt;}
.fontpt-12{font-size:12pt;}
.fontpt-13{font-size:13pt;}
.fontpt-14{font-size:14pt;}
.fontpt-15{font-size:15pt;}
.fontpt-16{font-size:16pt;}
.fontpt-17{font-size:17pt;}
.fontpt-18{font-size:18pt;}
.fontpt-19{font-size:19pt;}
.fontpt-20{font-size:20pt;}
.fontpt-25{font-size:25pt;}
.fontpt-30{font-size:30pt;}
.fontpt-35{font-size:35pt;}

.font-gray{color:#6D6D6D;}
.font-gray_1{color:#333333;}
.font-purple{color:#b74dbd;}
.font-darkgray{color:#151515;}
.font-blue{ color:#108ED7;}
/*.font-green{ color:#56BB09;}*/
.font-green{ color:#44638b;}
.font-red{ color:#990000;}
.font-lightred{ color:#FB4D4D;}
.font-black{ color:#000;}
.font-white{ color:#ffffff !important;}
.font-lightgreen{ color:#74BC22;}/*87D034 90d93f 8DD43B*/
.font-icon-darkgray{color:#222222 !important;}
.font-gold{color:#8B6300;}
.font-samples{color:#980000;}
.font-darkgreen{color: #1A3200;}

.font-bold{font-weight:bold;}
.font-italic{font-style:italic;}
.font-normal{font-weight:normal;}
.font-no-decoration{ text-decoration:none;}

.font-caps{ text-transform:capitalize;}
.font-uppercase{ text-transform:uppercase;}

.error {
    color:#B81111;
}

.text-shadow-white{text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);}
/**************************************************************************************************************/
/**************************************************BACKGROUNDS************************************************/
/************************************************************************************************************/

.uk-title-not-avail{
    /*	color: #fff;282828 222
            text-shadow: 0 1px 0 rgba(3, 63, 108, -8);*/
    text-shadow: 5px 0px 0px #eee, 5px 0px 0px #707070;
    font-family: 'BebasNeueRegular';
    font-size: 20pt;
    line-height: 90%;
}

.highlight{
    background-color: #FFFFD6; /*FFFFCB*/
}
.shadow{
    -webkit-box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.3);
}

.background-lightgray{ background-color:#F2F2F2;} /*F2F2F2*/
.background-lightgray2{background-color: rgba(255, 255, 255, 0.4);}
.background-seethrough{background-color: rgba(255, 255, 255, 0.3);}
.background-white{ background-color:#ffffff;}
.background-transparent{ background: rgba(255,255,255, 0.8) !important;}
.background-transparent2{ background: rgba(255,255,255, 0.7) !important;}

.background-darkgray{ background-color:#3c373a;}
.background-lightgreen{ background-color:#73b800;}
.background-lightred{ background-color:#ee6d50;}
.background-green{ background-color:#008500;}
.background-orange{ background-color:#ffaf00;}
.background-darkorange{ background-color:#ff8e00;}
.background-lightblue{ background-color:#0098c1;}
.background-blue{ background-color:#006daf;}
.background-darkerblue{ background-color:#005991;}
.background-red{ background-color:#ff2121;}
.background-light-red{ background-color:#d7015ca8;}

.text-shadow-white{
    text-shadow: 0 1px 0 rgba(255, 255, 255);
}

.fade {
    display: block; 
    position: absolute;  /* makes the div go into a position that’s absolute to the browser viewing area */
    left: 0%; /* makes the div span all the way across the viewing area */
    top: 0%; /* makes the div span all the way across the viewing area */
    background-color: #000;
    -moz-opacity: 0.5; /* makes the div transparent, so you have a cool overlay effect */
    opacity: .50;
    filter: alpha(opacity=50);
    width: 100%;
    height: 100%;
    z-index: 99999; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}

.overlay {
    display: block; 
    position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
    left: 40%; /* positions the div half way horizontally */
    top: 35%; /* positions the div half way vertically */
    background-color: #ffffff;
    width: 350px;
    height: auto;
    z-index: 999999; /* makes the div the top layer, so it’ll lay on top of the other content */
}

/*********************************************************************************************************/
/******************************************CONTENT ICONS*************************************************/
/*******************************************************************************************************/
.icon-gray{
    color: #727272 !important;
}
.icon-dark{
    color: #232323 !important;
}
.icon-white{
    color: #fff !important;
}

.icon-success{
    color: #3E910E !important;
}
.icon-error{
    color: #970A0A !important;
}
.icon-warning{
    color: #F4B700 !important;
}

.status-pink{
    content: url(../images/status-icons/pink.png);
}

.status-yellow{
    content: url(../images/status-icons/yellow.png);
}

.status-green{
    content: url(../images/status-icons/green.png);
}

/*********************************************************************************************************/
/****************************************LOADER ICONS****************************************************/
/*******************************************************************************************************/
.csproloaderimg{
    display: inline-block ;
    text-align: center ;
    width:140px;
    height:140px;

    background: transparent url(../images/loaderlogo2.gif) no-repeat 0 0;
}

/*********************************************************************************************************/
/*****************************************DIALOGUE ICONS*************************************************/
/*******************************************************************************************************/
.confirm-dialog-cont {
    background: transparent url(../images/crim-logo.png) no-repeat 0 0;
    display: inline-block;
    background-size: 45px 45px; /* image's size */
    height: 45px; /* image's height */
    padding-left: 55px; /* image's width plus 10 px (margin between text and image) */
}

.confirm-dialog-cont span#dialogTitle {
    height: 45px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}
/***************************************************************************************************/
/******************************************ALIGNMENT***********************************************/
/*************************************************************************************************/
.wrap-text{
    word-break: break-all;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}

.align-bottom {
    vertical-align: bottom;
}

p.label-checkbox-pair {
    clear: both;
    float: none;
    position: relative;
}
/*************************************************checkbox***********************************************/
p.label-checkbox-pair #dispatcherActive1 {
    position: absolute;
    top: 26px;
}
/*************************************************label***********************************************/
p.label-checkbox-pair #checkboxLabel2 {
    display: block;
    margin-left: 22px;
    width: 90%;
}
.clickable{
    cursor:pointer;

}
.clickable-header{
    cursor:pointer;

}
.account-search-opt{ 
    list-style:none;
    padding:0;

}
.account-search-opt li{ 
    padding:2px 0 0 0;
}

.aligned-center {
    width: 100% !important;
    text-align: center !important;
}

/************************************************************************************************************/
/**********************************TABLES*******************************************************/
/************************************************************************************************************/

table.dashtb-with-border{	
    border-collapse:collapse; 
    border-top:1px solid  #ddd !important;
    border-right:1px solid #ddd !important;
    border-left:1px solid #ddd !important;
}
/*table.dashtb-with-border td, th{
    border-right:1px dotted #ddd !important;
}*/
table.dashtb-with-border tr:not(:first-child):hover {
    background-color:transparent;
}
table.dashtb-with-border th{
    font-weight:bold;
    text-align:left;
    padding:10px;
    background-color:#DDE0CB;
    /*background-image:linear-gradient(#CCCFBC, #E2E4DB);*/
    color:#428bca;
}
table.dashtb-with-border tr:nth-child(even) {
    background-color: #f9f9f9;
}

table.dashtb-with-border-2 th{	
    height:35px;
    font-weight:bold;
    color:#fff;
    text-shadow: 0 1px 1px rgba(51, 51, 51, 0.75);
    text-align:left;
    padding:8px;
    background-color:#94DF49;
    border-bottom: 3px solid #1F650F;
}

table.dashtb-with-border-2 th:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
}

table.dashtb-with-border-2 th:last-child {
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
.dashtb-with-border-3 {
    border-collapse:collapse !important; 
    background-color:#ffffff;
    border:1px solid  #ddd !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}
table.dashtb-with-border-3 th {
    background: #2a7f9e !important;
    color: #ffffff !important;
    font-family: "san-francisco-regular", Helvetica, Arial, sans-serif !important;
    font-size: 10pt !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 9px 10px !important;
    border-right: 1px solid rgba(255,255,255,0.15) !important;
    border-bottom: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    white-space: nowrap !important;
}
table.dashtb-with-border-3 td {
    border: 1px solid #DDDDDD !important;
    border-collapse: collapse !important;
    padding: 7px 10px;
    font-family: "san-francisco-regular", Helvetica, Arial, sans-serif;
    font-size: 11pt;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

table.dashtb-with-border-3 th#title-list{	
    height:30px;
    color:#272727;
    font-weight:normal;
    text-align:left;
    padding:5px;
    background-color:#C5C5C5;
    border-bottom:2px solid  #8F8F8F !important;
}

table.dashtb-with-border-3 tr td.total-cont{
    cursor:none;
    background-color:#DDDDDD;
    border-collapse:collapse; 	
    border-top:3px solid  #8F8F8F !important;

    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
}

table.dashtb-with-border-3 th#title-list {
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
}

table.dashtb-with-border-3 tr:not(:first-child):hover {
    background-color:#FFFDE6;
}

table.dashtb-with-border-3 tr:nth-child(odd){
    /*background-color:#f9f9f9;*/
    background-color:#fffcfc;
}

table.dashtb-with-border-3 tr:nth-child(even) {
    /*background-color: #F0F0F0;*/
    background-color:#f9f9f9;
}

table.dashtb {
    background-color:#ffffff;
    border:1px solid  #ddd !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
/*table.dashtb tr:not(:first-child):hover {
    background-color:transparent;
}*/
table.dashtb th{
    font-weight:bold;
    text-align:left;
    margin:0px;
    text-wrap:none;
    padding:10px;
    background-color: #F1F1F1;
    color:#202020; /*428bca*/
}
table.dashtb th.sort{
    font-weight:bold;
    text-align:left;
    margin:0px;
    text-wrap:none;
    padding:10px;
    background-color:#ffffff;
    color:#202020; /*428bca*/
}
/*table.dashtb tr:nth-child(even) {
    background-color: #F0F0F0;

}*/
table.dashtb1 th:hover {
    cursor: pointer;
    background-color:#f5f5f5;
}
table.dashtb1 th{
    font-weight:bold;
    text-align:left;
    margin:0px;
    text-wrap:none;
    padding:10px;
    background-color:#ffffff;
    color:#428bca;
}
table.dashtb1 th{
    font-weight:bold;
    text-align:left;
    margin:0px;
    text-wrap:none;
    padding:10px;
    background-color:#ffffff;
    color:#428bca;
}
table.dashtb1 td{
    border-right: dotted 1px #C4C4C4;
}
table.dashtb2{
    border-bottom:1px solid #ddd !important;
}
table.form-tb{
    padding-top:10px!important;
    border-bottom:1px solid  #ddd !important;
    border-left:1px solid  #ddd !important;
    border-right:1px solid  #ddd !important;
}
table.form-tb th{
    border: 1px solid #ddd !important;
}
table.dashtb th.centered{
    text-align: center;
}

/**************************************************************************************************************/
/*****************************************************UL-LI***************************************************/
/************************************************************************************************************/
/*USED IN ACCOUNT SETTINGS TABLES*/
ul.tb-list{
    list-style: none;
    padding:0;
    margin:0;
    border-bottom:1px solid  #ddd !important;
}
ul.tb-list li table.div-tb:hover{
    background-color:#EEEEEE;
    cursor:pointer;
}
/*ul.tb-list li table.div-tb:active, ul.tb-list li table.div-tb:focus{
    cursor: pointer;#f5f5f5 green
    background-color:#FFFBED !important;transparent;
}*/
ul.tb-list li {/*#f9f9f9	orange*/
    background-color:#FFF;/*AB9D87*/
}
/*ul.tb-list li:nth-child(even) {#f9f9f9	orange
    background-color:#EEEEEE;AB9D87
}*/
ul.tb-list li ul{
    list-style: none;
    padding:0;
}
ul.tb-list li ul li{
    background-color:#c8c6c6;
}
/*END*/

/*USED IN INVOICE TABLES: DESKTOP*/
ul.tb-list-invoice{
    list-style: none;
    padding:0;
    margin:0;
}
ul.tb-list-invoice li:nth-child(even){ /*:nth-child(even)*/
    background-color:#F8F8F8 !important;
}
ul.tb-list-invoice li:nth-child(odd){ /*:nth-child(even)*/
    background-color:#FFF !important;
}
ul.tb-list-invoice li{
    border-bottom:1px solid  #ddd !important;
}
ul.tb-list-invoice li:first-child{/*#f9f9f9	orange*/
    border-top:1px solid  #ddd !important;
}
ul.tb-list-invoice li:last-child{/*#f9f9f9	orange*/
    border-bottom: none !important;
}
/*USED IN INVOICE TABLES: MOBILE*/
ul.tb-list-invoice2{
    list-style: none;
    padding:0;
    margin:0;
}
ul.tb-list-invoice2 li{
    border-bottom:1px solid #ddd !important;
}
ul.tb-list-invoice2 li:nth-child(even) {/*#f9f9f9	orange*/
    background-color:#F8F8F8 !important;
}
ul.tb-list-invoice2 li:nth-child(odd) {/*#f9f9f9	orange*/
    background-color:#FFFFFF !important;
}
ul.tb-list-invoice2 li:last-child{/*#f9f9f9	orange*/
    border-bottom: none !important;
}
/*END*/

/*USED IN STATUS AND CONTROL CENTER RESULT TABLE - BIG SCREENS*/
ul.tb-list1{
    list-style: none;
    padding:0;
    margin:0;
}
ul.tb-list1 #multlogin-results, ul.tb-list1 #cc-results{
    border-bottom:1px solid  #ddd !important;
}
/*ul.tb-list1 li table.dashtb:hover{
    background-color:#EEEEEE !important;
}*/
ul.tb-list1 li table.dashtb td.dashtb-td:hover{
    cursor:pointer;
}
ul.tb-list1 li table.dashtb:hover, ul.tb-list1 li table.dashtb:active, ul.tb-list1 li table.dashtb:focus{
    background-color:#FFFBED !important;/*transparent;*/
    /*    cursor: pointer;#f5f5f5 green*/
}
ul.tb-list1 li:nth-child(even){ /*:nth-child(even)*/
    background-color:#F8F8F8 !important;
}
ul.tb-list1 li:nth-child(odd){ /*:nth-child(even)*/
    background-color:#FFF !important;
}
ul.tb-list1 li{
    border-bottom:1px solid  #ddd !important;
}
ul.tb-list1 li:first-child{/*#f9f9f9	orange*/
    border-top:1px solid  #ddd !important;
}
ul.tb-list1 li:last-child{/*#f9f9f9	orange*/
    border-bottom: none !important;
}
/*END*/
/*USED IN STATUS AND CONTROL CENTER RESULTS LISTS - SMALL SCREENS*/
ul.tb-list2{
    list-style: none;
    padding:0;
    margin:0;
}
ul.tb-list2 li{
    padding-bottom: 2px;
    /*border-bottom:1px solid #ddd !important;*/
}
ul.tb-list2 li table.dashtb2:hover{
    background-color:#FFFBED !important;
    /*cursor:pointer;*/
}
ul.tb-list2 li table.dashtb2:active, ul.tb-list2 li table.dashtb2:focus{
    background-color:#FFFBED !important;/*transparent;*/
    cursor: pointer;/*#f5f5f5 green*/
}
ul.tb-list2 li:nth-child(even) {/*#f9f9f9	orange*/
    background-color:#F8F8F8 !important;
}
ul.tb-list2 li:nth-child(odd) {/*#f9f9f9	orange*/
    background-color:#FFFFFF !important;
}
ul.tb-list2 li:last-child{/*#f9f9f9	orange*/
    border-bottom: none !important;
}
/*END*/
/**************************************************************************************************************/
/************************************************CONTAINERS***************************************************/
/************************************************************************************************************/
.container-login{
    width: 35%;
    height: 518px;
    display:inline-block;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    *position:relative; /* IE7 and below */
    _position:relative; /* IE6 and below */

}

.content-dash{
    margin-left: 250px;
    padding:15px;
    width: auto;
    position: relative;
    background: #ff0;
    overflow-y: auto;
    z-index: 1;
    top:80px;
    height:auto;
    background-color:#ffffff;
}
.accordion-content{
    overflow:auto;
    background-color:transparent;
    border-top: solid 3px #777; /*428bca*/
    border-bottom: dotted 1px #252525;
    height:auto;
}
.accordion-table{
    background-color:#fff; /*FFFCED FFFFE7 F0F0F0 EBEBEB E1E1E1 CECECE; FFFFCB*/
    /*    border-bottom: dashed 1px #990000;*/
    height:auto;
}
#pagination-main-cont{
    position:relative; 
    display:inline-block; 
    border:none; 
    padding:10px 0;
    margin: 0 ;
    width:100%;
}
/* ─── Pagination — teal theme (synced with modal template) ──── */
.containerpagination {
    float: right;
    text-align: right;
    padding: 4px 2px 0;
}
.containerpagination .pagination {
    height: auto;
    margin: 0;
}
.containerpagination .pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 0;
}
.containerpagination .pagination ul li {
    list-style: none;
    float: none;
    border: 1px solid #c0dcea;
    padding: 6px 13px;
    margin-top: 0;
    font-size: 12px;
    font-family: "san-francisco-regular", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1e5c78;
    font-weight: 600;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
.containerpagination .pagination ul li:hover {
    background: #edf6fa;
    color: #1e5c78;
    border-color: #5baecf;
}
.containerpagination .pagination ul li.active,
.containerpagination .pagination ul li.active:hover {
    background: linear-gradient(135deg, #5baecf, #3a8fb0);
    color: #fff;
    border-color: #3a8fb0;
    font-weight: 700;
    cursor: default;
}
.containerpagination .pagination ul li.inactive,
.containerpagination .pagination ul li.inactive:hover {
    background: #f5f5f5;
    color: #ccc;
    border-color: #e8e8e8;
    cursor: default;
}
.containerpagination .pagination ul li.ulnotnumber {
    background: linear-gradient(135deg, #5baecf, #3a8fb0);
    color: #fff;
    border-color: #3a8fb0;
    font-weight: 700;
}
.containerpagination .pagination ul li.ulnotnumber:hover {
    background: linear-gradient(135deg, #3a8fb0, #2e7a99);
    border-color: #2e7a99;
    color: #fff;
}
.containerpagination .pagination ul li.ulnotnumber1 {
    background: linear-gradient(135deg, #5baecf, #3a8fb0);
    color: #fff;
    border-color: #3a8fb0;
    border-radius: 4px;
    font-weight: 700;
}
.containerpagination .pagination ul li.ulnotnumber1:hover {
    background: linear-gradient(135deg, #3a8fb0, #2e7a99);
    border-color: #2e7a99;
    color: #fff;
}
.containerpagination .pagination ul li.ulnotnumber2 {
    background: linear-gradient(135deg, #5baecf, #3a8fb0);
    color: #fff;
    border-color: #3a8fb0;
    border-radius: 4px;
    font-weight: 700;
}
.containerpagination .pagination ul li.ulnotnumber2:hover {
    background: linear-gradient(135deg, #3a8fb0, #2e7a99);
    border-color: #2e7a99;
    color: #fff;
}
.containerpagination .data ul li {
    list-style: none;
    margin: 3px 0;
    color: #1e5c78;
    font-size: 8pt;
}

#pagination-main-cont2{
    position:relative; 
    display:inline-block; 
    border:none; 
    width:100%;
}
#containerpagination2{
    display: table;
    margin: 0 auto;
}
#containerpagination2 .pagination ul li.active,
#containerpagination2 .pagination ul li.active:hover{
    cursor: pointer;
    color: #AA0000;
    border-left: 1px solid #d7d7da;
    border-top: 1px solid #d7d7da;
    border-bottom: 1px solid #d7d7da;
    background-color: #fff;
    font-weight:bolder;
}
#containerpagination2 .pagination ul li.inactive,
#containerpagination2 .pagination ul li.inactive:hover{
    background-color:#e3e2e2 !important;
    color:#d5d4d4 !important;
    border-left: 1px solid #d7d7da !important;
    border-top: 1px solid #d7d7da !important;
    border-bottom: 1px solid #d7d7da !important;
    cursor: default !important;
}
#containerpagination2 .data ul li{
    list-style: none;
    font-family: verdana;
    margin: 3px 0 3px 0;
    color: #FFFBF0;
    font-size: 8pt;
}
#containerpagination2 .pagination{
    height: 25px;
    margin:0;
}
#containerpagination2 .pagination ul li{
    list-style: none;
    float: left;
    border-left: 1px solid #d7d7da;
    border-top: 1px solid #d7d7da;
    border-bottom: 1px solid #d7d7da;
    padding: 4px 10px 4px 10px;
    margin-top:5px;
    font-size: 8pt;
    color: #000000;
    font-weight: bold;
    background-color: #f2f0f0;
}
#containerpagination2 .pagination ul li:hover{
    color: #000;
    background-color: #fff;
    cursor: pointer;
    border-left: 1px solid #d7d7da;
    border-top: 1px solid #d7d7da;
    border-bottom: 1px solid #d7d7da;
}
#containerpagination2 .pagination ul li.ulnotnumber{
    background-color: #C00000;
    color: #ffffff;
    border-left: 1px solid #B00000;
    border-top: 1px solid #B00000;
    border-bottom: 1px solid #B00000;
    font-weight:bold;
}
#containerpagination2 .pagination ul li.ulnotnumber:hover{
    background-color: #990000;
    color: #ffffff;
    border-left: 1px solid #B00000;
    border-top: 1px solid #B00000;
    border-bottom: 1px solid #B00000;
    font-weight:bold;
}
#containerpagination2 .pagination ul li.ulnotnumber1{
    background-color: #C00000;
    color: #ffffff;
    border-left: 1px solid #B00000;
    border-top: 1px solid #B00000;
    border-bottom: 1px solid #B00000;
    font-weight:bold;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
#containerpagination2 .pagination ul li.ulnotnumber1:hover{
    background-color: #990000;
    color: #ffffff;
    border-left: 1px solid #B00000;
    border-top: 1px solid #B00000;
    border-bottom: 1px solid #B00000;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
#containerpagination2 .pagination ul li.ulnotnumber2{
    background-color: #C00000;
    color: #ffffff;
    border-left: 1px solid #B00000;
    border-top: 1px solid #B00000;
    border-bottom: 1px solid #B00000;
    font-weight:bold;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
#containerpagination2 .pagination ul li.ulnotnumber2:hover{
    background-color: #990000;
    color: #ffffff;
    border-left: 1px solid #B00000;
    border-top: 1px solid #B00000;
    border-bottom: 1px solid #B00000;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
/* ---------------------------------------------------------------------------
   DISABLED BEATS DECORATED.                                    (2026-08-21)

   Every pager emits its First/Previous/Next/Last buttons as
   <li class="inactive ulnotnumber"> when they cannot be clicked. In the
   .containerpagination scope li.ulnotnumber is declared AFTER li.inactive at
   identical specificity, so the later rule won the cascade: a DISABLED button
   rendered in the same solid teal as an enabled one. It looked clickable,
   carried no onclick, and did nothing when clicked.

   Fixed by specificity rather than by moving the blocks: li.inactive.ulnotnumber
   is 0-4-1 against li.ulnotnumber's 0-3-1, so this wins wherever it sits and
   cannot be silently re-broken by a rule appended later. Values are copied from
   the li.inactive block above; keep them in step if that changes.

   #containerpagination2 is deliberately NOT patched here - its li.inactive block
   marks every property !important, so it already beats li.ulnotnumber whatever
   the order. A copy for that scope would be dead code.
   --------------------------------------------------------------------------- */
.containerpagination .pagination ul li.inactive.ulnotnumber,
.containerpagination .pagination ul li.inactive.ulnotnumber:hover,
.containerpagination .pagination ul li.inactive.ulnotnumber1,
.containerpagination .pagination ul li.inactive.ulnotnumber1:hover,
.containerpagination .pagination ul li.inactive.ulnotnumber2,
.containerpagination .pagination ul li.inactive.ulnotnumber2:hover {
    background: #f5f5f5;
    color: #ccc;
    border-color: #e8e8e8;
    cursor: default;
}
/**************************************************************************************************************/
/**************************************************BORDERS****************************************************/
/************************************************************************************************************/
.border-gray{border:1px solid #E1E1E1;}
.border-gray2{border:2px solid #E1E1E1;}
.border-lightgreen{border:2px solid #73b800;}
.border-lightblue{border:2px solid #0098c1;}
.border-green{border:2px solid #008500;}
.border-darkgray{border:3px solid #5C5C5C;}
.border-bottom{border-bottom:1px solid #E1E1E1;}
.border-bottom-lightgreen{border-bottom: 1px solid #7cb342;}
.border-top{border-top:1px solid #E1E1E1;}
.border-notop{
    border-left: 2px solid #E1E1E1;
    border-right: 2px solid #E1E1E1;
    border-bottom: 2px solid #E1E1E1;
}


.content-left-border{
    border-left: dotted 1px #C4C4C4;
}
.content-border-top{
    overflow:auto;
    border-top: dotted 1px #C4C4C4;
}
.img-with-border{
    border:4px solid #3A3A3A;
}
.img-with-round-corner-border-1{
    border:1px solid #3A3A3A;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75) inset;
}
.img-with-border-2{
    border:2px solid #3A3A3A;
}
.round-corner-2{
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.round-corner-3{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.round-corner-5{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.round-top-corner{
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.round-top-right-corner{
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    border-top-right-radius: 5px;
}
.round-bottom-left-corner{
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
.round-bottom-corner{
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.round-bottom-corner-3{
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topright: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 3px;
}
.round-not-left{
    -webkit-border-radius: 5px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 5px;
    -moz-border-radius-topleft: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
}
.not-round-corner{
    -webkit-border-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 0;
    -moz-border-radius-topleft: 0;
    border-radius: 0;
    border-top-left-radius: 0;
}
.round-bottom-left-5{
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-left-radius: 5px;
}
.round-bottom-right-5{
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}
.no-round-corner{
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

/**************************************************************************************************************/
/*****************************************************LINES***************************************************/
/************************************************************************************************************/
hr.gray{
    color: #E1E1E1;
    background-color: #747474;
    height: 2px;
    border:none;
    margin:0;
}
hr.gray-1{
    color: #E1E1E1;
    background-color: #E1E1E1;
    height: 1px;
    border:none;
    margin:0;
}
hr.black{
    color: #000;
    background-color: #000000;
    height: 1px;
    border:none;
    margin:0;
}
.hintanchor{ /*CSS for link that shows hint onmouseover*/
    margin: 1px 1px;
}

.checkIcon {
    background-image: url(../images/common/check_icon.png);
    background-repeat: no-repeat;
    background-position: 0px center; 
    padding-left: 15px;
    text-align: left;
}
.deleteIcon {
    background-image: url(../images/common/delete_icon.png);
    background-repeat: no-repeat;
    background-position: 0px center; 
    padding-left: 15px;
    text-align: left;
}
.border-blue{border:3px solid #13A1FA;}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}
input[type=range][orient=horizontal]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-horizontal; /* WebKit */
    width: 300px;
    padding: 0 5px;
}

/* Some default button styles */
.blue-button {font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}
.blue-button {line-height: normal; *overflow: visible;}
.blue-button {cursor: pointer; -webkit-appearance: button;}

.blue-button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 1px 1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: #333333;
    display: inline-block;
    font-size: 14px;
    line-height: normal;
    padding: 5px 10px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

.rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px;    
}

.rcorners2 {
    border-radius: 5px;
    border: 2px solid #8A8A8A;
    padding: 8px; 
    width: 70%; 
}

a.menu-action{
    text-decoration: none;
    color: #fff;
}

a.menu-action:hover{
    text-decoration: none;
    color: #fff;
    opacity: .8;
}

#control-group{
    text-align:center;
    vertical-align:center;
}

.control {
    font-size: 14px;
    position: relative;
    display: block;
    margin-bottom: 15px;
    padding-left: 30px;
    cursor: pointer;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    width: 18px;
    height: 18px;
    background: #F5EFD9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
    outline: 0;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

/* Hover and focus states */
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #E7CE76;
}

/* Checked state #B8E31E */
.control input:checked ~ .control__indicator {
    background: #EDFABD;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: #EDFABD;
}

/* Disabled state */
.control input:disabled ~ .control__indicator {
    pointer-events: none;
    opacity: .6;
    background: #DFDFDF;
}

/* Check mark */
.control__indicator:after {
    position: absolute;
    display: none;
    content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after {
    display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after {
    top: 4px;
    left: 8px;
    width: 3px;
    height: 8px;
    transform: rotate(45deg);
    border: solid #549426;
    border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #777777;
}

/* Radio button inner circle */
.control--radio .control__indicator:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #549426;
}

/* Disabled circle colour */
.control--radio input:disabled ~ .control__indicator:after {
    background: #777777;
}


/*----------------------*/
.control__indicator-2 {
    position: absolute;
    top: 10px;
    left: 18px;
    width: 18px;
    height: 18px;
    background: #F5EFD9;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
    outline: 0;
}

.control--radio .control__indicator-2 {
    border-radius: 50%;
}

/* Hover and focus states */
.control:hover input ~ .control__indicator-2,
.control input:focus ~ .control__indicator-2 {
    background: #E7CE76;
}

/* Checked state #B8E31E */
.control input:checked ~ .control__indicator-2 {
    background: #EDFABD;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator-2,
.control input:checked:focus ~ .control__indicator-2 {
    background: #EDFABD;
}

/* Disabled state */
.control input:disabled ~ .control__indicator-2 {
    pointer-events: none;
    opacity: .6;
    background: #DFDFDF;
}

/* Check mark */
.control__indicator-2:after {
    position: absolute;
    display: none;
    content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator-2:after {
    display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator-2:after {
    top: 4px;
    left: 8px;
    width: 3px;
    height: 8px;
    transform: rotate(45deg);
    border: solid #549426;
    border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator-2:after {
    border-color: #777777;
}

/* Radio button inner circle */
.control--radio .control__indicator-2:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #549426;
}

/* Disabled circle colour */
.control--radio input:disabled ~ .control__indicator-2:after {
    background: #777777;
}

.shadow{box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}

.box-lbl{
    height: 42px;
    background:#8FB258;
    border: 1px solid #86AD47;
}

.uk-title-label{
    color: #272727;/*282828*/
    text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
    font-family: 'BebasNeueRegular';
    font-size: 18pt;
}

.tbl-title-label{
    color: #272727;/*282828*/
    text-shadow: 1px 1px 0 rgba(255, 255, 255, .5);
    font-family: 'BebasNeueRegular';
    font-size: 18pt;
}


.small-button{
    background-color: #FCB004;
    /*background: #00918A none repeat scroll 0 0;*/
    color: #fff;
    font-size:12px;
    text-shadow: none !important;
    font-weight:normal !important;
}

.small-button:hover, .small-button:active, .small-button:focus,
.small-button:hover, .small-button:active, .small-button:focus{
    font-weight:normal !important; 
    opacity: .8;
    color: #fff;
    text-shadow: none !important;
    background-color: #FCB004;
}

.round-corner-12{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.line {
    height: 3px;
    width: 100%;
    border-top: 3px solid #C8CEA7;
    border-bottom: 1px solid #C8CEA7;
}

.dialog-header{
    background-size: cover;/*022E3D*/
    height: 45px;
    padding: 0; /* reset */
    background-image: url(../images/header-bg.svg);
    border-bottom: 4px solid #01A300;
}

.pg-normal {
    background: #FBFBFB;
    color: #444444;
    font-weight: normal;   
    cursor: pointer;   
    min-width: 16px;
    padding: 8px 10px;
    line-height: 20px;
    border: 1px solid #FBFBFB;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.pg-normal:hover {
    opacity: .9;
    background: #FE9D00;
    color: #fff;
    font-weight: normal;   
    cursor: pointer;   
    min-width: 16px;
    padding: 8px 10px;
    line-height: 20px;
    border: 1px solid #FE9D00;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
} 

.pg-selected {
    background: #FE9D00;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
    min-width: 16px;
    padding: 8px 10px;
    line-height: 20px;
    text-decoration: none;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}   

#pageNavPosition {
    text-align: right;
    font-size:11px;
    padding-top: 15px;
} 

.search-blue-btn{
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size:9pt;
    padding: 5px 8px 5px 8px; 
    text-decoration:none; 
    display:inline-block;
    font-weight:bold; 
    color: #FFFFFF;
    background-color: #0098C1 ; /*  52B72B-green*/
}
.new-green-btn{
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size:9pt;
    padding: 5px 8px 5px 8px; 
    text-decoration:none; 
    display:inline-block;
    font-weight:bold; 
    color: #FFFFFF !important;
    background-color: #1f830a; /*  52B72B-green*/
}
.new-green-btn:hover{
    font-weight:bold; 
    color: #FFFFFF !important;
}

.td-label{
    font-size:11pt;
    text-align: left;
    vertical-align: top;
}
.td-data{
    font-size:11pt;
    text-align: right;
    vertical-align: top;
}
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table;

}
.w3-table-all{
    border-collapse: collapse;
    border-radius: 5px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #ddd; /* this draws the table border  */ 
}

.w3-table-all tr{border-bottom:1px solid #ddd}
.w3-table-all tr:first-child td:first-child {
    border-bottom-left-radius: 10px !important;
}

.w3-table-all tr:first-child td:last-child {
    border-bottom-right-radius: 10px !important;
}
.w3-table-all tr:last-child td:first-child {
    border-bottom-left-radius: 10px !important;
}

.w3-table-all tr:last-child td:last-child {
    border-bottom-right-radius: 10px !important;
}
.w3-table-all tr:nth-child(odd){background-color:#fff}
.w3-table-all tr:nth-child(even){background-color:#f5f5f5}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}
.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}

/* ─── Global modal dialog polish ─────────────────────────── */
.uk-modal-dialog {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.12) !important;
    border: none !important;
    position: relative !important;
    font-family: "san-francisco-regular", Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
/* Close button — floats over the header like a lightbox overlay */
.uk-modal-dialog .uk-close,
.uk-modal-dialog .uk-modal-close.uk-close {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    float: none !important;
    margin: 0 !important;
    z-index: 1200 !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.55) !important;
    color: #1e5c78 !important;
    font-size: 13px !important;
    opacity: 0.75 !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity .15s, background .15s !important;
}
.uk-modal-dialog .uk-close:hover,
.uk-modal-dialog .uk-modal-close.uk-close:hover {
    opacity: 1 !important;
    background: rgba(255,255,255,0.9) !important;
    color: #1e5c78 !important;
}
.uk-title-dialog {
    background: linear-gradient(135deg, #edf6fa 0%, #8acceb00 100%) !important;
    color: #1e5c78 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #c0dcea !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: "san-francisco-regular", Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    margin-top: -24px !important;
}
.uk-title-dialog::before {
    content: '\f129' !important;
    font-family: FontAwesome !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #5baecf, #3a8fb0) !important;
    box-shadow: 0 2px 6px rgba(58,143,176,.35) !important;
    flex-shrink: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.uk-modal-dialog .uk-modal-footer {
    background: linear-gradient(135deg, #edf6fa 0%, #f8fcff 100%) !important;
    border-top: 1px solid #c0dcea !important;
    margin-left: -24px !important;
    margin-right: -24px !important;
    margin-bottom: -24px !important;
}


.search-btn{
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size:9pt;
    padding: 5px 8px 5px 8px; 
    text-decoration:none; 
    display:inline-block;
    font-weight:bold; 
    color: #FFFFFF;
    background-color: #00a8e6 ; /*  52B72B-green*/
}

hr.blue{
    color: #20aae5;
    background-color: #20aae5;
    height: 2px;
    border:none;
    margin:0;
}

a.orange-button{
    background-color: #303030;
    color: #fff;
}
a.orange-button:hover{
    background-color: #303030;
    color: #fff;
}

.gray-btn {
    background-color:#ebebeb;
    text-indent:0;
    border:1px solid #adadad;
    display:inline-block;
    color:#333333;
    font-family:Arial;
    font-size:11px;
    text-decoration:none;
    text-align:center;
    padding:5px 10px;
    margin:5px 5px;
}
.gray-btn:hover {
    background-color:#fff;
}

.confirmdialog-title{
    position:relative; 
    top:-5px;
    padding-left:10px;
    white-space:normal;
}

.confirmdialogoverlay {
    display: block; 
    position: absolute; 
    left: 40%;
    top: 35%;
    background-color: #ffffff;
    width: 350px;
    height: auto;
    z-index: 999999; 
}

.display-none{
    display: none;
}

.dialog-btn-left{
    float:left;
    position:relative;
    border-right:1px solid #CCC;
    text-align:center;
    width:49%;
}
.dialog-btn-right{
    float:right;
    position:relative;
    text-align:center;
    width:50.7%;
}
#ok-btn-dialog:hover{
    background-color:#CCC;
    color:#fff;
}
#cancel-btn-dialog:hover{
    background-color:#CCC;
    color:#fff;
}

.confirmoverlay {
    display: block; 
    position: absolute; 
    left: 40%;
    top: 35%;
    background-color: #ffffff;
    width: 350px;
    height: auto;
    z-index: 999999; 
}

#mult-button-delete{display:none;}

/*HOME CIRCLE BUTTONS*/
.circle {
    border-radius: 50%;
    behavior: url(PIE.htc);
}

.circle-button{
    padding: 13px;
    width: 100px;
    height: 100px;
    background-color:#0098c1
}

.circle-title-button{
    color: #3c373a !important;
    font-family: 'BebasNeueRegular';
    font-size: 25pt;
    margin-top: 12px;
    line-height: 35px;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.no-record{color: #717171 !important; font-size: 16pt; font-family: 'BebasNeueRegular';}

.main-title{
    color: #717171;/*282828*/
    font-family: 'BebasNeueRegular';
    line-height: 27px;
    /*margin-top: 15px;*/
    font-size: 25pt;
}

.beba-font{font-family: 'BebasNeueRegular';}

/*.fixed-header{
    width: 100%;
    height: 350px;
    table-layout: fixed;
}

tr.header-tr > th {
      display: block;
      position: relative;*/
/*}*/
/*
tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 350px;
}*/
span.circle-container {
    background: #0097c3;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    /* box-shadow: 0 1px 0 rgba(0, 0, 0, .6); */
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.5em;
    margin-right: 5px;
    text-align: center;
    width: 2.0em;
}
span.circle-container-1-1 {
    background: #0097c3;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    /* box-shadow: 0 1px 0 rgba(0, 0, 0, .6); */
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.1em;
    margin-right: 5px;
    text-align: center;
    width: 1.6em;
}


table.simpletable td{
    border:0px !important;
    border-collapse:collapse !important; 
    padding: 0px;
    border-style: hidden !important;
    background-color: transparent !important;
}
table.simpletable tr{

    background-color: transparent !important;
}
.tm-article-subtitle {
    padding-left: 6px;
    border-left: 3px solid #1FA2D6;
    font-size: 16px;
    line-height: 16px;
}

table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: #fff;
}

th {
    position: sticky;
    top: -1px;
    background: white;
}

.wordwrap { 
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}
.a-button-style { 
    // background: #f48413;
    padding: 6px 12px;
    margin-top: 8px;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.15) inset;
    border: none;
}


/* Sticky "Save Changes" on Manage Customer Discount Per Product: floats bottom-right while the
   page is scrolled, and viewAllDiscountCutomerPerProduct.jsp removes the class at the bottom so
   the button drops back inline beside "Print Customer Discount List".

   position MUST be !important. button-style.css loads AFTER style.css and its .cute-button-blue
   sets position:relative at equal specificity, so it used to win - leaving this rule's bottom:20px
   applied to a RELATIVELY positioned element, which offsets it 20px UPWARDS instead of pinning it.
   The button therefore never floated and simply sat 20px above the Print button, misaligned. */
.fixed-floating-btn {
    position: fixed !important;
    bottom: 20px;   /* distance from bottom of screen */
    right: 20px;    /* distance from right side */
    padding: 10px 20px;
    z-index: 1000;  /* keep it above page content while floating */
}



.textfield-outlined .uk-icon, .textfield-outlined .uk-icon {
    display: flex;
    align-items: center;

    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    width: 1.2rem;

    color: #505963;
    transition: color 0.2s;
}

.textfield-outlined .uk-icon:hover, .textfield-outlined .uk-icon:hover  {
    /*cursor: pointer;*/
    color: #2f373f;
}

.textfield-outlined {
    position: relative;
    margin-bottom: 20px;
    padding-top: 8px;
    font-family: "san-francisco-regular" !important;
}
/* Datepicker fields (.dgss-dp) inside a floating-label wrapper: the <label>
   absolutely overlays the input, so without this the click lands on the label,
   not the input. UIkit's datepicker then sees a click whose target isn't the
   date input and treats it as an outside-click, closing the picker immediately.
   pointer-events:none lets the click pass through to the input (focus still
   works), keeping the picker open so you can navigate/select dates. */
.textfield-outlined > input.dgss-dp + label { pointer-events: none; }
.textfield-outlined > input, .textfield-outlined > textarea {
    box-sizing: border-box;
    width: 100% !important;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #272e36;
    background: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: transparent #b0bec5 #b0bec5;
    border-radius: 6px;
    outline: none;
    box-shadow: none;
    resize: none;
    caret-color: #3d6f9e;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: "san-francisco-regular" !important;
    -webkit-text-fill-color: currentColor;
}
.textfield-outlined > input:not(:focus):placeholder-shown, .textfield-outlined > textarea:not(:focus):placeholder-shown {
    border-color: #b0bec5;
}
.textfield-outlined > input + label, .textfield-outlined > textarea + label {
    display: flex;
    width: 100%;
    position: absolute;
    top: 1px;
    left: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    color: #4a6572;
    letter-spacing: 0.3px;
    background: #fff;
    cursor: text;
    transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}
.textfield-outlined > input:not(:focus):placeholder-shown + label, .textfield-outlined > textarea:not(:focus):placeholder-shown + label {
    font-size: 14px;
    font-weight: normal;
    line-height: 54px;
    color: #92969a;
    letter-spacing: 0;
    background: transparent;
}
.textfield-outlined > input + label::before, .textfield-outlined > input + label::after, .textfield-outlined > textarea + label::before, .textfield-outlined > textarea + label::after {
    content: "";
    display: block;
    box-sizing: border-box;
    height: 8px;
    min-width: 10px;
    margin-top: 7px;
    border-top: solid 1px #b0bec5;
    pointer-events: none;
    transition: border-color 0.2s;
}
.textfield-outlined > input + label::before, .textfield-outlined > textarea + label::before {
    margin-right: 4px;
    border-left: solid 1px #b0bec5;
    border-radius: 6px 0 0 0;
}
.textfield-outlined > input + label::after, .textfield-outlined > textarea + label::after {
    flex-grow: 1;
    margin-left: 4px;
    border-right: solid 1px #b0bec5;
    border-radius: 0 6px 0 0;
}
.textfield-outlined > input:not(:focus):placeholder-shown + label::before, .textfield-outlined > input:not(:focus):placeholder-shown + label::after, .textfield-outlined > textarea:not(:focus):placeholder-shown + label::before, .textfield-outlined > textarea:not(:focus):placeholder-shown + label::after {
    border-color: transparent;
}
/* Hover */
.textfield-outlined:hover > input:not(:focus), .textfield-outlined:hover > textarea:not(:focus) {
    border-color: transparent #7b9db5 #7b9db5;
}
.textfield-outlined:hover > input:not(:focus) + label::before, .textfield-outlined:hover > textarea:not(:focus) + label::before {
    border-color: #7b9db5;
}
.textfield-outlined:hover > input:not(:focus) + label::after, .textfield-outlined:hover > textarea:not(:focus) + label::after {
    border-color: #7b9db5;
}
/* Focus */
.textfield-outlined > input:focus, .textfield-outlined > textarea:focus {
    border-color: transparent #3d6f9e #3d6f9e;
    outline: none;
}
.textfield-outlined > input:focus + label, .textfield-outlined > textarea:focus + label {
    color: #3d6f9e;
}
.textfield-outlined > input:focus + label::before, .textfield-outlined > input:focus + label::after, .textfield-outlined > textarea:focus + label::before, .textfield-outlined > textarea:focus + label::after {
    border-color: #3d6f9e !important;
}
/* Disabled */
.textfield-outlined > input:disabled, .textfield-outlined > textarea:disabled {
    color: #9e9e9e;
    border-color: transparent rgba(189,192,197,.5) rgba(189,192,197,.5);
    pointer-events: none;
}
.textfield-outlined > input:disabled + label, .textfield-outlined > textarea:disabled + label {
    color: #b0bec5;
    pointer-events: none;
}
.textfield-outlined > input:disabled + label::before, .textfield-outlined > input:disabled + label::after, .textfield-outlined > textarea:disabled + label::before, .textfield-outlined > textarea:disabled + label::after {
    border-color: rgba(189,192,197,.5);
}
.textfield-outlined > input:disabled:placeholder-shown + label::before, .textfield-outlined > input:disabled:placeholder-shown + label::after, .textfield-outlined > textarea:disabled:placeholder-shown + label::before, .textfield-outlined > textarea:disabled:placeholder-shown + label::after {
    border-color: transparent;
}

.textfield-outlined .uk-icon, .textfield-outlined .uk-icon {
    display: flex;
    align-items: center;

    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    width: 1.2rem;

    color: #505963;
    transition: color 0.2s;
}

.textfield-outlined .uk-icon:hover, .textfield-outlined .uk-icon:hover  {
    /*cursor: pointer;*/
    color: #2f373f;
}


.sanfran-font {
    position: relative;
    margin-bottom: 20px;
    padding-top: 6px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
}


.selectfield-outlined {
    position: relative;
    margin-bottom: 20px;
    padding-top: 8px;
    font-family: "san-francisco-regular" !important;
}
.selectfield-outlined > select, .selectfield-outlined > textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #272e36;
    background: transparent;
    border-style: solid;
    border-width: 1px;
    border-color: transparent #b0bec5 #b0bec5;
    border-radius: 6px;
    outline: none;
    box-shadow: none;
    -webkit-text-fill-color: currentColor;
    caret-color: #3d6f9e;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: "san-francisco-regular" !important;
}
.selectfield-outlined > select:not(:focus):placeholder-shown, .selectfield-outlined > textarea:not(:focus):placeholder-shown {
    border-color: #b0bec5;
}
.selectfield-outlined > select + label, .selectfield-outlined > textarea + label {
    display: flex;
    width: 100%;
    position: absolute;
    top: 1px;
    left: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    color: #4a6572;
    letter-spacing: 0.3px;
    background: #fff;
    cursor: default;
    transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}
.selectfield-outlined > select:not(:focus):placeholder-shown + label, .selectfield-outlined > textarea:not(:focus):placeholder-shown + label {
    font-size: 14px;
    font-weight: normal;
    line-height: 54px;
    color: #92969a;
    letter-spacing: 0;
    background: transparent;
}
.selectfield-outlined > select + label::before, .selectfield-outlined > select + label::after, .selectfield-outlined > textarea + label::before, .selectfield-outlined > textarea + label::after {
    content: "";
    display: block;
    box-sizing: border-box;
    height: 8px;
    min-width: 10px;
    margin-top: 7px;
    border-top: solid 1px #b0bec5;
    pointer-events: none;
    transition: border-color 0.2s;
}
.selectfield-outlined > select + label::before, .selectfield-outlined > textarea + label::before {
    margin-right: 4px;
    border-left: solid 1px #b0bec5;
    border-radius: 6px 0 0 0;
}
.selectfield-outlined > select + label::after, .selectfield-outlined > textarea + label::after {
    flex-grow: 1;
    margin-left: 4px;
    border-right: solid 1px #b0bec5;
    border-radius: 0 6px 0 0;
}
.selectfield-outlined > select:not(:focus):placeholder-shown + label::before, .selectfield-outlined > select:not(:focus):placeholder-shown + label::after, .selectfield-outlined > textarea:not(:focus):placeholder-shown + label::before, .selectfield-outlined > textarea:not(:focus):placeholder-shown + label::after {
    border-color: transparent;
}
/* Hover */
.selectfield-outlined:hover > select:not(:focus), .selectfield-outlined:hover > textarea:not(:focus) {
    border-color: transparent #7b9db5 #7b9db5;
}
.selectfield-outlined:hover > select:not(:focus) + label::before, .selectfield-outlined:hover > textarea:not(:focus) + label::before {
    border-color: #7b9db5;
}
.selectfield-outlined:hover > select:not(:focus) + label::after, .selectfield-outlined:hover > textarea:not(:focus) + label::after {
    border-color: #7b9db5;
}
/* Focus */
.selectfield-outlined > select:focus, .selectfield-outlined > textarea:focus {
    border-color: transparent #3d6f9e #3d6f9e;
    outline: none;
}
.selectfield-outlined > select:focus + label, .selectfield-outlined > textarea:focus + label {
    color: #3d6f9e;
}
.selectfield-outlined > select:focus + label::before, .selectfield-outlined > select:focus + label::after, .selectfield-outlined > textarea:focus + label::before, .selectfield-outlined > textarea:focus + label::after {
    border-color: #3d6f9e !important;
}
/* Disabled */
.selectfield-outlined > select:disabled, .selectfield-outlined > textarea:disabled {
    color: #9e9e9e;
    border-color: transparent rgba(189,192,197,.5) rgba(189,192,197,.5);
    pointer-events: none;
}
.selectfield-outlined > select:disabled + label, .selectfield-outlined > textarea:disabled + label {
    color: #b0bec5;
    pointer-events: none;
}
.selectfield-outlined > select:disabled + label::before, .selectfield-outlined > select:disabled + label::after, .selectfield-outlined > textarea:disabled + label::before, .selectfield-outlined > textarea:disabled + label::after {
    border-color: rgba(189,192,197,.5);
}
.selectfield-outlined > select:disabled:placeholder-shown + label::before, .selectfield-outlined > select:disabled:placeholder-shown + label::after, .selectfield-outlined > textarea:disabled:placeholder-shown + label::before, .selectfield-outlined > textarea:disabled:placeholder-shown + label::after {
    border-color: transparent;
}


@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .textfield-outlined > input, .textfield-outlined > input + label, .textfield-outlined > input + label::before, .textfield-outlined > input + label::after, .textfield-outlined > textarea, .textfield-outlined > textarea + label, .textfield-outlined > textarea + label::before, .textfield-outlined > textarea + label::after {
            transition-duration: 0.1s;
        }
    }
}


@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) {
        .selectfield-outlined > select, .selectfield-outlined > select + label, .selectfield-outlined > select + label::before, .selectfield-outlined > select + label::after, .selectfield-outlined > textarea, .selectfield-outlined > textarea + label, .selectfield-outlined > textarea + label::before, .selectfield-outlined > textarea + label::after {
            transition-duration: 0.1s;
        }
    }
}

[data-uk-sticky].uk-active {
  width: 100% !important; /* match container width */
  left: 0;
  right: 0;
  margin-left:-10px;
   margin-top:-10px;
}




.uk-modal-header-mobile {
    /* border-bottom: solid 1px #dddddd !important; */
     background-color: background-color:#9ac718 !important;
    /*background: #049904 url(../images/green-header-bg.svg) no-repeat scroll 0 0;*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 10px;
}

/* ─── 1. Input highlight — soften #faffbd to translucent ────── */
input[style*="faffbd"],
select[style*="faffbd"],
textarea[style*="faffbd"] {
    background-color: #faffbd4a !important;
}

/* ─── 2. jQuery UI Autocomplete — teal hw-cust theme ────────── */
.ui-autocomplete.ui-menu {
    border: 1.5px solid #c0dcea !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 6px 20px rgba(58,143,176,.22) !important;
    padding: 0 !important;
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
    z-index: 9999;
}
.ui-autocomplete .ui-menu-item {
    border-bottom: 1px solid #edf6fa !important;
    padding: 0 !important;
}
.ui-autocomplete .ui-menu-item:last-child {
    border-bottom: none !important;
}
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item .ui-corner-all {
    display: block !important;
    padding: 11px 14px !important;
    font-size: 11pt !important;
    font-family: "san-francisco-regular", Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
    color: #1e3a4a !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    background: none !important;
    border: none !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
.ui-autocomplete .ui-menu-item a.ui-state-focus,
.ui-autocomplete .ui-menu-item a.ui-state-active,
.ui-autocomplete .ui-menu-item .ui-corner-all.ui-state-focus,
.ui-autocomplete .ui-menu-item .ui-corner-all.ui-state-active {
    background: #edf6fa !important;
    border-left: 3px solid #3a8fb0 !important;
    color: #1e5c78 !important;
    font-weight: 700 !important;
    padding-left: 11px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* ─── 3. Circular checkbox — .control--checkbox ─────────────── */
.control--checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    position: relative;
    line-height: 1.4;
}
.control--checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.control__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #5baecf;
    border-radius: 50%;
    background: transparent;
    transition: border-color 180ms, box-shadow 180ms;
    box-shadow: 0 1px 3px rgba(58,143,176,.15);
    cursor: pointer;
}
.control__indicator::after {
    content: '';
    display: block;
    width: 4px;
    height: 8px;
    border: 2px solid #3a8fb0;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0;
    transition: opacity 150ms;
}
.control--checkbox:hover .control__indicator {
    border-color: #3a8fb0;
    box-shadow: 0 1px 6px rgba(58,143,176,.3);
}
.control--checkbox input[type="checkbox"]:checked ~ .control__indicator {
    border-color: #3a8fb0;
}
.control--checkbox input[type="checkbox"]:checked ~ .control__indicator::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL LOOK & FEEL — matches invoicingEntry.jsp design theme
   Exceptions: hardwarePosTerminal.jsp, bus terminal pages
   ═══════════════════════════════════════════════════════════════ */

/* ─── inv-panel-* classes — available globally ──────────────── */
.inv-panel {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ddeec8;
    box-shadow: 0 2px 14px rgba(80,130,40,.10);
    overflow: hidden;
}
.inv-panel-hdr {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #edf6fa 0%, #8acceb00 100%);
    border-bottom: 1px solid #c0dcea;
}
.inv-panel-hdr-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5baecf, #3a8fb0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(58,143,176,.35);
}
.inv-panel-hdr-icon i { color: #fff !important; }
.inv-panel-hdr-title {
    font-size: 10pt;
    font-weight: 700;
    color: #1e5c78;
    letter-spacing: .8px;
    text-transform: uppercase;
    font-family: "san-francisco-regular", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.inv-panel-body { padding: 14px 16px; }

/* ─── uk-title — global section header override ─────────────── */
.uk-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #edf6fa 0%, #d4edf8 100%) !important;
    color: #1e5c78 !important;
    font-size: 10pt !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #c0dcea !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    font-family: "san-francisco-regular", Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-shadow: none !important;
}
.uk-title::before {
    content: '\f129' !important;
    font-family: FontAwesome !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 26px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #5baecf, #3a8fb0) !important;
    box-shadow: 0 2px 6px rgba(58,143,176,.35) !important;
    flex-shrink: 0 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
/* Neutralise conflicting colour utility classes on uk-title */
.uk-title.font-white { color: #1e5c78 !important; }
.uk-title.background-lightgreen,
.uk-title.background-lightred,
.uk-title.background-lightblue,
.uk-title.background-gray {
    background: linear-gradient(135deg, #edf6fa 0%, #d4edf8 100%) !important;
}

/* ─── Page card wrapper — white rounded panel ───────────────── */
.background-white.round-corner-5,
.background-white.round-corner-10 {
    border-radius: 10px !important;
    box-shadow: 0 2px 14px rgba(80,130,40,.08) !important;
    border: 1px solid #e8f0e0 !important;
}

/* ─── Content area below section title ───────────────────────── */
.border-gray2 {
    border-color: #c8dfc8 !important;
}

/* ─── Action / submit button bar at page bottom ─────────────── */
.right-button-medium,
.button-to-right {
    padding: 10px 0 4px !important;
}

/* ─── White topbar (HRIS style) ──────────────────────────────── */
#header_main.hris-topbar {
    height: 56px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}
.hris-topbar-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    gap: 12px;
}

/* Left: sidebar toggles + logo */
.hdr-left {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 2px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
/* sSwitch hamburger lines — dark for white bg */
#header_main.hris-topbar .sSwitch .sSwitchIcon,
#header_main.hris-topbar .sSwitch .sSwitchIcon::before,
#header_main.hris-topbar .sSwitch .sSwitchIcon::after {
    background-color: #4a5568 !important;
}
/* Logo — no pill needed on white bg */
.hdr-logo-wrap {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    margin-left: 8px;
    line-height: 1;
}
.hdr-logo-img {
    height: 28px;
    width: auto;
    display: block;
}

/* Center: page title */
.hdr-title {
    -webkit-flex: 1;
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #1a202c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

/* Right: search + user chip */
.hdr-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 10px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
/* Mobile: the center page title is hidden (uk-hidden-small), so nothing pushes the
   bell + logout to the right and they fall to the left. Pin them right-anchored. */
@media (max-width: 767px) {
    .hris-topbar-inner .hdr-actions {
        -webkit-margin-start: auto;
        margin-left: auto;
    }
}
.hdr-search {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    background: #f0f4f8;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 12px;
    min-width: 230px;
}
.hdr-search i {
    color: #718096 !important;
    font-size: 13px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.hdr-search input[type="search"] {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
    width: 100% !important;
    color: #1a202c !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
}

/* User chip — light version (white topbar) */
.user-chip-light {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #f0f4f8;
    text-decoration: none !important;
    -webkit-transition: background 0.15s;
    transition: background 0.15s;
    line-height: 1;
}
.user-chip-light:hover {
    background: #e2e8f0;
    text-decoration: none !important;
}
.ucl-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #9ac718;
    color: #fff;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.ucl-info {
    line-height: 1.3;
    text-align: left;
}
.ucl-name {
    font-size: 12px;
    font-weight: 600;
    color: #1a202c;
    display: block;
    white-space: nowrap;
}
.ucl-role {
    font-size: 9px;
    color: #718096;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* ── Totals card (invoice / purchase shared) ─────────────────────────────── */
.inv-totals-card {
    background: linear-gradient(135deg, #f8fbf2 0%, #eef7de52 100%);
    border-radius: 10px;
    border: 1px solid #ddeec8;
    box-shadow: 0 2px 10px rgba(80,130,40,.08);
    padding: 16px;
}
.inv-grand-box {
    background: linear-gradient(135deg, #edf6fa 0%, #8acceb00 100%);
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid #c0dcea;
}
.inv-grand-box .glbl {
    font-size: 10pt;
    font-weight: 700;
    color: #1e5c78;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* ── Dialog sizing + flex layout ───────────────────────────────────────────
   Every modal dialog carries a fixed inline height (height:200px/300px/...).
   With the flex-column footer pinned to the bottom (margin-top:auto below),
   short dialogs (e.g. the "CONFIRM ACTION" boxes) left a large empty band
   above the footer that read as excessive top/bottom padding.
   Fix: ignore the fixed inline heights and let dialogs hug their content, so
   padding is balanced. Applies to ALL dialogs, desktop and mobile (CSS only —
   no JSP recompile needed).
   NOTE: do NOT put overflow on the dialog itself — the header/footer bleed to
   the edges via negative margins (margin-top/-bottom:-24px), which overflow
   treats as scrollable content and shows a permanent right-side scrollbar.
   Tall dialogs are already handled: the outer .uk-modal overlay has
   overflow:auto (main.min.css), so it scrolls when a dialog exceeds the screen.
   The flex-column machinery is kept so the footer still sits at the bottom;
   with height:auto it simply has no free space to distribute (no gap). */
.uk-modal-dialog {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    height: auto !important;
}
.uk-modal-dialog > .uk-form {
    -webkit-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    min-height: 0 !important;
}
.uk-modal-dialog > .uk-modal-footer,
.uk-modal-dialog > .uk-form > .uk-modal-footer,
.uk-modal-dialog > .uk-form > form > .uk-modal-footer,
.uk-modal-dialog > .uk-form > .uk-form > .uk-modal-footer {
    -webkit-flex-shrink: 0 !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
}
/* form inside .uk-form must also be a flex column so margin-top:auto reaches the footer */
.uk-modal-dialog > .uk-form > form {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
/* nested .uk-form inside .uk-form (e.g. form.uk-form > div.uk-form) must also be a flex column */
.uk-modal-dialog > .uk-form > .uk-form {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* ============================================================================
   42.7  IA NOTIFICATION BELL (header)
   Replaces the four full-width dashboard banners with one icon + dropdown.
   Follows the white-topbar language already established above: #e2e8f0 borders,
   8px radius, #718096 muted text, #1a202c body text, webkit-prefixed flex.
   ==========================================================================*/
.ia-bell-wrap {
    position: relative;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.ia-bell {
    position: relative;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f4f8;
    border: 1px solid #e2e8f0;
    color: #4a5568 !important;
    text-decoration: none !important;
    cursor: pointer;
}
.ia-bell:hover { background: #e6edf5; }
.ia-bell i { font-size: 15px; color: #4a5568 !important; }

/* Count bubble. Sits half outside the circle, which is why the parent cannot
   be overflow:hidden. */
.ia-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e53935;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 2px solid #ffffff;
    box-sizing: content-box;
}

/* ---- dropdown panel ---- */
.ia-bell-panel {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    width: 340px;
    max-height: 420px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    /* Above the sidebar and page content, below UIkit modals (which sit at 1010+)
       so a dialog opened from a notification still covers this. */
    z-index: 990;
    overflow: hidden;
}
.ia-bell-panel.open { display: block; }
.ia-bell-head {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #edf2f7;
    font-size: 13px;
    font-weight: 700;
    color: #1a202c;
}
.ia-bell-head-link {
    font-size: 11px;
    font-weight: 600;
    color: #2b7cd3 !important;
    text-decoration: none !important;
}
.ia-bell-head-link:hover { text-decoration: underline !important; }
.ia-bell-body {
    max-height: 372px;
    overflow-y: auto;
}
.ia-bell-empty {
    padding: 22px 14px;
    text-align: center;
    font-size: 12px;
    color: #718096;
}

/* ---- one notification row ---- */
.ia-n-item {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f2f5f9;
    text-decoration: none !important;
    color: #1a202c !important;
}
.ia-n-item:hover { background: #f7fafc; }
.ia-n-item:last-child { border-bottom: none; }

/* Unread carries the weight: tinted row plus the dot on the right. */
.ia-n-unread { background: #f0f7ff; }
.ia-n-unread:hover { background: #e6f1fd; }

.ia-n-ico {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin-top: 1px;
}
.ia-n-ico i { font-size: 13px; color: #ffffff !important; }
.ia-n-ok   { background: #1a6e3c; }
.ia-n-bad  { background: #c0392b; }
.ia-n-wait { background: #b8860b; }
.ia-n-act  { background: #2b7cd3; }

.ia-n-txt {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}
.ia-n-line {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #2d3748;
}
.ia-n-line b { color: #1a202c; }
.ia-n-time {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: #718096;
}
.ia-n-dot {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2b7cd3;
    margin-top: 11px;
}
.ia-n-sep {
    height: 6px;
    background: #f7fafc;
    border-bottom: 1px solid #edf2f7;
}

/* Small screens: the header hides the search and the user name, so give the
   panel the width it needs without running off the viewport. */
@media (max-width: 480px) {
    .ia-bell-panel {
        width: 290px;
        right: -8px;
    }
}

/* Outstanding: still awaiting a decision, and therefore part of what is keeping
   the red bubble lit. Amber left edge rather than the blue unread tint - these are
   two different states and a row can be neither, either, or (for a fresh approval
   on someone else's pending queue) both. Opening the bell clears the blue, never
   the amber. */
.ia-n-open {
    border-left: 3px solid #b8860b;
    padding-left: 11px;
}
.ia-n-open.ia-n-unread { border-left-color: #2b7cd3; }

/* Transaction-type group header inside the bell panel. Only rendered when more than
   one transaction type is present - a single header over the only group is noise. */
.ia-n-group {
    padding: 7px 14px 5px;
    background: #f7fafc;
    border-bottom: 1px solid #edf2f7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #718096;
}
.ia-n-group-n {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 8px;
    background: #e2e8f0;
    color: #4a5568;
    font-size: 9px;
    line-height: 14px;
}