Autismify/frontend/css/styles.css

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

body{
  background: #d9e0e7;
  font-size: 12px;
  font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #707478;

  /*font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  line-height: 1.42857143;
  color: #58666e;*/
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    color: #242a30;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-size: 60%;
    font-weight: 300;
    color: #7c7f83;
}
a {
    transition: color 100ms ease-in-out;
    -o-transition: color 100ms ease-in-out;
    -ms-transition: color 100ms ease-in-out;
    -moz-transition: color 100ms ease-in-out;
    -webkit-transition: color 100ms ease-in-out;
}
a:focus {
    outline: 0;
}
label {
    color: #242a30;
}
.badge {
    font-size: 75%;
    line-height: 1.25;
    font-weight: 600;
}
.label {
    font-size: 75%;
    font-weight: 600;
}
.badge.badge-square {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.badge.badge-default, .label.label-default {
    background: #b6c2c9;
}
.badge.badge-danger, .label.label-danger {
    background: #ff5b57;
}
.badge.badge-warning, .label.label-warning {
    background: #f59c1a;
}
.badge.badge-success, .label.label-success {
    background: #00acac;
}
.badge.badge-info, .label.label-info {
    background: #49b6d6;
}
.badge.badge-primary, .label.label-primary {
    background: #348fe2;
}
.badge.badge-inverse, .label.label-inverse {
    background: #2d353c;
}

.text-inverse {
    color: #2d353c!important;
}
a.text-inverse:focus, a.text-inverse:hover {
    color: #575d63!important;
}
.text-success {
    color: #00acac!important;
}
a.text-success:focus, a.text-success:hover {
    color: #33bdbd!important;
}
.text-info {
    color: #49b6d6!important;
}
a.text-info:focus, a.text-info:hover {
    color: #6dc5de!important;
}
.text-primary {
    color: #348fe2!important;
}
a.text-primary:focus, a.text-primary:hover {
    color: #5da5e8!important;
}
.text-warning {
    color: #f59c1a!important;
}
a.text-warning:focus, a.text-warning:hover {
    color: #f7b048!important;
}
.text-danger {
    color: #ff5b57!important;
}
a.text-danger:focus, a.text-danger:hover {
    color: #ff7c79!important;
}
.text-white {
    color: #fff!important;
}
a.text-white:focus, a.text-white:hover {
    color: #f0f3f4!important;
}

.btn.btn-default {
    color: #fff;
    background: #b6c2c9;
    border-color: #b6c2c9;
}
.btn-default.active, .btn-default:active, .btn-default:focus, .btn-default:hover, .open .dropdown-toggle.btn-default {
    background: #929ba1;
    border-color: #929ba1;
}
.btn-group .btn.btn-default:not(.active)+.btn.btn-default, .input-group-btn .btn.btn-default:not(.active)+.btn.btn-default {
    border-left-color: #929ba1;
}
.btn.btn-white {
    font-weight: 400;
    color: #333;
    background: #fff;
    border-color: #e2e7eb;
}
.btn.btn-white.btn-white-without-border {
    border-color: #fff;
}
.btn.btn-white.btn-white-without-border.active, .btn.btn-white.btn-white-without-border.active:focus, .btn.btn-white.btn-white-without-border.active:hover {
    border-color: #ddd;
}
.btn.btn-white.btn-white-without-border:focus, .btn.btn-white.btn-white-without-border:hover {
    border-color: #eee;
}
.btn-white.active, .btn-white:active, .btn-white:focus, .btn-white:hover, .open .dropdown-toggle.btn-white {
    background: #e2e7eb;
    border-color: #d8dde1;
}
.btn-group .btn.btn-white:not(.active)+.btn.btn-white, .input-group-btn .btn.btn-white:not(.active)+.btn.btn-white {
    border-left-color: #eee;
}
.btn.btn-inverse {
    color: #fff;
    background: #2d353c;
    border-color: #2d353c;
}
.btn-inverse.active, .btn-inverse:active, .btn-inverse:focus, .btn-inverse:hover, .open .dropdown-toggle.btn-inverse {
    background: #242a30;
    border-color: #242a30;
}
.btn-group .btn.btn-inverse:not(.active)+.btn.btn-inverse, .input-group-btn .btn.btn-inverse:not(.active)+.btn.btn-inverse {
    border-left-color: #242a30;
}
.btn.btn-primary {
    color: #fff;
    background: #348fe2;
    border-color: #348fe2;
}
.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary {
    background: #2a72b5;
    border-color: #2a72b5;
}
.btn-group .btn.btn-primary:not(.active)+.btn.btn-primary, .input-group-btn .btn.btn-primary:not(.active)+.btn.btn-primary {
    border-left-color: #2a72b5;
}
.btn.btn-success {
    color: #fff;
    background: #00acac;
    border-color: #00acac;
}
.btn.btn-success.active, .btn.btn-success:active, .btn.btn-success:focus, .btn.btn-success:hover, .open .dropdown-toggle.btn-success {
    background: #008a8a;
    border-color: #008a8a;
}
.btn-group .btn.btn-success:not(.active)+.btn.btn-success, .input-group-btn .btn.btn-success:not(.active)+.btn.btn-success {
    border-left-color: #008a8a;
}
.btn.btn-warning {
    color: #fff;
    background: #f59c1a;
    border-color: #f59c1a;
}
.btn-warning.active, .btn-warning:active, .btn-warning:focus, .btn-warning:hover, .open .dropdown-toggle.btn-warning {
    background: #c47d15;
    border-color: #c47d15;
}
.btn-group .btn.btn-warning:not(.active)+.btn.btn-warning, .input-group-btn .btn.btn-warning:not(.active)+.btn.btn-warning {
    border-left-color: #c47d15;
}
.btn.btn-danger {
    color: #fff;
    background: #ff5b57;
    border-color: #ff5b57;
}
.btn-danger.active, .btn-danger:active, .btn-danger:focus, .btn-danger:hover, .open .dropdown-toggle.btn-danger {
    background: #cc4946;
    border-color: #cc4946;
}
.btn-group .btn.btn-danger:not(.active)+.btn.btn-danger, .input-group-btn .btn.btn-danger:not(.active)+.btn.btn-danger {
    border-left-color: #cc4946;
}
.btn.btn-info {
    color: #fff;
    background: #49b6d6;
    border-color: #49b6d6;
}
.btn-info.active, .btn-info:active, .btn-info:focus, .btn-info:hover, .open .dropdown-toggle.btn-info {
    background: #3a92ab;
    border-color: #3a92ab;
}
.btn-group .btn.btn-info:not(.active)+.btn.btn-info, .input-group-btn .btn.btn-info:not(.active)+.btn.btn-info {
    border-left-color: #3a92ab;
}

.panel {
    background-color: #F8F8F8;
    /*border-bottom: 1px solid rgba(0, 0, 0, 0.5);*/
    box-shadow: none;
}

.panel.panel-no-rounded-corner .panel-body, .panel.panel-no-rounded-corner .panel-footer, .panel.panel-no-rounded-corner .panel-heading {
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
    border-radius: 0!important;
}
.panel-heading {
    padding: 10px 15px;
    border: none;
}
.panel-heading+.slimScrollDiv, .panel-heading+.table {
    border-top: 1px solid #eee;
}
.panel-heading-btn {
    float: right;
}
.panel-heading-btn>a {
    margin-left: 8px;
}
.panel-heading .btn-group .btn {
    margin-top: -7px;
}
.panel-heading .btn-group .btn.btn-sm {
    margin-top: -5px;
}
.panel-heading .btn-group .btn.btn-xs {
    margin-top: -1px;
}
.panel-heading .label.pull-left, .panel-heading .label.pull-right {
    line-height: 15px;
}
.panel-heading .progress.pull-left, .panel-heading .progress.pull-right {
    width: 40%;
    min-width: 120px;
}
.panel-heading+.alert {
    margin-bottom: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.panel-with-tabs .panel-heading {
    background: #c1ccd1!important;
    color: #333!important;
}
.panel-heading .nav-tabs {
    margin-top: -10px;
    margin-right: -15px;
}
.panel-heading .nav-tabs>li>a {
    padding: 10px 15px;
    line-height: 20px;
}
.panel-title {
    line-height: 20px;
    font-size: 12px;
}
.panel-title .accordion-toggle {
    margin: -10px -15px;
    padding: 10px 15px;
}
.panel-title .accordion-toggle.accordion-toggle-styled .fa:before {
    content: '\f056'}
.panel-title .accordion-toggle.accordion-toggle-styled.collapsed .fa:before {
    content: '\f055'}
.panel-title .pull-right {
    line-height: 20px;
}
.panel-toolbar {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
    background: #fff;
}
.panel-toolbar+.form-control {
    margin: -1px 0 0;
    border-right: none;
    border-left: none;
}
.panel-group .panel {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.form-control+.panel-footer {
    border-top: none;
}
.panel-body {
    padding: 15px;
}
.panel-body.no-border {
    border: none!important;
}
.panel-body.no-padding, .panel-body.panel-form, .panel-body.panel-full-width, .panel-body.panel-table {
    padding: 0!important;
}
.panel-body.with-table>.table {
    border: 0;
    margin: 0;
}
.panel-body.with-table>.table tr:last-child td, .panel-body.with-table>.table tr:last-child th {
    border-bottom: 0;
}
.panel-default>.panel-heading+.panel-collapse .panel-body {
    border-top: 1px solid #eee;
}
.panel-footer {
    background: #fff;
    border-top: 1px solid #eee;
}
.panel .tab-content {
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
.panel-default>.panel-heading {
    background: #fafafa;
}
.panel-danger>.panel-heading, .panel-info>.panel-heading, .panel-inverse>.panel-heading, .panel-primary>.panel-heading, .panel-success>.panel-heading, .panel-warning>.panel-heading {
    color: #fff;
}
.panel-inverse>.panel-heading {
    background: #242a30;
}
.panel-success>.panel-heading {
    background: #008a8a;
}
.panel-warning>.panel-heading {
    background: #c47d15;
}
.panel-danger>.panel-heading {
    background: #cc4946;
}
.panel-primary>.panel-heading {
    background: #2a72b5;
}
.panel-info>.panel-heading {
    background: #3a92ab;
}
.panel.panel-expand {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    overflow: hidden;
    z-index: 1080;
}
.panel-expand .height-full, .panel-expand .height-lg, .panel-expand .height-md, .panel-expand .height-sm, .panel-expand .height-xs {
    height: 100%!important;
}

.alert.song-list{
    margin-top: -10px;
}
.alert {
    border: none;
    border-radius: 0px!important;
}
.alert.alert-success {
    background: #66C6C4;
    color: #00ACAB;
}
.alert.alert-info {
    background: #93cfe5;
    color: #029BC4;
}
.alert.alert-danger {
    background: #f8b2b2;
    color: #C43D3D;
}
.alert.alert-warning {
    background: #ffead0;
    color: #E5A055;
}

.alert.alert-inverse{
  background-color: #2D353C;
  color: white;
}

.alert.alert-default{
  background-color: #B6C2C9;
  color: #97A2A8;
}

.note {
    margin-bottom: 20px;
    padding: 15px;
    border-left: 3px solid;
}
.note.note-success {
    border-color: #4a8564;
    background: #b0ebca;
    color: #3c763d;
}
.note.note-success h1, .note.note-success h2, .note.note-success h3, .note.note-success h4, .note.note-success h5, .note.note-success h6 {
    color: #3c763d;
}
.note.note-danger {
    border-color: #986e6e;
    background: #fbd1d1;
    color: #a94442;
}
.note.note-danger h1, .note.note-danger h2, .note.note-danger h3, .note.note-danger h4, .note.note-danger h5, .note.note-danger h6 {
    color: #a94442;
}
.note.note-info {
    border-color: #587c89;
    background: #bee2ef;
    color: #31708f;
}
.note.note-info h1, .note.note-info h2, .note.note-info h3, .note.note-info h4, .note.note-info h5, .note.note-info h6 {
    color: #31708f;
}
.note.note-warning {
    border-color: #9d9080;
    background: #fff2e3;
    color: #8a6d3b;
}
.note.note-warning h1, .note.note-warning h2, .note.note-warning h3, .note.note-warning h4, .note.note-warning h5, .note.note-warning h6 {
    color: #8a6d3b;
}

/* CUSTOM */
.navbar{
  border-radius: 0px!important;
  border-bottom: 1px solid black;
  margin-bottom: 0px!important;
}

.navbar-blue{
  background-color: #151E23;
}

.navbar-brand{
  padding-top: 14px;
  width: 225px
}

.main-content{
  margin-top: 100px;
  margin-left: 200px;
}
/* Side Navigation */

@media(min-width:768px) {
  .side-nav {
    border: none;
    border-radius: 0;
    overflow-y: auto;
    background-color: #2D353C;
    bottom: 0;
    overflow-x: hidden;
    padding-bottom: 40px;
    color: white;
    height: 100%;
  }

  .side-nav>li{
    width: 100%;
  }

  .side-nav>li>a {
      width: 100%;
      color: #9D9D9D;
  }

  .side-nav li a:hover,
  .side-nav li a:focus {
      outline: none;
      background-color: #394149 !important;
      color: white;
  }
}

.sidebar{
  position: fixed;
  width: 220px;
  z-index: 100;
  height: 100%;
  margin-top: 50px;
}
.side-nav>li>ul {
    padding: 0;
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    color: white;
}

.side-nav>li>ul>li>a:hover {
    color: #fff;
}

.content-col{
  padding-left: 14%;
}

.player-skin{
  background-color: #F8F8F8;
  border-color: #E7E7E7;
  z-index: 3; 
}

.player-position{
  background-color: #BEC3CC;
  position: fixed;
  margin-top: 50px;
  margin-left: 190px;
  width: 100%;
}

.player-wrapper{
  padding: 15px;
  width: 85%;
}

.player-control{
  cursor: pointer;
  font-size: 15px;
}

.player-control :hover{
  cursor: pointer;
  color: #00acac;
  font-size: 15px;
}

.small-cover{
  width: 50px;
}

.bottom-small-space{
  margin-bottom: 10px;
}

.fade {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
}
.fade.in {
    filter: alpha(opacity=100);
}

.pointer{
  cursor: pointer;
}

.odd-row{
  background: #CCD2D6;
}