form.dz {  border: 2px dashed lightgray;}

    html,body {
  font-family: 'Open Sans', serif;
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
  background-color: #fff;
}

    @keyframes scaleUp {
        from { opacity: 0; transform: translateY(10px); transform-origin: top center; }
    }
    @keyframes appear {
        from { opacity: 0;  }
    }
    @keyframes slideIn {
    from {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    }
    }

    @keyframes slideInFromBelow {
    from {
    -webkit-transform: translateY(25%);
    transform: translateY(25%);
    opacity: 0;
    }
    }

    @keyframes moveToTop {
    from { }
    to { -webkit-transform: translateY(-100%); transform:
    translateY(-100%); }
    }

    @keyframes flashWarning {
    from { 
        background-color: #00d1b2;
    
    }
    to {
        background-color: inherit;

    }
    }

    @keyframes flashPrimary {
    from { 
        background-color: #00d1b2;
    
    }
    to {

        background-color: inherit;
        

    }
    }
    
    tbody tr.live-removed {
        animation: flashWarning 1.0s ease both;
        animation-fill-mode: forwards;
    }
    tbody tr.live-added {
        animation: flashPrimary 1.0s ease both;
        animation-fill-mode: forwards;
    }
.nav.is-dark {
  background-color: #232B2D;
  color: #F6F7F7;
}
.nav.is-dark .nav-item a, .nav.is-dark a.nav-item {
    color: #F6F7F7;
}
.nav.is-dark .nav-item a.button.is-default {
    color: #F6F7F7;
    background-color: transparent;
    border-width: 2px;
}
.nav.menu {
  border-bottom: 1px solid #e1e1e1;
}
.nav.menu .nav-item .icon-btn {
  border: 3px solid #B7C6C9;
  border-radius: 90px;
  padding: 5px 7px;
  color: #B7C6C9;
}
.nav.menu .nav-item.is-active .icon-btn {
  color: #2EB398;
  border: 3px solid #2EB398;
}
    .slideInFromBelow {
        animation: slideInFromBelow 1.5s ease both;
    }

    .modal {
        animation: appear .7s ease both;
    }
    @keyframes grow-width {
        from {
            width: 0px;
            opacity: 0;
        }
    }
    @keyframes shrink-width {
        to {
            width: 0px;
            opacity: 0;
        }
    }

    .slide-in-right {
        animation: grow-width 0.5s ease both;
    }
    .slide-in-right div {
        width: 1000px;
        overflow: hidden;
    }

    .slide-out-right {
        animation: shrink-width 0.5s ease both;
    }
    .slide-out-right div {
        width: 1000px;
        overflow: hidden;
    }

    .inbox-messages {
        animation: scaleUp .3s ease both;
    }
.nav.menu .nav-item .icon-btn .fa {
  font-size: 20px;
  color: #B7C6C9;
}
.nav.menu .nav-item.is-active .icon-btn .fa {
  color: #2EB398;
}


nav.navbar .navbar-item.is-active  {
    background-color: #f5f5f5;
    color: #363636;
}
.aside {
  display:block;
  background-color: #F9F9F9;
  border-right: 1px solid #DEDEDE;
}
.messages {
  display:block;
  background-color: #fff;
  border-right: 1px solid #DEDEDE;
}
.message {
  display:block;
  background-color: #fff;
}
.aside .compose {
  height: 95px;
  margin:0 -10px;
  padding: 25px 30px;
}
.aside .compose .button {
  color: #F6F7F7;
}
.aside .compose .button .compose {
  font-size: 14px;
  font-weight: 700;
}
.aside .main {
  padding: 40px 10px 40px 30px;
  color: #6F7B7E;
}

.aside .sub-main {
    padding: 10px;
    color: #6F7B7E;
}
.aside .title {
  color: #6F7B7E;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}
.aside .main .item {
  display: block;
  padding: 10px 0;
  color: #6F7B7E;
}
.aside .main .item.is-active {
  background-color: #F1F1F1;
  margin: 0 -50px;
  padding-left: 50px;
}
.aside .main .item:is-active,.aside .main .item:hover {
  background-color: #F2F2F2;
  margin: 0 -50px;
  padding-left: 50px;
}
.aside .main .icon {
  font-size: 19px;
  padding-right: 30px;
  color: #A0A0A0;
}
.aside .main .name {
  font-size: 15px;
  color: #5D5D5D;
  font-weight: 500;
}
.messages {
  padding: 40px 40px 0px 20px;
}
.message {
  padding: 40px 20px;
}
.messages .action-buttons {
  padding: 0;
  margin-top: -20px;
}
.message .action-buttons {
  padding: 0;
  margin-top: -5px;
}
.action-buttons .control.is-grouped {
  display: inline-block;
  margin-right: 30px;
}
.action-buttons .control.is-grouped:last-child {
  margin-right: 0;
}
.action-buttons .control.is-grouped .button:first-child {
  border-radius: 5px 0 0 5px;
}
.action-buttons .control.is-grouped .button:last-child {
  border-radius: 0 5px 5px 0;
}
.action-buttons .control.is-grouped .button {
  margin-right: -5px;
  border-radius: 0;
}
.pg {
  display: inline-block;
  top:10px;
}
.action-buttons .pg .title {
  display: block;
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 3px;
  font-size:12px;
  color: #AAAAA;
}
.action-buttons .pg a{
  font-size:12px;
  color: #AAAAAA;
  text-decoration: none;
}
.is-grouped .button {
  background-image: linear-gradient(#F8F8F8, #F1F1F1);
}
.is-grouped .button .fa {
  font-size: 15px;
  color: #AAAAAA;
}
.inbox-messages .card {
  width: 100%;
}
.inbox-messages strong {
  color: #5D5D5D;
}
.inbox-messages .msg-check {
  padding: 0 20px;
}
.inbox-messages .msg-subject {
  padding: 10px 0;
  color: #5D5D5D;
}
.inbox-messages .msg-attachment {
  float:right;
}
.inbox-messages .msg-snippet {
  padding: 5px 20px 0px 5px;
}
.inbox-messages .msg-subject .fa {
  font-size: 14px;
  padding:3px 0;
}
.inbox-messages .msg-timestamp {
  float: right;
  padding: 0 20px;
  color: #5D5D5D;
}
.icon.padded  {
    margin-right: 0.25em !important;
    
}
.message-preview .avatar {
  display: inline-block;
}
.message-preview .top .address {
  display: inline-block;
  padding: 0 20px;
}
.avatar img {
  width: 40px;
  border-radius: 50px;
  border: 2px solid #999;
  padding: 2px;
}
.address .name {
  font-size: 16px;
  font-weight: bold;
}
.address .email {
  font-weight: bold;
  color: #B6C7D1;
}
.card.is-active {
  background-color:#F5F5F5;
}
    .table { table-layout: fixed }
    .table td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 9px; height: 60px; vertical-align: middle; }
    .table td.expandable {text-overflow: ellipsis; overflow: visible; white-space: nowrap; padding: 9px; height: 60px; vertical-align: middle;  }
    .table td.no-border { border: none; }

    .typeahead {
    position:relative;
    overflow:visible;
    }

    .modal {
        overflow: visible;
    }
    
    .modal-card-body {
        overflow: visible;
    }

.typeahead-menu {
    position:absolute;
    display: inline-block;
  width: 100%;
  top: 100%;
  left: 0;
  z-index: 10000;
  overflow: auto;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  /*  background-clip: padding-box; */
                                            
}
    .modal-card {
    overflow: auto;
    }
    
.typeahead-suggestion {
  display: block;
    overflow: visible;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.typeahead-suggestion:hover,
.typeahead-suggestion:focus,
    .typeahead-menu:not(:hover) .typeahead-highlighted
    {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #00d1b2;
  cursor: pointer;
}