/* Comments : */
/* - Screens */
/* -- Sections */

/* - Common */

.page_body{
    position: relative;
}

.page_content, .login_area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index:  500;
}

.preferences_area {
    display: block;
    width: fit-content;
    float: left;
    position: relative;
    z-index:  501;
}

.preferences_area button {cursor:  pointer;}

.ui-autocomplete {
    z-index: 9999 !important;
}

.pill {
    border-radius: 30px;
    min-width: 200px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 7px 30px 7px 30px;
    margin: 0 10px 5px 10px;
}

.disabled {
    background-color: #c9cbce;
}

.disabled:hover {
    background-color: #a1a2a3;
}

.link_as_button:hover {
    text-decoration: none;
    color: white;
}
.link_as_button:active {
    text-decoration: none;
    color: white;
}
.link_as_button:focus {
    text-decoration: none;
    color: white;
}

.remove_order_modal_text {
    font-size: 2rem;
}
.remove_order_name {
    font-weight: bold;
}

/* - Order selection screen */
#new_order_area,
#existing_orders_area {
    margin-bottom: 40px;
}

#new_order_form {
    margin-top: 20px;
}

#existing_orders {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    padding-top: 15px;
}

.order_pill {
    flex-direction: row;
}

.pill_order_name {
    flex: 3 0 auto;
}
.remove_order_icon {
    flex: 0 1 auto;
    color: #912930;
    margin-left: 5px;
    cursor: pointer;
    z-index: 2;
    transform: scale(1.2);
}
.remove_order_icon:hover {
    color: #e62720;
}

.order_last_update {
    font-weight: bold;
}

.order_modified_msg {
    font-size: 2rem;
    color: #e62720;
}

/* - Main screen */

/* -- Top action button(s) */
#back_to_order_selection {
    position: absolute;
}

#main_content .actions_buttons_area {
    position: absolute;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: space-between;
}

#orders_created .actions_buttons_area {
    position: absolute;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: flex-start;
}

.right_action_buttons {
    display: flex;
}

#actions_buttons_wrapper {
    position: relative;
    margin-right: 5px;
}

#toggle_action_buttons {
    width: 250px;
    position: relative;
}

.toggle_action_buttons_icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

#actions_buttons_container {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 250px;
    display: none;
}

.action_button {
    width: 100%;
    min-height: 45px;
}

#do_inventory {
    border-top: 1px solid #004aa6;
}
#refresh_order {
    border-top: 1px solid #004aa6;
    border-bottom: 1px solid #004aa6;
}

#common_info_editor_container {
    width: 50%;
    margin:  15px auto;
}

/* -- Order data */
#order_data_container {
    font-size: 1.8rem;
}

#order_data_separator {
    margin: 0 10px 0 10px;
}

#order_forms_container {
    margin: 25px 0;
    display: flex;  
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.order_form_item {
    margin-top: 10px;
}

#supplier_input {
    width: 350px;
    border-radius: 3px;
}

#stats_date_period_select {
    margin-left: 5px;
    min-width: 200px;
}

#date_planned_input, #coverage_days_input, #targeted_amount_input, #percent_adjust_input, #stats_date_period_select {
    border-radius: 3px;
}

#coverage_form > div {
    display:block;
    float:left;
}

#coverage_form .input-wrapper {
    margin-right: 3px;
}

#coverage_days_input, #targeted_amount_input, #percent_adjust_input {
    display:  block;
}

#coverage_days_input, #targeted_amount_input {
    margin-bottom: 3px;
}

/* -- Table */
#products_table_filter{
    text-align: right !important;
}

#products_table_filter input{
    height: 35px;
    width: 300px;
    border-radius: 3px;
}
#products_table .help {cursor: help;}
#table_header_select_all{
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

.select_all_text {
    margin-top: 5px;
    margin-bottom: 5px;
}

#table_header_select_all input{
    margin-left: 5px;
}

.main.fa-info-circle {
    color: #0275d8;
}
#coverage_form .fa-info-circle {
    cursor:  pointer;
}

.custom_cell_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.product_qty_input {
    width: 100px;
}

.product_ref_input {
    padding: .5rem .5rem;
}

.supplier_package_qty,
.supplier_price {
    font-style: italic;
    font-size: 1.3rem;
}

.product_not_from_supplier {
    background-color: #e8ebf0;
    cursor: pointer;
}

.product_not_from_supplier:hover {
    background-color: #d3d7db;
}

.product_ref_cell:hover {
    background-color: #d3d7db;
    cursor: pointer;
}

.product_name, .supplier_name, .product_npa {
    font-weight: bold;
}

.select_product_cb, .product_npa_cb {
    cursor: pointer;
}

.focused_line {
    background-color: #76cf71 !important;
}

.dataTables_scrollHead {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0;
    z-index: 3;
    background-color: white;
}

/* -- Footer */

#main_content_footer {
    margin: 20px 0 40px 0;
}

#footer_actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* -- Suppliers list */
#suppliers_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; 
    margin: 15px 0;
    position: -webkit-sticky;
    position: sticky;
    top: 120px;
    z-index: 5;
    pointer-events: none;
}

.supplier_pill {
    background-color: #ffebcd;
    border: 2px solid black;
    pointer-events: auto;
}

.pill_supplier_name {
    font-weight: bold;
}

.supplier_data {
    font-size: 1.5rem;
    display: flex;
}

.remove_supplier_icon {
    color: red;
    margin-left: 5px;
    cursor: pointer;
}

/* -- Attach product to supplier modal */
.modal_input_area {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.modal_input_container, .modal_input_label {
    width:50%;
    margin: 0 15px 0 15px;
}

.modal_input_label {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.modal_input {
    width: 90%;
}

/* -- Product actions modal*/
.npa-options {
    width: fit-content;
    text-align: left;
    margin: auto;
}
.npa-options label {
    display:  block;
}

.product_actions_container {
    display: flex;
    flex-direction: column;
}

.product_actions_section {
    width: 100%;
    display: flex;
    margin: 1em 0;
}

.product_actions_column {
    width: 50%;
}
.product_actions_full_column {
    width: 100%;
}

.product_actions_column .tooltip {
    margin-left: 5px;
}

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

.product_prices_area {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product_price_action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.modal_product_actions_title {
    font-weight: bold;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.checkbox_action_disabled {
    cursor: not-allowed;
    opacity: .5;
}


/* - Orders created screen */

.order_created_header {
    margin-top: 5px;
    margin-bottom: 40px;
}

#created_orders_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.new_order_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.download_order_file {
    margin-top: 10px;
}

#recap_delivery_date {
    font-weight: bold;
}

.mail_example_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    margin: 0 auto;
}

.mail_type_text {
    width: 100%;
}

.mail_example {
    background-color: #e7e9ed;
    width: 100%;
    padding: 15px;
}



/* - Miscellaneous */

.modal_input_area form {
    width: 100%;
}
.modal_input_area form label {
    display: block;
    float: left;
    clear: left;
    width: 75%;
    text-align: left;
}
.modal_input_area form .input-wrapper {
    display: block;
    float: left;
    width: 23%;
}
.modal_input_area form .input-wrapper.checkboxes div {
    float: left;
    margin-right:  5px;
}

footer {
    display: none;
}

@media screen and (max-width: 1600px) {
    #order_forms_container {
        font-size:  small;
    }
    #supplier_form {
        flex: min-content;
        text-align:  left;
    }
}