*,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

html {height: 100%;margin: 0;padding: 0;}
body {
	background: #272b30;
	font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:14px;
	margin:0;
  height: 100%;
}

h2, h3, h4 {color: #d0d0d0;}

p {margin:0 0 10px}

input[type=image],img {vertical-align:middle}

a {
	color:#1164ab;
	text-decoration:none;
	transition:color .15s
}

a:hover,a:focus,a:active {color:#104c80;}
/*a:focus{
	outline:thin dotted #333
}*/

.underline {text-decoration: underline;}
.underline-h:hover {text-decoration: underline;}
.strong {font-weight: 400;}
.strong.500 {font-weight: 500;}
.strong.700 {font-weight: 700;}
.full {width: 100%;}
.left {float: left;}
.right {float: right;}
.center {margin: 0 auto;}
.text-center {text-align: center;}
.capitalize {text-transform: capitalize;}
.uppercase {text-transform: uppercase;}
.lowercase {text-transform: lowercase;}

.divider {height: 20px;width: 100%;clear: both;}
.divider.visible {border-bottom: 1px solid #989898;margin-bottom: 20px;}

.rounded {border-radius: .28571429rem;}
.rounded.circle {border-radius: 50px;}
.rounded-top {border-radius: .28571429rem .28571429rem 0rem 0rem;}
.rounded-bot {border-radius: 0rem 0rem .28571429rem .28571429rem;}
.rounded-right {border-radius: 0rem .28571429rem .28571429rem 0rem;}
.rounded-left {border-radius: .28571429rem 0rem 0rem .28571429rem;}
.rounded-lefttop-rightbottom {border-radius: .28571429rem 0rem .28571429rem 0rem ;}
.rounded-leftbot-righttop {border-radius: 0rem .28571429rem 0rem .28571429rem ;}
.rounded-left-bot {border-radius: 0rem 0rem 0rem .28571429rem;}
.rounded-right-bot {border-radius: 0rem 0rem .28571429rem 0rem;}

.clear {clear: both;}
.space-top {margin-top:1.5rem;}

.bg.blue {color: #f8f8f8;background: #0085D3 !important;}
.bg.green {color: #f8f8f8;background: #77A74B !important;}
.bg.red {color: #f8f8f8;background: #A93D2F !important;}
.bg.orange {color: #f8f8f8;background: #F2711C !important;}
.bg.yellow {color: #f8f8f8;background: #dcc620 !important;}
.bg.purple {color: #f8f8f8;background: #436 !important;}
.bg.gray {color: #f8f8f8;background: #767676 !important;}
.bg.grey {color: #717171;background: #d0d0d0 !important;}
.bg.black {color: #f8f8f8;background: #333 !important;}
.bg.white {color: #333;background: #ffffff !important;}
.bg.white.off {color: #333;background: #f5f5f5 !important;}
.bg.egg {color: #333; background: #eee !important;}
.bg.black {color: #f8f8f8;background: #333 !important;}
.bg.dark {color: #f8f8f8;background: #272b30 !important;}
.bg.purple.atomic {color: #f8f8f8;background: #333544 !important;}
.bg.dark.moon {color: #f8f8f8;background: #23272a !important;}
.bg.red.vintage {color: #f8f8f8;background: #a24235 !important;}
.bg.dark.blue {color: #f8f8f8;background: #282a35 !important;}
.bg.none {background: none !important;}

.mixtape-color {color: #A93D2F !important;}
.mixtape-bg {background-color: #A93D2F;color: #f8f8f8;}

.gitgud-color {color: #436;}
.gitgud-bg {background-color: #436;color: #f8f8f8;}

.tweetsave-color {color: #3999E2;}
.tweetsave-bg {background-color: #3999E2;color: #f8f8f8;}

.top {background: none;}

.wrapper {
	max-width: 1170px;
	margin: 0 auto;
  height: 100%;
}

ul {list-style: none;margin: 0;padding: 0;list-style-position: inside;}
ol {counter-reset: ordered;margin: 0;padding: 0;list-style-position: inside;}
.list.none {list-style: none;}
.list.inside {list-style-position: inside;}
.list.outside {list-style-position: outside;}
.list.circle {list-style-type: circle;}
.list.square {list-style-type: square;}
.list.roman {list-style-type: upper-roman;}
.list.roman.lower {list-style-type: lower-roman;}
.list.alpha {list-style-type: upper-alpha;}
.list.alpha.upper {list-style-type: lower-alpha;}
.list.greek {list-style-type: lower-greek;}
.list.decimal {list-style-type: decimal;}
.list.decimal.zero {list-style-type: decimal-leading-zero;}

.menu {
    background: #272b30;
    height: 50px;
    overflow: hidden;
}

body[class*="white"].menu > ul > li > a {color: #f5f5f5}

.nav-logo {
	color: #0085d3;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-rendering: optimizelegibility;
    font-size: 18px;
}

.nav-logo img {
    width: 26px;
    vertical-align: middle;
    position: relative;
    top: -3px;
    margin-right: 2px;
}

.menu ul {
	margin: 0px;
    padding: 0px;
}

.menu ul li {
	display:block;
    cursor: default;
    float: left;
}

.menu ul li:hover {
	background: rgba(0, 0, 0, 0.1);
}

.menu ul li a {
	color:rgba(255, 255, 255, 0.6);
	list-style:none;
	margin:0;
	padding: 0px 17px 0px 17px;
  text-align: left;
  display: block;
  line-height: 50px;
  height: 50px;
}

.menu ul li a:hover {
	color:rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.menu li.username {
	height: 50px;
  padding: 0px 0px 0px 7px;
  cursor: pointer;
  float: right;
  text-align: center;
}

.menu li.username a {
	color: #636363;
	text-decoration: none;
	display: block;
	height: 50px;
  padding: 1px 10px 0px 10px;
}


.menu li.username img {
	border-radius: 25px;
	width: 34px;
	margin: -5px 10px 0px 10px;
	vertical-align: middle;
}

.menu li.username span {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	margin-right: 10px;
	font-weight: 400;
}

.notifications {clear: both;}

.notification {
  background-color: #E0E0E0;
  padding: 10px 14px;
  margin: 0px;
  transition: all .5s;
}

.notifications .notification .message {
  margin: 0px;
  font-size: 15px;
}

.notification.green {color: #f8f8f8;background: #77A74B;}
.notification.yellow {color: #333;background: #ead222;}
.notification.red {color: #f8f8f8;background: #d83b3b;}
.notification.blue {color: #f8f8f8;background: #039BE5;}
.notification.dark {color: #f8f8f8;background: #333;}

.notice {
  padding: 15px;
  background: #dedede;
  margin: 5px 0px 10px 0px;
  font-size: 15px;
  /*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);*/
}

.notice.green {color: #f8f8f8;background: #77A74B;}
.notice.yellow {color: #333;background: #ead222;}
.notice.red {color: #f8f8f8;background: #d83b3b;}
.notice.blue {color: #f8f8f8;background: #039BE5;}
.notice.dark {color: #f8f8f8;background: #333;}

.notice.labeled {font-weight: 400;border: 1px solid;}
.notice.labeled .label {color: #f8f8f8;float: left;padding: 15px 25px 15px 25px;position: relative;top: -15px;left: -15px;font-weight: 600;min-width: 12%;text-align: center;border-radius: 3px 0rem 0rem 3px;}
.notice[class*="labeled"].notice.green {border-color:#77A74B;background: #badc9c;color: #333}
.notice[class*="labeled"].notice.yellow {border-color:#ead222;background: #efe496;color: #333}
.notice[class*="labeled"].notice.red {border-color:#d83b3b;background: #e6a3a3;color: #333}
.notice[class*="labeled"].notice.blue {border-color:#039BE5;background: #93d7f9;color: #333}
.notice[class*="labeled"].notice.dark {border-color:#333;background: #ccc;color: #333}

.notice.labeled[class*="green"] > .label {background: #77A74B;}
.notice.labeled[class*="yellow"] > .label {color: #333;background: #ead222;}
.notice.labeled[class*="red"] > .label {background: #d83b3b;}
.notice.labeled[class*="blue"] > .label {background: #039BE5;}
.notice.labeled[class*="dark"] > .label {background: #333;}

.section {padding: 10px 0px 15px 5px;width: 100%;clear: both;}
.section.border {border-bottom:1px solid rgba(0, 0, 0, 0.3);}
.container.bg[class*="dark"] > .section.border {border-color:rgba(255, 255, 255, 0.1)}
.section.heading {font-size: 22px !important;font-weight: 400;color: #d0d0d0;}

.container {margin-bottom: 1.5rem;overflow: auto;background-clip: padding-box;}
.container.full {width: 100%;float: left;}
.container.75 {width: 75%;clear: both;}
.container.two-third {width: 66.66666%;clear: both;}
.container.half {float: left;width: 50%;}
.container.third {float: left;width:33.333333%;}
/*.container.third.first {margin: 0rem 0.5rem 1rem 0rem;}
.container.third:nth-child(3n) {margin: 0rem 0rem 1rem .5rem;}
.container.third:nth-child(4n) {margin: 0rem 0.5rem 1rem 0rem;}*/
.container.quarter {float: left;width: 25%;}
.container.border {box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);}
.container.border.all {border: 1px solid rgba(0, 0, 0, 0.06);}
.container.border.top {border-top: 1px solid rgba(0, 0, 0, 0.06);}
.container.border.bot {border-bottom: 1px solid rgba(0, 0, 0, 0.06);}
.container.border.right {border-right: 1px solid rgba(0, 0, 0, 0.06);}
.container.border.left {border-left: 1px solid rgba(0, 0, 0, 0.06);}
/*.container.border[class*="white"] {border: 1px solid rgb(38, 40, 49)}*/

.container > .header {font-size: 20px;padding: 1rem;}
.container > .content {padding: 1em 1em;}

.container.gap {margin-right: .5%;margin-left: .5%;margin-bottom: 1rem;}
.container[class*="gap"].container.full {width: 99%;}
.container[class*="gap"].container.75 {width: 74%;}
.container[class*="gap"].container.two-third {width: 65.6%;}
.container[class*="gap"].container.half {width: 49%;}
.container[class*="gap"].container.third {width: 32.3%;}
.container[class*="gap"].container.quarter {width: 24%;}

.container.gap.larger {margin-right: 1.5%;margin-left: .5%;margin-bottom: 1rem;}

.footer {
    margin: 0px;
    padding: 20px 0px;
    width: 100%;
    clear: both;
    min-height: 225px;
    color:#f8f8f8;
    position: relative;
    top: 50px;
}

.footer .footer-logo {width: 64px;margin: 0 auto;position: relative;top: -50px;}
.footer .footer-logo img {width: 100%;box-shadow: 0px 5px 7px #333;border-radius: 50px;}
.footer ul.footer-icons {text-align: center;}
.footer ul.footer-icons li a {color: #f8f8f8;margin: 0;padding: 5px;font-size: 2em;}

/*body[class*="dark"].footer, .footer ul, .footer a {color: #f8f8f8 !important}*/

.footer ul>li:last-child {
	border-right: none;
}

.footer a {
	color:#f8f8f8;
	list-style:none;
	margin:0;
	padding:0;
	text-align:center;
	font-size: 12px;
  font-weight: 400;
}

.footer a:hover {
	color:#fff;
}

/*body[class*="dark"].footer a:hover {color: #fff !important}*/

.footer ul > li {
	display:inline-block;
	margin:0;
	padding:0px 5px 0px 5px;
	cursor:default;
}

.empty:empty {
   display: none;
}

ul.gray-list {
	list-style: none;
	max-width: 100%;
	margin: 0 auto;
    padding: 0px 0px 10px 0px;
}

ul.gray-list li {
	padding: 10px;
    background: #eaeaea;
    border-bottom: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
    font-size: 16px;
    font-weight: 600;
    color: #565656;
}

ul.gray-list li:first-child {
    border-top: 1px solid #d8d8d8;
}

ul.gray-list li:hover {
    background: #dcdcdc;
    color: #444;
}

.login-page-box {
    background: rgba(255, 255, 255, 0.85);
    max-width: 425px;
    margin: 0 auto;
    min-height: 330px;
    margin-top: 150px;
    padding: 20px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);
}

.login-box-addon {
    background: rgba(255, 255, 255, 0.85);
    max-width: 425px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 20px;
    text-align: center;
}

.login-box-addon p {
	margin: 0;
}

.login-page-box h1 {
	font-size: 32px;
	color: #444;
	text-align: center;
	font-weight: 600;
	padding: 0px 0px 0px 0px;
}

.login-page-box h2 {
	font-size: 16px;
	color: #444;
	text-align: center;
	font-weight: 300;
}

.login-page-box input[type='email'], .login-page-box input[type='password'], .login-page-box input[type='name'] {
  width: 100%;
  background: none;
  height: 44px;
  border-bottom: 1px solid #8c8c8c;
  border-right: none;
  border-left: none;
  border-top: none;
  padding: 12px;
  margin: 0 auto;
  margin-bottom: 15px;
  font-size: 20px;
  color: #333;
  font-weight: 300;
  text-decoration: none;
  -webkit-appearance: none;
  outline: none;
  font-family: 'Roboto', sans-serif;
  transition: 300ms;
  transition-property: border-bottom;
}

.login-page-box .checkbox {
  padding: 10px;
  text-align: left;
}

.control {
	font-size: 18px;
	position: relative;
	display: block;
	margin-bottom: 15px;
	padding-left: 30px;
	cursor: pointer;
}

.control input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.control__indicator {
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background: #e6e6e6;
}

.control--radio .control__indicator {
	border-radius: 50%;
}

/* Hover and focus states */
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
	background: #ccc;
}

/* Checked state */
.control input:checked ~ .control__indicator {
	background: #2aa1c0;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
	background: #0e647d;
}

/* Disabled state */
.control input:disabled ~ .control__indicator {
	pointer-events: none;
	opacity: .6;
	background: #e6e6e6;
}

/* Check mark */
.control__indicator:after {
	position: absolute;
	display: none;
	content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after {
	display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after {
	top: 4px;
	left: 8px;
  width: 5px;
  height: 10px;
	transform: rotate(45deg);
	border: solid #fff;
	border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
	border-color: #7b7b7b;
}

/* Radio button inner circle */
.control--radio .control__indicator:after {
	top: 7px;
	left: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}

/* Disabled circle colour */
.control--radio input:disabled ~ .control__indicator:after {
	background: #7b7b7b;
}

.login-page-box input::-webkit-input-placeholder {
  font-size: 16px;
  color: #828282;
  font-weight: 300;
}

.login-page-box input:focus {
  border-bottom: 1px solid #0068A5;
}


.login-page-box .login-forgot {
    text-align: right;
    padding-top: 15px;
}

.login-page-box .login-submit {
	width: 100%;
	height: 44px;
	margin: 0 auto;
	background: #0085D3;
	border: none;
	font-size: 20px;
	color: #f8f8f8;
	font-weight: 300;
	cursor: pointer;
	padding: 0px;
  -webkit-transition: background 300ms ease-out;  
  -moz-transition: background 300ms ease-out;  
  -o-transition: background 300ms ease-out;  
  transition: background 300ms ease-out;  
  font-family: 'Roboto';
}

.login-page-box .login-submit:hover {
	background: #0392e6;
	color: #f8f8f8;
}

.login-page-box .login-submit:active {
  -webkit-appearance: none;
  outline: none;
  background: #77a64b;
}

.login-box-oauth {
	margin: 0 auto;
	padding: 10px;
	width: 425px;
}

.login-box-oauth ul {
	width: 100%;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.login-box-oauth ul li {
	padding: 15px
}

.login-box-oauth ul li img {
	border-radius: 25px;
	width: 45px;
	vertical-align: middle;
}

.button {
  min-height: 2.45em; 
  background: none;
  border: none;
  font-size: 16px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
  margin: 10px 5px 10px 5px;
  padding: 0.6em 1.5em;
  -webkit-transition: background 300ms ease-out;  
  -moz-transition: background 300ms ease-out;  
  -o-transition: background 300ms ease-out;  
  transition: background 300ms ease-out;  
  font-family: 'Roboto';
  text-align: center;
}
.button.full {margin: 10px 0px !important}

.button.blue {color: #f8f8f8;background: #0085D3;}
.button.blue:hover {background: #0392e6;}
.button.blue:active {background: #0076bb;}

.button.green {color: #f8f8f8;background: #77A74B;}
.button.green:hover {background: #87bd55;}
.button.green:active {background: #719e47;}

.button.red {color: #f8f8f8;background: #A93D2F;}
.button.red:hover {background: #bf4434;}
.button.red:active {background: #98372a;}

.button.orange {color: #f8f8f8;background: #F2711C;}
.button.orange:hover {background: #f97f2e;}
.button.orange:active {background: #de6819;}

.button.yellow {color: #f8f8f8;background: #dcc620;}
.button.yellow:hover {background: #ecd524;}
.button.yellow:active {background: #d4bf1e;}

.button.purple {color: #f8f8f8;background: #436;}
.button.purple:hover {background: #584384;}
.button.purple:active {background: #382b54;}

.button.gray {color: #f8f8f8;background: #767676;}
.button.gray:hover {background: #909090;}
.button.gray:active {background: #585858;}

.button.grey {color: #717171;background: #d0d0d0;}
.button.grey:hover {background: #bbbbbb;}
.button.grey:active {background: #e2e2e2;}

.button.black {color: #f8f8f8;background: #333;}
.button.black:hover {background: #464646;}
.button.black:active {background: #111;}

.button.white {color: #333;background: #ffffff;}
.button.white:hover {background: #eaeaea;}
.button.white:active {background: #ffffff;}

.button.disabled {color: #949494;background: #d0d0d0;cursor: not-allowed;}
.button.disabled:hover {color: #949494 !important;background: #d0d0d0 !important;}

.button.loading:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -0.64285714em 0em 0em -0.64285714em;
    width: 1.28571429em;
    height: 1.28571429em;
    border-radius: 500rem;
    border: 0.2em solid rgba(0, 0, 0, 0.15);
}

.button.loading:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    margin: -0.64285714em 0em 0em -0.64285714em;
    width: 1.28571429em;
    height: 1.28571429em;
    -webkit-animation: button-spin 0.6s linear;
    animation: button-spin 0.6s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 500rem;
    border-color: #FFFFFF transparent transparent;
    border-style: solid;
    border-width: 0.2em;
    box-shadow: 0px 0px 0px 1px transparent;
}

.button.icon.labeled {font-weight: 400;
      position: relative;
    padding-left: 4.07142857em!important;
    padding-right: 1.5em!important;}

.button.icon {
  padding: 0.6em 1.1em;
  min-height: 2.45em;
}

.button[class*="icon"].button.icon i {
  font-size: 1em;
  display: inline-block;
  opacity: 1;
  height: 1em;
  font-style: normal;
  font-weight: 400;
  text-decoration: inherit;
  text-align: center;
  speak: none;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding-top: .2em;;
}

.button.icon[class*="labeled"].button.icon i {
  position: absolute;
  height: 100%;
  line-height: 2;
  border-radius: 0;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  text-align: center;
  margin: 0;
  width: 2.57142857em;
  background-color: rgba(0,0,0,.1);
  color: '';
  box-shadow: -1px 0 0 0 transparent inset;
  top: 0;
  left: 0;
}

.button.icon.labeled.icon-right {
  padding-right: 4.07142857em!important;
  padding-left: 1.5em!important;
}

.button.icon[class*="icon-right"].button.icon i {
  left: auto;
  right: 0;
  border-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  box-shadow: 1px 0 0 0 transparent inset;
}

ul.group {
  list-style: none;
  margin: 0px 10px 0px 6px;
  padding: 0px;
}

ul.group.horizontal.rounded li:first-child {border-radius: .28571429rem 0rem 0rem .28571429rem;}
ul.group.horizontal.rounded li:last-child {border-radius: 0rem .28571429rem .28571429rem 0rem;}
ul.group.horizontal li {float: left;margin: 10px 0px 10px 0px;}

ul.group.vertical.rounded li:first-child {border-radius: .28571429rem .28571429rem 0rem 0rem;}
ul.group.vertical.rounded li:last-child {border-radius: 0rem 0rem .28571429rem .28571429rem;}
ul.group.vertical li {margin: 0px;}

#dashboard {
  height: 100%;
}

.sidebar-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 200px;
  transition: width 0.15s;
  background: #1164ab;
  /*box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.35);*/
  transition: all 300ms ease-in-out;
  z-index: 99999;
}

.sidebar-header {
  text-align: center;
  font-size: 18px;
  color: #eaeaea;
  margin: 0px;
  padding: 9px 11px;
}

.sidebar-header .fa {padding: 8px 10px;cursor: pointer;opacity: 0.7}

.sidebar-header .fa:hover {background: #064d8c;opacity: 0.9}

.sidebar {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 100%;
}

.sidebar ul {
	width: 100%;
	list-style: none;
	padding: 0px;
	margin: 0px;
}

.sidebar ul li {
	width: 100%;
}

.sidebar ul li:first-child {
	/*border-top: 1px solid #C5C5C5;*/
	width: 100%;
}

.sidebar ul li a {
	display: block;
	padding: 12px 20px 12px 20px;
	text-decoration: none;
	font-weight: 400;
	font-size: 15px;
	max-width: 100%;
  color: rgba(255, 255, 255, 0.75);
}

.sidebar ul li a .fa {
    padding-right: 5px;
}

.sidebar ul li a:hover {
  transition: background 200ms;
	background: #064d8c;
	color: #f8f8f8;
}

.sidebar ul li a.current {
    background: #eaeaea;
    color: #555;
    font-weight: 600;
    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);*/
}

.dash-welcome {
	font-size: 16px;
	color: #333;
	text-align: left;
	font-weight: 300;
  border: 1px dashed #b7b7b7;
  padding: 10px;
  background: #e4e4e4;
}


/*.content {
  padding: 20px;
  clear: both;
  width: 100%;
  height: auto;
  overflow: auto;
  margin-top: 20px;
}*/

.content p {
	font-size: 15px;
	text-align: left;
	font-weight: 300;
}

.content p span {
	font-weight: 600;
}

.content .box {
  margin-bottom: 20px;
}

.content .box:nth-child(odd) {
clear: both;
}

.content .box .box-content {
	padding: 15px;
	width: 100%;
	border-right: 1px solid #B7B7B7;
	border-left: 1px solid #B7B7B7;
	border-bottom: 1px solid #B7B7B7;
}

.content .box .box-header {
    padding: 10px;
    background: #1164AB;
    width: 100%;
}

.content .box .box-header h3 {
	color: #f8f8f8;
	padding-bottom: 0px;
}

.progress-bar {
    width: 100%;
    height: 24.5px;
    border: none;
    background: #DCDCDC;
    margin: 5px 0px 5px 0px;
}

.container[class*="dark"] > .progress-bar {background: rgb(35, 39, 42) !important;}
.content[class*="dark"] > .progress-bar {background: rgb(35, 39, 42) !important;}
.container[class*="purple"] > .progress-bar {background: rgb(35, 39, 42) !important;}
.content[class*="purple"] > .progress-bar {background: rgb(35, 39, 42) !important;}

.progress-bar.tiny {
    height: 6px;
}

.progress-bar.small {
    height: 13px;
}

.progress-bar.large {
    height: 40px;
}

.progress-bar.huge {
    height: 63px;
}

.progress-bar > .bar {
	width: 0;
	max-width: 100%;
	height: 100%;
  background: #4c4c4c;
	-moz-animation-name: expandProgress;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-duration: 1s;
  -webkit-animation-name: expandProgress;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 1s;
  animation-name: expandProgress;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
}

.progress-bar > .bar > .progress {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: none;
  font-weight: 500;
  text-align: right;
  padding: 0px 8px 0px 8px;
  position: relative;
  top: 5px;
  /*text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.55)*/
}

.progress-bar.tiny > .bar > .progress {
  display: none;
}

.progress-bar.small > .bar > .progress {
  font-size: 10px;
  top: 0px;
  position: relative;
}

.progress-bar.large > .bar > .progress {
  font-size: 17px;
  top: 10px;
  position: relative;
}

.progress-bar.huge > .bar > .progress {
  font-size: 22px;
  top: 20px;
  position: relative;
  padding-right: 15px;
}

.card {overflow: auto}
.card-group {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap; flex-wrap: wrap;}
.card.shadow {box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);border: 1px solid rgba(0, 0, 0, 0.06);}
.card > .card-divider {height: 10px;width: 100%;clear: both;border-bottom: 1px solid rgba(0, 0, 0, 0.3)}
.card.bg[class*="dark"] > .card-divider {border-color: rgba(255, 255, 255, 0.1)}
.card.horizontal {width: 100%;height: auto;margin:10px 0px;}
.card.horizontal img {width: 25%; height: 100%; float: left;max-width: 180px;}
.card.vertical {width: 278px;min-height: 0; float: none;margin: 10px 7px; display: flex;flex-direction: column;}
.card.vertical.first {margin: 10px 7px 10px 0px;}
.card.vertical img {display: block;width: 100%;height: auto;}
.card .card-content {float: left;padding:15px 20px;}
.card.horizontal > .card-content {width: 75%}
.card.vertical > .card-content {-webkit-box-flex: 1;-ms-flex-positive: 1; flex-grow: 1;width: 100%}
.card.vertical > .card-content.bottom {-webkit-box-flex: inherit;-ms-flex-positive: inherit; flex-grow: inherit;}
.card > .card-content > .header {float: left;font-size: 1.6em;font-weight: 400;padding-bottom: 2px;}
.card > .card-content > .meta {float: left;font-size: 14px;font-weight: 200;font-style: italic;clear: both;opacity: 0.8;padding-bottom: 10px;}
.card > .card-content > .description {float: left;font-size: 14px; font-weight: 300;clear: both;}
.card > .card-button {width: 100%;padding: 15px;text-align: center;cursor: pointer;clear: both;margin:0; font-size: 15px;}
.card > .card-button > .fa {padding-right: 5px;}

.dropitleft {
	-moz-animation-name: dropItLikeItsHotLeft;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 0.6s;

    -webkit-animation-name: dropItLikeItsHotLeft;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.6s;

    animation-name: dropItLikeItsHotLeft;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 0.6s;
}

@-moz-keyframes dropItLikeItsHotLeft {
    0% {-moz-transform: translateX(-30px);opacity: 0;}
    100% {-moz-transform: translateX(0);opacity: 1;}
}
@-webkit-keyframes dropItLikeItsHotLeft {
    0% {-webkit-transform: translateX(-30px);opacity: 0;}
    100% {-webkit-transform: translateX(0);opacity: 1;}
}
@keyframes dropItLikeItsHotLeft {
    0% {transform: translateX(-30px);opacity: 0;}
    100% {transform: translateX(0);opacity: 1;}
}

.dropitright {
	-moz-animation-name: dropItLikeItsHotRight;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 0.6s;

    -webkit-animation-name: dropItLikeItsHotRight;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.6s;

    animation-name: dropItLikeItsHotLeft;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 0.6s;
}

@-moz-keyframes dropItLikeItsHotRight {
    0% {-moz-transform: translateX(30px);opacity: 0;}
    100% {-moz-transform: translateX(0);opacity: 1;}
}
@-webkit-keyframes dropItLikeItsHotRight {
    0% {-webkit-transform: translateX(30px);opacity: 0;}
    100% {-webkit-transform: translateX(0);opacity: 1;}
}
@keyframes dropItLikeItsHotRight {
    0% {transform: translateX(30px);opacity: 0;}
    100% {transform: translateX(0);opacity: 1;}
}

.dropitdown {
	-moz-animation-name: dropItLikeItsHotDown;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 0.6s;

    -webkit-animation-name: dropItLikeItsHotDown;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.6s;

    animation-name: dropItLikeItsHotDown;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 0.6s;
}

@-moz-keyframes dropItLikeItsHotDown {
    0% {-moz-transform: translateY(-10px);opacity: 0;}
    100% {-moz-transform: translateY(0);opacity: 1;}
}
@-webkit-keyframes dropItLikeItsHotDown {
    0% {-webkit-transform: translateY(-10px);opacity: 0;}
    100% {-webkit-transform: translateY(0);opacity: 1;}
}
@keyframes dropItLikeItsHotDown {
    0% {transform: translateY(-10px);opacity: 0;}
    100% {transform: translateY(0);opacity: 1;}
}


@-moz-keyframes expandProgress {
    0% {width:0;}
}
@-webkit-keyframes expandProgress {
    0% {width:0;}
}
@keyframes expandProgress {
    0% {width:0;}
}

.fadein {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:500ms;
  -moz-animation-duration:500ms;
  animation-duration:500ms;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.animation-delay.one {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.animation-delay.two {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay:0.6s;
  animation-delay: 0.6s;
}

.animation-delay.three {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}


@media only screen and (max-device-width:1595px),only screen and (max-width:1595px) {
/*.wrapper{width: 1250px;height: auto;margin-left: 200px;clear: both;max-width:none;}
.content{width:100%;}
.content .dash-box{width:100%;margin-right:0px;margin-left:0px;}
}

@media only screen and (max-device-width:1490px),only screen and (max-width:1490px) {
/*.wrapper{width: 84%;}*/
}

@media only screen and (max-device-width:1280px),only screen and (max-width:1280px) {
.wrapper{padding: 0px 10px;}
}

@media only screen and (max-device-width:1125px),only screen and (max-width:1125px) {
/*.wrapper{width: 80%;}*/
}

@media only screen and (max-device-width:1015px),only screen and (max-width:1015px) {
/*.wrapper{width: 78%;}*/
}

@media only screen and (max-device-width:951px),only screen and (max-width:951px) {
/*.wrapper{width: 100%;margin-left: 0px;}*/
.sidebar-wrapper {left: -200px;box-shadow: 2px 0px 20px rgba(0, 0, 0, 0);}
}

@media only screen and (max-device-width:850px),only screen and (max-width:850px) {
  .container.collapse{width: 100% !important;clear: both;}
  .wrapper {height: auto}
  .container.gap {margin-right: 0;margin-left: 0}
  .container.gap.larger {margin-right: 0;margin-left: 0}}

@media only screen and (max-device-width:625px),only screen and (max-width:625px) {
.card.vertical{width: 80%;margin: 10px 10%;}
}

@media only screen and (max-device-width:420px),only screen and (max-width:471px) {
  .content .dash-box{width:100%;margin-right:0px;margin-left:0px;}

}