css/style.css
52fbe735
 /**
  * @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/>.
  *
  */
 
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-light.woff2') format('woff2'),
          url('../fonts/opensans-light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-lightitalic.woff2') format('woff2'),
          url('../fonts/opensans-lightitalic.woff') format('woff');
     font-weight: 300;
     font-style: italic;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-regular.woff2') format('woff2'),
          url('../fonts/opensans-regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-italic.woff2') format('woff2'),
          url('../fonts/opensans-italic.woff') format('woff');
     font-weight: 400;
     font-style: italic;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-semibold.woff2') format('woff2'),
          url('../fonts/opensans-semibold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-semibolditalic.woff2') format('woff2'),
          url('../fonts/opensans-semibolditalic.woff') format('woff');
     font-weight: 600;
     font-style: italic;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-bold.woff2') format('woff2'),
          url('../fonts/opensans-bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-bolditalic.woff2') format('woff2'),
          url('../fonts/opensans-bolditalic.woff') format('woff');
     font-weight: 700;
     font-style: italic;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-extrabold.woff2') format('woff2'),
          url('../fonts/opensans-extrabold.woff') format('woff');
     font-weight: 800;
     font-style: normal;
 }
 @font-face {
     font-family: 'Open Sans';
     src: url('../fonts/opensans-extrabolditalic.woff2') format('woff2'),
          url('../fonts/opensans-extrabolditalic.woff') format('woff');
     font-weight: 800;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-Regular.woff2') format('woff2'),
          url('../fonts/Inter-Regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-Italic.woff2') format('woff2'),
          url('../fonts/Inter-Italic.woff') format('woff');
     font-weight: 400;
     font-style: italic;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-Medium.woff2') format('woff2'),
          url('../fonts/Inter-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-MediumItalic.woff2') format('woff2'),
          url('../fonts/Inter-MediumItalic.woff') format('woff');
     font-weight: 500;
     font-style: italic;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-SemiBold.woff2') format('woff2'),
          url('../fonts/Inter-SemiBold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-SemiBoldItalic.woff2') format('woff2'),
          url('../fonts/Inter-SemiBoldItalic.woff') format('woff');
     font-weight: 600;
     font-style: italic;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-Bold.woff2') format('woff2'),
          url('../fonts/Inter-Bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-BoldItalic.woff2') format('woff2'),
          url('../fonts/Inter-BoldItalic.woff') format('woff');
     font-weight: 700;
     font-style: italic;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-ExtraBold.woff2') format('woff2'),
          url('../fonts/Inter-ExtraBold.woff') format('woff');
     font-weight: 800;
     font-style: normal;
 }
 @font-face {
     font-family: 'Inter';
     src: url('../fonts/Inter-ExtraBoldItalic.woff2') format('woff2'),
          url('../fonts/Inter-ExtraBoldItalic.woff') format('woff');
     font-weight: 800;
     font-style: italic;
 }
 
 #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;
 }
 
 #app-content #app-content-wrapper {
   height: 108% !important;
 }
 
 #pax_fax_vbar {
   padding: 18px;
   font-family: 'Open Sans';
   color: #6d6c6c;
 }
 
 #currentbaldiv {
   display: block;
   position: relative;
   font-size: 15px;
   font-weight: 700;
   padding: 3px 0 3px 14px;
   margin: 0 0 8px 0;
   color: #ffffff;
   background-color: #3f9dd1;
   border-radius: 20px;
 }
 
 #currentbalance {
   display: inline;
   position: relative;
   padding-left: 10px;
 }
 
 .providername {
   color: #FFFFFF;
 }
 
 .providername:hover {
   color: #003b94;
 }
 
 #faxnumbersdiv {
   display: block;
   position: relative;
   font-size: 15px;
   font-weight: 700;
   height: 30px;
   margin: 0px 0px 20px 0px;
   background: #3f9dd1;
   border-radius: 20px;
 }
 
 #currentfaxnmbrs {
   display: inline-block;
   position: absolute;
   height: 22px !important;
   width: 55%;
   font-size: 14px;
   font-weight: 600;
   text-align: center;
   padding: 0 0 2px 0;
   color: #565656;
   margin: 1px 0 0 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   background: #fcfcfc;
   border-radius: 20px;
 }
 
 .pflabels {
   font-size: 15px;
   font-weight: 700;
 }
 
 .pfheader {
   display: block;
   position: relative;
   margin: 0px 0px 7px 0px;
   font-size: 15px;
   font-weight: 700;
 }
 
 .faxnbformat {
   display: block;
   position: relative;
   margin: 0px 0px 4px 0px;
   font-size: 15px;
   font-weight: 700;
 }
 
 .pax_fax_box {
   display: block;
   box-sizing: content-box;
   margin: 8px 0px !important;
   width: 70%;
 }
 .indtext {
   display: inline-block;
   padding-left: 10px;
 }
 
 #settings-dscr {
   padding-top: 3px;
 }
 
 #pf_upload_msg, #pf_choose_msg, #pf_submit_msg {
   display: block;
   margin: 8px 0px 8px 0px;
   text-align: center;
   font-size: 15px;
   font-weight: 700;
   color: #181918;
   background-color: #a5e5b3;
   border-radius: 14px;
 }
 
 #paxfax_save_msg {
   display: inline;
   color: #181918;
   background-color: #a5e5b3;
   font-weight: 700;
   max-width: 70px;
   text-align: center;
   margin-top: 7px;
 }
 
 #pf_submit_msg {
   padding-left: 5px;
   padding-right: 5px;
 }
 
 #pickedfilename {
   font-size: 13px;
 }
 
 #faxtodiv {
   display: block;
   position: relative;
 }
 
 #faxto {
   display: block;
   width: 97%;
   max-height: 22px;
   margin: 3px 0px 20px 0px;
   padding: 0 13px 0 13px;
   color: #565656;
   font-family: 'Open Sans';
   font-size: 15px;
   font-weight: 700;
   border-radius: 20px;
 }
 
 .up-bttn-wrapper {
   display: block;
   position: relative;
   overflow: hidden;
   padding-top: 20px;
   padding-bottom: 30px;
 }
 
 #submitfax {
   display: block;
   color: white;
   font-family: 'Open Sans';
   font-weight: 700;
   font-size: 15px;
   background: #3f9dd1;
   padding: 5px 16px 6px 16px;
 }
 
 #submitfax:active {
   background: #00a2f9;
 }
 
 .uploadfiledv {
   position: relative;
   display: inline-block;
   margin: 4px 0px 22px 0px;
 }
 
 #faxfoldersview {
   display: inline-block;
   position: relative;
   width: 100%;
   height: 100%;
   // margin-top: -50px;
   background-color: #f4f9ff;
 }
 
 #viewerContainer {
   display: block;
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 #viewer {
   display: block;
   position: relative;
   min-width: 100%;
   min-height: 100%;
 }
 
 #faxdocpreview {
   display: block;
   position: relative;
   min-width: 100%;
   min-height: 100%;
   background-color: #f4f9ff;
 }
 
 #docPreviewFaxImg {
   display: block;
   position: relative;
   background-image: url('../img/pax_fax_grey.svg');
   background-repeat: no-repeat;
   background-position: center;
   width: 100%;
   height: 100%;
 }
 
 #outerContainer {
   display: block;
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 #mainContainer {
   display: block;
   position: relative;
   width: 100%;
   height: 100%;
 }
 
 #uploadedjpg, #uploadedpng {
   width: auto !important;
   height: auto !important;
 }
 
 .cllridcls {
   position: relative;
   display: inline;
   font-size: 17px;
   color: #000000;
   z-index: 3;
 }
 
 .fortooltipinit {
   position: relative;
   display: inline-block;
   float: right;
   font-size: 15px;
   color: #000000;
   z-index: 3;
 }
 
 .fortooltipinit #infosetid {
   display: block;
   position: relative;
   margin: 3px 9px 0 0;
   color: #000000;
   font-size: 19px;
   font-weight: 700;
   font-family: 'Open Sans';
   font-style: italic;
 }
 
 .fortooltip {
   position: relative;
   display: inline-block;
   font-size: 15px;
   color: #000000;
   z-index: 2;
 }
 
 .fortooltip #infonumber {
   color: #000000;
   font-size: 19px;
   font-weight: 700;
   font-family: 'Open Sans';
   font-style: italic;
   padding: 0px 0px 3px 3px;
 }
 
 .fortooltipsec {
   position: relative;
   display: inline-block;
   font-size: 15px;
   color: #000000;
   padding: 0px 0px 4px 0px;
   z-index: 1;
 }
 
 .fortooltipsec #infoformat {
   color: #000000;
   font-size: 19px;
   font-weight: 700;
   font-family: 'Open Sans';
   font-style: italic;
   padding: 0px 0px 3px 3px;
 }
 
 .fortooltipinit .calleridtooltip {
   display: block;
   position: absolute;
   visibility: hidden;
   width: 264px;
   background-color: #fafafa;
   font-size: 14px;
   font-weight: 700;
   color: #595959;
   text-align: left;
   border-radius: 5px;
   padding: 5px 10px;
   margin: -4px 0px 0px -214px;
   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);
 }
 
 .fortooltipinit:hover .calleridtooltip {
   visibility: visible;
 }
 
 .fortooltip .fortooltiptext {
   display: block;
   position: absolute;
   visibility: hidden;
   width: 256px;
   background-color: #fafafa;
   font-size: 14px;
   font-weight: 700;
   color: #595959;
   text-align: left;
   border-radius: 5px;
   padding: 5px 10px;
   margin: -10px 0 0 -4px;
   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);
 }
 
 .fortooltip:hover .fortooltiptext {
   visibility: visible;
 }
 
 .fortooltipsec .fortooltiptextsec {
   display: block;
   position: absolute;
   visibility: hidden;
   width: 256px;
   background-color: #fafafa;
   font-size: 14px;
   font-weight: 700;
   color: #595959;
   text-align: left;
   border-radius: 5px;
   padding: 5px 10px;
   margin: -9px 0 0 -4px;
   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);
 }
 
 .fortooltipsec:hover .fortooltiptextsec {
   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: 17px;
   font-weight: 700;
   color: #6d6c6c;
 }
 
 .fileuploadstl,.filesfromnc {
   display: block;
   font-size: 17px;
   font-weight: 700;
   color: #000000;
 }
 
 #filestotsize {
   display: none;
   position: relative;
   height:auto;
   margin: 0px 0px 16px 0px;
   font-family: 'Open Sans';
   color: #18bf6e;
   font-size: 14px;
   font-weight: 700;
 }
 
 #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: 15px;
   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: 15px;
 }
 
 #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;
   font-size: 15px;
   color: #0e6ba0;
 }
 
 .indivflpckd:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
 .indpckfldl {
   position: relative;
   display: inline-block;
   float: right;
   cursor: pointer;
   width: 20px;
   color: #0e6ba0;
   font-size: 15px;
   text-align: center;
 }
 
 #filespickednc .indpckfldl:hover {
   background-color: #e8f6ff;
   cursor: pointer;
 }
 
 select, button, .button, input:not([type="range"]), textarea, div[contenteditable="true"], .pager li a {
   margin: 0px 0px 0px 0px;
 }
 
 #dirbuttons {
   margin-top: 28px;
 }
 
 button, .button, input[type="button"], input[type="submit"], input[type="reset"] {
   padding: 6px 20px;
   width: auto;
   min-height: 22px;
   cursor: pointer;
   box-sizing: border-box;
   background-color: var(--color-background-dark);
 }
 
 select {
   width: 130px;
   min-height: 28px;
   box-sizing: border-box;
   padding-right: 0px !important;
 }
 
 #uploadfileforfax {
   margin-left: 19px;
 }
 
 #pickFromNext, #uploadFile {
   display: inline-block;
   position: relative;
   font-size: 15px;
   font-weight: 700;
   color: #6d6c6c;
 }
 
 #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;
 }
 
 #checkbalance {
   display: block;
   position: relative;
   min-width: 24px;
   min-height: 24px;
   float: right;
   padding-left: 0;
   margin-top: 0.3px;
   margin-right: 4px;
   background-image: url('../img/refresh_logo.svg');
   background-repeat: no-repeat;
   background-size: 110% 110%;
   background-position: center center;
   cursor: pointer;
   background-color: #FFFFFF;
 }
 
 #selectcalleridbttn {
   display: block;
   position: relative;
   min-width: 24px;
   min-height: 24px;
   float: right;
   padding-left: 0;
   margin-top: 2.8px;
   margin-right: 4px;
   background-image: url('../img/refresh_logo.svg');
   background-repeat: no-repeat;
   background-size: 110% 110%;
   background-position: center center;
   cursor: pointer;
   background-color: #ffffff;
 }
 
 #faxnumbersdiv #pickid {
   display: inline-block;
   position: relative;
   font-family: 'Open Sans';
   font-size: 15px;
   font-weight: 700;
   margin: 2px 3px 3px 14px;
   color: #ffffff;
 }
 
 #get_notification {
   display: block;
   margin-bottom: 8px;
 }
 
 #get_notification:hover {
   cursor: pointer;
 }
 
 .pax_fax_boxspec {
   display: inline-block;
   box-sizing: content-box;
   margin: 8px 0px !important;
   width: 70%;
   font-size: 14px !important;
 }
 
 .setlabeltext {
   font-size: 15px;
 }
 
 #countryCallCode {
   color: #1b60ba;
 }
 
 #countryCallCode:hover {
   color: #0D3B78;
 }
 
 .openfaxfolder {
   display: block;
   position: relative;
   margin: 10px 0px 10px 0px !important;
   padding: 7px 0px 7px 0px;
   width: 100% !important;
   color: #FFFFFF !important;
   font-family: 'Open Sans' !important;
   font-size: 15px !important;
   background-color: #CB99C5 !important;
 }
 
 .openfaxfolder:hover {
   border: 2px;
   background-color: #c18bba !important;
 }
 
 .openfaxfolder:active {
   background-color: #b777af !important;
   border: 2px;
   color: #FFFFFF !important;
   border-color: #b777af;
 }
 
 .openfaxfolder:focus {
   background-color: #a3669b !important;
   border: 2px;
   border-color: #a3669b;
 }
 
 .indgenflcls, .indgenpckfls {
   display: block;
   margin: 0px 6px 14px 6px;
 }
 
 #pax_fax_adm, #notification_email, #save_fax_settings {
   font-family: 'Open Sans';
 }
 
 #settings-dscr {
   font-size: 15.6px;
 }
 
 /*Changes for dark themes*/
 [data-theme-dark] .fortooltipinit #infosetid,
 [data-theme-dark-highcontrast] .fortooltipinit #infosetid {
   display: block;
   position: relative;
   margin: 4px 9px 0px 0px;
   color: #fafafa;
   font-size: 19px;
   font-weight: 700;
   font-family: 'Open Sans';
   font-style: italic;
 }
 
 [data-theme-dark] .fortooltip #infonumber,
 [data-theme-dark-highcontrast] .fortooltip #infonumber {
   color: #fafafa;
   font-size: 19px;
   font-weight: 700;
   font-family: 'Open Sans';
   font-style: italic;
   padding: 0px 0px 3px 3px;
 }
 
 [data-theme-dark] .fortooltipsec #infoformat,
 [data-theme-dark-highcontrast] .fortooltipsec #infoformat {
   color: #fafafa;
   font-size: 19px;
   font-weight: 700;
   font-family: 'Open Sans';
   font-style: italic;
   padding: 0px 0px 3px 3px;
 }
 
 [data-theme-dark] .faxnbformat a,
 [data-theme-dark-highcontrast] .faxnbformat a {
   color: #cedfff !important;
 }
 
 [data-theme-dark] .faxnbformat font,
 [data-theme-dark-highcontrast] .faxnbformat font {
   color: #f7547a !important;
 }
 
 [data-theme-dark] #faxto,
 [data-theme-dark-highcontrast] #faxto {
   display: block;
   width: 97%;
   max-height: 22px;
   margin: 3px 0px 20px 0px;
   padding: 1px 13px 0px 13px;
   color: #fafafa;
   font-size: 15px;
   font-weight: 700;
   border-radius: 20px;
 }
 
 [data-theme-dark] .pfheader,
 [data-theme-dark-highcontrast] .pfheader {
   display: block;
   position: relative;
   margin: 0px 0px 7px 0px;
   color: #fafafa;
   font-size: 15px;
   font-weight: 700;
 }
 
 [data-theme-dark] #uploadFile,
 [data-theme-dark] #pickFromNext,
 [data-theme-dark-highcontrast] #uploadFile,
 [data-theme-dark-highcontrast] #pickFromNext {
   display: inline-block;
   position: relative;
   font-size: 15px;
   font-weight: 700;
   color: #fafafa;
 }
 
 [data-theme-dark] #uploadfileforfax,
 [data-theme-dark-highcontrast] #uploadfileforfax {
   margin-left: 19px;
   background-color: #898989;
 }
 
 [data-theme-dark] #fileuploadednm .indivflcls,
 [data-theme-dark-highcontrast] #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: 15px;
   color: #c2e9ff;
 }
 
 [data-theme-dark] .indupfldl,
 [data-theme-dark-highcontrast] .indupfldl {
   position: relative;
   display: inline-block;
   float: right;
   cursor: pointer;
   width: 20px;
   color: #c2e9ff;
   text-align: center;
   font-size: 15px;
 }
 
 [data-theme-dark] #filespickednc .indivflpckd,
 [data-theme-dark-highcontrast] #filespickednc .indivflpckd {
   display: inline-block;
   position: relative;
   height: auto;
   max-width: 90%;
   overflow: visible;
   white-space: normal;
   word-break: break-all;
   text-overflow: ellipsis;
   font-size: 15px;
   color: #c2e9ff;
 }
 
 [data-theme-dark] .indpckfldl,
 [data-theme-dark-highcontrast] .indpckfldl {
   position: relative;
   display: inline-block;
   float: right;
   cursor: pointer;
   width: 20px;
   color: #c2e9ff;
   text-align: center;
 }