/* Theme.css 
    Author : Martin Law
    Comment : No local modification made in this file , but kept in every module to keep their integrity 
*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }


body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal; 
  }

html,body {
  height: 100%; 
  margin: 0;
  }

/*---------------------------
Login
---------------------------*/

#login {
	height:100%;
	background: #000000 center top url("../images/design/bg-login-red.jpg") no-repeat;
}

#login-panel {
	height:100%;
	background: white;
	width:500px;
	margin: auto;
	padding: 60px;
	position: relative;
}

.login-content {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: calc(100% - 120px);
}

.product-logo  {
	margin: 0 0 50px 0;
	overflow: hidden;
    clear: both;
}

.product-logo img {
	width:260px
}

.login-fields {
	margin: 0 0 20px 0;
}

.login-buttons {
	margin: 0 0 40px 0;
}

.login-options {
	margin: 0 0 120px 0;
}

.login-footer {
	position: absolute;
	bottom: 0;
	padding: 0 0 40px 0;
	width: calc(100% - 120px);
}

.login-footer-content p, .login-footer-content img {
	float: left
}

.login-footer-content p {
	padding: 10px 15px 0 0;
	font-size: 0.7rem
}

.login-footer-content img {
	width: 45px
}

.login-footer .brand-logo {
	padding: 30px 0 0 0;
	clear: both;
	display: block
}

 .login-footer .brand-logo img {
	width: 140px;
	display: inline;
}

.login-links a {
	margin: 0 10px 0 0;
}

/*---------------------------
Structure
---------------------------*/

.align-center {
	text-align: center;
}

.app-title.red {
	color: #BB001B
}

.smartstats .core-container > header {
	border-bottom: 2px solid #B6D00D
}

/* cause issue on the login page 
.username {
	min-width: 140px
}
*/
#main-container {
	position: relative;
	background: #F3F6F9;
	padding: 0
}

.content {
	width: calc(100% - 260px);
	margin-left: 260px;
	padding: 20px 20px 80px 20px;
}

.dashboard .content {
	padding-bottom: 20px
}

.pre-content h2, .content h2 {
	color: #00AAB1
}

.pre-content {
	width: calc(100% - 230px);
    margin-left: 245px;
    padding: 30px 30px 30px 30px;
    background: white;
    margin-top: -15px
}


.blue {
	background: #557595;
	color:white;
}

.blue h2, .purple h2 {
	color: white;
}

.purple {
	background: #4A1671;
	color:white;	
}

table th { 
	background: white;
	border-bottom: 1px solid #E5E5E5
}

td.rowspan {
	background: #fff
}

table tbody tr:nth-child(n+1)
{
  background: #fff;
}

.table-options {
	padding: 10px 0;
}

.table-options-right {
	text-align: right
}

.table-footer {
	padding: 10px 0;
}

.horizontal-list li {
	display: inline-block;
	margin: 0 20px 0 0;
}

.horizontal-list li label {
	margin: 0
}

.horizontal-list li input[type=text] {
	padding: 5px;
	width: auto
}

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

/*---------------------------
Sidebar
---------------------------*/

.sidebar {
	background-color: #fff;
	border-right: 1px solid #E5E5E5;
	bottom: 0;
	display: block;
	left: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0;
	position: fixed;
	top: 80px;
	z-index: 100;
	color: #fff;
	width: 260px;
}

.sidebar-footer {
	position: absolute;
	bottom: 0;
	padding: 20px 30px
}

.sidebar-footer p {
	font-size: 0.8rem;
	line-height: 0.7;
	color: #000
}

.sidebar-footer .brand-logo {
	padding: 10px 0 0 0;
}

/*---------------------------
Navigation
---------------------------*/

ul.primary-navigation {
  padding: 20px 25px;
  border-bottom: 1px solid #E5E5E5}
  
ul.secondary-navigation {
  padding: 20px 25px;}
  
ul.primary-navigation li, ul.secondary-navigation li {
    list-style: none;
    margin: 0 0 5px 0; }
   
ul.primary-navigation li a, ul.secondary-navigation li a {
      color: #8b91a0;
      font-family: "Roboto", Arial, serif;
      font-size: 15px;
      padding: 10px 10px;
      display: block;
      text-decoration: none; 
      	border-radius: 8px
      }
      
ul.primary-navigation li a:hover, ul.secondary-navigation li a:hover {
	color: #fff;
	background: #222;
}

ul.primary-navigation li a.active, ul.secondary-navigation li a.active {
        color: #fff;
        background: #B6D00D;
        }

ul.primary-navigation li i, ul.secondary-navigation li i {
      width: 15px;
      display: inline-block;
      margin: 0 10px 0 0; }


/*---------------------------
Pages
---------------------------*/

#dashboard {
	height: 100%
}

.smartstats .core-content section, .smartstats .tile {
	padding: 2rem
}

.introduction {
	margin: 0 0 20px 0
}

.smartstats .form-group {
	margin-bottom: 1.5rem !important;
}

/*---------------------------
Modules
---------------------------*/

.modules {
	padding: 20px 5px 80px 5px;
	display: flex;
	flex-flow: row wrap;
	position: relative;
}

.module-card  {
	background: #fff;
	margin: 15px;
	flex: 0 1 calc(20% - 30px); /* <-- adjusting for margin */
	height: 260px;
	position: relative
}

.module-header {
	padding: 30px 20px;
}

.module-footer {
	position: absolute;
	bottom: 0;
	border-top: #E5E5E5 1px solid;;
	display: block;
	width: 100%;
	padding: 10px 20px
}

.module-footer .module-version {
	padding: 6px 0 0 0;
	display: inline-block
}

.module-footer button {
	float: right
}

.module-name img {
	height: 32px;
}

/*---------------------------
Changelog
---------------------------*/

.article {
	padding: 0 0 10px 0;
	margin: 0 0 30px 0;
	border-bottom: 1px solid #E5E5E5
}

.date {
	margin: 0 0 5px 0;
	display: inline-block;
	font-size: 80%
}

.article h2 {
	margin: 0 0 5px 0;
}



/*---------------------------
Footer
---------------------------*/

.page-footer {
	border-top: 1px solid #E5E5E5;
	position: fixed;
	bottom: 0;
	width: calc(100% - 260px);
	right: 0;
	z-index: 10;
	padding: 20px 40px;
	background: #fff;
}

.page-footer .controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

body footer {
  padding: .25rem 1.5rem;
  border-top: 1px solid #00aab1;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #1f394a;
  min-height: 50px;
  position: sticky;
  bottom: 0;
}

#dashboard-container {
 background: #F3F6F9
}


/*---------------------------
Dashboard
---------------------------*/

#dashboard-sidebar {
  height: 100%;
  background: #ffffff;
}

.panel {
	background: #FFFFFF;
	padding: 20px
}

#dashboard-container .module-card {
	margin:0 0 20px 0 
}


#dashboard-container .module-name img {
	max-width:90%;
	height:auto;
}

.list-item h4 {
	margin: 0
}

#dashboard-container h3 {
	margin-bottom: 0.5rem
}

#dashboard-container .connection table tr {
	border: none
}

#dashboard-container .connection table td {
	padding: 0.5rem 0.75rem;
}

/*---------------------------
Tabs
---------------------------*/

.accordion img{
	width: 100%
}

/* Core styles/functionality */
.tab .hiddenCheckBoxInput {
  position: absolute !important;
  opacity: 0;
  z-index: -1;
}
.tab__content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.35s;
}
.tab .hiddenCheckBoxInput:checked ~ .tab__content {
  max-height: 100rem;
}

/* Visual styles */
.accordion {
  overflow: hidden;
}

.tab {
	margin-bottom: 20px;
}

.tab-container {
	padding: 1em 0
}

.tab__label,
.tab__close {
  display: flex;
  background: var(--theme);
  cursor: pointer;
  font-size: 1em;
}
.tab__label {
  justify-content: space-between;
  padding: 1rem 0rem;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px
}
.tab__label::after {
  content: "\276F";
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
  transform: rotate(270deg);
}
.tab__content p {
  margin: 0;
}
.tab__close {
  justify-content: flex-end;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}
.accordion--radio {
  --theme: var(--secondary);
}

/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
  animation: bounce .5s infinite;
}
@keyframes bounce {
  25% {
    transform: rotate(90deg) translate(.25rem);
  }
  75% {
    transform: rotate(90deg) translate(-.25rem);
  }
}


.tabBar-tab {
	padding: 1em 0;
}

.tab-bar {
	border-bottom: 1px solid #e5e5e5;
}

.tab-bar-item {
	background: #ffffff;
	color: #000;
	border-radius: 0;
	font-size: 1.5em;
	padding: 0.5em 1em
}

.tab-bar-item.active, .tab-bar-item.active:hover {
  border-bottom: 3px solid #B6D00D;
  font-weight: bold
}

.tab-bar-item:hover {
	background: #e5e5e5;
	color: #000
}