.mdl-chip {
  height: 32px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background-color: #dedede;
  display: inline-block;
  color: rgba(0,0,0, 0.87);
  margin: 2px 0;
  font-size: 0;
  white-space: nowrap; }
  .mdl-chip__text {
    font-size: 13px;
    vertical-align: middle;
    display: inline-block; }
  .mdl-chip__action {
    height: 24px;
    width: 24px;
    background: transparent;
    opacity: 0.54;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    margin: 0 0 0 4px;
    font-size: 13px;
    text-decoration: none;
    color: rgba(0,0,0, 0.87);
    border: none;
    outline: none;
    overflow: hidden; }
  .mdl-chip__contact {
    height: 32px;
    width: 32px;
    border-radius: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    overflow: hidden;
    text-align: center;
    font-size: 18px;
    line-height: 32px; }
  .mdl-chip:focus {
    outline: 0;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
  .mdl-chip:active {
    background-color: #d6d6d6; }
  .mdl-chip--deletable {
    padding-right: 4px; }
  .mdl-chip--contact {
    padding-left: 0; }

.mdl-list {
  display: block;
  padding: 8px 0;
  list-style: none; }

.mdl-list__item {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.04em;
  line-height: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 48px;
  box-sizing: border-box;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px;
  cursor: default;
  color: rgba(0,0,0, 0.87);
  overflow: hidden; }
  .mdl-list__item .mdl-list__item-primary-content {
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
    -webkit-flex-grow: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
    text-decoration: none;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
    .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-icon {
      margin-right: 32px; }
    .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar {
      margin-right: 16px; }

.mdl-list__item-icon {
  height: 24px;
  width: 24px;
  font-size: 24px;
  box-sizing: border-box;
  color: rgb(117,117,117);
}

.mdl-list__item-avatar {
  height: 40px;
  width: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: rgb(117,117,117);
  font-size: 40px;
  color: white;
}

.mdl-progress {
  display: block;
  position: relative;
  height: 4px;
  width: 500px;
  max-width: 100%; }

.mdl-progress > .bar {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0%;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

.mdl-progress > .progressbar {
  background-color: rgb(63,81,181);
  z-index: 1;
  left: 0; }

.mdl-progress > .bufferbar {
  background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181));
  z-index: 0;
  left: 0; }

.mdl-progress > .auxbar {
  right: 0; }

@supports (-webkit-appearance: none) {
  .mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
  .mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
    background-image: linear-gradient(to right, rgba(255,255,255, 0.7), rgba(255,255,255, 0.7)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181));
    -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo=");
            mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjEyIiBoZWlnaHQ9IjQiIHZpZXdQb3J0PSIwIDAgMTIgNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxlbGxpcHNlIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImN4IiBmcm9tPSIyIiB0bz0iLTEwIiBkdXI9IjAuNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogIDwvZWxsaXBzZT4KICA8ZWxsaXBzZSBjeD0iMTQiIGN5PSIyIiByeD0iMiIgcnk9IjIiIGNsYXNzPSJsb2FkZXIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iY3giIGZyb209IjE0IiB0bz0iMiIgZHVyPSIwLjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgLz4KICA8L2VsbGlwc2U+Cjwvc3ZnPgo="); } }

.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
  background-image: linear-gradient(to right, rgba(255,255,255, 0.9), rgba(255,255,255, 0.9)), linear-gradient(to right, rgb(63,81,181), rgb(63,81,181)); }

.mdl-progress.mdl-progress--indeterminate > .bar1,
.mdl-progress.mdl-progress__indeterminate > .bar1 {
  background-color: rgb(63,81,181);
  -webkit-animation-name: indeterminate1;
          animation-name: indeterminate1;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear; }

.mdl-progress.mdl-progress--indeterminate > .bar3,
.mdl-progress.mdl-progress__indeterminate > .bar3 {
  background-image: none;
  background-color: rgb(63,81,181);
  -webkit-animation-name: indeterminate2;
          animation-name: indeterminate2;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear; }

@-webkit-keyframes indeterminate1 {
  0% {
    left: 0%;
    width: 0%; }
  50% {
    left: 25%;
    width: 75%; }
  75% {
    left: 100%;
    width: 0%; } }

@keyframes indeterminate1 {
  0% {
    left: 0%;
    width: 0%; }
  50% {
    left: 25%;
    width: 75%; }
  75% {
    left: 100%;
    width: 0%; } }

@-webkit-keyframes indeterminate2 {
  0% {
    left: 0%;
    width: 0%; }
  50% {
    left: 0%;
    width: 0%; }
  75% {
    left: 0%;
    width: 25%; }
  100% {
    left: 100%;
    width: 0%; } }

@keyframes indeterminate2 {
  0% {
    left: 0%;
    width: 0%; }
  50% {
    left: 0%;
    width: 0%; }
  75% {
    left: 0%;
    width: 25%; }
  100% {
    left: 100%;
    width: 0%; } }

.mdl-snackbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  cursor: default;
  background-color: #323232;
  z-index: 3;
  display: block;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  will-change: transform;
  -webkit-transform: translate(0, 80px);
          transform: translate(0, 80px);
  transition: -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
  transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1), -webkit-transform 0.25s cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none; }
  @media (max-width: 479px) {
    .mdl-snackbar {
      width: 100%;
      left: 0;
      min-height: 48px;
      max-height: 80px; } }
  @media (min-width: 480px) {
    .mdl-snackbar {
      min-width: 288px;
      max-width: 568px;
      border-radius: 2px;
      -webkit-transform: translate(-50%, 80px);
              transform: translate(-50%, 80px); } }
  .mdl-snackbar--active {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    pointer-events: auto;
    transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
    transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1); }
    @media (min-width: 480px) {
      .mdl-snackbar--active {
        -webkit-transform: translate(-50%, 0);
                transform: translate(-50%, 0); } }
  .mdl-snackbar__text {
    padding: 14px 12px 14px 24px;
    vertical-align: middle;
    color: white;
    float: left; }
  .mdl-snackbar__action {
    background: transparent;
    border: none;
    color: rgb(255,64,129);
    float: right;
    text-transform: uppercase;
    padding: 14px 24px 14px 12px;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
    overflow: hidden;
    outline: none;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    -webkit-align-self: center;
        -ms-flex-item-align: center;
                -ms-grid-row-align: center;
            align-self: center; }
    .mdl-snackbar__action::-moz-focus-inner {
      border: 0; }
    .mdl-snackbar__action:not([aria-hidden]) {
      opacity: 1;
      pointer-events: auto; }

.mdl-layout__content {
    -ms-flex: 0 1 auto;
    position: relative;
    display: inline-block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
}

.mdl-layout.is-upgraded .mdl-layout__tab-panel.is-active {
    display: block;
}

.mdl-layout {
    width: 100%;
    /* height: 100%; */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.mdl-layout__container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.hidden {
    display: none !important;
}

html {
    position: relative;
    min-height: 100%;
}
* {
    font-family: "Roboto", "Helvetica", sans-serif;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}
.container .text-muted {
    margin: 20px 0;
}
.page-content {
    background-color: white;
    height: 100%;
}
.license-data {
    font-size: 0.9em;
    color: black;
}
a.mdl-layout__tab, a.mdl-layout__tab:hover {
    text-decoration: none;
}

.mdl-card:not(.login-control) {
    width: 100%;
    min-width: 100%;
    width: unset;
    min-width: unset;
}
.mdl-card.login-control {
    min-width: 600px;
}
.ticket.mdl-list__item {
    background-color: white;
    border-bottom: solid 1px #f3f3f3;
    line-height: unset;
    width: 100%;
    cursor: pointer;
}

.tag-holder {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.v-a-middle{
    vertical-align: middle;
}
h5.modal-title, h6.modal-title {
    margin: unset;
}
.modal-dialog .mdl-textfield {
    display: block;
    width: 100%;
}
/*#new-ticket-form button {
    display: block;
    margin-left: auto;
}*/
.current-ticket .mdl-card__supporting-text {
    color: black;
    font-size: initial;
    width: 100%;
}
.current-ticket .ticket-description {
    margin-bottom: 12px;
}
.current-ticket .ticket-answers {
    margin-top: 40px;
}
.ticket-answer {
    display: flex;
}
.ticket-answer .answer {
    flex: 1;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 4px;
    min-width: 0;
}

.answer-date, .tticket-date, .note-date {
    color: #aaa;
    margin-left: 5px;
}

.ticket-edit {
    background-color: #fafafa;
    padding: 10px;
}

.ticket-ans {
    margin-top: 25px;
}

.ticket-ans button {
    margin-top: 8px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-image: url(https://fpish.net/Thumbnails/AvatarMale-Transparent.png);
    background-repeat: round;
}
.new-ticket-button {
    position: fixed;
    right: 16px;
    bottom: 16px;
    color: white !important;
    z-index: 1000;
}
.login-dropdown .dropdown-menu {
    left: -250px;
    right: -25px;
}
.logout-dropdown .dropdown-menu {
    right: 0;
    left: auto;
    white-space: nowrap;
    padding: 8px;
}
.logout-dropdown .dropdown-menu a {
    color: #aaa;
}
.login-dropdown .dropdown-menu .input-name, .mdl-card.login-control .input-name {
    flex: 1;
}
.login-dropdown .dropdown-menu .input-holder, .logout-dropdown .dropdown-menu .input-holder, .mdl-card.login-control .input-holder {
    display: flex;
    flex-wrap: wrap;
    margin: 12px 8px;
}
.login-dropdown .dropdown-menu .input-holder.login, .logout-dropdown .dropdown-menu .input-holder.logout, .mdl-card.login-control .input-holder.login {
    justify-content: flex-end;
}
.logout-btn {
    padding: 0 8px;
}
.logout-caret {
    font-size: 16px;
    vertical-align: middle;
}

.nuget-explain-card {
    margin-top: 8px;
}
.ticket-list {
    margin-left: 0px;
}
.completed-ticket {
    background-color: #7cd820;
}
.old-ticket {
    background-color: #F05524;
}
.number-of-comments {
    margin-left: 8px;
}

.ticket-grid {
    padding:    0;
}

.ticket-card {
    /* overflow: auto; */
}

.subscriptions .subscription-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}
main.mdl-layout__content .mdl-layout__tab-panel {
    background-color: white;
    position: relative;
    overflow: hidden;
}
.ticket-tools {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ticket-title {
    flex: 1;
    padding-bottom: 8px;
}
.mdl-card.login-control {
    margin: 0 auto;
    margin-top: 50px;
    display: flex !important;
}

.second-level-navigation {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.login-control .mdl-card__supporting-text {
    margin: auto;
}

.modal h4 {
    font-size: initial;
    line-height: initial;
    -moz-osx-font-smoothing: grayscale;
    margin: unset;
}
.modal h3, .modal h4 {
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-weight: 400;
}
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6, .modal p {
     padding: unset;
}

#md-help pre {
    display:            block;
    padding:            9.5px;
    margin:             0 0 10px;
    font-size:          13px;
    line-height:        1.42857143;
    color:              #333;
    word-break:         break-all;
    word-wrap:          break-word;
    background-color:   #f5f5f5;
    border:             1px solid #ccc;
    border-radius:      4px;
}

.ticket-edit .mdl-textfield {
    margin-bottom:  12px;
}

button+button {
    margin-left:    4px !important;
}
#edit-ticket-name {
    width:          100%;
}
.ticket-edit .mdl-textfield {
    width:          100%;
}

.ticket-tools {
    margin-left:    70px;
}
.answer-toolbar {
    color:          #aaa !important;
    margin-right:   16px;
    cursor:         pointer;
    user-select: none;
}

.answer-toolbar:hover, .answer-toolbar:active, .answer-toolbar:visited, .answer-toolbar:focus {
    text-decoration: none !important;
}

.apps-dropdown {
    margin-left:    8px;
    height:         28px;
    line-height:    28px;
}

.apps-dropdown .mdi:before {
    font-size:      28px;
}

.apps-dropdown .dropdown-menu div {
    text-align:     right;
}

.ticket-list-name {
    margin-bottom:  3px;
    font-weight:    bold;
}
.ticket-positioner {
    margin-left:    10px;
    flex:           1;
}

.answer-level-1 {
    margin-left:    69px !important;
}
.answer-level-2 {
    margin-left:    138px !important;
}
.answer-level-3 {
    margin-left:    207px !important;
}
.answer-level-4 {
    margin-left:    276px !important;
}
.answer-level-5 {
    margin-left:    345px !important;
}
.answer-level-6 {
    margin-left:    414px !important;
}

.ticket-answers .children {
    margin-top:     10px;
    margin-bottom:  10px;
}

.subscription-row .subscription-type {
    flex:           1;
}

.modal .modal-content {
    max-height:     calc(100vh - 60px);
}
.modal .modal-content .modal-body {
    overflow-y:     auto;
}
.license-data > div {
    margin-bottom:  8px;
}
.edit-comment, .edit-email {
    width:          100%;
}
.nuget-toolbar {
    position:       relative;
}

.answer-meta {
    display:        flex;
}
.answer-meta:first-child {
    margin-bottom: 12px;
}
.answer-meta .answer-user {
    font-weight: bold;
}

.topic-meta {
    display: flex;
    flex-direction: column;
}

.topic-meta .ticket-title {
    align-self: unset;
    padding-top: 0 !important;
}

.login-title {
    font-size:      34px;
    height:         34px;
    line-height:    34px;
    width:          100%;
}
.centered-text {
    text-align: center;
}
.login-page {
    background-color: #fafafa;
}
.other-options {
    width: calc(100% - 16px);
    text-align: right;
    margin: 8px;
}
.other-options a, .other-options a:hover, .other-options a:visited {
    display: block;
    color: #427fed !important;
    text-decoration: none;
    cursor: pointer;
}
.input-holder .err {
    width: 100%;
    color: red;
    text-align: right;
}
.inp-with-error {
    border-color: red;
}
.input-name {
    line-height: 27px;
}
.error {
    color: red;
    margin: 8px;
}
.helper {
    margin: 8px;
}
.custom-checkbox {
    width: unset;
}
.mdl-layout__drawer > .mdl-layout-title {
    background-color: #3F51B5;
    color: white;
    line-height: 48px;
    padding-left: 0;
    text-align: center;
}
.mdl-layout__drawer-button {
    margin:0;
}
.mdl-layout__header {
    min-height: 48px;
}

.mdl-layout__header-row .mdl-layout-title {
    padding-left: 6px;
}

.ticket .mdl-checkbox {
    margin-left: 10px;
    width: unset;
}
.custom-right-drawer {
    right: 0;
    left: calc(100%);
    -webkit-transform: translateX(calc(100%));
    transform: translateX(calc(100%));
}
.custom-right-drawer.active-drawer {
    -webkit-transform: translateX(-240px);
    transform: translateX(-240px);
}
.custom-drawer{
    width: 0;
    /* left: 250px; */
}
.custom-drawer.active-drawer {
    width: 240px;
}
.mdl-layout__content.no-drawer{
    margin-left: 0 !important;
}

.mdl-layout-title a {
    color: white;
    cursor: pointer;
    letter-spacing: 0.36px;
    font-size: 18px;
}
.mdl-card {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
.mdl-layout-title a, .mdl-layout-title a:hover, .mdl-layout-title a:visited {
    text-decoration: none;
}
.mdl-layout__content {
    background-color: #fafafa;
}
.mdl-layout__tab {
    letter-spacing: 0.36px;
    font-weight: 500;
    font-size: 16px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
}
.logged-in .dropdown > span {
    letter-spacing: 0.36px;
    font-weight: 500;
    font-size: 16px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
}

.login-control .mdl-card__supporting-text {
    color: black;
}

.input-holder {
    background-color: white
}

.div-header {
    margin-top: 4px;
    margin-bottom: 8px;
}
.mdl-list {
    padding: 0;
}
.mdl-layout__drawer {
    border-right: 0;
}
.mdl-textfield {
    padding: 0;
}
.modal-body .mdl-textfield {
    padding: 20px 0;
}
label.mdl-textfield__label {
    margin-bottom: 0;
}
.mdl-textfield__label {
    top: 4px;
}
.modal-body .mdl-textfield__label {
    top: 24px;
}
.mdl-textfield__label:after {
    bottom: 0;
}
.modal-body .mdl-textfield__label:after{
    bottom: 20px;
}
.mdl-textfield:focus, .mdl-textfield input:focus, .mdl-textfield select:focus {
    outline: none;
}
.modal .CodeMirror-scroll {
    max-height: calc(60vh - 340px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}
.ticket-a {
    position: relative;
}
.is-solution {
    position: absolute;
    left: -10px;
    width: 5px;
    top: 0;
    bottom: 0;
    background-color: green;
}

.license-card .mdl-card__title {
    display: flex;
    flex-direction: column;
}

.license-card .mdl-card__title .mdl-card__title-text {
    align-self: flex-start;
}

.pageloader {
    width: 100%;
    width: unset;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.hidden-away .new-ticket-button {
    display: none;
}

/* Transitioning */
.mdl-layout__content {
    transition: margin-left 0.3s linear;
}

.custom-drawer {
    transition: width 0.3s linear;
}

/* **************** */
.page-content {
    -ms-overflow-y: auto;
    max-height: 100%;
}

.hidden-away {
    position: relative;
}

.hidden-away > div {
    position: absolute;
    left: 100vw;
    top: 0;
}

#error-snackbar {
    width: 100%;
    max-width: unset;
}

.primary-section {
    align-self: flex-start;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.secondary-section {
    align-self: flex-end;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.primary-section .mdl-layout__tab, .secondary-section .mdl-layout__tab {
    color: rgb(63,81,181);
}

.mdl-layout__drawer {
    background-color: white;
}

.mdl-layout:not(.is-small-screen) .mdl-layout__header {
    margin-left: 0 !important;
    width: 100% !important;
}
/*
.mdl-layout:not(.is-small-screen) .mdl-layout__drawer .mdl-navigation {
    display: none;
}*/

.clickable {
    cursor: pointer;
}

.sidepanel-login-channels {
    width: 100%;
}

.sidepanel-login {
    user-select: none;
    text-decoration: none;
    outline-width: 0;
    letter-spacing: 0.36px;
    font-weight: 500;
    font-size: 16px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    margin: 0;
    border: none;
    margin-top: 40px;
    float: left;
    position: relative;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 48px;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
}

.sidepanel-link-archive {
    display: flex;
    flex-direction: column;
}

.sidepanel-archive-list {
    display: block;
}

.sidepanel-archive-listitem {
    list-style: none;
    cursor: pointer;
    margin-bottom: 4px;
    border-bottom: 1px solid #efefef;
}

.sidepanel-link {
    user-select: none;
    text-decoration: none;
    outline-width: 0;
    letter-spacing: 0.36px;
    font-weight: 500;
    font-size: 18px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    margin: 0;
    border: none;
    float: left;
    position: relative;
    display: block;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 48px;
    line-height: 48px;
    text-align: center;
    overflow: hidden;
}

#left-drawer .sidepanel-link {
    padding-left: 15px;

}

.markdown-help {
    padding: 4px;
}

#left-drawer .sidepanel-link-2{
    padding-left: 15px;
    padding-right: 15px;
}

#left-drawer .mdl-navigation__link.nav-menu-link {
    text-transform: uppercase;
    padding: 5px 15px !important;
    text-decoration: none !important;
    background: unset !important;
}

.sidepanel-counter {
    user-select: none;
    background-color: #f3f3f3;
    border-radius: 16px;
    width: 3em;
    min-width: 3em;
    text-align: center;
    height: 2em;
    line-height: 2em;
}

.sidepanel-link-2.active > .sidepanel-counter {
    background-color: #337ab7;
    color: white;
}

.sidepanel-link > i {
    margin-right: 8px;
}

.sidepanel-link-2 {
    user-select: none;
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    outline-width: 0;
    letter-spacing: 0.36px;
    font-weight: normal;
    font-size: 16px;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    margin: 0;
    border: none;
    padding: 0 0 0 20px;
    float: left;
    position: relative;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 36px;
    line-height: 32px;
    overflow: hidden;
    cursor: pointer;
}

.sidepanel-link:hover, .sidepanel-link-2:hover {
    text-decoration: none;
}

.sidepanel-link-2.active {
    color: #337ab7;
    font-weight: bold;
}
/* Payment page */
.payment-wssp, .payment-paypal, .payment-subscription, .payment-basic-info {
    margin-left: 16px;
}
.payment-wssp > div, .payment-paypal > div, .payment-subscription > div, .payment-basic-info > div {
    margin-top: 4px;
    margin-bottom: 4px;
}
.mdl-card.payment-item {
    padding: 16px;
}
.payment-basic-info {
    margin-bottom: 10px;
}
.payment-item .material-icons {
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
}
/* #*# */

.mdl-button--colored.mdl-button__raised .mdi {
    color: white;
}

.invoices-holder {
    padding: 10px;
}
.dl-button {
    margin-left: auto;
}

.invoices table {
    width: 100%;
}


.invoice-table-holder, .mdl-card.login-control.invoices-holder {
    /*
        width: fit-content;
        - this would be so amazing, if it would work...
        - FF supports it with the moz- prefix
        - IE and EDGE aren't supporting it :(;
        - fallback solution:;
    */
    display: table !important;
}

.invoice-table-holder.admin-table, .invoice-table-holder.admin-table table {
    width: 100%;
}

.answer-meta .answer-content {
    flex: 1;
}

.ticket-a .indicator {
    /*visibility:         hidden;*/
    opacity:            0;
    /* margin-top:         4px; */
    width:              8px;
    height:             8px;
    border-radius:      50%;
    background-color:   red;
    transition:         opacity 3s linear;
}

.ticket .indicator {
    visibility:         hidden;
    position:           absolute;
    top:                0;
    bottom:             0;
    left:               0;
    width:              4px;
}

.ticket .indicator.completed-ticket,
.ticket .indicator.old-ticket {
    visibility:         visible;
}

.ticket-a.unread-comment .indicator,
.ticket.changed-ticket .indicator {
    /*visibility: visible;*/
    opacity: 1;
}

#filter-button {
    display: none !important;
    line-height: 32px;
    margin-top: -2px;
}

.filter-btn {
    height: 48px;
    font-size: 24px;
    margin-left: 8px;
    line-height: 48px;
}

.right-icons-holder {
    display: flex;
    padding-right: 12px;
}

.custom-right-drawer {
    display: none;
}

.mdl-list__item.ticket {
    font-size: 14px;
}

.ticket-date .material-icons,
.ticket-comment .material-icons,
.ticket-user .material-icons {
    font-size: 12px;
    margin-right: 8px;
}

.ticket-list-name {
    color: #337ab7;
}

/*.ticket-date, .ticket-comment, .ticket-user {
    line-height: 14px;
}*/

.ticket-date .material-icons,
.ticket-comment .material-icons,
.ticket-user .material-icons {
    vertical-align: middle;
}

.mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar {
    margin-left:  8px;
    margin-right: 8px;
    padding: 2px;
    border: 1px solid #337ab7;
}

.mdl-list__item-avatar, .mdl-list__item-avatar.material-icons {
    height: 40px;
    width: 40px;
    font-size: 36px;
}

.ticket {
    position: relative;
}

.mdl-list__item-avatar {
    background-color: transparent !important;
}

#tagsModal {
    z-index: 5000;
}

/* Create  */
#createModal .modal-dialog, #replyModal .modal-dialog, #tagsModal .modal-dialog, #t-edit .modal-dialog, #noteModal .modal-dialog {
    height: 60vh;
    width: 60vw;
    max-width: unset;
}

#createModal .modal-dialog .modal-content, #replyModal .modal-dialog .modal-content, #tagsModal .modal-dialog .modal-content, #t-edit .modal-dialog .modal-content, #noteModal .modal-dialog .modal-content {
    height: 60vh;
    width: 60vw;
}

#createModal .modal-dialog .modal-content, #replyModal .modal-dialog .modal-content, #tagsModal .modal-dialog .modal-content, #t-edit .modal-dialog .modal-content, #noteModal .modal-dialog .modal-content
{
    display: flex;
    flex-direction: column;        
}

#createModal .mdl-tabs__tab-bar, #replyModal .mdl-tabs__tab-bar, #t-edit .mdl-tabs__tab-bar, #nodeModal .mdl-tabs__tab-bar {
    justify-content: flex-start;
    min-height: 48px;
}

#createModal .modal-body, #replyModal .modal-body, #tagsModal .modal-body, #t-edit .modal-body, #noteModal .modal-body{
    display: flex;
    flex-direction: column;
}

#createModal .mdl-tabs__panel, #replyModal .mdl-tabs__panel, #t-edit .mdl-tabs__panel, #noteModal .mdl-tabs__panel  {
    overflow-y: auto;
}

#fpish-login-frame-container iframe {
    height: 38px;
}

.t-l-n {
    min-width: 0;
    margin-right: 5px;
    flex: 0 1 auto;
    order: 1;
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.t-l-n > div {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

.ticket-list-name {
    display: flex;
}

.t-l-n-o-c {
    flex: 1 0 auto;
    order: 2;
}

.ticket-positioner {
    min-width: 0;
}

.mdl-list__item-primary-content {
    min-width: 0;
}

.scroller-div {
    overflow-y: auto;
}

.scroller-div.unscroll {
    overflow-y: unset;
}

.md-rendered p {
    font-size: 16px;
}

.md-rendered ul, .md-rendered ol {
    font-size: inherit;
}

.md-rendered .pre-container {
    display: flex !important;
}

.md-rendered img {
    max-width: 95%;
    height: auto;
}

.md-rendered h1, .md-rendered h2, .md-rendered h3, .md-rendered h4, .md-rendered h5, .md-rendered h6 {
    margin-top: 0;
    padding-bottom: 0 !important;
}

.mdl-layout__header .mdl-layout__drawer-button {
    display: none;
}

.mdl-layout-title {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    background-color: #f3f3f3 !important;
    color: black !important;
}
#left-drawer a {
    color: black !important;
}

.login-dropdown.dropdown {
    height: 48px;
}

.filter-card {
    /*position:   absolute;*/
    padding:    16px;
    /*right:      0;
    top:        0;
    bottom:     0;*/
}

.mdl-cell.mdl-cell--2-col.filter-card > h4 {
    margin: unset;
    border-bottom: 1px solid #f3f3f3;
}

.mdl-tabs__panel {
    position: relative;
}

.editor {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

a {
    color: #337ab7;
}

code {
    color: #337ab7;
}

.editor textarea {
    height: 100%;
    padding: 4px !important;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    resize: none;
    font-size: 18px;
}

.editor .CodeMirror.cm-s-default.CodeMirror-wrap {
    height: 100%;
}

.modal-body .mdl-tabs__panel {
    flex: 1;
}

.modal-body .mdl-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#createModal.epic-modal .modal-dialog, #replyModal .modal-dialog, #noteModal .modal-dialog, #tagsModal.epic-modal .modal-dialog, #t-edit.epic-modal .modal-dialog, #noteModal.epic-modal .modal-dialog {
    margin: 0;
    display: flex;
    flex: 1;
    position: relative;
    height: auto;
}
#createModal.epic-modal .modal-dialog .modal-content, #replyModal .modal-dialog .modal-content, #noteModal .modal-dialog .modal-content, #tagsModal.epic-modal .modal-dialog .modal-content, #t-edit.epic-modal .modal-dialog .modal-content, #noteModal.epic-modal .modal-dialog .modal-content {
    max-height: unset;
    flex: 1;
    min-height: 0;
    height: inherit;
}

.bootstrap-tagsinput .tag {
    background-color: #337ab7;
    padding: 3px 5px;
    border-radius: 10px;
}

.tag {
    font-weight: unset;
}

#createModal .modal-body, #replyModal .modal-body, #t-edit .modal-body, #noteModal .modal-body, #warningModal .modal-body {
    flex: 1 1 0%;
}

#createModal .bootstrap-tagsinput, #replyModal .bootstrap-tagsinput, #noteModal .bootstrap-tagsinput {
    width: 100%;
    max-height: 54px;
    overflow-y: auto;
}
.filter-list {
    display: flex;
    flex-wrap: wrap;
}

.filter-list-item {
    margin-right: 15px;
    margin-top: 10px;
}
.filter-name {
    margin-left: 8px;
}

.ticket-answer .avatar, .ticket-note .avatar {
    height: 40px;
    width: 40px;
    border: 1px solid #337ab7;
    border-radius: 50%;
    background-image: none;
    /*background-image: url(https://fpish.net/Thumbnails/AvatarMale-Transparent.png);*/
    padding: 2px;
}

.ticket-edit .mdl-tabs__tab-bar, .ticket-ans .mdl-tabs__tab-bar {
    justify-content: flex-start;
}
.ticket-edit .mdl-tabs, .ticket-ans .mdl-tabs {
    display: flex;
    flex-direction: column;
    height: 250px;
    max-height: 250px;
    min-height: 0;
}

.ticket-edit .mdl-tabs .mdl-tabs__panel, .ticket-ans .mdl-tabs .mdl-tabs__panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
} 

.md-rendered .pre-container pre:last-child {
    flex: 1;
}

.answer-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.answer.md-rendered {
    margin-right: 0;
}
.answer-content .pre-container {
    padding-right: 0;
}

.custom-tag {
    padding: 3px 5px;
    border-radius: 8px;
    cursor: pointer;
}
.custom-tag.active {
    background-color: cornflowerblue;
    color: white;
}

.mdl-tabs__tab:after {
    display: none !important;
}
.mdl-tabs__tab.is-active {
    background-color: #F0F0F0;
}

#createModal .modal-footer, #t-edit .modal-footer {
    border-top: 0px;
}

#createModal .modal-header {
    border-bottom: 0px;
}

.mdl-tabs__tab-bar {
    border-bottom: 0px;
    border-top: 1px solid #E0E0E0;
}

.tag-btn {
    font-size: 20px;
    padding: 0px;
    margin: 0px 10px;
    color: #000;
    background: #e0e0e0;
}
.tag-btn .mdi-tag-multiple {
    color: #000;
}
.mdl-chip {
    background-color: #f3f3f3;
}

.mdl-chip.active {
    background-color: #337ab7;
    color: white;
}

.filter-list .mdl-chip {
    cursor: pointer;
}

.clear-all {
    cursor: pointer;
    color: rgb(63, 81, 181);
}

#right-drawer .mdl-navigation {
    padding-top: 8;
}

#right-drawer h4 {
    margin-top: 0;
    margin-left: 8px;
}

.clear-link {
    color: rgb(63, 81, 181);
    cursor: pointer;
    font-size: 60%;
}

/* Fix the layout for mobiles, using vh is kind of interesting in mobile view */
.page-content {
    display: flex;
}

.support-scroller, .scroller-div {
    flex: 1
}

/* Make the icons unselectable */
.material-icons, .mdi, .fa {
    user-select: none;
}

#createModal, #replyModal, #tagsModal, #t-edit, #noteModal {
    display: flex !important;
}

/* !!!!!!!!!!!!!!Site specific!!!!!!!!!!!!!! */
.nuget-toolbar .mdl-card__menu {
    right: -20px;
    top: -10px;
}

.ticket-tag {
    background-color: grey;
    color: white;
    border-radius: 6px;
    padding: 3px 4px;
    font-size: 0.8em;
    font-weight: bold;
}

.subscriptions {
    width: auto;
    margin: 0;
    padding: 28px;
    min-height: unset;
}

.mdl-navigation a.mdl-navigation__link {
    color: white;
}

.mdl-layout__header-row .mdl-navigation a {
    color: white
}

.mdl-layout__header-row .mdl-navigation a:hover {
    text-decoration: none;
}

.login-drop {
    padding-right: 0px !important;
}


.mdl-layout {
    overflow-y: hidden;
}

body {
    overflow-y: hidden;
}

.apps-dropdown .mdl-button {
    margin-top: -2px;
}

.apps-dropdown .dropdown-menu div {
    text-align:     right;
    padding: 		10px;
}


.modal-header {
    display: flex;
}

.modal-header .mdl-textfield, .modal-header .modal-title {
    flex: 1;
}

.ticket-a {
    margin-bottom: 20px;
}

.ticket-ans:empty, .ticket-tools:empty {
    margin: 0;
}

.flex-elem {
    display: flex;
    flex-wrap: wrap;
}

.gh-bb-url {
    margin-right: 10px;
    display: flex;
    align-items: baseline;
}

.gh-bb-url > .fa {
    padding-right: 6px;
}

.gh-bb-url > .mdi.mdi-open-in-new {
    padding-top: 8px;
    color: #337ab7;
    padding-right: 8px;
}

.ticket-a .answer-action {
    margin-top: 15px;
    margin-left: 70px;
}

.control-holder {
    align-self: center;
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

.control-holder > .button {
    margin-right: 8px;
}

.login-dropdown .dropdown-menu {
    width: 240px;
    left: auto;
    right: 0;
    top: 30px;
    height: 82px;
    align-items: center;
}

.login-dropdown.open .dropdown-menu {
    display: flex;
}

#fpish-panel {
    padding: 0 14px;
}

.pointed-cursor {
    cursor: pointer;
}

.mdl-tabs__panel {
    border: 1px solid #ccc;
}

.mdl-tabs__tab, .mdl-tabs__tab:hover,.mdl-tabs__tab:active, .mdl-tabs__tab:focus {
    text-decoration: none;
}

.boxed-layout {
    border-bottom: solid 1px #f3f3f3;
    /*background-color: #f3f3f3;
    padding: 7px;*/
}

.hljs {
    background-color: #f3f3f3 !important;
}

.hljs-title, .hljs-section, .hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion {
    color: #1f7199 !important;
}

button:focus {
    outline: none;
}

/* **** Mobile view **** */
.is-small-screen .ticket-title {
    font-size: 20px;
}

.is-small-screen .tag-holder {
    display: none;
}
.mdl-layout.is-small-screen .mdl-layout-spacer_ {
    flex: 1
}
/*
.is-small-screen .mdl-layout-title {
    display: none;
}*/
.is-small-screen .logged-in, .is-small-screen .logged-out {
    flex: 1;
    text-align: end;
}
.is-small-screen .login-dropdown .dropdown-menu {
    left: auto;
    right: 0;
    width: 212px;
}
.is-small-screen .logout-btn {
    display: block;
}

.sidemenu {
    /*position: absolute;
    top: 0;
    bottom: 0;
    left: 0;*/
    padding: 16px;
}

.mdl-cell {
    background-color: white;
    border: 1px solid #f3f3f3;
    margin: 0px !important;
}

.mdl-cell--8-col {
    max-width: calc(60% + 36px);
    width: calc(60% + 36px);
    margin-left: calc(20% - 17px) !important;
}

.mdl-cell--2-col {
    width: calc(20% - 16px);
}

.innerlinks {
    margin-left: 40px;
}

.ticket-note {
    margin-bottom: 20px;
    align-items: center;
    line-height: 28px;
}
.note-assigned-to {
    font-weight: bold;
    margin: 0 8px;
}
/* .note-text {
    background-color: yellow;
}
.note-time {
    background-color: green;
}
.note-reaction {
    background-color: blue;
}
.note-assign {
    background-color: red;
}
.note-status {
    background-color: pink;
}
.note-tag {
    background-color: purple;
} */
.note-author {
    font-weight: bold;
    margin-right: 8px;
}
.note-body {
    padding: 8px 8px;
    background-color: #efefef;
    display: flex;
}
.note-react, .note-tags {
    font-weight: bold;
    margin-left: 8px;
    background-color: red;
    border-radius: 16px;
    padding: 0px 5px;
    height: 30px;
    display: inline-block;
}
.note-reaction__0 {
    background-color: red !important;
}
.note-reaction__1 {
    background-color: lightgreen !important;
}
.note-reaction__2 {
    background-color: lightcyan !important;
}
.note-reaction__3 {
    background-color: turquoise !important;
}
.note-reaction__4 {
    background-color: lightpink !important;
}
.note-reaction__5 {
    background-color: black !important;
    color: white !important;
}
.note-reaction__6 {
    background-color: peru !important;
}
.note-reaction-toolbar {
    display: flex;
    margin-left: 40px;
    margin-bottom: 8px;
}
.note-reaction-button {
    cursor: pointer;
    border-radius: 16px;
    padding: 6px;
    margin-left: 8px;
    background-color: #efefef;
}
.note-timespent {
    margin: 0px 8px;
    font-weight: bold;
}

.note-assignee {
    margin-left: 47px;
}

.note-tag-removed {
    background-color: #ff2525 !important;
}

.note-tag-added {
    background-color: lightgreen !important;
}

.new-post-title {
    margin: 16px;
    width: calc(100% - 25px);
}

.new-post-tagfield h4 {
    margin: 0;
    font-size: 16px;
}

.new-post-tagfield .clear-link {
    font-size: 100%;
}

.new-post-inputfield {
  margin: 0 16px;
}

.new-post-inputfield .mdl-tabs {
    height: 250px;
    max-height: 250px;
}

.new-post-inputfield .mdl-tabs__tab-bar {
    justify-content: flex-start;
}

.new-post-inputfield .markdown-help {
    max-height: 200px;
    overflow: auto;
}

.answer-toolbar.active {
    font-weight: bold;
    color: black !important;
}

button.close {
    margin: 16px 0;
}

.ticket-edit .mdl-textfield__label {
    bottom: unset;
    top: unset;
    right: unset;
    left: unset;
    position: relative;
}

.note-assign-field {
    display: inline-block;
    border: none;
    padding: 8px;
    background-color: #eee;
}

.ticket-edit > ul {
    max-height: 300px;
    overflow: auto;
    margin-top: 16px;
}

.new-post-tagfield {
    margin: 0 16px;
    margin-bottom: 16px;
}

.mdl-chip__text {
    font-size: 15px;
}

.bootstrap-tagsinput .tag {
    font-size: 15px;
}

.filter-myfilters .bootstrap-tagsinput {
    width: calc(100% - 32px);
}

.new-post-tagfield .bootstrap-tagsinput {
    width: 100%;
}

.new-post-title .mdl-textfield__label {
    font-size: 28px;
    top: 12px;
}

.new-post-title .mdl-textfield__input {
    font-size: 28px;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    padding-left: 8px;
}

.new-post-title label {
    margin-left: 0;
}

.mdl-tabs__panel .md-rendered {
    padding: 4px;
}

.ticket-note .answer-toolbar {
    font-weight: bold;
    margin-left: 8px;
}

.ticket-edit.edit-title {
    display: flex;
}

.ticket-edit.edit-title button {
    flex: 1;
}

.mdl-card {
    box-shadow: unset;
}

.note-input {
    font-size: 16px;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    padding: 8px;
    flex: 9;
    margin-right: 16px;
}

.tag.label.label-info {
    padding-left: 12px;
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 32px;
    border-radius: 16px;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    position: absolute;
    top: 0px !important;
    right: 6px !important;
}

.mdl-textfield.mdl-js-textfield.new-post-title {
    padding-right: 6px;
}

.tag.label.label-info {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 16px;
    position: relative;
    top: 3px;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    position: absolute;
    top: 2px;
    right: 4px;
}

.filter-list-item {
    max-width: 100%;
}

.mdl-chip__text {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.filter-list .mdl-chip {
    max-width: 100%;
}

.note-tag-action {
    display: flex;
    margin-bottom: 4px;
}

.note-tag-action .filter-myfilters {
    flex: 5;
}

.note-tag-action .mdl-button {
    flex: 1;
}

.mdl-button.blue-button, .blue-button.mdl-button:focus:not(:active), .blue-button.mdl-button.mdl-button--colored:focus:not(:active) {
    background-color: #3F51B5;
    color: white;
}

.mdl-button.grey-button, .grey-button.mdl-button:focus:not(:active), .grey-button.mdl-button.mdl-button--colored:focus:not(:active) {
    background-color: #f3f3f3;
    color: black;
}

.ticket-edit.edit-title {
    background: unset;
}

.ticket-header {    
    display: flex;
    margin: 22px 8px 8px;
    border-bottom: 2px solid #efefef;
    padding-bottom: 8px;
    justify-content: space-between;    
    overflow-x: hidden;
    word-wrap: break-word;
    flex-wrap: wrap;
}

.ticket-header__title {
    font-weight: 300;
    font-size: 22px;
    margin: 4px 8px;
    padding-top: 4px;
    color: black;
    word-break: break-word;
}

.blog-entry .ticket-header__title {
    font-size: 30px;
}

.ticket-header__link {
    font-size: 16px;
    padding-top: 8px;
    color: #337ab7;
    float: right;
}

.blog-entry .ticket-header__refresh {
    display: none;
}

.property {
    border-bottom: 2px solid #f3f3f3;
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    max-width: 300px;
}

.property.notifications {
    flex-direction: row;
    align-items: center;
}

.property .property-title {
    line-height: 48px;
    font-weight: 500;
    font-size: 18px;
}

.property.notifications .property-title {
    flex: 1;
}

.property.notifications button {
    flex: 1;
    margin-top: 5px;
}

.property .assignee-holder {
    padding-left: 0px;
}

.property .property-time {
    padding-left: 0px;
}

.property .property-tags {
    display: flex;
    padding-left: 0px;
    flex-wrap: wrap;
}

.property .property-participants {
    padding-left: 0px;
}

.property .propery-participants-more {
    padding-left: 8px;
    color: #aaa;
}

.property .mdl-list__item-avatar, .property .mdl-list__item-avatar.material-icons {
    width: 30px;
    height: 30px;
    margin: 0px 4px 4px 4px;
    border: 1px solid #337ab7;
    border-radius: 50%;
    padding: 2px;
}

.gh-bb-url.mobile {
    display: none;
}

.ticket-header-inner {
    display: flex;
    flex: 1;
    align-items: center;
}

.list-header {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url(/img/theader.jpg);
    background-position-y: center;
    background-size: cover;
}

.list-header__title {
    font-size: 72px;
    font-weight: 400;
    margin: auto;
    color: white;
}

.searchbox {
    display: flex;
    max-width: 190px;
    justify-content: space-between;
}

.searchbox > input, .searchbox > input:focus {
    flex: 1;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    padding-left: 8px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    margin: 0 16px 0 0;
    outline: unset;
    font-size: 18px;
}

.list-header__search-result {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
}

.list-header__search-result-text {
    margin: auto;
    font-size: 18px;
}

.masonry-container{
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
}

.entry-card {
    border-bottom: 1px solid #efefef;
    margin: 4px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    cursor: pointer;
}

.blog__title {
    font-size: 22px;
    color: #337ab7;
    margin: 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    text-align: center;
    padding-bottom: 8px;
    letter-spacing: 0.04em;
}

.blog__desc {
    padding-bottom: 8px;
    font-size: 16px;
}

.blog__meta {
    padding: 4px;
    font-size: 16px;
}

.blog-card-tags {
    margin-top: 0.5em;
}

.note-actions {
    display: flex;
    flex-wrap: wrap;
}

.note-actions > div {
    margin: 0 4px;
}

.note-actions > .active {
    color: black;
}

.masonry-item,
.masonry-size {
    width: calc(24% - 8px);
}

.masonry-item {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 16px;
}

.blog-searchbar {
    flex: 1;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    padding: 8px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    margin: 4px 16px 0 0;
    outline: unset;
    font-size: 18px;
}

.note-body p {
    margin-bottom: 0;
}

.title-editor > input {
    width: 100%;
    margin-bottom: 4px;
    padding: 4px;
}

.answer-title {
    font-weight: 300;
    font-size: 22px;
    margin: 4px 8px;
    padding-top: 4px;
    color: black;
    word-break: break-word;
}

.patterns-page {
    width: 100%;
    height: 100%;
}

.patterns-subtab {
}

.patterns-tab-content {
    width: 100%;
}

.related-links h1 {
    margin: 1em 0 0.5em;
    font-size: 1.5em;
}

.related-links h2 {
    font-size: 1.2em;
}

@media screen and (max-width: 1630px) {
    .masonry-item,
    .masonry-size {
        width: 32%;
    }
}

@media screen and (max-width: 1300px) {
    .masonry-item,
    .masonry-size {
        width: 48%;
    }
}

@media screen and (max-width: 630px) {
    .masonry-item,
    .masonry-size {
        width: 100%;
    }
}

@media screen and (max-width: 1025px) {
    .mdl-layout__header .mdl-layout__drawer-button {
        margin: 0;
    }
    .login-control.mdl-card {
        min-width: 400px;
    }
    .sidemenu {
        display: none !important;
    }
    .mdl-cell.mdl-cell--8-col.ticket-card {
        margin: 0 !important;
        width: 100vw !important;
    } 
    .filter-myfilters {
        margin-left: 8px;
    }
}

@media screen and (max-width: 839px) {
    .filter-card {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    /*.ticket-answer .avatar {
        display: none;
    }    */

    .searchbox {
        margin: 8px;
    }

    .searchbox > button {
        min-width: 32px;
        padding: 0 8px;
    }

    .gh-bb-url {
        display: none;
    }

    .gh-bb-url.mobile {
        display: block;
        font-size: 22px;
        padding-top: 6px;
    }

    .ticket-header button {
        display: none;
    }

    .note-tag-action {
        flex-direction: column;
        height: 100%;
    }

    .note-tag-action .filter-myfilters {
        margin: 0;
    }

    #noteModal .bootstrap-tagsinput {
        max-height: unset;
        height: 95%;
    }

    .note-reaction-toolbar {
        margin: 0;
        flex-direction: column;
    }

    .ticket-note {
        width: unset;
    }

    .note-reaction-button {
        margin-bottom: 16px;
        text-align: center;
        padding: 16px;
    }

    #noteModal .ticket-edit > ul {
        max-height: unset;
    }

    #noteModal .ticket-edit {
        display: flex;
        flex-direction: column;
    }

    #t-edit .ticket-edit.edit-title {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        background-color: unset;
    }

    #t-edit .ticket-edit.edit-title .note-input {
        margin-bottom: 16px;
    }

    #t-edit .ticket-edit.edit-title button {
        width: 150px;
        align-self: center;
    }

    .subscriptions .subscription-row {
        flex-direction: column;
    }
    .subscription-row .subscription-type {
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
    }
    .subscription-row .credit-section {
        flex: 1;
    }
    .subscription-type span {
        flex: 1;
        margin-bottom: 8px;
    }

    .mc > .mc-inner {
        max-width: unset;
    }
}

@media screen and (max-width: 600px) {

    .invoice-table-holder {
        display: unset !important;
    }
    .mdl-card.login-control.invoices-holder {
        display: flex;
    }

    .invoices-holder .invoice-table-holder table.mdl-data-table {
      border: 0 !important;
      position: unset !important;
      width: 100% !important;
    }

    .invoices-holder .invoice-table-holder table.mdl-data-table thead {
      display: none !important;
    }

    .invoices-holder .invoice-table-holder table.mdl-data-table tr {
      margin-bottom: 10px !important;
      display: block !important;
      border-bottom: 2px solid #ddd !important;
      position: unset !important;
      height:unset !important;
    }

    .invoices-holder .invoice-table-holder table.mdl-data-table td {
      display: block !important;
      text-align: right !important;
      font-size: 13px !important;
      border-bottom: 1px dotted #ccc !important;
      padding: 5px !important;
      position: unset !important;
    }

    .invoices-holder .invoice-table-holder table.mdl-data-table td:last-child {
      border-bottom: 0 !important;
    }

    .invoices-holder .invoice-table-holder table.mdl-data-table td:before {
      content: attr(data-label) !important;
      float: left !important;
      text-transform: uppercase !important;
      font-weight: bold !important;
    }
} 

@media screen and (max-width: 480px) {
    .mdl-card.login-control {
        min-width: 300px;
        width: auto;
    }
    .login-title {
        font-size: 24px;
    }
    .mdl-card.login-control .input-holder {
        flex-direction: column;
    }
    .input-holder select {
        width: 100%;
    }
    .input-holder .err {
        text-align: left;
    }
}

@media screen and (max-width: 840px) {
    .filter-list {
        margin-left: 8px;
        margin-left: 8px;
    }

    .filter-list-item {
        margin-right: 0;
        margin-left: 0;
    }
    .ticket-tools {
        margin-left: 37px !important;
    }
    .answer.md-rendered {
        margin-left: 5px !important;
    }
    .answer-level-1 {
        margin-left:    37px !important;
    }
    .answer-level-2 {
        margin-left:    74px !important;
    }
    .answer-level-3 {
        margin-left:    111px !important;
    }
    .answer-level-4 {
        margin-left:    148px !important;
    }
    .answer-level-5 {
        margin-left:    185px !important;
    }
    .answer-level-6 {
        margin-left:    222px !important;
    }

    .ticket-answer .avatar {
        height: 32px;
        width: 32px;
        border-radius: 50%;
        /* background-image: url(https://fpish.net/Thumbnails/AvatarMale-Transparent.png); */
    }

    .current-ticket .mdl-title {
        padding-bottom: 8px;   
    }

    .current-ticket .mdl-card__supporting-text {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .current-ticket .ticket-answers {
        margin-top: 20px;
    }

}
@media screen and (min-width: 840px) {
    .t-l-n {
        font-size: 125%;
        overflow-y: hidden;
    }
}

@media screen and (max-width: 767px ) {

    html {
        font-size: 14px;
    }

    .ticket-a {
        margin-bottom: 12px;
    }

}

/* FLEX-GRID-IMPLEMENTATION */

.flex-grid {
    display: flex;
    flex-direction: row;
    max-width: 100%;
}

.lhs, .rhs {
    background-color: white;
}

.lhs {
    min-width: 300px;
    max-width: 300px;
}

.rhs {
    min-width: 300px;
    max-width: 300px;
}

.mc {
    flex: 1;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
}

.mc > .mc-inner {
    /* overflow-y: auto; */
    flex: 1;
    max-width: calc(100% - 600px);
    word-wrap: break-word;
}

pre, pre * {
    font-family: Consolas, "Lucida Console", Monospace !important;
    overflow-x: auto;
    overflow-y: hidden;
}

.markdown-rmrkbl pre code {
    padding: 0.5em;
}

@media screen and (max-width: 1024px) {
    .lhs.sidemenu, .rhs.sidemenu {
        display: none !important;
    }
    #filter-button {
        display: block !important;
    }
    #filter-button.hidden {
        display: none !important;
    }
    .custom-right-drawer {
        display: block;
    }
    .mc > .mc-inner {
        max-width: unset;
        flex-wrap: wrap;
        overflow-x: hidden;
    }
}

@media screen and (max-width: 794px){
    .list-header__title {
        font-size: 36px;
    }
}
@media screen and (max-width: 568px){
    .list-header__title {
        font-size: 32px;
    }
}

blockquote:before, blockquote:after {
    content: unset;
}

blockquote {
    border-left: solid 5px #eee;
    color: #aaa;
}

span.pinned-badge {
    position: absolute;
    right: 5px;
    top: -5px;
    transform: rotate(45deg);
}
.avatar-holder {
    position: relative
}

.blog-month-holder {
    display: flex;
    align-items: baseline;
    flex: 1;
    min-width: 0;
}

.list_avatar {
    display: inline-block;
}

.blog-month {
    text-overflow: ellipsis;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    margin-right: 4px;
}

.markdown-rmrkbl {
    overflow: hidden;
}

/* #-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-##-#-# */
/* PLAN IS TO MAKE THIS SCSS BASED */

/** BULMA **/

/* DRAWERS
    VARIABLES
        - drawer width (left/right)
        - transition-time (left/right)
 */
.lhs-drawer {
    width: 300px;
    position: fixed;
    left: -300px;
    top: 0;
    transition: left 0.1s linear;
    bottom: 0;
    z-index: 5000;
    background-color: white;
    overflow: auto
}

.lhs-drawer.shown {
    left: 0;
}

.right-drawer {
    width: 240px;
    position: fixed;
    left: 100vw;
    right: 0;
    top: 0;
    transition: left 0.1s linear;
    bottom: 0;
    z-index: 5000;
    background-color: white;
}

.right-drawer.shown {
    left: calc(100vw - 240px);
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    right:0;
    left: 100vw;
    z-index: 4999;
    background-color: rgba(10, 10, 10, 0.86);
}

.drawer-backdrop.shown {
    left: 0;
}

/*
    ##########
    # HEADER #
    ##########
*/

    /* LHS ICON */
    .c-d-button {
        margin: 0;
        display: block !important;
        height: 48px;
        width: 48px;
        border: 0;
        text-align: center;
        cursor: pointer;
    }

    .c-d-button .fa {
        line-height: 48px;
    }

/*
    LIST CONTENT
*/

.ticket-date, .ticket-comment {
    margin-right: 8px;
}
.current-ticket .ticket-date, .current-ticket .ticket-tags {
    margin-bottom: 8px;
}

.ticket-date .fa,
.ticket-comment .fa,
.ticket-user .fa {
    font-size: 12px;
    align-self: center;
    margin-right: 4px;
}

/* This replaces mdl-list__item-avatar */
.list_avatar {
    height: 40px;
    width: 40px;
    font-size: 36px;
    box-sizing: border-box;
    color: #fff;
    background-color: transparent;
    margin-left: 8px;
    margin-right: 8px;
    padding: 2px;
    border: 1px solid #337ab7;
    border-radius: 50%;
}

.list_avatar.bb-icon {
    background: url(/img/bb.svg);
    background: url(/img/bb.svg), transparent;
    background-size: 27px;
    background-repeat: no-repeat;
    background-position: 5px 4px;  
    background-position-x: center;
    background-position-y: center;
    padding: 0;
}

.list_avatar.gh-icon {
    background-image: url(/img/gh.svg) !important;
    background-size: 40px 40px;
    background-repeat: no-repeat;    
    background-position-x: center;
    background-position-y: center;
    padding: 0;
}

.forum-tag {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    margin: 2px 0;
    border: 0;
    border-radius: 16px;
    color: rgba(0,0,0,.87);
    font-size: 0;
    white-space: nowrap;
    background-color: #f3f3f3;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
}

.button {
    box-shadow: 2px 2px 0 0 #EFEFEF;
}

.button.fab-btn {
    border-radius: 50%;
}

a {
    color: #337ab7;
    cursor: pointer;
    text-decoration: none;
}

.gh-bb-url > .fa.fa-open {
    padding-top: 8px;
    color: #337ab7;
    padding-right: 8px;
}

html {
    overflow-y: unset;
}
.mdl-tabs__tab {
    margin: 0;
    border: none;
    padding: 0 24px;
    float: left;
    position: relative;
    display: block;
    text-decoration: none;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(0,0,0,.54);
    overflow: hidden;
}
.mdl-tabs__tab.is-active {
    background-color: #EFEFEF;
}
.mdl-tabs__panel {
    display: none;
}
.mdl-tabs__panel.is-active {
    display: block;
}

.button.is-info {
    box-shadow: 1px 1px 0 0 rgba(63,81,181, 0.5);
}

.button.clear-btn {
    background: 0 0;
    border: none;
    border-radius: 2px;
    color: rgb(63,81,181);
    position: relative;
    height: 48px;
    margin: 0;
    min-width: 64px;
    padding: 6px 16px;
    display: inline-block;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 36px;
    vertical-align: middle;
}

.c-ripple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.c-ripple__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(110, 110, 110, .50);
}

.c-ripple.is-active .c-ripple__circle {
    animation: a-ripple .4s ease-in;
}

/**
 * Animation: Ripple
 * --------------------------------------------------
 */

@keyframes a-ripple {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}

.c-button {
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: 0;
  vertical-align: middle;
  overflow: visible;
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  letter-spacing: 1px;
  background: transparent;
  border: 0;
  user-select: none;
  box-shadow: 2px 2px 0 0 darken(#434A54, 5%);
  transition: all 0.2s ease;
}

.navbar-item:hover, .navbar-link:hover {
    text-decoration: none !important;
}

.loginlayout-backdrop h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
}

.md-rendered li {
    margin-left: 24px;
}

.md-rendered ul {
    list-style-type: initial;
}

.modal {
    z-index: 1041;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

.navbar {
    position: relative;
    padding: .5rem 1rem;
}

.navbar-brand {
    float: left;
    padding-top: .25rem;
    padding-bottom: .25rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
    background: white;
}

.modal-content {
    margin: 0;
    display: flex;
    flex: 1;
    position: relative;
    height: auto;
    min-height: calc(100vh - 60px);
    flex-direction: column;
}

.modal-body {
    flex: 1
}

.modal-footer {
    display: flex;
    flex-direction: row-reverse;
}

.modal-title {
    font-size: 1.25em;
}

.close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.25em;
}

.modal-header, .modal-footer {
    padding: 4px;
    min-height: 50px;
}

.modal .mdl-tabs__tab {
    padding: 0 12px;
}

.navbar {
    display: flex;
    align-items: center;
}

.fa-filter {
    font-size: 14px !important;
}

.navbar-brand {
    flex: 1;
}

.rhs .searchbox > input,.rhs .searchbox > input:focus {
    margin: 0
}

.textarea {
    font-size: 18px;
}

.answer-title:empty {
    margin: 0;
}
.button a {
    text-decoration: none;
}
.clip-svg {
    clip-path: unset !important;
}

.related-meta {
    display: flex;
    height: 48px;
    overflow: hidden; 
}

.related-meta .avatar {
    height: 40px;
    width: 40px;
    border: 1px solid #337ab7;
    border-radius: 50%;
    background-image: none;
    padding: 2px;
}

.box > h3 {
    height: 24px;
    overflow: hidden; 
}

.related-title {
    margin-bottom: 16px;
    font-weight: bold;
    height: 115.2px;
    overflow: hidden; 
}

.related-meta .name-and-date {
    margin-left: 8px;
}

.related-link .author {
    margin-left: 5px;
    margin-right: 5px;
}

.related-link .box {
    box-shadow: 0 1px 7px rgba(0,0,0,.05);
    border-radius: 0;
}

.related-links .columns {
    background-color: rgba(170, 170, 170, 0.05);
    margin-left: 0;
    margin-right: 0;
}

.forum-hero {
    height: 72px;
}

.status-property > .status-holder {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.status-property > .status-holder > .property-title {
  flex: 1;
}

.private-link {
  cursor: pointer;
}

label.checkbox {
  font-size: 24px;
  display: flex;
  align-items: center;
  width: fit-content;
}

label.checkbox > input[type=checkbox] {
  margin-right: 12px;
  width: 24px;
  height: 24px;
}

.support-tag .mdl-chip {
  background-color: lightblue;
}

.new-post-footer {
  margin: 0 16px;
  flex-direction: row;
  align-items: center;
  margin-top: 12px;
}

.chkbox-holder {
  flex: 1;
}

.note-time input {
  margin-left: 16px;
}

.note-time {
  align-items: center;
}

.ticket-edit.note-time-edit .mdl-tabs {
  height: 150px;
}

.calendar button.button {
  background-color: inherit !important;
  box-shadow: none;
  border: none;
}

.timenoteholder {
  flex: 1;
  display: flex;
  align-items: center;
}

.timenoteholder input {
  flex: 1;
}

#noteModal .timenoteholder {
  flex: unset;
  margin: 6px;
}

.editor-preview {
  overflow: auto;
}

.sidepanel-login-channels > .sidepanel-link {
  display: flex;
  align-items: center;
  width: 100%;
}

.sidepanel-login-channels > .sidepanel-link > .loggedin-section-holder {
  flex: 1;
  display: flex;
  align-items: center;
}

.sidepanel-login-channels > .sidepanel-link > .loggedin-section-holder > i {
  margin-right: 8px;
}