.ui-autocomplete {height: 200px; overflow-y: scroll; overflow-x: hidden;}

.roundBorder  {
        border:solid 1px #D2D2D2;
        -moz-border-radius: 3px;
        border-radius:3px 3px 3px 3px;
        -webkit-border-radius: 3px;
        padding:5px;
      }
tbody.even-grp,   tr.even-grp{
       background-color:#ffffff;

   }
tbody.even {
    background-color:#eefcd2; /*#C6DABE;*/
}
 tbody.odd-grp, tr.odd-grp,tbody.odd1 {
       background-color:#F0F0F5;
  }
      
tbody.odd:hover,
tr.odd:hover,
td.odd:hover {
    background-color: #e6e6e6;
}
tbody.even:hover,
tr.even:hover,
td.even:hover  {
    background-color: #d6e3bd;
}

tbody.even_selUser:hover,
tr.even_selUser:hover,
td.even_selUser:hover {
    background-color:#FFF4E8 ;
}
tbody.odd_selUser:hover,
tr.odd_selUser:hover,
td.odd_selUser:hover {
    background-color:#FFC285;
}
tr.selected{
    background-color:#B2F0FF !important;

}

tbody.odd-selected,
tr.odd-selected,
td.odd-selected {
    color:#00f;
    background-color: #ccc;
}
tbody.even-selected,
tr.even-selected,
td.even-selected {
    color:#00f;
    background-color: #bec9a8;
}
tbody.odd-disabled,
tr.odd-disabled,
td.odd-disabled {
    color:#a33;
    background-color: #fff;
}
tbody.even-disabled,
tr.even-disabled,
td.even-disabled {
    color:#a33;
    background-color: #eefcd2;
}

.page-nav, .page-nav-first,.page-nav-last{
    background:#CDCDCD;
    color:#1964AF;
    padding:0px 4px 4px 4px;
    min-width: 25px;
    text-align:center;
    cursor:pointer;
    display: inline-block;
    font-family:arial;
    height:20px;
}
 div>*{vertical-align:middle}
 
 .page-nav{
    border-top:1px #F0F0F0 solid ;
    border-right:1px #F0F0F0 solid ;
    border-bottom:1px #F0F0F0 solid ;
    padding-top:3px;
 }
.page-nav-first{
    border:solid 1px #F0F0F0 ;
        -moz-border-radius: 3px 0px 0px 3px;
        border-radius:3px 0px 0px 3px;
        -webkit-border-radius: 3px 0px 0px 3px;
    
 }
.page-nav-last{
    border:solid 1px #F0F0F0 ;
        -moz-border-radius: 0px 3px 3px 0px;
        border-radius:0px 3px 3px 0px;
        -webkit-border-radius: 0px 3px 3px 0px;
    border-left:0px;
 }


//--------------------------
.opl-pagination {
  display: inline-block;
  padding-left: 0;
  margin: 0;
  border-radius: 4px;
}
ul.opl-pagination {
  padding:0 0 0 0;
  margin:0 0 0 0;}

.opl-pagination > li {
  display: inline;
}
.opl-pagination > select,
.opl-pagination > li > a,
.opl-pagination > li > i,
.opl-pagination > li > span {
  position: relative;
  float: left;
  padding: 3px 7px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #428bca;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.opl-pagination > li:first-child > a,
.opl-pagination > li:first-child > span {
  margin-left: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.opl-pagination > select{
    padding:2px 7px;
  border-radius: 4px;
}
.opl-pagination > li:last-child > a,
.opl-pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.opl-pagination > li > a:hover,
.opl-pagination > li > span:hover,
.opl-pagination > li > a:focus,
.opl-pagination > li > span:focus {
  color: #2a6496;
  background-color: #eee;
  border-color: #ddd;
}
.opl-pagination > .active > a,
.opl-pagination > .active > span,
.opl-pagination > .active > a:hover,
.opl-pagination > .active > span:hover,
.opl-pagination > .active > a:focus,
.opl-pagination > .active > span:focus {
  cursor: default;
/*  background-color: #428bca;  tomk: changed for ADA compliance */
/*  border-color: #428bca;      tomk: changed for ADA compliance */
  background-color: #ff0;
  border-color: #ddd;
}
.opl-pagination > .disabled > span,
.opl-pagination > .disabled > span:hover,
.opl-pagination > .disabled > span:focus,
.opl-pagination > .disabled > a,
.opl-pagination > .disabled > a:hover,
.opl-pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
.opl-pagination-lg > li > a,
.opl-pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
}
.opl-pagination-lg > li:first-child > a,
.opl-pagination-lg > li:first-child > span {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.opl-pagination-lg > li:last-child > a,
.opl-pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.opl-pagination-sm > li > a,
.opl-pagination-sm > li > span ,
.opl-pagination-sm > li > i
{
  padding: 5px 10px;
  font-size: 12px;
}

.opl-pagination-sm > li:first-child > a,
.opl-pagination-sm > li:first-child > span {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.opl-pagination-sm > li:last-child > a,
.opl-pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}


//--------------------------


tbody.odd_selUser,
tr.odd_selUser,
td.odd_selUser,li,odd_selUser{
    background:#FDF9F6;
 }
tbody.even_selUser, tr.even_selUser,
      td.even_selUser,li.even_selUser{
    background:#FFEBD6;
 }

 .selPage{
     font-weight:bold;
     color:	#148CAA;
     background:yellow;
 }
table.userListResult{
    width:100%;font-size:10pt;
}
table.userListResult td ,th{
    border:solid 1px #D2D2D2;
    -moz-border-radius: 1px;
    border-radius:1px 1px 1px 1px;
    -webkit-border-radius: 1px;

}
table.userListResult th{
    color:#484848 ;
    text-align:center;
}
.red{ color:red;}
.green{ color:green;}

.tealBoldBg{
    background:#00A3A3;
    color:white;
}
.greenBoldBg{
    background:#5C991F;
    color:white;
}
.yellowBoldBg{
    background:yellow;
    color:green;
}
.redBoldBg{
    background:#E60000;
    color:white;
}
.brownBoldBg{
    background:#826800;
    color:white;
}
.tealBoldBg, .greenBoldBg, .yellowBoldBg, .redBoldBg,.brownBoldBg,.yellowBoldBg{
    padding:0 5px 0 5px;
    margin:0 15px 0 5px;
    font-weight:bold;
    font-size:110%;
}
div .printFm {
    display:inline-block;padding:2px 20px 2px 20px; width:160px;
    border:solid 0px red;
}

div .printFm_row {
    display:inline-block;padding:2px 20px 2px 20px; width:850px;
}

 .error_roundBorder  {
        border:solid 2px #FF4D4D;
        -moz-border-radius: 2px;
        border-radius:2px 2px 2px 2px;
        -webkit-border-radius: 2px;
        box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3)
    }

.error_msg{
    color:brown;font-style:italic; font-size:9pt;
}
    .odd{
        background:#DFECEC;
    }
a.simplePageNav{
    cursor:pointer;padding-left:5px;
 }
 a.selPage{
     font-weight:bold;
 }

 a.goPage{
     text-decoration:none;
 }
.dir_personFrm {width:1080px;border:solid 0px red;}
.dir_personFrm input{ font-size:9pt;font-family:Arial;}


.ui-widget { font-family:Arial ;font-size:9pt }
   
   
  
.boldGray{
    color:gray;
    font-weight:bold;
}
   
    
     .roundBorder  {
        border:solid 1px #D2D2D2;
        -moz-border-radius: 3px;
        border-radius:3px 3px 3px 3px;
        -webkit-border-radius: 3px;
    }

    .fmRow{
         padding:3px;
         text-indent: 5px;
         background-color:FFFFFF;
    }

    .fmRowShow{
        background-color:yellow;
    }

    .fmRow:hover{
        background-color:#F0F0F0 ;
    }
   .fmRow_uid{
        text-align:left;display:inline-block;width:150px; 
    }
    
    .fmRow_name{
        text-align:left;display:inline-block;width:270px; 
    }
    .fmRow_rel{
        text-align:left;display:inline-block;width:160px; 
    }
    .fmRow_bd{
        text-align:left;display:inline-block;width:160px; 
    }
    .fmRow_email{
        text-align:left;display:inline-block;width:200px; 
    }
 
     .addr{
        margin:10px;
    }
     

table.userListResult th{
  font-weight:bold
}


.ui-autocomplete {
    z-index: 10051; /* z-index of modal is equal to 1050. */
}


.pac-container {         
    z-index: 10510 !important;                 
    display: retard !important;             
    }
input.dir_user_45{
    width:45px;
}
input.dir_user_50{
    width:50px;
}
input.dir_user_75{
    width:75px;
}
input.dir_user_100{
    width:100px;
}

input.dir_user_125 , select.dir_user_125{
    width:125px;
}
input.dir_user_150{
    width:150px;
}
input.dir_user_175{
    width:175px;
}
input.dir_user_200{
    width:200px;
}
input.dir_user_225{
    width:225px;
}
input.dir_user_250{
    width:250px;
}

#tabs-cont table{
    background:transparent;
} 
#tabs-prim table{
    cell-spacing:1px;
    background:transparent;
} 

 .dir-contactBlock{
     margin-top:15px;
     border:solid #E8E8E8 1px;
     background:#F8F8F8 ;
 }
 .dir-contact-search{
    width:150px;background:#E0E0E0;
 }
 .dir-contact-search:hover{
   background:#A0A0A0;
 }
 .dir-btn:hover, .dir-personFrm-btn:hover ,
 .dir-personFrm-btn_1:hover, .itemTypeParam-btn:hover{
   background:#A0A0A0;
 }

 .dir-btn, .dir-personFrm-btn ,
 .dir-personFrm-btn_1,.itemTypeParam-btn{
     color:blue;
     font-size:75%;        
     background:#E0E0E0;        
     padding:3px 10px 3px 10px;
     display:inline-block;
     cursor:pointer;
    
     border:solid 1px #D2D2D2;
        -moz-border-radius: 3px;
        border-radius:3px 3px 3px 3px;
        -webkit-border-radius: 3px;
        padding:5px;

   
 }
.dir-btn,.itemTypeParam-btn{
     font-size:100%;     
     min-width:100px;
}

 .dir-personFrm-btn:hover{
   background:#A0A0A0;
 }
.dir-personFrm-btn_1{
    padding:10px 10px 10px 10px;


}
.dir_personFrm{margin-bottom:10px;}

#dir_patronInfo label{
    padding:15px;
}

div[class='dir_personFrm'] input, div[class='dir_personFrm'] select, div[class='dir_personFrm'] textarea, 
#userEditorDiv input[type='text'],
#quickUserDiv input[type='text'],
#userEditorDiv select, #userEditorDiv textarea,#userEditorDiv input[type='password'],
#quickUserDiv select, #quickUserDiv textarea,#quickUserDiv input[type='password']{
    width:100%;
}
#userEditorDiv th,
#quickUserDiv th,
#dir_patronInfo th,
div[class='dir-tabs-content'] th,
div[class='dir_personFrm'] th{
    text-align:right;
    padding:5px 5px 5px 15px;
    font-size:90%;

}
#userEditorDiv td,
#quickUserDiv td,
#dir_patronInfo td,
div[class='dir-tabs-content'] td,
div[class='dir_personFrm'] td{
    border:solid 0px;
    padding:2px;
}
#circ_preSelUser fieldset>legend,
#itemCircStatusDiv fieldset>legend,
#userTypeFormDlg fieldset>legend,
#dir_patronInfo fieldset>legend,
#userEditorDiv fieldset>legend,
#dir_patronInfo fieldset>legend{
    color:#006B8E;
    font-size:110%;

}
#circ_preSelUser fieldset>legend{
    text-transform: uppercase
}
#itemCircStatusDiv fieldset>legend,
#circ_preSelUser fieldset,
#itemCircStatusDiv fieldset,
#userTypeFormDlg fieldset,
#dir_patronInfo fieldset,
#userEditorDiv fieldset,
#dir_patronInfo fieldset{
    border:solid 1px #D2D2D2;
    -moz-border-radius: 3px;
    border-radius:3px 3px 3px 3px;
    -webkit-border-radius: 3px;
    padding:5px;
    margin-top:5px;
}

#permissionFrm table{
background:transparent;
}
#permissionFrm .sysname{
    font-weight:bold;
    color:brown;
    background:#FFFFE0;
    padding:3px;
    }
#permissionFrm .pType{
    font-weight:bold;
    color:#006B8F;

}
#permissionFrm a.editPermLink{
    font-size:95%;
    color:blue;
    font-weight:normal;
    text-decoration:underline;
    cursor:pointer;
}
#permissionFrm .editPermLink{
    font-size:92%;
    color:#0066FF;
    font-weight:normal;
    padding-top:12px;
    float:right;
}

#permissionFrm  .tSel ,
#oplUserPermForm_uTypeDlg .tSel
    {font-weight:bold;color:#0066FF} 
#permissionFrm  .tUnsel ,
#oplUserPermForm_uTypeDlg .tUnsel{font-weight:normal;color:#333F43} 

td.dir-pFrm-selUserType  {
    color:	#336F83;
    font-size:92%;
    padding-top:15px;
}

.dir-small-icon{
    border:solid 1px transparent;
    height:18px;
    padding:3px 5px 3px 5px;
    margin-left:7px;
    cursor:pointer;
}
.dir-small-icon:hover{
    border:solid 1px #D2D2D2;
    background:yellow;
    -moz-border-radius: 3px;
    border-radius:3px 3px 3px 3px;
    -webkit-border-radius: 3px;
   }
.bar{color:brown;}

.ui-dialog {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
    font-size:120%;
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5;;
	bottom: -5px;
	background-position: 16px 16px;
}

#permissionFrm li{
    display: inline;
    color:#336F83;
    font-size:9pt;
    font-weight:normal;
    padding-right:5px;
}




.input-with-icon {
  /* causes absolute icon div to be positioned correctly */
  position: relative;
  margin-right:-3px; 
  /*height: 3.2rem;*/
  box-sizing: border-box;
}

.input-with-icon .form-control {
    height: 100%;
    width: 100%;
    padding-right: 0rem;
    box-sizing: border-box;
}

.input-with-icon .icon {
  position: absolute;
  
  /* These are set relative to the height of the input box to bound the box neatly inside. This is aesthetic to me but you may change the dimensions of course. */
  right: 0rem;
  top: 0rem;
  width: 1.6rem;
  height: 100%;
  border-radius:0rem 0.1rem 0.1rem 0;
  
  /* content in the icon div is centered, without bootstrap or font-awesome you may wish to add your own text in the span */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* 
 BELOW PROPERTIES AREN'T CRITICAL FOR DESIRED BEHAVIOUR.
 THEY ARE PURELY FOR DEMONSTRATION PURPOSES
*/
.input-with-icon {
}

.input-with-icon .form-control {
  padding-left: 0rem;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.input-with-icon .icon {
  border: 1px solid grey;
  background:#ddd;
}