/* ============================================================================ Notepad CSS styles ============================================================================
 Sidebar buttons ----------------------------------------------------------------------------
 The component assumes a base font-size of 12px (75%), all em values area relative to this.
*/
.sidebar-panel, .btn-sidebar { display: inline-block; box-sizing: border-box; background-color: #E9F9FD; border: solid .25em #fff; border-radius: .6em; padding: .3em .8em; width: 100%; position: relative; margin-bottom: 10px; }

.sidebar-panel:after, .btn-sidebar:after { position: absolute; top: -.25em; left: -.25em; bottom: -.25em; right: -.25em; border: solid 1px #D1E5E9; content: ""; border-radius: .4em; }

.sidebar-panel:hover, .btn-sidebar:hover { background-color: #E4F7FC; }

.sidebar-panel:hover:after, .btn-sidebar:hover:after { border-color: #18B8EC; }

.btn-sidebar__label { vertical-align: middle; }

.btn-sidebar__icon { display: inline-block; width: 1.5em; height: 1.5em; margin-top: -.125em; margin-right: 1.325em; vertical-align: middle; background-repeat: no-repeat; }

.btn-sidebar__down { display: inline-block; background-repeat: no-repeat; width: .75em; height: .75em; background-image: url("../images/icon-maximise-blue.gif"); position: absolute; top: 50%; right: 0; margin-top: -.35em; }

.sidebar-panel__content { margin-top: .75em; position: relative; z-index: 1; display: none; }

.sidebar-panel--active > .sidebar-panel__content { display: block; }

/* ============================================================================ Icons ============================================================================
*/
.icon-notepad { background-image: url("../images/icon-notepad.png"); }

.icon-statements { background-image: url("../images/icon-statements.png"); }

.icon-calculator { background-image: url("../images/icon-calculator.png"); }

.icon-notepad--blue { background-image: url("../images/icon-notepad-b.png"); }

.icon-statements--blue { background-image: url("../images/icon-statements-b.png"); }

.icon-calculator--blue { background-image: url("../images/icon-calculator-b.png"); }

.icon-notepad--airnz { background-image: url("../images/icon-notepad-airnz.gif"); }

/* ============================================================================ Sidebar link items ============================================================================
*/
.sidebar-panel__link { width: 100%; display: inline-block; position: relative; z-index: 1; }

.sidebar-panel--active .btn-sidebar__down { background-image: url("../images/icon-minimise-blue.gif"); }

/* ============================================================================ Notepad specific styles ============================================================================
*/
.notepad__textarea { width: 100%; margin-bottom: .5em; font-family: inherit; font-size: 1em; padding: .5em; box-sizing: border-box; }

.notepad__notifications { display: inline-block; font-size: .75em; color: #999; padding-top: .5em; padding-bottom: .5em; }

.count { font-size: 0.75em; color: #999; display: inline; padding-top: 5px; float: right; }

.warning { color: #000; }

.warning-severe { color: #ff0000; }

#char-limit { color: #ff0000; font-size: 0.75em; display: block; }