css/style.css
934d4365
 /**
  * @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/>.
  *
  */
 
 .providerSettings {
    background-color: #F7F7F7;
    padding: 14px;
 }
 
 #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 {
    display: inline-block;
    box-sizing: content-box;
    width: 70%;
    font-size: 14px !important;
 }
 
 #copyToClipboardtel, #copyToClipboardnex {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0px 0px -4px 5px;
    cursor: pointer;
 }
 
 #copyToClipboardtel:hover, #copyToClipboardnex:hover {
    background-color: #E0E0E0;
 }
 
 #telapi_url, #nexapi_url {
    display: block;
    box-sizing: content-box;
    width: 70%;
    font-size: 14px !important;
 }
 
 #generate_tel_rcpt, #generate_tel_delrcpt, #generate_nex_rcpt, #generate_nex_delrcpt {
    display: block;
    white-space: normal;
    word-wrap: break-word;
 }
 
 #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 {
    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: 1px 0px 0px 96px;
   color: #262626;
   font-weight: 600;
 }
 
 #smsprovider {
   display: inline;
   position: absolute;
   width: 70px;
   height: 22px;
   padding: 0px 0px 1px 8px;
   margin: 3px 0px 0px 14px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: #fcfcfc;
   font-size: 15px;
   font-weight: 500;
   color: #565656;
   border-radius: 20px;
 }
 
 #currentsmsnmbrs {
   display: inline-block;
   position: absolute;
   height: 22px;
   width: 54%;
   padding: 0.4px 0px 0px 4px;
   margin: 2px 0px 0px 4px;
   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;
 }
 
 .tooltipsetid, .tooltipbalanceid  {
   position: relative;
   display: inline-block;
   float: right;
   font-size: 15px;
   color: #000000;
 }
 
 .tooltipbalanceid #infobalance {
   display: block;
   position: relative;
   margin: 4px 14px 0px 0px;
   color: #000000;
   font-size: 21px;
   font-weight: bold;
   font-family: Times New Roman;
   font-style: italic;
   z-index: 6;
 }
 
 .tooltipbalanceid .balancetooltip {
   display: block;
   position: absolute;
   visibility: hidden;
   width: 264px;
   background-color: #f4f4f4;
   font-size: 15px;
   font-weight: bold;
   color: #595959;
   text-align: left;
   border-radius: 1px;
   padding: 5px 5px 5px 8px;
   margin: -2px 0px 0px -242px;
   -webkit-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
   -moz-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
   box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
   z-index: 6;
 }
 
 .tooltipbalanceid:hover .balancetooltip {
    visibility: visible;
 }
 
 .tooltipsetid #infotipid {
    display: block;
    position: relative;
    margin: 4px 10px 0px 0px;
    color: #000000;
    font-size: 21px;
    font-weight: bold;
    font-family: Times New Roman;
    font-style: italic;
    z-index: 5;
 }
 
 .tooltipsetid .calleridtooltip {
    display: block;
    position: absolute;
    visibility: hidden;
    width: 264px;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    border-radius: 1px;
    padding: 5px 5px 5px 8px;
    margin: -2px 0px 0px -214px;
    -webkit-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    -moz-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    z-index: 6;
 }
 
 .tooltipsetid:hover .calleridtooltip {
    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 0px 3px 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, #sms_submit_msg {
    display: block;
    color: #181918;
    background-color: #a5e5b3;
    font-weight: bold;
 }
 
 #sms_submit_msg {
    margin: 8px 0px 8px 0px;
    padding-left: 5px;
    padding-right: 5px;
 }
 
 #pickedfilename {
    font-size: 13px;
 }
 
 #smstodiv {
    display: block;
    position: relative;
    height: 32px;
 }
 
 #smsto {
    display: block;
    width: 97%;
    max-height: 32px;
    margin: 5px 0px 20px 0px;
    padding: 0px 0px 0px 12px;
    color: #565656;
    font-size: 16px;
    font-weight: bold;
    border-radius: 20px;
 }
 
 #sendtomultiple {
    display: inline-block;
    position: relative;
    margin: 10px 0px 10px 0px;
    font-size: 16px;
    font-weight: bold;
 }
 
 #uploadfileforsms {
    margin-left: 7px;
    background-color: #ffffff;
 }
 
 .entertime {
    display: inline;
    font-size: 16px;
    font-weight: bold;
    margin-right: 7px;
 }
 
 #tomultiplechck {
    display: inline-block;
    position: relative;
    padding-left: 6px;
 }
 
 #tomultchckbx:hover {
    cursor: pointer;
 }
 
 #unicodesection {
    display: block;
 }
 
 #sendinunicode {
    display: inline-block;
    position: relative;
    margin: 10px 0px 10px 0px;
    font-size: 14px;
    font-weight: bold;
 }
 
 #sendunicodesms {
    display: inline;
    position: relative;
    padding-left: 6px;
 }
 
 #unicodechckbx:hover {
    cursor: pointer;
 }
 
 .sendunicodedv {
    position: relative;
    display: inline-block;
    padding: 2px 7px 4px 2px;
    font-size: 15px;
    color: #000000;
    z-index: 2;
 }
 
 .sendunicodedv .unicodedescr {
    display: block;
    position: absolute;
    visibility: hidden;
    width: 256px;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    border-radius: 1px;
    padding: 5px 7px 13px 7px;
    margin: -5px 0px 0px -3px;
    -webkit-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    -moz-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
 }
 
 .sendunicodedv:hover .unicodedescr {
    visibility: visible;
 }
 
 .maxmessagelength {
    display: none;
    position: relative;
    padding: 2px 7px 4px 2px;
    font-size: 15px;
    color: #000000;
    z-index: 1;
 }
 
 .maxmessagelength .maxlengthtooltip {
    display: block;
    position: absolute;
    visibility: hidden;
    width: 256px;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    border-radius: 1px;
    padding: 5px 7px 13px 7px;
    margin: -5px 0px 0px -3px;
    -webkit-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    -moz-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
 }
 
 .maxmessagelength:hover .maxlengthtooltip {
    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;
 }
 
 #char_count {
   display: none;
   font-size: 15px;
   font-weight: bold;
 }
 
 #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;
 }
 
 .uploadfiledv {
    position: relative;
    display: inline-block;
    padding: 6px 0px 5px 0px;
 }
 
 #multiplerecivers {
    display: none;
    background: #e8f6ff;
    border-radius: 6px;
    padding: 5px;
 }
 
 #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-content {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
 }
 
 #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%;
 }
 
 #app-content #app-content-wrapper {
    display: block;
    position: absolute;
    margin: 0;
    align-items: stretch;
    height: 100%;
    width: 100%;
 }
 
 #content {
    width: 81%;
    display: flex;
 }
 
 .texttooltip {
   font-family: Times New Roman, Calibri, sans-serif;
   font-style: italic;
   color: #000000;
   font-size: 21px;
   font-weight: bold;
   padding: 0px 0px 3px 3px;
 }
 
 .fortooltip {
    position: relative;
    display: inline-block;
    padding: 2px 0px 4px 2px;
    font-size: 15px;
    color: #000000;
    z-index: 4;
 }
 
 .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;
 }
 
 .fortooltip .fortooltiptext {
    display: block;
    position: absolute;
    visibility: hidden;
    width: 256px;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    border-radius: 1px;
    padding: 5px 7px 13px 7px;
    margin: -8px 0px 0px -4px;
    -webkit-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    -moz-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
 }
 
 .fortooltipsec .fortooltiptextsec {
    display: block;
    position: absolute;
    visibility: hidden;
    width: 256px;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    border-radius: 1px;
    padding: 7px;
    margin: -5px 0px 0px -7px;
    -webkit-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    -moz-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
 }
 
 .fortooltiptert .fortooltiptexttert {
    display: block;
    position: absolute;
    visibility: hidden;
    width: 256px;
    background-color: #f4f4f4;
    font-size: 15px;
    font-weight: bold;
    color: #595959;
    text-align: left;
    border-radius: 1px;
    padding: 7px;
    margin: -5px 0px 0px -6px;
    -webkit-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    -moz-box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
    box-shadow: 7px 9px 8px 0px rgba(212,212,212,1);
 }
 
 .fortooltip:hover .fortooltiptext {
    visibility: visible;
 }
 
 .fortooltipsec:hover .fortooltiptextsec {
    visibility: visible;
 }
 
 .fortooltiptert:hover .fortooltiptexttert {
    visibility: visible;
 }
 
 .fileupload {
    display: none;
 }
 
 div > label {
    position: relative;
 }
 
 .uploadflbt {
    width: 411px;
 }
 
 label span {
    display: inline-block;
    min-width: 110px;
    padding: 0px 0px 8px 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;
 }
 
 #filestotsize {
   display: none;
   position: relative;
   height:auto;
   padding: 0px 0px 8px 0px;
   color: #18bf6e;
   font-size: 14px;
   font-weight: bold;
 }
 
 #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;
 }
 
 .indivflcls:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
 .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;
 }
 
 #dirbuttons {
   margin-top: 30px;
 }
 
 button, input, textarea, div[contenteditable="true"], div[contenteditable="false"] {
   min-height: 9px;
 }
 
 select {
   width: 130px;
   min-height: 25px;
   box-sizing: border-box;
   padding-right: 0px !important;
 }
 
 .filterbuttonsrec, .filterbuttonsent {
   border-radius: 3px !important;
   background-color: #ffffff !important;
 }
 
 #uploadfileforsms {
   border-radius: 3px !important;
 }
 
 #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;
   width: 100%;
   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: 100%;
 }
 
 #recSmsTable {
   display: block;
   position: relative;
   top: 27px;
   width: 100%;
   height: auto;
   font-size: 14px;
   z-index: 50;
   background: #FFFFFF;
 }
 
 #sentSmsTable {
   display: block;
   position: relative;
   top: 27px;
   width: 100%;
   height: auto;
   font-size: 14px;
   z-index: 50;
   background: #FFFFFF;
 }
 
 .receivedrows, .receivedrowsbody, .sentrows, .sentrowsbody {
   border: 1px solid #F0F0F0;
   padding: 8px;
 }
 
 #sentfiltersrow, #recfiltersrow {
   display: none;
   position: sticky;
   top: 77px;
   background: #FFFFFF;
   z-index: 1000;
 }
 
 th {
   position: sticky;
   top: 77px;
   z-index: 999;
   border: 1px solid #F0F0F0;
   padding: 7px;
   background-color: #bfe5f2;
   font-size: 15px;
   font-weight: bold;
   text-align: center;
 }
 
 td {
   text-align: center;
   border: 1px solid #F0F0F0;
   padding: 5px;
   white-space: normal;
 }
 
 .dbidcolumnrec, .sentdbidcolumn {
   text-align: center;
 }
 
 .dbidcolumnrec {
   width: 50px;
 }
 
 .messagecolumnsent {
   background: #fffff2;
   text-align: left;
   font-weight: bold;
 }
 
 .messagecolumnrec {
   background: #fffff2;
   text-align: left;
   font-weight: bold;
   width: 380px;
 }
 
 #selectAllChckbx:hover {
   cursor: pointer;
 }
 
 .indivchckbx:hover {
   cursor: pointer;
 }
 
 .selectsmsdv {
   width: 30px;
   padding: 5px 5px 5px 7px;
 }
 
 #selectalldv {
   width: 30px;
   padding: 5px 5px 5px 7px;
 }
 
 .indivfilter {
   height: 30px;
   font-weight: bold;
   padding: 0px;
 }
 
 .selectalldvfilter {
   border: 1px solid #F0F0F0;
   padding: 3px;
   margin: 0px; 
 }
 
 .filterbuttonsrec, .filterbuttonsent {
   display: inline;
   position: relative;
   top: 1.8px;
   background-image: url('../img/filter_icon.svg');
   background-repeat: no-repeat;
   background-position: center center;
   cursor: pointer;
 }
 
 #clearrecfilters, #clearsentfilters {
   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 {
   display: block;
   position: fixed;
   height: 27px;
   width: 100%;
   padding-right: 318px;
   background: #FFFFFF;
   z-index: 1001;
 }
 
 @media screen and (max-width: 1026px) {
   #toptablerec, #toptablesent {
     padding-right: 16px;
   }
 }
 
 .topbuttonandpage {
    display: block;
    position: relative;
    top: 0px;
    right: 0px;
    left: 0px;
    width: auto;
    height: 27px;
    background: #FFFFFF;
    z-index: 1001;
 }
 
 #paginationrec, #paginationsent {
    display: block;
    position: relative;
    float: right;
    width: auto;
    margin: -25px 0px 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: 20px;
     height: 20px;
     border: none;
     cursor: pointer;
   }
 }
 
 @media (min-width: 1021px) {
   #recarrow, #sentarrow {
     display: block;
     position: relative;
     float: left;
     margin: 3.8px 0px 0px 5px;
     width: 20px;
     height: 20px;
     border: none;
     cursor: pointer;
   }
 }
 
 #totalrecmessages, #totalsentmessages {
   display: block;
   position: relative;
   padding: 26px 0px 0px 0px;
   font-size: 14px;
   font-weight: bold;
   color: #4cbc86;
 }
 
 .pagenumbers, .pagenumbersbottom, .pagenumbersrec, .pagenumbersbottomrec {
   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;
 }
 
 .messageidcolsent {
   overflow: visible;
   word-break: break-all;
 }
 
 .messageidcolrec {
   overflow: visible;
   word-break: break-all;
   width: 300px;
 }
 
 .datecolrec {
   width: 160px;
 }
 
 .fromcolumnrec {
   width: 140px;
 }
 
 .tocolrec {
   width: 140px;
   background-color: #f2fbff;
 }
 
 .networkcolumnsent {
   max-width: 80px;
   background-color: #ffffff;
 }
 
 .useridcolsent, .pricecolumnsent, .statuscolumnsent, .deliveryrcptcolsent {
   background-color: #ffffff;
 }
 
 .tocolumnsent {
   background-color: #f2fbff;
 }
 
 .fromcolumnrec, .fromcolumnsent {
   background-color: #f2fff5;
 }
 
 .active {
   color: #c62b71;
 }
 
 #deleteoldmssgs {
   display: inline-block;
   position: relative;
   margin: 15px 0px 10px 0px;
   font-size: 16px;
   font-weight: bold;
 }
 
 #deleteoldsms {
   display: none;
   background: #e8f6ff;
   border-radius: 6px;
   padding: 5px;
 }
 
 #deleteoldchck {
   display: inline-block;
   position: relative;
   margin: 15px 0px 0px 0px;
   padding: 15px 0px 0px 6px;
 }
 
 #deleteoldchckbox:hover {
   cursor: pointer;
 }
 
 #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;
 }
 
 .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;
 }