css/style.css
bd43b53d
 /**
  * @copyright 2021 Double Bastion LLC <www.doublebastion.com>
  *
  * @author Double Bastion LLC
  *
  * @license GNU AGPL version 3 or any later version
  *
  * This program is free software; you can redistribute it and/or
  * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
  * License as published by the Free Software Foundation; either
  * version 3 of the License, or any later version.
  *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
  *
  * You should have received a copy of the GNU Affero General Public
  * License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
 
 div > label {
    position: relative;
 }
 
 label span {
    display: inline-block;
    min-width: 110px;
    padding: 0px 0px 8px 0px;
 }
 
 select {
   min-height: 25px;
   box-sizing: border-box;
   text-overflow: inherit;
 }
 
 .providerSettings {
    background-color: #F7F7F7;
    padding: 14px;
 }
 
 .providerName {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
 }
 
 #smsrelentless_vbar {
    padding: 18px;
    font-family: Calibri, Frutiger, "Myriad Pro", Myriad, sans-serif;
    color: #6d6c6c;
 }
 
 .smsr_textbox {
    display: block;
    box-sizing: content-box;
    width: 70%;
    font-size: 14px !important;
 }
 
 .smsr_textboxspec {
    box-sizing: content-box;
    width: 70%;
    font-size: 14px !important;
 }
 
 #copyToClipboardtel, #copyToClipboardnex, #copyToClipboardtwil, #copyToClipboardflow {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0px 0px -4px 5px;
    cursor: pointer;
 }
 
 #copyToClipboardtel:hover, #copyToClipboardnex:hover, #copyToClipboardtwil:hover, #copyToClipboardflow:hover {
    background-color: #E0E0E0;
 }
 
 #telapi_url, #nexapi_url, #twilapi_url, #twilapi_url_rec, #flowapi_url, #flowapi_url_rec {
    display: inline-block;
    box-sizing: content-box;
    width: 70%;
    font-size: 14px !important;
 }
 
 #generate_tel_rcpt, #generate_tel_delrcpt, #generate_nex_rcpt, #generate_nex_delrcpt, #generate_twil_rcpt, #generate_twil_delrcpt, #generate_flow_rcpt, #generate_flow_delrcpt {
    display: block;
    white-space: normal;
    word-wrap: break-word;
 }
 
 .generateUrl {
    color: #161616;
    background-color: #e3ecf0 !important;
 }
 
 .generateUrl:hover {
    background-color: #c2dcea !important;
 }
 
 .generateUrl:active {
    background-color: #b5cfdd !important;
 }
 
 #settings-dscr {
    padding-top: 3px;
 }
 
 .setlabeltext {
   font-size: 15px;
 }
 
 #smsr_save_msg {
    display: inline;
    color: #181918;
    background-color: #a5e5b3;
    font-weight: bold;
 }
 
 #get_notify {
    display: block;
    margin-bottom: 18px;
 }
 
 #get_notify:hover {
    cursor: pointer;
 }
 
 #includesmsinemail, #showallmessages, #showdisplaynames {
    display: block;
    margin-bottom: 14px;
 }
 
 #includesmsinemail:hover {
    cursor: pointer;
 }
 
 #currentbaldiv, #smsnumbersdiv {
    display: block;
    position: relative;
    font-size: 17px;
    font-weight: bold;
    height: 30px;
    margin: 0px 0px 14px 0px;
    background-color: #4CA3D9;
    border-radius: 20px;
 }
 
 .providername {
   color: #FFFFFF;
 }
 
 .providername:hover {
   color: #2c0cfc;
 }
 
 #currentbalance {
   display: inline-block;
   position: relative;
   margin: 5px 0px 0px 114px;
   color: #262626;
   font-weight: 600;
 }
 
 #smsprovider {
   display: inline;
   position: absolute;
   width: 102px;
   height: 22px;
   padding: 0px 0px 1px 0px !important;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: #fcfcfc;
   font-size: 15px;
   font-weight: 500;
   color: #565656;
   text-align: center;
   border-radius: 20px;
 }
 
 #currentsmsnmbrs {
   display: inline-block;
   position: absolute;
   height: 22px;
   width: 54%;
   padding: 0.4px 0px 0px 0px !important;
   margin: 2px 0px 0px 4px;
   text-align: center;
   text-overflow: inherit;
   font-size: 14px;
   font-weight: 500;
   color: #565656;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: #fcfcfc;
   border-radius: 20px;
 }
 
 .cllridcls {
   position: relative;
   display: inline;
   font-size: 17px;
   color: #000000;
 }
 
 .tooltipbalanceid  {
   position: relative;
   display: inline-block;
   float: right;
   font-size: 15px;
   color: #000000;
   z-index: 9;
 }
 
 .tooltipsetid  {
   position: relative;
   display: inline-block;
   float: right;
   font-size: 15px;
   color: #000000;
   z-index: 8;
 }
 
 .tooltipbalanceid #infobalance {
   display: block;
   position: relative;
   margin: 4px 14px 0px 0px;
   color: #000000;
   font-size: 21px;
   font-weight: bold;
   font-family: 'Liberation Serif', sans-serif;
   font-style: italic;
   z-index: 6;
 }
 
 .tooltipbalanceid .balancetooltip {
   display: block;
   position: absolute;
   visibility: hidden;
   width: 264px;
   background-color: #fafafa;
   font-size: 15px;
   font-weight: bold;
   color: #595959;
   text-align: left;
   border-radius: 5px;
   padding: 5px 5px 5px 8px;
   margin: -4px 0px 0px -244px;
   box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   z-index: 6;
 }
 
 .tooltipbalanceid:hover .balancetooltip {
    visibility: visible;
 }
 
 #infotipid {
    display: block;
    position: relative;
    margin: 4px 14px 0px 0px;
    color: #000000;
    font-size: 21px;
    font-weight: bold;
    font-family: 'Liberation Serif', sans-serif;
    font-style: italic;
    z-index: 5;
 }
 
 #setcalleridtp {
    display: block;
    position: absolute;
    width: 274px;
    overflow-y: scroll;
    visibility: hidden;
    background-color: #fafafa;
    border-radius: 5px;
    margin: -6px 0px 0px -250px;
    scrollbar-width: auto;
    scrollbar-color: #a2a2a2 #ececec;
    box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    z-index: 10;
 }
 
 .calleridtooltip {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    padding: 5px 12px 5px 10px;
    z-index: 10;
 }
 
 .tooltipsetid:hover #setcalleridtp {
    visibility: visible;
 }
 
 .pflabels {
    font-size: 15px;
    font-weight: bold;
 }
 
 .srheader {
    display: block;
    position: relative;
    margin: 0px 0px 7px 0px;
    font-size: 17px;
    font-weight: bold;
 }
 
 .sendtomultrcvrs {
    display: block;
    position: relative;
    margin: 0px 0px 7px 0px;
    font-size: 17px;
 }
 
 .smsnbformat {
    display: block;
    position: relative;
    margin: 0px;
    font-size: 17px;
    font-weight: bold;
 }
 
 .smsrelentless_box {
    width: 400px;
    display: block;
 }
 .indtext {
    display: inline-block;
    padding-left: 10px;
 }
 
 #settings-dscr {
    padding-top: 3px;
 }
 
 #sms_upload_msg {
    display: block;
    color: #181918;
    background-color: #a5e5b3;
    font-weight: bold;
 }
 
 #sms_submit_msg {
    display: none;
    margin: 14px 0px 8px 0px;
    padding: 3px 20px 0px 20px;
    width: 100%;
    color: #181918;
    background-color: #a5e5b3;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border-radius: 14px;
 }
 
 #pickedfilename {
    font-size: 13px;
 }
 
 #smstodiv {
    display: block;
    position: relative;
    height: 32px;
 }
 
 #smsto {
    display: block;
    width: 99%;
    max-height: 32px;
    padding: 0px 15px 0px 15px;
    color: #565656;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
 }
 
 #sendtomultiple {
    display: inline-block;
    position: relative;
    margin: 10px 0px 12px 0px;
    font-size: 16px;
    font-weight: bold;
 }
 
 #entermessage {
    display: block;
    position: relative;
    margin: 4px 0px 0px 0px;
    font-size: 16px;
    font-weight: bold;
 }
 
 #uploadfileforsms {
    margin-left: 7px;
    background-color: #ffffff;
    border-radius: 3px !important;
 }
 
 .entertime {
    display: inline;
    font-size: 16px;
    font-weight: bold;
    margin-right: 7px;
 }
 
 #sendmediafl {
    display: block;
    position: relative;
    margin: 0px 0px 20px 0px;
    font-size: 16px;
    font-weight: bold;
 }
 
 #tomultchckbx {
    display: inline-block;
    position: absolute;
    margin: 3px 0px 0px 10px;
 }
 
 #mediafilechckbx {
    display: inline-block;
    position: absolute;
    margin: -7px 0px 0px 10px;
 }
 
 #deleteoldchckbox {
    display: inline-block;
    position: absolute;
    margin: 3.5px 0px 0px 10px;
 }
 
 #tomultchckbx:hover, #mediafilechckbx:hover, #deleteoldchckbox:hover {
    cursor: pointer;
 }
 
 .maxmessagelength {
    display: none;
    position: relative;
    margin: 2px 7px 4px 0px;
    font-size: 15px;
    color: #000000;
    z-index: 6;
 }
 
 #maxlengthinfo {
    display: block;
    position: absolute;
    width: 274px;
    height: 200px;
    overflow-y: scroll;
    visibility: hidden;
    background-color: #fafafa;
    border-radius: 5px;
    margin: -11px 0px 0px -6px;
    scrollbar-width: auto;
    scrollbar-color: #a2a2a2 #ececec;
    box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    z-index: 10;
 }
 
 .maxlengthtooltip {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    padding: 5px 12px 5px 10px;
    z-index: 10;
 }
 
 .maxmessagelength:hover #maxlengthinfo {
    visibility: visible;
 }
 
 .up-bttn-wrapper {
   display: block;
   position: relative;
   overflow: hidden;
   padding-top: 20px;
   padding-bottom: 30px;
 }
 
 #smstext {
   display: inline-block;
   color: #000000;
   width: 100%;
   height: 130px;
   text-align: left;
   font-size: 16px;
   border-radius: 6px;
   resize: vertical;
   white-space: pre-wrap;
 }
 
 #char_count {
   display: none;
   font-size: 15px;
   font-weight: bold;
 }
 
 #mtextSize {
   display: none;
   margin-left: 10px;
   font-size: 15px;
   font-weight: bold;
   color: #4CA3D9;
 }
 
 #submitsms {
    display: block;
    position: relative;
    margin-top: 14px;
    color: white;
    font-weight: bold;
    font-size: 15px;
    background-color: #4CA3D9;
    border-radius: 20px;
 }
 
 #submitsms:hover {
    border-color: #5CAECC;
 }
 
 #submitsms:active {
    background: #4B96B1;
    border-color: #4B96B1;
 }
 
 #multiplerecivers {
    display: none;
    background: #e8f6ff;
    border-radius: 6px;
    padding: 5px;
    margin: 0px 0px 20px 0px;
 }
 
 #multsetrows {
   display: block;
   padding: 5px;
 }
 
 #multsmsinterval {
   display: block;
   width: 100px;
   height: 25px;
   font-size: 14px;
   font-weight: bold;
   padding: 0px 0px 0px 10px;
   border-radius: 20px;
 }
 
 #app {
   position: relative;
   display: flex;
   min-height: 100%;
   min-width: 100%;
 }
 
 #app-content {
    position: relative;
    z-index: 1000;
    flex-basis: 100vw;
    min-width: 0;
    min-height: 100%;
    margin: 0 !important;
    overflow-y: scroll;
 }
 
 #viewerContainer {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
 }
 
 .pdfViewer #viewer {
    display: block;
    position: relative;
    min-width: 100%;
    min-height: 100%;
 }
 
 #smsdocpreview {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: -50px;
 }
 
 #outerContainer {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
 }
 
 #mainContainer {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
 }
 
 .texttooltip {
   font-family: 'Liberation Serif', Calibri, sans-serif;
   font-style: italic;
   color: #000000;
   font-size: 21px;
   font-weight: bold;
   margin: 0px 0px 4px 4px;
 }
 
 .fortooltip {
    position: relative;
    display: inline-block;
    margin: 0px;
    font-size: 15px;
    color: #000000;
    z-index: 7;
 }
 
 .fortooltipsec {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: #000000;
    padding: 2px 0px 4px 2px;
    z-index: 3;
 }
 
 .fortooltiptert {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: #000000;
    padding: 2px 0px 4px 2px;
    z-index: 0;
 }
 
 .fortooltipfourth {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: #000000;
    padding: 2px 0px 4px 2px;
    z-index: 4;
 }
 
 #tonmbrformat {
    display: block;
    position: absolute;
    width: 274px;
    overflow-y: scroll;
    visibility: hidden;
    background-color: #fafafa;
    border-radius: 5px;
    margin: -11px 0px 0px -6px;
    scrollbar-width: auto;
    scrollbar-color: #a2a2a2 #ececec;
    box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    z-index: 10;
 }
 
 .fortooltiptext {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    padding: 5px 12px 5px 10px;
    z-index: 10;
 }
 
 .fortooltip:hover #tonmbrformat {
    visibility: visible;
 }
 
 #uploadfileinfo {
    display: block;
    position: absolute;
    width: 274px;
    overflow-y: scroll;
    visibility: hidden;
    background-color: #fafafa;
    border-radius: 5px;
    margin: -11px 0px 0px -6px;
    scrollbar-width: auto;
    scrollbar-color: #a2a2a2 #ececec;
    box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    z-index: 10;
 }
 
 .fortooltiptextsec {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    padding: 5px 12px 5px 10px;
    z-index: 10;
 }
 
 .fortooltipsec:hover #uploadfileinfo {
    visibility: visible;
 }
 
 #deleteoldinfo {
    display: block;
    position: absolute;
    width: 274px;
    height: 200px;
    overflow-y: scroll;
    visibility: hidden;
    background-color: #fafafa;
    border-radius: 5px;
    margin: -11px 0px 0px -6px;
    scrollbar-width: auto;
    scrollbar-color: #a2a2a2 #ececec;
    box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    z-index: 10;
 }
 
 .fortooltiptexttert {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    padding: 5px 12px 5px 10px;
    z-index: 10;
 }
 
 .fortooltiptert:hover #deleteoldinfo {
    visibility: visible;
 }
 
 #uploadmmfileinfo {
    display: block;
    position: absolute;
    width: 274px;
    height: 350px;
    overflow-y: scroll;
    visibility: hidden;
    background-color: #fafafa;
    border-radius: 5px;
    margin: -11px 0px 0px -16px;
    scrollbar-width: auto;
    scrollbar-color: #a2a2a2 #ececec;
    box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    z-index: 10;
 }
 
 #tooltiptextfourth {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    padding: 5px 12px 5px 10px;
    z-index: 10;
 }
 
 .fortooltipfourth:hover #uploadmmfileinfo {
    visibility: visible;
 }
 
 .fileupload {
    display: none;
 }
 
 .uploadflbt {
    width: 411px;
 }
 
 #infotipmms {
    display: block;
    position: relative;
    margin: 0px;
    color: #000000;
    font-size: 21px;
    font-weight: bold;
    font-family: 'Liberation Serif', sans-serif;
    font-style: italic;
    z-index: 5;
 }
 
 #mmsfoldersview {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: -50px;
    background-color: #f4f9ff;
 }
 
 #upmediafiles {
    display: none;
    background: #e8f6ff;
    border-radius: 6px;
    padding: 10px;
    margin: 0px 0px 20px 0px;
 }
 
 .uploadflbt .icon-upload {
    display: inline;
 }
 
 .pfprompt {
    font-size: 16px;
    font-weight: bold;
 }
 
 .fileuploadstl, .filesfromnc {
   display: block;
   font-size: 17px;
   font-weight: bold;
   color: #000000;
 }
 
 #uploadfileformms {
    margin-left: 21px;
    background-color: #ffffff;
    border-radius: 3px !important;
 }
 
 #filestotsize {
   display: none;
   position: relative;
   height: auto;
   padding: 0px 0px 8px 0px;
   font-size: 14.5px;
   font-weight: bold;
   color: #189558;
 }
 
 #filessizetext {
   display: inline;
   position: relative;
   padding-left: 10px;
 }
 
 #fileuploadednm .indivflcls {
   display: inline-block;
   position: relative;
   height:auto;
   max-width: 90%;
   overflow: visible;
   white-space: normal;
   word-break: break-all;
   text-overflow: ellipsis;
   font-size: 17px;
   color: #0e6ba0;
 }
 
 #fileuploadednm .indivflcls:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
 #fileuploadednm .indupfldl {
   position: relative;
   display: inline-block;
   float: right;
   cursor: pointer;
   width: 20px;
   color: #0e6ba0;
   text-align: center;
   font-size: 17px;
 }
 
 #fileuploadednm .indupfldl:hover {
   background-color: #e8f6ff;
   cursor: pointer;
 }
 
 #filespickednc .indivflpckd {
   display: inline-block;
   position: relative;
   height:auto;
   max-width: 90%;
   overflow: visible;
   white-space: normal;
   word-break: break-all;
   text-overflow: ellipsis;
   color: #0e6ba0;
 }
 
 .indivflpckd:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
 .indpckfldl {
   position: relative;
   display: inline-block;
   float: right;
   cursor: pointer;
   width: 20px;
   color: #0e6ba0;
   text-align: center;
 }
 
 #filespickednc .indpckfldl:hover {
   background-color: #e8f6ff;
   cursor: pointer;
 }
 
 #pf_upload_msg, #pf_choose_msg {
   display: block;
   color: #181918;
   background-color: #a5e5b3;
   font-weight: bold;
   text-align: center;
   border-radius: 3px;
 }
 
 #choosefilen {
   display: inline;
   position: relative;
   margin: 0px 0px 20px 16px;
   padding-top: 15px;
   background-image: url('../img/nextcloud_logo.svg');
   background-repeat: no-repeat;
   background-size: 110% 125%;
   background-position: center center;
   min-width: 66px;
   min-height: 30px;
   cursor:pointer;
 }
 
 #choosefilen:active {
   background-image: url('../img/nextcloud_logo_bright.svg');
   background-repeat: no-repeat;
   background-size: 110% 125%;
   background-position: center center;
   min-width: 66px;
   min-height: 30px;
 }
 
 #pickFromNext, #uploadFile {
   display: inline-block;
   position: relative;
   font-size: 16px;
   font-weight: bold;
   color: #6d6c6c;
 }
 
 #filespickednc .indivflpckd {
   display: inline-block;
   position: relative;
   height:auto;
   max-width: 90%;
   overflow: visible;
   white-space: normal;
   word-break: break-all;
   text-overflow: ellipsis;
   color: #0e6ba0;
 }
 
 #filespickednc .indpckfldl:hover {
   background-color: #e8f6ff;
   cursor: pointer;
 }
 
 .uploadflbt {
   width: 411px;
 }
 
 .uploadflbt .icon-upload {
   display: inline;
 }
 
 .uploadfiledv {
   display: inline-block;
   position: relative;
   margin: 16px 0px 22px 0px;
 }
 
 #mmsfileuploadednm .indivflcls {
   display: inline-block;
   position: relative;
   height:auto;
   max-width: 90%;
   overflow: visible;
   white-space: normal;
   word-break: break-all;
   text-overflow: ellipsis;
   font-size: 17px;
   color: #0e6ba0;
 }
 
 #mmsfileuploadednm .indivflcls:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
 #mmsfileuploadednm .indupfldl {
   position: relative;
   display: inline-block;
   float: right;
   cursor: pointer;
   width: 20px;
   color: #0e6ba0;
   text-align: center;
   font-size: 17px;
 }
 
 #mmsfileuploadednm .indupfldl:hover {
   background-color: #e8f6ff;
   cursor: pointer;
 }
 
 #filessizetext {
   display: inline;
   position: relative;
   padding-left: 10px;
 }
 
 .srheaderch {
   display: block;
   position: relative;
   margin: 0px 0px 15px 0px;
   font-size: 16px;
   font-weight: bold;
 }
 
 .indgenflclsmms, .indgenpckfls {
   display: block;
   margin: 10px 6px 0px 6px;
 }
 
 #pickfilesNext {
   display: block;
   margin: 20px 0px 0px 0px;
 }
 
 #dirbuttons {
   margin-top: 20px;
 }
 
 button, input, textarea, div[contenteditable="true"], div[contenteditable="false"] {
   min-height: 9px;
 }
 
 #choosefilen {
   display: inline;
   position: relative;
   margin: 4px 0px 20px 16px;
   background-image: url('../img/nextcloud_logo.svg');
   background-repeat: no-repeat;
   background-size: 110% 125%;
   background-position: center center;
   min-width: 66px;
   min-height: 30px;
   cursor:pointer;
 }
 
 #choosefilen:active {
   background-image: url('../img/nextcloud_logo_bright.svg');
   background-repeat: no-repeat;
   background-size: 110% 125%;
   background-position: center center;
   min-width: 66px;
   min-height: 30px;
 }
 
 #selectcalleridbttn {
   position: relative;
   padding-left: 0px;
   margin-top: 2.6px;
   margin-right: 4px;
   float: right;
   background-image: url('../img/refresh_logo.svg');
   background-repeat: no-repeat;
   background-size: 110% 110%;
   background-position: center center;
   min-width: 24px;
   min-height: 24px;
   cursor: pointer;
   background-color: #ffffff;
   border-radius: 20px;
 }
 
 #pickid, #showsum {
   display: inline-block;
   position: relative;
   font-size: 17px;
   font-weight: bold;
   margin: 4px 0px 8px 14px;
   color: #FFFFFF;
 }
 
 .smsrelentless_checkbox:hover {
   cursor: pointer;
 }
 
 #smstables {
   display: block; 
   position: relative;
   min-width: 100%;
   min-height: 100%;
 }
 
 #smsRGreyLogo {
   display: block;
   position: relative;
   background-image: url('../img/sms_relentless_grey.svg');
   background-repeat: no-repeat;
   background-position: center center;
   width: 100%;
   height: 675px;
 }
 
 #recSmsTable, #sentSmsTable {
   display: block;
   position: relative;
   top: 0px;
   width: 100%;
   height: auto;
   font-size: 14px;
   z-index: 50;
   background: #FFFFFF;
 }
 
 .receivedrows, .receivedrowsbody, .sentrows, .sentrowsbody, .groupedmsgrows {
   border: 1px solid #f3f3f3;
   padding: 8px;
 }
 
 #groupedSmsTable {
   display: block;
   position: relative;
   top: 0px;
   width: 100%;
   height: auto;
   font-size: 14px;
   z-index: 50;
   background: #FFFFFF;
 }
 
 #groupedSmsTable td {
   text-align: left;
   vertical-align: top;
   border: 1px solid #f3f3f3;
   padding: 5px;
 }
 
 .groupedrowsbody {
   border: 1px solid #f3f3f3;
   padding: 8px;
 }
 
 .groupedLstNmbr {
   overflow: scroll;
   white-space: nowrap;
 }
 
 .groupedLstNames {
   overflow: scroll;
   white-space: nowrap;
 }
 
 .groupedLstMsgs {
   overflow: scroll;
   white-space: nowrap;
 }
 
 .groupedSentMsg {
   display: block;
   width: 95%;
   float: right;
   margin: 6px 6px 6px 0px;
   padding: 8px 10px;
   border: 0;
   border-radius: 10px;
   background-color: #f2fbff;
 }
 
 .groupedRecMsg {
   display: block; 
   width: 95%;
   float: left;
   margin: 6px 0px;
   padding: 8px 10px;
   border: 0;
   border-radius: 10px;
   background-color: #f2fff8;
 }
 
 .fixedRowHeight {
   max-height: 300px;
 }
 
 .expandGrpRow {
   display: block;
   margin:-3px auto 7px auto;
   cursor: pointer;
 }
 
 .dispNameList {
   display: block;
   margin: 2px 0px;
   font-size: 14.5px;
   font-weight: 500;
   color: #0a559e;
   cursor: pointer;
 }
 
 .dispNameList:hover {
   color: #1483f0;
 }
 
 .phoneNmbrRow {
   font-size: 14.5px;
   font-weight: 500;
   color: #06866f;
   cursor: pointer;
 }
 
 .phoneNmbrRow:hover {
   color: #08b899;
 }
 
 #selectListedNmbrs {
   display: block;
   width: 100%;
 }
 
 .sentMssgStatus {
   display: inline-block;
   margin: 0px 6px 0px 6.5px;
 }
 
 .saveRestrictions, .saveAutoReply {
   display: inline-block;
   border-radius: 8px !important;
   padding: 0px 14px !important;
   margin: 0px 0px 0px 10px !important;
   color: #ffffff !important;
   background-color: #59d0b4 !important;
 }
 
 .savealwdKeys {
   display: inline-block;
   border-radius: 8px !important;
   padding: 0px 14px !important;
   margin: 0 !important;
   color: #ffffff !important;
   background-color: #59d0b4 !important;
 }
 
 .saveRestrictions:hover, .saveAutoReply:hover, .savealwdKeys:hover {
   background-color: #40c1a3 !important;
 }
 
 .saveRestrictions:active, .saveAutoReply:active, .savealwdKeys:active {
   background-color: #3aad92 !important;
 }
 
 #save_admin_settings {
   display: inline-block;
   border-radius: 8px !important;
   padding: 0px 14px !important;
   color: #ffffff !important;
   background-color: #1e89c2 !important;
 }
 
 #save_admin_settings:hover {
   background-color: #0369a0  !important;
 }
 
 #save_admin_settings:active {
   background-color: #025480  !important;
 }
 
 #phoneNmbrRestr th {
   font-weight: 500;
 }
 
 #tnxKeysAccessTbl th, #plvKeysAccessTbl th, #twlKeysAccessTbl th, #flrKeysAccessTbl th {
   font-weight: 500;
   color: #222222;
 }
 
 .restrAuthor {
   width: 200px;
   height: 40px !important;
 }
 
 .restrPhoneNmbr, .arplPhoneNmbr {
   width: 194px;
   height: 40px !important;
 }
 
 .restrGroups, .restrUsers {
   width: 330px;
   height: 40px !important;
   border: 1px solid #000;
   border-radius: 6px;
   margin: 0px 1px 0px 0px;
   padding: 0px 4px;
   overflow: hidden;
 }
 
 .restrGroups:hover, .restrUsers:hover {
   overflow: auto !important;
 }
 
 .alwdKeysGroups, .alwdKeysUsers {
   width: 398px;
   min-height: 80px !important;
   background-color: #ffffff !important;
   border: 1px solid #000;
   border-radius: 6px;
   margin: 0px 1px 0px 0px;
   padding: 0px 4px;
   overflow-y: scroll;
   white-space: pre-wrap;
 }
 
 .alwdKeysGroups:hover, .alwdKeysUsers:hover {
   overflow: auto !important;
 }
 
 #addRestrRow, #addArplRow {
   display: block;
   margin: 10px 0px 0px 6px;
   width: 16px;
   height: 16px;
   cursor: pointer;
   border-radius: 2px;
 }
 
 #autoReplyTbl td {
   text-align: left;
   vertical-align: top;
   padding: 0px 0px 10px 0px;
 }
 
 #autoReplyTbl th {
   font-weight: 500;
 }
 
 .arplAuthor {
   width: 200px;
   height: 38px !important;
 }
 
 .arplMode {
   display: inline-block;
   width: 330px;
   height: 184px;
   border: 1px solid #000;
   border-radius: 6px;
   margin: 0px 4px 0px 0px;
   overflow: visible;
 }
 
 .modeContent .date-picker-x {
    top: -170px !important;
    left: -170px !important;
 }
 
 .arplText {
   display: inline-block;
   color: #000000;
   width: 330px;
   height: 184px;
   font-size: 15px;
   text-align: left;
   border: 1px solid #000;
   border-radius: 6px;
   margin: 0px 1px 0px 0px;
   resize: vertical;
   white-space: pre-wrap;
   overflow: auto;
 }
 
 .selectArplMode {
   display: block;
   width: 322px;
   margin: 4px 0px 0px 4px;
   cursor: pointer;
   font-weight: 500;
 }
 
 .daysOfWeek {
   display: block;
   width: 100%;
   height: 26px;
   margin: 3px auto;
   font-weight: 500;
   text-align: center;
 }
 
 .daysInWeek {
   display: block;
   position: relative;
   width: 322px;
   height: auto;
   margin: 0px 0px 0px 4px !important;
   text-align: center;
   border: 1px solid #000;
   border-radius: 6px;
 }
 
 .chooseTInterval {
   display: block;
   width: 100%;
   height: 26px;
   margin: 5px auto 0px auto;
   font-weight: 500;
   text-align: center;
 }
 
 .selectArplHours {
   display: block;
   width: 100%;
   text-align: center;
 }
 
 .tooltipautoreply {
   display: inline-block;
   position: absolute;
   font-size: 15px;
   z-index: 9;
 }
 
 .tooltipautoreplyst, .tooltipautoreplypn {
   display: inline-block;
   position: absolute;
   font-size: 15px;
   z-index: 7;
 }
 
 #infoautoreply, #infoautoreplyst, #infoautoreplypn {
   display: inline-block;
   position: relative;
   margin: -2px 0px 0px 10px;
   color: #000000;
   font-size: 21px;
   font-weight: bold;
   font-family: 'Liberation Serif', sans-serif;
   font-style: italic;
   cursor: pointer;
 }
 
 .autorpltooltip, .autorpltooltipst, .autorpltooltippn {
   display: block;
   position: absolute;
   visibility: hidden;
   width: 330px;
   height: auto;
   background-color: #fafafa;
   font-size: 15px;
   font-weight: bold;
   white-space: normal;
   color: #595959;
   text-align: left;
   border-radius: 5px;
   padding: 5px 5px 5px 8px;
   margin: -4px 0px 0px -150px;
   box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
 }
 
 .tooltipautoreply:hover .autorpltooltip, .tooltipautoreplyst:hover .autorpltooltipst, .tooltipautoreplypn:hover .autorpltooltippn  {
    visibility: visible;
 }
 
 .selectHrMin {
   font-weight: 500 !important;
   color: #01446d !important;
 }
 
 .chooseDateIntvl {
   display: block;
   width: 100%;
   height: 32px;
   margin: 19px auto 4px auto;
   font-weight: 500;
   text-align: center;
 }
 
 .arplstrtendDates {
   display: block;
   position: absolute;
   width: 330px;
   height: auto;
 }
 
 .stdtTitle {
   display: inline-block;
   position: absolute;
   width: 140px;
   height: 38px;
   left: 10px;
   top: 2px;
   font-weight: 500;
   text-align: center;
 }
 
 .enddtTitle {
   display: inline-block;
   position: absolute;
   width: 140px;
   height: 38px;
   right: 10px;
   top: 2px;
   font-weight: 500;
   text-align: center;
 }
 
 .startDate {
   display: inline-block;
   position: absolute;
   width: 140px;
   height: 38px;
   left: 10px;
   top: 26px;
   border: 1px solid #3b3b3b;
   border-radius: 6px;
   text-align: center;
   font-weight: 500;
   color: #01446d !important;
 }
 
 .endDate {
   display: inline-block;
   position: absolute;
   width: 140px;
   height: 38px;
   right: 10px;
   top: 26px;
   border: 1px solid #3b3b3b;
   border-radius: 6px;
   text-align: center;
   font-weight: 500;
   color: #01446d !important;
 }
 
 #adminOverlay {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   z-index: 4990;
 }
 
 .grpsList, .usrsList {
   display: block;
   position: absolute;
   width: 300px;
   max-height: 400px;
   z-index: 5000;
   overflow: auto;
   background-color: #ffffff;
 }
 
 .groupsList, .usersList {
   display: block;
   position: relative;
   float: left;
   padding: 6px 4px;
   width: 300px;
   height: auto;
   color: #353535;
   border-radius: 6px;
   border: 1px solid #dadada;
   cursor: pointer;
 }
 
 .groupsList:hover, .usersList:hover {
   background-color: #f1f1f1;
 }
 
 .selectedGrps, .selectedUsrs {
   display: inline-block;
   position: relative;
   margin: 6px 1px 0px 1px;
   padding: 0px 6px;
   color: #353535;
   background-color: #ffffff;
   border: 1px solid #dadada;
   border-radius: 6px;
   box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
 }
 
 .removeGroup, .removeUser { 
   margin: 0px 0px -2px 6px;
   width: 12px;
   height: 12px;
   cursor: pointer;
 }
 
 .showAllGroups, .showAllUsers {
   max-width: 40px !important;
   margin: 3px 10px 0px 6px;
   background-color: #ffffff;
   border-radius: 6px;
   padding: 4px 4px 0px 4px;
   z-index: 5000;
 }
 
 .showAllGroupsak {
   max-width: 40px !important;
   margin: 3px 12px 0px 6px;
   background-color: #F7F7F7;
   border-radius: 6px;
   padding: 4px 4px 0px 4px;
 }
 
 .showAllUsersak {
   max-width: 40px !important;
   margin: 3px 10px 0px 6px;
   background-color: #F7F7F7;
   border-radius: 6px;
   padding: 4px 4px 0px 4px;
 }
 
 .showByNmbrTitle {
   display: block;
   width: 100%;
   color: #353535;
   text-align: center;
   font-size: 16px; 
   font-weight: 500;
   margin: 0px auto 5px auto;
 }
 
 .marksent {
   background-color: #F2FBFF !important;
 }
 
 .markreceived {
   background-color: #F2FFF5 !important;
 }
 
 #sentfiltersrow, #recfiltersrow, #grpfiltersrow {
   display: none;
   position: sticky;
   top: 27px;
   background: #FFFFFF;
   box-shadow: 0 6px 7px rgba(0, 0, 0, 0.1);
   z-index: 1000;
 }
 
 #sentSmsTable th, #recSmsTable th, #groupedSmsTable th {
   position: sticky;
   top: 27px;
   z-index: 999;
   border: 1px solid #f3f3f3;
   padding: 7px;
   background-color: #bfe5f2;
   font-size: 15px;
   font-weight: bold;
   text-align: center;
 }
 
 #sentSmsTable td, #recSmsTable td {
   border: 1px solid #f3f3f3;
   padding: 5px;
   white-space: normal;
 }
 
 .datecolsent {
   text-align: center;
 }
 
 .sentdbidcolumn {
   text-align: center;
 }
 
 .dbidcolumnrec {
   width: 50px;
   text-align: center;
 }
 
 .messagecolumnsent {
   background: #fffff2;
   text-align: left;
   font-weight: 500;
   width: 250px;
   word-break: break-word;
 }
 
 .messagecolumnrec {
   background: #fffff2;
   text-align: left;
   font-weight: 500;
   width: 526px;
   word-break: break-word;
 }
 
 .messageAuthorName {
   border: 0px;
   border-radius: 20px;
   padding: 4px 10px;
   margin: 0px 4px 0px 0px;
   color: #414141;
   background-color: #eff9ff;
 }
 
 .msgAuthorNameGrp {
   border: 0px;
   border-radius: 20px;
   padding: 3px 8px;
   margin: 0px 4px 0px 0px;
   color: #616161;
   background-color: #e8edff !important;
 }
 
 .addNameToPhNb {
   cursor: pointer;
   border-radius: 20px;
 }
 
 .listToFromMsgs {
   display: block;
   margin: 0 auto;
   width: 30px;
   text-align: center;
   cursor: pointer;
 }
 
 .lstMsgConv {
   display: block;
   position: relative;
   width: 30px;
   height: auto;
   text-align: center;
   margin: 4px auto 0 auto;
 }
 
 .lstMsgConvImg {
   cursor: pointer;
   height: auto;
 }
 
 .lstMsgToFromImg {
   cursor: pointer;
   height: auto;
 }
 
 .lstMsgToFromImg:hover, .lstMsgConvImg:hover {
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.25);
 }
 
 .lstMsgToFromImg:active, .lstMsgConvImg:hover {
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 0 9px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 9px rgba(0, 0, 0, 0.25);
 }
 
 
 #loadMoreMsgs, #loadMoreMsgsusr {
   display: none;
   margin: 1px auto 2px auto;
   width: 180px;
   height: 22px;
   border: 1px solid #b8d4e6;
   border-radius: 20px;
   color: #6c91b2;
   line-height: normal;
   text-align: center;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;
 }
 
 #loadMoreMsgs:hover, #loadMoreMsgsusr:hover {
   color: #3a6c9a;
   border: 1px solid #95bad3;
 }
 
 #loadMoreMsgs:active, #loadMoreMsgsusr:active {
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
   border: 1px solid #79a2be;
 }
 
 .addNameToPhNb:hover {
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.23);
 }
 
 .addNameToPhNb:active {
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.33);
   -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.33);
   -moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.33);
 }
 
 #recTblOverlay, #alertMsgOverlay {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000000;
   opacity: 0.09;
   z-index: 5050;
 }
 
 #disNameWindow, #alertMessage {
   display: block;
   position: absolute;
   width: 338px;
   height: auto;
   white-space: pre-wrap;
   border-radius: 6px;
   background-color: #ffffff;
   box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   z-index: 5100;
 }
 
 #alertTextWrap {
   display: block;
   text-align: left;
   font-size: 16px;
   margin: 30px 22px 16px 22px;
   color: #353535;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
 #closeDisNmWindow {
   display: block;
   position: absolute;
   width: 16px;
   height: 16px;
   right: 8px;
   top: 10px;
   padding: 0;
   background-image: url('../img/closewnd.svg');
   background-repeat: no-repeat;
   background-position: center center;
   cursor: pointer;
 }
 
 #closeFrmMsgWindow, #closeAlertWnd {
   display: block;
   position: absolute;
   width: 14px;
   height: 14px;
   right: 8px;
   top: 10px;
   padding: 0;
   background-image: url('../img/closewnd.svg');
   background-repeat: no-repeat;
   background-position: center center;
   cursor: pointer;
 }
 
 #sendMsgConvBtn {
   display: flex;
   width: 200px;
   height: 20px;
   padding: 0;
   margin: -2px auto 0 auto;
   color: #ffffff;
   background: #40c1a3;
   border: 1px solid #40c1a3;
   border-radius: 20px;
   text-align: center;
   font-weight: 500;
   cursor: pointer;
   line-height: normal;
   justify-content: center;
   align-items: end;
 }
 
 #sendMsgConvBtn:hover {
   background-color:  #3bb397 !important;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
 }
 
 #sendMsgConvBtn:active {
   background-color: #33a087 !important;
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
 }
 
 #saveDispName, #alertOk {
   display: block;
   border-radius: 20px !important;
   padding: 0px 14px !important;
   margin: 10px auto !important;
   color: #ffffff !important;
   background-color: #40c1a3 !important;
 }
 
 #saveDispName:hover, #alertOk:hover {
   background-color:  #3bb397 !important;
 }
 
 #saveDispName:active, #alertOk:active {
   background-color: #33a087 !important;
 }
 
 #sendMsgReply {
   display: none;
 }
 
 #sendMsgConv {
   display: block;
   width: 558px;
   height: auto;
   margin: 0 auto;
   border: none;
 }
 
 #sendMsgConv td {
   background-color: #ffffff;
   border: none;
 }
 
 #sendMsgConvText {
   display: inline-block;
   width: 558px;
   height: 72px;
   padding: 3px 5px;
   color: #000000;
   text-align: left;
   font-size: 16px;
   border-radius: 6px;
   resize: none;
   white-space: pre-wrap;
   border: 1px solid #dedede;
   background-color: #ffffff;
   overflow-y: auto;
 }
 
 #fromPhoneNmbrConv {
   display: inline-block;
   width: 50%;
   height: auto;
   margin: 6px 0px 2px 10px;
   font-weight: 500;
   color: #222222;
 }
 
 #toPhoneNmbrConv {
   display: inline-block;
   width: 50%;
   height: auto;
   margin: 6px 0px 2px -20px;
   font-weight: 500;
   color: #222222;
   text-align: right;
 }
 
 #selectFromNbConv {
   height: 26px;
   width: auto;
   margin: 0;
   text-align: left;
   color: #222222;
   background-color: #ffffff !important;
   border: 1px solid #d8d8d8;
 }
 
 #listAllMsgsFromTo {
   display: block;
   position: absolute;
   width: 600px;
   height: 490px;
   white-space: pre-wrap;
   border-radius: 6px;
   background-color: #ffffff;
   box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   z-index: 5100;
 }
 
 #listAllMsgsConv {
   display: block;
   position: absolute;
   width: 600px;
   height: 490px;
   white-space: pre-wrap;
   border-radius: 6px;
   background-color: #ffffff;
   box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -webkit-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   -moz-box-shadow: 0 0 23px rgba(0, 0, 0, 0.23);
   z-index: 5100;
 }
 
 #expandWindowRpl {
   display: block;
   margin: 4px auto 0 auto;
   cursor: pointer;
 }
 
 #dragDispNmWindow {
   display: block;
   position: relative;
   width: 40px;
   height: 20px;
   margin:-3px auto 0px auto;
   cursor: grab;
   text-align: center;
 }
 
 #draglstMsgmWindow {
   display: block;
   position: relative;
   width: 500px;
   height: 20px;
   margin:-3px auto 0px auto;
   cursor: grab;
   text-align: center;
 }
 
 #draglstMsgmWindowsc {
   display: block;
   position: absolute;
   width: 100%;
   height: 14px;
   bottom: 3px;
   cursor: grab;
   text-align: center;
 }
 
 #frmMsgLstWrap {
   display: block;
   position: relative;
   width: 560px;
   height: 400px;
   margin: 0 auto;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 #frmMsgLstTbl {
   display: block;
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 #frmMsgLstTbl td {
   text-align: left;
   vertical-align: top;
   background-color: #ffffff !important;
 }
 
 .groupedLstNamespn {
   display: block;
   position: fixed;
   width: 130px;
   height: auto;
   padding: 0px 0px 0px 4px;
   overflow-y: auto;
   white-space: pre-wrap;
 }
 
 #msgListRowCell {
   display: block;
   width: 428px;
   height: auto;
   margin: 0px 0px 0px 130px;
   padding: 0px 0px 0px 4px;
   overflow: scroll;
   white-space: nowrap;
 }
 
 .dispNameListAll {
   display: block;
   width: 100%;
   height: auto;
   border: 1px solid #c6cedb;
   border-radius: 20px;
   margin: 6px 0px 0px 0px;
   color: #04957b;
   font-size: 13px;
   padding: 0px 9px;
   text-align: center;
   font-weight: 500;
   cursor: pointer;
 }
 
 #selectAllChckbx:hover {
   cursor: pointer;
 }
 
 .indivchckbx:hover {
   cursor: pointer;
 }
 
 .selectsmsdv {
   width: 30px;
   padding: 5px 5px 5px 7px;
   text-align: center;
 }
 
 #selectalldv {
   width: 30px;
   padding: 5px 5px 5px 7px;
 }
 
 .indivfilter {
   height: 30px;
   font-weight: bold;
   padding: 0px;
 }
 
 .selectalldvfilter {
   border: 1px solid #f3f3f3;
   padding: 3px;
   margin: 0px; 
 }
 
 .filterbuttonsrec, .filterbuttonsent {
   display: block;
   position: relative;
   margin: 5px auto !important;
   border-radius: 3px !important;
   background-color: #ffffff !important;
   background-image: url('../img/filter_icon.svg');
   background-repeat: no-repeat;
   background-position: center center;
   cursor: pointer;
 }
 
 #clearrecfilters, #clearsentfilters, #cleargrpfilter {
   display: inline-block;
   width: 22px;
   height: 22px;
   background-color: #ffffff;
   background-image: url('../img/clearfilters.svg');
   background-repeat: no-repeat;
   background-position: center center;
   margin: 0px 0px 8px 0px;
   border: none;
   cursor: pointer;
 }
 
 #deleterecrows, #deletesentrows {
   display: inline-block;
   width: 16px;
   height: 20px;
   background-color: #ffffff;
   background-image: url('../img/garbage.svg');
   background-repeat: no-repeat;
   background-position: center center;
   margin: 0px 0px 4px 0px;
   border: none;
   cursor: pointer;
 }
 
 #deleterecrows:active, #deletesentrows:active {
   background-image: url('../img/garbage_bright.svg');
 }
 
 #toptablerec, #toptablesent, #toptablegrp {
   display: block;
   position: sticky;
   top: 0px;
   height: 27px;
   width: 100%;
   z-index: 1001;
 }
 
 .topbuttonandpage {
   display: block;
   position: relative;
   width: 100%;
   height: 27px;
   border-radius: 0px 24px 0px 0px;
   background: #FFFFFF;
   z-index: 1001;
 }
 
 #paginationrec, #paginationsent, #paginationgrp {
    display: block;
    position: relative;
    float: right;
    width: auto;
    margin: -25px 14px 0px 0px;
    font-size: 16px;
    font-weight: bold;
    color: #0082C9;
    z-index: 1002;
 }
 
 .arrowDownCl {
    background-image: url('../img/arrowDown.svg');
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1010;
 }
 
 .arrowUpCl {
    background-image: url('../img/arrowUp.svg');
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1010;   
 }
 
 @media (max-width: 1020px) {
   #recarrow, #sentarrow {
     display: block;
     position: relative;
     float: left;
     margin: 3.8px 0px 0px 50px;
     width: 17px;
     height: 17px;
     border: none;
     cursor: pointer;
   }
 }
 
 @media (min-width: 1021px) {
   #recarrow, #sentarrow {
     display: block;
     position: relative;
     float: left;
     margin: 3.8px 0px 0px 5px;
     width: 17px;
     height: 17px;
     border: none;
     cursor: pointer;
   }
 }
 
 #totalrecmessages, #totalsentmessages, #totalgrpmessages {
   display: block;
   position: relative;
   padding: 10px 0px 0px 7px;
   font-size: 14px;
   font-weight: bold;
   color: #4cbc86;
 }
 
 .pagenumbers, .pagenumbersbottom, .pagenumbersrec, .pagenumbersbottomrec, .pagenumbersgrp {
   color: #0082C9;
 }
 
 #dbidtextsent {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #dbidtextrec {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #useridtext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #useridtextrec {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #messageidtext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #messageidtextrec {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #datetext {
   display: block;
   margin: auto;
   width: 95px;
 }
 
 #datetextrec {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #fromtext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #fromtextrec {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #totext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #totextrec {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #networktext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #pricetext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #statustext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #deliveryrcpttext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #messagetext {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #messagetextrec {
   display: block;
   margin: auto;
   width: 95%;
 }
 
 #databaseidfilter {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
 #sentstatuscolumn {
   max-width: 160px;
 }
 
 .useridcolrec {
   width: 124px;
   background-color: #ffffff;
   text-align: center;
 }
 
 .messageidcolsent {
   overflow: visible;
   word-break: break-all;
   text-align: center;
 }
 
 .messageidcolrec {
   overflow: visible;
   word-break: break-all;
   width: 420px;
   text-align: center;
 }
 
 .datecolrec {
   width: 160px;
   text-align: center;
 }
 
 .fromcolumnrec {
   width: 140px;
   text-align: center;
   background-color: #f2fff5;
 }
 
 .tocolrec {
   width: 140px;
   background-color: #f2fbff;
   text-align: center;
 }
 
 .networkcolumnsent {
   max-width: 90px;
   background-color: #ffffff;
   word-break: break-word;
   text-align: center;
 }
 
 .useridcolsent, .pricecolumnsent, .statuscolumnsent, .deliveryrcptcolsent {
   background-color: #ffffff;
   text-align: center;
 }
 
 .tocolumnsent {
   background-color: #f2fbff;
   text-align: center;
 }
 
 .fromcolumnsent {
   background-color: #f2fff5;
   text-align: center;
 }
 
 .active {
   color: #c62b71;
 }
 
 #deleteoldmssgs {
   display: inline-block;
   position: relative;
   margin: 10px 0px 10px 1px;
   font-size: 16px;
   font-weight: bold;
 }
 
 #deleteoldsms {
   display: none;
   background: #e8f6ff;
   border-radius: 6px;
   padding: 5px;
 }
 
 #delOldrecSMS, #delOldsentSMS {
   display: block;
   background-color: #0082C9;
   color: #ffffff;
   margin: 10px 0px 10px 5px;
   border-radius: 20px;  
 }
 
 #delOldrecSMS:active, #delOldsentSMS:active {
   background: #00a2f9;
 }
 
 #delsetrows {
   display: block;
   padding: 5px;
 }
 
 .deletesmsolder {
   display: inline;
   font-size: 16px;
   font-weight: bold;
 }
 
 #oldrecSmsInterval, #oldsentSmsInterval {
   display: inline;
   width: 60px;
   height: 25px;
   padding: 0px 0px 0px 10px;
   font-size: 14px;
   font-weight: bold;
   border-radius: 20px;
 }
 
 #upArrow {
   background-image: url("../img/arrow-top.svg");
   background-repeat: no-repeat;
   background-color: transparent !important;
   opacity: 0.30;
   position: fixed;
   bottom: 40px;
   right: 4px;
   width: 50px;
   height: 50px;
   border: none;
   cursor: pointer;
   display: none;
   z-index: 1010;
 }
 
 #upArrow:hover {
   opacity: 1;
 }
 
 #arrowupWrap {
   display: block;
   position: sticky;
   width: 20px;
   height: 20px;
   bottom: 14px;
   left: 530px;
 }
 
 #upArrowSmall {
   background-image: url("../img/arrow-top-small.svg");
   background-repeat: no-repeat;
   background-color: transparent !important;
   width: 21px;
   height: 21px;
   opacity: 0.30;
   border: none;
   cursor: pointer;
   display: none;
   z-index: 5300;
 }
 
 #upArrowSmall:hover {
   opacity: 1;
 }
 
 .opensmsfolder {
   display: block;
   position: relative;
   margin: 10px 0px 10px 0px !important;
   padding: 7px 0px 7px 0px;
   width: 100% !important;
   color: #FFFFFF !important;
   font-size: 15px !important;
   background-color: #CB99C5 !important;
 }
 
 .opensmsfolder:hover {
   border: 2px;
   background-color: #c18bba !important;
 }
 
 .opensmsfolder:active {
   background-color: #b777af !important;
   border: 2px;
   color: #FFFFFF !important;
   border-color: #b777af;
 }
 
 .opensmsfolder:focus {
   background-color: #a3669b !important;
   border: 2px;
   border-color: #a3669b;
 }
 
 #save_sms_settings {
   display: inline-block;
   border-radius: 8px !important;
   padding: 0px 14px !important;
   color: #ffffff !important;
   background-color: #1e89c2 !important;
 }
 
 #save_sms_settings:hover {
   background-color: #0369a0 !important;
 }
 
 #save_sms_settings:active {
   background-color: #025480 !important;
 }
 
 /* Changes for dark themes */
 [data-theme-dark] .srheader,
 [data-theme-dark-highcontrast] .srheader {
   display: block;
   position: relative;
   margin: 0px 0px 7px 0px;
   color: #fafafa;
   font-size: 17px;
   font-weight: bold;
 }
 
 [data-theme-dark] #sendtomultiple,
 [data-theme-dark-highcontrast] #sendtomultiple {
   display: inline-block;
   position: relative;
   margin: 10px 0px 12px 0px;
   color: #fafafa;
   font-size: 16px;
   font-weight: bold;
 }
 
 [data-theme-dark] #entermessage,
 [data-theme-dark-highcontrast] #entermessage {
   display: block;
   position: relative;
   margin: 10px 0px 0px 0px;
   color: #fafafa;
   font-size: 16px;
   font-weight: bold;
 }
 
 [data-theme-dark] #sendmediafl,
 [data-theme-dark-highcontrast] #sendmediafl {
   display: block;
   position: relative;
   margin: 0px 0px 20px 0px;
   color: #fafafa;
   font-size: 16px;
   font-weight: bold;
 }
 
 [data-theme-dark] #deleteoldmssgs,
 [data-theme-dark-highcontrast] #deleteoldmssgs {
   display: inline-block;
   position: relative;
   margin: 10px 0px 10px 1px;
   color: #fafafa;
   font-size: 16px;
   font-weight: bold;
 }
 
 [data-theme-dark] #smsto,
 [data-theme-dark-highcontrast] #smsto {
   display: block;
   width: 99%;
   max-height: 32px;
   padding: 0px 15px 0px 15px;
   color: #fafafa;
   font-size: 16px;
   font-weight: bold;
   border-radius: 20px;
 }
 
 [data-theme-dark] #smstext,
 [data-theme-dark-highcontrast] #smstext {
   display: inline-block;
   color: #fafafa;
   width: 100%;
   height: 130px;
   text-align: left;
   font-size: 16px;
   border-radius: 6px;
   resize: vertical;
   white-space: pre-wrap;
 }
 
 
 [data-theme-dark] .arplText,
 [data-theme-dark-highcontrast] .arplText {
   display: inline-block;
   color: #fafafa;
   width: 330px;
   height: 184px;
   font-size: 15px;
   text-align: left;
   border: 1px solid #000;
   border-radius: 6px;
   margin: 0px 1px 0px 0px;
   resize: vertical;
   white-space: pre-wrap;
   overflow: auto;
 }
 
 [data-theme-dark] .tooltipbalanceid #infobalance,
 [data-theme-dark-highcontrast] .tooltipbalanceid #infobalance {
   display: block;
   position: relative;
   margin: 4px 14px 0px 0px;
   color: #fafafa;
   font-size: 21px;
   font-weight: bold;
   font-family: 'Liberation Serif', sans-serif;
   font-style: italic;
   z-index: 6;
 }
 
 [data-theme-dark] #infotipid,
 [data-theme-dark-highcontrast] #infotipid {
   display: block;
   position: relative;
   margin: 4px 14px 0px 0px;
   color: #fafafa;
   font-size: 21px;
   font-weight: bold;
   font-family: 'Liberation Serif', sans-serif;
   font-style: italic;
   z-index: 5;
 }
 
 [data-theme-dark] .fortooltip .texttooltip, [data-theme-dark] .maxmessagelength .texttooltip,
 [data-theme-dark-highcontrast] .fortooltip .texttooltip, [data-theme-dark-highcontrast] .maxmessagelength .texttooltip {
   font-family: 'Liberation Serif', Calibri, sans-serif;
   font-style: italic;
   color: #fafafa;
   font-size: 21px;
   font-weight: bold;
   margin: 0px 0px 4px 4px;
 }
 
 [data-theme-dark] #uploadfileforsms,
 [data-theme-dark-highcontrast] #uploadfileforsms {
   margin-left: 7px;
   background-color: #434343;
   border-radius: 3px !important;
 }
 
 [data-theme-dark] #uploadfileformms,
 [data-theme-dark-highcontrast] #uploadfileformms {
   margin-left: 21px;
   background-color: #434343;
   border-radius: 3px !important;
 }
 
 [data-theme-dark] .smsnbformat a,
 [data-theme-dark-highcontrast] .smsnbformat a {
   color: #cedfff !important;
 }
 
 [data-theme-dark] .smsnbformat font,
 [data-theme-dark-highcontrast] .smsnbformat font {
   color: #f7547a !important;
 }
 
 [data-theme-dark] .indivfiltersent, [data-theme-dark] .indivfilterrec,
 [data-theme-dark-highcontrast] .indivfiltersent, [data-theme-dark-highcontrast] .indivfilterrec {
   color: #fafafa !important;
 }
 
 [data-theme-dark] #recSmsTable, [data-theme-dark] #groupedSmsTable, [data-theme-dark] #sentSmsTable,
 [data-theme-dark-highcontrast] #recSmsTable, [data-theme-dark-highcontrast] #groupedSmsTable, [data-theme-dark-highcontrast] #sentSmsTable {
   color: #272727 !important;
 }
 
 [data-theme-dark] .providerSettings .setlabeltext,
 [data-theme-dark-highcontrast] .providerSettings .setlabeltext {
   color: #272727;
 }
 
 [data-theme-dark] .providerName,
 [data-theme-dark-highcontrast] .providerName  {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #272727;
 }
 
 [data-theme-dark] .selectHrMin, 
 [data-theme-dark-highcontrast] .selectHrMin,
 [data-theme-dark] .startDate,
 [data-theme-dark-highcontrast] .startDate,
 [data-theme-dark] .endDate,
 [data-theme-dark-highcontrast] .endDate {
    color: #ffffff !important;
 }
 
 [data-theme-dark] #infoautoreply, [data-theme-dark] #infoautoreplyst, [data-theme-dark] #infoautoreplypn,
 [data-theme-dark-highcontrast] #infoautoreply, [data-theme-dark-highcontrast] #infoautoreplyst, [data-theme-dark-highcontrast] #infoautoreplypn {
    color: #ffffff;
 }
 
 [data-theme-dark] .generateUrl,
 [data-theme-dark-highcontrast] .generateUrl {
    color: #013351 !important;
 }