@font-face {
	font-family: 'ElegantIcons';
	src:url('fonts/ElegantIcons.eot');
	src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
		url('fonts/ElegantIcons.woff') format('woff'),
		url('fonts/ElegantIcons.ttf') format('truetype'),
		url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}

h1 {
	color: #001c71;
	clear: both;
	font-size: 2.5rem;
	font-weight: 300;
   	margin-top: 0;
	padding: 1rem 0;
}

.logon h1, .custom-header {
	font-size: 34px;
	font-size: 2.125em;
	margin-bottom: 0;
	padding-bottom: 10px;
	padding-bottom: 0.295em;
}

h3 a{
	font-weight: inherit;
}

.service-msg {
	padding:0.25rem 1rem;
	max-width:40rem;
}
.service-msg-row {
	background-color:#FFD839;
}
.service-msg h3 {
	background: url("/images/service-msg-icon.svg") no-repeat left top;
	background-size: 2rem;
	padding:0.3rem 0 0.3rem 2.25rem;
	margin:0;
	font-size:1.2rem;
	font-weight:600;
	color:#000;
	clear:both;
}
.service-msg p {
	font-size:1rem;
	font-weight:400;
	color:#000;
	padding-left:2.25rem 
}

.logon {
	background-color: #eeeced;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial;
!important;
 	padding:0 0 3rem;
}

.primary-row {
	background-color: #eeeced;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial;
 	padding:0 0 3rem;
}

.form-place-hold,
.form-logon-place-hold, 
.form-submission-response,
.form-signin {
	background-color:#fff;
	color: #333;
	max-width: 25rem;
	padding: 0 40px 36px 40px;
 	padding: 0 2.5rem 2.25rem 2.5rem;
}

input[type="text"], 
input[type="tel"], 
input[type="search"], 
input[type="password"], 
input[type="textbox"], 
input[type="button"], 
input[type="email"],
input[type="date"],
textarea.field {
	border: 1px solid #9c9c9c;
	font-size: 1em; /*0.875rem;*/
	padding: 0.5rem;
}

.form-signin{
	padding-top: 30px;
	padding-top: 1.875rem; 
}

.logon p a, .logon p a:visited {
	color: #005FC0;
	font-weight:400;
	font-size: 1rem;
}
.logon form p a, .logon form p a:visited {
	font-size: 0.9rem;
}
.logon #errorMessageHeader {
	border:none;
	/*border-top:5px solid #ca3636;*/
 	font-weight: 600;
 	font-size: 0.9rem;
 	line-height:1.5rem;
 	color: #de2525;
 	background: #fff url("/images/error-icon.svg") no-repeat left center;
 	background-size:3rem;
 	padding-left:3.5rem;
 	margin: 0 0 30px 0;
 	margin-bottom: 1.875rem;
 	width: inherit;
}

label {
  	font-size: 0.875rem; /*0.875rem = 14px*/
 	color: #333333;
  	margin: 24px 0 5px;
 	margin: 1.5rem 0 0.3125rem 0;
} 

label ~ label {
	margin: 14px 0 5px;
	margin: 0.875rem 0 0.3125rem 0;
}
 
label.formError {
	margin-top: 0.5rem;
	/*margin-bottom:1rem;*/
	color: #de2525;
}

label[for='expDate']{
	margin-top: 14px;
	margin-top: 0.875rem;
}

.logon li label.formError {
	margin:0;
	line-height: 1.4em;
	font-weight:600
}
.logon ul#operationMsg li {
	margin:0;
	padding:0;
}
.logon ul#operationMsg {
	list-style-type: none;
	margin: 0;
	display:block;
 	padding:0.5rem 0 0;
 	min-height:2.5rem;
 	vertical-align:middle;
}
input, select {
	border: 1px solid #9c9c9c;
	color: #666;
	height: 40px; 
	height: 2.5rem; /*2.813rem = 45px */ /*2.625rem = 42px */
  	padding: 0.25rem 0.5rem;
	font-size: 1em; /*0.875rem = 14px */
	/*font-style: italic;*/
	width: 100%;
/*	margin-bottom: 1rem;*/
	background-color: #f3f3f3;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial;
}
input:active, input:focus, input.formError:active, input.formError:focus, select:focus {
	border-color: #005FC0;	/*#2a59e3 */
	background-color:#fff;
	background-image: none;
	/*padding-left: 0.5rem; --> Is this needed? Causing conflicts with base selector*/
	outline-style: none;
}
input.formError {
/*	margin-bottom: 0.3rem;*/
	border-color:#ca3636;
	background-color:#f4f4f5;
	background: #f4f4f5 url("/images/error-icon.svg") no-repeat left center;
	background-size: 2rem;
	padding-left: 2.1rem;
}

/*
input#expDate::-webkit-calendar-picker-indicator{	
	-webkit-appearance: none;
  	margin: 0;
}*/

.button {
	border-radius: 0.3em;
	box-sizing: border-box;
	color: #fff;
	font-size: 1.25rem;
	height: 44px;
	height: 2.75rem; /*2.875rem*/
	/*line-height: 16px;*/
	line-height: 1em; /* initial */
	margin-bottom: 10px;
	padding: 0.5rem 0;
	width: 100%;
}

.hold.button, .confirm.button, .signin.button{
	background-color: #005FC0;
	border: 3px solid #005FC0;
	margin-top: 1.65rem;
}

.hold.button:hover, .confirm.button:hover, .signin.button:hover{
	background-color: #1077b7;
	border: 3px solid #1077b7;
}

.hold.button:active, .confirm.button:active, .signin.button:active{
	background-color: #005FC0;
	border: 3px solid #5ba61b;
}

/*.hold:focus,*/ .confirm.button:focus, .signin.button:focus{
	background-color: #005FC0;
}

.button:focus {
	background-color: #1077b7;
	border: 3px solid #5ba61b;
}

.row .columns > div,
.row .columns > form{
	border-left: 1px solid #c9c9c9;
	border-right: 1px solid #c9c9c9;
}

.hold-options-location label{
	/*margin-top: 20px;
	margin-bottom: 10px;*/
}

.hold-options-expiry h3{
	color: #3c3935;
	margin-top: 30px; 
}

.hold-options-expiry label{
	/*font-weight: normal;
	margin-top: 15px;
	margin-bottom: 10px; */
}

.hold-options-expiry a{
	background-color: #fff;
	border: 1px solid #e4e4e4;
    display: block;
    height: 100%;
    padding: 9px;
    position: absolute;
    right: 0;
}

.border-top{
	border-top: 1px solid #c9c9c9;
}

.border-bottom{
	border-bottom: 1px solid #c9c9c9;
}

.stay-signed-in, .forgot-pin {
	margin: 0.5rem 0 0;
	display: inline-block;
}

.stay-signed-in input[type='checkbox'] {
	margin-bottom: 0;
}

.forgot-pin {
	float: right;
}

.signin.button {
	margin-top: 1.3rem;
}

.toggler{
	border-top: 1px solid #005FC0;
	margin-top: 1.875rem;
	padding-top: 20px;
	padding-top: 1.25rem;
}	

.tool-tip{
	 background: url('/images/icon_question_open.svg') no-repeat right center; 
	 padding-right: 30px;
	 /*width: 32px;*/
	 height: 32px;
	 cursor: hand;
	 cursor: pointer;
	 vertical-align: middle;
}

.tool-tip.open, .tool-tip:focus{
	background: url('/images/icon_question_closed.svg') no-repeat right center; 
}

.hidden{
	position: absolute;
	left: -10000px;
}

.toggler .icon-toggle{
	background: url('/images/icon_caret_closed.svg') no-repeat left center;
	padding-left: 30px;
	width: 30px;
	height: 30px;
}

.toggler.open .icon-toggle{
	background: url('/images/icon_caret_open.svg') no-repeat left 5px;
}

.toggler.open + .hidden{
	position: relative;
	left: auto;
}

.toggler a:link, 
.toggler a:visited,
.toggler a:hover,
.toggler a:active, 
.toggler a:focus{	
	color: #005FC0;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Arial;
	font-weight: 400;
	/*text-decoration: none;*/
}

#txtDate{
	width: 100%;
}

.svg-dropdown-arrow{
	background-color: transparent;
	border-left: 1px solid #9c9c9c;
    bottom: 1px;
    height: 2.375em; /*2.7rem;*/
    right: 1px;
    top: 55px;  /* 32px */
    pointer-events: none;
    width: 2.4em; /* 40px; */
}

:-moz-any(.svg-dropdown-arrow){
	height: 2.371em;		/*2.25em; / 43px */
}

.svg-calendar{
    /*background-color: #fff;*/
    border-left: 1px solid #9c9c9c;
    bottom: 0;
    height: 45px;
    overflow: visible;
    pointer-events: none;
    position: absolute;
    right: 0px;
    top: 1px;
    width: 40px;
}

.custom-form-container{
	display: block;
    position: relative;
    vertical-align: middle;
}

.custom-form-field{
	-moz-appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
	box-shadow: none;
    box-sizing: border-box;
    display: block;
}

/*********************** Custom check - module ******************/

.custom-check {
	background-color: #fff;
	border: none;
	cursor: pointer;
	margin-right: 5px;
	width: 1px;
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.custom-label-check:before {

	background-color: #fff;
	border: 1px solid #777677;
	content: '';
	display: inline-block;
	height: 1.2em;
	vertical-align: middle;
	width: 1.2em;
	margin-right: 0.5em;
}

.custom-label-check{
	cursor: pointer;
	margin: 0 !important;
}

.custom-check:checked + .custom-label-check:before {
	background-position: center center;
	background-repeat: no-repeat;
	background-image: none,url(https://account.torontopubliclibrary.ca/accountassets/images/icon/checkmark.svg);
}

.submission-alert{
	background-image: url('/images/icons/alert-icons.jpg');
	background-repeat: no-repeat;
	background-position: center top;
	color: #333;
	font-size: 1em;
	margin-bottom: 40px;
	margin-top: 20px;
    padding-top: 80px;
    text-align: center;
}

.is-successful{ }

.has-failed{ background-position: center -110px; }

.submission-alert.has-failed + .fine-notice{
	display: none;
}

.submission-record-confirmation{
	margin-bottom: 60px;
}

.submission-record-pickup, .submission-record-expiration{
	color: #3c3935; 
	font-size: 14px;
	margin-left: 15px;
}

.submission-record-pickup span{ 
	display: inline-block;
	padding-right: 20px; 
}

.submission-record-expiration span:first-child{ 
	display: inline-block;
	padding-right: 30px; 
}

input[type='checkbox']{
	height: auto;
	width: auto;
	padding: 0;
}

.place-hold-confirmation .record-details{
	background-color: #f4f4f5;
	padding-bottom: 1.875rem;
}

.fine-notice{
	color: #221f1f; 
	font-size: 14px; 
	margin-bottom: 40px;
	margin-bottom: 2.3rem;
	text-align: center;
}

#txtDate:focus + a,
.custom-select select:focus + svg,
.custom-form-field:focus + svg{
	border-left: 1px solid #005FC0;
}

.custom-select select:focus + svg,
.custom-form-field:focus + svg{
	background-color: #005FC0;
}

.custom-form-field:focus + svg .bg-fill{
	fill-opacity: 0;
}

.custom-select select:focus + svg path,
.custom-form-field:focus + svg path{
	fill: #fff;
}
	
.custom-form-field:focus + svg .cal-container,
.custom-form-field:focus + svg .cal-row rect.bottom,
.custom-form-field:focus + svg .cal-row rect.top{
	fill: #fff;
}

.custom-form-field:focus + .svg-dropdown-arrow line{
	stroke: #fff;
}

.custom-form-field:focus + svg .cal-subcontainer{
	fill: #005FC0;
}

.cal-container{
	fill:#00639D;
}

.cal-subcontainer{
	fill: #fff;
}

.cal-row rect.bottom, .cal-row rect.top{
	fill: #005FC0;
}

.cal-row rect.bottom{
	opacity: 0.9;
}

.cal-row.last rect.bottom, .cal-row.last rect.top{
	fill: #3C3935;
}

.cal-row.last rect.bottom{
	opacity: 0.72;
}

/*** Font icons ***/

/* Should we use CSS font icons ? Something to consider. Need to discuss with team. */

.icon-arrow-left, .icon-arrow-right, .icon-x, .icon-cir-plus, .icon-cir-minus{
	/*color: #333333;
	font-family: 'ElegantIcons';
    font-style: normal;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;
    text-rendering: optimizeLegibility;*/
}

.icon-arrow-left{
	/*content: "\34";*/
	background: url('/images/icon_arrow_carrot-left.svg') no-repeat;
}

.icon-arrow-right{
	/* content: "\35"; */
	background: url('/images/icon_arrow_carrot-right.svg') no-repeat;
}

.icon-arrow-left:hover, 
.icon-arrow-right:hover,
.icon-close:hover{
	text-decoration: none;
}

.icon-close{
	/*content: "\4d";
	font-size: 3em;*/
	background: url('/images/icon_close.svg') no-repeat right center;
}

.icon-cir-plus:after, .icon-cir-minus:after{
	/*color: #005FC0;
	cursor: pointer;
	cursor: hand;
	font-size: 1.34em;
	vertical-align: middle;
	*/
}

.icon-cir-plus{
	/*content: "\e050";*/
	background: url('/images/icon_caret_open.svg') no-repeat right center;
	
}

.icon-cir-minus{
	/*content: "\e04f";*/
	background: url('/images/icon_minus_alt.svg') no-repeat;
}

.prev a,
.next a{
	position: absolute;
	top: 110px;
	height: 50px;
	width: 50px;
}

.prev a{
	left: -45px;
}

.next a{
	right: -43px;
}

.calendar-mobile {
	display: none;
}

	
@media (max-width: 25.875em) /*414px*/ {
	
	.column, .columns{
		padding: 0;
	}
	
	.row .columns > div, 
	.row .columns > form{
		border: none;
	}
	
	.record-details {
		padding: 1.875rem 1.25rem 0.5rem;
	}
	
	.form-place-hold,
	.form-logon-place-hold, 
	.form-submission-response{
		padding: 0 1.25rem 2rem;
	}
	
	.form-signin{
		padding: 1.875rem 1.25rem 2rem;
	}
	
	.calendar-desktop{
		display: none;
	}
	
	.calendar-mobile {
		display: block;
	}
	
}