/* ? */

#content__layout__holder {
  max-width: 250px;
  float: right;
}
@media (max-width: 767px) {
  /* Layout */
  #content__layout__holder {
    padding-top: 20px;
  }
}

.btn-default {
  background-color: white !important;
  border-color: #ccc !important;
}

.btn-btn {
  background-color: #d2d6de !important;
  border-color: #ccc !important;
}

/* ? */

textarea {
  background-color: #222 !important;
  color: white !important;
}
#tab__list input[type='text'], 
#tab__list .box-header select, 
#tab__reports input[type='text'] {
  width: 200px; 
  float: left;
}
.box.box-primary {
  border-top-color: white;
}
.btn-file { position: relative; overflow: hidden; }
.btn-file input[type=file] {
  position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; 
  font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; 
  outline: none; background: white; cursor: inherit; display: block; 
}
:not(h1):not(h2):not(h3):not(i) {
  font-size: 16px !important; 
}
/* IMPORTANT */
.CodeMirror span {
  font-size: 14px !important; 
}
.content-wrapper, .right-side {
  background-color: #f4f4f4;
}
.messages-menu .dropdown-menu {
  /*max-width: 155px;*/
}
.content-wrapper textarea,
.content-wrapper select,
.content-wrapper table {
  background-color: #222 !important;
  color: #DDDDDD !important;
}
/* fix .. */
/*
:not(.selectize-input) > input[type='text'] {
  background-color: #222 !important;
  color: #DDDDDD !important;
}
*/

#content__input__html__file__create__text, 
#content__input__css__file__create__text,
#content__input__js__file__create__text,
#content__admin__select__create__text {
  background-color: #222 !important;
  color: #DDDDDD !important;
}

#tab__option table {
  background-color: rgba(0, 0, 0, 0) !important;
  color: rgb(51, 51, 51) !important;
}
#content__calendar table {
  background-color: white !important;
  color: black !important;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
  background-color: #444;
}
#dashboard .info-box {
  box-shadow: 0 0;
}
#dashboard .info-box .fa {
  font-size: 45px;
  margin-top: 22px;
}
#dashboard a {
  color: inherit;
}
/* Header */
.main-header .navbar .nav>li>a>.label {
  padding: 1px;
}
td a {
  display: block; height: 100%;
}
td input:not([disabled]) {
  /*width: 100% !important;*/
  background-color: #222 !important;
  color: white !important;
}
span[data-id] {
  display: block;
}
::-webkit-input-placeholder {
  color: #777777 !important;
}
.CodeMirror { width: 100%; height: 600px !important;}
/* For lists */
/*#content__list_wrapper .col-sm-12 { padding: 0; }*/
/* chartist */
.ct-chart-line .ct-label.ct-horizontal.ct-end {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*
  transform: rotate(-30deg);
  transform-origin: 100% 0%;
  */
  transform: rotate(-45deg);
  transform-origin: 100% 600%;
  text-align: right;
  max-height: 1.5em;
  min-width: 100px;
  /*max-width: 100px;*/
}
.CodeMirror-cursor {
  border-left-color: white !important;
}
/* import export */
.btn-file { position: relative; overflow: hidden; }
.btn-file input[type=file] {
  position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; 
  font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; 
  outline: none; background: white; cursor: inherit; display: block; }
.logo, .main-sidebar {
  width: 150px !important;
}
@media (min-width: 767px) {
  .content-wrapper, 
  .main-header > .navbar  {
    margin-left: 0px !important;
  }
}
iframe { width:  100%; height: 595px; border: 0px;  }
/* selectize .. later */
.selectize-input > input {
  background-color: white !important;
}

/* Modal 
.modal {background: none !important;}
.modal-backdrop {background: none !important;}
*/

/* Top */

.content__input__top, .content__output__top {
  display: table;
  width: 100%;
  height: 44px;
}

.content__input__top__create, .content__output__top__urlhash-button,
.content__input__top__file,   .content__output__top__urlhash,
.content__input__top__ext,    .content__output__top__ext,
.content__input__top__destroy
{
  display: table-cell;
  vertical-align: top;
}

.content__input__top__create, .content__output__top__urlhash-button {
  width: 50px;
}

.content__input__top__file, .content__output__top__urlhash {
  float: left;
  width: 100%;
  padding-right: 13px;
}

.content__input__top__ext, .content__output__top__ext {
  width: 120px;
}

.content__input__top__destroy {
  width: 50px;
}

@media (max-width: 767px) {
  .content__input__top, .content__output__top {
    display: block;
  }
  
  .content__input__top__file, .content__output__top__urlhash {
    padding-top: 8px;
    padding-right: 0;
  }
  
  .content__input__top__ext, .content__output__top__ext {
    float: left;
    width: 100%;
  }
  
  .content__input__top__destroy {
    float: right; 
    padding-bottom: 8px;
  }
}

/* Bottom */

.content__input__bottom, .content__output__bottom {
  display: table;
  width: 100%;
  height: 44px;
  margin-top: -12px;
  margin-bottom: -8px;
}

.content__input__bottom__import-export, .content__output__bottom__import-export,
.content__input__bottom__format,        .content__output__bottom__result,
.content__input__bottom__lint,          .content__output__bottom__lint,
.content__input__bottom__mode,          .content__output__bottom__mode
{
  display: table-cell;
  vertical-align: top;
}

.content__input__bottom__import-export, .content__output__bottom__import-export {
  width: 94px;
}

.content__input__bottom__format, .content__output__bottom__result {
  width: 120px;
}

.content__input__bottom__lint, .content__output__bottom__lint {
  float: left;
  width: 100%;
}

.content__input__bottom__mode, .content__output__bottom__mode {
  width: 185px;
}

@media (max-width: 767px) {
  .content__input__bottom, .content__output__bottom {
    display: block;
  }
  
  .content__input__bottom__format, .content__output__bottom__result,
  .content__input__bottom__mode,   .content__output__bottom__mode   {
    float: left;
    width: 100%;
    padding-top: 8px;
  }
  
  .content__input__bottom__lint, .content__output__bottom__lint {
    width: 100%;
    padding-top: 8px;
    padding-right: 0;
  }
}

/* ? modal edit */

.content__admin__top__select__edit, 
.content__admin__top__select__clone,
.content__admin__top__select__replace {
  display: table;
  width: 100%;
  margin-bottom: 15px;
}

.content__admin__top__select__edit__left, 
.content__admin__top__select__clone__left,
.content__admin__top__select__replace__left {
  display: table-cell;
  /*vertical-align: top;*/
  width: 100px;
}

.content__admin__top__select__edit__left label,
.content__admin__top__select__clone__left label,
.content__admin__top__select__replace__left label {
  float: right;
  padding-right: 30px;
}

.content__admin__top__select__edit__mid, 
.content__admin__top__select__clone__right,
.content__admin__top__select__replace__right {
  display: table-cell;
  vertical-align: top;
  float: left;
  width: 100%;
}

.content__admin__top__select__edit__right {
  display: table-cell;
  vertical-align: top;
  width: 1px;
  padding-left: 14px;
}

.content__admin__top__select__clone__mid,
.content__admin__top__select__replace__mid {
  display: table-cell;
  vertical-align: top;
  width: 1px;
  padding-right: 14px;
}

/* ? */

.content__admin__top, .content__admin__bottom {
  display: table;
  width: 100%;
  height: 44px;
}

.content__admin__bottom {
  margin-top: 3px;
  margin-bottom: -7px;
}

.content__admin__top__left,
.content__admin__top__mid,
.content__admin__top__right__aux,
.content__admin__top__right,
.content__admin__bottom__import-export,
.content__admin__bottom__format,
.content__admin__bottom__space,
.content__admin__bottom__view
{
  display: table-cell;
  vertical-align: top;
}

.content__admin__top__left, 
.content__admin__bottom__import-export {
  width: 94px;
}

.content__admin__top__right__aux {
  width: 94px;
}

.content__input__top__mid, .content__admin__bottom__space {
  float: left;
  width: 100%;
}

.content__admin__bottom__format, .content__admin__bottom__view {
  width: 120px;
}

.content__admin__top__right {
  float: right;
}

@media (max-width: 767px) {
  .content__admin__top, .content__admin__bottom {
    display: block;
  }
  
  .content__admin__top__mid {
    float: left;
    width: 100%;
    padding-top: 8px;
    padding-right: 0;
  }
  
  .content__admin__top__right__aux,
  .content__admin__bottom__format,
  .content__admin__bottom__view {
    float: left;
    width: 100%;
  }
}