@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");
.fr-emoticon {
  width: 40px;
  height: 40px;
  display: inline-block;
}

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}

:root {
  --logoLineHeight:80px;
}

.montserrat {
  font-family: Montserrat;
}

.hasReminder {
  background-color: #676767;
  border-radius: 50%;
  height: 5px;
  width: 5px;
  display: inline-block;
  margin-left: 50%;
}

.popover-body {
  background-color: white;
  padding: 10px;
  border-radius: 10px;
}

.checkbox-round {
  width: 1.3em;
  height: 1.3em;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #ddd;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.pointer {
  cursor: pointer;
}

button {
  border-radius: 10px;
}

#gr-out, #gr-out1, #gr-out0 {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.textRight {
  text-align: end;
  white-space: nowrap;
}

.underline {
  background-color: lightgray;
  width: 100%;
  height: 1px;
}

.textCenter {
  text-align: center;
}

.center {
  justify-content: center;
}

.flexRight {
  display: flex;
  flex-direction: row-reverse;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Raleway";
  font-weight: 400;
  box-sizing: border-box;
}

.bottomline {
  border-bottom: 1px lightgray solid;
  padding-bottom: 5px;
}

.row {
  display: flex;
  flex-direction: row;
  margin-right: 0;
  margin-left: 0;
}

.spacebetween {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.fontWeightMedium {
  font-weight: 500;
}

.fontWeightSemiBold {
  font-weight: 600;
}

.fontWeightBold {
  font-weight: 700;
}

.closePopBtn {
  border: 0;
  background-color: transparent;
}

.cursor {
  cursor: pointer;
}

.spacebetween {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.greyDot {
  background: #cbc9c6;
}

.redDot {
  background: #ff0000;
}

.greenDot {
  background: #5bd34b;
}

.blueDot {
  background: #0090ff;
}

.yellowDot {
  background: #ffdd00;
}

.orangeDot {
  background: #ff9500;
}

.bigDot {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  margin: 0 5px;
  font-size: 0.7rem;
  display: inline-block;
}

.smallDot {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
}

button, input {
  border-radius: 10px;
  border: 0;
}

.colorWhite {
  color: white;
}

.fontWeightMedium {
  font-weight: 500;
}

.fontWeightSemiBold {
  font-weight: 600;
}

.fontWeightBold {
  font-weight: 700;
}

.aHelp {
  text-decoration: none;
  cursor: pointer;
  color: black;
}

.aHelp:hover {
  text-decoration: none;
  cursor: pointer;
  color: black;
}

.content {
  max-width: 100%;
  display: flex;
  flex-direction: row;
}
.content .left {
  display: flex;
  flex-direction: column;
  background-color: #1e386e;
  position: relative;
  width: 370px;
  min-height: 100vh;
}
.content .left .logoLine {
  margin-top: 2em;
  align-items: center;
}
.content .left .logoLine img {
  width: 53.6px;
}
.content .left .logoLine span {
  font-size: 1.46rem;
  margin-left: 10px;
}
.content .left .menu {
  margin-top: 2em;
}
.content .left .menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.content .left .menu ul .active {
  background-color: #2d487d;
  border-right: 3px solid #afd4ff;
}
.content .left .menu ul li {
  padding: 0.7rem 0 0.7rem 2rem;
}
.content .left .menu ul li a {
  color: #afd4ff;
  font-size: 1.12rem;
}
.content .left .menu ul li a img {
  margin-right: 10px;
}
.content .left #profile {
  position: absolute;
  bottom: 20px;
  align-items: center;
  background-color: #1a305e;
  border-radius: 10px;
  padding: 5px 20px;
  margin-left: 20px;
}
.content .left #profile span {
  margin-left: 10px;
  font-size: 1.25rem;
}
.content .right {
  width: 100%;
  padding: 0.8rem 2.5rem;
  background-color: #f7f8fc;
  display: flex;
  flex-direction: column;
  position: relative;
}
.content .right .onlineChat {
  border-radius: 10px;
  width: 100%;
  align-items: center;
  height: 4.4rem;
  background: linear-gradient(to bottom, #a3d0ee, #89b6f2);
  vertical-align: middle;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content .right .onlineChat #text {
  text-align: center;
  color: white;
}
.content .right .onlineChat #text #one {
  font-size: 1.25rem;
}
.content .right .onlineChat #text #second {
  font-size: 0.83rem;
}
.content .right .onlineChat .icon {
  align-items: center;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 1rem;
}
.content .right .onlineChat .icon img {
  width: 30px;
}
.content .right .onlineChat .icon span {
  color: white;
}
.content .right #search input {
  background-color: #ebecef;
  border: 0;
  padding: 2px 10px;
}
.content .right #dashFilter {
  display: flex;
  flex-direction: row;
  background-color: white;
  border: 2px lightgray solid;
  border-radius: 10px;
  padding: 0.6rem;
}
.content .right #dashFilter div {
  border: 0;
  background-color: white;
  margin: 0 3px;
}
.content .right #dashFilter div span {
  font-size: 0.8rem;
  margin: 0 1px;
}
.content .right .ticketCollum {
  border: 1px lightgray solid;
  border-radius: 10px;
  background-color: white;
  width: 33%;
  margin: 0 1.4rem;
  height: 77vh;
  padding: 10px;
}
.content .right .ticketCollum .filter {
  font-size: 0.9rem;
  background-color: transparent;
  padding: 0.3rem 0.6rem;
  border: 1px lightgray solid;
}
.content .right .ticketCollum ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 3px;
}
.content .right .ticketCollum ::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.content .right .ticketCollum .header {
  font-size: 1.34rem;
}
.content .right .ticketCollum #newContainer, .content .right .ticketCollum #inproressContainer, .content .right .ticketCollum #closeContainer {
  overflow-y: auto;
  height: 95%;
}
.content .right .ticketCollum #newContainer .ticketItemBtn, .content .right .ticketCollum #inproressContainer .ticketItemBtn, .content .right .ticketCollum #closeContainer .ticketItemBtn {
  border: 1px #df0000 solid;
  display: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: 15%;
  background-color: white;
}
.content .right .ticketCollum #newContainer .ticketItemBtnSelect, .content .right .ticketCollum #inproressContainer .ticketItemBtnSelect, .content .right .ticketCollum #closeContainer .ticketItemBtnSelect {
  background-color: #df0000;
}
.content .right .ticketCollum #newContainer .ticketItem, .content .right .ticketCollum #inproressContainer .ticketItem, .content .right .ticketCollum #closeContainer .ticketItem {
  width: 80%;
  padding: 0.6rem 1rem 0.5rem 1rem;
  margin: 0.6rem 1rem;
  border: 1px lightgray solid;
  border-radius: 10px;
  position: relative;
}
.content .right .ticketCollum #newContainer .ticketItem .ticketName, .content .right .ticketCollum #inproressContainer .ticketItem .ticketName, .content .right .ticketCollum #closeContainer .ticketItem .ticketName {
  padding-bottom: 5px;
  border-bottom: 1px gray solid;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.content .right .ticketCollum #newContainer .ticketItem .missing, .content .right .ticketCollum #inproressContainer .ticketItem .missing, .content .right .ticketCollum #closeContainer .ticketItem .missing {
  padding: 0 5px;
  background-color: #d04a4d;
  color: white;
  font-size: 0.7rem;
}
.content .right .ticketCollum #newContainer .ticketItem .label, .content .right .ticketCollum #inproressContainer .ticketItem .label, .content .right .ticketCollum #closeContainer .ticketItem .label {
  font-size: 0.7rem;
}
.content .right .ticketCollum #newContainer .ticketItem .ticketText, .content .right .ticketCollum #inproressContainer .ticketItem .ticketText, .content .right .ticketCollum #closeContainer .ticketItem .ticketText {
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 0.7rem;
}
.content .right #newTicketContainer {
  margin: 1.7rem 2rem;
  border-radius: 10px;
  background: linear-gradient(to bottom, #ccddf9, #cceefc);
  padding: 1.4rem 2.7rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.content .right #newTicketContainer #left {
  width: 40%;
  padding: 1rem;
  margin-right: 1.5rem;
  background-color: white;
  border-radius: 10px;
  font-size: 0.88rem;
}
.content .right #newTicketContainer #left input {
  width: 100%;
  margin: 0.35rem 0;
  border-radius: 0;
  border-bottom: 0.1px lightgray solid;
}
.content .right #newTicketContainer #left .label {
  color: #004bb2;
  margin: 0.35rem 0;
}
.content .right #newTicketContainer #left .activeBtn {
  background-color: #f33333;
  color: white;
}
.content .right #newTicketContainer #left button {
  border: 1px lightgray solid;
  background-color: #fcfcfc;
  color: black;
  width: 40%;
  font-weight: 500;
  font-size: 0.65rem;
  padding: 0.3rem 0;
  width: 56%;
}
.content .right #newTicketContainer #left #clickProvince {
  height: 40vh;
  overflow-y: scroll;
  background-color: #e1e9f9;
}
.content .right #newTicketContainer #left #clickProvince input {
  margin: 10px 5px;
  padding: 5px;
  border-radius: 10px;
  font-size: 0.91rem;
  background-color: #f1f4fb;
}
.content .right #newTicketContainer #left #clickProvince #list {
  height: 40vh;
  overflow-y: scroll;
  background-color: #e1e9f9;
}
.content .right #newTicketContainer #left #clickProvince #list div {
  font-size: 0.73rem;
  margin: 10px 5px;
  cursor: pointer;
}
.content .right #newTicketContainer #right {
  width: 60%;
  padding: 1rem;
  background-color: white;
  border-radius: 10px;
  height: 420px;
}
.content .right #newTicketContainer #right .fileBlock {
  border: 1px lightgray solid;
  border-radius: 10px;
  width: 50%;
  margin: 0.9rem 0.7rem;
  font-size: 0.88rem;
  padding: 1rem 0.6rem;
}
.content .right #newTicketContainer #right .fileBlock .fileBlockRow1 {
  display: flex;
  flex-direction: row;
}
.content .right #newTicketContainer #right .fileBlock .fileBlockRow1 .fileBlockLeft {
  width: 65%;
  margin-right: 10px;
}
.content .right #newTicketContainer #right .fileBlock .fileBlockRow1 .fileBlockLeft .fileItem {
  margin: 5px 0;
  background-color: #e5efff;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
}
.content .right #newTicketContainer #right .fileBlock .fileBlockRow1 button {
  border: 1px lightgray solid;
  font-size: 0.6rem;
  height: 22px;
}
.content .right #newTicketContainer #resetBTN {
  background-color: transparent;
  border-radius: 10px;
  border: 2px #525f65 solid;
  font-family: "Raleway";
  font-weight: 600;
  font-size: 1.05rem;
  padding: 3px 10px;
  color: #525f65;
}
.content .right #newTicketContainer #submitBTN {
  color: white;
  padding: 5px 10px;
  background-color: #527acd;
  border-radius: 10px;
  border: 0;
  font-family: "Raleway";
  font-weight: 600;
  font-size: 1.05rem;
}
.content .right #liveChatMessage1, .content .right #liveChatMessage2 {
  display: none;
  position: absolute;
  height: 575px;
  width: 420px;
  right: 10px;
  bottom: 0;
  border: 1px lightgray solid;
  border-radius: 10px;
  background-color: white;
  z-index: 1;
}
.content .right #liveChatMessage1 #liveChatTitle, .content .right #liveChatMessage2 #liveChatTitle {
  padding: 5px 0;
  background: linear-gradient(to bottom, #a3d0ee, #89b6f2);
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content .right #liveChatMessage1 #liveChatTitle button, .content .right #liveChatMessage2 #liveChatTitle button {
  background-color: transparent;
  border: 0;
}
.content .right #liveChatMessage1 #liveChatTitle span, .content .right #liveChatMessage2 #liveChatTitle span {
  color: white;
}
.content .right #liveChatMessage1 #liveChatMessage1Center, .content .right #liveChatMessage2 #liveChatMessage1Center {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 30px;
}
.content .right #liveChatMessage1 #liveChatMessage1Center button, .content .right #liveChatMessage2 #liveChatMessage1Center button {
  padding: 5px 10px;
  color: #1f396e;
  border: 1px #627499 solid;
  border-radius: 10px;
  font-size: 0.8rem;
  background-color: white;
}
.content .right #liveChatMessage1 #liveChatMessageCenter, .content .right #liveChatMessage2 #liveChatMessageCenter {
  height: 490px;
  overflow: hidden;
  overflow-y: scroll;
  background-color: white;
  display: flex;
  flex-direction: column-reverse;
}
.content .right #liveChatMessage1 #liveChatMessageButtom, .content .right #liveChatMessage2 #liveChatMessageButtom {
  color: white;
  margin: 5px;
}
.content .right #liveChatMessage1 #liveChatMessageButtom input, .content .right #liveChatMessage2 #liveChatMessageButtom input {
  width: 100%;
  background-color: #cccccc;
  padding: 5px;
}
.content .right #liveChatMessage1 #liveChatMessageButtom button, .content .right #liveChatMessage2 #liveChatMessageButtom button {
  background-color: transparent;
  border: 0;
  position: absolute;
  top: 2px;
  right: 5px;
}
.content .right #reportSort .report-active {
  background-color: #9ab3e7;
  color: white;
}
.content .right #reportSort button, .content .right #reportSort span {
  background-color: #e3e4e8;
  border: 0;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: "Raleway";
  font-weight: 400;
  font-size: 0.8rem;
}
.content .right #reportTable {
  font-family: "Raleway";
  font-weight: 500;
  font-size: 0.8rem;
  background-color: white;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 10px;
}
.content .right #reportTable tr {
  height: 30px;
}
.content .right #reportTable a {
  text-decoration: none;
  color: black;
}
.content .right #messageContainer {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
.content .right #messageContainer #messageContainerLeft {
  width: 30%;
}
.content .right #messageContainer #messageContainerLeft #list {
  margin-top: 10px;
  height: 70vh;
  overflow-y: scroll;
  font-family: "Raleway";
  font-weight: 400;
  font-size: 0.83rem;
  border: 1px lightgray solid;
  border-radius: 10px;
  background-color: white;
}
.content .right #messageContainer #messageContainerLeft #list .listItem {
  position: relative;
  display: flex;
  flex-direction: row;
  border: 1px lightgray solid;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 20px;
}
.content .right #messageContainer #messageContainerLeft #list .listItem img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  margin-top: 3px;
}
.content .right #messageContainer #messageContainerLeft #list .listItem .bigDot {
  position: absolute;
  right: 3px;
  top: 3px;
}
.content .right #messageContainer #messageContainerLeft #list .active {
  background-color: #e9f2fd;
}
.content .right #messageContainer #messageContainerLeft #list .listItemActive {
  font-weight: 500;
}
.content .right #messageContainer #messageContainerRight {
  width: 70%;
  margin-left: 10px;
}
.content .right #messageContainer #messageContainerRight .active {
  background-color: #7594c7 !important;
  color: white;
}
.content .right #messageContainer #messageContainerRight .messageContainerRightTop {
  display: flex;
  flex-direction: row;
  font-size: 0.8rem;
  border: 1px lightgray solid;
  line-height: 20px;
  padding: 5px;
  border-radius: 10px;
  background-color: white;
  cursor: pointer;
}
.content .right #messageContainer #messageContainerRight .messageContainerRightTop img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.content .right #messageContainer #messageContainerRight .messageBodyMiddle {
  display: flex;
  flex-direction: column-reverse;
  height: 80vh;
  overflow-y: scroll;
  margin-top: 14px;
  border: 1px lightgray solid;
  border-radius: 5px;
  background-color: white;
}
.content .right #messageContainer #messageContainerRight .messageBodyMiddle .messageBodyMiddleLeftTime {
  font-size: 0.64rem;
  margin-left: 0.5rem;
}
.content .right #messageContainer #messageContainerRight .messageBodyMiddle .messageBodyMiddleRightTime {
  font-size: 0.64rem;
  display: flex;
  flex-direction: row-reverse;
  display: flex;
  margin-right: 0.5rem;
}
.content .right #messageContainer #messageContainerRight .messageBodyMiddle .messageBodyMiddleLeftMessage {
  white-space: pre-wrap;
  background-color: #ebebeb;
  padding: 0.4rem;
  border-radius: 5px;
  font-size: 0.85rem;
  max-width: 50%;
  margin: 0.5rem;
}
.content .right #messageContainer #messageContainerRight .messageBodyMiddle .messageBodyMiddleLeftMessage div {
  margin: 0;
  display: inline;
}
.content .right #messageContainer #messageContainerRight .messageBodyMiddle .messageBodyMiddleLeftMessage a {
  color: black;
}
.content .right #messageContainer #messageContainerRight .messageBodyMiddle .messageBodyMiddleRightMessage {
  white-space: pre-wrap;
  background-color: #2b2d43;
  padding: 0.4rem;
  border-radius: 5px;
  font-size: 0.85rem;
  color: white;
  max-width: 50%;
  margin: 0.5rem;
}
.content .right #messageContainer #messageContainerRight .messageBodyMiddle .aCss {
  border: 1px #66a6ff solid;
  padding: 0.3rem;
  color: #66a6ff;
  font-size: 0.8rem;
  margin-right: 0.3rem;
  margin-left: 0.3rem;
}
.content .right #messageContainer #messageContainerRight #messageBodyBottom {
  position: relative;
  background-color: white;
  min-height: 30px;
  display: flex;
  flex-direction: row;
  border: 1px lightgray solid;
  border-radius: 5px;
}
.content .right #messageContainer #messageContainerRight #messageBodyBottom input {
  width: 100%;
  padding: 0.2rem 0.5rem;
}
.content .right #messageContainer #messageContainerRight #messageBodyBottom #sendBtn {
  position: absolute;
  right: 5px;
  top: 2px;
}
.content .right #messageContainer #messageContainerRight #messageBodyBottom button {
  border: 0;
  background-color: transparent;
}
.content .right #profileContainer {
  display: flex;
  flex-direction: row;
}
.content .right #profileContainer #profileContainerLeft {
  width: 30%;
}
.content .right #profileContainer #profileContainerLeft #menu {
  border: 1px grey solid;
  border-radius: 5px;
  background: white;
  display: flex;
  flex-direction: column;
  margin: 20px;
}
.content .right #profileContainer #profileContainerLeft #menu div {
  border-bottom: 1px lightgray solid;
  padding: 10px;
}
.content .right #profileContainer #profileContainerLeft #menu div a {
  color: black;
  text-decoration: none;
  font-family: "Raleway";
  font-weight: 500;
  font-size: 0.83rem;
}
.content .right #profileContainer #profileContainerRight {
  width: 70%;
  margin: 20px;
  border: 1px grey solid;
  border-radius: 5px;
  background: white;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.content .right #profileContainer #profileContainerRight .label {
  color: #274aa2;
  margin: 0.35rem 0;
}
.content .right #profileContainer #profileContainerRight input, .content .right #profileContainer #profileContainerRight select {
  width: 100%;
  background-color: #eaf0ff;
  border: 0;
  padding: 0.2rem 1rem;
  margin: 0.35rem 0;
}
.content .right #profileContainer #profileContainerRight select {
  width: 110%;
}
.content .right #profileContainer #profileContainerRight button {
  background-color: transparent;
}
.content .right #profileContainer #profileContainerRight .userRow {
  padding: 0.8rem 0;
}
.content .right #profileContainer #profileContainerRight .userRow .div1 {
  width: 20%;
}
.content .right #profileContainer #profileContainerRight .userRow .div2 {
  width: 30%;
}
.content .right #profileContainer #profileContainerRight .userRow .div3 {
  width: 25%;
}
.content .right #profileContainer #profileContainerRight .userRow .div4 {
  width: 20%;
}
.content .right #profileContainer #profileContainerRight .userRow .div5 {
  width: 20%;
}
.content .right1 {
  z-index: 1;
  width: 100%;
  background-color: #f7f8fc;
  display: flex;
  flex-direction: column;
}
.content .right1 .notificationTop {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.content .right1 .notificationTop div {
  padding: 0.5rem 0;
}
.content .right1 .moreInfo {
  background-color: #5bd34b;
  margin: 5px 0;
  color: white;
}
.content .right1 .moreInfo b {
  margin: 0 10px;
}
.content .right1 .moreInfo button {
  margin: -7px 10px 0px 7px;
  background-color: transparent;
  color: white;
}
.content .right1 #pendingSignTop, .content .right1 #pendingPayTop, .content .right1 #requestTop, .content .right1 #requestMessageTop, .content .right1 #pendingOtherPayTop, .content .right1 #signServiceAgreementTop {
  background-color: #a31f22;
  padding: 2px 10px;
  margin: 5px 0;
}
.content .right1 #pleaTop, .content .right1 #reviewTop, .content .right1 #pendingContactTop, .content .right1 .pleaTop {
  background-color: #fdb22a;
  margin: 5px 0;
}
.content .right1 #pleaTop button, .content .right1 #reviewTop button, .content .right1 #pendingContactTop button, .content .right1 .pleaTop button {
  border: 0;
  border-radius: 5px;
  padding: 0 5px;
  font-size: 0.9rem;
  margin: 2px 5px;
}
.content .right1 .notificationNumber {
  background-color: #a31f22;
  border-radius: 50%;
  color: white;
  width: 22px;
  height: 22px;
  display: none;
  margin-left: 5px;
  text-align: center;
}
.content .right1 #backLink {
  margin-top: 14px;
  color: #525f65;
  font-size: 1.05rem;
}
.content .right1 #ticketOwner {
  border-radius: 10px;
  margin-right: 1rem;
  border: 1px #1f396d solid;
  padding: 0.3rem 1rem;
}
.content .right1 #ticketContainer {
  background-color: white;
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem 3rem;
}
.content .right1 #ticketContainer #topRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content .right1 #ticketContainer #topRow #topRowLeft {
  padding: 0.8rem 1rem;
  border-radius: 5px;
  vertical-align: middle;
  border: 1px lightgray solid;
  height: 3.2rem;
}
.content .right1 #ticketContainer #topRow #topRowRight {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 350px;
  background-color: #1f396d;
  border-radius: 5px;
  padding: 12px;
}
.content .right1 #ticketContainer #topRow #topRowRight .block {
  display: flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  color: white;
  font-family: "Raleway";
  font-weight: 400;
  font-size: 0.5rem;
}
.content .right1 #ticketContainer #topRow #topRowRight .block img {
  border-radius: 50%;
  border: 1px white solid;
  width: 30px;
  padding: 5px;
  margin-bottom: 3px;
}
.content .right1 #ticketContainer #topRow #topRowRight .activeStatus {
  font-size: 0.7rem;
  font-weight: 500;
}
.content .right1 #ticketContainer #topRow #topRowRight .activeStatus img {
  width: 40px;
  height: 40px;
  border: 3px white solid;
  background-color: #d4c247;
}
.content .right1 #ticketContainer #topRow #topRowRight .greenStatus #inProcessText {
  color: lightgreen;
}
.content .right1 #ticketContainer #topRow #topRowRight .redStatus #inProcessText {
  color: red;
}
.content .right1 #ticketContainer #topRow #topRowRight .pleaDealStatus img {
  background-color: orange;
}
.content .right1 #ticketContainer #topRow #topRowRight .pleaDealStatus #inProcessText {
  color: orange;
}
.content .right1 #ticketContainer #topRow #topRowRight .resolvedStatus {
  font-size: 0.7rem;
  font-weight: 500;
}
.content .right1 #ticketContainer #topRow #topRowRight .resolvedStatus img {
  width: 40px;
  height: 40px;
  border: 3px white solid;
  background-color: #4a9e38;
}
.content .right1 #ticketContainer #ticketTagBtn {
  margin-top: 10px;
  border-bottom: 1px gray solid;
  display: flex;
  flex-direction: row;
}
.content .right1 #ticketContainer #ticketTagBtn .tags {
  width: 150px;
  font-family: "Raleway";
  font-weight: 400;
  font-size: 1.06rem;
}
.content .right1 #ticketContainer #ticketTagBtn .ticketTagBtnActive {
  border-bottom: 3px black solid;
  padding-bottom: 7px;
  font-family: "Raleway";
  font-weight: 600;
  font-size: 1.06rem;
}
.content .right1 #ticketContainer .tagBody {
  display: none;
  margin-top: 1.8rem;
}
.content .right1 #ticketContainer #overviewBody, .content .right1 #ticketContainer #documentBody {
  display: none;
  flex-direction: row;
}
.content .right1 #ticketContainer #overviewBody #overviewLeftTitle, .content .right1 #ticketContainer #overviewBody .documentRightTitle, .content .right1 #ticketContainer #overviewBody #documentLeftTitle, .content .right1 #ticketContainer #documentBody #overviewLeftTitle, .content .right1 #ticketContainer #documentBody .documentRightTitle, .content .right1 #ticketContainer #documentBody #documentLeftTitle {
  font-family: "Raleway";
  font-weight: 500;
  font-size: 1.33rem;
  color: #1f396e;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft, .content .right1 #ticketContainer #overviewBody #documentLeft, .content .right1 #ticketContainer #documentBody #overviewLeft, .content .right1 #ticketContainer #documentBody #documentLeft {
  width: 60%;
  padding: 20px;
  border-radius: 5px;
  border: 1px lightgray solid;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft input, .content .right1 #ticketContainer #overviewBody #documentLeft input, .content .right1 #ticketContainer #documentBody #overviewLeft input, .content .right1 #ticketContainer #documentBody #documentLeft input {
  border: 0;
  background-color: transparent;
  margin: 0.5rem 0;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .label, .content .right1 #ticketContainer #overviewBody #documentLeft .label, .content .right1 #ticketContainer #documentBody #overviewLeft .label, .content .right1 #ticketContainer #documentBody #documentLeft .label {
  font-size: 0.88rem;
  color: #004bb2;
  padding: 0.35rem 0;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft #overviewRowLeft, .content .right1 #ticketContainer #overviewBody #documentLeft #overviewRowLeft, .content .right1 #ticketContainer #documentBody #overviewLeft #overviewRowLeft, .content .right1 #ticketContainer #documentBody #documentLeft #overviewRowLeft {
  width: 60%;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft #overviewRowRight, .content .right1 #ticketContainer #overviewBody #documentLeft #overviewRowRight, .content .right1 #ticketContainer #documentBody #overviewLeft #overviewRowRight, .content .right1 #ticketContainer #documentBody #documentLeft #overviewRowRight {
  width: 40%;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft #overviewRowRight .activeBtn, .content .right1 #ticketContainer #overviewBody #documentLeft #overviewRowRight .activeBtn, .content .right1 #ticketContainer #documentBody #overviewLeft #overviewRowRight .activeBtn, .content .right1 #ticketContainer #documentBody #documentLeft #overviewRowRight .activeBtn {
  background-color: #f33333;
  color: white;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft #overviewRowRight button, .content .right1 #ticketContainer #overviewBody #documentLeft #overviewRowRight button, .content .right1 #ticketContainer #documentBody #overviewLeft #overviewRowRight button, .content .right1 #ticketContainer #documentBody #documentLeft #overviewRowRight button {
  border: 1px lightgray solid;
  background-color: #fcfcfc;
  color: black;
  width: 40%;
  font-weight: 500;
  font-size: 0.65rem;
  padding: 0.3rem 0;
  width: 56%;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 0;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlock, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlock, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlock, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlock {
  border: 1px lightgray solid;
  border-radius: 10px;
  width: 48%;
  padding: 10px 5px;
  font-size: 0.88rem;
  min-height: 50px;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlock .fileItem, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlock .fileItem, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlock .fileItem, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlock .fileItem {
  margin: 0.3rem 0;
  padding: 0.2rem 0.5rem;
  background-color: #e5efff;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlock .attach, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlock .attach, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlock .attach, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlock .attach {
  border: 1px lightgray solid;
  border-radius: 10px;
  font-size: 0.6rem;
  padding: 0.2rem 0.4rem;
  height: 20px;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlock .missing, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlock .missing, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlock .missing, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlock .missing {
  border: 0;
  background-color: transparent;
  margin-left: 10px;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlock .missing img, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlock .missing img, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlock .missing img, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlock .missing img {
  width: 20px;
  content: url("../images/ques.png");
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlockMissing, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlockMissing, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlockMissing, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlockMissing {
  background-color: #9a9a9a !important;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlockMissing .fileItem, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlockMissing .fileItem, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlockMissing .fileItem, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlockMissing .fileItem {
  background-color: #8f959e !important;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlockMissing button, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlockMissing button, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlockMissing button, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlockMissing button {
  background-color: #8f959e !important;
  border: 0;
}
.content .right1 #ticketContainer #overviewBody #overviewLeft .fileBlockRow .fileBlockMissing .missing img, .content .right1 #ticketContainer #overviewBody #documentLeft .fileBlockRow .fileBlockMissing .missing img, .content .right1 #ticketContainer #documentBody #overviewLeft .fileBlockRow .fileBlockMissing .missing img, .content .right1 #ticketContainer #documentBody #documentLeft .fileBlockRow .fileBlockMissing .missing img {
  content: url("../images/quesMissing.png") !important;
}
.content .right1 #ticketContainer #overviewBody .overviewRight, .content .right1 #ticketContainer #overviewBody .documentRight, .content .right1 #ticketContainer #documentBody .overviewRight, .content .right1 #ticketContainer #documentBody .documentRight {
  width: 40%;
}
.content .right1 #ticketContainer #overviewBody .overviewRight .reminderItem, .content .right1 #ticketContainer #overviewBody .documentRight .reminderItem, .content .right1 #ticketContainer #documentBody .overviewRight .reminderItem, .content .right1 #ticketContainer #documentBody .documentRight .reminderItem {
  font-size: 0.7rem;
  margin-left: 14px;
  border-radius: 5px;
  border: 2px black solid;
  padding: 0.3rem;
  margin: 0.4rem 0;
}
.content .right1 #ticketContainer #overviewBody .overviewRight .reminderRow, .content .right1 #ticketContainer #overviewBody .documentRight .reminderRow, .content .right1 #ticketContainer #documentBody .overviewRight .reminderRow, .content .right1 #ticketContainer #documentBody .documentRight .reminderRow {
  color: red;
  margin: 0.4rem 0;
}
.content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightTitle, .content .right1 #ticketContainer #overviewBody .overviewRight #documentLeftTitle, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightTitle, .content .right1 #ticketContainer #overviewBody .documentRight #documentLeftTitle, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightTitle, .content .right1 #ticketContainer #documentBody .overviewRight #documentLeftTitle, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightTitle, .content .right1 #ticketContainer #documentBody .documentRight #documentLeftTitle {
  font-size: 1.33rem;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #newSatatusOverview, .content .right1 #ticketContainer #overviewBody .overviewRight #contactOverview, .content .right1 #ticketContainer #overviewBody .overviewRight #paymentOverview, .content .right1 #ticketContainer #overviewBody .overviewRight #contactPaymentProgress, .content .right1 #ticketContainer #overviewBody .overviewRight #newSatatusDocument, .content .right1 #ticketContainer #overviewBody .overviewRight #contactPaymentDocument, .content .right1 #ticketContainer #overviewBody .overviewRight #newSatatusCancelTicket, .content .right1 #ticketContainer #overviewBody .overviewRight #paymentReceipt, .content .right1 #ticketContainer #overviewBody .overviewRight #reinstate, .content .right1 #ticketContainer #overviewBody .documentRight #newSatatusOverview, .content .right1 #ticketContainer #overviewBody .documentRight #contactOverview, .content .right1 #ticketContainer #overviewBody .documentRight #paymentOverview, .content .right1 #ticketContainer #overviewBody .documentRight #contactPaymentProgress, .content .right1 #ticketContainer #overviewBody .documentRight #newSatatusDocument, .content .right1 #ticketContainer #overviewBody .documentRight #contactPaymentDocument, .content .right1 #ticketContainer #overviewBody .documentRight #newSatatusCancelTicket, .content .right1 #ticketContainer #overviewBody .documentRight #paymentReceipt, .content .right1 #ticketContainer #overviewBody .documentRight #reinstate, .content .right1 #ticketContainer #documentBody .overviewRight #newSatatusOverview, .content .right1 #ticketContainer #documentBody .overviewRight #contactOverview, .content .right1 #ticketContainer #documentBody .overviewRight #paymentOverview, .content .right1 #ticketContainer #documentBody .overviewRight #contactPaymentProgress, .content .right1 #ticketContainer #documentBody .overviewRight #newSatatusDocument, .content .right1 #ticketContainer #documentBody .overviewRight #contactPaymentDocument, .content .right1 #ticketContainer #documentBody .overviewRight #newSatatusCancelTicket, .content .right1 #ticketContainer #documentBody .overviewRight #paymentReceipt, .content .right1 #ticketContainer #documentBody .overviewRight #reinstate, .content .right1 #ticketContainer #documentBody .documentRight #newSatatusOverview, .content .right1 #ticketContainer #documentBody .documentRight #contactOverview, .content .right1 #ticketContainer #documentBody .documentRight #paymentOverview, .content .right1 #ticketContainer #documentBody .documentRight #contactPaymentProgress, .content .right1 #ticketContainer #documentBody .documentRight #newSatatusDocument, .content .right1 #ticketContainer #documentBody .documentRight #contactPaymentDocument, .content .right1 #ticketContainer #documentBody .documentRight #newSatatusCancelTicket, .content .right1 #ticketContainer #documentBody .documentRight #paymentReceipt, .content .right1 #ticketContainer #documentBody .documentRight #reinstate {
  border-radius: 5px;
  border: 1px lightgray solid;
  padding: 1.4rem 1rem;
  background: linear-gradient(to bottom, #b6d8fe, #b6effe);
}
.content .right1 #ticketContainer #overviewBody .overviewRight .newPaymentProgress, .content .right1 #ticketContainer #overviewBody .overviewRight .signatureReuiredProgress, .content .right1 #ticketContainer #overviewBody .documentRight .newPaymentProgress, .content .right1 #ticketContainer #overviewBody .documentRight .signatureReuiredProgress, .content .right1 #ticketContainer #documentBody .overviewRight .newPaymentProgress, .content .right1 #ticketContainer #documentBody .overviewRight .signatureReuiredProgress, .content .right1 #ticketContainer #documentBody .documentRight .newPaymentProgress, .content .right1 #ticketContainer #documentBody .documentRight .signatureReuiredProgress {
  border-radius: 5px;
  border: 1px lightgray solid;
  padding: 1.4rem 1rem;
  background: linear-gradient(to bottom, #f6d3ca, #f7cadb);
}
.content .right1 #ticketContainer #overviewBody .overviewRight .resolvedResolved, .content .right1 #ticketContainer #overviewBody .documentRight .resolvedResolved, .content .right1 #ticketContainer #documentBody .overviewRight .resolvedResolved, .content .right1 #ticketContainer #documentBody .documentRight .resolvedResolved {
  display: none;
  border-radius: 5px;
  border: 1px lightgray solid;
  padding: 10px;
  margin-top: 10px;
  background: linear-gradient(to bottom, #41ad80, #487b4a);
}
.content .right1 #ticketContainer #overviewBody .overviewRight .resolvedResolved1, .content .right1 #ticketContainer #overviewBody .documentRight .resolvedResolved1, .content .right1 #ticketContainer #documentBody .overviewRight .resolvedResolved1, .content .right1 #ticketContainer #documentBody .documentRight .resolvedResolved1 {
  display: none;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #reminder, .content .right1 #ticketContainer #overviewBody .documentRight #reminder, .content .right1 #ticketContainer #documentBody .overviewRight #reminder, .content .right1 #ticketContainer #documentBody .documentRight #reminder {
  margin-top: 10px;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #overviewRightBox, .content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox, .content .right1 #ticketContainer #overviewBody .documentRight #overviewRightBox, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox, .content .right1 #ticketContainer #documentBody .overviewRight #overviewRightBox, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox, .content .right1 #ticketContainer #documentBody .documentRight #overviewRightBox, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox {
  text-align: center;
  align-items: center;
  background-color: #dbdbdb;
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  margin-top: 1.6rem;
  border-radius: 5px;
  padding: 1rem;
  font-weight: 500;
  font-size: 0.83rem;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox1, .content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightBox1, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox1, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightBox1, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox1, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightBox1, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox1, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightBox1 {
  background-color: white;
  border-radius: 5px;
  border: 1px lightgray solid;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  margin-top: 1.6rem;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox1 #documentRightBox1Title, .content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightBox1 #documentRightBox1Title, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox1 #documentRightBox1Title, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightBox1 #documentRightBox1Title, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox1 #documentRightBox1Title, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightBox1 #documentRightBox1Title, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox1 #documentRightBox1Title, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightBox1 #documentRightBox1Title {
  font-weight: 500;
  font-size: 0.67rem;
  text-align: center;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox1 .item, .content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightBox1 .item, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox1 .item, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightBox1 .item, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox1 .item, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightBox1 .item, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox1 .item, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightBox1 .item {
  padding: 1rem 0;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox1 .item .itemLeft, .content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightBox1 .item .itemLeft, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox1 .item .itemLeft, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightBox1 .item .itemLeft, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox1 .item .itemLeft, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightBox1 .item .itemLeft, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox1 .item .itemLeft, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightBox1 .item .itemLeft {
  width: 60%;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox1 .item .itemLeft .itemDescription, .content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightBox1 .item .itemLeft .itemDescription, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox1 .item .itemLeft .itemDescription, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightBox1 .item .itemLeft .itemDescription, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox1 .item .itemLeft .itemDescription, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightBox1 .item .itemLeft .itemDescription, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox1 .item .itemLeft .itemDescription, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightBox1 .item .itemLeft .itemDescription {
  font-size: 0.5rem;
  margin-top: 0.3rem;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox1 .item a, .content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightBox1 .item a, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox1 .item a, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightBox1 .item a, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox1 .item a, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightBox1 .item a, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox1 .item a, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightBox1 .item a {
  text-decoration: none;
  color: white;
  border-radius: 10px;
  padding: 0.4rem 0.8rem;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox1 .item a img, .content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightBox1 .item a img, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox1 .item a img, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightBox1 .item a img, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox1 .item a img, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightBox1 .item a img, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox1 .item a img, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightBox1 .item a img {
  margin-left: 5px;
}
.content .right1 #ticketContainer #overviewBody .overviewRight #documentRightBox1 .item button, .content .right1 #ticketContainer #overviewBody .overviewRight .overviewRightBox1 .item button, .content .right1 #ticketContainer #overviewBody .documentRight #documentRightBox1 .item button, .content .right1 #ticketContainer #overviewBody .documentRight .overviewRightBox1 .item button, .content .right1 #ticketContainer #documentBody .overviewRight #documentRightBox1 .item button, .content .right1 #ticketContainer #documentBody .overviewRight .overviewRightBox1 .item button, .content .right1 #ticketContainer #documentBody .documentRight #documentRightBox1 .item button, .content .right1 #ticketContainer #documentBody .documentRight .overviewRightBox1 .item button {
  border: 0;
  color: white;
  font-weight: 600;
  font-size: 0.75rem;
}
.content .right1 #ticketContainer #overviewBody #additionalComments, .content .right1 #ticketContainer #documentBody #additionalComments {
  width: 100%;
}
.content .right1 #ticketContainer #penaltiesBody {
  padding: 20px;
}
.content .right1 #ticketContainer #penaltiesBody #title {
  font-family: "Raleway";
  font-weight: 500;
  font-size: 1.33rem;
  color: #1f396e;
}
.content .right1 #ticketContainer #penaltiesBody #newSatatusPenalties {
  margin: 10px 150px;
  padding: 20px;
  text-align: center;
  align-items: center;
  background-color: #dbdbdb;
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  border-radius: 5px;
}
.content .right1 #ticketContainer #penaltiesBody #newSatatusPenalties p {
  font-family: "Raleway";
  font-weight: 500;
  font-size: 0.83rem;
}
.content .right1 #ticketContainer #penaltiesBody .contactSatatusPenalties {
  display: flex;
  flex-direction: row;
}
.content .right1 #ticketContainer #penaltiesBody .contactSatatusPenalties .penaltyBlock {
  position: relative;
  width: 46%;
  margin: 2%;
  border: 1px lightgray solid;
  border-radius: 10px;
  padding: 10px;
}
.content .right1 #ticketContainer #penaltiesBody .contactSatatusPenalties .penaltyBlock .title {
  margin-bottom: 1rem;
}
.content .right1 #ticketContainer #penaltiesBody .contactSatatusPenalties .penaltyBlock .convictionSec {
  font-size: 0.83rem;
  width: 20%;
  padding: 0.5rem 0;
}
.content .right1 #ticketContainer #penaltiesBody .contactSatatusPenalties .penaltyBlock .convictionDescription {
  font-size: 0.83rem;
  width: 60%;
  padding: 0.5rem 0;
}
.content .right1 #ticketContainer #penaltiesBody .contactSatatusPenalties .penaltyBlock .convictionPoint {
  font-size: 0.83rem;
  width: 20%;
  padding: 0.5rem 0;
}
.content .right1 #ticketContainer #messageBody {
  position: relative;
  height: 61vh;
}
.content .right1 #ticketContainer #messageBody #messageHeader {
  display: flex;
  flex-direction: row;
}
.content .right1 #ticketContainer #messageBody #messageHeader .messageContainerRightTop {
  position: relative;
  margin-left: 10px;
  border-radius: 5px;
  border: 1px lightgray solid;
  display: flex;
  flex-direction: row;
  padding: 5px 10px 0 5px;
  cursor: pointer;
}
.content .right1 #ticketContainer #messageBody #messageHeader .messageContainerRightTop img {
  margin-right: 5px;
}
.content .right1 #ticketContainer #messageBody #messageHeader .messageContainerRightTop .Jobtitle {
  font-size: 0.83rem;
  margin-bottom: 5px;
}
.content .right1 #ticketContainer #messageBody #messageHeader .messageContainerRightTop .name {
  font-size: 0.64rem;
  line-height: 5px;
}
.content .right1 #ticketContainer #messageBody #messageHeader .active {
  background-color: #7594c7;
  color: white;
}
.content .right1 #ticketContainer #messageBody .messageBodyMiddle {
  display: flex;
  flex-direction: column-reverse;
  height: 50vh;
  overflow-y: scroll;
  margin-top: 14px;
  border: 1px lightgray solid;
  border-radius: 5px;
}
.content .right1 #ticketContainer #messageBody .messageBodyMiddle .messageBodyMiddleLeftTime {
  font-size: 0.64rem;
  margin-left: 0.5rem;
}
.content .right1 #ticketContainer #messageBody .messageBodyMiddle .messageBodyMiddleRightTime {
  font-size: 0.64rem;
  display: flex;
  flex-direction: row-reverse;
  display: flex;
  margin-right: 0.5rem;
}
.content .right1 #ticketContainer #messageBody .messageBodyMiddle .messageBodyMiddleLeftMessage {
  background-color: #ebebeb;
  padding: 0.4rem;
  border-radius: 5px;
  font-size: 0.85rem;
  max-width: 50%;
  margin: 0.5rem;
  white-space: pre-wrap;
}
.content .right1 #ticketContainer #messageBody .messageBodyMiddle .messageBodyMiddleLeftMessage div {
  margin: 0;
  display: inline;
}
.content .right1 #ticketContainer #messageBody .messageBodyMiddle .messageBodyMiddleLeftMessage a {
  color: black;
}
.content .right1 #ticketContainer #messageBody .messageBodyMiddle .messageBodyMiddleRightMessage {
  background-color: #2b2d43;
  padding: 0.4rem;
  border-radius: 5px;
  font-size: 0.85rem;
  color: white;
  max-width: 50%;
  margin: 0.5rem;
  white-space: pre-wrap;
}
.content .right1 #ticketContainer #messageBody .messageBodyMiddle .aCss {
  border: 1px #66a6ff solid;
  padding: 0.3rem;
  color: #66a6ff;
  font-size: 0.8rem;
  margin-right: 0.3rem;
  margin-left: 0.3rem;
}
.content .right1 #ticketContainer #messageBody #messageBodyBottom {
  width: 100%;
  display: flex;
  flex-direction: row;
  min-height: 30px;
  bottom: 0px;
  position: relative;
  border: 1px lightgray solid;
  border-radius: 5px;
}
.content .right1 #ticketContainer #messageBody #messageBodyBottom input {
  width: 100%;
  font-family: "Raleway";
  font-weight: 400;
}
.content .right1 #ticketContainer #messageBody #messageBodyBottom #sendBtn {
  position: absolute;
  right: 5px;
  top: 2px;
}
.content .right1 #ticketContainer #messageBody #messageBodyBottom button {
  border: 0;
  background-color: transparent;
}
.content .right1 #ticketContainer #noteBody .notecard {
  border-radius: 10px;
  border: 1px lightgray solid;
  padding: 0.9rem 0.5rem;
  margin: 0.5rem 0;
  overflow-y: hidden;
}
.content .right1 #ticketContainer #noteBody .notecard button {
  background-color: transparent;
}
.content #sign1Pop, .content #sign2Pop, .content #bcPop {
  z-index: 3;
  position: absolute;
  top: 40%;
  left: 20%;
  padding: 1.5rem;
  background-color: white;
  border-radius: 10px;
  display: none;
  text-align: center;
  width: 40%;
}
.content #cancelPop1, .content #cancelPop2, .content #pleaPop1, .content #pleaPop2, .content #assignPop, .content #missingPopUp, .content #importantDatePop, .content #deadlinePop, .content #cancelPop3, .content #cancelPop4, .content #alertPop {
  z-index: 3;
  position: absolute;
  width: 40rem;
  top: 40%;
  left: 30%;
  padding: 1rem;
  background-color: white;
  border-radius: 10px;
  display: none;
}
.content #cancelPop1 #reaonBlock, .content #cancelPop2 #reaonBlock, .content #pleaPop1 #reaonBlock, .content #pleaPop2 #reaonBlock, .content #assignPop #reaonBlock, .content #missingPopUp #reaonBlock, .content #importantDatePop #reaonBlock, .content #deadlinePop #reaonBlock, .content #cancelPop3 #reaonBlock, .content #cancelPop4 #reaonBlock, .content #alertPop #reaonBlock {
  background-color: #e2eaf9;
  margin-top: 0.2rem;
  border-radius: 10px;
  padding: 1rem;
  width: 23rem;
  border-top: 1px lightgray solid;
}
.content #cancelPop1 #reaonBlock input, .content #cancelPop2 #reaonBlock input, .content #pleaPop1 #reaonBlock input, .content #pleaPop2 #reaonBlock input, .content #assignPop #reaonBlock input, .content #missingPopUp #reaonBlock input, .content #importantDatePop #reaonBlock input, .content #deadlinePop #reaonBlock input, .content #cancelPop3 #reaonBlock input, .content #cancelPop4 #reaonBlock input, .content #alertPop #reaonBlock input {
  border-radius: 10px;
  background-color: #f1f4fb;
}
.content #cancelPop1 #reaonBlock div, .content #cancelPop2 #reaonBlock div, .content #pleaPop1 #reaonBlock div, .content #pleaPop2 #reaonBlock div, .content #assignPop #reaonBlock div, .content #missingPopUp #reaonBlock div, .content #importantDatePop #reaonBlock div, .content #deadlinePop #reaonBlock div, .content #cancelPop3 #reaonBlock div, .content #cancelPop4 #reaonBlock div, .content #alertPop #reaonBlock div {
  margin: 0.5rem 0;
  font-size: 0.9rem;
}
.content #cancelPop1 #reaonBlock input, .content #cancelPop2 #reaonBlock input, .content #pleaPop1 #reaonBlock input, .content #pleaPop2 #reaonBlock input, .content #assignPop #reaonBlock input, .content #missingPopUp #reaonBlock input, .content #importantDatePop #reaonBlock input, .content #deadlinePop #reaonBlock input, .content #cancelPop3 #reaonBlock input, .content #cancelPop4 #reaonBlock input, .content #alertPop #reaonBlock input {
  border-radius: 10px;
  background-color: #f1f4fb;
}
.content #cancelPop1 .assignItem, .content #cancelPop2 .assignItem, .content #pleaPop1 .assignItem, .content #pleaPop2 .assignItem, .content #assignPop .assignItem, .content #missingPopUp .assignItem, .content #importantDatePop .assignItem, .content #deadlinePop .assignItem, .content #cancelPop3 .assignItem, .content #cancelPop4 .assignItem, .content #alertPop .assignItem {
  margin: 0.5rem;
}
.content #cancelPop1 .assignItem input, .content #cancelPop2 .assignItem input, .content #pleaPop1 .assignItem input, .content #pleaPop2 .assignItem input, .content #assignPop .assignItem input, .content #missingPopUp .assignItem input, .content #importantDatePop .assignItem input, .content #deadlinePop .assignItem input, .content #cancelPop3 .assignItem input, .content #cancelPop4 .assignItem input, .content #alertPop .assignItem input {
  width: 2rem;
  margin-right: 1rem;
}
.content #cancelPop1 .assignItem div, .content #cancelPop2 .assignItem div, .content #pleaPop1 .assignItem div, .content #pleaPop2 .assignItem div, .content #assignPop .assignItem div, .content #missingPopUp .assignItem div, .content #importantDatePop .assignItem div, .content #deadlinePop .assignItem div, .content #cancelPop3 .assignItem div, .content #cancelPop4 .assignItem div, .content #alertPop .assignItem div {
  background-color: white;
  border-radius: 10px;
  padding: 0.2rem 0.5rem;
  width: 100%;
}
.content #importantDatePop .row {
  font-size: 1.2rem;
  margin: 0.2rem 0;
}
.content #importantDatePop .row div:first-child {
  width: 200px;
}
.content .right2 {
  width: 100%;
  padding: 0 30px;
  background-color: #f7f8fc;
  display: flex;
  flex-direction: column;
  position: relative;
}
.content .right2 .ManitobaInput {
  padding: 0.3rem 0.5rem;
  border: 1px black solid;
  z-index: 1;
}
.content .right2 #paymentContainer {
  display: flex;
  flex-direction: row;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  margin-top: 1.3rem;
}
.content .right2 #paymentContainer .title {
  padding-bottom: 10px;
  border-bottom: 1px lightgray solid;
  display: flex;
  justify-content: space-between;
}
.content .right2 #paymentContainer #paymentContainerLeft {
  width: 50%;
  border: 1px gray solid;
  border-radius: 10px;
  padding: 15px;
}
.content .right2 #paymentContainer #paymentContainerLeft input {
  width: 90%;
  border-radius: 10px;
  border: 0;
  font-size: 0.76rem;
  padding: 0.5rem 1rem;
}
.content .right2 #paymentContainer #paymentContainerLeft .errorPayment {
  border-color: red !important;
  background-color: #f1dcdc !important;
}
.content .right2 #paymentContainer #paymentContainerRight {
  width: 50%;
  margin: 20px 20px 0 20px;
}
.content .right2 #signFinish {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  border-radius: 10px;
  align-items: center;
  padding: 6.8rem 0;
  margin-top: 1.5rem;
}
.content .right2 #signFinish a {
  color: white;
  padding: 8px 10px;
  border-radius: 10px;
}
.content .right2 #signFinish button {
  color: white;
  padding: 5px 10px;
  border: 0;
  border-radius: 10px;
  margin-right: 10px;
}
.content .right2 #signFinish button img {
  width: 15px;
  height: 15px;
  margin-left: 10px;
}
.content .right2 #backLink {
  margin-top: 14px;
  color: #525f65;
  font-family: "Raleway";
  font-weight: 400;
  font-size: 1.05rem;
}
.content .right2 #sign0, .content .right2 #sign1, .content .right2 #sign2, .content .right2 #sign1fr {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  font-family: "Raleway";
  height: 75vh;
  overflow-y: scroll;
}
.content .right2 #sign1Bottom, .content .right2 #sign2Bottom, .content .right2 #sign3Bottom, .content .right2 #sign0Bottom {
  background-color: white;
  border-radius: 10px;
  padding: 10px;
}
.content .right2 #sign1Bottom .sign1div, .content .right2 #sign1Bottom .sign2div, .content .right2 #sign1Bottom .sign3div, .content .right2 #sign1Bottom .sign0div, .content .right2 #sign2Bottom .sign1div, .content .right2 #sign2Bottom .sign2div, .content .right2 #sign2Bottom .sign3div, .content .right2 #sign2Bottom .sign0div, .content .right2 #sign3Bottom .sign1div, .content .right2 #sign3Bottom .sign2div, .content .right2 #sign3Bottom .sign3div, .content .right2 #sign3Bottom .sign0div, .content .right2 #sign0Bottom .sign1div, .content .right2 #sign0Bottom .sign2div, .content .right2 #sign0Bottom .sign3div, .content .right2 #sign0Bottom .sign0div {
  display: none;
}
.content .right2 #sign1Bottom .sign1Btn, .content .right2 #sign1Bottom .sign2Btn, .content .right2 #sign1Bottom .sign3Btn, .content .right2 #sign1Bottom .sign0Btn, .content .right2 #sign2Bottom .sign1Btn, .content .right2 #sign2Bottom .sign2Btn, .content .right2 #sign2Bottom .sign3Btn, .content .right2 #sign2Bottom .sign0Btn, .content .right2 #sign3Bottom .sign1Btn, .content .right2 #sign3Bottom .sign2Btn, .content .right2 #sign3Bottom .sign3Btn, .content .right2 #sign3Bottom .sign0Btn, .content .right2 #sign0Bottom .sign1Btn, .content .right2 #sign0Bottom .sign2Btn, .content .right2 #sign0Bottom .sign3Btn, .content .right2 #sign0Bottom .sign0Btn {
  background-color: transparent;
  width: 80px;
  margin: 20px 40px;
  padding: 20px 0;
  border-radius: 0 !important;
}
.content .right2 #sign1Bottom .underlineBtn, .content .right2 #sign2Bottom .underlineBtn, .content .right2 #sign3Bottom .underlineBtn, .content .right2 #sign0Bottom .underlineBtn {
  border-bottom: 1px solid #7ac2e6;
  border-radius: 0;
  width: 100%;
  color: #7ac2e6;
  font-weight: bold;
}
.content .right2 #sign1Bottom #sign-pad1, .content .right2 #sign1Bottom #sign-pad2, .content .right2 #sign1Bottom #sign1done, .content .right2 #sign1Bottom #sign-pad0, .content .right2 #sign2Bottom #sign-pad1, .content .right2 #sign2Bottom #sign-pad2, .content .right2 #sign2Bottom #sign1done, .content .right2 #sign2Bottom #sign-pad0, .content .right2 #sign3Bottom #sign-pad1, .content .right2 #sign3Bottom #sign-pad2, .content .right2 #sign3Bottom #sign1done, .content .right2 #sign3Bottom #sign-pad0, .content .right2 #sign0Bottom #sign-pad1, .content .right2 #sign0Bottom #sign-pad2, .content .right2 #sign0Bottom #sign1done, .content .right2 #sign0Bottom #sign-pad0 {
  display: none;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.content .right2 #sign1Bottom #sign-pad1 canvas, .content .right2 #sign1Bottom #sign-pad2 canvas, .content .right2 #sign1Bottom #sign1done canvas, .content .right2 #sign1Bottom #sign-pad0 canvas, .content .right2 #sign2Bottom #sign-pad1 canvas, .content .right2 #sign2Bottom #sign-pad2 canvas, .content .right2 #sign2Bottom #sign1done canvas, .content .right2 #sign2Bottom #sign-pad0 canvas, .content .right2 #sign3Bottom #sign-pad1 canvas, .content .right2 #sign3Bottom #sign-pad2 canvas, .content .right2 #sign3Bottom #sign1done canvas, .content .right2 #sign3Bottom #sign-pad0 canvas, .content .right2 #sign0Bottom #sign-pad1 canvas, .content .right2 #sign0Bottom #sign-pad2 canvas, .content .right2 #sign0Bottom #sign1done canvas, .content .right2 #sign0Bottom #sign-pad0 canvas {
  border: 2px gray solid;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  z-index: 1;
}
.content .right2 #sign1Bottom #sign-pad1 div, .content .right2 #sign1Bottom #sign-pad2 div, .content .right2 #sign1Bottom #sign1done div, .content .right2 #sign1Bottom #sign-pad0 div, .content .right2 #sign2Bottom #sign-pad1 div, .content .right2 #sign2Bottom #sign-pad2 div, .content .right2 #sign2Bottom #sign1done div, .content .right2 #sign2Bottom #sign-pad0 div, .content .right2 #sign3Bottom #sign-pad1 div, .content .right2 #sign3Bottom #sign-pad2 div, .content .right2 #sign3Bottom #sign1done div, .content .right2 #sign3Bottom #sign-pad0 div, .content .right2 #sign0Bottom #sign-pad1 div, .content .right2 #sign0Bottom #sign-pad2 div, .content .right2 #sign0Bottom #sign1done div, .content .right2 #sign0Bottom #sign-pad0 div {
  margin: 0 auto;
}
.content .right2 #sign1Bottom #sign-pad1 div button, .content .right2 #sign1Bottom #sign-pad2 div button, .content .right2 #sign1Bottom #sign1done div button, .content .right2 #sign1Bottom #sign-pad0 div button, .content .right2 #sign2Bottom #sign-pad1 div button, .content .right2 #sign2Bottom #sign-pad2 div button, .content .right2 #sign2Bottom #sign1done div button, .content .right2 #sign2Bottom #sign-pad0 div button, .content .right2 #sign3Bottom #sign-pad1 div button, .content .right2 #sign3Bottom #sign-pad2 div button, .content .right2 #sign3Bottom #sign1done div button, .content .right2 #sign3Bottom #sign-pad0 div button, .content .right2 #sign0Bottom #sign-pad1 div button, .content .right2 #sign0Bottom #sign-pad2 div button, .content .right2 #sign0Bottom #sign1done div button, .content .right2 #sign0Bottom #sign-pad0 div button {
  padding: 5px 20px;
  border-radius: 10px;
}
.content .right2 #sign1Bottom #sign1BottomRow, .content .right2 #sign1Bottom #sign2BottomRow, .content .right2 #sign1Bottom #sign0BottomRow, .content .right2 #sign2Bottom #sign1BottomRow, .content .right2 #sign2Bottom #sign2BottomRow, .content .right2 #sign2Bottom #sign0BottomRow, .content .right2 #sign3Bottom #sign1BottomRow, .content .right2 #sign3Bottom #sign2BottomRow, .content .right2 #sign3Bottom #sign0BottomRow, .content .right2 #sign0Bottom #sign1BottomRow, .content .right2 #sign0Bottom #sign2BottomRow, .content .right2 #sign0Bottom #sign0BottomRow {
  display: flex;
  border-radius: 10px;
  margin: -5px;
  margin-top: -10px;
  flex-direction: row;
  justify-content: center;
  vertical-align: middle;
}
.content .right2 #sign1Bottom #sign1BottomRow button, .content .right2 #sign1Bottom #sign2BottomRow button, .content .right2 #sign1Bottom #sign0BottomRow button, .content .right2 #sign2Bottom #sign1BottomRow button, .content .right2 #sign2Bottom #sign2BottomRow button, .content .right2 #sign2Bottom #sign0BottomRow button, .content .right2 #sign3Bottom #sign1BottomRow button, .content .right2 #sign3Bottom #sign2BottomRow button, .content .right2 #sign3Bottom #sign0BottomRow button, .content .right2 #sign0Bottom #sign1BottomRow button, .content .right2 #sign0Bottom #sign2BottomRow button, .content .right2 #sign0Bottom #sign0BottomRow button {
  border-radius: 10px;
  color: white;
  height: 3rem;
  width: 9rem;
  border: 0;
  margin: 10px 20px;
  font-size: 1.46rem;
}
.content .right2 #sign1Bottom #sign1BottomRow button img, .content .right2 #sign1Bottom #sign2BottomRow button img, .content .right2 #sign1Bottom #sign0BottomRow button img, .content .right2 #sign2Bottom #sign1BottomRow button img, .content .right2 #sign2Bottom #sign2BottomRow button img, .content .right2 #sign2Bottom #sign0BottomRow button img, .content .right2 #sign3Bottom #sign1BottomRow button img, .content .right2 #sign3Bottom #sign2BottomRow button img, .content .right2 #sign3Bottom #sign0BottomRow button img, .content .right2 #sign0Bottom #sign1BottomRow button img, .content .right2 #sign0Bottom #sign2BottomRow button img, .content .right2 #sign0Bottom #sign0BottomRow button img {
  margin-left: 10px;
  width: 20px;
  height: 20px;
}

#messageTag {
  position: fixed;
  right: 30px;
  bottom: 30px;
  border-radius: 5px;
  border: 1px #4ca192 solid;
  background-color: #4ca192;
  color: white;
  padding: 0.4rem;
  z-index: 1;
}
#messageTag .notificationNumber {
  background-color: #a31f22;
  border-radius: 50%;
  color: white;
  width: 22px;
  height: 22px;
  display: none;
  margin-left: 5px;
  text-align: center;
}

#messagePopup {
  display: none;
  position: absolute;
  height: 100vh;
  top: 0;
  right: 0;
  width: 50%;
  background-color: white;
  z-index: 1;
}
#messagePopup #messageHeader {
  display: flex;
  justify-content: space-between;
  margin: 1rem;
}
#messagePopup #messageHeader .messageContainerRightTop {
  display: flex;
  flex-direction: row;
  font-size: 0.8rem;
  border: 1px lightgray solid;
  line-height: 20px;
  padding: 5px;
  border-radius: 10px;
  background-color: white;
  cursor: pointer;
}
#messagePopup #messageHeader .messageContainerRightTop img {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
#messagePopup #messageHeader .active {
  background-color: #7594c7;
  color: white;
}
#messagePopup .messageBodyMiddle {
  display: flex;
  flex-direction: column-reverse;
  height: 80vh;
  overflow-y: scroll;
  margin-top: 14px;
  border: 1px lightgray solid;
  border-radius: 5px;
  background-color: white;
}
#messagePopup .messageBodyMiddle .messageBodyMiddleLeftTime {
  font-size: 0.64rem;
  margin-left: 0.5rem;
}
#messagePopup .messageBodyMiddle .messageBodyMiddleRightTime {
  font-size: 0.64rem;
  display: flex;
  flex-direction: row-reverse;
  display: flex;
  margin-right: 0.5rem;
}
#messagePopup .messageBodyMiddle .messageBodyMiddleLeftMessage {
  white-space: pre-wrap;
  background-color: #ebebeb;
  padding: 0.4rem;
  border-radius: 5px;
  font-size: 0.85rem;
  max-width: 50%;
  margin: 0.5rem;
}
#messagePopup .messageBodyMiddle .messageBodyMiddleLeftMessage div {
  margin: 0;
  display: inline;
}
#messagePopup .messageBodyMiddle .messageBodyMiddleLeftMessage a {
  color: black;
}
#messagePopup .messageBodyMiddle .messageBodyMiddleRightMessage {
  white-space: pre-wrap;
  background-color: #2b2d43;
  padding: 0.4rem;
  border-radius: 5px;
  font-size: 0.85rem;
  color: white;
  max-width: 50%;
  margin: 0.5rem;
}
#messagePopup .messageBodyMiddle .aCss {
  border: 1px #66a6ff solid;
  padding: 0.3rem;
  color: #66a6ff;
  font-size: 0.8rem;
  margin-right: 0.3rem;
  margin-left: 0.3rem;
}
#messagePopup #messageBodyBottom {
  position: relative;
  background-color: white;
  display: flex;
  flex-direction: row;
  border: 1px lightgray solid;
  border-radius: 5px;
}
#messagePopup #messageBodyBottom input {
  width: 100%;
  padding: 0.2rem 0.5rem;
}
#messagePopup #messageBodyBottom #sendBtn {
  position: absolute;
  right: 5px;
  top: 2px;
}
#messagePopup #messageBodyBottom button {
  border: 0;
  background-color: transparent;
}

#userPopup {
  width: 41rem;
  position: absolute;
  display: none;
  top: 20%;
  left: 30%;
  background-color: white;
  padding: 1.4rem 0.8rem;
  border-radius: 10px;
}
#userPopup input {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.3rem 0.5rem;
}
#userPopup .label {
  color: #274aa2;
}

#filterPopup {
  position: absolute;
  top: 20%;
  left: 30%;
  width: 30rem;
  padding: 1.3rem 2rem;
  background-color: white;
  display: none;
  z-index: 2;
  border-radius: 10px;
}

#notePopUp {
  display: none;
  position: absolute;
  right: 15%;
  bottom: 0;
  z-index: 1;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px;
  border-style: solid;
  border-color: lightgray;
  width: 50%;
  background-color: white;
}
#notePopUp #title {
  background-color: black;
  margin: -0.5rem -0.5rem 10px -0.5rem;
  color: white;
  border-radius: 5px;
  width: 100%;
  padding: 5px;
}
#notePopUp #notePopUpBottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#notePopUp #notePopUpBottom #saveNote {
  padding: 5px;
  border-radius: 5px;
  color: white;
  background-color: black;
  font-family: "Raleway";
  font-weight: 600;
  font-size: 1rem;
}

#uploadSign, #uploadAgreement {
  z-index: 3;
  position: absolute;
  width: 40rem;
  top: 30%;
  left: 35%;
  padding: 1rem;
  background-color: white;
  border-radius: 10px;
  display: none;
}

#calendaSelf button {
  border: 0;
  background-color: transparent;
}
#calendaSelf #calendarTitle {
  margin-left: 30%;
}
#calendaSelf #calendar {
  font-weight: 500;
}
#calendaSelf #calendar .row div {
  width: 14%;
}
#calendaSelf #calendar .row .dayClick {
  text-align: center;
  margin: 0.5rem 0;
}
#calendaSelf #calendar #today {
  background-color: red;
  border-radius: 50%;
  padding: 0.2rem 0.5rem;
  color: white;
}
#calendaSelf #calendar .hasReminder {
  background-color: #676767;
  border-radius: 50%;
  height: 5px;
  width: 5px;
  display: inline-block;
  margin-right: 40%;
}

.placeholder::-moz-placeholder {
  color: red;
}

.placeholder::placeholder {
  color: red;
}/*# sourceMappingURL=main.css.map */