/* STYLE */

.color-red {
  color: #c00c1c;
}

.color-green {
  color: #46b450;
}

.color-blue {
  color: #007cba;
}

#order_data .order_data_column .notification_client,
#order_data .order_data_column .notification_receipt,
#order_data .order_data_column .notification_proforma,
#order_data .order_data_column .notification_sdi,
.notification_error,
.notification_info,
.notification_client,
.notification_receipt,
.notification_sdi,
.notification_proforma {
  padding:       5px !important;
  text-align:    left;
  margin-top:    5px !important;
  margin-bottom: 0 !important;
  border-radius: 5px;
  display:       inline-block;
  width:         calc(100% - 10px);
  max-width:     calc(100% - 10px);
}

.notification_error,
.notification_info {
  max-width: 100%;
}

.notification_sdi.sent,
.notification_proforma.sent {
  border:     2px solid #71ba3c;
  background: #87ca5f;
  color:      #fff !important;
}

.notification_info,
.notification_receipt.uploaded {
  border:     2px solid #1e90ff;
  background: #3896f8;
  color:      #fff !important;
}

.notification_client.created {
  border:     2px solid #1e90ff;
  background: #3896f8;
  color:      #fff !important;
}

.notification_error,
.notification_sdi.not_sent,
.notification_proforma.not_sent {
  border:     2px solid #b73312;
  background: #ca3a14;
  color:      #fff !important;
}

.toplevel_page_wc_el_inv-options-page .wp-list-table .column-actions h4 {
  margin: 0;
}

.wfc_order_actions_wrapper .actions .invoices-view,
#order_data .order_data_column .actions .invoices-view,
.toplevel_page_wc_el_inv-options-page .wp-list-table .column-actions .invoices-view {
  font-size:       12px;
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  padding:         5px !important;
  background:      #f2f2f2;
  border:          1px solid #ccc;
  color:           #007cba;
  margin:          10px 0 0 0;
  width:           calc(100% - 10px);
  box-sizing:      border-box;
}

.wfc_order_actions_wrapper .actions .invoices-view .pop-action-icon,
#order_data .order_data_column .actions .invoices-view .pop-action-icon,
.toplevel_page_wc_el_inv-options-page .wp-list-table .column-actions .invoices-view .pop-action-icon {
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  margin-top:  1px;
}

.wfc_order_actions_wrapper .actions .invoices-view a,
#order_data .order_data_column .actions .invoices-view a,
.toplevel_page_wc_el_inv-options-page .wp-list-table .column-actions .invoices-view a {
  margin:          0 0 0 5px;
  padding:         0;
  text-decoration: none;
}

/* The invoice list table's generic .column-actions a rule forces every link
   there to a 32px icon square, which also caught this text link since it's
   just an <a> in that column; restore normal inline sizing for it here. */
.toplevel_page_wc_el_inv-options-page .wp-list-table .column-actions .invoices-view a {
  display:    inline !important;
  width:      auto !important;
  height:     auto !important;
  min-height: 0 !important;
  max-height: none !important;
  text-align: left;
}

/* modal */
.wfc_ajax_modal {
  display:  none;
  position: absolute;
  top:      0;
  bottom:   0;
  left:     0;
  right:    0;
  height:   100%;
  width:    100%;
}

.wfc_ajax_modal.open {
  display: block;
}

.wfc_ajax_modal.close {
  display: none;
}

.wfc_ajax_modal::after {
  content:          "";
  position:         fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top:              0;
  bottom:           0;
  left:             0;
  right:            0;
  height:           100%;
  width:            100%;
}

.wfc_ajax_modal::before {
  content:         "";
  display:         block;
  width:           70px;
  height:          70px;
  position:        fixed;
  left:            50%;
  top:             50%;
  margin:          0;
  background:      transparent url("../images/loader.png") no-repeat center;
  background-size: contain;
  transform:       translateZ(0);
  border-radius:   100%;
  z-index:         20;
  animation:       spin 1s linear infinite;
}

.wfc_ajax_modal.success::before {
  display: none;
}

.wfc_ajax_modal .modal_content {
  position:   fixed;
  top:        50%;
  transform:  translateY(-50%);
  max-width:  600px;
  max-height: 500px;
  height:     100%;
  left:       0;
  right:      0;
  margin:     0 auto;
  z-index:    10;
}

.wfc_ajax_modal .modal_content .modal_card {
  background-color: #fff;
  padding:          2rem 1.8rem;
  height:           auto;
  max-height:       400px;
  display:          flex;
  align-items:      flex-start;
  flex-direction:   column;
  overflow-y:       auto;
  overflow-x:       hidden;
  word-break:       break-word;
  border:           1px solid #c3c4c7;
  border-radius:    4px;
}

.wfc_ajax_modal .modal_content .modal_card .user_code_wrapper {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: flex-start;
}

.wfc_ajax_modal .modal_content .modal_card #user_code {
  text-align:    center;
  max-width:     130px;
  color:         #1d2327;
  background:    #f6f7f7;
  border-radius: 0;
}

.wfc_ajax_modal .modal_content .modal_card #api_oauth_device {
  margin-top:     10px;
  font-size:      13px;
  text-transform: capitalize;
}

.wfc_ajax_modal .modal_content .modal_card .wait {
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-top:      15px;
  text-align:      center;
  width:           95%;
  color:           #1d2327;
  background:      #f2f2f2;
  padding:         2.5%;
  border:          1px dashed #c3c4c7;
}

.wfc_ajax_modal .modal_content .modal_card .wait img {
  max-width:     23px;
  background:    transparent;
  border-radius: 100%;
  margin-right:  10px;
  position:      relative;
  top:           10px;
  animation:     spin 1s linear infinite;
}

.wfc_ajax_modal .modal_content .modal_card p {
  margin: 0 0 5px;
}

.wfc_ajax_modal .modal_content .modal_card .state_list {
  background-color: #fff;
  padding:          0.5rem;
  overflow:         auto;
  margin:           0;
}

.wfc_ajax_modal .modal_content .modal_card .state_list li code.light {
  background-color: #fff;
  color:            #000;
}

.wfc_ajax_modal.success .modal_content .close {
  position: absolute;
  top:      8px;
  right:    8px;
  z-index:  1;
}

.wfc_ajax_modal.success .modal_content .close::before {
  content:          "×";
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            26px;
  height:           26px;
  background-color: #f6f7f7;
  border:           1px solid #c3c4c7;
  border-radius:    3px;
  color:            #1d2327;
  font-size:        1.1rem;
  line-height:      1;
  cursor:           pointer;
}

.wfc_ajax_modal.success .modal_content .close:hover::before {
  background-color: #e5e5e5;
}

.wfc_ajax_modal .modal_content .modal_card.open {
  opacity:    1;
  transition: all 380ms ease-in-out;
}

.wfc_ajax_modal .modal_content .modal_card.close {
  opacity:    0;
  transition: all 380ms ease-in-out;
}

/* wrapper */
#wfc_wrapper {
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
  align-items:    flex-start;
}

#wfc_wrapper .wfc_login,
#wfc_wrapper .wfc_user_info {
  flex: 1 0 auto;
}

.addon * small,
#wfc_wrapper * small {
  display: inline !important;
  float:   none !important;
  width:   auto !important;
}

/* login */
.wfc_login {
  background-color: #fff;
  border:           1px solid #c3c4c7;
  padding:          1rem;
  position:         relative;
  max-width:        400px;
}

.wfc_login .connected {
  background-color: #f0f6e9;
  color:            #1e4620;
  border:           1px solid #c3c4c7;
  padding:          6px;
  text-align:       center;
  font-size:        1rem;
  text-transform:   capitalize;
  margin:           6px 0;
}

.wfc_login .valid_access {
  background-color: #fff;
  color:            #1d2327;
  padding:          4px;
  text-align:       center;
  margin:           10px 0;
}

.wfc_login .valid_access p {
  margin: 0;
}

.wfc_login .valid_access input.token {
  background-color: #fff;
  border:           1px solid #c3c4c7;
  color:            #1d2327;
  margin:           2px 0 10px;
  font-size:        12px;
  height:           28px;
  width:            100%;
  border-radius:    0;
}

.wfc_secret_wrap {
  display:     flex;
  align-items: center;
  gap:         4px;
  width:       100%;
}

.wfc_login .valid_access .wfc_secret_wrap input.token {
  width: auto;
  flex:  1 1 auto;
}

.wfc_toggle_visibility,
.wfc_copy_field {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  flex:             0 0 auto;
  cursor:           pointer;
  background:       none;
  border:           none;
  padding:          3px;
  line-height:      1;
  color:            #50575e;
}

.wfc_toggle_visibility:hover,
.wfc_copy_field:hover {
  color: #1d2327;
}

.wfc_toggle_visibility .pop-action-icon,
.wfc_copy_field .pop-action-icon {
  width:  16px;
  height: 16px;
}

.wfc_toggle_visibility .pop-action-icon:nth-child(2),
.wfc_copy_field .pop-action-icon:nth-child(2) {
  display: none;
}

.wfc_toggle_visibility.is-revealed .pop-action-icon:nth-child(1),
.wfc_copy_field.is-copied .pop-action-icon:nth-child(1) {
  display: none;
}

.wfc_toggle_visibility.is-revealed .pop-action-icon:nth-child(2),
.wfc_copy_field.is-copied .pop-action-icon:nth-child(2) {
  display: inline;
}

.wfc_copy_field.is-copied {
  color: #1e4620;
}

.wfc_login .wfc_login_icon {
  background:  #fff;
  padding:     0 5px;
  position:    relative;
  display:     flex;
  align-items: center;
  font-size:   30px;
}

.wfc_login .wfc_login_icon::after {
  background-image:        url("../images/fic-logo.svg");
  content:                 '';
  /*content:                 "\f310";*/
  /*font-family:             "dashicons";*/
  line-height:             1;
  font-weight:             400;
  font-style:              normal;
  text-transform:          none;
  text-rendering:          auto;
  -moz-osx-font-smoothing: grayscale;
  text-align:              center;
  margin:                  0 auto;
  width:                   50px;
  height:                  50px;
  background-size:         contain;
  background-position:     center;
  background-repeat:       no-repeat;
}

.wfc_login .wfc_login_icon.logged {
  background-color: #fff;
  border-color:     #fff;
}

.wfc_login .wfc_login_wrap {
  width:      auto;
  padding:    0 1rem 1rem;
  background: #fff;
}

.wfc_login .wfc_login_wrap .exchange {
  color: #fff;
}

.wfc_login .wfc_login_wrap .login_title {
  font-size:      1.1rem;
  font-weight:    700;
  text-transform: capitalize;
  text-align:     center;
  margin-bottom:  15px !important;
}

.wfc_login .wfc_login_wrap input[type="text"],
.wfc_login .wfc_login_wrap input[type="pass"],
.wfc_login .wfc_login_wrap select {
  background:    #fff;
  border:        1px solid #8c8f94;
  border-radius: 0;
  height:        25px;
  font-size:     12px;
  width:         100%;
  max-width:     350px;
  appearance:    auto;
}

.wfc_login .wfc_login_wrap .login_title,
.wfc_login .wfc_login_wrap #wfc_api_url,
.wfc_login .wfc_login_wrap #wfc_api_uid,
.wfc_login .wfc_login_wrap #wfc_api_key {
  margin-bottom: 5px;
  display:       inline-block;
  color:         #333;
  width:         100%;
}

.wfc_login .wfc_login_wrap label[for="wfc_api_uid"],
.wfc_login .wfc_login_wrap label[for="wfc_api_key"] {
  display:       block;
  font-weight:   600;
  font-size:     12px;
  margin-bottom: 2px;
}

.wfc_login .wfc_login_wrap .expired {
  display:    block;
  font-size:  11px;
  margin-top: 10px;
}

.wfc_login .wfc_login_wrap #api_oauth_token,
.wfc_login .wfc_login_wrap #api_oauth,
.wfc_login .wfc_login_wrap #api_login {
  margin-top:  1em;
  font-size:   13px !important;
  line-height: 2.92308 !important;
  min-height:  40px !important;
  padding:     0 16px !important;
}

.wfc_login .wfc_login_wrap #api_oauth_token[disabled="disabled"],
.wfc_login .wfc_login_wrap #api_oauth[disabled="disabled"],
.wfc_login .wfc_login_wrap #api_login[disabled="disabled"] {
  pointer-events: none;
}

.wfc_login .wfc_login_wrap .wfc_token_actions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         8px;
  margin-top:  4px;
}

/* user info */
.wfc_user_info {
  background:  #fff;
  padding:     10px;
  border:      1px solid #c3c4c7;
  max-height:  100%;
  margin-left: 10px;
}

.wfc_user_info h3 {
  margin-top:     0;
  border-bottom:  1px solid;
  padding-bottom: 6px;
  margin-bottom:  6px;
  text-transform: uppercase;
}

.wfc_user_info .permissions p {
  margin:      4px 0;
  line-height: 1;
}

.wfc_user_info .permissions strong {
  margin-bottom: 10px;
  display:       block;
}

.wfc_user_info .permissions .pop-action-icon {
  vertical-align: middle;
  width:          16px;
  height:         16px;
}

.wfc_user_info .permissions .permission-denied {
  color: #c00c1c;
}

.wfc_user_info .permissions .permission-granted {
  color: #87ca5f;
}

.wfc_user_info ul.payment_accounts {
  max-height: 80px;
  height:     100%;
  overflow:   scroll;
}

.wfc_user_info p.mapping-payment-info {
  line-height:   1;
  margin-bottom: 11px;
}

.wfc_user_info ul.payment_accounts,
.wfc_user_info ul.payment_accounts li {
  margin:     0;
  list-style: decimal inside;
}

.wfc_user_info table.payment_methods {
  width:           100%;
  border-collapse: collapse;
  margin-top:      10px;
}

.wfc_user_info table.payment_methods th,
.wfc_user_info table.payment_methods td {
  padding:        8px;
  text-align:     left;
  vertical-align: middle;
}

.wfc_user_info table.payment_methods select {
  width:     100%;
  max-width: 100%;
  height:    28px;
}

.wfc_user_info table.payment_methods .payment_account_missing {
  color: #c00c1c;
}

.wfc_user_info label input,
.wfc_user_info label select {
  width: 100%;
}

.wfc_user_info label {
  margin:         1em 0 0;
  display:        block;
  border-top:     1px solid;
  padding-top:    5px;
  display:        flex;
  flex-direction: column;
}

.wfc_user_info .selected_company {
  font-weight: 600;
}

.wfc_user_info .no_selected_company {
  font-weight: 600;
  color:       #c00c1c;
}

.wfc_user_info p {
  margin: 0;
}

/* actions */
.api-action {
  padding:     0 10px !important;
  line-height: 2.15 !important;
  font-size:   11px !important;
  min-height:  20px !important;
}

.wfc_login .wfc_login_wrap .permissions_check label {
  font-size: 1rem;
  margin:    10px 0 10px;
  display:   block;
}

.wfc_login .wfc_login_wrap .permissions_check p {
  margin: 0 0 5px;
}

.wfc_login .wfc_login_wrap #api_oauth .dashicons::before {
  line-height:    34px;
  font-size:      18px !important;
  vertical-align: top;
}

.wfc_error_permissions {
  padding:          0 1rem;
  background-color: #fff !important;
  border:           1px solid #c00c1c !important;
  color:            #c00c1c !important;
  font-size:        9px !important;
  font-weight:      700;
  text-transform:   uppercase;
  margin-bottom:    2em;
}

.api-action.delete {
  background-color: #c00c1c !important;
  border-color:     #c00c1c !important;
  box-shadow:       none !important;
  color:            #fff !important;
}

.button-primary.sended.api-action,
.api-action.send {
  background-color: #007cba !important;
  border-color:     #007cba !important;
  box-shadow:       none !important;
  color:            #fff !important;
}

.api-action.verify {
  background-color: #ff653a !important;
  border-color:     #ff653a !important;
  box-shadow:       none !important;
  color:            #fff !important;
}

.button-primary.upload.api-action {
  background-color: #87ca5f !important;
  border-color:     #87ca5f !important;
  box-shadow:       none !important;
  color:            #fff !important;
}

.pdf-action.button-primary {
  padding:          0 10px !important;
  min-height:       20px !important;
  background-color: #e34a56 !important;
  border-color:     #e34a56 !important;
  box-shadow:       none !important;
  color:            #fff !important;
  vertical-align:   text-top;
  max-height:       32px;
}

/* sync */
.sync_number--pending {
  color:           #007cba;
  display:         inline-flex;
  align-items:     center;
  vertical-align:  middle;
}

.sync_number--pending .pop-action-icon {
  width:  16px;
  height: 16px;
}

.api-action.sync_number {
  color: #e1a40a !important;
}

.api-action.sync_number .pop-action-icon {
  width:  16px;
  height: 16px;
}

/* rotate icon */
.dashicons.spin,
.pop-action-icon.spin {
  animation:                 dashicons-spin 1s infinite;
  animation-timing-function: linear;
}

@keyframes dashicons-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.button-primary.imported.api-action,
.button-primary.sended.api-action,
.actions .api-action[disabled="disabled"] {
  pointer-events: none;
  opacity:        0.6;
}

.actions .api-action {
  vertical-align: text-top;
  max-height:     32px;
}

.actions .api-action:not([id*="api_state_"]) .dashicons {
  color: #fff;
}

.wfc_order_actions_wrapper {
  margin-top: 1em;
}

.wfc_order_actions_wrapper h4 {
  margin: 0.5em 0 !important;
}

.wfc_order_actions_wrapper .actions {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  flex-wrap:      wrap;
}

.wc_el_inv__refund-invoice .wfc_order_actions_wrapper .actions .invoices-view {
  font-size:       12px;
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  padding:         5px !important;
  background:      #f2f2f2;
  border:          1px solid #ccc;
  color:           #007cba;
  margin:          10px 0 0 0;
  width:           calc(100% - 10px);
}

.wfc_order_actions_wrapper .actions .pdf-action.button-primary,
.wfc_order_actions_wrapper .actions .api-action {
  margin:          0 5px 5px 0;
  display:         inline-flex;
  width:           32px !important;
  height:          32px !important;
  min-height:      32px !important;
  max-height:      32px;
  padding:         0 !important;
  align-items:     center;
  align-content:   center;
  justify-content: center;
}

.wfc_order_actions_wrapper .actions .api-action .pop-action-icon,
.wfc_order_actions_wrapper .actions .pdf-action.button-primary .pop-action-icon {
  width:  16px;
  height: 16px;
}

/* Addon info section */
.addon {
  background:     #fff;
  margin:         0;
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
  width:          100%;
  max-width:      100%;
  border-bottom:  1px solid #dcdcde;
}

.addon-header {
  margin-top: 1em;
  display:    flex;
}

.addon-header h2 {
  background-color: #f6f7f7;
  color:            #1d2327;
  border-bottom:    1px solid #c3c4c7;
  margin:           0;
  padding:          1rem;
  width:            100%;
  max-width:        100%;
}

.addon .info {
  padding:   0 10px 1rem;
  margin:    0;
  flex:      1 0 29.3333%;
  width:     29.3333%;
  max-width: 29.3333%;
}

.addon .info.config {
  flex:      1 0 96%;
  width:     96%;
  max-width: 96%;
}

.addon .info h4 {
  font-size: 15px !important;
}

.addon .info h5 {
  font-size: 13px !important;
}

.addon .info.config h3 {
  color: #1d2327;
}

.addon * hr {
  width:     100%;
  max-width: 100%;
}

.log-link {
  text-decoration: none;
}

.notification_error .pop-action-icon,
.log-link .pop-action-icon {
  width:          16px;
  height:         16px;
  vertical-align: middle;
}

@media screen and (max-width: 991px) {
}

@media screen and (max-width: 1525px) {
  #wfc_wrapper {
    flex-direction: column;
    align-items:    unset;
  }

  .wfc_user_info {
    margin: 10px 0 0 0;
  }

  .addon {
    flex-direction: column-reverse;
  }

  .addon .info {
    flex:      1 0 96%;
    width:     96%;
    max-width: 96%;
    padding:   0 10px;
  }

  .addon .info.config {
    flex:        1 0 96%;
    width:       96%;
    max-width:   96%;
    border-top:  1px solid #c3c4c7;
    border-left: none;
    padding:     0 10px;
  }
}