/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx-muLRm.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx6muLRm.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCxCmuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx-muLRm.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx6muLRm.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCxCmuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx-muLRm.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCx6muLRm.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kBo8UDI-1M0wlSfdzyIEkpwTM29hr-8mTYCxCmuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v16/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.wrapper-body {
    margin-bottom:10px;
}

.wrapper-body h4 {
    font-weight: 800;
    line-height: 22px;
    font-size: 1.6rem;
    color: #222221;
    font-family: archivo,sans-serif;
}

.wrapper-body .head-links a {
    font-weight: 700;
    font-size: 14px;
}

.wrapper-body button {
    height: 32px;
    font-family: archivo,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    padding: 5px 5px;
}

.wrapper-body .button:hover {
    height: 32px;
    font-family: archivo,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    padding: 5px 5px;
    background-color: #F8EDCD;
    border: 5px solid #EED484;
    cursor: pointer;
}

/* ------------------------------------------------------------------------------------- START STEP 3 -------------------------------------------------------------------------------------------------*/


/* start Prev Button */
.wrapper-body .prev-button-step3 {
    border-radius: 100px;
    height: 48px;
    width: 117px;
    font-size:16px;
    line-height: 32px;
    border: 1px solid #eed484;
    background-color: white;
}

.wrapper-body .prev-button-step3:hover {
    background-color: #EED484;
}

.wrapper-body .prev-button-step3:disabled {
    border-radius: 100px;
    height: 48px;
    width: 117px;
    font-size:16px;
    line-height: 32px;
    color: #6f6f6f;
    border: 1px solid transparent;
    background-color: #e0e0e0;   
}
/*  end Prev Button */


/* start Next Button*/
.wrapper-body .submit-button-step3:hover {
    border-radius: 100px;
    height: 48px;
    width: 196px;
    background-color: white;
    border:2px solid #EED484;
    font-size: 16px;
    line-height: 32px;
    padding-top: 7px;
}

.wrapper-body .submit-button-step3{
    border-radius: 100px;
    height: 48px;
    width: 196px;
    background-color: #EED484;
    border:2px solid #EED484;
    font-size: 16px;
    line-height: 32px;
    padding-top: 7px;
}

.wrapper-body .submit-button-step3:disabled{
    border-radius: 100px;
    height: 48px;
    width: 196px;
    background-color: #e0e0e0;
    border:2px solid #e0e0e0;
    color: #6f6f6f;
    font-size: 16px;
    line-height: 32px;
    padding-top: 7px;
}
/* end Next Button */


/* start Text Area*/
.wrapper-body .textarea-border-color {
    height: 326px; 
    width: 403px; 
    background: rgb(242, 242, 242); 
    border: transparent; 
    font-style: italic; 
    color: rgb(118, 118, 118); 
    padding-left: 12px; 
    padding-top: 12px; 
    font-size: 16px;
    resize: none;
}
/* end Text Area*/

/* ------------------------------------------------------------------------------------- END STEP 3 -------------------------------------------------------------------------------------------------*/




/* ------------------------------------------------------------------------------------- START STEP 2 -------------------------------------------------------------------------------------------------*/
/* ------------------------------------Prev Button--- STEP 2*/
.wrapper-body .prev-button-step2 {
    padding: 8px 24px;
    background: #FFFFFF;
    border: 2px solid #EED484;
    border-radius: 100px;
    font-size: 16px;
    line-height: 32px;
    height:48px;
    width: 117px;
    position: absolute;
}

.wrapper-body .prev-button-step2:hover {
    background-color: #EED484;
}

.wrapper-body .prev-button-step2:disabled {
    padding: 8px 24px;
    background-color: #e0e0e0;
    border:2px solid #e0e0e0;
    color: #6f6f6f;
    border-radius: 100px;
    font-size: 16px;
    line-height: 32px;
    height:48px;
    width: 117px;
    position: absolute;
}
/* ------------------------------------Prev Button--- STEP 2*/


/* ------------------------------------Next Button--- STEP 2*/

.wrapper-body .next-button-step2 {
    padding: 8px 24px;
    background-color: #eed484;
    border: 2px solid #eed484;
    border-radius: 100px;
    font-size: 16px;
    line-height: 32px;
    height:48px;
    color: black;
}

.wrapper-body .next-button-step2:hover {
    background-color: white;
}

.wrapper-body .next-button-step2:disabled {
    padding: 8px 24px;
    background-color: #e0e0e0;
    border:2px solid #e0e0e0;
    color: #6f6f6f;
    border-radius: 100px;
    font-size: 16px;
    line-height: 32px;
    height:48px;
}

/* ------------------------------------Next Button--- STEP 2*/

/* ------------------------------------Add Button--- STEP 2*/


.wrapper-body .add-button-step2 {

    margin-top:28px;
    padding:8px 24px;
    width:102px;
    height:48px;
    background:#222221;
    border: 1px solid #FFFFFF;
    border-radius: 100px;
    font-weight:400;
    font-size:16px;
    line-height:32px;
    color:#FFFFFF;
}

.wrapper-body .add-button-step2:hover {

    margin-top:28px;
    padding:8px 24px;
    width:102px;
    height:48px;
    background: white;
    border: 1px solid black;
    border-radius: 100px;
    font-weight:400;
    font-size:16px;
    line-height:32px;
    color:black;
}
/* -------------Add Button--- STEP 2*/

.wrapper-body .invoice-number{

    font-family:archivo,sans-serif;
    width:100%;
    height:48px;
    color: #767676;
    background:#F2F2F2;
    padding-left:12px;
    font-style: italic;
    border: 1px solid transparent;
}

.wrapper-body .dispute-reason{

    font-family:archivo,sans-serif;
    width:100%;
    height:48px;
    color:#767676;
    background:#F2F2F2;
    padding-left:12px;
    font-style: italic;
    border: 1px solid transparent;
}
/* ------------------------------------------------------------------------------------- END STEP 2-------------------------------------------------------------------------------------------------*/


.wrapper-body .case-detail {
    margin-top: 15px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    border-radius: 2px;
}

.wrapper-body .value-label {
    font-family: archivo,sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #767676;
    line-height: 20px;
}

.wrapper-body .value {
    font-family: archivo,sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
}

.wrapper-body .disputed-invoice-count {
    font-family: archivo,sans-serif;
    font-weight:400;
    font-size:14px;
    line-height: 20px;
    color:#000000;
}

.wrapper-body .disputed-invoices {
    font-family: archivo,sans-serif;
    font-weight:400;
    font-size:14px;
    line-height: 28px;
    color:#000000;
   /* text-decoration-line: underline;*/
}

.wrapper-body .detail-header {
    font-family: 'Archivo', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: #222221;
}

.wrapper-body p {
    font-style:normal;
    font-weight:400;
    font-size:14px;
    line-height:20px;
    color:#000000;
}

.wrapper-body a {
    font-family: 'Archivo', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-decoration-line: underline;
    color: #767676;
}

.wrapper-body [aria-expanded="false"] > .expanded,
.wrapper-body [aria-expanded="true"] > .collapsed {
  display: none;
}

.wrapper-body .panel {
    background: #FFFFFF;
    border: 1px solid #767676;
    box-sizing: border-box;
}

.wrapper-body .hr {
    border-top: 1px solid #c4c4c4;
    box-sizing: border-box;
}


input::placeholder, textarea::placeholder {
color: #767676 !important;
}

/* --------------------------------------------------------------------------------------------------------------*/
/* STARTS MVP PORTAL CSS*/
.c-black{
    color:black;
}

.top-frames-right{
    float: right;
    width: 100%;
}

.top-row{
    display: flex;
    gap: 3%;
}

.sort-options{
    margin-top: 1%;
    float: right;
}

.select-sort{
    border: 1px solid #E2E2E2;
    border-radius: 32px;
/*    width: 137px; */
    height: 40px;    
    padding: 8px 22px 8px 16px;
    background: url(../files/downarrow.svg) no-repeat;    
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    background-position: calc(100% - 8px);
}

.button-sort{
    width: 81px;
    height: 40px;
    background: #EED484;
    border-radius: 32px;
}

.notifications-mark{
    width: 8px;
    height: 8px;
    background: #EED484;
    align-self: center;    
    border-radius: 50%;
    margin-top: 90%;
}

.no-mark{
    width: 8px;
    height: 8px;    
    align-self: center;    
    border-radius: 50%;
}

.bold-status{
    font-weight: bold;
    font-size: 12px;
}

.maintenance_background{    
    background: url(/files/maintenance_background.png);           
    width: 100%;    
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    min-height: calc(100vh);     
}

.maintenance_message{
    background: #DADADA;
    text-align: center;
    padding: 1em;
    font-weight: bold;
}

.tooltip-div{
    display: inherit;
}

.tooltip-div .tooltiptext, .tooltip-div .notifications-tooltiptext {
    visibility: hidden;  
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;

    /* Position the tooltip */
    position: absolute;
    z-index: 99;  
    display: flex;
}

.tooltip-div:hover .tooltiptext {
    visibility: visible;
}

.tooltip-div .notifications-tooltiptext{
    right: 1%;
}

.tooltip-div:hover .notifications-tooltiptext {
    visibility: visible;
}

.links-div{
    gap: 35px;
    display: flex;
    padding: 3% 0% 0% 4%;
}

.selfservice-msg{
    font-style: italic;
    padding: 5px 5px 5px 10px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
}

.ellipsis-overflow{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.filter_input{
    border: none;
    flex-grow: 1;
}

.x-icon{    
    padding: 5px;
    display:none;
}

.main-container-div{
    background: #F2F2F2;
    padding: 0 0 1% 0;
}

.case-number{
    line-height: 24px;
    color: #666666;
}

.case-details{
    padding: 16px;
}

.case-title{
    font-size: 16px;
    line-height: 17px;
}

.case-header{
    display: flex;
    align-items: center;
    padding: 8px 16px;
    gap: 8px;
    background: #F2F2F2;
    word-break: keep-all !important;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .case-header{
        flex-flow: wrap;
    }
}

.case-item{    
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    margin-bottom: 3%;
}

.lists-container{
    margin: 40px 0;
    display: flex;
    gap: 5%;
}

.yourrequests-container{    
    width: 55%;
    padding: 2% 3%;
}

.yourrequests-div, .recentupdates-div{
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.lists-title{
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;    
}

hr{
    margin-bottom: 24px;
    margin-top: 0;
}

.recentupdates-container{
    width: 40%;
    padding: 2% 3%;
} 

.recentupdates-container,
.yourrequests-container,
.new-request{
    border: 1px solid #E2E2E2;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
    border-radius: 8px;
}   

.yourrequests-container-header{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.placeholder-no-info{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    line-height: 20px;
    font-style: italic;
}

.update-details{
    padding: 8px;
}

.update-item{
    display: flex;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    margin-bottom: 2%;
}

.grey-space{
    background: #F2F2F2;
    border-radius: 8px 0px 0px 8px;
    width: 32px;    
    flex: none;
}

.unread-mark{
    width: 8px;
    height: 8px;    
    background: #EED484;
    align-self: center;    
    border-radius: 50%;
}

.unread-mark-container{
    margin-right: 3%;    
    display: flex;
}

.cases-container,
.updates-container{
    height: 471px;
    overflow-y: auto;
}

body {
    font-size: 14px;
    font-family: 'Archivo';
}

.banner {
    border-bottom: 16px solid var(--yellow-100);
    padding-bottom: 130px;
}

.banner-text{
    padding-top: 2%;
    padding-left: 10%;
}

.welcome-container{
    display: flex;
    align-items: center;
}

.support {
    /*color: rgba(255,255,255,1);
    position: absolute;
    top: 47%;
    left: 10%;    
    font-weight: Medium;*/
    font-size: 32px;
}

.welcome {   
    /*color: rgba(255,255,255,1);
    position: absolute;
    top: 35%;
    left: 10%;    */
    font-weight: Bold;
    font-size: 48px;
    flex-grow: 1;
}

.requests {
    margin-left: 15%;
    margin-top: -120px;
    width: 69%;
    height: 100%;    
}

.lanSelected{
    width: 31px;
    background-color: #EED484;
    border-radius: 30px;
    display: inline-flex;
    justify-content: center;
}

.language-dropdown{
    margin-right: 15%;
}

.language-content{
    display: none;
    position: absolute;
    background-color: #ffffff;
    /* box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%); */
    z-index: 1;
    margin-left: 6px;
    font-weight: 600;
    margin-top: 33px;
}

.language-content a{
   color: #182528;
}

.language-img{
    background: url(/files/language-logo.svg);
    width: 32px;
    height: 32px;
    background-size: contain;
    display:block;
}


.on-hold-alertarea{
    width: 55px;
    height: 24px;
    background-color: #A6192E;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    
}

.notificationbell-area{
    min-width: 55px;
    height: 24px;
    background-color: #EED484;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #222221;
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}

#on-hold-icon{
    width: 16px;
    height: 16px;
    margin-right: 4px;      
}

#all-requests{
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    color: #4E4E4D;
    display: flex;
}   

#viewall-icon{
    margin-left: 8px;
    
    
}
.grey-space{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#loading-message{
    display: none;
    z-index: 9999;
    position:fixed;
    width: 100%;
    height: 100%;
    text-align: center;
}
#loading-icon{    
    width: 100px;
}

#loading-div {
    display: none;
    z-index: 9999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.new-request {
    box-sizing: border-box;    
    background: #FFFFFF;    
}

.categories-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 94%;
    margin: 2% 2%;
}

.potal-category{
    flex-grow: 1;
}

.category {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 4px;
    width: 124.43px;
    height: 104px;
    border: 2px solid var(--yellow-100);
    border-radius: 8px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
    cursor: pointer;
}

.category-focus {
    background-color: var(--yellow-100);
}

.category-img {
    width: 32px;
    height: 32px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.img-information {
    background: url(../information.png);
}

.img-booking {
    background: url(../cart.png);
}

.img-documents {
    background: url(../book-multiple.png);
}

.img-tracking {
    background: url(../map-marker.png);
}

.img-import {
    background: url(../sitemap.png);
}

.img-invoicing {
    background: url(../note-text.png);
}

.img-other {
    background: url(../help-circle.png);
}

.category-description {
    height: 48px;    
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-100);
    flex: none;
    order: 1;
    flex-grow: 0;
}

.new-request-header{
    padding: 2% 3% 0;
}

.new-request-firstline{
    display: flex;
}

.agency {    
    color: #666666;
}

.create {
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    color: var(--text-100);
    flex-grow: 1;
}

.case-type {    
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #4E4E4D;    
}

.agency-container {      
    /*padding: 1% 0 0 70%;*/
}

.subcategories {
    display: inline-block;
    padding: 0px;
    gap: 12px;    
    margin: 2% 3%;
}

.subcategory {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 4px;
    padding: 4px 24px;
    gap: 12px;
    height: 32px;
    border: 1px solid var(--text-100);
    border-radius: 16px;
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;
}

.subcategory:hover {
    background-color:var(--text-100);
    color: white;
}

.subcategory:hover span {
    color: white;
}

.arrow-rigth {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 6px 0px;
    width: 8px;
    height: 24px;
    flex: none;
    order: 1;
    flex-grow: 0;
    background: url(../files/vector-arrow-right.svg) no-repeat center center;
}

.subcategories-text {
    height: 24px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #222221;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.popup-top-img-container{
    display: flex;
    justify-content: center;
}

.discard-x{
    background-color: white;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: absolute;
    top: -36px;
    display: flex;
    justify-content: center;
    border: 1px solid #E2E2E2;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    -webkit-transform: rotate(45deg);
}

.popup-icon{
    height: 34px;
    margin-top: 25%;
    -webkit-transform: rotate(45deg);
}

.continueBtn{
    width: 217px;
    height: 48px;
    background: #EED484;
    border-radius: 100px;
    border: 2px solid #EED484;
}

.declineBtn{
    width: 222px;
    height: 48px;
    background: #FFFFFF;
    border: 2px solid #EED484;
    border-radius: 100px;
}

.popup-buttons-container{
    display: flex;
    gap: 24px;
    position: relative;
    top: 70px;
    justify-content: center;
}

.popup-confirmation{
/*    width: 700px;*/
    height: 228px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    box-shadow: 0px 4px 8px rgb(0 0 0 / 16%);
    border-radius: 16px;
    position: fixed;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 9999;
    display:none;
    padding: 0 1%;
}

.popup-subtitle{
    position: relative;
    top: 39px;
    font-size: 16px;
    line-height: 24px;
    color: #666666;
    display: flex;
    justify-content: center;
}

.popup-title{
    position: relative;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;    
    top: 48px;
    top: 48px;
    display: flex;
    justify-content: center;
}

#overlay, #overlay-loading {
    position:fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    display:none;
    background-color:#000;
    opacity:0.5;
    z-index: 9999;
}

.creation-title{
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 20px;
}

.field-data{
    font-size: 16px;
    line-height: 24px;
}

.fill-request{
    font-size: 16px;
    line-height: 24px;
}

.required-fields-div{
    display: flex;
    gap: 3px;
    align-items: center;
}

.required-label{
    line-height: 24px;
    color: #666666;
}

.required-info-div{
    display: flex;
    justify-content: space-between;
    margin-top: 5%;
}

.required-mark{
    color: #a94442;
}

#EntityFormPanel{
    border: none;
    margin-bottom: -20px;    
}

.field-label{
    margin-bottom: 0;
    /*line-height: 24px;*/
    color: #666666;
    font-weight: 400;
}

.row-div{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

#btns-container, 
.read-form-container{
    display: flex;
}

#UploadButton{
    border: 2px solid #222221;
    border-radius: 100px;
    background: white;
    width: 230px;
    height: 48px;
    gap: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: black;
}

.background-fields{
    background-color: #F2F2F2 !important;
}

.form-control{
    border: none !important;
    box-shadow: none !important;
}

.form-control:focus{
    outline: solid thin var(--yellow-100)!important;
}

.buttons-container{
    display: flex;
    justify-content: space-between;
    margin-top: 3%;
}

.bnt-container-right{
    gap: 20px;
    display: flex;
}
#DiscardBtn{
    width: 160px;
    height: 48px;
    border: 2px solid #222221;
    border-radius: 100px;
}

#DraftBtn{
    width: 142px;
    height: 48px;
    background: #FFFFFF;
    border: 2px solid #EED484;
    border-radius: 100px;
}

#SubmitBtn{
    width: 156px;
    height: 48px;
    background: #EED484;
    border: 2px solid #EED484;
    border-radius: 100px;
}

.data-container{
    margin: 3% 8%;    
}

.case-div{
    display: flex;
    background: #FFFFFF;   
    border: 1px solid #E2E2E2;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
    border-radius: 8px;        
}

.line-div{
    background: var(--yellow-100);
    width: 4px;    
    border-radius: 8px 0px 0px 8px;
}

.case-details-div{    
    margin: 4% 2% 0% 2%;
    flex-grow: 1;
}

.case-container{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.back-div{
    padding: 3% 0% 0% 4%;
}

textarea {
  resize: none;
}

.case-number-title{
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
}

.document-box{
    background-color: var(--background-grey);
    height: 32px;
    padding: 0px 8px;
    margin: 8px 0px;           
}

.document-name{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 170px;
    text-overflow: ellipsis;
    vertical-align: middle;
}


@media screen and (max-width: 1315px){
    .document-name{
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        max-width: 100px;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}

@media screen and (max-width: 970px){
    .document-name{
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        max-width: 10px;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
}

.document-box-icon{
    display: inline-block;
    padding: 8px;
}

@media screen and (max-width: 520px){
    .document-name{
        display: none;
    }
}

#cancel-doc{
    float: right;
}

#customerServiceBtn{
    width: auto;
    padding: 0px 24px;
}

.row-div-5{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-top: 24px;
}

.row-div-5 div:nth-child(4) {
    grid-column: 4 / 5;
    grid-row: 1/6;
}

.row-div-5 div:nth-child(7) {
    grid-column: 1 / 4;
    grid-row: 3/6;
}

.field-data {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 30px;
}

.field-data-description {
    height: 120px;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 30px;
}

.buttons-container-confirmation{
    display: flex;
    justify-content: center;
    margin-top: 3%;
    gap: 20px;
}

.whiteBtn{
    width: 142px;
    height: 48px;
    background: #FFFFFF;
    border: 2px solid #EED484;
    border-radius: 100px;
}

.yellowBtn{
    width: 156px;
    height: 48px;
    background: #EED484;
    border: 2px solid #EED484;
    border-radius: 100px;
}

.top-message{
    font-family: var(--label);
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    color: var(--text-100);
    line-height: 36px;
    text-align: center;
    display: block;
    padding-top: 5%;
}

.top-message-icon{
    display: block;
    margin: 0% auto;
    padding-bottom: 15px;
}

.main-container-div-gradient{
    background: linear-gradient(
        to bottom,
        var(--background-grey) 0%,
        var(--background-grey) 47%,
        #fff 37%,
        #fff 100%
    );
}

.pag-right{
    float: right;
    margin-left: 0%;
    margin-top: 2%;
    display: flex;
    align-items: center;
}

/* Case Details Page -------------------------------------------------------------------------------------*/
.reopen-button{
    float: right;
}

.reopen-confirmation{
    width: 625px;
    height: 228px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 16px;
    box-shadow: 0px 4px 8px rgb(0 0 0 / 16%);
    position: fixed;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    z-index: 9999;
    display:none;
}

.reopen-subtitle{
    position: relative;
    top: 55px;    
    display: flex;    
    align-items: baseline;
    gap: 5px;
    margin: 1%;
}

.reopen-title{
    position: relative;
    top: 48px;
    display: flex;
    justify-content: center;
}

.reopen-input{
    width: 58%;
}

.reopen-required{
    position: relative;
    top: 40px;
    margin: 1%;
    font-size: 9px;
}

.reopen-buttons-container{
    display: flex;
    gap: 24px;
    position: relative;
    top: 80px;
    justify-content: center;
}

.requiredField{
    color:red;
}

/*--------------------------------------------------------------------------------------------------------*/
/*General MVP CSS*/
.flex-container{
    display: flex;
}

.portal-status-div{
	border-radius: var(--br-md);		
	height: 24px;
	padding: var(--padding-2xs) var(--padding-xs);
	gap: var(--gap-md);
	display: flex;  
	align-items: center;
    width: max-content;
}

.status-red {
  border: 1px solid var(--red-error-100);    
  color: var(--red-error-100);
}

.status-black {
  border: 1px solid var(--text-100);  
}

.status-green {  
  border: 1px solid var(--green);  
  color: var(--green);
}

.frame-div4 {
  border-radius: var(--br-md);
  border: 1px solid var(--text-100);
  box-sizing: border-box;
  position: relative;
  width: 142px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  padding: var(--padding-2xs) var(--padding-xs);
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-md);
  z-index: 6;
  font-size: var(--label-size);
}

.div3,
.frame-div2 {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.frame-div2 {
  border-radius: var(--br-md);
  border: 1px solid var(--red-error-100);
  box-sizing: border-box;
  width: 96px;
  height: 24px;
  flex-direction: row;
  padding: var(--padding-2xs) var(--padding-xs);
  justify-content: flex-start;
  gap: var(--gap-md);
  z-index: 6;
  font-size: var(--label-size);
  color: var(--red-error-100);
}

.frame-div,
.frame-div10 {
  display: flex;
  justify-content: flex-start;
  gap: var(--gap-md);
}

.frame-div10 {
  border-radius: var(--br-md);
  border: 1px solid var(--green);
  box-sizing: border-box;
  position: relative;
  width: 96px;
  height: 24px;
  flex-shrink: 0;
  flex-direction: row;
  padding: var(--padding-2xs) var(--padding-xs);
  align-items: center;
  z-index: 6;
  font-size: var(--label-size);
  color: var(--green);
}
.open-div {
  position: relative;
  line-height: 24px;
  display: inline-block;
  word-break: keep-all !important;
}

.status-filter{
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-100);
}



:root {
  /* fonts */
  --label: Archivo;

  /* font sizes */
  --label-size: 14px;
  --body-m100-size: 16px;

  /* Colors */
  --color-white: #fff;
  --border-grey100: #e2e2e2;
  --text-60: #666;
  --text-100: #222221;
  --yellow-100: #eed484;
  --green: #00685e;
  --red-error-100: #a6192e;
  --background-grey: #F2F2F2;

  /* Gaps */
  --gap-sm: 4px;
  --gap-md: 8px;
  --gap-lg: 16px;

  /* Paddings */
  --padding-2xs: 4px;
  --padding-xs: 8px;
  --padding-sm: 10px;
  --padding-md: 16px;
  --padding-lg: 24px;
  --padding-xl: 32px;

  /* border radiuses */
  --br-sm: 8px;
  --br-md: 20px;
  --br-lg: 32px;
}