@media(min-width: 1366px){
    .titleAccount.px-5,
    .myClaimsContainer.px-5{
        padding-left: 0px;
        padding-right: 0px;
    }
}
.bounce {
    animation: bounce 1s;
}
.uploadDocument{
    transition: ease-in-out 300ms;
}
.claimDetails{
    width: 74%;
}
.myClaimsContainer{
    column-gap: 20px;
    margin-bottom: 20px;
}
.backClaims img{
    filter: brightness(0) saturate(100%) invert(39%) sepia(74%) saturate(2116%) hue-rotate(183deg) brightness(96%) contrast(104%);
    -webkit-filter: brightness(0) saturate(100%) invert(39%) sepia(74%) saturate(2116%) hue-rotate(183deg) brightness(96%) contrast(104%);
    transform: rotate(180deg);
    margin-right: 15px;
    transition: 300ms;
}
.backClaims:hover img{
    transform: rotate(180deg) translateX(5px);
}
.backClaims{
    color: #008DF5;
    font-size: 14px;
}
.claimInfosTop{
    column-gap: 30px;
    width: 100%;
    margin-top: 20px;
}
.claimInfoBox:first-of-type{
    margin-right: 30px;
}
.claimInfoBox:last-of-type{
    margin-left: auto;
}
.claimInfoHeader{
    color: #949494;
    font-size: 14px;
    text-transform: uppercase;
}
.claimInfoContent{
    font-size: 16px;
}
.claimInfoBox{
    flex-direction: column;
    row-gap: 10px;
}
.claimInfoBox:nth-of-type(1) .claimInfoContent,
.claimInfoBox:nth-of-type(3) .claimInfoContent{
    font-weight: 700;
}
.claimInfoBox:nth-of-type(4){
    text-align: center;
}
.claimInfoBox:nth-of-type(4) .claimInfoContent{
    padding: 5px 20px;
    border-radius: 4px;
}
.claimInfoBox .in-lucru{
    color: #008DF5;
    background-color: #EEF7FE;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.claimInfoBox .solutionat{
    color: #34AE46;
    background-color: #D7FCDE;
}
.claimInfoBox .respins{
    color: #F50000;
    background-color: #F8CBCB;
}
.actionRequired > *:not(.actionDescription){
    flex-shrink: 0;
}
.actionDescription{
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.actionTitle{
    font-size: 16px;
    font-weight: 700;
    color: #008DF5;
    margin-right: 50px;
}
.actionDate{
    font-size: 16px;
    color: #949494;
    margin-right: 30px;
}
.actionRequired{
    border: 1px solid #008DF5;
    padding: 15px 30px;
    border-radius: 8px;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 10px;
}
.planeAndDate img{
    filter: brightness(0) saturate(100%) invert(57%) sepia(68%) saturate(488%) hue-rotate(78deg) brightness(86%) contrast(89%);
    -webkit-filter: brightness(0) saturate(100%) invert(57%) sepia(68%) saturate(488%) hue-rotate(78deg) brightness(86%) contrast(89%);
}
.borderSep{
    border-bottom: 1px solid #707070;    
    width: 100%;
}
.claimFlight{
    column-gap: 15px;
}
.claimFlightLeft, .claimFlightRight{
    background-color: white;
}
.claimFlightLeft{
    width: 65%;
    height: 170px;
    padding: 20px;
    padding-top: 10px;
    border: 1px solid #949494;
    border-radius: 8px;
}
.claimFlightRight{
    width: 35%;
    height: 170px;
    padding: 20px;
    border: 1px solid #949494;
    border-radius: 8px;
}
.planeAndDate{
    width: 100%;
    flex-direction: column;
    row-gap: 10px;
    align-items: center;
}
.claimFlightLeftTop > *:not(.planeAndDate){
    flex-shrink: 0;
}
.claimFlightLeftTop{
    column-gap: 30px;
}
.claimFlightLeftDeparture,
.claimFlightLeftArrival{
    font-size: 16px;
    font-weight: 700;
    max-width: 35%;
}
.flightDate{
    color: #949494;
    font-size: 14px;
    font-weight: 700;
}
.claimFlightLeftBottom{
    justify-content: space-between;
}
.flightDelayText{
    font-size: 16px;
    margin-left: 15px;
}
.claimFlightRight{
    flex-direction: column;
    justify-content: space-between;
}
.flightDetail{
    column-gap: 20px;
}
.flightDetail *{
    width: 50%;
    font-size: 14px;
}
.flightDetail:last-of-type b{
    text-transform: lowercase;
    display: block;
    width: 130px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    /* width: min-content; */
}
.flightDetail:last-of-type b.delayed{
    background-color: #F8CBCB;
}
.flightDetail:last-of-type b::first-letter{
    text-transform: uppercase;
}
.claimContainer{
    border-radius: 8px;
    background-color: #F5F5F5;
    padding: 20px;
}
.claimInputs{
    flex-wrap: wrap;
    padding-top: 20px;
    padding-bottom: 25px;
    row-gap: 15px;
    column-gap: 30px;
}
.detailWrapper{
    display: flex;
    flex-direction: column;
    width: calc(50% - 15px);
}
.detailWrapper label{
    margin-bottom: 5px;
}
.detailWrapper input{
    border: 1px solid #707070;
    background: transparent;
    height: 54px;
    border-radius: 8px;
    padding-left: 20px;
    padding-right: 20px;
}
.uploadWrapper {
    border: 2px dashed #008DF5;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 30px;
    cursor: pointer;
    transition: border-color 0.3s;
    height: 130px;
    background-color: #F3FAFF;
}

.uploadWrapper.dragover {
    border-color: #707070;
    background-color: #F5F5F5;
}

.selectFiles {
    color: #008DF5;
    border: 1px solid #008DF5;
    padding: 12px 40px;
    cursor: pointer;
    border-radius: 7px;
    font-size: 16px;
    font-weight: 600;
}

input[type="file"] {
    display: none;
}
.documentsTitle{
    font-size: 14px;
    text-transform: uppercase;
    color: #949494;
    margin-bottom: 20px;
}
.documentsSubtitle{
    font-size: 16px;
    margin-bottom: 5px;
}
.claimDocumentsUpload{
    width: calc(50% - 15px);
}
.uploadLeft, .uploadRight{
    font-size: 14px;
    color: #646464;
    flex-direction: column;
    row-gap: 7px;
    align-items: center;
}
#uploadedDocuments{
    margin-top: 20px;
}
.oneDocument{
    margin-bottom: 15px;
    column-gap: 20px;
    color: #008DF5;
}
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #3498db;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media(max-width: 1024px){
    .actionRequired a {
        position: absolute;
        top:10px;
        right:10px;
        
    }
    .actionTitle {
        width: 100%;
        text-align: left;
        margin:0;
    }
    .actionDescription {
        -webkit-line-clamp: unset;
    }
    .actionRequired{
        padding: 10px 15px;
        flex-direction: column;       
        position: relative; 
    }
    .actionDate {
        width: 100%;
        margin:10px 0;
        text-align: left;
    }
    .myClaimsContainer{
        flex-direction: column;
        row-gap: 15px;
    }
    .hiddenMobile{
        display: none !important;
    }
    .hiddenDesktop{
        display: block;
    }
    .claimInfoHeader{
        display: none;
    }
    .claimInfosTop{
        display: block !important;
        column-count: 2;
        margin-bottom: 10px;
    }
    .claimDetails{
        width: 100%;
    }
    .claimInfoBox:nth-of-type(3) *,
    .claimInfoBox:nth-of-type(4) *{
        text-align: right;
    }
    .claimInfoBox:nth-of-type(3){
        margin-bottom: 8px;
    }
    .claimInfoBox:first-of-type{
        margin-bottom: 13px;
    }
    .claimFlight{
        flex-direction: column;
        row-gap: 10px;
    }
    .claimFlightLeft{
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        height: auto;
        padding-top: 20px;
    }
    .claimFlightLeftArrival{
        text-align: right;
    }
    .claimFlightLeftDeparture, .claimFlightLeftArrival {
        font-size: 14px;
        width: 30%;
    }
    .claimFlightLeftTop {
        column-gap: 15px;
        align-items: flex-start !important;
    }
    .flightDate {
        font-size: 12px;
    }
    .planeAndDate {
        row-gap: 2px;
    }
    .borderSep{
        margin-top: 10px;
        margin-bottom: 15px;   
    }
    .flightDelayText {
        font-size: 12px;
        margin-left: 12px;
    }
    .claimFlightLeftBottom img{
        width: 35px;
        margin-left: 0px;
    }
    .claimContainer {
        margin-left: -1.25rem;
        margin-right: -1.25rem;
    }
    .claimFlightRight{
        width: 100%;
        height: auto;
        row-gap: 7px;
        padding: 15px;
        padding-top: 20px;
    }
    .flightDetail * {
        font-size: 14px;
    }
    .flightDetail b{
        text-align: right;
        margin-left: auto;
    }
    .flightDetail:last-of-type b {
        padding: 5px 20px;
    }
    .flightDetail {
        align-items: center;
    }
    .detailWrapper {
        width: 100%;
    }
    .detailWrapper label {
        font-size: 14px;
    }
    .detailWrapper input{
        font-size: 16px;
    }
    .claimDocumentsUpload {
        width: 100%;
    }
    .uploadWrapper {
        height: 180px;
        flex-direction: column;
    }
    .documentsTitle{
        margin-bottom: 15px;
    }
    .documentsSubtitle {
        font-size: 14px;
        margin-bottom: 8px;
    }
    .uploadLeft img{
        width: 30px;
    }
    .selectFiles{
        margin-top: 13px;
        width: 100%;
        text-align: center;
    }
    .uploadRight{
        width: calc(100% - 50px);
    }
    .oneDocument{
        font-size: 14px;
    }
    .claimDocuments button{
        width: 100%;
    }
    .claimDocuments{
        padding-bottom: 40px;
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}
@keyframes fadeout {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.fadeout {
    animation: fadeout 0.5s ease-in-out forwards;
}