﻿
/*#region Defaults */

* { margin:0px; }
img { border:none; }
html,body { position:relative; max-width: 100%; width:100%; height: 100%; min-height: 100%; }     
#wrap { height:100%; min-height:100%; }    
body {  font-size:14px; font-weight:400;  font-family: 'Lato', Arial, sans-serif; background-color:#f0f0f0; margin: 0; padding:0; color: #666;  }
html.noscroll,
body.noscroll,
#wrap.noscroll { position: fixed; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
ul li { line-height:1.4; margin:1.5em 0; }
sup { top:-.25em; }
h3,h4,h5 { color:#555; }
h1 { font-size:24px; margin-bottom:25px; }
h2 { font-size:22px; }
h3 { font-size:20px; }
blockquote { font-size:1em; }
.body-content { padding-left: 15px; padding-right: 15px; }
.dl-horizontal dt { white-space: normal; }
input,
select,
textarea { max-width: 280px; }

/*#endregion Defaults */

/*#region Sections */    

.section { position:relative; width:100%; min-height:100%; /*padding-top:15px;*/ }    
.section .section-content { max-width:600px; margin:0 auto; }    

/*#endregion Sections */

/*#region Utilities */

.display-table { display:table; width:100%; height:100%; table-layout:fixed; }
.display-table-content { display:table-cell; vertical-align:middle; width:100%; /* width required if table-layout:fixed otherwise sibling elements take up equivalent width and break h-centering */ }
.text-center { text-align:center; }
.transition { transition:all 0.15s linear; -webkit-transition:all 0.15s linear; }

/*#endregion Utilities*/

/*#region Navigation */

.nav-button-group { }
.nav-button-group .nav-button,
.nav-button { display:block; margin:5px 0; }
.btn-default,
.btn-default:focus,
.btn-default:active { background-color:#fbfbfb; box-shadow: rgba(0,0,0,.1) 0px 0px 10px inset; border:1px solid #d0d0d0; }
.btn-default:hover { box-shadow: rgba(0,0,0,.1) 0px 0px 10px inset; }

.nav-log-out { float:right; }
.nav-back { float:left; }

/*#endregion Navigation */

/*#region Forms (Shared) */

select { padding:3px; }
.form-container { position:relative; max-width: 500px; margin: 0 auto; }
.form-container form .form-group { text-align:left; }
.form-group label { width: 50%; /*max-width:300px;*/ margin-right:10px; display: inline-block; text-align: right; }
.help-block.field-validation-error { color:#dd0000; position: absolute; display: inline; line-height: 1; margin-left: 10px; }
.success-message,
.warning-message,
.validation-summary-errors { color:#fff; margin-top:20px; background-color:#dd5555; border-radius:4px;  }
.validation-summary-errors ul { padding:10px 0; }
.validation-summary-errors li { padding:5px; margin:0; list-style:none; list-style-position:inside; }
.success-message { background-color:#448144; }
.success-message,
.warning-message { padding:6px; }
img#qrImage { margin:10px 0 20px 0; }

/*#endregion Forms (Shared) */

/*#region Tables */

.table-tokens { width:100%; }
.table-tokens th { border-bottom:1px solid #ccc; }
.table-tokens th,
.table-tokens td { text-align:left; }
#table-tokens td { vertical-align:middle; border:none; }
.table-tokens th.token-enabled,
.table-tokens td.token-enabled,
.table-tokens th.token-date,
.table-tokens td.token-date { text-align:center; }
.table-tokens tr { /*border-bottom:1px solid #e0e0e0;*/ }
.table-striped>tbody>tr:nth-of-type(odd){ background-color:#f0f0f0; }

/*#endregion Tables*/

/*#region Notifications */

#toast-container { margin-top:10px; }
#toast-container>div { box-shadow: 0 0 12px #000; }

/*#endregion Notifications */

/*#region QR */

.qr-code-text { margin:20px 0; }
.lbl-ta-code { display:block; }
#ta-code {	
    border: 1px solid rgb(204, 204, 204);
    border-image: none;
    max-width:350px;
	width: 100%;
    height: 45px;
    vertical-align: middle;
    background-color: #f3f3f3;
}

.btn-copy-code { display:block; cursor:pointer; width:110px; margin:10px auto; font-size:.75em; padding:5px; border-radius:3px; }

/*#endregion QR */

@media only screen and (min-width:480px) {

}

@media only screen and (min-width:768px) {

}

@media only screen and (min-width:992px) {

}

@media only screen and (min-width:1200px) {

}
