@import url('globals.css');
/*REGULAR INPUT*/

/* NXT input type design */
/* required, auto loading:
 * elements-design.css
*/

/*----------------------------------------------------------------------------*/
/*text inputs*/


input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="submit"]) {
	padding:5px;
	margin:0px 5px;
	border: 1px solid #bbb;
	background: #F9F9F9;
	border-radius: 3px;
	width:100px;
	outline: none;
	transition:all .2s;
}
input:not([type="range"]):not([type="file"]):not([type="checkbox"]):not([type="submit"]):hover , input.active {
	background:#FFF;
	box-shadow: 0px 1px 1px #111;
	width:140px;
}
input.non-expand, input.short:not(.non-expand):hover {
	width:100px !important;
}
input.long {
	width:170px !important;
}
input.short {
	width:60px !important;
}

input:not([type="range"]):not([type="file"]):active , input.active {
	border:1px solid var(--primary);
}

input[disabled]:not([type="range"]):not([type="file"]):not([type="checkbox"]):hover , input.active {
  border:1px solid #a1a1a1;
  cursor: default;
  background:#F1F1F1;
}

/*NEW STYLE INPIUT */
input[nxt]:not([type="range"]):not([type="file"]):not([type="checkbox"]) {
    border: none !important;
    width: 180px !important;
    padding: 10px;
    border-bottom: 3px solid var(--primary) !important;
    background: transparent !important;
    border-radius: 0px;
    box-shadow: none;
}
/*----------------------------------------------------------------------------*/
/*status AKA progressbar*/
status {
	height:19px;
  margin:0px;
  border:1px solid #444;
  display: inline-block;
  background:#DDD;
  transition:all .2s;
	border-radius: 4px;
}


status::before {
  content:attr(value) ;
  position:absolute;
  opacity: 0;
  z-index: -1;
  margin-top:0px;
  transition:all .2s;
  height:35px;
  font-size:16px;
  font-family: monospace;
  color:white;
  margin-left:10px;
	border-radius: 4px;
}
status:hover::before {
  opacity: 1;
  z-index: 1;
}
status * {
  display:block;
    height:19px;
  background:var(--primary);
  border-right:9px solid var(--dark-primary);
  transition:height .2s, width .9s linear ;
}

/*----------------------------------------------------------------------------*/
/*CSS RANGE*/
input[type=range] {
    -webkit-appearance: none;
    width: 150px;
}
input[type=checkbox][nxt] {
display:none;
}
label[nxt] {
	transition:.4s;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height:3px;
    background:var(--primary);
    border-radius: 1px;
    transition:background .2s;
    cursor: pointer;

}
input[type=range]:active {
  cursor:e-resize !important;
}
input[type=range]::-webkit-slider-runnable-track:hover {
  background: #AAA;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 13px;
    width: 13px;
    background:var(--primary);
    margin-top:-5px;
    border-radius: 50%;
    transition:all .2s;
}
input[type=range]::-webkit-slider-thumb:hover {
  height: 19px;
  width: 19px;
  margin-top:-8px;
}
input[type=range]:focus::-webkit-slider-thumb {
  height: 19px;
  width: 19px;
  margin-top:-8px;
}

input[type=range]:focus {
    outline: none;
    padding:15px,
}

.fill-card {
  margin:0px -25px;
  display: block;
  width:calc( 100% + 18px );
}

textarea ,.textarea {
  outline:none;
  padding:15px;
  border:1px solid #DDD;
      font-family: 'Open Sans', sans-serif;
}
input[type=color] {
  height:17px;
}

/* SECONDARY */
input[type=range][secondary]::-webkit-slider-thumb,input[type=range][secondary]::-webkit-slider-runnable-track  {
	background:var(--secondary) !important;
}


/*----------------------------------------------------------------------------*/
/*0 - 1 checkbox*/ /*multiselect radio*/
checkbox .material-icons ,radio .material-icons {
	font-size: 22px;
	vertical-align: -5px;
}
checkbox ,radio{
 padding:7px 10px 7px 0px;
 margin:3px;
 border-radius: 3px;
 border:1px solid transparent;
 user-select: none;
 transition:all .2s;
 cursor: pointer;
}
checkbox:hover ,radio:hover{
border:1px solid #888;
}
checkbox[disabled] .material-icons, radio[disabled] .material-icons {
	color:#999;
}
checkbox[disabled]  {
 border:1px solid #DDD;
 color:#999;
 cursor: not-allowed;
}
radio[checked="true"] {
    border:1px solid #AAA;
}
radio[checked="true"] .material-icons  {
    color:var(--primary);
}
/*----------------------------------------------------------------------------*/
/*A - B checkbox*/
switch {
	margin:10px 5px;
	display: inline-block;
	border:5px solid #DDD;
	border-left:22px solid #DDD;
	border-radius: 3px;
  background:#666;
	font-family: 'Montserrat', sans-serif;
	color:white;
	padding:10px 15px;
	transition:all .2s;
	text-align: center;
	cursor: pointer;
	user-select:none;
	font-size:14px;
}
switch[checked="true"] {
	border:5px solid #DDD;
	border-right:22px solid #DDD;
	background:var(--dark-primary);

}
switch span {
	display: block;
}
switch span:last-child {
	margin-top:-17px;
}
switch[checked="false"] span:first-child , switch[checked="true"] span:last-child {
	opacity:0;
}


/*----------------------------------------------------------------------------*/
/*BUTTONS*/
button[real], input[real] , button[nxt]{
	cursor:pointer;
    border-radius: 3px;
    box-shadow:0px  1px  2px #666 ;
    background: var(--dark-primary);
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 300;
    padding: 10px 16px;
    border: none;
    transition:all .3s;
    outline:none;

}
button[real] .material-icons , input[real] .material-icons, button[nxt] .material-icons{
  padding: 0;
  font-size: 20px;
  margin: -2px -2px -4px 6px;
  padding-top: 0px;
  vertical-align: -5px;
}
button[disabled][real] , button[disabled][nxt] {
  cursor: default;
 box-shadow:0px  1px  2px #666 ;
}
button[real]:hover, input[real]:hover,button[nxt]:hover {
    box-shadow:0px  2px  5px #666 ;
     background: var(--primary);
		 transition:all .2s;
    cursor: pointer;
}
button[real]:active  , input[real]:active, button[nxt]:active {
    box-shadow: 0px 2px 3px #333 inset;
}

button[flat] {
  border:0px;
  background:rgba(255,255,255,.8);
  border-radius: 3px;
  font-family: 'Montserrat';
  padding:6px;
  cursor: pointer;
  font-size:12px;
  transition:.2s ;
}
button[flat]:hover {
  background: #ff9800;
}
/*SCROLLBARS*/

:root {
	--bg: #2C2F33;
  --dark-bg: #23272A;
  --light-bg: #99AAB5;
}

button[nxt] , label>div {
	box-shadow:0px  1px  2px  #222 !important;
	background:var(--bg);
	border:1px solid var(--dark-bg);
	padding:10px;
	font-size:14px;
}
button[nxt]:hover, label>div:hover {
		background:var(--primary);
		border:1px solid var(--bg);
}
button[nxt]:active, label>div:active {
	box-shadow:0px  1px  1px  #222 inset !important;
	background:var(--primary);
}

/*-- GROUPING THINGS TOGETHER --*/

group {
	display: inline-block;
	box-shadow:0px  1px  1px  #222 !important;
	margin-left:20px;
}
group button[nxt], group * {
	margin:0px -3px;
	border-radius:0px !important;
	box-shadow:0px 0px 0px black !important;
}
group button[nxt]:first-child, group *:first-child{
	border-top-left-radius: 3px !important;
	border-bottom-left-radius: 3px !important;
}
group button[nxt]:last-child, group *:last-child  {
	border-top-right-radius: 3px !important;
	border-bottom-right-radius:3px !important;
}

group[vertical]>* {
	display: block;
}
group[vertical] input {

	margin:-2px -1px !important;
}
group[vertical] {
	margin-left:0px;
	display:inline-block;
	box-shadow: 1px 1px 3px #666 !important;
	border-radius:4px !important;
}
group[vertical] button[nxt]:first-child,
group[vertical] *:first-child {
	border-radius:0px !important;
	border-top-left-radius: 3px !important;
	border-top-right-radius: 3px !important;
}
group[vertical] button[nxt]:last-child,
group[vertical] *:last-child  {
	border-radius:0px !important;
	border-bottom-left-radius: 3px !important;
	border-bottom-right-radius:3px !important;
}

/** MESSAGE BOX  - NEW **/
/*multiple implementations*/

msg , message, p[message]{
	display: none;
}
msg[open] , message[open], p[message][open]{
	display: block;
	border-radius:4px;
	border:1px solid #F57C00;
	border:1px solid var(--dark-primary);
	background:#FFA726;
	background:var(--primary);
	color:white !important;
	padding:0px 15px 20px 15px;
}

/* SCROLLBARS */
/*----------------------------------------------------------------------------*/
/*RATING CHOICE JS REQ*/
selector {
   transition:all .1s;
   color:white;
   box-shadow: 0px 1px 2px #666;
   display: inline-block;
}

selector span {
   padding:12px 15px;
   text-align: center;
   display: inline-block;
   color:#222;
    transition:all .1s linear;
   min-width: 20px;
   cursor:pointer;
}
selector span:hover {
   background:#DDD;
}
selector span.on:hover {
   background: var(--dark-primary);
   color:white;
}
selector span.on {
   margin: -8px -5px;
   padding: 20px;
   background: var(--primary);
   box-shadow: 0px 3px 2px #999;
}