/* FONT SIZE - GENERIC */

span,
label {
    font-size: .8em;
}

.field .ui-outputlabel,
.field .ui-outputlabel > span {
    font-size: .94em;
}

.field.ship-field .ui-outputlabel > span {
    font-size: .90em;
}

.field .ui-float-label > input:focus ~ label span,
.field .ui-float-label > input.ui-state-filled ~ label span,
.field .ui-float-label > .ui-inputwrapper-filled ~ label span {
    font-size: 1.1em;
}

.field .ui-selectonemenu-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
}

.ui-inputfield {
    font-size: 1em !important;
    padding: 0.7rem !important;
    color: #6c757d !important;
    width: 100%;
}

.ui-inputfield.hasDatepicker {
    font-size: 1.3em !important;
    padding: 0.7rem !important;
    color: #6c757d !important;
}

.ui-selectonemenu-label {
    font-size: .8em !important;
    padding: 0.7rem !important;
    color: #6c757d !important;
}

/* FONT SIZE - GENERIC */

/* LANGUAGE */

.flags {
    display: flex !important;
    align-items: center;
    margin: 0 0 .5rem auto;
    border-radius: 8px !important;
    width: 75px !important;
    padding: 0.3rem 0.5rem 0.3rem 0 !important;
}

.flags .ui-selectonemenu-label {
    display: none !important;
}

.flags:before {
    display: block;
    width: 35px;
    height: 20px;
    margin-left: .5rem;
}

.flag-usa:before {
    content: ' ';
    background: transparent url("../image/lang-flags/usa.svg") no-repeat center;
    background-size: contain;
}

.flag-spain:before {
    content: ' ';
    background: transparent url("../image/lang-flags/spain.png") no-repeat center;
    background-size: contain;
}

.list-flag ul li {
    font-size: 0;
}

.list-flag ul li:nth-child(2):before {
    content: ' ';
    background: transparent url("../image/lang-flags/usa.svg") no-repeat center;
    background-size: contain;
    display: block;
    width: 30px;
    height: 20px;
    margin: auto;
}

.list-flag ul li:nth-child(1):before {
    content: ' ';
    background: transparent url("../image/lang-flags/spain.png") no-repeat center;
    background-size: contain;
    display: block;
    width: 30px;
    height: 20px;
    margin: auto;
}

/* LANGUAGE */

/* TOGGLE BUTTON */

.ui-toggleswitch {
    transform: scale(.8);
}

/* TOGGLE BUTTON */

/* DATA TABLE */

.ui-paginator.ui-paginator-bottom {
    border-bottom: none;
    padding-bottom: 0 !important;
}

.ui-datatable table thead tr th {
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.ui-datatable table thead tr th span {
    font-size: .9em;
}

.ui-datatable table tbody tr td {
    font-size: .9em;
    padding-top: .2rem !important;
    padding-bottom: .2rem !important;
}

.ui-datatable table tbody tr td > span:nth-child(2) {
    padding-top: .4rem;
    padding-bottom: .4rem;
    font-size: inherit !important;
}

.ui-datatable table tbody tr td span.text-truncate {
    display: block;
    max-width: 100%;
    font-size: 1em !important;
}

/* DATA TABLE */

/* UPLOAD FILE */
.rounded-button.ui-fileupload {
    width: 50px;
}

.rounded-button .ui-fileupload-content {
    display: none;
}

.rounded-button .ui-fileupload-buttonbar {
    padding: 0 !important;
    width: auto;
    background: transparent !important;
    border: none !important;
}

.rounded-button .ui-fileupload-choose {
    height: 39px;
    width: 39px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px -5px #2196f3;
}

.rounded-button .ui-fileupload-choose .ui-icon {
    position: absolute;
    left: initial !important;
    margin: auto;
}


.upload-file {
    /*height: calc(100vh - (2rem + 60px + 8px + 2rem + 43px + 68px + 16px + 2rem + 5rem + (16px * 2)));*/
    height: 50vh;
    max-height: 44vh;
    position: relative;
    padding: 0;
    display: block;
    font-size: 1.5em;
}

.upload-file .ui-fileupload-buttonbar {
    padding: 0 !important;
    height: 100%;
    background-color: transparent !important;
}

.upload-file .ui-fileupload-content {
    display: none;
}

.upload-file .upload-file-field .ui-button {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 2px dashed #e8e8e8;
}

.upload-file .upload-file-field .ui-button:hover {
    border: 2px dashed #c5c5c5;
}

.upload-file .upload-file-field:not(.file-selected) .ui-button:after {
    content: 'Arrastre o haga click para seleccionar un archivo.';
    width: 90%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b5b5b5;
    font-size: 1.2em;
    position: absolute;
    text-align: center;
    left: 5%;
    z-index: 1;
}

.upload-file .upload-file-field .ui-button span {
    display: none;
}

.upload-file .upload-file-field input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
}

.upload-file .upload-file-field {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: block;
}

.upload-file .upload-file-field .ui-fileupload-filename {
    color: #b71c1c;
    width: 100%;
    display: block;
    border-radius: 10px;
    padding: 1rem;
    margin: 0;
    font-size: 1.1em;
}

.upload-file img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 0;
    margin: auto;
}

/* UPLOAD FILE */

.row {
    margin-left: auto;
    margin-right: auto;
}

body .ui-card {
    border-radius: 16px !important;
}

body .main-component .ui-card-body {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.field {
    margin-bottom: 0 !important;
}

.field-date {
    margin-bottom: 20px !important;
}

.field .ui-password,
.field-password .ui-inputfield{
    width: 100% !important;
    font-size: 16px !important;
}

.field .ui-selectonemenu {
    min-width: auto !important;
}

.ship-field {
    position: relative;
    top: -24px;
}

.p-datepicker.ui-calendar {
    padding: 0;
}

.p-datepicker.ui-calendar input {
    width: 100%;
}
/* PICKLIST */

.ui-picklist-buttons .ui-button{
    width: 40px !important;
    height: 40px;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto
}

.ui-picklist-buttons .ui-button.ui-button-icon-only .ui-icon {
    top: 40% !important;
}

/* DIALOG */
.ui-dialog .ui-selectonemenu {
    min-width: auto !important;
}

/* SEARCH TABLE */

.search-table {
    position: relative;
    z-index: 1;
    margin: 0;
    width: calc(100% - (16px * 3));
}

.search-table ~ .ui-panel {
    position: absolute;
    bottom: 1000px;
    z-index: 3;
    width: calc(100vw - (16px * 2));
    display: block;
    top: 92px;
    height: auto;
    left: 16px;
}

.search-table ~ .ui-panel .ui-panel-titlebar {
    border: none;
    background: none;
    width: 64px;
    margin-left: auto;
}

.search-table ~ .ui-panel .ui-panel-titlebar .ui-panel-title{
    visibility: hidden;
}

.search-table ~ .ui-datatable{
    position: relative;
    z-index: 2;
}

.search-table ~ .ui-datatable .ui-button{
    margin-right: 5px;
}

.search-table ~ .ui-panel .ui-panel-content {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border: none;
    box-shadow: 0 6px 6px -4px rgba(0,0,0,.2);
    padding-bottom: 0;
    padding-top: 1.3rem;
    margin-top: .5rem;
}

/* TABLE MENU */

.ui-menu.ui-menu-dynamic {
    border-radius: 8px;
}

.ui-menu .ui-menuitem .ui-menuitem-link {
    display: inline-flex;
}

/* TABLE MENU */

/* SEARCH TABLE */

/* SUGGESTION INFO */

.suggestions-info {
    display: none;
    position: absolute;
    width: 300px;
    background-color: white;
    border-radius: 16px;
    top: -100px;
    left: -340px;
    z-index: 9;
    padding: 1rem;
}

.suggestions-info h3 {
    margin-bottom: 1rem;
}

.suggestions-info ul li {
    margin-bottom: .5rem;
}

.suggestions-info h3 {
    color: #001b40;
}

.suggestions-info ul li p {
    color: #414141;
}

.suggestions-info ul li p {
    margin: 0;
}

.suggestions-info ul li p:last-child {
    margin-bottom: .5rem;
    font-weight: bold;
    color: #001b40;
}

.suggestions-btn {
    position: absolute !important;
    left: -30px;
    top: 30px;
    transform: scale(.7);
}

.change-password-component .suggestions-btn {
    top: 12px;
}

.suggestions-btn:hover + .suggestions-info {
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    display: block !important;
    /*left: -350px;*/
}

/*.change-password-component .suggestions-btn:hover + .suggestions-info {
    top: -7rem;
    left: .5rem;
}*/

/* SUGGESTION INFO */

/* UI ACCORDION */

.ui-accordion .ui-accordion-header {
    display: flex;
    align-items: center;
}

.ui-accordion .ui-accordion-header .title-accordion {
    width: 37%;
}

.ui-accordion .ui-accordion-header .ui-panel-actions {
    position: absolute;
    right: 0;
}

/* UI ACCORDION */
/*FILE UPLOAD*/
.ui-fileupload-simple .ui-button {
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px -5px #2196f3;
}

.ui-fileupload-simple .ui-button .ui-icon {
    position: absolute !important;
    top: initial !important;
    left: initial !important;
    margin: auto !important;
}

.screen-upload-field .ui-fileupload-simple .ui-button {
    border-radius: 10px;
    box-shadow: none;
}

/*FILE UPLOAD*/

/* DISABLED BUTTON */

.disabled {
    opacity: .6;
}

/* DISABLED BUTTON */

/*  PHASES LIST   */

.phases-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding-top: 2rem;
    padding-bottom: 1rem;
    padding-right: 0;
}

.phases-list .ui-button:not(.disabled).selected {
    background-color: #2196f3;
    border-color: #2196f3;
}

/*  PHASES LIST   */

/* SCROLL BAR */

/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius:10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* SCROLL BAR */

/* DISABLED FIELD */

.disabled-field input {
    border: 1px solid #ced4da;
    opacity: .6;
}

.disabled-field input.ui-state-hover, .disabled-field input.ui-state-focus {
    border: 1px solid #ced4da !important;
    box-shadow: none !important;
}


/* DISABLED FIELD */

/* - - - - - - - - - - -  MEDIA QUERY - - - - - - - - - - - - -  */

@media only screen and (max-width: 576px) {
    /* SEARCH TABLE */
    .search-table {
        width: calc(100% - 45px);
    }

    .search-table ~ .ui-panel {
        top: 31.5vh;
    }

    .search-table ~ .ui-panel .ui-panel-content {
        padding-top: 1rem;
    }

    /* SEARCH TABLE */

    /* DATA TABLE */

    .ui-datatable table tbody tr td {
        color: #737a81;
    }

    .ui-datatable table tbody tr td span.ui-column-title {
        font-weight: bold;
        color: #495057;
    }

    .ui-datatable-data .ui-widget-content:not(.ui-expanded-row-content) td:first-child {
        width: 4rem;
    }

    .ui-datatable-data .ui-widget-content td {
        width: 100% !important;
    }

    .ui-datatable-data .ui-widget-content td .ui-float-label .ui-outputlabel {
        display: none !important;
    }

    .arrivalrequest-component .ui-datatable-scrollable-body {
        height: calc(100vh - ((1rem * 2) + 59.5px + 8px + 66px + 58px + 164px + 1rem));
    }

    .suggestions-btn:hover + .suggestions-info {
        left: 16px;
    }

    /* DATA TABLE */

    .phases-list {
        position: absolute;
        right: -30px;
    }
}

@media only screen and (max-width: 375px) {
    .search-table ~ .ui-panel {
        top: 33.6vh;
    }

}

@media only screen and (max-width: 425px) {
    .remarks-field {
        width: 84% !important;
    }

    .without-translate .search-table ~ .ui-panel .ui-panel-titlebar {
        position: relative;
        z-index: 1;
        top: -40px;
    }

    .without-translate .search-table ~ .ui-panel .ui-panel-content {
        top: -40px;
        position: relative;
        padding-bottom: 1rem;
    }

    .ui-accordion .ui-accordion-header .title-accordion {
        width: 84% !important;
    }
}

@media only screen and (min-width: 425px) and (max-width: 425px) {
    .arrival-request-query .search-table ~ .ui-panel .ui-panel-titlebar {
        position: relative;
        z-index: 1;
        top: -40px;
    }

    .arrival-request-query .search-table ~ .ui-panel .ui-panel-content {
        /*top: 32px;*/
        position: relative;
    }
}

@media (max-width: 576px) {
    .m-sm-0 {
        margin: 0 !important;
    }
    .m-sm-1 {
        margin: 0.25rem !important;
    }
    .m-sm-2 {
        margin: 0.5rem !important;
    }
    .m-sm-3 {
        margin: 1rem !important;
    }
    .m-sm-4 {
        margin: 1.5rem !important;
    }
    .m-sm-5 {
        margin: 3rem !important;
    }
    .m-sm-auto {
        margin: auto !important;
    }
    .mx-sm-0 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .mx-sm-1 {
        margin-right: 0.25rem !important;
        margin-left: 0.25rem !important;
    }
    .mx-sm-2 {
        margin-right: 0.5rem !important;
        margin-left: 0.5rem !important;
    }
    .mx-sm-3 {
        margin-right: 1rem !important;
        margin-left: 1rem !important;
    }
    .mx-sm-4 {
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
    }
    .mx-sm-5 {
        margin-right: 3rem !important;
        margin-left: 3rem !important;
    }
    .mx-sm-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }
    .my-sm-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .my-sm-1 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    .my-sm-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .my-sm-3 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .my-sm-4 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    .my-sm-5 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }
    .my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }
    .mt-sm-0 {
        margin-top: 0 !important;
    }
    .mt-sm-1 {
        margin-top: 0.25rem !important;
    }
    .mt-sm-2 {
        margin-top: 0.5rem !important;
    }
    .mt-sm-3 {
        margin-top: 1rem !important;
    }
    .mt-sm-4 {
        margin-top: 1.5rem !important;
    }
    .mt-sm-5 {
        margin-top: 3rem !important;
    }
    .mt-sm-auto {
        margin-top: auto !important;
    }
    .me-sm-0 {
        margin-right: 0 !important;
    }
    .me-sm-1 {
        margin-right: 0.25rem !important;
    }
    .me-sm-2 {
        margin-right: 0.5rem !important;
    }
    .me-sm-3 {
        margin-right: 1rem !important;
    }
    .me-sm-4 {
        margin-right: 1.5rem !important;
    }
    .me-sm-5 {
        margin-right: 3rem !important;
    }
    .me-sm-auto {
        margin-right: auto !important;
    }
    .mb-sm-0 {
        margin-bottom: 0 !important;
    }
    .mb-sm-1 {
        margin-bottom: 0.25rem !important;
    }
    .mb-sm-2 {
        margin-bottom: 0.5rem !important;
    }
    .mb-sm-3 {
        margin-bottom: 1rem !important;
    }
    .mb-sm-4 {
        margin-bottom: 1.5rem !important;
    }
    .mb-sm-5 {
        margin-bottom: 3rem !important;
    }
    .mb-sm-auto {
        margin-bottom: auto !important;
    }
    .ms-sm-0 {
        margin-left: 0 !important;
    }
    .ms-sm-1 {
        margin-left: 0.25rem !important;
    }
    .ms-sm-2 {
        margin-left: 0.5rem !important;
    }
    .ms-sm-3 {
        margin-left: 1rem !important;
    }
    .ms-sm-4 {
        margin-left: 1.5rem !important;
    }
    .ms-sm-5 {
        margin-left: 3rem !important;
    }
    .ms-sm-auto {
        margin-left: auto !important;
    }
    .p-sm-0 {
        padding: 0 !important;
    }
    .p-sm-1 {
        padding: 0.25rem !important;
    }
    .p-sm-2 {
        padding: 0.5rem !important;
    }
    .p-sm-3 {
        padding: 1rem !important;
    }
    .p-sm-4 {
        padding: 1.5rem !important;
    }
    .p-sm-5 {
        padding: 3rem !important;
    }
    .px-sm-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    .px-sm-1 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }
    .px-sm-2 {
        padding-right: 0.5rem !important;
        padding-left: 0.5rem !important;
    }
    .px-sm-3 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    .px-sm-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
    .px-sm-5 {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }
    .py-sm-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .py-sm-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    .py-sm-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .py-sm-3 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .py-sm-4 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .py-sm-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .pt-sm-0 {
        padding-top: 0 !important;
    }
    .pt-sm-1 {
        padding-top: 0.25rem !important;
    }
    .pt-sm-2 {
        padding-top: 0.5rem !important;
    }
    .pt-sm-3 {
        padding-top: 1rem !important;
    }
    .pt-sm-4 {
        padding-top: 1.5rem !important;
    }
    .pt-sm-5 {
        padding-top: 3rem !important;
    }
    .pe-sm-0 {
        padding-right: 0 !important;
    }
    .pe-sm-1 {
        padding-right: 0.25rem !important;
    }
    .pe-sm-2 {
        padding-right: 0.5rem !important;
    }
    .pe-sm-3 {
        padding-right: 1rem !important;
    }
    .pe-sm-4 {
        padding-right: 1.5rem !important;
    }
    .pe-sm-5 {
        padding-right: 3rem !important;
    }
    .pb-sm-0 {
        padding-bottom: 0 !important;
    }
    .pb-sm-1 {
        padding-bottom: 0.25rem !important;
    }
    .pb-sm-2 {
        padding-bottom: 0.5rem !important;
    }
    .pb-sm-3 {
        padding-bottom: 1rem !important;
    }
    .pb-sm-4 {
        padding-bottom: 1.5rem !important;
    }
    .pb-sm-5 {
        padding-bottom: 3rem !important;
    }
    .ps-sm-0 {
        padding-left: 0 !important;
    }
    .ps-sm-1 {
        padding-left: 0.25rem !important;
    }
    .ps-sm-2 {
        padding-left: 0.5rem !important;
    }
    .ps-sm-3 {
        padding-left: 1rem !important;
    }
    .ps-sm-4 {
        padding-left: 1.5rem !important;
    }
    .ps-sm-5 {
        padding-left: 3rem !important;
    }
    .d-sm-inline {
        display: inline !important;
    }
    .d-sm-inline-block {
        display: inline-block !important;
    }
    .d-sm-block {
        display: block !important;
    }
    .d-sm-grid {
        display: grid !important;
    }
    .d-sm-inline-grid {
        display: inline-grid !important;
    }
    .d-sm-table {
        display: table !important;
    }
    .d-sm-table-row {
        display: table-row !important;
    }
    .d-sm-table-cell {
        display: table-cell !important;
    }
    .d-sm-flex {
        display: flex !important;
    }
    .d-sm-inline-flex {
        display: inline-flex !important;
    }
    .d-sm-none {
        display: none !important;
    }

    .phases-list .btn-view-phases-list {
        display: block;
        position: fixed;
        right: 12px;
        top: 5px;
    }

    .phases-list.phases-list-view {
        right: 13px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 768px) {
    .inspection-coordination-query .search-table ~ .ui-panel .ui-panel-titlebar,
    .search-table ~ .ui-panel .ui-panel-titlebar {
        position: relative;
        z-index: 1;
        top: -40px;
    }

    .inspection-coordination-query .search-table ~ .ui-panel .ui-panel-content,
    .search-table ~ .ui-panel .ui-panel-content {
        top: -30px;
        position: relative;
    }
}

@media only screen and (min-width: 768px) {
    .search-table ~ .ui-panel {
        width: calc(100vw - (16px * 2));
        top: 13.6vh;
    }

    .search-table .field .ui-float-label .ui-outputlabel {
        margin-left: 0;
    }

    .arrivalrequest-component .ui-datatable-scrollable-body {
        height: calc(100vh - (50px + 135px + 8px + 3rem + 107px + 105px + 50px + 2rem + 1rem));
    }

    .suggestions-btn:hover + .suggestions-info {
        left: 16px;
    }

    .phases-list .btn-view-phases-list {
        display: none;
    }
}

@media only screen and (min-width: 992px) {
    .search-table ~ .ui-panel {
        width: calc(100vw - (16px * 2));
        top: 100px;
    }

    .arrivalrequest-component .ui-datatable-scrollable-body {
        height: calc(100vh - ((1rem * 2) + 59.5px + 8px + 40px + 58px + 236px + 1rem));
    }

    .suggestions-btn:hover + .suggestions-info {
        left: -340px;
    }
}

@media only screen and (max-width: 1024px) {
    .ui-accordion .ui-accordion-header {
        display: inline-block;
        width: 100%;
    }

    .ui-accordion .ui-accordion-header .ui-icon,
    .ui-accordion .ui-accordion-header .title-accordion {
        display: inline-block;
    }

    .ui-accordion .ui-accordion-header .title-accordion {
        width: 95%;
    }

    .ui-accordion .ui-accordion-header .ui-panel-actions {
        position: relative;
    }

    .log-content-start {
        width: 91vw;
    }

    .phases-list {
        width: calc(100% - 91vw);
    }

    .field-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        width: 90%;
    }
}

@media only screen and (min-width: 1200px) {
    .search-table ~ .ui-panel {
        width: calc(100vw - (70px + (16px * 2)));
        top: 100px;
    }

    .arrivalrequest-component .ui-datatable-scrollable-body {
        height: calc(100vh - ((1rem * 2) + 59.5px + 8px + 40px + 58px + 164px + 1rem));
    }

    .suggestions-btn:hover + .suggestions-info {
        left: -340px;
    }

    .log-content-start {
        width: 89vw;
    }

    .phases-list {
        width: calc(100% - 89vw);
    }
}

@media only screen and (min-width: 1366px) {
    .suggestions-btn:hover + .suggestions-info {
        left: -340px;
    }

    .phases-list {
        gap: 2rem;
    }

    .phases-list button {
        transform: scale(1.1);
    }

    .log-content-start {
        width: 92vw;
    }

    .phases-list {
        width: calc(100% - 92vw);
    }
}

@media only screen and (min-width: 1400px) {
    .search-table ~ .ui-panel {
        width: calc(100vw - (70px + (16px * 2)));
        top: 100px;
    }

    .arrivalrequest-component .ui-datatable-scrollable-body {
        height: calc(100vh - ((1rem * 2) + 59.5px + 8px + 40px + 58px + 164px + 1rem));
    }

    .suggestions-btn:hover + .suggestions-info {
        left: -340px;
    }

    .log-content-start {
        width: 89vw;
    }

    .phases-list {
        width: calc(100% - 89vw);
    }
}

@media only screen and (min-width: 1680px) {
    .suggestions-btn:hover + .suggestions-info {
        left: -340px;
    }

    .log-content-start {
        width: 92vw;
    }

    .phases-list {
        width: calc(100% - 92vw);
    }
}

@media only screen and (min-width: 1920px) {
    .suggestions-btn:hover + .suggestions-info {
        left: -340px;
    }

    .log-content-start {
        width: 92vw;
    }

    .phases-list {
        width: calc(100% - 92vw);
    }
}