/* CSS Document ---------------------------------------------------

Created by:			.eyecatcher ag - Lydie Chambrier
For:				eyevip UI
Date of creation:	12-12-2014
Last update:		23-12-2014 (lcr)

------------------------------------------------------------------*/

@import url("font-awesome.min.css");

/* TYPOGRAPHY
----------------------------------------------------------------- */

@import url(//fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700,700italic);

body {color: #000000; font-family: 'Archivo Narrow', Arial, sans-serif; font-size:16px; font-weight:400; letter-spacing: 0.02em; line-height:1.2em;}

a {color: #00a3d9; outline: none; text-decoration: none;}
a:hover {color: #0082AE;}

h1 {font-size: 2em; font-weight: 400; line-height: 1em; margin: 0; padding: 0.5em 0 0.5em 0;}
h2 {font-size: 1.5em; line-height: 1em; font-weight: 400; padding: 0.5em 0 1em 0;}
h3 {font-size: 1.145em; line-height: 1em; font-style: italic; font-weight: 700; padding: 0.5em 0 1em 0;}
p {font-size: 1em; line-height: 1.2em; color: #999; margin-bottom: 0.5em;}
.centered {display: block; text-align: center;}
small {font-size: 0.9em;}
span.big {display: block; font-size: 2.5em; font-weight: 700; line-height: 1em;}
span.middle {font-size: 2.1875em !important; font-weight: 700; line-height: 1em;}
span.small {font-size: 1.5em; font-weight: 700; line-height: 1em;}

a.back {color: #666666;}
a.back:hover {color: #333;}


/* BASICS
----------------------------------------------------------------- */

body, html, * {margin:0; padding:0;}
body, html {width:100%; height: 100%;}
body {height: 100%; overflow-x: hidden; overflow-y: auto; background-color: #f8f8f8; }

main div, .button {transition: all ease 0.5s;}

article {display: block; padding-bottom: 1em !important; overflow: auto;}
.content {clear: both; display: block; margin: 0 auto; padding: 1em 0; width:960px; min-height: 75%;}

main {display: block; width: 100%; border-top: 1px solid #ddd;}
.frame {background-color: #fff; display: block; width: 100%; overflow: visible; margin-top: 4em;}

section#head {display: block; width: 100%; background-color: #fff;}

.wrap {background-color: #ffffff; border-radius: 3px; border-bottom: 1px solid #ddd; margin: 1em 0; position: relative; overflow: auto;}

.center {margin: 0 auto;}
.clearfix {clear: both;}
.hide {display: none !important;}
.inactive {visibility: hidden;}
.left {float: left !important;}
.right {float: right !important;}
.rounded {border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; margin: 1em 0 2em 0;}
.space {height: 2em;}

img {margin:0; padding:0; display: block;}
a img {border: 0;}
a.left {margin-right:1em;}
a.right {margin-left:1em;}

.info {color: #002753; font-style: italic; margin: 0.5em 0 1em 0;}
.info img {float: left; margin: 3px 5px 0 0; width: 12px; height: auto;}

.logo_firma {float: right;}
.logo_firma img {height: 50px; width: auto;}

hr {display: block; background-color: #ddd; color: #ddd; height: 1px; border:0; margin: 1em 0; }

a {text-decoration: none;}


/* COLORS */

.black {color:#111111;}
.bg-blue {background-color:#00a3d8; color: #fff;}
.blue {color:#00a3d8;}
.bg-black {background-color:#111111; color: #fff;}
.dark-blue {color:#002753;}
.bg-dark-blue {background-color:#002753; color: #fff;}
.dark-grey {color:#444444;}
.bg-dark-grey {background-color:#444444; color: #fff;}
.grey {color:#999999;}
.bg-grey {background-color:#999999; color: #fff;}
.green {color:#87bd42;}
.bg-green {background-color:#87bd42; color: #fff;}
.light-grey {color:#eeeeee;}
.bg-light-grey {background-color:#eeeeee;}
.light-blue {color:#00a3d9;}
.bg-light-blue {background-color:#00a3d9; color: #fff;}
.orange {color:#ff6600;}
.bg-orange {background-color:#ff6600; color: #fff;}
.red {color:#cc0000;}
.bg-red {background-color:#cc0000; color: #fff;}
.yellow {color:#f0b514;}
.bg-yellow {background-color:#f0b514;}


/* COLUMNS */

.col1 {width: 100%;}
.col2 {width: 50%; float: left;}
.col3 {width: 33.33%; float: left;}
.col4 {width: 25%; float: left;}
.col5 {width: 20%; float: left;}
.col2-3 { width: 66.66%; float: left;} /*Spalte 2/3 von der gesamte Breite*/
.col3-4 { width: 75%; float: left;} /*Spalte 3/4 von der gesamte Breite*/
.col2-5 { width: 40%; float: left;} /*Spalte 3/5 von der gesamte Breite*/
.col3-5 { width: 60%; float: left;} /*Spalte 3/5 von der gesamte Breite*/
.col4-5 { width: 80%; float: left;} /*Spalte 4/5 von der gesamte Breite*/

.col1 > *, .col2 > *, .col3 > *, .col4 > *, .col5 > *, .col2-3 > *, .col3-4 > *, .col2-5 > *, .col3-5 > *, .col4-5 > * { margin-left:15px !important; margin-right: 15px !important;}

.col1 > .col1, .col1 > .col2, .col1 > .col3, .col1 > .col4, .col1 > .col5, .col1 > .col2-3, .col1 > .col3-4, .col1 > .col2-5, .col1 > .col3-5, .col1 > .col4-5,
.col2 > .col1, .col2 > .col2, .col2 > .col3, .col2 > .col4, .col2 > .col5, .col2 > .col2-3, .col2 > .col3-4, .col2 > .col2-5, .col2 > .col3-5, .col2 > .col4-5,
.col3 > .col1, .col3 > .col2, .col3 > .col3, .col3 > .col4, .col3 > .col5, .col3 > .col2-3, .col3 > .col3-4, .col3 > .col2-5, .col3 > .col3-5, .col3 > .col4-5,
.col4 > .col1, .col4 > .col2, .col4 > .col3, .col4 > .col4, .col4 > .col5, .col4 > .col2-3, .col4 > .col3-4, .col4 > .col2-5, .col4 > .col3-5, .col4 > .col4-5,
.col5 > .col1, .col5 > .col2, .col5 > .col3, .col5 > .col4, .col5 > .col5, .col5 > .col2-3, .col5 > .col3-4, .col5 > .col2-5, .col5 > .col3-5, .col5 > .col4-5,
.col2-3 > .col1, .col2-3 > .col2, .col2-3 > .col3, .col2-3 > .col4, .col2-3 > .col5, .col2-3 > .col2-3, .col2-3 > .col3-4, .col2-3 > .col2-5, .col2-3 > .col3-5, .col2-3 > .col4-5,
.col3-4 > .col1, .col3-4 > .col2, .col3-4 > .col3, .col3-4 > .col4, .col3-4 > .col5, .col3-4 > .col2-3, .col3-4 > .col3-4, .col3-4 > .col2-5, .col3-4 > .col3-5, .col3-4 > .col4-5,
.col3-5 > .col1, .col3-5 > .col2, .col3-5 > .col3, .col3-5 > .col4, .col3-5 > .col5, .col3-5 > .col2-3, .col3-5 > .col3-4, .col3-5 > .col2-5, .col3-5 > .col3-5, .col3-5 > .col4-5,
.col4-5 > .col1, .col4-5 > .col2, .col4-5 > .col3, .col4-5 > .col4, .col4-5 > .col5, .col4-5 > .col2-3, .col4-5 > .col3-4, .col4-5 > .col2-5, .col4-5 > .col3-5, .col4-5 > .col4-5 { margin:0 !important;}


/* HEADER */

body > header {padding: 1.2em 0; background-color: #111; color: #ffffff; overflow: hidden;}
body > header .content {width: auto; margin-top: 0; padding: 0;}


/* NAVIGATION */

nav#meta-nav ul {display: block; float: right; width: auto; margin-top: 0.4em;}
nav#meta-nav li {display: block; float: right;}
nav#meta-nav ul li a {display: block; padding: 0.8em 0 0.2em 1.5em; color: #ffffff; font-size: 1em; opacity: 0.5;}
nav#meta-nav ul li a:hover {opacity: 1;}
nav#meta-nav ul li.active a {opacity: 1;}

nav#main-nav {display: block; height: 2.7em; background-color: #333333; font-size: 1.125em;}
nav#main-nav ul { margin: 0 5px !important;}
nav#main-nav li {display: block; float: left; position: relative;}
nav#main-nav li i {margin-right: 0.3em;}
nav#main-nav a {display: block; color: #ffffff; padding: 0.82em 1em;}
nav#main-nav li:hover > a {background-color: #eeeeee; color: #000000;}
nav#main-nav .active {color: #000000; background-color: #ffffff;}
nav#main-nav .active:hover {color: #666666; background-color: #ffffff;}
nav#main-nav .sub-nav {visibility: hidden; font-size: 0.8em; background-color: #eeeeee; border: 1px solid #eee; border-top: transparent; position: absolute; width: 220px;  top: 3.37em; left: -0.4em; z-index: 200;}
nav#main-nav li:hover > .sub-nav {visibility: visible;}
nav#main-nav .sub-nav li {display: block; float:none;}
nav#main-nav .sub-nav li a {display: block; padding: 0.8em 1em; color: #000000;}
nav#main-nav .sub-nav li a:hover, nav#main-nav .sub-nav li a.active {background-color: #ffffff;}
nav#main-nav .fa-navicon {display:none; color: #ffffff; font-size: 1.5em; padding-top: 0.35em; cursor: pointer;}
nav#main-nav .content {margin:0 auto; padding:0;}

nav#edit-nav {display: block; padding: 0.5em 0; background-color: #333333; font-size: 1.125em; position: fixed; width: 100%;}
nav#edit-nav a {display: block; float:left; color: #00A3D8; padding: 0.3em 0 0 1em; font-size: 1.8em;}
nav#edit-nav a:hover {color: #0082AE;}
nav#edit-nav a.active {color: #fff;}
nav#edit-nav .content {width: 100%; margin:0; padding:0;}
nav#edit-nav .device {float: right; margin-left: 1em;}

nav#sec-nav {display: block; font-size: 1.125em; padding: 0; height: 2.5em;}
nav#sec-nav .content {padding:0 0 0.5em 0;}
nav#sec-nav li {display: block; float: left; position: relative; margin-right: 2em;}
nav#sec-nav a {display: block; color: #00A3D8; padding: 0.6em 0;}
nav#sec-nav .active {color: #000000; font-weight: 700;}
nav#sec-nav .active:hover {color: #666666;}
nav#sec-nav .sub-nav {display: none; font-size: 0.8em; position: absolute; left: 0; width: 220px; border-bottom: 1px solid #ddd;  top: 2.82em; z-index: 200;}
nav#sec-nav li:hover > .sub-nav {display: block;}
nav#sec-nav .sub-nav li {display: block; float:none; margin:0; background: #fff; position: relative;}
nav#sec-nav .sub-nav li a {display: block; padding: 0.8em 1em;}
nav#sec-nav .sub-nav li a:first-child {color: #000000;}
nav#sec-nav .sub-nav li a:nth-child(2) {position: absolute; right:0; top: 0;}
nav#sec-nav .sub-nav li a:nth-child(2):hover {color: #0082AE;}
nav#sec-nav .sub-nav li:hover{background-color: #eeeeee;}


/* STEPS */

ol.steps {counter-reset:li;  margin:0 0 1.5em 0; padding-left:0; font-size: 1.125em; display: block; overflow: auto;}
ol.steps > li {position:relative; display: block; float: left; margin: 0 0 0 2.5em; padding:0.5em 2em 0.5em 0; list-style:none; color: #999999;}
ol.steps > li:before {content:counter(li); counter-increment:li; position:absolute; top: 0.1em; left:-2.5em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; width:1.8em; height: 1.8em; padding-top: 0.4em; color:#fff; background:#000; font-weight:bold; font-style: italic; text-align:center;}
ol.steps > li.active {color: #111;}
ol.steps > li.active:before {background: #85BD3F; color: #fff; border-bottom: none;}
ol.steps > li.inactive {color: #999; visibility: visible;}
ol.steps > li.inactive:before {background: #999; color: #fff; border-bottom: none; visibility: visible;}
ol.steps > li a {color: #000000;}


/* FOOTER */

footer {display: block; overflow: auto; margin: 5em 0 0 0; clear: both;}

footer .signatur {width: 15em; float:right;  padding: 1em 2em !important; font-size: 0.9em; right: 2em; opacity: 0.3; transition: all ease 0.5s;}
footer .signatur:hover {opacity: 0.5;}
footer .signatur span {display: block; float: left; padding-top: 0.95em;}
footer .signatur img {float: right;}



/* LISTS & TABLES
----------------------------------------------------------------- */

th {text-align: left;}
th i {color: #000;}

form td {padding: 3px 0;}

ul {margin:0; padding:0;}
ul li {list-style-position:  inside;}

ul.list {list-style: none; margin: 0.5em 0;}
ul.list li {display: block; background-color: #ffffff; border-bottom: 1px solid #ddd; border-radius: 3px; overflow: auto; margin-bottom: 0.2em;}
ul.list li span {display: block; padding: 0.5em 0.5em; float: left; color: #666; width: auto;}
ul.list li a {width: auto; padding: 0.5em 0.8em; float: right; border-left: 1px solid #eee; background-color: #fff;}
ul.list li a:hover {background-color: #f5f5f5;}

.stat {float: left; padding-right: 1em;}

.pager {display: block; overflow: auto; padding: 0.5em; border-bottom: 1px solid #eee;}
.pager * {}
.pager i {padding:0.3em 0.2em; cursor: pointer; font-size: 1.2em; color: #00a3d9;}
.pager i:hover {color: #0092c3;}
.pager input {width: 3em !important; text-align: center; padding:0 !important; margin: 0 0.3em;}
.pager label {float:left; padding: 0.4em 0;}
.pager .select-wrap {float:right; width: 4em; margin-left:1em;}
.pager .select-wrap select { width: 5em;}

.tool .button, .toolga .button {margin-bottom: 0.5em;}


/* BUTTONS
----------------------------------------------------------------- */

.button {background-color: #e5e5e5; border-bottom: 0.1em solid #bebebe; color: #000; display: block; padding: 0.6em 0.5em; font-family: inherit; font-size: 1em; line-height: 1em; min-height: 1em; position: inherit; border-radius: 2px; cursor: pointer; -webkit-appearance: none; float: left;}
.button:hover {background-color:#d6d6d6; border-color: #ababab; color: #000;}
.button.left {margin-left: 0; margin-right: 0.5em !important;}
.button.right {margin-right: 0; margin-left: 0.5em !important;}

.button i {font-size: 0.9em; margin-right: 0.3em;}

.button.big {font-size: 1.2em;}

.button.extended {position: relative;}
.button.extended i {float: right; font-size: 0.7em; margin: 0.2em 0 0 0.3em;}
.button.extended ul {visibility: hidden; border-radius: 0 0 2px 2px; border-bottom: 0.1em solid #bebebe; position: absolute; background-color: #eee; padding:0; list-style: none; margin:0; left:0; top:2.2em; width:12em;}
.button.extended ul li a {display:block; border-top: 1px solid #f5f5f5; color: #000; padding: 0.5em; }
.button.extended ul li a:hover {background-color: #d6d6d6;}
.button.extended:hover ul {visibility: visible; height:auto; z-index:200;}
.button.extended ul i {float: left; margin-right: 0.3em;}

.button.blue {background-color: #002753; border-bottom: 0.1em solid #001f42; color: #ffffff;}
.button.blue:hover {background-color: #001b3a; border-color: #00162e;}

.button.dark {background-color: #444444;border-bottom: 0.1em solid #363636; color: #ffffff;}
.button.dark:hover {background-color: #2f2f2f; border-color: #262626;}

.button.orange {background: #ff6600; border-bottom: 0.1em solid #cc5200; color: #ffffff;}
.button.orange:hover {background-color: #cc5200; border-color: #a34200;}

.button.red {background-color: #cc0000; border-bottom: 0.1em solid #a30000; color: #ffffff;}
.button.red:hover {background-color: #a30000; border-color: #820000;}

.button.green {background-color: #87bd42; border-bottom: 0.1em solid #6c9735; color: #ffffff;}
.button.green:hover {background-color: #6c9735; border-color: #56792a;}

.button.link {background-color: transparent; border-bottom: 0.1em solid transparent; color: #00a3d9; padding: 0.6em 0;}
.button.link:hover {color: #0082AE; border-color: transparent;}



/* ACCORDION
----------------------------------------------------------------- */

.accordion {margin-top: 1em;}
.accordion > div {margin: 1em 0 0 0;}
.accordion span > a {display: block; border-bottom: 1px solid #ddd; padding: 0.5em 0; margin: 0; font-size: 1.2em;}
.accordion a.active i.fa-angle-right {transform: rotate(90deg); -ms-transform: rotate(90deg); transition: all 0.3s ease;}



/* DASHBOARD
----------------------------------------------------------------- */

.dashboard .wrap {padding: 15px;}
.dashboard .piechart {overflow: hidden; position: relative; top: 0; height: 12.85em;}
.dashboard .piechart > div {top:-30px;}
.dashboard .progress-bar {display: block; background-color: #CCCCCC; height: 0.5em; margin-top: 0.5em;}
.dashboard .progress-bar .green-bar {display: block; background-color: #81BC2E; height: 100%;}

.dashboard header {border-bottom: 1px solid #ddd; overflow: auto; font-size: 1em;}
.dashboard header > * {padding: 0.5em 1em; border-radius: 3px 3px 0 0;}
.dashboard header table {font-weight: 700;}
.dashboard header .stat {padding-right: 0;}


.dashboard div.list {padding: 0.5em 1em; border-bottom: 1px solid #ddd; background-color: #fff; position: relative;}
.dashboard div.list:last-child {border-bottom: none;}
.dashboard div.list span {font-size: 1.2em; line-height: 1.4em; margin: 0.3em 0;}

.dashboard .maps {display: block; height: 60%; width: 100%; bottom: 0;}

.dashboard footer {display: block; width: 100%; position: absolute; bottom: 0; border-top: 1px solid #ddd; padding: 0.6em 0; margin:0;}
.dashboard footer > * {padding: 0 1em;}


/* FORMS
----------------------------------------------------------------- */

/* ELEMENTS */

.mask {background-color: #f8f8f8; border-bottom: 0.1em solid #eee; overflow: auto; white-space: normal; padding: 0.5em 0; clear:both;}
form .wrap {overflow: hidden;}
.wrap form, .window form {margin:0.25em 0;}
.wrap form {margin-bottom:1em;}
form header {clear: both; overflow: auto; height: 2.6em; border-bottom: 1px solid #eee; margin-bottom: 1em;}
form header h2 {padding: 0.5em 0;}
i.fa-check-square {cursor: pointer;}

nav#edit-nav form .select-wrap  {margin-top: 3px;}
nav#edit-nav form label {margin: 5px 0.5em 0 0; color: #fff; float: right;}
nav#edit-nav form input {float: right;}
nav#edit-nav form input[type="submit"] {margin: 4px 0 0 1em;}


/* TOOLTIP */

.tooltip {display: inline-block;}
a.tooltip i {outline:none; color:#002753; cursor: pointer; height: auto;}
a.tooltip:hover {text-decoration:none;}
a.tooltip:hover i {color: #001b3a;}
a.tooltip span {display:none; transition: opacity ease 0.5s; padding:0.5em; width:300px; margin-top: -0.5em; margin-left:-0.2em; font-size:0.9em; position:absolute; border-radius: 3px; background-color: #002753; color:#fff; z-index: 10; font-weight: 400!important;}
a.tooltip:hover span{display: block; }


/* IMAGE PREVIEW */

form .preview {background-color: #eee; padding: 0.5em;}
form .preview img {width: 100%;}

/* FORM PREVIEW */

.form-preview {border: 1px solid #eee; background-color: #f8f8f8; min-height: 600px; padding: 0.5em; border-radius: 3px;}


/* INITIALIZER */

form {margin:0; overflow: auto;}

form *, input[type="search"] {font-family: inherit; line-height: inherit; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; outline: none; -webkit-appearance: none; position: relative; transition: none !important;}

form a {color: #00a3d9;}
form h3 {padding: 0.5em 0 0.5em 0;}

input, select {cursor: pointer;}
label {display: block; padding: 0.45em 0;}
label.left + * {margin-left: 0.5em;}

.field-wrap {display: block; padding:0.1em 0; clear: both; overflow: auto;}
.field-wrap > label {width: 35%; float: left; font-weight: 700;}

.input-wrap {display: block; width:65%;float: right; position: relative;}
.input-wrap > span {display: block; padding: 0.55em 0;}
.input-wrap .button {margin-top: 0;}
.input-wrap input + a {position: absolute; top: 0.5em; right:0.5em; margin:0; padding: 0;}


/* INPUTS */

.select-wrap,
.file-wrap,
input[type="text"],
input[type="date"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="time"],
input[type="email"],
textarea {border: none; border-top: 1px solid #ddd; background-color: #eee; -webkit-appearance: none; border-radius: 0; line-height: 2.2em; font-family: inherit; font-size: inherit; height:auto; padding: 0 0.5em; width: 100%; min-height: 2.2em; box-sizing: border-box;}

textarea {line-height: 1.2em; padding: 0.5em;}

input:focus, textarea:focus, .select-wrap:hover {border-color: #ccc;outline: none;}

.small {width:30% !important;}
.half {width:50% !important;}
.medium {width:68% !important;}


/* PLACEHOLDER */

::-webkit-input-placeholder {color: #999;}
::-moz-placeholder {color: #999;}
:-ms-input-placeholder {color: #999;}
:-moz-placeholder {color: #999;}


/* CHECKBOX */

input[type="checkbox"] {position: absolute; left: -999em;}
input[type="checkbox"] + label::before {font-family: 'FontAwesome'; content:''; font-size: 0.75em; line-height: 1; display: block; float: left; position:relative; clear: both; top:-0.25em; left:0; width:1em; height:1em; padding: 0.5em; margin: 0 0.5em 0 0; border-top: 1px solid #ddd;  background:no-repeat center 0.5em #eee;}
input[type="checkbox"] + label {display: inline-block; padding: 0.6em 1em 0 0; cursor: pointer; font-weight: normal;}

input[type="checkbox"]:checked + label::before {content:"\f00c"; color: #333}

.dataTable input[type="checkbox"] + label::before {top:0.2em;}
.dataTable input[type="checkbox"] + label {padding: 0;}


/* CHECKBOX SWITCH */

input[type="checkbox"].switch + label {padding: 2px; width: 4em; height: 2em; background-color: #eee; border-radius: 4em; border-top: 1px solid #ddd; transition: background 0.4s;}
input[type="checkbox"].switch + label::before,
input[type="checkbox"].switch + label::after {display: block; position: absolute; content: ""; background: none;}
input[type="checkbox"].switch + label::before {background: none; width: auto; height: auto; margin: 0; padding: 0; border-bottom: 1px solid #ddd; border-radius: 60px; transition: background 0.4s;}
input[type="checkbox"].switch + label::after {top: 2px; left: 3px; width: 1.6em; height: 1.6em; background-color: #fff; border-radius: 1em; border-bottom: 1px solid #ccc; transition: margin 0.4s, background 0.4s;}
input[type="checkbox"].switch:checked + label {background-color: #85bd3f; background-image: none; border-top: 1px solid #6c9735;}
input[type="checkbox"].switch:checked + label:after {margin-left: 2em; background-color: #fff;border-bottom: 1px solid #6c9735;}


/* RADIO BUTTONS*/

input[type="radio"] {position: absolute; left: -999em;}
input[type="radio"] + label::before {font-family: 'FontAwesome'; content:''; font-size: 0.75em; line-height: 1; display: block; float: left; position:relative; clear: both; top:-0.25em; left:0; width:1em; height:1em; padding: 0.5em 0.5em 0.5em 0.6em; margin: 0 0.5em 0 0; border-top: 1px solid #ddd; border-radius: 100%; background:no-repeat center 0.5em #eee;}
input[type="radio"] + label {display: block; padding: 0.6em 0; cursor: pointer;}
input[type="radio"]:checked + label::before {content:"\f111"; color: #333;}

input[type="radio"].inline + label {display: inline-block; margin-right: 1em;}

label.template {display: block; font-weight: normal; position: relative;cursor:pointer;}
.template > input[type=radio]{display:none;}
.template img {width: 100%; height: auto; pointer-events: none; margin: 0 !important;}
.template input[type=radio] + img{cursor:pointer; border:3px solid transparent; display: inline;}
.template input[type=radio]:checked + img{border-color: #85BD3B;}
.template span {margin: 0 0.2em !important; }


/* SELECT */

.select-wrap {overflow:hidden; width:100%; border-top: none; border-bottom: 2px solid #ddd; border-right: 1px solid #ddd; margin:0; position: relative;}
.select-wrap:after {display: block; font-family: "FontAwesome"; content:"\f107"; position: absolute; right: 0.5em; top:0; pointer-events: none;}
.ie9 .select-wrap:after {display: none;}

table.dataTable thead  .select-wrap {background-color: #ffffff;}

.select-wrap select {width:100%; background-color:transparent !important; background-image:none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; border:none; box-shadow:none; cursor: pointer; font-family: inherit; font-size: inherit; padding: 0;}
option {padding:4px;}


/* UPLOAD */

.file-wrap {width:100%; background-color: #f8f8f8; border-top: none; margin:0; border-radius: 3px; overflow: auto; position: relative;}
.file-wrap img {max-width:100%; margin: 0.5em 0 !important;}
.file-wrap i {float: right; padding: 0.5em 0;}
input[type="file"] {cursor: pointer; width: 100%; padding:0.4em 0; font-size: inherit;}


/* SUBMIT */

form .button {float: right;}
input[type="submit"]{border:none; line-height:0.9em;}
.field-wrap input[type="submit"]{ margin:0 0 0 0.5em; }
form .wrap input[type="submit"]{ margin:0.5em; }


/* HIDDEN INPUT */
.hidden-input {border-top: 1px solid #ddd; background-color: #eee; padding: 0 0.5em; width: 100%; min-height: 2.2em; margin-bottom: 0.2em; overflow: auto;}
.hidden-input input {border: none; width: auto; background-color: transparent;}
.hidden-input span {color: #999;}


/* LOGIN */

.login {width: 25em; margin: 10% auto 0 auto;}
.login .logo img {display: block; margin: 1.5em auto; width: 200px;}
.login span {margin: 1.5em auto 2em auto; font-size: 1.6em; line-height: 1;}
.login .field-wrap {border-top: 1px solid #ddd; background-color: #eee; padding: 0 0.5em; width: 100%; min-height: 2.2em; margin-bottom: 0.2em;}
.login input[type="text"],
.login input[type="password"] {background-color: transparent; border: none; width: 95%; float: right;}
.login i {margin-top: 0.6em;}

.generate-pw {}
.generate-pw a.button.link {color: #fff; opacity: 0.5; -webkit-opacity: 0.5; -moz-opacity: 0.5; -ms-opacity: 0.5; -o-opacity: 0.5;}
.generate-pw a.button.link:hover {opacity: 1; -webkit-opacity: 1; -moz-opacity: 1; -ms-opacity: 1; -o-opacity: 1;}
.generate-pw i {margin: 0;}
.generate-pw #displayPasswordLoginPage {font-size: 1em; display: inline; line-height: 2.1em; margin: 0 0.5em;}
.generate-pw #cpyPassBtn {display: inline-block; float: none; background-color: #fff; padding: 0.5em; border: #fff; color: #00a3d8;}

/*ERRORS*/

.error-msg {background-color: #ffdddd; color: #D90000; padding: 0.8em 0.5em; margin: 0 15px 15px; border-radius: 3px;}
.advice-msg {background-color: #FFF2CC; color: #FFBF00; padding: 0.8em 0.5em; margin: 0 15px 15px; border-radius: 3px;}
.success-msg {background-color: #E7F2D9; color: #87BD42; padding: 0.8em 0.5em; margin: 0 15px 15px; border-radius: 3px;}
.error input, .error .select-wrap, .error textarea {border-color:#eebbbb; background-color: #ffdddd; color: #D90000;}
.error label {color: #D90000;}

input.error,
label.error,
.error textarea,
.error input,
.error .select-wrap,
.error .select-wrap .handle,
.error label,
.error .input-wrap label,
.error input[type="radio"] + label:before,
.error input[type="checkbox"] + label:before {border-color: #fde8e9; border-bottom-color: #ed1c27; color: #ed1c27;}
input:required:invalid {box-shadow: none;}

input.error,
.error textarea,
.error input,
.error .select-wrap,
.error .select-wrap .handle,
.error input[type="radio"] + label:before,
.error input[type="checkbox"] + label:before {background-color: #fde8e9;}

/* MODAL WINDOWS
----------------------------------------------------------------- */

.popup {display:none; width: 100%; height: 100%; position: fixed; z-index:300; top: 0 ; margin: 0; padding: 0; background-color: rgba(0,0,0,0.5)}

.window {display: block; background-color: #ffffff; clear: both; width: 700px; margin: 0 auto 0 auto; z-index: 100; position: relative; border-radius: 3px; overflow: auto; position: relative; box-shadow: #333 0 0 20px; padding-bottom: 1em;}
.window header { padding: 1em; border-bottom: 1px solid #ddd; background-color: #f5f5f5;}
.window header h2 {font-style: normal; font-size: 1.125em; padding: 0;}
.window p {padding: 1em;}
.window header .close {display: block; position: absolute; right: 1em; top: 0.8em; cursor: pointer; opacity: 0.6; color: #000;}
.window .close:hover {opacity: 0.9;}
.window .button {float: right;}
.window footer {margin: 2em 0 1em 0;}

/* DataTables */

/* Highligh table row */
.highlight td {
	background-color: #dcdcdc;
}

#accounts tr:hover {
	/* Add a grey background color to the table on hover */
	background-color: #f1f1f1;
}

#login_table tr:hover {
	/* Add a grey background color to the table on hover */
	background-color: #f1f1f1;
}