/* output remove added content button */
output span {display: inline; float: right; max-height: 10px;}
output span {background-color: transparent; padding: none; border: none; outline: none;}
output span i {font-size: 18px !important;}
output span i:hover, output span button i:active, output span button i:focus {color: #ff9800;}


/* ---------------------------------------*/
/* --------------- Forms ---------------- */
/* ---------------------------------------*/

textarea[type="text"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
 color: #FAFAFA;
 border-color: rgba(255, 152, 0, 0.5);
 box-shadow: 0 1px 1px rgba(255, 183, 77, 0.075) inset, 0 0 8px rgba(255, 183, 77, 0.5);
 outline: 0 none;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}

label {font-size: 10px;text-transform: uppercase;
letter-spacing: 1px;color:#999999;}

.input-dark,
.input-dark input,
.input-dark label,
.input-dark select,
.input-dark textarea {
 background-color: #424242;
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: 2px;
 display: table-cell;
 min-width: 100%;
 padding: 8px;
 color: #999999;
 -webkit-box-shadow: inset 1px 1px 2px 1px rgba(33,33,33,0.5);
-moz-box-shadow: inset 1px 1px 2px 1px rgba(33,33,33,0.5);
box-shadow: inset 1px 1px 2px 1px rgba(33,33,33,0.5);
}


::-webkit-input-placeholder {
   color: rgba(153, 153, 153, 0.5) !important;
}
:-moz-placeholder { /* Firefox 18- */
   color: rgba(153, 153, 153, 0.5) !important;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(153, 153, 153, 0.5) !important;
}
:-ms-input-placeholder {
   color: rgba(153, 153, 153, 0.5) !important;
}

/* ---------------------------------------*/
/* ------------ input + btn ------------- */
/* ---------------------------------------*/
/* used in join-company.html */

/* Shortcode input & button */
/* used in company-join and users (add-user modal) */
.btn-shortcode {
  background-color: #26A69A;
  border: 1px solid #212121;
}

.btn-shortcode:hover,
.btn-shortcode:focus,
.btn-shortcode:active {
  color: #26A69A;
  background-color: #424242;
}

.shortcode-formgroup {
  margin-top: 5px;
}

.input-shortcode {
  background-color: #424242;
  border: 1px solid #212121;
  border-radius: 2px;
  text-align: center;
  color: #999999;
  -webkit-box-shadow: inset 1px 1px 2px 1px rgba(33,33,33,0.5);
-moz-box-shadow: inset 1px 1px 2px 1px rgba(33,33,33,0.5);
box-shadow: inset 1px 1px 2px 1px rgba(33,33,33,0.5);
}



/* ---------------------------------------*/
/* -------- profile pic / logo ---------- */
/* ---------------------------------------*/

/* profile picture preview alignment */
.profile-picture-edit {
  display: inline;
  text-align: center;
}
.profile-picture {
  display: block;
  margin: auto;
  margin-bottom: 10px;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
}

.client-logo-preview {
  margin-bottom: 10px;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
}


/* ---------------------------------------*/
/* -------- social media forms ---------- */
/* ---------------------------------------*/

/* Social Icons align left */
.input-social {
  float: left;
  margin-left: 10px;
  margin-top: -24px;
  position: relative;
  z-index: 2;
}

/* ---------------------------------------*/
/* ---------- richtext input ------------ */
/* ---------------------------------------*/

/* container for richtext buttons and form input */
.richtext-container{border:1px solid #212121;background-color: #212121;padding-top:8px;}

/* buttons for richtext input forms */
.btn-richtext{background-color: transparent;border:none; padding: 4px 4px 10px 4px;}

/* richtext preview collapse */
.richtext-preview{border-top:1px solid #424242; border-bottom:1px solid #424242;padding: 4px 10px 4px 10px;}


/* ---------------------------------------*/
/* ----------- input switch ------------- */
/* ---------------------------------------*/

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The box around the slider */
.switch {
  position: relative;
  width: 100%;
  height: 54px;
  border-radius: 2px;
}

/* The checkbox */
.slider {
  border-radius: 2px;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-left: 4px;
  background-color: #424242;
  white-space: nowrap; /* one line paragraph */
  overflow:hidden; /* for older browsers */
  -webkit-transition: .4s;
  transition: .4s;
}

.slider > p > i {
  color: #424242;
  padding-right: 4px;
  font-size: 18px;}
.slider > p > span{
  position: relative;
  top:-10;
  font-weight: normal;}
.slider > p > span.row-3 {top:-20;}

/* The checkbox when checked */
input:checked + .slider {
  background-color: #212121;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
}
input:checked + .slider > p > i{color:#FAFAFA;}


/* ---------------------------------------*/
/* --------- Bootstrap Select ----------- */
/* ---------------------------------------*/

/* Bootstrap Select - Multi Select - Dropdown Menu */
.bootstrap-select > .dropdown-menu,
.bs-actionsbox,
.bootstrap-select > .dropdown-menu > ul,
.bootstrap-select > .dropdown-menu > ul > li {
  background-color: #424242;
  color: #999999;
}

/* Select Dropdown Menu Button */
.bootstrap-select > button, .bootstrap-select > button:hover,
.bootstrap-select > button:active, .bootstrap-select > button:focus {
  color: #999999;
}

/* Bootstrap Select - Select / Deselect all - buttons */
button.bs-select-all, button.bs-deselect-all {
  background-color: transparent;
  color: #26A69A;
  border: none;
}

/* Select / Deselect hover, active, focus */
.bs-actionsbox > div > .btn-default:hover,
.bs-actionsbox > div > .btn-default:focus,
.bs-actionsbox > div > .btn-default:active {
  background-color: #424242;
  color: #FFA726;
}

/* max width bootstrap select adding scrollbar */
.bootstrap-select > .dropdown-menu > ul {
  overflow: auto;
  max-width: 100px;
}

/* Bootstrap Select - Dropdown Menu Options */
.bootstrap-select > .dropdown-menu > ul > li span {
  background-color: transparent;
  color: #999999;
}
.bootstrap-select > .dropdown-menu > ul > li > a:hover {
  background-color: #212121;
}

/* Bootstrap Select - Selected option Checkmark */
.bootstrap-select > .dropdown-menu > ul > li span.check-mark {
  color: #26A69A;
  background-color: transparent;
}

/* Bootstrap Select - Disabled select dropdown option */
.bootstrap-select > .dropdown-menu > ul > li.disabled {
  background-color: #323232;
}
.bootstrap-select > .dropdown-menu > ul > li.disabled > a span.check-mark {
  color: transparent;
}



/* ---------------------------------------*/
/* --------- bootstrap toggle ----------- */
/* ---------------------------------------*/
/* check */
/* bootstrap toggle on/off toggle button */
.toggle.ios, .toggle-on.ios, .toggle-off.ios {
  border-radius: 20px;
  margin-top: 10px;
  margin-bottom: 10px;}

/* bootstrap toggle handle */
.toggle.ios .toggle-handle {
  border-radius: 30px;}

/* bootstrap toggle on button */
.toggle-on, .toggle-on:hover, .toggle-on:focus, .toggle-on:active {
  background-color: rgba(0, 150, 136, 0.8);}

/* bootstrap toggle off button */
.toggle-off.btn, .toggle-off.btn:hover {
  background-color: #424242;
  color: #fafafa;}

/* bootstrap toggle - toggle button */
.toggle.btn {
  border: none;
}

::-webkit-input-placeholder {
   color: rgba(153, 153, 153, 0.5) !important;
}
:-moz-placeholder { /* Firefox 18- */
   color: rgba(153, 153, 153, 0.5) !important;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: rgba(153, 153, 153, 0.5) !important;
}
:-ms-input-placeholder {
   color: rgba(153, 153, 153, 0.5) !important;
}

/* extra styling */

#ui-id-1,
.ui-menu {
    background-color: #424242;
    color: #999999;
    height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    width:260px;
}

.ui-state-active 
{
    background: #303030 !important;
    border: none !important;
}

.hide
{
    display: none;
}

/*Edit: Hassan Alsaadi / 18/07/2017 */
/* removes the default input file button */
input[type="file"] {
  display: none;
}

/* output styling */
.output-display {
  font-style: italic;
  color: #999999;
}

.form-control[readonly] {
    background-color: #424242;
}