/*-- ;vc; Version kidsb.css/IGU.7 Date 2022-08-19 By TorontoQA Location IGU45QASYNC --*/
@import url("../base/base.css");

/* Additions to the base file for the kids look */
body {
    position: absolute;
    z-index: 0;
	min-height:100%;}
#header > a {
    background: url("images/sprite.png") no-repeat scroll -175px 4px rgba(0, 0, 0, 0) !important;
    bottom: 0;
    height: 90px !important;
    top: auto !important;
    width: 65px !important;}
html  body#body #navigation {
	background:#d0f5ff !important;
	box-shadow:	0 5px 10px -8px rgba(0, 0, 0, 0.5), 0 0 10px #96EEFC inset;}
#navigation > ul.mainnavigation {
    overflow: hidden;}
#footer {
    height: auto;
    max-width: none !important;
    min-height: 240px;
    width: 100% !important;}
#footer > a {
    background: url("images/sprite.png") no-repeat scroll right -50px transparent;
    bottom: 0;
    display: block;
    height: 320px;
    position: absolute;
    right: 0;
    width: 268px;
    z-index: -1;}
#footer .payoff {
    background: url("images/sprite.png") no-repeat scroll left -113px transparent !important;
    bottom: 0;
    color: black;
    height: 257px;
    margin-bottom: 0;
    position: absolute;
    width: 559px;
    z-index: -2;
	left:0;}
#footer > .payoff > span {
    bottom: 0;
    left: 10px;
    position: absolute;}



html {
    background: url("images/sprite2.png") repeat scroll center -40px #a6eaff;}

body {
    background: transparent;}
#wrapper, #wrapperinner {
    background: none repeat scroll 0 0 transparent;
    margin: auto;
    padding: 0;}
#wrapper {
    padding-top: 10px;}
#header {
    background: url("images/sprite.png") no-repeat scroll center -370px rgba(0, 0, 0, 0);
    border-radius: 15px 15px 15px 15px;
    box-shadow: 1px 3px 10px -5px rgba(0, 0, 0, 0.5);
    height: 90px;
    left: 0;
    margin: 0 10px 90px;
    padding: 0;
    width: auto;}
.dj_ie7 #header {
	border:1px solid #b6efff;
	background: url("images/semitrans_20ffffff.png") repeat scroll 0 0 transparent;}


/*HEADER-AgeSwitch/loginlogout/search*/
@media screen and (max-width:440px){
    #header{
        min-height:100px;
    }
}
#header .loginlogout, #header .ageswitch {
    position: absolute;
    right: 0px;
    top: 0;
    width: auto;}

#header .loginlogout {
	top:5px;}
#header .loginlogout a,
#header .loginlogout a>span {
    color: #333;
    text-shadow: 0 0 3px #FFFFFF;}
	
#header .ageswitch {
	bottom:0;
    top: auto;}
#header .search {
    background: url("images/sprite.png") no-repeat scroll center -460px rgba(0, 0, 0, 0);
    border-radius: 10px;
    bottom: 0;
    box-shadow: 1px 3px 10px -5px rgba(0, 0, 0, 0.5);
    height: 95px;
    left: -1px;
    margin: -20px 0 0 0 !important;
    position: absolute;
    right: -1px;
    top: -91px;
    width: auto;}
#header .search div.searchbox {
    height: 100% !important;
    padding: 0 !important;
    width: 100% !important;
}
#header .search > div {
    height:100%;
    background: url("images/sprite.png") no-repeat scroll -1235px -615px rgba(0, 0, 0, 0) !important;
    border-radius: 0 0 0 10px;}
#header .search > div > form {
    margin: auto 0 auto auto;
    position: relative;
    top: 35px;
    width: 700px;
    overflow:hidden;
	margin-right: 20px;
}

#wrapper #header .search > div > form,
body#body #wrapper #header .search .searchFilterSelect * {
    height: 40px !important;}
.searchFilterSelect .dijitArrowButton {
    background: none repeat scroll 0 0 transparent !important;
    float: left;}
#header .search form > div {
	float:left;
	padding:0;}

#header .search input{
	color: #505450;}	
#header .search .searchFilterSelect > div,
#header .search .searchterm input,
#header .search .searchsubmit input {
    background: none repeat scroll 0 0 #FFFFFF;
	float: left;
	height:40px !important;
	margin:0;}
#header .search .searchFilterSelect input,
#header .search .searchterm input {	
	line-height:40px;}
#header .search .searchFilterSelect input {
	cursor:default;
	padding: 0 5px;}

body#body #wrapper #header .search .searchterm input {
	right: 40px !important;
	width:450px !important;}
html.dj_ie body#body #header .search .searchterm input {
    border-left: 1px solid #DDDDDD;}

#header .search .searchsubmit input {
	background-position: center center !important;
	height: 40px !important;
	width: 40px !important;}

#header .search .dijitComboBox {
    width: 150px;}

@media screen and (max-width:770px){
    #header .search > div > form {
        width: 460px !important;}
    #header .search .dijitComboBox {
        width: 100px;}
    body#body #wrapper #header .search .searchterm input {
        width: 210px !important;}
}
@media screen and (max-width:520px){
    #header .search > div > form {
        width: 340px !important;}
    #header #wrapper .search .dijitComboBox {
        width: 75px;}
    body#body #wrapper #header .search .searchterm input {
        width: 90px !important;}
}
@media screen and (max-width:395px){
    #header .search > div > form {
        width: 90% !important;}
    #header #wrapper .search .dijitComboBox {
        width: 15px;}
    body#body #wrapper #header .search .searchterm input {
        width: 100px !important;}
}


#header .ageswitch ul.navigation {
    background: none repeat scroll 0 0 #F2F2F2;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 3px 0 #868686, 0 -30px 15px -10px #FFFFFF inset;
    height: 40px;
    overflow: auto;
    white-space: nowrap;}
#header .ageswitch ul.navigation > li {
    float:none;
    display:inline-block;
}
#header .ageswitch ul.navigation > li > a {
    border-right: 1px solid #EFEFEF;
    display: block;
    padding: 10px;
	color:#51A4BF;}
#header .ageswitch ul.navigation > li:hover	 > a.link {
    background: #FFF;}
#header .ageswitch ul.navigation > li.active > a {
    background: #21d4eF;
    border: medium none;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 15px 20px -10px #61D4FF inset, 0 5px 3px -1px rgba(0, 0, 0, 0.5);
	color:#fff;}

#header .ageswitch ul.navigation > li:first-child > a {
	font-weight:bold;}


body#body #navigation {
    background: none repeat scroll 0 0 #d0f5ff !important;
    border: 1px solid #31A4FF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.5), 0 0 10px #D6EEFC inset;
    float:none;
    position: relative !important;
    top: -100px;
    left:0;
	width:auto;}
ul.mainnavigation {
	overflow:auto;}
ul.mainnavigation > li {
    font-size: 1.25em;}
ul.mainnavigation > li:hover, ul.mainnavigation > li:active {
	background-color: transparent;
	box-shadow: none;}
#navigation > ul > li:first-child > a {
	border-radius:10px 0 0 10px;}
#navigation > ul > li:hover > a,
#navigation > ul > li:focus > a {
    background-color: #51c4FF;
    box-shadow: -3px 0 4px -2px rgba(0, 0, 0, 0.25), 3px 0 4px -2px rgba(0, 0, 0, 0.25), 0 10px 7px -5px rgba(255, 255, 255, 0.2) inset, 0 15px 22px -11px rgba(255, 255, 255, 0.35) inset;
    outline: 0 none;}
#navigation > ul > li:hover > a,
#navigation > ul > li:focus > a {
    color: #FFFFFF;
    text-decoration: none;}
ul.mainnavigation > li > a > span {
    color: #223399; /*ink blue*/}
ul.mainnavigation > li:hover > a > span,
ul.mainnavigation > li:focus > a > span {
    color: #fff;}
ul.mainnavigation > li:first-child > a > span {
    border-radius: 10px 0 0 10px;}


ul.mainnavigation > li:hover > ul,
ul.mainnavigation > li:focus > ul {
	border: 1px solid #31A4FF;
	background-color: #FFFFFF;
	border-radius: 0 0 7px 7px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.33);
	margin-left: -1px;
	padding: 9px 0 14px;
	width:auto;}
ul.mainnavigation > li > ul li {
	display: list-item;
	float: none;
	width: auto;}
ul.mainnavigation > li > ul > li a {
    padding: 4px 20px;
    text-decoration: none;
	font-weight:normal;
    font-size: 0.85em !important;}
ul.mainnavigation ul ul > li > a.link > span {
    font-size: 0.85em;
    font-variant: normal;}

ul.mainnavigation > li li.hasmenu > a > span {
    font-weight: bold;}
ul.mainnavigation > li > ul > li a:hover {
    background-color: #51c4FF;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 5px 4px -2px rgba(255, 255, 255, 0.2) inset, 0 8px 11px -6px rgba(255, 255, 255, 0.35) inset;
    color: #FFFFFF;
    text-decoration: none !important;}
ul.mainnavigation > li > ul > li li a{
    padding-left: 30px !important;}
ul.mainnavigation ul ul > li > a.link > span {
	background: none;
	padding-left: 0;}

ul.mainnavigation > li.warning > a {
    background: none repeat scroll 0 0 #FF6666 !important;
	box-shadow: 0 -27px 15px -15px #FF5555 inset;}
ul.mainnavigation > li.warningOK > a {
    background: none repeat scroll 0 0 #55dd55 !important;
	box-shadow: 0 -27px 15px -15px #55FF55 inset;}
ul.mainnavigation > li.warning > a > span,
ul.mainnavigation > li.warningOK > a > span {
    color: #FFFFFF !important;
    font-weight: bold;}


#banner {
    margin: -10px 10px 0 !important;}
#banner .bannerImage {
	background:none;}
.applicationcontainer {
	padding:0;}
#banner {
    float: none;
    margin: 35px 10px 0;
    width: auto;}

#banner .bannerImage img,
.application {
    border-radius: 15px 15px 15px 15px;
    box-shadow: 1px 3px 10px -5px rgba(0, 0, 0, 0.5);}
.application {
    background: #ebf7fe;
	background: url("images/semitrans_50ffffff.png") repeat scroll 0 0 transparent;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
	ZZZfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff); zoom: 1; /*IE*/
    margin:10px 10px 20px 10px;
	position:relative; /*needed for widget footers*/
	z-index:0;}


.apptitle {
    border-bottom: 1px solid #9cf;
    border-top: medium none !important;
    box-shadow: 0 6px 12px -13px;
	border-radius:15px 15px 0 0;}
.applicationcontainer .applicationcontainerregular .dijitTitlePaneTitle > div:first-child {
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 5px;
	-webkit-border-radius: 15px 15px 0 0;}

.mainOptions .iWantTo, .mainOptions .option *,
.apptitle h1, .apptitle h2 {
    color: #223399;
    font-size: 1.75em !important;
    font-weight: normal !important;
    text-shadow: 0 0 10px #FFFFFF;}
.mainOptions .option *{
	font-size:1em !important;}

.GenericRSSReader .odd {
    background: rgba(255,255,255,0.5) !important;}
.dj_ie7 .GenericRSSReader .odd {
    background: url("images/semitrans_50ffffff.png") repeat scroll 0 0 transparent !important;}

.fiContainer {
    -webkit-border-radius: 15px 15px 15px 15px;}

#footer, #footerinner {
	background:none;}

.buttonLink span, .dijitButton, .dijitButton *, .RichTextItem .StyleButton, .RichTextItem .StyleButton *, .topInfo a {
    background: none !important;}
body#body .link2.button, body#body .buttonLink span, body#body .dijitButton > button > div, body#body .RichTextItem .StyleButton, body#body .topInfo a,
body#body button.dijitButtonNode div {
    background: url("images/background2.jpg") no-repeat scroll center -370px #CDECFE !important;
	border-radius: 8px;
    border:1px solid #31A4FF !important;
	box-shadow: 3px 4px 9px -7px black;}
body#body .link2.button:hover, body#body .buttonLink span, body#body .dijitButton > button:hover > div, body#body .RichTextItem .StyleButton:hover, body#body .topInfo a:hover,
body#body .link2.button:focus, body#body .buttonLink span, body#body .dijitButton > button:focus > div, body#body .RichTextItem .StyleButton:focus, body#body .topInfo a:focus,
body#body button.dijitButtonNode:focus div, body#body button.dijitButtonNode:hover div {
    background-position: center -415px !important;
	box-shadow:none;}
.topInfo a { /*loans & renewals*/
    margin-right: 10px !important;
    margin-top: 5px !important;}
.link2.button > span, .buttonLink span a, .dijitButton > button > div > center, .RichTextItem .StyleButton > span, .topInfo a > span {
    background: none repeat scroll 0 0 transparent !important;
    color: #009 !important;
    font-size: 1.15em !important;
    margin: 0 !important;
    padding: 0 15px !important;
    text-shadow: 0 0 10px #FFFFFF;}
.link2.button:hover > span, .buttonLink span:hover > a, .dijitButton > button:hover > div > center, .RichTextItem .StyleButton:hover > span, .topInfo a:hover > span{
    background: none !important;
    color: #000 !important;}

.RichTextItem .appcontent a {
    color: #009900;}
.RichTextItem img, .StyleImage, .imageDiv .image, .oneRow .image img, #cover img {
    border:none;}
.RichTextItem .StyleListDot a:hover, .RichTextItem .StyleListArrow a:hover {
    color: #009900;}

.cloud a {
    -moz-transition: color 1s ease 0s;
    color: #336633 !important;
    padding-left: 5px;}
.cloud a:hover {
    color: #009900 !important;}

.ZZZdijitDialog {
    left: 25% !important;
    max-width: 700px;
    position: fixed !important;
    top: 20% !important;}
	
.RichTextItem .appcontent tr, .PaymentsDue tr, .LoanHistory tr, .dj_ie .PaymentsDue tr td, .dj_ie .PaymentsDue tr th, .dj_ie .LoanHistory tr td, .dj_ie .LoanHistory tr th {
    border-bottom-color: #31A4FF;}
.recordDisplayElement .image img, .listItem .image img, #divRelatedWorks .image img {
    border-color: #31A4FF;}
#additionalContainer, .dijitDialog {
    background: url("images/sprite2.png") repeat-x scroll -60px -28px #A6EAFF;}
#additionalContainer .additionalTitle, .dijitDialogTitleBar,
.UserActivities .title,
a.sortOK:hover > span, #additionalbefore ul.appLinks > li > a:hover span, #divInterests .generalInfo a.NeedHelp:hover span, .RichTextItem .additional a:hover span, .recordDisplayElement div.FullRequest a.linkTo:hover span, .recordDisplayElement div.FullUrl a.linkTo:hover span, .otherSources .externalLink a:hover span, .divVlink .linkVlink a:hover span, #sOptions .advancedLink a:hover span, .SearchBox #sBoxOptions .advancedLink a:hover span, .itemFull .reserveItem a:hover span, .itemCover .reserveItem a:hover span, .itemText .reserveItem a:hover span, .relAuthors .relAuthor a:hover span, .EditBorrowerData .helpLink a:hover span, #itemDetailsLink a:hover, .showItemDetails a:hover, .LinkRequest .linkEntry .buttons a:hover span, .searchFormSimple .switchSearchSimple a:hover span, #divSearchScreen .switchSearchAdvanced a:hover span, .viewInfo a:hover, #optionsExpanded div.option a:hover, .SearchResults .leftDiv .switchSearchSimpleEmbedded a:hover, .zeroHits .linkVlink a:hover, .zeroHits .searchAll a:hover, .zeroHits .altTerm a:hover, #divListOptions a:hover, #divLists a:hover, #divSearchScreen .more a:hover, #divSearchResultsCMS .shortRecord a:hover, #divInterests .add a:hover, #divReviews .addReviewLink a:hover, #divReviews .editReviewLink a:hover, #divReviews .deleteReviewLink a:hover, #vote a:hover, #moreInfo a:hover, #divBrowseOptions .option a:hover, #divListOptions .option a:hover, #divRecordOptions .option a:hover, .UserActivities .navigation a:hover, .modifyData a:hover, .newRequest a:hover, .cancelSelected a:hover, .cancelAll a:hover, .renewSelected a:hover, .renewAll a:hover, .deleteSelected a:hover, .selectPublic a:hover, .selectAll a:hover, .UserActivities .navigation a:hover, #divResultsOptions ul a:hover, #divResultsOptions .option a:hover, .feedItemInner a:hover, .calendarLinkDiv div a:hover, div.appcontent div.singleEvent a:hover, .dijitDialog a:hover {
    color: #1164eF !important; /*#31A4FF;*/}
.dijitDialogUnderlay {
    background: none repeat scroll 0 0 #000000;
    opacity: 0.6;}
.RichTextItem .appcontent tr, .PaymentsDue tr, .LoanHistory tr, .dj_ie .PaymentsDue tr td, .dj_ie .PaymentsDue tr th, .dj_ie .LoanHistory tr td, .dj_ie .LoanHistory tr th {
    background: none repeat scroll 0 0 transparent !important;}

/*START: WIDGET FOOTERS ----------------------------------------------------------------------------------------------*/
.apptitle {
	margin:0;}
.appcontent {
    padding: 8px;}

.spare { 
    display:none;}


.coralleft .spare,
.coralright .spare,
.bedding .spare,
.bubblesleft .spare,
.bubblesright .spare,
.tentacles .spare,
.starfish .spare,
.squid .spare,
.fish .spare,
.fish2 .spare,
.fish3 .spare,
.fish3right .spare {
	display:block;
    height: 50px;
    position: relative;
    width: 100%;
	z-index:-1;}
.spare > div:first-child  {
    position: absolute;
	bottom:0;
    -webkit-border-radius:0 0 15px 15px;}


.coralleft .spare { 
    height: 100px;}
.coralleft .spare > div:first-child { 
    background: url("images/sprite.png") no-repeat scroll -559px -228px transparent;
    height: 142px;
    width: 156px;}
 
.coralright .spare {
    height: 100px;}
.coralright .spare > div:first-child { 
    background: url("images/sprite.png") no-repeat scroll -715px -228px transparent;
    right: 0;
    height: 142px;
    width: 177px;}

.bedding .spare {	height: 36px;}
.bedding .spare > div:first-child {
    background: url("images/sprite.png") no-repeat scroll 0 -77px transparent;
    height: 36px;
    right: 0;
    width: 675px;}

.bubblesleft .spare,
.bubblesright .spare { 
    bottom: 0;
    height: 110px;
    position: absolute;
    width: 100%;}
.bubblesleft .spare > div:first-child,
.bubblesright .spare > div:first-child {
    background: url("images/sprite.png") repeat-x scroll -1000px 0 transparent;
    height: 285px;
    right: 0;
    width: 110px;}
.bubblesright .spare > div:first-child {
    right: 0;}

.tentacles .spare {
    height: 60px;
    position: absolute;
    top: 0;}
.tentacles .spare > div:first-child { 
    background: url("images/sprite.png") no-repeat scroll -675px 0 transparent;
    height: 97px;
    margin: 0 auto;
    position: relative;
    width: 220px;}

.starfish .spare { 
    height: 50px;}
.starfish .spare > div:first-child {
    background: url("images/sprite.png") repeat-x scroll -240px 0 transparent;
    height: 67px;
    width: 74px;}

.squid .spare { 
    height: 40px;}
.squid .spare > div:first-child {
    background: url("images/sprite.png") repeat-x scroll -175px 0 transparent;
    height: 77px;
    width: 65px;}
 
.fish .spare {
    height: 60px;}
.fish .spare > div:first-child {
    background: url("images/sprite.png") no-repeat scroll 0 0 transparent;
    right: 0;
    height: 75px;
    width: 175px;}

.fish2 .spare { 
    height: 60px;}
.fish2 .spare > div:first-child {
    background: url("images/sprite.png") repeat-x scroll -559px -136px transparent;
    height: 95px;
    width: 148px;}

.fish3 .spare > div:first-child {
    background: url("images/sprite.png") repeat-x scroll -915px -30px transparent;
    height: 55px;
    width: 80px;}

.fish3right .spare { 
    height: 20px;}
.fish3right .spare > div:first-child {
    background: url("images/sprite.png") repeat-x scroll -740px -136px transparent;
    height: 87px;
    right: 0;
    width: 70px;}
/*END: WIDGET FOOTERS ------------------------------------------------------------------------------------------------*/



/*V3.0 fixes*/
#header {
    background-position: center -371px;
}
#header .search > div > form {
    border-radius: 7px;
}
#header .search form > div.searchterm {
    bottom: 0;
    float: none;
    left: 5px;
    position: absolute;
    right: 45px;
    top: 0;
}
body#body #wrapper #header .search .searchterm input {
    width: 100% !important;
    left: 0;
    padding: 0;
}
.locname {
    margin-top: 0;
    padding-top: 24px;
}
body#body #navigation {
    float: none;
    top: -100px !important;
    width: auto;
}
#banner {
    margin: -10px 10px 0 !important;
}
#footer {
    width: 100%;
}


/*V4.0 fixes*/
/* River ui buttons */
#body .River .ui {
    top: 15px;
    right: 0px;
}
#body .River .ui .play, 
#body .River .ui .pause, 
#body .River .ui .left, 
#body .River .ui .right {
    background-color: transparent;
    border-left: 3px solid transparent;
	padding: 0;
}
.River .ui > div > a {
    padding: 0.25em 0.5em;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.25);
    background-color: rgba(255,255,255,0.125);
}
.River .ui > div > a:focus, 
.River .ui > div > a:hover {
    border-color: rgba(255,255,255,0.975);
    background-color: rgba(255,255,255,0.5);
}
.FeaturedItems .openClose {
	display: none;
}

/* RSS feed */
#body .GenericRSSReader .odd {
    background-color: rgba(0,0,0,0.05);
}

/* Selfcheck */
.selfcheckwidget .info.pre {
    margin-bottom: 0.5em;
}
.selfcheckwidget .info.post {
    margin-top: 0.5em;
}
.selfcheckwidget .returns {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
    margin-top: 1em;
}
.selfcheckwidget .returns .returnexit { order: 2; }
.selfcheckwidget .returns .scanArea { order: 1; }
.selfcheckwidget .returns .loanedItems { order: 3; }
.selfcheckwidget .borrower,
.selfcheckwidget .scanArea {
    margin-bottom: 1em;
    border-bottom: 1px dashed rgba(0,0,0,0.125);
    padding-bottom: 0.5em;
}
.selfcheckwidget .returns .loanedItems {
    margin-top: 1em;
    border-top: 1px dashed rgba(0,0,0,0.125);
    padding-top: 0.5em;
}
.selfcheckwidget .borrower {
    border-top: 1px dashed rgba(0,0,0,0.125);
    margin-top: 0.5rem;
    border-left: 3px solid rgba(0,0,0,0.125);
    border-right: 3px solid rgba(0,0,0,0.125);
    padding: 0 0.75em 0.25em;
}
.selfcheckwidget .name {
    font-weight: bold;
	margin-top: 0.5em;
}
.selfcheckwidget .borrower .logout {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.selfcheckwidget .scanArea .info {
	margin-bottom: 0.25em;
}
.selfcheckwidget .borrowerenter, 
.selfcheckwidget .scanArea .input {
    display: flex;
	flex-flow: row wrap;
}
.selfcheckwidget .borrowerenter > div, 
.selfcheckwidget .scanArea .input > div {
    flex: 5 1 5em;
    margin-bottom: 0.5em;
    min-width: 5em;
}
.selfcheckwidget .borrowerenter > div.header {
    flex: 1 0 100%;
}
.selfcheckwidget .borrowerenter > div.barcode, 
.selfcheckwidget .scanArea .input > div.barcode {
    max-width: 25em;
}
.selfcheckwidget .borrowerenter > div.button, 
.selfcheckwidget .scanArea .input > div.button {
    margin-left: 1em;
    flex-grow: 1 !important;
}
.selfcheckwidget .borrowerenter input[type="text"], 
.selfcheckwidget .scanArea .input input[type="text"] {
    line-height: 24px;
    width: 100%;
}

.selfcheckwidget .LoansArea {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 1em;
}
.selfcheckwidget .LoansArea .totalloans {
	width: 100%;
}
.selfcheckwidget .LoansArea div ~ div {
    margin-right: 0.5em;
    margin-top: 0.5em;
}

.selfcheckwidget .loanedItems .item {
    margin-top: 0.5em;
    position: relative;
}
.selfcheckwidget .loanedItems .item .checkbox {
    position: absolute;
    top: 5px;
    left: 0;
}
.selfcheckwidget .loanedItems .item .checkbox ~ div {
    margin-left: 20px;
}
.selfcheckwidget .loanedItems .item .duedate .data {
    font-weight: bold;
}

/*Button Wrap*/
.selfcheckwidget .dijitButton {
    max-width: 100%;
}
.selfcheckwidget button {
    max-width: 100%;
}
#body .selfcheckwidget button .dijitInline {
    max-width: 100%;
    height: auto !important;
    min-height: 24px;
}
#body .selfcheckwidget button center {
    height: auto;
    white-space: normal;
}

/*login, account for longer labels*/
/* IN-389 */
/*
.LoginDialog .logonOption {
    display: flex;
    flex-flow: row wrap;
}
.LoginDialog .logonOption > label, .LoginDialog .logonOption > input {
    flex: 1 1 auto;
}
*/