Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

7
LINES

< > BotCompany Repo | #1030601 // Copy stuff to clipboard

JavaX source code (Dynamic Module) [tags: use-pretranspiled] - run with: Stefan's OS

Uses 911K of libraries. Click here for Pure Java version (2229L/16K).

!7

cprint {
  start-thread {
copyTextToClipboard(unquote([["/*\r\nmixins\r\n*/\r\n/*\r\n/mixins\r\n*/\r\n/*\r\ncolor\r\n*/\r\n/*\r\nGlobals\r\n*/\r\nbody {\r\n  margin: 0;\r\n  min-height: 100vh;\r\n  font-family: 'Montserrat', sans-serif; }\r\n\r\n* {\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  font-size: 16px; }\r\n\r\n.container-fluid {\r\n  width: 100%;\r\n  padding: 0 15px;\r\n  margin: 0 auto; }\r\n\r\n.mt-2 {\r\n  margin-top: 2rem; }\r\n\r\n.mb-2 {\r\n  margin-bottom: 2rem; }\r\n\r\n.border-rounded {\r\n  border-radius: 50%; }\r\n\r\n.img-fluid {\r\n  max-width: 100%;\r\n  height: auto; }\r\n\r\n.hide {\r\n  display: none; }\r\n\r\n.table {\r\n  width: 100%;\r\n  margin-bottom: 2rem;\r\n  color: #212529;\r\n  border-collapse: collapse;\r\n  background-color: #fff; }\r\n  .table th,\r\n  .table td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: center; }\r\n  .table thead th {\r\n    color: #4097C8;\r\n    font-weight: 600;\r\n    font-style: italic; }\r\n  .table thead,\r\n  .table tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n    border-collapse: collapse; }\r\n  .table tbody {\r\n    overflow: hidden scroll;\r\n    display: block; }\r\n    .table tbody::-webkit-scrollbar-track {\r\n      background: #4097C8;\r\n      border-bottom: 3px solid transparent;\r\n      border-right: 3px solid transparent;\r\n      border-left: 3px solid transparent;\r\n      background-clip: content-box;\r\n      /* THIS IS IMPORTANT */ }\r\n    .table tbody::-webkit-scrollbar {\r\n      width: 8px; }\r\n    .table tbody::-webkit-scrollbar-thumb {\r\n      border-radius: 10px;\r\n      background: #4097C8; }\r\n    .table tbody tr.company-meta-wrapper {\r\n      display: none; }\r\n    .table tbody tr td {\r\n      font-size: 14px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px; }\r\n      .table tbody tr td:first-of-type {\r\n        font-weight: 600 !important;\r\n        text-align: left;\r\n        text-transform: uppercase; }\r\n      .table tbody tr td img {\r\n        margin-left: 16px;\r\n        margin-right: 10px;\r\n        vertical-align: middle; }\r\n    .table tbody tr:hover {\r\n      background: #4097c8;\r\n      background: -webkit-gradient(linear, left top, right top, from(rgba(64, 151, 200, 0.2987570028)), to(rgba(64, 151, 200, 0)));\r\n      background: linear-gradient(90deg, rgba(64, 151, 200, 0.2987570028) 0%, rgba(64, 151, 200, 0) 100%);\r\n      -webkit-box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);\r\n              box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16); }\r\n      .table tbody tr:hover td {\r\n        border-bottom: none; }\r\n\r\n.table-wrapper {\r\n  border-radius: 20px;\r\n  overflow: hidden;\r\n  background-color: #fff;\r\n  -webkit-box-shadow: 0 7px 20px rgba(0, 0, 0, 0.26);\r\n          box-shadow: 0 7px 20px rgba(0, 0, 0, 0.26); }\r\n\r\n.gradient-img-bg {\r\n  background-image: url(\"imgs/icons/left.svg\"), url(\"imgs/icons/right.svg\");\r\n  background-position: top left, bottom right;\r\n  background-repeat: no-repeat, no-repeat;\r\n  background-size: contain, contain; }\r\n\r\n.start-chat-button {\r\n  width: 80px;\r\n  height: 80px;\r\n  position: fixed;\r\n  -webkit-box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.16);\r\n          box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.16);\r\n  border-radius: 50%;\r\n  background-color: #fff; }\r\n\r\n.toggle-chat {\r\n  width: 80px;\r\n  height: 80px;\r\n  display: -webkit-box;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-pack: center;\r\n      -ms-flex-pack: center;\r\n          justify-content: center;\r\n  -webkit-box-align: center;\r\n      -ms-flex-align: center;\r\n          align-items: center;\r\n  padding: 10px; }\r\n\r\n.shadow-bg {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 2;\r\n  background-color: rgba(0, 0, 0, 0.9); }\r\n\r\n.chat-on-phone {\r\n  position: fixed;\r\n  background: url(\"imgs/mobile.png\") no-repeat top left;\r\n  background-size: cover;\r\n  z-index: 3;\r\n  display: -webkit-box;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-pack: center;\r\n      -ms-flex-pack: center;\r\n          justify-content: center;\r\n  -webkit-box-align: center;\r\n      -ms-flex-align: center;\r\n          align-items: center;\r\n  -webkit-box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2);\r\n          box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2); }\r\n  .chat-on-phone .chat-on-phone-wrapper {\r\n    position: absolute;\r\n    top: 54px;\r\n    left: 13px;\r\n    padding: 0 10px;\r\n    width: calc(100% - 25px);\r\n    height: calc(100% - 74px);\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n        -ms-flex-direction: column;\r\n            flex-direction: column;\r\n    -webkit-box-pack: justify;\r\n        -ms-flex-pack: justify;\r\n            justify-content: space-between; }\r\n    .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper {\r\n      width: 100%;\r\n      display: -webkit-box;\r\n      display: -ms-flexbox;\r\n      display: flex;\r\n      -webkit-box-pack: justify;\r\n          -ms-flex-pack: justify;\r\n              justify-content: space-between;\r\n      -ms-flex-wrap: wrap;\r\n          flex-wrap: wrap; }\r\n      .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type {\r\n        width: calc(50% - 5px);\r\n        height: 145px;\r\n        background: rgba(64, 151, 200, 0.3);\r\n        display: -webkit-box;\r\n        display: -ms-flexbox;\r\n        display: flex;\r\n        -webkit-box-orient: vertical;\r\n        -webkit-box-direction: normal;\r\n            -ms-flex-direction: column;\r\n                flex-direction: column;\r\n        -webkit-box-pack: justify;\r\n            -ms-flex-pack: justify;\r\n                justify-content: space-between;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\r\n        -webkit-box-align: center;\r\n            -ms-flex-align: center;\r\n                align-items: center;\r\n        border-radius: 5px;\r\n        padding: 10px 0;\r\n        position: relative;\r\n        margin: 5px 0;\r\n        text-align: center;\r\n        position: relative; }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type:hover {\r\n          -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);\r\n                  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type:first-of-type {\r\n          -webkit-box-pack: center;\r\n              -ms-flex-pack: center;\r\n                  justify-content: center; }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-type-icon {\r\n          width: 80px; }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-type-name {\r\n          font-size: 12px;\r\n          font-weight: 500;\r\n          color: #2F669A;\r\n          text-transform: capitalize; }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-event {\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          width: 100%;\r\n          height: 100%;\r\n          visibility: none; }\r\n\r\n.input-group input {\r\n  width: 100%;\r\n  height: 50px;\r\n  padding: 10px 15px;\r\n  border-radius: 30px;\r\n  font-size: 14px;\r\n  border: 1px solid #4097C8; }\r\n  .input-group input::-webkit-input-placeholder {\r\n    color: #8b8b8b;\r\n    opacity: .5; }\r\n  .input-group input:-ms-input-placeholder {\r\n    color: #8b8b8b;\r\n    opacity: .5; }\r\n  .input-group input::-ms-input-placeholder {\r\n    color: #8b8b8b;\r\n    opacity: .5; }\r\n  .input-group input::placeholder {\r\n    color: #8b8b8b;\r\n    opacity: .5; }\r\n.input-group.button-inside-input {\r\n  position: relative; }\r\n  .input-group.button-inside-input .icon {\r\n    position: absolute;\r\n    top: 50%;\r\n    right: 15px;\r\n    width: 30px;\r\n    -webkit-transform: translateY(-50%);\r\n            transform: translateY(-50%); }\r\n\r\n.chat-box-container .chat-box {\r\n  margin-top: 10px;\r\n  width: 100%;\r\n  height: 525px; }\r\n  .chat-box-container .chat-box .message-wrapper {\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -ms-flex-wrap: wrap;\r\n        flex-wrap: wrap;\r\n    -webkit-box-align: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\r\n    margin-bottom: 20px; }\r\n    .chat-box-container .chat-box .message-wrapper.user {\r\n      -webkit-box-orient: horizontal;\r\n      -webkit-box-direction: reverse;\r\n          -ms-flex-direction: row-reverse;\r\n              flex-direction: row-reverse; }\r\n      .chat-box-container .chat-box .message-wrapper.user .message {\r\n        background-color: #4097C8;\r\n        color: #fff; }\r\n    .chat-box-container .chat-box .message-wrapper img {\r\n      width: 60px;\r\n      height: 60px;\r\n      border-radius: 50%; }\r\n    .chat-box-container .chat-box .message-wrapper .message {\r\n      margin: 0 10px;\r\n      background-color: rgba(191, 191, 191, 0.2);\r\n      font-family: 'Roboto', sans-serif;\r\n      font-size: 14px;\r\n      line-height: 16px;\r\n      border-radius: 10px;\r\n      padding: 10px 15px;\r\n      max-width: 186px;\r\n      color: #727272; }\r\n    .chat-box-container .chat-box .message-wrapper .message-timestamp {\r\n      font-family: 'Roboto', sans-serif;\r\n      font-size: 8px;\r\n      color: #727272; }\r\n    .chat-box-container .chat-box .message-wrapper .automated-messages {\r\n      -webkit-box-flex: 0;\r\n          -ms-flex: 0 0 100%;\r\n              flex: 0 0 100%; }\r\n      .chat-box-container .chat-box .message-wrapper .automated-messages .automated-message {\r\n        font-family: 'Roboto', sans-serif;\r\n        font-weight: 300;\r\n        margin-top: 4px;\r\n        border-radius: 10px;\r\n        font-size: 10px;\r\n        background-color: rgba(64, 151, 200, 0.2);\r\n        color: #2F669A;\r\n        padding: 4px 15px;\r\n        margin-left: 70px;\r\n        display: inline-block;\r\n        max-width: 186px; }\r\n@-webkit-keyframes wave {\r\n  0% {\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: rgba(64, 151, 200, 0.2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); }\r\n  10% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  30% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-10px);\r\n            transform: translateY(-10px); }\r\n  90% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  95% {\r\n    width: 4px;\r\n    height: 4px;\r\n    -webkit-transform: translateY(0px);\r\n            transform: translateY(0px); }\r\n  100% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); } }\r\n@keyframes wave {\r\n  0% {\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: rgba(64, 151, 200, 0.2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); }\r\n  10% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  30% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-10px);\r\n            transform: translateY(-10px); }\r\n  90% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  95% {\r\n    width: 4px;\r\n    height: 4px;\r\n    -webkit-transform: translateY(0px);\r\n            transform: translateY(0px); }\r\n  100% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); } }\r\n@keyframes wave {\r\n  0% {\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: #fff;\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); }\r\n  10% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  30% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-10px);\r\n            transform: translateY(-10px); }\r\n  90% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  95% {\r\n    width: 4px;\r\n    height: 4px;\r\n    -webkit-transform: translateY(0px);\r\n            transform: translateY(0px); }\r\n  100% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); } }\r\n    .chat-box-container .chat-box .message-wrapper.user .dot {\r\n      background-color: #fff; }\r\n\r\n.dot {\r\n  display: inline-block;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n  background: #727272;\r\n  -webkit-animation: wave 1.3s linear infinite;\r\n          animation: wave 1.3s linear infinite; }\r\n\r\n.typing-wave {\r\n  position: relative;\r\n  text-align: center;\r\n  width: 55px;\r\n  height: 30px;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  display: grid;\r\n  -webkit-box-pack: center;\r\n      -ms-flex-pack: center;\r\n          justify-content: center;\r\n  padding-top: 10px;\r\n  border-radius: 17px;\r\n  grid-template-columns: 12px 12px 12px;\r\n  grid-template-rows: 1fr; }\r\n  .typing-wave div {\r\n    text-align: center; }\r\n  .typing-wave div:nth-child(2) .dot {\r\n    -webkit-animation-delay: -1.1s;\r\n            animation-delay: -1.1s; }\r\n  .typing-wave div:nth-child(3) .dot {\r\n    -webkit-animation-delay: -0.9s;\r\n            animation-delay: -0.9s;\r\n    margin-right: 0; }\r\n\r\n.no-gutter {\r\n  margin: 0 -15px;\r\n  max-width: calc(100% + 30px); }\r\n\r\n.link_overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%; }\r\n\r\n/*\r\n/Globals\r\n*/\r\n@media only screen and (max-width: 1399px) {\r\n  .logo {\r\n    margin-top: 20px;\r\n    margin-bottom: 20px; }\r\n\r\n  .container-fluid {\r\n    max-width: 1140px; }\r\n\r\n  .table thead th {\r\n    height: 80px;\r\n    font-size: 20px; }\r\n  .table tr {\r\n    font-size: 0.9rem; }\r\n\r\n  .table tbody {\r\n    max-height: 360px; }\r\n\r\n  .start-chat {\r\n    bottom: 2%;\r\n    right: 12%; }\r\n\r\n  .start-chat-button {\r\n    bottom: 20px;\r\n    right: 100px; }\r\n\r\n  .chat-on-phone {\r\n    border-radius: 20px;\r\n    bottom: 23px;\r\n    right: 40px;\r\n    width: 208px;\r\n    height: 420px; }\r\n\r\n  .chat-box-container .chat-box {\r\n    height: 306px; }\r\n    .chat-box-container .chat-box .message-wrapper {\r\n      margin-bottom: 10px; }\r\n      .chat-box-container .chat-box .message-wrapper img {\r\n        width: 30px;\r\n        height: 30px; }\r\n      .chat-box-container .chat-box .message-wrapper .message {\r\n        max-width: 101px;\r\n        font-size: 9px;\r\n        line-height: 9px;\r\n        padding: 5px;\r\n        border-radius: 5px;\r\n        margin: 0 5px; }\r\n      .chat-box-container .chat-box .message-wrapper .message-timestamp {\r\n        font-size: 5px; }\r\n      .chat-box-container .chat-box .message-wrapper .automated-messages .automated-message {\r\n        margin-left: 35px;\r\n        font-size: 8px;\r\n        max-width: 120px;\r\n        padding: 3px 5px;\r\n        border-radius: 5px; }\r\n  @-webkit-keyframes wave {\r\n    0% {\r\n      width: 3px;\r\n      height: 3px;\r\n      background-color: rgba(64, 151, 200, 0.2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 3px;\r\n      height: 3px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n  @keyframes wave {\r\n    0% {\r\n      width: 3px;\r\n      height: 3px;\r\n      background-color: rgba(64, 151, 200, 0.2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 3px;\r\n      height: 3px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n  @keyframes wave {\r\n    0% {\r\n      width: 3px;\r\n      height: 3px;\r\n      background-color: #fff;\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 3px;\r\n      height: 3px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n      .chat-box-container .chat-box .message-wrapper.user .dot {\r\n        background-color: #fff; }\r\n\r\n  .dot {\r\n    width: 6px !important;\r\n    height: 6px !important; }\r\n\r\n  .input-group input {\r\n    font-size: 8px;\r\n    height: 30px;\r\n    padding: 7px; }\r\n  .input-group.button-inside-input .icon {\r\n    width: 18px; }\r\n\r\n  .chat-type-wrapper {\r\n    margin-top: 10px; }\r\n    .chat-type-wrapper .chat-type {\r\n      width: calc(50% - 5px);\r\n      height: 80px !important;\r\n      padding: 10px 0 !important;\r\n      margin: 5px 0 !important; }\r\n      .chat-type-wrapper .chat-type .chat-type-icon {\r\n        width: 35px !important; }\r\n      .chat-type-wrapper .chat-type .chat-type-name {\r\n        font-size: 9px !important; } }\r\n@media only screen and (min-width: 1400px) {\r\n  .logo {\r\n    margin-top: 30px;\r\n    margin-bottom: 30px; }\r\n\r\n  .container-fluid {\r\n    max-width: 1170px; }\r\n\r\n  .table tr {\r\n    font-size: 0.9rem; }\r\n  .table thead th {\r\n    height: 138px;\r\n    font-size: 24px; }\r\n  .table tbody {\r\n    max-height: 566px; }\r\n    .table tbody tr td img {\r\n      margin-left: 20px; }\r\n\r\n  .start-chat {\r\n    bottom: 2%;\r\n    right: 12%; }\r\n\r\n  .chat-on-phone {\r\n    border-radius: 54px;\r\n    bottom: 40px;\r\n    right: 40px;\r\n    width: 375px;\r\n    height: 755px; }\r\n\r\n  .start-chat-button {\r\n    bottom: 40px;\r\n    right: 40px; }\r\n\r\n  .chat-on-phone .chat-on-phone-wrapper {\r\n    top: 116px;\r\n    left: 23px;\r\n    padding: 0 15px;\r\n    width: calc(100% - 45px);\r\n    height: calc(100% - 155px); }\r\n    .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type {\r\n      width: calc(50% - 5px);\r\n      height: 145px;\r\n      border-radius: 5px;\r\n      padding: 10px 0;\r\n      margin: 5px 0; }\r\n      .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-type-icon {\r\n        width: 80px; }\r\n      .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-type-name {\r\n        font-size: 12px; }\r\n      .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-event {\r\n        top: 0;\r\n        left: 0; }\r\n\r\n  @-webkit-keyframes wave {\r\n    0% {\r\n      width: 8px;\r\n      height: 8px;\r\n      background-color: rgba(64, 151, 200, 0.2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 8px;\r\n      height: 8px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n\r\n  @keyframes wave {\r\n    0% {\r\n      width: 8px;\r\n      height: 8px;\r\n      background-color: rgba(64, 151, 200, 0.2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 8px;\r\n      height: 8px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n  @keyframes wave {\r\n    0% {\r\n      width: 8px;\r\n      height: 8px;\r\n      background-color: #fff;\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 8px;\r\n      height: 8px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n  .chat-box-container .chat-box .message-wrapper.user .dot {\r\n    background-color: #fff; } }\r\n@media only screen and (max-width: 808px) {\r\n  .d-xs-none {\r\n    display: none; }\r\n\r\n  .table thead tr th {\r\n    text-align: left;\r\n    padding-left: 20px;\r\n    padding-right: 20px;\r\n    font-size: 24px; }\r\n  .table tbody {\r\n    max-height: 575px; }\r\n    .table tbody tr {\r\n      position: relative; }\r\n      .table tbody tr.active + .company-meta-wrapper {\r\n        display: table; }\r\n      .table tbody tr.company-meta-wrapper {\r\n        display: none; }\r\n        .table tbody tr.company-meta-wrapper:after {\r\n          content: none; }\r\n      .table tbody tr:after {\r\n        position: absolute;\r\n        right: 10px;\r\n        top: 27px;\r\n        -webkit-transform: translateY(-50%);\r\n                transform: translateY(-50%);\r\n        width: 9.7px;\r\n        height: 5px;\r\n        background-image: url(\"imgs/icons/up.svg\");\r\n        background-size: cover;\r\n        content: ''; }\r\n      .table tbody tr.active:after {\r\n        background-image: url(\"imgs/icons/down.svg\"); }\r\n      .table tbody tr td {\r\n        font-size: 16px;\r\n        width: 100%; }\r\n    .table tbody .company-meta {\r\n      padding-top: 20px;\r\n      padding-left: 10px;\r\n      padding-right: 10px;\r\n      width: 100% !important;\r\n      background-color: rgba(191, 191, 191, 0.1); }\r\n      .table tbody .company-meta .th {\r\n        font-size: 18px;\r\n        font-weight: 600;\r\n        font-style: italic;\r\n        color: #4097C8;\r\n        display: block; }\r\n      .table tbody .company-meta .td {\r\n        font-size: 16px;\r\n        margin: 5px 0;\r\n        font-weight: 400;\r\n        text-transform: capitalize;\r\n        display: inline-block; }\r\n    .table tbody .company-meta-all {\r\n      margin-top: 5px;\r\n      display: -webkit-box;\r\n      display: -ms-flexbox;\r\n      display: flex;\r\n      -webkit-box-pack: justify;\r\n          -ms-flex-pack: justify;\r\n              justify-content: space-between; }\r\n      .table tbody .company-meta-all div {\r\n        padding-right: 10px;\r\n        border-right: 1px solid #727272; }\r\n        .table tbody .company-meta-all div:last-of-type {\r\n          padding-right: 0;\r\n          border-right: none; }\r\n\r\n  .chat-on-phone {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    top: 0;\r\n    left: 0;\r\n    right: unset;\r\n    bottom: unset;\r\n    background-image: none;\r\n    border-radius: 0;\r\n    background-color: #fff; }\r\n    .chat-on-phone .chat-on-phone-wrapper {\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding: 0 15px;\r\n      -webkit-box-pack: start;\r\n          -ms-flex-pack: start;\r\n              justify-content: start; }\r\n\r\n  .chat-type-wrapper .chat-type {\r\n    height: 165px !important; }\r\n    .chat-type-wrapper .chat-type .chat-type-name {\r\n      font-size: 13px !important;\r\n      font-weight: 500 !important; }\r\n    .chat-type-wrapper .chat-type .chat-type-icon {\r\n      width: 90px !important;\r\n      height: 90px !important; }\r\n\r\n  .chat-input {\r\n    position: absolute;\r\n    left: 15px;\r\n    bottom: 20px;\r\n    width: calc(100% - 30px); }\r\n\r\n  .input-group.button-inside-input .icon {\r\n    width: 35px; }\r\n  .input-group input {\r\n    height: 50px;\r\n    font-size: 15px; }\r\n\r\n  .chat-box-container .chat-box {\r\n    margin-top: 30px;\r\n    height: 610px; }\r\n    .chat-box-container .chat-box .message-wrapper img {\r\n      width: 70px;\r\n      height: 70px; }\r\n    .chat-box-container .chat-box .message-wrapper .message {\r\n      max-width: 215px;\r\n      margin: 0 10px;\r\n      font-size: 15px;\r\n      font-weight: 400;\r\n      line-height: 19px; }\r\n    .chat-box-container .chat-box .message-wrapper .message-timestamp {\r\n      font-size: 9px; }\r\n    .chat-box-container .chat-box .message-wrapper .automated-messages .automated-message {\r\n      margin-top: 20px;\r\n      margin-left: 80px;\r\n      font-size: 11px;\r\n      max-width: 210px;\r\n      padding: 5px 15px;\r\n      border-radius: 5px; }\r\n\r\n  .d-xs-block {\r\n    display: block !important; }\r\n\r\n  .gradient-img-bg {\r\n    background-image: url(\"imgs/icons/left.svg\");\r\n    background-position: top left;\r\n    background-repeat: no-repeat;\r\n    background-size: 80%; }\r\n\r\n  .start-chat-button {\r\n    bottom: 20px;\r\n    right: 20px; } }\r\n\r\n/*# sourceMappingURL=style.css.map */", "newVal"="/*\r\nmixins\r\n*/\r\n/*\r\n/mixins\r\n*/\r\n/*\r\ncolor\r\n*/\r\n/*\r\nGlobals\r\n*/\r\nbody {\r\n  margin: 0;\r\n  min-height: 100vh;\r\n  font-family: 'Montserrat', sans-serif; }\r\n\r\n* {\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  font-size: 16px; }\r\n\r\n.container-fluid {\r\n  width: 100%;\r\n  padding: 0 15px;\r\n  margin: 0 auto; }\r\n\r\n.mt-2 {\r\n  margin-top: 2rem; }\r\n\r\n.mb-2 {\r\n  margin-bottom: 2rem; }\r\n\r\n.border-rounded {\r\n  border-radius: 50%; }\r\n\r\n.img-fluid {\r\n  max-width: 100%;\r\n  height: auto; }\r\n\r\n.hide {\r\n  display: none; }\r\n\r\n.table {\r\n  width: 100%;\r\n  margin-bottom: 2rem;\r\n  color: #212529;\r\n  border-collapse: collapse;\r\n  background-color: #fff; }\r\n  .table th,\r\n  .table td {\r\n    border-bottom: 1px solid #ddd;\r\n    text-align: center; }\r\n  .table thead th {\r\n    color: #4097C8;\r\n    font-weight: 600;\r\n    font-style: italic; }\r\n  .table thead,\r\n  .table tr {\r\n    display: table;\r\n    width: 100%;\r\n    table-layout: fixed;\r\n    border-collapse: collapse; }\r\n  .table tbody {\r\n    overflow: hidden scroll;\r\n    display: block; }\r\n    .table tbody::-webkit-scrollbar-track {\r\n      background: #4097C8;\r\n      border-bottom: 3px solid transparent;\r\n      border-right: 3px solid transparent;\r\n      border-left: 3px solid transparent;\r\n      background-clip: content-box;\r\n      /* THIS IS IMPORTANT */ }\r\n    .table tbody::-webkit-scrollbar {\r\n      width: 8px; }\r\n    .table tbody::-webkit-scrollbar-thumb {\r\n      border-radius: 10px;\r\n      background: #4097C8; }\r\n    .table tbody tr.company-meta-wrapper {\r\n      display: none; }\r\n    .table tbody tr td {\r\n      font-size: 14px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px; }\r\n      .table tbody tr td:first-of-type {\r\n        font-weight: 600 !important;\r\n        text-align: left;\r\n        text-transform: uppercase; }\r\n      .table tbody tr td img {\r\n        margin-left: 16px;\r\n        margin-right: 10px;\r\n        vertical-align: middle; }\r\n    .table tbody tr:hover {\r\n      background: #4097c8;\r\n      background: -webkit-gradient(linear, left top, right top, from(rgba(64, 151, 200, 0.2987570028)), to(rgba(64, 151, 200, 0)));\r\n      background: linear-gradient(90deg, rgba(64, 151, 200, 0.2987570028) 0%, rgba(64, 151, 200, 0) 100%);\r\n      -webkit-box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);\r\n              box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16); }\r\n      .table tbody tr:hover td {\r\n        border-bottom: none; }\r\n\r\n.table-wrapper {\r\n  border-radius: 20px;\r\n  overflow: hidden;\r\n  background-color: #fff;\r\n  -webkit-box-shadow: 0 7px 20px rgba(0, 0, 0, 0.26);\r\n          box-shadow: 0 7px 20px rgba(0, 0, 0, 0.26); }\r\n\r\n.gradient-img-bg {\r\n  background-image: url(\"/imgs/icons/left.svg\"), url(\"/imgs/icons/right.svg\");\r\n  background-position: top left, bottom right;\r\n  background-repeat: no-repeat, no-repeat;\r\n  background-size: contain, contain; }\r\n\r\n.start-chat-button {\r\n  width: 80px;\r\n  height: 80px;\r\n  position: fixed;\r\n  -webkit-box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.16);\r\n          box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.16);\r\n  border-radius: 50%;\r\n  background-color: #fff; }\r\n\r\n.toggle-chat {\r\n  width: 80px;\r\n  height: 80px;\r\n  display: -webkit-box;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-pack: center;\r\n      -ms-flex-pack: center;\r\n          justify-content: center;\r\n  -webkit-box-align: center;\r\n      -ms-flex-align: center;\r\n          align-items: center;\r\n  padding: 10px; }\r\n\r\n.shadow-bg {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 2;\r\n  background-color: rgba(0, 0, 0, 0.9); }\r\n\r\n.chat-on-phone {\r\n  position: fixed;\r\n  background: url(\"/imgs/mobile.png\") no-repeat top left;\r\n  background-size: cover;\r\n  z-index: 3;\r\n  display: -webkit-box;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -webkit-box-pack: center;\r\n      -ms-flex-pack: center;\r\n          justify-content: center;\r\n  -webkit-box-align: center;\r\n      -ms-flex-align: center;\r\n          align-items: center;\r\n  -webkit-box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2);\r\n          box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.2); }\r\n  .chat-on-phone .chat-on-phone-wrapper {\r\n    position: absolute;\r\n    top: 54px;\r\n    left: 13px;\r\n    padding: 0 10px;\r\n    width: calc(100% - 25px);\r\n    height: calc(100% - 74px);\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-orient: vertical;\r\n    -webkit-box-direction: normal;\r\n        -ms-flex-direction: column;\r\n            flex-direction: column;\r\n    -webkit-box-pack: justify;\r\n        -ms-flex-pack: justify;\r\n            justify-content: space-between; }\r\n    .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper {\r\n      width: 100%;\r\n      display: -webkit-box;\r\n      display: -ms-flexbox;\r\n      display: flex;\r\n      -webkit-box-pack: justify;\r\n          -ms-flex-pack: justify;\r\n              justify-content: space-between;\r\n      -ms-flex-wrap: wrap;\r\n          flex-wrap: wrap; }\r\n      .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type {\r\n        width: calc(50% - 5px);\r\n        height: 145px;\r\n        background: rgba(64, 151, 200, 0.3);\r\n        display: -webkit-box;\r\n        display: -ms-flexbox;\r\n        display: flex;\r\n        -webkit-box-orient: vertical;\r\n        -webkit-box-direction: normal;\r\n            -ms-flex-direction: column;\r\n                flex-direction: column;\r\n        -webkit-box-pack: justify;\r\n            -ms-flex-pack: justify;\r\n                justify-content: space-between;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\r\n        -webkit-box-align: center;\r\n            -ms-flex-align: center;\r\n                align-items: center;\r\n        border-radius: 5px;\r\n        padding: 10px 0;\r\n        position: relative;\r\n        margin: 5px 0;\r\n        text-align: center;\r\n        position: relative; }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type:hover {\r\n          -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16);\r\n                  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.16); }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type:first-of-type {\r\n          -webkit-box-pack: center;\r\n              -ms-flex-pack: center;\r\n                  justify-content: center; }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-type-icon {\r\n          width: 80px; }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-type-name {\r\n          font-size: 12px;\r\n          font-weight: 500;\r\n          color: #2F669A;\r\n          text-transform: capitalize; }\r\n        .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-event {\r\n          position: absolute;\r\n          top: 0;\r\n          left: 0;\r\n          width: 100%;\r\n          height: 100%;\r\n          visibility: none; }\r\n\r\n.input-group input {\r\n  width: 100%;\r\n  height: 50px;\r\n  padding: 10px 15px;\r\n  border-radius: 30px;\r\n  font-size: 14px;\r\n  border: 1px solid #4097C8; }\r\n  .input-group input::-webkit-input-placeholder {\r\n    color: #8b8b8b;\r\n    opacity: .5; }\r\n  .input-group input:-ms-input-placeholder {\r\n    color: #8b8b8b;\r\n    opacity: .5; }\r\n  .input-group input::-ms-input-placeholder {\r\n    color: #8b8b8b;\r\n    opacity: .5; }\r\n  .input-group input::placeholder {\r\n    color: #8b8b8b;\r\n    opacity: .5; }\r\n.input-group.button-inside-input {\r\n  position: relative; }\r\n  .input-group.button-inside-input .icon {\r\n    position: absolute;\r\n    top: 50%;\r\n    right: 15px;\r\n    width: 30px;\r\n    -webkit-transform: translateY(-50%);\r\n            transform: translateY(-50%); }\r\n\r\n.chat-box-container .chat-box {\r\n  margin-top: 10px;\r\n  width: 100%;\r\n  height: 525px; }\r\n  .chat-box-container .chat-box .message-wrapper {\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -ms-flex-wrap: wrap;\r\n        flex-wrap: wrap;\r\n    -webkit-box-align: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\r\n    margin-bottom: 20px; }\r\n    .chat-box-container .chat-box .message-wrapper.user {\r\n      -webkit-box-orient: horizontal;\r\n      -webkit-box-direction: reverse;\r\n          -ms-flex-direction: row-reverse;\r\n              flex-direction: row-reverse; }\r\n      .chat-box-container .chat-box .message-wrapper.user .message {\r\n        background-color: #4097C8;\r\n        color: #fff; }\r\n    .chat-box-container .chat-box .message-wrapper img {\r\n      width: 60px;\r\n      height: 60px;\r\n      border-radius: 50%; }\r\n    .chat-box-container .chat-box .message-wrapper .message {\r\n      margin: 0 10px;\r\n      background-color: rgba(191, 191, 191, 0.2);\r\n      font-family: 'Roboto', sans-serif;\r\n      font-size: 14px;\r\n      line-height: 16px;\r\n      border-radius: 10px;\r\n      padding: 10px 15px;\r\n      max-width: 186px;\r\n      color: #727272; }\r\n    .chat-box-container .chat-box .message-wrapper .message-timestamp {\r\n      font-family: 'Roboto', sans-serif;\r\n      font-size: 8px;\r\n      color: #727272; }\r\n    .chat-box-container .chat-box .message-wrapper .automated-messages {\r\n      -webkit-box-flex: 0;\r\n          -ms-flex: 0 0 100%;\r\n              flex: 0 0 100%; }\r\n      .chat-box-container .chat-box .message-wrapper .automated-messages .automated-message {\r\n        font-family: 'Roboto', sans-serif;\r\n        font-weight: 300;\r\n        margin-top: 4px;\r\n        border-radius: 10px;\r\n        font-size: 10px;\r\n        background-color: rgba(64, 151, 200, 0.2);\r\n        color: #2F669A;\r\n        padding: 4px 15px;\r\n        margin-left: 70px;\r\n        display: inline-block;\r\n        max-width: 186px; }\r\n@-webkit-keyframes wave {\r\n  0% {\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: rgba(64, 151, 200, 0.2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); }\r\n  10% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  30% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-10px);\r\n            transform: translateY(-10px); }\r\n  90% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  95% {\r\n    width: 4px;\r\n    height: 4px;\r\n    -webkit-transform: translateY(0px);\r\n            transform: translateY(0px); }\r\n  100% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); } }\r\n@keyframes wave {\r\n  0% {\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: rgba(64, 151, 200, 0.2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); }\r\n  10% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  30% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-10px);\r\n            transform: translateY(-10px); }\r\n  90% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  95% {\r\n    width: 4px;\r\n    height: 4px;\r\n    -webkit-transform: translateY(0px);\r\n            transform: translateY(0px); }\r\n  100% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); } }\r\n@keyframes wave {\r\n  0% {\r\n    width: 4px;\r\n    height: 4px;\r\n    background-color: #fff;\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); }\r\n  10% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  30% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-10px);\r\n            transform: translateY(-10px); }\r\n  90% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2); }\r\n  95% {\r\n    width: 4px;\r\n    height: 4px;\r\n    -webkit-transform: translateY(0px);\r\n            transform: translateY(0px); }\r\n  100% {\r\n    width: calc($size * 2);\r\n    height: calc($size * 2);\r\n    -webkit-transform: translateY(-5px);\r\n            transform: translateY(-5px); } }\r\n    .chat-box-container .chat-box .message-wrapper.user .dot {\r\n      background-color: #fff; }\r\n\r\n.dot {\r\n  display: inline-block;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 50%;\r\n  background: #727272;\r\n  -webkit-animation: wave 1.3s linear infinite;\r\n          animation: wave 1.3s linear infinite; }\r\n\r\n.typing-wave {\r\n  position: relative;\r\n  text-align: center;\r\n  width: 55px;\r\n  height: 30px;\r\n  margin-left: auto;\r\n  margin-right: auto;\r\n  display: grid;\r\n  -webkit-box-pack: center;\r\n      -ms-flex-pack: center;\r\n          justify-content: center;\r\n  padding-top: 10px;\r\n  border-radius: 17px;\r\n  grid-template-columns: 12px 12px 12px;\r\n  grid-template-rows: 1fr; }\r\n  .typing-wave div {\r\n    text-align: center; }\r\n  .typing-wave div:nth-child(2) .dot {\r\n    -webkit-animation-delay: -1.1s;\r\n            animation-delay: -1.1s; }\r\n  .typing-wave div:nth-child(3) .dot {\r\n    -webkit-animation-delay: -0.9s;\r\n            animation-delay: -0.9s;\r\n    margin-right: 0; }\r\n\r\n.no-gutter {\r\n  margin: 0 -15px;\r\n  max-width: calc(100% + 30px); }\r\n\r\n.link_overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%; }\r\n\r\n/*\r\n/Globals\r\n*/\r\n@media only screen and (max-width: 1399px) {\r\n  .logo {\r\n    margin-top: 20px;\r\n    margin-bottom: 20px; }\r\n\r\n  .container-fluid {\r\n    max-width: 1140px; }\r\n\r\n  .table thead th {\r\n    height: 80px;\r\n    font-size: 20px; }\r\n  .table tr {\r\n    font-size: 0.9rem; }\r\n\r\n  .table tbody {\r\n    max-height: 360px; }\r\n\r\n  .start-chat {\r\n    bottom: 2%;\r\n    right: 12%; }\r\n\r\n  .start-chat-button {\r\n    bottom: 20px;\r\n    right: 100px; }\r\n\r\n  .chat-on-phone {\r\n    border-radius: 20px;\r\n    bottom: 23px;\r\n    right: 40px;\r\n    width: 208px;\r\n    height: 420px; }\r\n\r\n  .chat-box-container .chat-box {\r\n    height: 306px; }\r\n    .chat-box-container .chat-box .message-wrapper {\r\n      margin-bottom: 10px; }\r\n      .chat-box-container .chat-box .message-wrapper img {\r\n        width: 30px;\r\n        height: 30px; }\r\n      .chat-box-container .chat-box .message-wrapper .message {\r\n        max-width: 101px;\r\n        font-size: 9px;\r\n        line-height: 9px;\r\n        padding: 5px;\r\n        border-radius: 5px;\r\n        margin: 0 5px; }\r\n      .chat-box-container .chat-box .message-wrapper .message-timestamp {\r\n        font-size: 5px; }\r\n      .chat-box-container .chat-box .message-wrapper .automated-messages .automated-message {\r\n        margin-left: 35px;\r\n        font-size: 8px;\r\n        max-width: 120px;\r\n        padding: 3px 5px;\r\n        border-radius: 5px; }\r\n  @-webkit-keyframes wave {\r\n    0% {\r\n      width: 3px;\r\n      height: 3px;\r\n      background-color: rgba(64, 151, 200, 0.2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 3px;\r\n      height: 3px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n  @keyframes wave {\r\n    0% {\r\n      width: 3px;\r\n      height: 3px;\r\n      background-color: rgba(64, 151, 200, 0.2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 3px;\r\n      height: 3px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n  @keyframes wave {\r\n    0% {\r\n      width: 3px;\r\n      height: 3px;\r\n      background-color: #fff;\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 3px;\r\n      height: 3px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n      .chat-box-container .chat-box .message-wrapper.user .dot {\r\n        background-color: #fff; }\r\n\r\n  .dot {\r\n    width: 6px !important;\r\n    height: 6px !important; }\r\n\r\n  .input-group input {\r\n    font-size: 8px;\r\n    height: 30px;\r\n    padding: 7px; }\r\n  .input-group.button-inside-input .icon {\r\n    width: 18px; }\r\n\r\n  .chat-type-wrapper {\r\n    margin-top: 10px; }\r\n    .chat-type-wrapper .chat-type {\r\n      width: calc(50% - 5px);\r\n      height: 80px !important;\r\n      padding: 10px 0 !important;\r\n      margin: 5px 0 !important; }\r\n      .chat-type-wrapper .chat-type .chat-type-icon {\r\n        width: 35px !important; }\r\n      .chat-type-wrapper .chat-type .chat-type-name {\r\n        font-size: 9px !important; } }\r\n@media only screen and (min-width: 1400px) {\r\n  .logo {\r\n    margin-top: 30px;\r\n    margin-bottom: 30px; }\r\n\r\n  .container-fluid {\r\n    max-width: 1170px; }\r\n\r\n  .table tr {\r\n    font-size: 0.9rem; }\r\n  .table thead th {\r\n    height: 138px;\r\n    font-size: 24px; }\r\n  .table tbody {\r\n    max-height: 566px; }\r\n    .table tbody tr td img {\r\n      margin-left: 20px; }\r\n\r\n  .start-chat {\r\n    bottom: 2%;\r\n    right: 12%; }\r\n\r\n  .chat-on-phone {\r\n    border-radius: 54px;\r\n    bottom: 40px;\r\n    right: 40px;\r\n    width: 375px;\r\n    height: 755px; }\r\n\r\n  .start-chat-button {\r\n    bottom: 40px;\r\n    right: 40px; }\r\n\r\n  .chat-on-phone .chat-on-phone-wrapper {\r\n    top: 116px;\r\n    left: 23px;\r\n    padding: 0 15px;\r\n    width: calc(100% - 45px);\r\n    height: calc(100% - 155px); }\r\n    .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type {\r\n      width: calc(50% - 5px);\r\n      height: 145px;\r\n      border-radius: 5px;\r\n      padding: 10px 0;\r\n      margin: 5px 0; }\r\n      .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-type-icon {\r\n        width: 80px; }\r\n      .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-type-name {\r\n        font-size: 12px; }\r\n      .chat-on-phone .chat-on-phone-wrapper .chat-type-wrapper .chat-type .chat-event {\r\n        top: 0;\r\n        left: 0; }\r\n\r\n  @-webkit-keyframes wave {\r\n    0% {\r\n      width: 8px;\r\n      height: 8px;\r\n      background-color: rgba(64, 151, 200, 0.2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 8px;\r\n      height: 8px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n\r\n  @keyframes wave {\r\n    0% {\r\n      width: 8px;\r\n      height: 8px;\r\n      background-color: rgba(64, 151, 200, 0.2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 8px;\r\n      height: 8px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n  @keyframes wave {\r\n    0% {\r\n      width: 8px;\r\n      height: 8px;\r\n      background-color: #fff;\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); }\r\n    10% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    30% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-10px);\r\n              transform: translateY(-10px); }\r\n    90% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2); }\r\n    95% {\r\n      width: 8px;\r\n      height: 8px;\r\n      -webkit-transform: translateY(0px);\r\n              transform: translateY(0px); }\r\n    100% {\r\n      width: calc($size * 2);\r\n      height: calc($size * 2);\r\n      -webkit-transform: translateY(-5px);\r\n              transform: translateY(-5px); } }\r\n  .chat-box-container .chat-box .message-wrapper.user .dot {\r\n    background-color: #fff; } }\r\n@media only screen and (max-width: 808px) {\r\n  .d-xs-none {\r\n    display: none; }\r\n\r\n  .table thead tr th {\r\n    text-align: left;\r\n    padding-left: 20px;\r\n    padding-right: 20px;\r\n    font-size: 24px; }\r\n  .table tbody {\r\n    max-height: 575px; }\r\n    .table tbody tr {\r\n      position: relative; }\r\n      .table tbody tr.active + .company-meta-wrapper {\r\n        display: table; }\r\n      .table tbody tr.company-meta-wrapper {\r\n        display: none; }\r\n        .table tbody tr.company-meta-wrapper:after {\r\n          content: none; }\r\n      .table tbody tr:after {\r\n        position: absolute;\r\n        right: 10px;\r\n        top: 27px;\r\n        -webkit-transform: translateY(-50%);\r\n                transform: translateY(-50%);\r\n        width: 9.7px;\r\n        height: 5px;\r\n        background-image: url(\"/imgs/icons/up.svg\");\r\n        background-size: cover;\r\n        content: ''; }\r\n      .table tbody tr.active:after {\r\n        background-image: url(\"/imgs/icons/down.svg\"); }\r\n      .table tbody tr td {\r\n        font-size: 16px;\r\n        width: 100%; }\r\n    .table tbody .company-meta {\r\n      padding-top: 20px;\r\n      padding-left: 10px;\r\n      padding-right: 10px;\r\n      width: 100% !important;\r\n      background-color: rgba(191, 191, 191, 0.1); }\r\n      .table tbody .company-meta .th {\r\n        font-size: 18px;\r\n        font-weight: 600;\r\n        font-style: italic;\r\n        color: #4097C8;\r\n        display: block; }\r\n      .table tbody .company-meta .td {\r\n        font-size: 16px;\r\n        margin: 5px 0;\r\n        font-weight: 400;\r\n        text-transform: capitalize;\r\n        display: inline-block; }\r\n    .table tbody .company-meta-all {\r\n      margin-top: 5px;\r\n      display: -webkit-box;\r\n      display: -ms-flexbox;\r\n      display: flex;\r\n      -webkit-box-pack: justify;\r\n          -ms-flex-pack: justify;\r\n              justify-content: space-between; }\r\n      .table tbody .company-meta-all div {\r\n        padding-right: 10px;\r\n        border-right: 1px solid #727272; }\r\n        .table tbody .company-meta-all div:last-of-type {\r\n          padding-right: 0;\r\n          border-right: none; }\r\n\r\n  .chat-on-phone {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    top: 0;\r\n    left: 0;\r\n    right: unset;\r\n    bottom: unset;\r\n    background-image: none;\r\n    border-radius: 0;\r\n    background-color: #fff; }\r\n    .chat-on-phone .chat-on-phone-wrapper {\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding: 0 15px;\r\n      -webkit-box-pack: start;\r\n          -ms-flex-pack: start;\r\n              justify-content: start; }\r\n\r\n  .chat-type-wrapper .chat-type {\r\n    height: 165px !important; }\r\n    .chat-type-wrapper .chat-type .chat-type-name {\r\n      font-size: 13px !important;\r\n      font-weight: 500 !important; }\r\n    .chat-type-wrapper .chat-type .chat-type-icon {\r\n      width: 90px !important;\r\n      height: 90px !important; }\r\n\r\n  .chat-input {\r\n    position: absolute;\r\n    left: 15px;\r\n    bottom: 20px;\r\n    width: calc(100% - 30px); }\r\n\r\n  .input-group.button-inside-input .icon {\r\n    width: 35px; }\r\n  .input-group input {\r\n    height: 50px;\r\n    font-size: 15px; }\r\n\r\n  .chat-box-container .chat-box {\r\n    margin-top: 30px;\r\n    height: 610px; }\r\n    .chat-box-container .chat-box .message-wrapper img {\r\n      width: 70px;\r\n      height: 70px; }\r\n    .chat-box-container .chat-box .message-wrapper .message {\r\n      max-width: 215px;\r\n      margin: 0 10px;\r\n      font-size: 15px;\r\n      font-weight: 400;\r\n      line-height: 19px; }\r\n    .chat-box-container .chat-box .message-wrapper .message-timestamp {\r\n      font-size: 9px; }\r\n    .chat-box-container .chat-box .message-wrapper .automated-messages .automated-message {\r\n      margin-top: 20px;\r\n      margin-left: 80px;\r\n      font-size: 11px;\r\n      max-width: 210px;\r\n      padding: 5px 15px;\r\n      border-radius: 5px; }\r\n\r\n  .d-xs-block {\r\n    display: block !important; }\r\n\r\n  .gradient-img-bg {\r\n    background-image: url(\"/imgs/icons/left.svg\");\r\n    background-position: top left;\r\n    background-repeat: no-repeat;\r\n    background-size: 80%; }\r\n\r\n  .start-chat-button {\r\n    bottom: 20px;\r\n    right: 20px; } }\r\n\r\n/*# sourceMappingURL=style.css.map */"]]));
  }
}

download  show line numbers  debug dex  old transpilations   

Travelled to 4 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt

No comments. add comment

Snippet ID: #1030601
Snippet name: Copy stuff to clipboard
Eternal ID of this version: #1030601/2
Text MD5: 744c3ecdee7f01ae8eb55d3d9c2921b0
Transpilation MD5: 815a9fe22961be186d887ab795339cc0
Author: stefan
Category: javax
Type: JavaX source code (Dynamic Module)
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-01-17 19:56:25
Source code size: 55336 bytes / 7 lines
Pitched / IR pitched: No / No
Views / Downloads: 184 / 803
Version history: 1 change(s)
Referenced in: [show references]