/* NXT elements design */
/* required: none.     */
/* tied to: colors.css */

/*cards, chips, modal windows and other elements*/


/*floating boxes*/
.floatbox {
    padding: 5px;
    color: #f1f1f1;
    margin: 10px;
    padding: 5px;
    color: #fff;
    margin: 10px;
    background: #9C27B0;
    margin: 13px;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #44444444;
}



/* FONT , BASE ICONS AND COLORS*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&subset=latin-ext');
@import url('colors.css');


/* Defining Z-indexes */
:root {
  --z-1:0px 2px 2px #999;
}

.bg-primary          {  background:var(--primary)       !important;   }
.color-primary       {  color:     var(--primary)       !important;   }
.bg-dark-primary     {  background:var(--dark-primary)  !important;   }
.color-dark-primary  {  color:     var(--dark-primary)  !important;   }
.bg-light-primary    {  background:var(--light-primary) !important;   }
.color-light-primary {  color:     var(--light-primary) !important;   }

body {
    margin: 0;
    padding: 0;
    background: white;
    font-family: 'Open Sans', sans-serif;
}

h1, h2 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
}

small {
    font-size:16px !important;
    color:#333;
}

container, .card {
    display: block;
    margin: 50px auto;
    max-width: 800px;
    box-shadow: 0px 2px 4px #888;
    transition: all .4s;
    border-radius: 4px 4px 3px 3px;
}
.full-covered-active .card {
    border-radius: 5px 5px 3px 3px;
}

/* CHIP -> To be changed */
.chip {
    display: block;
    padding: 20px;
    background: #FAFAFA;
    transition: all .2s;
}

.chip:hover {
    background: #DDD;
    cursor: pointer;
}

.chip .material-icons {
    vertical-align: -7px;
}

.chip b {
    display: block;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

.chip.title {
    color: white;
    background: var(--primary);
    border-radius: 3px 3px 0px 0px;
    border: none;
    font-family: 'Montserrat', sans-serif;
}
hr {
    height: 1px;
    border: none;
    background: #888;
}

/*MATERIAL ICONS*/
.material-icons {
    padding: 12px;
    cursor: pointer;
}

.material-icons::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 100%;
}

.material-icons:hover::before {
    animation-delay: 5s;
    animation: blow .3s ease-out;
    animation-delay: 5s;
}

.material-icons:active::before {
    animation-delay: 0s;
}

@keyframes blow {
    0% {
        margin-left: 12px;
        margin-top: 12px;
        width: 0px;
        height: 0px;
        background: rgba(100, 100, 100, 0.6);
    }
    100% {
        margin-left: -4px;
        margin-top: -4px;
        width: 32px;
        height: 32px;
        background: rgba(200, 200, 200, 0.3);
    }
}


/*SIDE MENU*/
.omenu .material-icons {
    font-size: 20px;
    padding: 0;
    float: right;
}

.omenu:not( :hover) .material-icons {
    color: #444;
}

.importantIcon.material-icons {
    border-radius: 50%;
    border: 1px solid #DDD;
    color: #444;
    transition: all .2s;
    padding: 10px;
}

.importantIcon.on {
    background: var(--primary);
    border: 1px solid #999;
    color: white;
}
.importantIcon.material-icons:not([class~="-"]):not(.on) {
  background: transparent !important;
}


/*FLOATING ACTION BUTTON*/

.fab,
.fab-small {
    padding: 17px;
    text-align: right;
    border-radius: 100%;
    box-shadow: 0px 2px 2px #999;
    background: var(--dark-primary);
    transition: all .2s;
}

.fab-small {
    padding: 14px !important;
    font-size: 16px !important;
}

.fab:active,
.fab-small:active {
    box-shadow: 0px 4px 8px #777;
}

.h1-connect-fab {
    position: relative;
    margin-top: -22px;
    margin-left: calc(90% - 24px)/*in order to not overflow;
     */;
}

.h1-connect-fab-small {
    position: absolute;
    margin-top: -14px;
    margin-left: -125px;
}

/*CARD COLORING*/
/*to be replaced with mat1900*/

h1.continued {
   border-radius: 0px !important;
}
.card h1.covered , h1.covered, .covered{
    margin: -10px -25px;
    color: #222;
    padding: 15px 20px;
    border-radius: 4px 4px 0px 0px;
    background: white;
    text-shadow: 0px 1px 1px #666;
    border-bottom: 1px solid #aaa;
}
holder h1.expand.covered {
               background-size: 100%;
               padding-top: 210px;
               color: white !important;
               font-weight: 400;
}

.card h2.covered.subtitle ,  .covered.subtitle ,.covered.subtitle{
  border-radius: 0px;
   margin: 10px -25px;
    padding: 14px 20px;
    background: #81C784;
    color: #222;
}

.fab.white {
   color:#222;
   background:white;
   box-shadow: 0px 2px 3px #999;
   float:right;
}
.blue {
    background:#2196F3 !important;
    color:white !important;
}

/*toolbar*/
.toolbar {
    user-select: none;
    margin: 10px -25px 0px -25px;
    background: #FF9800;
}

.toolbar .material-icons {
    transition: all .2s;
    color: white;
}

.toolbar .material-icons:hover {
    background: #42A5F5;
}

.toolbar span[separator] {
    height: 49px;
    display: inline-block;
    width: 1px;
    background: white;
    position: absolute;
}



/*COLOR WRAPPER DOCUMENT*/
.color-wrapper {
   padding:40px;
   font-size:20px;
}

.color-wrapper.divided2 div{
   width:calc(50% - 40px);
   display: inline-block;
   background:#536DFE;
   padding:40px;
   margin:-40px;
   text-align: center;
   color:white;
   transition:all .2s;
   cursor: pointer;
   font-size:20px;
}
.color-wrapper.divided2 div:hover {
   background:#8C9EFF;
}
.color-wrapper.divided2 div:first-child{
   margin-right:0;
}
.color-wrapper.divided2 div:last-child{
   margin-left:0;
}


/* TOAST NOTIFICATIONS */
toast {
    position: fixed;
    right: 15px;
    bottom:-100px;
    opacity: 0;
    background:#263238;
    color:#CFD8DC;
    padding:10px 15px;
    border-radius: 4px;
    border:1px solid #222;
    font-family: 'Montserrat';
    box-shadow: 0px 3px 4px #CFD8DC;
    z-index: 95;
    transition:all .4s;
}
toast.on {
  bottom:15px;
  opacity: 1;
  margin: 0 auto;

}
toast action *, toast action , dialog[nxt] action button {
    text-transform: uppercase;
    font-size:13px;
    font-weight: bold;
    color:#2196F3;
    margin-left:10px;
    vertical-align: 1px;
    cursor: pointer;
}
toast action[error]   , dialog[nxt] action button[error]   { color:#F44336; }
toast action[warning] , dialog[nxt] action button[warning] { color:#FF9800; }
toast action[info]    , dialog[nxt] action button[info]    { color:#B0BEC5; }
toast action[default]    , dialog[nxt] action button[default]    { color:#666; }

@media screen and (min-width: 600px) {
body.toast-desktop toast {
    margin: 0 auto;
    padding: 16px;
    margin-bottom: -25px !important;
    left: calc(40% - 120px) !important;
    right: calc(40% - 120px) !important;
}
}

@media screen and (max-width: 600px) {
  body toast {
    left:0px !important;
    right:0px !important;
    border-radius:0px;
    margin-bottom: -20px !important;
    padding:20px;
  }
}
/*TOGGLE*/
toggle {
    display: inline-block;
    padding:5px;
    cursor: pointer;
    vertical-align: -9px;
}
toggle::before {
       content: '';
       display: block;
       width: 40px;
       height: 10px;
       background: #999;
       border-radius: 5px;
       transition: all .2s;
}
toggle::after {
   content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: #48f;
    background: var(--dark-primary);
    border-radius: 10px;
    margin-top: -15px;
    margin-left:-1px;
    transition:all .2s;
    box-shadow: 0px 2px 2px #999;
}
toggle[disabled]::after {
    background:#666;
}
toggle[disabled]::before {
    background:#ccc;
}
toggle.on::before {
    background: #999;
}
toggle:hover::after {
    box-shadow: 0px 2px 4px #888;
}
toggle.on::after {
    margin-left:21px;
}



/*TABLE*/

table[nxt] {
    border-collapse: collapse;
    border-radius: 4px;
    width:100%;

}
table[nxt] tr:first-child {
    border-radius: 4px;

}
table[nxt] tr td {
    border:1px solid #ddd;
    padding:5px;
}
table[nxt] tr th {
    background:var(--light-primary);
    padding:10px 5px;
}
/**/

code[nxt] {
    border-left:10px solid #444;
    margin:5px -25px;
    background:#ddd;
    padding:5px;
    display: block;
    padding-left:30px;
}


/* =================================
 * == <chip> material design =======
 * == Challanger =================== */

/* Material design CHIPS, different from .chip */
/* added in challanger. */
chip>i {
  font-family: 'Montserrat';
}

chip>i, chip>i.material-icons {
  text-decoration: none;
  font-style: normal;

  color: white;
  margin: -11px;
  width: 29px;
  height: 23px;
  display: inline-block;
  border-radius: 100%;
  vertical-align: 1px;
  text-align: center;
  padding:0px;
  padding-top: 6px;
  margin-top: -7px;
  margin-right: 5px;
}
chip>i.material-icons {
  font-size: 17px;
  vertical-align: -3px !important;
}

chip {
  display: inline-block;
  background:#ddd;
  border-radius: 20px;
  padding:5px 10px;
  font-size:13px;
  color:#111;
  border:1px solid transparent;
  cursor: alias;
  transition:all .2s;
}
chip:hover {
  background:#eee;

}
chip:active {
border:1px solid #ccc;
    cursor: pointer;
    user-select: none;
    box-shadow:0px 0px 2px #ccc inset;
}
chip[close] {
  padding-right:30px;
}
/*closable chips require design-input.js*/
chip[close]::after {
      content: 'close';
      font-family: 'Material Icons';
      display: inline-block;
      border-radius: 100%;
      background: red;
      margin-left: 8px;
      padding: 1px;
      position: absolute;
      text-align: center;
      color: #eee;
      background: #aaa;
      margin-top: 1px;
      font-size: 13px;
      transition: all .2s;
}
chip[close]:hover::after {
  background: #999;
  cursor:pointer;
}

/*DIALOG*/
dialog[nxt][open] {
    border:none;
    border-radius: 4px 4px 2px 2px;
    box-shadow:var(--z-1);
    width: 500px;
    z-index: 99;
    /* margin-top: -942px; */
}
dialog[nxt] div {
  padding:10px;
  max-height: 260px;
  overflow-x: hidden;
  overflow-y: auto;
}
dialog[nxt][open][narrow] {  width: 350px;  }
dialog[nxt][open][wide] {    width: 650px;  }

dialog[nxt][open] action {
  margin:-16px;
  margin-top:15px;
  padding:5px 10px ;
  border-top:1px solid #ccc;
  display: block;
}
dialog[nxt][open] action[color] * {
  color:white !important;
}
dialog[nxt][open] action[color] {
  border:none;
}
dialog[nxt][open] action button {
  border:none;
  background:transparent;
  padding:10px;
  border-radius: 2px;
  cursor: pointer;
  transition:all .2s;
  outline:none;
}
dialog[nxt][open] action button:hover {
  background:#CCCCCC99;
}
dialog[nxt][open] h1 {
  margin: -16px;
  margin-bottom: 10px;
  font-size:28px;
  text-transform: none;
  text-shadow:none !important;
}

dialog::backdrop {
    z-index:99;

    z-index: 100 !important;

}
dialog::backdrop {
    z-index:100;
      transition:.2s all;


}

/* SMALL FOOTER BACKDROP */
footer[nxt] {

}


/*A LINKS*/
a[nxt] {
    color:#222 !important;
    text-decoration: underline;
    padding:1px 6px;
    display: inline-block;
    border-radius:3px;
    transition: all .2s;
}
a[nxt]:hover {
    background:var(--light-primary);
    box-shadow:0px 1px 3px #444 inset;

}
.white-text {
  color:white !important;
}

.omenu.on {
    background:#ddd;
    color: #000;
}
.omenu.on:hover {
    background:var(--primary);
    color: white !important;
}