@media screen{

  /* BEGIN TEXT FORMAT */
  *{
    color: #333;
    box-sizing: border-box;
    font-size: 13px;
    font-family: "proxima-nova", sans-serif;
  }
  .small, .small *{ font-size: 11px; }
  body{
    margin: 0;
    padding: 0;
  }
  h1, h2, h3, h4, h5{
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    font-weight: 300;
    margin: 10px 0;
  }
  hr{
    border: 0;
    border-bottom: 1px dashed #ccc;
    background: #ccc;
    margin: 1.5em 0;
  }
  a{
    text-decoration: none;
  }
  a, span, label{
    display: inline-block;
  }
  ul, li{
    margin: 0;
    padding: 0;
  }
  input[type=text], input[type=password], textarea{
    -webkit-appearance: none;
    outline: none;
  }
  input::placeholder{
    color: #ddd;
  }
  h1{ font-size: 32px; }
  h2{ font-size: 24px; }
  h3{ font-size: 21px; }
  h4{ font-size: 18px; }
  h5{ font-size: 16px; }
  /* END TEXT FORMAT */

  /* BEGIN ALERT */
  .alert{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    background: rgba(0, 0, 0, .8);
    overflow-y: auto;
    transition: all .1s ease-in-out;
    transform: translate3d(0, -50px, 0);
    opacity: 0;
  }
  .alert.off{
    display: none;
  }
  .alert.on{
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .alert .alert-content{
    position: absolute;
    text-align: center;
    padding: 10px 30px;
    background: #fff;
    overflow: hidden;
    border: solid 1px rgba(0, 0, 0, .1);
  }
  .alert button{
    margin-left: 5px;
    min-width: 100px;
  }
  /* END ALERT */

  /* BEGIN AUTOCOMPLETE */
  .autocomplete{

    background: #fff;
    border: solid 1px #ddd;
    position: relative;
    vertical-align: middle;
    overflow: hidden;
    border-radius: 4px;
    white-space: nowrap;

  }
  .autocomplete input{

    border: none;
    padding: 6px;
    background: transparent;
    vertical-align: middle;

  }
  .autocomplete>.text{
    padding: 4px;
    background: #eee;
    margin: 1px 0 1px 2px;
    vertical-align: middle;
    position: relative;
  }
  .autocomplete>.text:first-child{
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }
  .autocomplete>.text .icon-remove{
    position: absolute;
    top: 7px;
    right: 4px;
    display: none;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    cursor: pointer;
    font-size: .7em;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    text-align: center;
    line-height: 1.6em;;
  }
  .autocomplete>.text .icon-remove:hover{
    background: red;
  }
  .autocomplete>.text:hover .icon-remove{
    display: block;
  }
  .autocomplete .icon{

    color: #aaa;
    cursor: pointer;
    background: #fff;
    vertical-align: middle;
    padding: .6em;;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;

  }
  .autocomplete-popup .item{

    padding: .6em;;
    text-align: left;

  }
  .autocomplete-popup .item label{
    padding: 0;
  }
  .autocomplete.invalid{
    border-color: red !important;
    background: #ffc9c3 !important;
  }
  .autocomplete.no-border{
    border-color: transparent;
  }
  .autocomplete.readonly{
    background: rgba(0, 0, 0, .1);
  }
  .autocomplete.readonly .fa{
    display: none;
  }
  .autocomplete.readonly>.text .icon-remove{
    display: none;
  }
  .autocomplete.borderless{
    border-color: transparent;
  }
  /* END AUTOCOMPLETE */


  /* BEGIN LOADING BAR */
  .loading-bar{
    position:absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 2px;
    background: #eee;
    text-align: left;
    display: none;
  }
  .loading-bar.on{
    display: block;
  }
  .loading-bar>span{
    height: 2px;
    background:#0075FF;
  }
  /* END LOADING BAR */

  /* BEGIN BUTTON */
  button{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    position: relative;
    display: inline-block;
    border: solid 1px #ddd;
    margin: 0;
    background: transparent;
    padding: .6em 1.2em;
    border-radius: 2px;
    vertical-align: middle;
    white-space: nowrap;
    margin-left: 6px;
  }
  button::-moz-focus-inner {
    border: 0;
  }
  button::-webkit-focus-inner {
    border: 0;
  }
  button>*{
  }
  button .glyphicons, button .fa{
    padding: 0;
    margin: 0 6px 0 0;
  }
  button.icon-only .glyphicons, button .icon-only .fa{
    margin-right: 0;
  }
  button:hover{
    border-color: #aaa;
  }
  button:disabled, button:disabled:hover{
    background: #eee;
    color: #ccc;
  }
  button:disabled>*{
    color: #ccc;
  }
  button:active{
    position: relative;
    left: 1px;
  }
  button.blue{
    background: #5D9CEC;
    border: solid 1px #5D9CEC;
  }
  button.blue, button.blue *{
    color: #fff;
  }
  button.blue:hover{
    background: #4A89DC;
  }
  button.red{
    background: #FC6E51;
    border: solid 1px #FC6E51;
  }
  button.red, button.red *{
    color: #fff;
  }
  button.red:hover{
    background: #E9573F;
    border-color: #E9573F;
  }
  button.green{
    background: #A0D468;
    border: solid 1px #A0D468;
  }
  button.green, button.green *{
    color: #fff;
  }
  button.green:hover{
    background: #8CC152;
    border-color: #8CC152;
  }
  button.gray{
    background: #58595b;
    border: solid 1px #58595b;
  }
  button.gray, button.gray *{
    color: #fff;
  }
  button.gray:hover{
    background: rgba(0, 0, 0, .8);
    border-color: transparent;
  }
  button.icon{
    padding: 7px 7px 7px 7px;
  }
  button.icon .fa, button.icon .glyphicons{
    margin: 0;
  }
  button.sm{
    padding: 3px 6px;
  }
  /* END BUTTON */

  /* BEGIN SECTION */

  section{
    background: #fff;
    margin: 1em;
    padding: 1.5em;
  }
  section h1{
    font-size: 1.3em;
    margin-bottom: 1em;
  }

  /* END SECTION */

  /* BEGIN CALENDAR */
  #calendar{
    padding: .6em;;
  }
  #calendar table{
    display: inline-block;
    vertical-align: top;
  }
  #calendar td{
    padding: 2px;
    text-align: center;
    cursor: pointer;
  }
  #calendar td.active{
    background: #eee;
  }
  /* END CALENDAR */

  /* BEGIN CHECKBOX */
  .checkbox{
    display: inline-block;
  }
  .checkbox.horizontal{
    white-space: nowrap;
  }
  .checkbox.vertical .item{
    display: block;
  }
  .checkbox .item{
    display: inline-block;
    vertical-align: top;
    padding: .6em;
    white-space: nowrap;
  }
  .checkbox input[type=checkbox]{
    vertical-align: middle;
  }
  .checkbox label{
    vertical-align: middle;
    padding: 0;
    margin-left: 5px;
  }
  .checkbox.invalid{
    border-color: red !important;
    background: #ffc9c3 !important;
  }
  /* END CHECKBOX */

  /* BEGIN DATEPICKER */
  .datepicker{
    vertical-align: middle;
    position: relative;
    border: solid 1px #eee;
    white-space: nowrap;
    align-items: center;
    overflow: hidden;
    width: 130px;
    border-radius: 4px;
    background: #fff;
  }
  .datepicker:hover{
    border-color: #aaa;
  }
  .datepicker input{
    background: transparent;
    border: none;
    padding: 6px;
    width: 100%;
    padding: 6px 18px 6px 12px;
    cursor: pointer;
  }
  .datepicker .icon{
    padding: 8px 12px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
  }
  .datepicker.invalid{
    border-color: red !important;
    background: #ffc9c3 !important;
  }
  .datepicker.readonly, .datepicker.readonly:hover{
    border-color: transparent;
  }
  .datepicker.readonly .icon{
    display: none;
  }
  /* END DATEPICKER */

  /* BEGIN DROPDOWN */
  .dropdown{
    background: #fff;
    border: solid 1px #eee;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    position: relative;
    vertical-align: middle;
    border-radius: 4px;
  }
  .dropdown:hover, .dropdown:active{
    /*border-color: #aaa;*/
  }
  .dropdown>input{
    background: transparent;
    border: none;
    padding: 6px;
    vertical-align: middle;
    cursor: pointer;
    width: 100%;
  }
  .dropdown .icon{
    background: #fff;
    color: #aaa;
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    margin: auto;
    padding: 0 12px;
    height: 50%;
  }
  .dropdown.error{
    border-color: #E9573F;
  }
  .dropdown-popup .item{
    padding: 8px 12px;
    text-align: left;
    border-top: solid 1px #eee;
    background: #fff;
  }
  .dropdown-popup .item label{
    padding: 0;
  }
  .dropdown-popup .item:hover{
    background: #303030;
  }
  .dropdown-popup .item:hover>*{
    color: #eee;
  }
  .dropdown-popup .item:first-child{
    border-top-color: transparent;
  }
  .dropdown-popup .item>*{
    vertical-align: middle;
  }
  .dropdown-popup .item>input{
    margin-right: 8px;
  }
  .dropdown-popup .item:hover{
  }
  .dropdown-popup .search-item{
    padding: 3px;
  }
  .dropdown-popup .search-item input{
    border: solid 1px #eee;
    border-radius: 4px;
    padding: 6px;
    width: 100%;
  }
  .dropdown.no-border{
    border-color: transparent;
  }
  .dropdown.invalid{
    border-color: red !important;
    background: #ffc9c3 !important;
  }
  .dropdown.readonly{
    border-color: transparent;
  }
  .dropdown.readonly .fa{
    display: none;
  }
  .dropdown.gray{
    background: #eee;
  }
  .dropdown.gray .icon{
    background: #eee;
  }
  /* END DROPDOWN */

  /* BEGIN FORM FILL */
  .form-fill{
    table-layout: fixed;
    width: 100%;
  }
  .form-fill th{
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
  }
  .form-fill h5, .form-fill th{
    padding: .6em;;
    font-weight: 100;
  }
  /* END FORM FILL */

  /* BEGIN GRID */
  .gridhead{
    display: block;
    overflow-x: hidden;
    border: solid 1px #eee;
    border-bottom: none;
  }
  .gridhead.borderless{
    border: none;
    border-bottom: solid 1px #eee;
  }
  .gridhead *{
  }
  .grid-head{
  }
  .gridhead>table{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
  }
  .gridhead td{
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
  }
  .gridhead td.label{
    padding: .6em;;
    cursor: pointer;
    -moz-transition: background-color 300ms ease-in;
    -webkit-transition: background-color 300ms ease-in;
    position: relative;
    text-transform: uppercase;
  }
  .gridhead td.label:first-child{
    border-left: none;
  }
  .gridhead td.label:last-child{
    border-right: none;
  }
  .gridhead td.inactive{
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none 0px !important;
  }
  .grid-head td.label .separator{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    cursor: e-resize;
    border-right: solid 1px #eee;
  }
  .grid-head .sort-icon{
    position: absolute;
    top: 6px;
    bottom: 5px;
    right: 8px;
  }
  .grid{
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
    border: solid 1px #eee;
  }
  .grid.hscroll{ overflow-x:auto; }
  .grid>table{
    background: #fff;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
  }
  .grid>table>.grid-content>tr{
    border-bottom: solid 1px #eee;
  }
  .grid td{
    /* white-space: nowrap; */
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .grid td.label{
    padding: .6em;;
  }
  .grid .grid-size-label{
    padding: 0 8px;
  }
  .grid .grid-content tr.drag-over{
    background: #ddd;
  }
  .grid .grid-content tr.dragging{
    background: #fff;
  }
  .grid *[data-type]{
    /*border-color: transparent;*/
  }
  .grid.borderless{
    border: none;
  }
  .grid.borderless>table>.grid-content>tr{
    border: none;
  }
  .grid.selectable tr.active{
    background-color: #eee;
  }
  .grid.invalid{
    border-bottom: solid 1px red;
  }

  /* Hide grid drag if the grid is readonly */
  .grid.readonly .grid-drag{
    display: none;
  }

  /* END GRID */

  /* BEGIN INFO */
  .info{
    border-radius: 3px;
  }
  .info-ok{
    background: #8CC152;
    color: #fff;
  }
  .info-ok *{ color: #fff; }
  .info-error{
    background: #E9573F;
    color: #fff;
  }
  .info-error *{ color: #fff; }
  /* END INFO */

  /* BEGIN IMAGE */
  .image{
    display: inline-block;
    position:relative;
    overflow:hidden;
    background: #eee;
    border: solid 2px #eee;
    background-color: #ddd;
  }
  .image.obj-hover{
    border-color: #ccc;
  }
  .image .image-upload{
    display: none;
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 6px;
    font-size: 1.2em;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    color: rgba(0, 0, 0, .5);
  }
  .image:not(.readonly):hover .image-upload{
    display: block;
  }
  .image input[type="file"]{
    display: none;
  }
  .image img{
    display: block;
    width: auto;
    height: auto;
    object-fit: cover;
  }
  .image.invalid{
    border-color: red !important;
  }
  .image.no-image>img{
    background: url('https://www.nflfullhd.com/wp-content/themes/watchzaa/images/no-image-landscape.png') no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  .image-popup-img{
  }
  /* END IMAGE */

  /* BEGIN LABEL */
  label, .label{
    padding: .6em;
  }
  label.small{
    padding: .6em;
  }
  /* END LABEL */

  /* BEGIN LAYOUT */
  .row{
    box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex: 0 1 auto;
    -webkit-box-flex: 0;
    flex: 0 1 auto;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 10px;
    padding-right: 10px;
  }
  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12 {
    box-sizing: border-box;
    -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    padding-left: 10px;
    padding-top: 10px;
    overflow-x: hidden;
  }
  .col-lg {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 100%;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex-preferred-size: 8.333%;
    flex-basis: 8.333%;
    max-width: 8.333%;
  }
  .col-lg-2 {
    -ms-flex-preferred-size: 16.667%;
    flex-basis: 16.667%;
    max-width: 16.667%;
  }
  .col-lg-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -ms-flex-preferred-size: 33.333%;
    flex-basis: 33.333%;
    max-width: 33.333%;
  }
  .col-lg-5 {
    -ms-flex-preferred-size: 41.667%;
    flex-basis: 41.667%;
    max-width: 41.667%;
  }
  .col-lg-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -ms-flex-preferred-size: 58.333%;
    flex-basis: 58.333%;
    max-width: 58.333%;
  }
  .col-lg-8 {
    -ms-flex-preferred-size: 66.667%;
    flex-basis: 66.667%;
    max-width: 66.667%;
  }
  .col-lg-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -ms-flex-preferred-size: 83.333%;
    flex-basis: 83.333%;
    max-width: 83.333%;
  }
  .col-lg-11 {
    -ms-flex-preferred-size: 91.667%;
    flex-basis: 91.667%;
    max-width: 91.667%;
  }
  .col-lg-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }
  .row.sp0{
    padding-bottom: 0;
    padding-right: 0;
  }
  .row.sp0 .col-lg,
  .row.sp0 .col-lg-1,
  .row.sp0 .col-lg-2,
  .row.sp0 .col-lg-3,
  .row.sp0 .col-lg-4,
  .row.sp0 .col-lg-5,
  .row.sp0 .col-lg-6,
  .row.sp0 .col-lg-7,
  .row.sp0 .col-lg-8,
  .row.sp0 .col-lg-9,
  .row.sp0 .col-lg-10,
  .row.sp0 .col-lg-11,
  .row.sp0 .col-lg-12{
    padding-top: 0;
    padding-left: 0;
  }
  .row.middle .col-lg,
  .row.middle .col-lg-1,
  .row.middle .col-lg-2,
  .row.middle .col-lg-3,
  .row.middle .col-lg-4,
  .row.middle .col-lg-5,
  .row.middle .col-lg-6,
  .row.middle .col-lg-7,
  .row.middle .col-lg-8,
  .row.middle .col-lg-9,
  .row.middle .col-lg-10,
  .row.middle .col-lg-11,
  .row.middle .col-lg-12{
    align-self: center;
  }
  /* END LAYOUT */

  /* BEGIN MODAL */
  .modal{
    background: #fff;
    border-radius: 0;
    position: fixed;
    z-index: 9;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: all 100ms ease-in-out;
    transform: translate3d(0, 50px, 0);
    opacity: 0;
    box-shadow: 0 0 6px rgba(0, 0, 0, .1);
  }
  .modal.on{
    display: block;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  .modal.off{
    display: none;
  }
  .modal-body{
    overflow-y: auto;
    overflow-x: hidden;
  }
  .modal-foot{
    border-top: solid 1px #eee;
    text-align: right;
  }
  .modal-bg{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all .1s ease-in-out;
    background: rgba(0, 0, 0, .6);
    z-index: 4;
  }
  .modal-bg.on{
    display: block;
  }
  .modal-bg.dark-bg.on{
    background: rgba(0, 0, 0, .8);
  }
  .modal-state{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* END MODAL */

  /* BEGIN NAV */
  .nav{
    margin: 0;
    padding: 0;
  }
  .nav li{
    list-style-type: none;
    margin: 0;
    padding: 4px 24px;
    white-space: nowrap;
  }
  .nav li:last-child{

  }
  .nav li a{
    display: block;
  }
  .nav li:hover{
    background: rgba(255, 255, 255, .1);
  }
  .nav li>*{
    font-weight: 600;
    color: #ccc;
    vertical-align: middle;
  }
  .nav h5{
    font-weight: 600;
    padding: 6px 24px 8px 24px;
    margin: 0;
    color: #fff;
  }
  /* END NAV */

  /* BEGIN POPUP */
  .popup{
    position: fixed;
    z-index: 10;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    transition: all .1s ease-in-out;
    transform: scale(0.8);
    box-shadow: 0 0 10px #ccc;
    opacity: 0;
  }
  .popup.on{
    transform: scale(1);
    opacity: 1;
    display: block !important;
  }
  .popup.off{
    display: none;
  }
  /* END POPUP */

  /* BEGIN RADIO */
  .radio{
    border-bottom: solid 1px transparent;
  }
  .radio .item{
    padding: .6em;
    white-space: nowrap;
  }
  .radio input{
    display: inline-block;
    vertical-align: baseline;
    margin-right: .6em;
  }
  .radio label{
    vertical-align: baseline;
  }
  .radio.invalid{
    border-bottom: solid 1px red;
  }
  /* GROUP STYLE */
  .radio-group{
    border: solid 1px #ddd;
    border-radius: 4px;
    padding: 0;
    white-space: nowrap;
  }
  .radio-group .item{
    background: #eee;
    padding: 6px;
    white-space: nowrap;
  }
  /* END RADIO */

  /* BEGIN CUSTOMRADIO */
  .customradio.invalid{
    border-bottom: solid 1px red;
  }
  /* END CUSTOMRADIO */

  /* BEGIN TAB */
  .tab{
    display: inline-block;
  }
  .tab *{
    font-size: 13px;
  }
  .tab li{
    cursor: pointer;
    display: inline-block;
    padding: .4em .6em;;
  }
  .tab li.active{
  }
  .tab li{
    border-bottom: solid 1px #eee;
  }
  .tab li.active{
    border-color: #0075FF;
  }
  /* END TAB */

  /* BEGIN TABULAR */
  .tabular{

  }
  .tabular.selectable .tabular-item.active{
    background: rgba(0, 0, 0, .05);
  }
  .tabular.invalid{
    border-bottom: solid 1px red;
  }
  .tabular.active-mode>.tabular-item{
    display:none;
  }
  .tabular.active-mode>.tabular-item.active{
    display:block;
  }
  /* END TABULAR */

  /* BEGIN VW0 */
  .vw0 .tabular.selectable .tabular-item{
    padding: .8em;
    border-bottom: solid 1px #eee;
    white-space: nowrap;
  }
  .vw0 .mpreset-filter-tabular-cont{
    border-right: solid 1px #eee;
  }
  .vw0 .mpreset-filter-tabular .indice{
    width: 8px;
    height: 8px;
    margin: .4em;
    background: #eee;
  }
  .vw0 .mpreset-filter-tabular .indice.on{
    background: blue;
  }
  .vw0 .mpreset-filter-tabular .tabular-item>* {
    vertical-align: middle;
    padding: 0;
  }
  /* END VW0 */

  .indice{
    font-size: .75em;
    text-transform: capitalize;
    padding: 2px 15px;
    color: #333;
    background: #CECECE;
  }
  .indice-green{
    color: #fff;
    background: #A0D468;
  }
  .indice-red{
    color: #fff;
    background: #ED5565;
  }
  .indice-pink{
    color: #fff;
    background: #FFC0CB;
  }
  .indice-yellow{
    color: #fff;
    background: #FFCE54;
  }
  .indice-blue{
    color: #fff;
    background: #5D9CEC;
  }
  .indice-purple{
    color: #fff;
    background: #800080;
  }
  .indice-dark{
    color: #fff;
    background: #666566;
  }

  /* BEGIN TEXTAREA */
  .textarea{
    border: solid 1px #eee;
    background: #fff;
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
    border-radius: 3px;
  }
  .textarea textarea{
    border: none;
    padding: 6px;
    background: transparent;
    vertical-align: middle;
    width: 100%;
    background: transparent;
    resize: none;
    appearance: none;
    outline: none;
  }
  .textarea.no-border{
    border-color: transparent;
    background: transparent;
  }
  .textarea.invalid{
    border-color: red !important;
    background: #ffc9c3 !important;
  }
  .textarea.readonly{
    background: transparent;
    border-color: transparent;
  }
  .textarea.readonly .icon{
    display: none;
  }
  /* END TEXTAREA */

  /* BEGIN TEXTBOX */
  .textbox{
    border: solid 1px #eee;
    display: inline-block;
    background: #fff;
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    overflow: hidden;
  }
  .textbox input{
    border: none;
    padding: 6px;
    background: transparent;
    vertical-align: middle;
    background: transparent;
    display: block;
    width: 100%;
  }
  .textbox .icon{
    cursor: pointer;
    background: transparent;
    vertical-align: middle;
    padding: .6em;;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .textbox .icon.hidden{
    visibility: hidden;
  }
  .textbox.style-underline{
    border: none;
    border-bottom: solid 1px #eee;
  }
  .textbox.readonly{
    background: transparent;
    border-color: transparent;
  }
  .textbox.readonly .icon{
    display: none;
  }
  .textbox.error{
    border-color: #E9573F;
  }
  .textbox.no-border{
    background: transparent;
    border-color: transparent;
  }
  .textbox.invalid{
    border-color: red !important;
    background: #ffc9c3 !important;
  }
  .textbox.underlined{
    border-color: transparent;
    border-bottom-color: #eee;
  }
  .textbox.underlined.invalid{
    border-color: transparent !important;
    border-bottom-color: red !important;
    background: #ffc9c3 !important;
  }
  .textbox.borderless{
    border-color: transparent;
  }
  /* END TEXTBOX */

  /* BEGIN UPLOAD */
  .upload.readonly{
    display: none;
  }
  /* END UPLOAD */

  /* BEGIN TEXTFIELD */
  .textfield{
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    position: relative;
    overflow-x: hidden;
    white-space: pre-wrap;
  }
  .textfield.invalid{
    border-bottom-color: red;
  }
  .textfield:hover{
    border-color: rgba(0, 0, 0, .3);
  }
  .textfield>.item{
    background: red;
    color: #fff;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: .6em;
  }
  .textfield>input{
    background: transparent;
    border: none;
    padding: .6em;;
    width: 100%;
  }
  .textfield.dt-decimal>input{ text-align:right; }
  .textfield.align-left>input{ text-align:left; }
  .textfield.align-center>input{ text-align:center; }
  .textfield.align-right>input{ text-align:right; }
  .textfield.readonly, .textfield.readonly:hover{
    border-bottom: solid 1px #eee;
  }
  .textfield.readonly .icon-remove{
    display: none;
  }
  .textfield>.icon{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 6px;
    color: rgba(0, 0, 0, .08);
    cursor: pointer;
  }
  .textfield .text{
    background: #0075FF;
    color: #fff;
    padding: .2em .4em;
    margin: .1em;
    border-radius: .2em;
  }
  .textfield .icon-remove{
    color: rgba(255, 255, 255, .9);
    vertical-align: center;
  }
  .textfield.readonly .icon{
    display: none;
  }
  .textfield, .textfield>.icon{
  }
  .textfield:hover>.icon{
    color: rgba(0, 0, 0, .3);
  }
  .textfield-options>input, .textfield-options>.icon{
    cursor: pointer;
  }
  .textfield-date{
    vertical-align: middle;
    position: relative;
    white-space: nowrap;
    align-items: center;
    overflow: hidden;
    background: #fff;
  }
  .textfield-date.invalid{
    border-bottom-color: red;
  }
  .textfield-date.readonly, .textfield-date.readonly:hover{
    border-color: transparent;
  }
  .textfield-textarea textarea{
    border: none;
    padding: .6em;;
    background: transparent;
    vertical-align: middle;
    width: 100%;
    resize: none;
    appearance: none;
    outline: none;
  }
  .textfield-textarea.no-border{
    border-color: transparent;
    background: transparent;
  }
  .textfield-textarea.readonly{
    background: transparent;
    border-color: transparent;
  }
  .textfield-textarea.readonly .icon{
    display: none;
  }
  .textfield-options.readonly .icon{
    display: none;
  }
  /* END TEXTFIELD */

  /* BEGIN TOOLTIP */
  .tooltip{

    position: fixed;
    padding: 5px;
    background: rgba(0, 0, 0, .8);
    border: solid 1px rgba(0, 0, 0, .8);
    color: #fff;
    z-index: 10;
    display: none;

  }
  .tooltip{

    font-size: 13px;

  }
  .tooltip.on{

    display: block;

  }
  .tooltip .arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, .8);
    position: absolute;
    top: -4.99px;
    left: 10px;
  }
  .tooltip .arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, .8);;
    position: absolute;
    bottom: -4.99px;
    left: 10px;
  }
  /* END TOOLTIP */

  /* BEGIN THUMBVIEW */
  .thumb-view{
  }
  .thumb-view-item{
    margin: 0;
    overflow: hidden;
  }
  .thumb-view-item:hover{
  }
  .thumb-view-item-has-more{
  }
  /* END THUMBVIEW */

  .hpane{
    overflow-x: auto;
    overflow-y: hidden;
  }
  .vpane{
    overflow-x: hidden;
    overflow-y: auto;
  }

  /** FILTER BAR **/
  .filterbar{
    display: inline-block;
    min-width: 300px;
    min-height: 1em;
    background: #eee;
    padding: 5px 5px 0 0;
    border-radius: 5px;
  }
  .filterbar, .filterbar *{
    appearance: none;
    outline: none;
  }
  .filterbar .f-item{
    background: #fff;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 5px 5px;
    border-radius: 4px;
    box-shadow: 1px 1px 1px #ddd;
  }
  .filterbar .f-input{
    padding: 5px;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 5px 5px;
    min-width: 50px;
    color: #333;
  }
  .filterbar .f-input:empty::before{
    content: 'Search';
    color: #aaa;
  }
  .f-item-name{
    padding: 5px;
    cursor: pointer;
  }
  .f-item-oper{
    padding: 5px;
    cursor: pointer;
    background: #fff;
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
  }
  .f-item-val{
    padding: 5px;
    cursor: pointer;
  }
  .f-item-remove{
    padding: 5px;
    color: #eee;
    cursor: pointer;
    position: relative;
    top: 1px;
  }
  .f-item-remove:hover{
    color: #ccc;
  }
  .f-popup{
    background: transparent;
    padding: 0;
    border-radius: 4px;
  }
  .f-popup-item{
    display: block;
    padding: 10px 20px;
    background: #fff;
  }
  .f-popup .f-item{
    background: #fff;
    padding: 3px 8px;
    border: solid 1px #eee;
  }

  .metric-cont{
    height:100px;
    border: solid 2px #eee;
    padding: 16px 16px;
  }
  .metric-cont h1{
    display: block;
    padding: 0;
    margin: 0;
    font-size: 28pt;
  }

  h5{
    text-transform: uppercase;
    padding: 0;
    margin: 0;
  }

  /* BEGIN ANIMATE.CSS */
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }

  .spinner{
    display: inline-block;
    border: 2px solid rgba(0, 0, 0, .3);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
  }
  @keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }
  @-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }

  /* BEGIN PSEUDO */
  .large{ font-size: 1.2em; }
  .x-large{ font-size: 1.5em; }
  .bold{ font-weight:600; }
  .block{ display: block; }
  .border-right{ border-right: solid 1px #eee; }
  .border-left{ border-left: solid 1px #eee; }
  .border-bottom{ border-bottom: solid 1px #eee; }
  .border-top{ border-top: solid 1px #eee; }
  .nowrap{ white-space: nowrap; }
  .nowrap-hidden{ white-space: nowrap; overflow: hidden; }
  .padding5{ padding: 5px; }
  .padding10{ padding: 10px; }
  .padding20{ padding: 20px; }
  .align-left{ text-align: left; }
  .align-center{ text-align: center; }
  .align-right{ text-align: right; }
  .off{ display: none; }
  .cl-red{ color:#E9573F; }
  .cl-green{ color:#33972c; }
  .cl-yellow{ color:#F6BB42; }
  .selectable{ cursor:pointer; color:#ccc; }
  .selectable:hover{ cursor:pointer;color:#333; }
  .width10{ width: 10px }
  .width16{ width: 16px }
  .width24{ width: 24px }
  .width30{ width: 30px }
  .width32{ width: 32px }
  .width50{ width: 50px }
  .height10{ height: 10px }
  .height16{ height: 16px }
  .height24{ height: 24px }
  .height30{ height: 30px }
  .height36{ height: 36px }
  .width100{ width: 100px }
  .width200{ width: 200px }
  .width240{ width: 240px }
  .width300{ width: 300px }
  .width400{ width: 400px }
  .width480{ width: 480px }
  .width600{ width: 600px }
  .width800{ width: 800px }
  .padding3{ padding: 3px; }
  .padding5{ padding: 5px; }
  .padding6{ padding: 6px; }
  .padding7{ padding: 7px; }
  .padding8{ padding: 8px; }
  .padding9{ padding: 9px; }
  .padding10{ padding: 10px; }
  .padding010{ padding: 0 10px; }
  .padding15{ padding: 15px; }
  .padding20{ padding: 20px; }
  .padding30{ padding: 30px; }
  .padding40{ padding: 40px; }
  .margin5{ margin: 5px; }
  .margin10{ margin: 10px; }
  .margin15{ margin: 15px; }
  .margin20{ margin: 20px; }
  .margin30{ margin: 30px; }
  .margin40{ margin: 40px; }
  .hidden{ display: none; }
  .margin-right-10{ margin-right: 10px; }
  .relative{ position: relative; }
  .valign-middle, .valign-middle>*{ vertical-align: middle; }

  /* END PSEUDO */

}