/* General  */

.m-ui body {
  min-height: 100vh;
}

html.m-ui,
body.m-ui,
body.m-ui *,
.m-ui body,
.m-ui body * {
  -webkit-overflow-scrolling: touch;
}

html.m-ui,
body.m-ui,
.m-ui body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

header,
footer,
section,
article,
nav,
figure,
content {
  display:block;
}

.m-ui .flex > * {
  width: 100%;
}

.m-ui  *, * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dots around the form Elements in Firefox */
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  border: none;
}

/**/
.m-ui *.with-icon-right:before {
  display: none;
}


/* Styles for editing and create custom design */

:root {

    --my-black: var(--m-black); /* set your value */
    --my-white: var(--m-white); /* set your value */

    --my-color1: #000; /* set your value */
    --my-color2: #000; /* set your value */
    --my-color3: #000; /* set your value */
    --my-color4: #000; /* set your value */
    --my-color5: #000; /* set your value */

    --my-font-color: var(--m-black); /* set your value */
    --my-success: var(--m-green); /* set your value */
    --my-l-success: var(--m-l-green); /* set your value */
    --my-sl-success: var(--m-sl-green); /* set your value */

    --my-warning: var(--m-orange); /* set your value */
    --my-l-warning: var(--m-l-orange); /* set your value */
    --my-sl-warning: var(--m-sl-orange); /* set your value */

    --my-error: var(--m-red); /* set your value */
    --my-l-error: var(--m-l-red); /* set your value */
    --my-sl-error: var(--m-sl-red); /* set your value */

    --my-cancel: var(--m-grey); /* set your value */
    --my-l-cancel: var(--m-l-grey); /* set your value */
    --my-sl-cancel: var(--m-sl-grey); /* set your value */

}

html {
  margin: 0 auto;
  padding: 0;
  /*font-size: 1px;*/
  font-size: 10px;
  transition: 0s ease-out;
    -webkit-transition: 0s ease-out;
    -moz-transition: 0s ease-out;
    -o-transition: 0s ease-out;
}

body {
  margin: 0 auto;
    background-color: #000;
    color: var(--m-white);
    font-family: var(--normal);
    font-size: 1.6rem;
}

*, *:after, *:before {
  transition: .2s ease-out;
    -webkit-transition: .2s ease-out;
    -moz-transition: .2s ease-out;
    -o-transition: .2s ease-out;
}

/* UNIFORM PARAMS */




/* TYPOGRAPHY */

.m-ui h1,
.m-ui h2,
.m-ui h3,
.m-ui h4,
.m-ui h5,
.m-ui h6 {
    font-family: var(--bold); /* Semiblack Black */
}

.m-ui h1, .m-ui .fs-1 { font-size: 5rem; } /* set you value */
.m-ui h2, .m-ui .fs-2 { font-size: 4rem; } /* set you value */
.m-ui h3, .m-ui .fs-3 { font-size: 3.2rem; } /* set you value */
.m-ui h4, .m-ui .fs-4 { font-size: 2.5rem; } /* set you value */
.m-ui h5, .m-ui .fs-5 { font-size: 1.9rem; } /* set you value */
.m-ui h6, .m-ui .fs-6 { font-size: 1.6rem; } /* set you value */

.m-ui i {
  font-family: var(--normal-italic);
}
.m-ui b,
.m-ui strong {
  font-family: var(--bold);
}
.m-ui small,
.m-ui sup,
.m-ui sub {
  font-size: 1rem;
}
.m-ui p { margin: 1em 0; }



/* CONTROLS */

:root {
  --btn-hover: var(--m-white);
}

/* Controls --> Link */

.m-ui [m-link] {
  color: var(--m-semidark-blue);
}
.m-ui [m-link]:active {
  color: var(--m-dark-blue);
}

/* Controls --> buttons --> default/text */

.m-ui [m-button] {
  font-family: var(--medium);
  background-color: #D082ED;
  color: var(--m-black);
  margin: 5px;
  line-height: 1.8em;
  padding: 0px 10px 0px 15px;
  border-radius: 7px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: inherit;
}
.m-ui [m-button]:hover  { opacity: .8; }
.m-ui [m-button]:active { opacity: .6; }

/* Controls --> Buttons states/types */

.m-ui [m-button].success {
  background-color: var(--m-light-green); 
  color: var(--m-green); 
}
.m-ui [m-button].warning {
  background-color: var(--m-light-orange);
  color: var(--m-orange);
}
.m-ui [m-button].error   {
  background-color: var(--m-light-red);
  color: var(--m-red);
}
.m-ui [m-button].cancel  {
  background-color: var(--m-light-grey);
  color: var(--m-grey);
}
.m-ui [m-button].white   {
  background-color: var(--m-white);
  color: var(--m-semidark-grey);
}

.m-ui [m-button].disabled,
.m-ui [m-button]:disabled {
  color: var(--m-semilight-grey);
  background-color: var(--m-light-grey);
}
.m-ui [m-button].disabled:hover,
.m-ui [m-button]:disabled:hover,
.m-ui [m-button].disabled:active,
.m-ui [m-button]:disabled:active,
.m-ui [m-button].loading:active {
  color: var(--m-semilight-grey);
    background-color: var(--m-light-grey);
}

/* Controls --> buttons --> Micro */

.m-ui [m-button][m-type=micro] {
  color: var(--m-grey);
}
.m-ui [m-button][m-type=micro].with-icon:before {
    line-height: 1em;
    width: 25px;
    font-size: 2rem !important;
}
  /* Shadow in click */

      .m-ui [m-button][m-type=micro]:after {
        background: var(--m-grey);
      }

/* Controls --> button --> Circle */

.m-ui [m-button][m-type=circle].with-icon {
  width: 46px;
  height: 46px;
  -webkit-box-shadow: 0 1px 4px -1px rgba(0,0,0,.2);
  box-shadow: 0 1px 4px -1px rgba(0,0,0,.2);
}

.m-ui [m-button][m-type=circle].with-icon:before {
    color: inherit;
    width: 25px;
    margin: -12px 0 0 -12px;
}

/* Controls --> button --> With loader */

.m-ui [m-button] [m-loader][m-type=circle],
.m-ui [m-button] m-loader[m-type=circle] {
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
}
.m-ui [m-button].loading,
.m-ui [m-button].loading:hover {
    background-color: var(--m-light-grey);
}

/* Controls -->  Button modifiers */

/* Controls -->  Button modifiers --> with icon */

.m-ui [m-button].with-icon:before,
.m-ui [m-button].with-icon-right:after {
  font-size: 1.8rem;
  vertical-align: top !important;
}

.m-ui [m-button].with-icon,
.m-ui [m-button].mini.with-icon,
.m-ui [m-button].large.with-icon {
  padding-left: 10px;
}
.m-ui [m-button].with-icon-right,
.m-ui [m-button].mini.with-icon-right,
.m-ui [m-button].large.with-icon-right { 
  padding-right: 10px !important;
}

.m-ui [m-button].with-icon:before {
  margin-right: 5px;
}
.m-ui [m-button].with-icon-right:after {
  margin-left: 5px;
}

/* Controls -->  Button modifiers --> Sizes for text buttons */

/* MiniButtons */
.m-ui [m-button].mini {
  line-height: 30px;
  font-size: 1.2rem;
  padding: 0 20px;
}
/* LargeButtons */
.m-ui [m-button].large {
  line-height: 45px;
  padding: 0px 20px;
}
/* Block */
.m-ui [m-button].block {
  width: 100%;
  line-height: 65px;
}

/* Controls -->  Button modifiers --> Sizes for circle buttons */

  /* MiniButtons */
  .m-ui [m-button][m-type=circle].mini {
    width: 36px !important;
    height: 36px !important;
  }
  .m-ui [m-button][m-type=circle].with-icon.mini:before {
    font-size: 18px;
    width: 18px;
    margin: -9px 0 0 -9px;
    padding: 0;
  }

  /* LargeButtons */
  .m-ui [m-button][m-type=circle].large {
    width: 65px !important;
    height: 65px !important;  
  }
  .m-ui [m-button][m-type=circle].with-icon.large:before {
    font-size: 34px;
    margin: -17px 0 0 -17px;
  }


/* GRAPHIC ELEMENTS */

/* Graphic --> Loaders CSS only */

.m-ui [m-loader][m-type=circle],
.m-ui m-loader[m-type=circle],
.m-ui [m-loader][m-type=circle][class*=bc-],
.m-ui m-loader[m-type=circle][class*=bc-] {
  border-top: 2px solid var(--m-blue);
  border-right: 2px solid var(--m-blue);
  border-bottom: 2px solid var(--m-blue);
  border-left: 2px solid transparent !important;
}

.m-ui [m-loader][m-type=circle],
.m-ui m-loader[m-type=circle] { width: 18px; height: 18px; }
.m-ui [m-loader][m-type=circle].medium,
.m-ui m-loader[m-type=circle].medium { width: 22px; height: 22px; }
.m-ui [m-loader][m-type=circle].large,
.m-ui m-loader[m-type=circle].large { width: 26px; height: 26px; }
.m-ui [m-loader][m-type=circle].big,
.m-ui m-loader[m-type=circle].big { width: 30px; height: 30px; }

.m-ui [m-loader][m-type=dots],
.m-ui m-loader[m-type-dots] {
  font-size: 0.7rem;
}

.m-ui [m-loader][m-type=dots] > i,
.m-ui m-loader[m-type-dots] > i { 
  padding: 0 2px;
}


/* Graphic --> Line / hr */

.m-ui hr,
.m-ui m-line,
.m-ui [m-line]{
    height: 1px;
    background-color: var(--m-light-grey);
    margin: 30px 0; 
}

/* Graphic --> Icons */

.m-ui .icon,
.with-icon:before,
.with-icon-right:after {
    padding: 0 5px;
    font-size: 1.3em;
}


/* FORM ELEMENTS */

/* Form --> tag */
.m-ui [m-tag],
.m-ui m-tag {
  padding: 0 15px;
  background-color: transparent;
  /**/
  font-size: .8em;
  margin: 0 5px 5px 0;
  color: var(--m-grey);
  font-family: var(--medium);
  border: 1px solid;
  line-height: 2em;
  letter-spacing: .7px;
  border-radius: 50px;
  max-width: 400px;
}
.m-ui [m-tag].with-icon,
.m-ui m-tag.with-icon {
  padding-left: 10px;
}
.m-ui [m-tag].with-icon-right,
.m-ui m-tag.with-icon-right {
  padding-right: 5px;
}

/* Form --> label */
.m-ui [m-label],
.m-ui m-label {
  padding: 10px 0 0 0px;
  font-size: .6em;
  line-height: 1.5em;
  color: var(--m-grey);
  font-family: var(--bold);
  text-transform: uppercase;
  letter-spacing: .7px;
}

/* Form --> Placeholder */

.m-ui input::-webkit-input-placeholder,
.m-ui textarea::-webkit-input-placeholder { 
  color: var(--m-semilight-grey); 
  font-family: var(--medium);
}
.m-ui input::-moz-placeholder,
.m-ui textarea::-moz-placeholder { 
  color: var(--m-semilight-grey);
  font-family: var(--medium);  
}

/* Form --> Input (textarea) */

.m-ui [m-label] + input,
.m-ui m-label  + input,
.m-ui [m-label] + textarea,
.m-ui m-label  + textarea,
.m-ui [m-label] + [m-select],
.m-ui m-label + [m-select] {
  margin: 5px 0 20px;
}

.m-ui input, 
.m-ui textarea,
.m-ui [m-select] [m-control] {
  background-color: transparent;
  height: 50px;
  padding: 0 10px;
  margin: 5px 0;
  color: inherit;
  font-family: var(--medium);
  border: 2px solid var(--m-grey);
  border-width: 0 0 2px 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.m-ui input:focus, 
.m-ui textarea:focus,
.m-ui input:focus:hover,
.m-ui textarea:focus:hover,
.m-ui [m-select] [m-control]:focus,
.m-ui [m-select] [m-control]:focus:hover {
    border-color: var(--m-blue);
    background-color: transparent;
    color: inherit !important;
}
.m-ui input:hover, 
.m-ui textarea:hover,
.m-ui [m-select] [m-control]:hover {
  background: transparent;
  border-color: var(--m-semilight-grey);
}
.m-ui input:active, 
.m-ui textarea:active,
.m-ui [m-select] [m-control]:active {
  box-shadow: none;
  -webkit-box-shadow: none;
  border-color: var(--m-light-grey);
}

.m-ui input:disabled, 
.m-ui textarea:disabled,
.m-ui [m-select] [m-control][disabled] {
  background-color: transparent;
  border-color: var(--m-light-grey);
}

.m-ui input:disabled:active, 
.m-ui textarea:disabled:active,
.m-ui [m-select] [m-control][disabled]:active {
  box-shadow: none;
  -webkit-box-shadow: none;
  border-color: var(--m-semilight-red);
}

/* Form --> textarea */

.m-ui textarea {
  min-height: 70px;
  line-height: 1.5em;
  padding: 10px;
}

/* Form --> Input/Textarea --> Styling */

.m-ui input.success, 
.m-ui textarea.success,
.m-ui [m-select].success [m-control] {
  border-color: var(--m-green);
  color: var(--m-green);
}
.m-ui input.warning, 
.m-ui textarea.warning,
.m-ui [m-select].warning [m-control] {
  border-color: var(--m-orange);
  color: var(--m-orange);
}
.m-ui input.error, 
.m-ui textarea.error,
.m-ui [m-select].error [m-control] {
  border-color: var(--m-red);
  color: var(--m-red);
}

/* Form --> CHECKBOX / RADIO */

.m-ui input[type="radio"],
.m-ui input[type="checkbox"] {
  display: none;
}

/* Form --> Checkbox/radio + Label */

/* Form --> Checkbox/radio --> Mark */
.m-ui input + label[m-check]:before {
  content: '\e5ca';
  color: var(--m-green);
  font-size: 27px;
  line-height: 15px;
  margin-left: -3px;
}

/* Form --> Checkbox/radio --> Shadow in click */
.m-ui input + label[m-check]:after {
  width: 40px !important;
  height: 40px !important;
  margin-left: -20px !important;
  margin-top: -20px !important;
  background: var(--m-semilight-grey);
  opacity: .1;
}


.m-ui input + label[m-check] {
    border: 2px solid var(--m-grey);
    background: transparent;
    border-radius: 6px;
    min-width: 21px;
    min-height: 21px;
    width: 21px;
    height: 21px;
    margin: 5px;
}

.m-ui input + label[m-check]:hover {
  border-color: var(--m-blue);
}

.m-ui input:checked + label[m-check],
.m-ui input:checked:disabled + label[m-check],
.m-ui input:checked:disabled + label[m-check]:active {
  border-color: transparent;
}

.m-ui input:disabled + label[m-check]:before,
.m-ui input:checked:disabled + label[m-check]:before {
  color: var(--m-grey);
}
.m-ui input:disabled + label[m-check] {
  border-color: var(--m-semilight-grey);
}

.m-ui input:disabled + label[m-check]:active {
  border-color: var(--m-semilight-red);
}
.m-ui input:disabled + label[m-check]:active:before,
.m-ui input:checked:disabled + label[m-check]:active:before {
  color: var(--m-red);
}

/* Form --> Checkbox/radio --> Text for check */
.m-ui input + label[m-check] + * {
  padding: 5px 10px 10px;
}

/* Form --> Switch */

.m-ui input + label[m-swith] {
    border: none;
    background-color: var(--m-light-grey);
    border-radius: 11px;
    height: 10px;
    width: 35px;
    min-width: 35px;
    margin: 15px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.36) !important;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.36) !important;
}

.m-ui input:disabled + label[m-swith]:active,
.m-ui input:disabled:checked + label[m-swith]:active {
  background-color: var(--m-red);
}
.m-ui input:checked + label[m-swith] {
    background-color: var(--m-green);
}
.m-ui input:checked + label[m-swith]:hover {}
.m-ui input:checked:disabled + label[m-swith] {
  background-color: var(--m-grey);
}

.m-ui input + label[m-swith]:before {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  left: -4px;
  top: -6px;
  background-color: var(--m-white);
  border: 2px solid var(--m-white);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.3);
}
.m-ui input + label[m-swith]:hover:before {
    border-color: var(--m-blue);
}
.m-ui input:disabled + label[m-swith]:before {
    background-color: var(--m-light-grey);
    border-color: var(--m-light-grey);
}

.m-ui input:checked + label[m-swith]:before {
    left: 15px;
    background-color: var(--m-white);
    border-color: var(--m-white);
}

.m-ui input + label[m-swith] + * {
  padding: 10px;
}


/* Form --> Select */


.m-ui [m-select] [m-control] {
    line-height: 48px;
}

.m-ui [m-select] [m-control]:before {
  font-family: 'material';
  content: '\e5cf';
  position: absolute;
  right: 12px;
  font-size: 24px !important;
  color: inherit;
}

.m-ui [m-select][disabled] [m-control]:before{
  color: var(--m-light-grey);
}



/* Form --> Input FILE */

.m-ui input[type="file"] + label {
    padding: 40px 0 30px;
    margin: 10px 5px 25px;
    border: 2px dashed;
    background-color: transparent;
    color: var(--m-blue);
    border-color: var(--m-semilight-grey);
    border-radius: 15px;
}

.m-ui input[type="file"] + label:before {
  content: '\e145';
  font-size: 34px;
}

.m-ui input[type="file"] + label [m-loader]{
  margin: -33px 0 0 -15px;
}

.m-ui input[type="file"]:hover + label { 
  border-color: var(--m-blue); 
}

.m-ui input[type="file"] + label span {
  font-size: .6em;
  line-height: 1.5em;
  font-family: var(--bold);
  color: var(--m-grey);
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 25px 0 0;
}

/* Form --> Input FILE --> Change */
.m-ui input[type="file"].change + label:before {
  content: '\e14d';
}

.m-ui input[type="file"].change:hover + label:before,
.m-ui input[type="file"].warning:hover + label:before {
  content: '\e627';
}



/* Form --> Input FILE --> Loaded */
.m-ui input[type="file"].loaded + label:before {
  content: '\e5ca';
  color: var(--m-green);
}

/* Form --> Input FILE --> All statuses */
.m-ui input[type="file"].loading + label,
.m-ui input[type="file"].loaded + label {
  border-color: var(--m-semilight-grey);
}
.m-ui input[type="file"].warning + label {
  color: var(--m-orange);
  border-color: var(--m-orange);
}
.m-ui input[type="file"].warning + label:before {
  content: '\e155';
}
.m-ui input[type="file"].error + label {
  color: var(--m-red);
  border-color: var(--m-red);
}
.m-ui input[type="file"].error + label:before {
  content: '\e15d';
}

/* Form --> Input FILE --> Disabled */

.m-ui input[type="file"]:disabled + label {
  color: var(--m-semilight-grey);
  border-color: var(--m-semilight-grey);
}
.m-ui input[type="file"]:disabled:active + label {
  border-color: var(--m-semilight-red);
}



/* Form --> Datepicker */


.m-ui [m-calendar] input {  
  width: 130px;
}

.m-ui [m-calendar] input + section {
  width: 300px;
  height: 320px;
  background: rgb(0 0 0 / 80%);
  border-radius: 15px;
  box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
  -webkit-box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(10px);
  padding: 10px;
}

.m-ui [m-calendar] .datepickerDrop * {
    font-family: var(--medium);
    color: var(--m-light-grey);
}

.m-ui [m-calendar] .datepickerDrop th,
.m-ui [m-calendar] .datepickerDrop td {
    height: 40px;
}

.m-ui [m-calendar] .datepickerDrop thead th {
  height: 60px;
}

.m-ui [m-calendar] .table-condensed .prev:before {
  content: '\e5cb';
}
.m-ui [m-calendar] .table-condensed .next:before {
  content: '\e5cc';
}
.m-ui [m-calendar] .table-condensed .prev:before,
.m-ui [m-calendar] .table-condensed .next:before {
  line-height: 40px;
  font-size: 1.3em;
  color: var(--m-light-grey);
}

.m-ui [m-calendar] .table-condensed .switch {
  color: var(--m-light-grey);
}

.m-ui [m-calendar] .datepickerDrop span.month,
.m-ui [m-calendar] .datepickerDrop span.year {
    width: 64px;
    line-height: 80px;
}

.m-ui [m-calendar] .table-condensed .prev:hover:before,
.m-ui [m-calendar] .table-condensed .next:hover:before,
.m-ui [m-calendar] .table-condensed .switch:hover {
  color: var(--m-white);
}
.m-ui [m-calendar] .datepickerDrop tbody td.day:hover,
.m-ui [m-calendar] .datepickerDrop tbody span.month:hover,
.m-ui [m-calendar] .datepickerDrop tbody span.year:hover {
  color: var(--m-white);
}
.m-ui [m-calendar] .datepickerDrop tbody td.day.active,
.m-ui [m-calendar] .datepickerDrop tbody span.month.active,
.m-ui [m-calendar] .datepickerDrop tbody span.year.active {
    color: var(--m-blue);
}



/* DROPDOWNS windows (select / dropdown) */

.m-ui [m-dropdown] {
    background: rgb(0 0 0 / 80%);
    min-width: 200px;
    margin: 10px 0;
    border-radius: 15px;

    box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
    -webkit-box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(10px);

}

.m-ui [m-dropdown][m-type=list] > * {
    padding: 15px 20px;
    border-bottom: 1px solid rgb(176 190 197 / 25%);
    color: var(--m-light-grey);
    font-family: var(--medium);
}

.m-ui [m-dropdown][m-type=list] > *:hover {
  color: var(--m-white);
}

/* Containers --> Popup */

.m-ui [m-popup] {
    background: rgb(0 0 0 / 30%);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(10px);
}

.m-ui [m-popup].dark {
  background: rgb(0 0 0 / 80%);
}

.m-ui [m-popup] > content {
    margin: 40px 0 40px -10vw;
    background-color: #fff;
    box-shadow: 0 0 30px 0px rgb(0 0 0 / 10%);
    -webkit-box-shadow: 0 0 30px 0px rgb(0 0 0 / 10%);
    padding: 30px;
    max-width: 90vw;
    border-radius: 15px;
}


/* Containers --> Popup full size */

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

}

/* Containers --> Tooltips */

.m-ui [m-tooltip] {
  margin: 0;
  background-color: rgb(0 0 0 / 80%);
  color: #fff;
  padding: 7px 10px;
  border-radius: 15px;
  line-height: 1em !important;
  text-transform: uppercase;
  letter-spacing: .7px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.m-ui [m-tooltip] > content { 
  max-width: 500px; 
}
.m-ui [m-tooltip] > content * {
  max-width: 480px;
}

.m-ui *:hover > [m-tooltip] { }


/* Containers --> Notify */

.m-ui [m-notify] {
  background: rgb(0 0 0 / 80%);
  color: var(--m-light-grey);
  padding: 20px;
  border-radius: 15px;
  margin: 10px auto 0;
}

.m-ui [m-notify].success {
  background: var(--m-light-green);
  color: var(--m-green);
}
.m-ui [m-notify].warning {
  background: var(--m-light-orange);
  color: var(--m-orange);
}
.m-ui [m-notify].error {
  background: var(--m-light-red);
  color: var(--m-red);
}

.m-ui [m-notify].with-icon {
  padding: 20px 20px 20px 60px;
}

.m-ui [m-notify].with-icon:before {
    left: 12px;
    top: 50%;
    margin-top: -12px;
    font-size: 24px !important;
}

#notify-parent [m-notify] {
  box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
  -webkit-box-shadow: 0 0 30px 0px rgb(0 0 0 / 30%);
}

/* Containers --> Tables */

.m-ui [m-table] {
  width: 100%;
  border-width: 0;
  border: none;
}

.m-ui [m-table] tr,
.m-ui [m-table] td {
  border: none;
}

.m-ui [m-table] > * > tr > td {
    padding: 15px;
    border: none;
    border-width: 0;
}

.m-ui [m-table] > thead,
.m-ui [m-table] > tfoot {
    padding: 5px 0px;
    background-color: var(--m-light-grey);
}
.m-ui [m-table] > thead td,
.m-ui [m-table] > tfoot td{
    padding: 15px;
    font-family: var(--bold);
}

/* 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) {
  background-color: var(--m-ultralight-grey);
}

.m-ui [m-table][m-type=bordered] {
  border: 1px solid var(--m-semilight-grey);
  border-width: 1px 0 0 1px;
}

.m-ui [m-table][m-type=bordered] > * > tr > td,
.m-ui [m-table][m-type=bordered] > * > tr > th {
  border: 1px solid var(--m-semilight-grey);
  border-width: 0 1px 1px 0;
}

.m-ui [m-table][m-type=bordered-x] {
  border: 1px solid var(--m-semilight-grey);
  border-width: 1px 0 0 0;
}

.m-ui [m-table][m-type=bordered-x] > * > tr > td,
.m-ui [m-table][m-type=bordered-x] > * > tr > th {
    border: 1px solid var(--m-semilight-grey);
    border-width: 0 0 1px 0;
}

.m-ui [m-table][m-type=bordered-y] {
  border: 1px solid var(--m-semilight-grey);
  border-width: 0 0 0 1px;
}

.m-ui [m-table][m-type=bordered-y] > * > tr > td,
.m-ui [m-table][m-type=bordered-y] > * > tr > th {
    border: 1px solid var(--m-semilight-grey);
    border-width: 0 1px 0 0;
}


/* Containers --> Tabs */

.m-ui [m-tabs] controls {
  margin: 0 0 10px;
}

.m-ui [m-tabs] [m-control="tabs"] {
    font-family: var(--bold);
    color: var(--m-grey);
    padding: 15px 10px;
    text-transform: uppercase;
    letter-spacing: .7px;
    border-bottom: 2px solid transparent;
}

.m-ui [m-tabs] [m-control="tabs"]:hover {
   border-bottom: 2px solid var(--m-semilight-grey);
}

.m-ui [m-tabs] [m-control="tabs"].active {
  border-color: var(--m-blue);
}


/* Containers --> Slider */

.m-ui [m-slider] controls {
  margin: 20px 0;
}

.m-ui [m-slider] controls > * {
    margin: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--m-grey);
    opacity: .5;
}

.m-ui [m-slider] controls > *.active,
.m-ui [m-slider] controls > *:hover {
    opacity: 1;
}

/* Containers --> Accordion */

.m-ui [m-accordion] > [m-control]{
    padding: 15px 60px 15px 20px;
    background: var(--m-light-grey);
    margin: 10px 0;
    border-radius: 15px;
}

.m-ui [m-accordion] > [m-control]:before{
  right: 12px;
  top: 50%;
  margin-top: -12px;
  font-size: 24px !important;
}

.m-ui [m-accordion] > [m-control]:hover{
  opacity: .8;
}

.m-ui [m-accordion] > [m-control] + content{
  padding: 10px 20px 20px;
}