:root{
    --colorA:#222E60;
    --fontA:'Lato';
    --fontB:'Montserrat';
}

@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: 600;
}
@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Montserrat-Medium.ttf");
    font-weight: 400;
}

@font-face {
    font-family: 'Lato';
    src: url("../fonts/Lato-Regular.ttf");
    font-weight: 300;
}

@font-face {
    font-family: 'Lato';
    src: url("../fonts/Lato-Bold.ttf");
    font-weight: 600;
}
@font-face {
    font-family: 'Lato';
    src: url("../fonts/Lato-Bold.ttf");
    font-weight: bold;
}
html {
    margin:0;
    transition: opacity 0.3s;
    height:100%;
}
body{
    margin:0;
    font-family: var(--fontA), sans-serif;
    font-style: normal;
    height:100%;
}

.invviewer{
    background-image: linear-gradient(180deg, #222E60 0%, #202020 100%);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    opacity:0;
    display:none;
    transition:all .3s;
  }
  .invvHeadTbl{
    display:table;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border-bottom: 1px solid rgb(242, 241, 241, 0.5);
    height:65px;
  }
  .invvCellLeft{
    display:table-cell;
    vertical-align: middle;
    color:#FFFFFF;
    width:300px;
    text-align:left;
    padding-left:20px;
    font-size:90%;
  }
  .invvCellLeft span{
    color:#D7D7D7;
    font-weight:bold;
    padding-left:20px;
    font-size:95%;
  }
  .invvCellCenter{
    display:table-cell;
    width:auto;
    vertical-align: middle;
  }
  .invvCellRight{
    display:table-cell;
    vertical-align: middle;
    color:#FFFFFF;
    width:300px;
    text-align:right;
    padding-right:20px;
    font-size:90%;
  }
  .invVBtn{
    cursor:pointer;
  }
  .statusDscCell{
    display:table-cell;
    width:auto;
    vertical-align: middle;
    text-align:center;
    font-size:80%;
  }
  .statusIcCell{
    display:table-cell;
    width:15px;
    padding-left:5px;
    text-align:center;
    vertical-align: middle;
    position:relative;
  }
  .statusIcCell .fa-sort-down{
    position: absolute;
    height: auto;
    right: 0;
    top: -3px;
  }
  .invvStatusLbl{
    border-radius: 2px;
    width: auto;
    font-size:75%;
    padding:6px 13px;
    color:#FFFFFF;
    margin-left:auto;
    margin-right:auto;
    display:table;
    position:relative;
  }
  .sendStatus{
    background-color: #50AB47;
  }
  .penStatus{
    background-color: #E2DFDF;
    color:#4A4A4A;
  }
  .contentPage{
    height:calc(100% - 96px);
    overflow-y:auto;
    position:relative;
    padding-bottom:30px;
  }
  .frameView {
    max-width: calc(8.5in - 80px);
    max-height: calc(11in - 30px);
    min-height: calc(11in - 30px);
    height: calc(100% - 30px);
    width: calc(95% - 80px);
    border: 0;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #FFFFFF;
    padding: 15px 40px;
    z-index: 5;
    display: table;
    opacity: 0;
    transition: all .3s;
    box-shadow: 0 0 30px 0 rgb(0 0 0 / 50%);
  }
  .downloadViewer{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
  .statusPopup {
    left: 0;
    top: calc(100% + 5px);
    background-color: #F8FAFB;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 39%);
    color: #4A4A4A;
    border-radius: 5px;
    width: max-content;
    position: absolute;
    z-index: 6;
    padding: 10px 15px;
    font-size: 95%;
    transition:all .3s;
    opacity:0;
    display:none;
  }