/* to get the glyphicons working properly with the MIME type woff2 it was necessary to create web.config in the UMC Portal website base directory  similar to the one found in the ETS-Refresh website base directory */

.navbar-bgW-h165 {
	background-color: white !important;
	height: 165px;
}

li.vah30 {
	height: 30px;
	line-height: 30px;
	min-height: 30px;
}

.rowTweak {
	padding: 0;
	margin: 0;
	width: 100%;
}

a:focus,
body:focus,
button:focus,
select:focus,
input:focus,
textarea:focus {
	outline: none !important;
}

.capture-label-styling {
	font-size: 110%;
	font-weight: bold;
}

.capture-input-styling {
	width: 135px;
	font-size: 155%;
}

.compact-line-height {
	line-height: 5px !important;
}

.control-label-c333 {
	color: #333333 !important;
}

.control-label-mb-2 {
	margin-bottom: -2px !important;
}

.control-label-pr0 {
	padding-right: 0px !important;
}

.control-label-pl0pr4 {
	padding-left: 0px !important;
	padding-right: 4px !important;
}

.control-label-tal-pt0-mt0 {
	text-align: left !important;
	padding-top: 0px !important;
	margin-top: 0px !important;
}

.control-label-ml30 {
	margin-left: 30px !important;
}

.form-control-bgW-b1S {
	background-color: white;
	border: 1px solid #7A8A99;
}

.form-control-select-styling {
	background-color: #EFF6FC;
	font-size: 150% !important;
}

.form-control-textarea {
	background-color: white;
	color: black;
	min-height: 121px;
	resize: vertical;
}

/* the next line suppresses the doubling-up of validation error messages */
.hf-warning {
	display: none;
}



.icon {
	margin-right: 10px;
}

.icon2 {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 250px;
	height: 80px;
}

.icon3 {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 209px;
	height: 66px;
}

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

.important-message {
	font-weight: bold;
	color: navy;
	width: 100%;
}

.input-group-shoehorn {
	width: 80%;
	margin-left: 15px;
	margin-bottom: -16px;
}

label.line-two {
    line-height: 16px !important;
}

.look-disabled {
	background-color: #eeeeee;
	cursor: not-allowed;
}

.makepointer {
	cursor: pointer;
}

.modal-body-styling {
	text-align: left !important;
	color: #777 !important;
	font-weight: normal !important;
	font-size: medium !important;
}

/* .p-textarea {
	background-color: white;
	color: black;
	border: 1px solid #cccccc;
	border-radius: 6px;
	font-family: inherit;
	font-size: 36px;
	padding: 10px 16px;
} */

.panel-body-bgColor {
	background-color: #EFF6FC;
}

.panel-body-alert {
	text-align: center;
	padding-bottom: 10px;
	padding-top: 10px;
}

.panel-footer-em {
	font-weight: bold;
}

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

.panel-footer-umc {
	/* display: inline;
	font-size: xx-small; */
	font-size: small;
	font-weight: normal;
}

.panel-footer-shoehorn {
	font-style: italic;
	min-height: 45px;
}

.form-control-password {
	letter-spacing: 2px;
	font-size: x-large;
}

.btn-lg-spaced {
	margin-top: 5px;
	max-width: 210px;
	min-width: 210px;
}

.stealthy {
	border: none;
	border-color: transparent;
	font-size: 1%;
}

.txt-algn-lft {
	text-align: left !important;
}


/******************* Start Jquery Data Tables ******************/

.dataTables_length {
    /* float: left; */
	float: right;
}

.dataTables_filter {
    /* float: right;
    text-align: right; */
	float: left;
	text-align: left;
}

.dataTables_length label,
.dataTables_filter label {
    width: auto;
    /* font: 0.8125rem/2em 'open_sansregular', sans-serif; */
	font: 1.25rem 'open_sansregular', sans-serif;
    padding-right: 0;
}

.dataTables_length label select,
.dataTables_filter label input {
	height: 25px;
    padding: 0 0.5em;
    /* font-size: 0.8125rem; */
	font-size: 1.25rem;
    line-height: 1.42857143;
    color: #565656;
    background-color: #fff;
    border: 1px solid #b1d1fd;
    margin: 5px 0 5px 5px;
}

.dataTables_paginate {
    float: right;
    margin-top: 5px;
}

.dataTables_info {
    /* Showing ? to ? of ? entries (filtered from ? total entries) */
	float: right;
	/* float: left; */
    /* font-size: 0.8125rem; */
	font-size: 1.2rem;
    /* margin-top: 5px; */
	margin-top: -10px;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}

/* Removed the following section because we are using instead alternatives coming from: dataTables.bootstrap.min.css */
/* table.dataTable thead .sorting_asc {
    background-image: url(../images/sort_asc.png);
}

table.dataTable thead .sorting {
    background-image: url(../images/sort_both.png);
}

table.dataTable thead .sorting_desc {
    background-image: url(../images/sort_desc.png);
} */

a.paginate_button {
    color: black;
    padding: 5px 9px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    line-height: 15px;
    font-size: 12px;
}

a.paginate_button.current {
    background-color: #1ea7f6;
    color: white;
    border: 1px solid #1ea7f6;
}

a.paginate_button.disabled {
    background-color: #ccc;
    color: #666;
    border-color: #ccc;
}

/* fixes datatable pagination buttons that are otherwise being styled by: bootstrap.min.css */
.pagination li a, .pagination li span {
	padding: 5px 7px;
}

/******************* End Jquery Data Tables ******************/



/******************* Start Accordion Panels ******************/

.panel-heading.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';		/* essential for enabling glyphicon */
    content:"\e114";						/* adjust as needed, taken from bootstrap.css */
    float: right;
    position: relative;
    bottom: 23px;
    font-size: 15pt;						/* adjust as needed */
    color: grey;							/* adjust as needed */
}

.panel-heading.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content:"\e080";						/* adjust as needed, taken from bootstrap.css */
}

/* change color of "collapsed" class */
.panel-heading.accordion-toggle.collapsed {
	/* background: #EFF6FC; */
	/* color: gray; */
}

/* change the properties of the "active" accordion panel */
[aria-expanded="true"] .panel-title {
	font-weight: bold;
	font-size: 120%;
}

/* change color of "notvisited" class A.Telfer 20180219 */
.panel-heading.accordion-toggle.notvisited {
	/* background: #D9EDF7; */
	background: #EFF6FC;
}

.panel-heading.accordion-toggle.notvisited:after {
    /* symbol for "notvisited" panels */
    content:"";
}

/* change the properties of the non-active accordion panels */
/* [aria-expanded="false"] .panel-title {
	font-size: 95%;
} */

/******************** End Accordion Panels *******************/



/******************** Start of Image-based Radio and Checkbox Inputs *******************/

.xBrwsrChkBx {
	position: absolute;
	top: 18px;
	width: 16px;
	height: 16px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: #ffffff;
	-appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

.xBrwsrChkBx:checked {
	display : inline-block;
	/* background: #fff url(https://www.umc4ime.com/NewNewSite/images/checkmark.png) no-repeat center center; */
	background: #fff url(../images/checkmark.png) no-repeat center center;
	background-size: 100%;
}

.xBrwsrChkBx:disabled {
	background-color: #eeeeee;
	color: #eeeeee;
	border: 1px solid #dddddd;
}

.xBrwsrChkBx:focus {
    border: 1px solid #66AFE9;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    outline: none;
}

.form-group-lg .xBrwsrChkBx {
	width: 24px;
	height: 24px;
	/* behavior: url(border-radius.htc); */
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

.xBrwsrChkBx2 {
	/* position: relative;
	top: 3px; */
	width: 16px;
	height: 16px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: #ffffff;
	-appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

.xBrwsrChkBx2:checked {
	display : inline-block;
	/* background: #fff url(https://www.umc4ime.com/NewNewSite/images/checkmark.png) no-repeat center center; */
	background: #fff url(../images/checkmark.png) no-repeat center center;
	background-size: 100%;
}

.xBrwsrChkBx2:disabled {
	background-color: #eeeeee;
	color: #eeeeee;
	border: 1px solid #dddddd;
}

.xBrwsrChkBx2:focus {
    border: 1px solid #66AFE9;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    outline: none;
}

.form-group-lg .xBrwsrChkBx2 {
	width: 24px;
	height: 24px;
	/* behavior: url(border-radius.htc); */
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

.xBrwsrChkBxLabel {
	margin-left: 10px;
}

/******************** End of Image-based Radio and Checkbox Inputs *******************/


/* (at least for '.form-group-lg' encapsulation of checkboxes) the following deals with checkbox/text-input links when zoomed to stop checkbox from encroaching onto text-input box (this is some kind of bug)
	may need to do some more work if we start having '.form-group' encapsulated checkboxes in the future */
@media (max-width: 750px) {
	.xBrwsrChkBx {
		top: 0px;
	}
	.form-control-tight {
		margin-top: 2px;
	}
}

.tightRow {
	margin-bottom: -15px;
}

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

.mandatory {
	/* background-color: #d9edf7; */
	/* If the 'mandatory' color is changed the function ShwErrModal() in umcportal.js needs to be updated accordingly A.Telfer 20180426 */
	background-color: #ffff99;
}

.btn.blackborder1 {
	border: 1px solid black;
}

/******************** Placeholder Styling *******************/

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	font-size: 85%;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   font-size: 85%;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
   font-size: 85%;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
   font-size: 85%;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
   font-size: 85%;
}
.form-control::placeholder { /* Most modern browsers support this now. */
   font-size: 85%;
}