/* CONTAINERS */

/* Container --> Tile */

.m-ui [m-tile],
.m-ui .m-tile {
  padding: 20px;
}
.m-ui [m-tile] > *,
.m-ui .m-tile > * {
  background-color: var(--m-ultralight-grey);
  border-radius: 30px;
  padding: 30px;
  overflow: hidden;
}

/* DROPDOWNS */


.m-ui [m-dropdown] {
    display: none;
    position: absolute;
    z-index: 5;

      transition: 0s ease-out;
    -webkit-transition: 0s ease-out;
    -moz-transition: 0s ease-out;
    -o-transition: 0s ease-out;
}

.m-ui [m-dropdown] > *:last-child {
  border: none;
}

.m-ui [m-dropdown] > * {
    display: block;
    cursor: pointer;
}


/* POPUPS */

.m-ui [m-popup] {
    position: fixed;
    width: 110vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    text-align: center;
    overflow-y: scroll;
    transition: 0s ease-out;
    -webkit-transition: 0s ease-out;
    -moz-transition: 0s ease-out;
    -o-transition: 0s ease-out;
}

.m-ui [m-popup].dark {
}

.m-ui [m-popup] > content {
    display: inline-block;
    position: relative;
    z-index: 12;
    text-align: left;
}

.m-ui [m-popup] > [m-popup-close] {
    width: 100vw;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 11;
    bottom: 0;
}

/*full size popup*/

.m-ui [m-popup][m-type=full]{

}
.m-ui [m-popup][m-type=full] > content {
  box-shadow: none;
  -weblit-box-shadow: none;
    margin: 0 0 0 -10vw;
    width: 100vw;
    min-height: 100vh;
    min-width: 100vw;
    border-radius: 0;
}



/* Tooltips */

.m-ui [m-tooltip] {
  position: absolute;
  z-index: 3;
  opacity: 0;
  overflow: hidden;
  font-size: 1rem;
  font-family: var(--bold);
  white-space: nowrap;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
}
.m-ui [m-tooltip] > content { 
  cursor: default; 
}
.m-ui [m-tooltip] > content * {
}


.m-ui *:hover > [m-tooltip] { 
  opacity: 1; 
  overflow: visible;

    transform: scale(1);   
    -webkit-transform: scale(1);   
    -moz-transform: scale(1);   
    -ms-transform: scale(1);   
    -o-transform: scale(1);
}


/* NOTIFY */

.m-ui [m-notify] {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(10px);
  position: relative;
}

.m-ui [m-notify].success {

}
.m-ui [m-notify].warning {

}
.m-ui [m-notify].error {

}

.m-ui [m-notify].with-icon {
  
}
.m-ui [m-notify].with-icon:before{
    position: absolute;
}

.m-ui [m-notify] [m-notify-close]{
    margin: 0;
    position: absolute;
    right: 15px;
    top: 15px;
    color: inherit;
}

#notify-parent{
    position: fixed;
    z-index: 20;
    bottom: 0;
    max-width: 100vw;
    left: 0;
    padding: 20px;
    display: none;
    overflow: visible !important;

    transition: 0s ease-out;
    -webkit-transition: 0s ease-out;
    -moz-transition: 0s ease-out;
    -o-transition: 0s ease-out; 
}

#notify-parent [m-notify]{
  width: auto;
  display: inline-block;
}


/* TABLES */

.m-ui [m-table] {
  border-spacing: inherit;
  text-align: left;
  overflow: hidden;
}

.m-ui [m-table] tr,
.m-ui [m-table] td {
  
}

.m-ui [m-table] > * > tr > td {

}

/* head */
.m-ui [m-table] > thead,
.m-ui [m-table] > tfoot {

}
.m-ui [m-table] > thead td,
.m-ui [m-table] > tfoot td{

}
/* head end*/

.m-ui [m-table].vtop td,
.m-ui [m-table] tr.vtop td { vertical-align: top; }


/* Zebra */
/*x y*/
.m-ui [m-table][m-type=zebra-x] > tr:nth-child(2n),
.m-ui [m-table][m-type=zebra-x] tbody > tr:nth-child(2n),
.m-ui [m-table][m-type=zebra-y] > tr > td:nth-child(2n),
.m-ui [m-table][m-type=zebra-y] tbody > tr > td:nth-child(2n) {
  
}


/* Border */
/*all (DEFAULT)*/
.m-ui [m-table][m-type=bordered] {
  border-spacing: inherit;
  border-collapse: collapse;
}

.m-ui [m-table][m-type=bordered] > * > tr > td,
.m-ui [m-table][m-type=bordered] > * > tr > th {
    border-collapse: collapse;
}
/*x*/
.m-ui [m-table][m-type=bordered-x] {
  border-spacing: inherit;
  border-collapse: collapse;
}

.m-ui [m-table][m-type=bordered-x] > * > tr > td,
.m-ui [m-table][m-type=bordered-x] > * > tr > th {
    border-collapse: collapse;
}
/*y*/
.m-ui [m-table][m-type=bordered-y] {
  border-spacing: inherit;
  border-collapse: collapse;
}

.m-ui [m-table][m-type=bordered-y] > * > tr > td,
.m-ui [m-table][m-type=bordered-y] > * > tr > th {
    border-collapse: collapse;
}


/* TABS */

.m-ui [m-tabs]{
    text-align: left;
}
.m-ui [m-tabs] controls {
    display: block;
}
.m-ui [m-tabs] [m-control="tabs"] {
    font-size: inherit;
    display: inline-block;
    cursor: pointer;
}
.m-ui [m-tabs] [m-control="tabs"]:hover {
  
}
.m-ui [m-tabs] [m-control="tabs"].active {
  color: initial;
}

.m-ui [m-tabs] > * > content {
  display: none;
}



/* SLIDER */

.m-ui [m-slider] {}

.m-ui [m-slider] content {
  display: none;
}

.m-ui [m-slider] controls {
  display: block;
}
.m-ui [m-slider] controls > * {
    display: inline-block;
    cursor: pointer;
}
.m-ui [m-slider] controls > *.active,
.m-ui [m-slider] controls > *:hover {
    
}


/* ACCORDION */

.m-ui [m-accordion] {}
.m-ui [m-accordion] > [m-control]{
    position: relative;
    cursor: pointer;
}
.m-ui [m-accordion] > [m-control]:before{
  font-family: 'material';
  content: '\e145';
  position: absolute;
  color: inherit;
}
.m-ui [m-accordion] > [m-control]:hover{

}
.m-ui [m-accordion] > [m-control].active {
}
.m-ui [m-accordion] > [m-control].active:before{
  content: '\e15b';
}

.m-ui [m-accordion] > [m-control] + content{
  display: none;
}