/* 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);
}

#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;
}

/* 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, 124, 186, 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:         scroll;
  word-break:       break-word;
  border:           5px solid #007cba;
  border-radius:    20px;
}

.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:         #007cba;
  background:    rgba(0, 124, 186, 0.1);
  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:           #007cba;
  background:      #f2f2f2;
  padding:         2.5%;
  border:          1px dashed #007cba;
}

.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::before {
  content:          "x";
  position:         absolute;
  right:            0;
  top:              0;
  background-color: #007cba;
  padding:          5px 10px;
  color:            #fff;
  font-size:        1rem;
  line-height:      1rem;
  height:           18px;
  width:            8px;
  cursor:           pointer;
}

.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:           2px solid #007cba;
  padding:          1rem;
  position:         relative;
  max-width:        400px;
}

.wfc_login .connected {
  background-color: #46b450;
  color:            #fff;
  border:           1px solid #007cba;
  padding:          6px;
  text-align:       center;
  font-size:        1rem;
  text-transform:   capitalize;
  margin:           6px 0;
}

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

.wfc_login .valid_access p {
  margin: 0;
}

.wfc_login .valid_access textarea.token {
  background-color: #fff;
  border:           1px solid #007cba;
  color:            #007cba;
  margin:           2px 0 10px;
  font-size:        12px;
  max-height:       82px;
  width:            100%;
  border-radius:    0;
}

.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/fit-logo.png");
  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;
  color:                   #007cba;
  margin:                  0 auto;
  width:                   45px;
  height:                  45px;
  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 {
  color:          #007cba !important;
  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 #007cba;
  border-radius: 0;
  height:        25px;
  font-size:     12px;
  width:         100%;
  max-width:     350px;
  appearance:    auto;
}

.wfc_login .wfc_login_wrap select option[selected="selected"] {
  background-color: #87ca5f !important;
}

.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 .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 {
  width:            100%;
  text-align:       center;
  margin-top:       1em;
  background-color: #007cba;
  border-color:     #007cba;
  box-shadow:       0 2px 1px #034262 !important;
  font-size:        1rem !important;
  text-transform:   uppercase;
}

.wfc_login .wfc_login_wrap #api_oauth_token:hover,
.wfc_login .wfc_login_wrap #api_oauth:hover,
.wfc_login .wfc_login_wrap #api_login:hover {
  color: #fff;
}

.wfc_login .wfc_login_wrap #api_oauth_token {
  margin-top: 0;
}

.wfc_login .wfc_login_wrap #api_oauth_token:hover,
.wfc_login .wfc_login_wrap #api_oauth:hover,
.wfc_login .wfc_login_wrap #api_login:hover {
  background-color: #0095ff;
  border-color:     #0095ff;
}

.wfc_login .wfc_login_wrap #api_oauth_token:focus,
.wfc_login .wfc_login_wrap #api_oauth:focus,
.wfc_login .wfc_login_wrap #api_login:focus {
  box-shadow: none;
}

.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 #api_refresh_oauth_token {
  background-color: #0095ff;
  border-color:     #0095ff;
  box-shadow:       0 2px 1px #005d88 !important;
  font-size:        15px !important;
  line-height:      20px;
  padding:          6px;
  font-weight:      700;
  width:            100% !important;
}

.wfc_login .wfc_login_wrap #api_refresh_oauth_token:hover {
  background-color: #005d88;
  border-color:     #005d88;
  color:            #fff;
}

/* user info */
.wfc_user_info {
  background:  #fff;
  padding:     10px;
  border:      2px solid #007cba;
  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 * {
  color: #007cba;
}

.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 .dashicons {
  line-height:    1;
  vertical-align: middle;
  font-size:      15px;
  height:         15px;
  border-radius:  100%;
  width:          16px;
}

.wfc_user_info .permissions .dashicons-sos,
.wfc_user_info .permissions .dashicons-dismiss {
  color: #c00c1c;
}

.wfc_user_info .permissions .dashicons-yes-alt {
  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,
.wfc_user_info ul.payment_methods,
.wfc_user_info ul.payment_methods li {
  margin:     0;
  list-style: decimal inside;
}

.wfc_user_info ul.payment_methods li {
  display:        flex;
  align-items:    flex-start;
  margin-bottom:  15px;
  border-bottom:  1px solid #ddd;
  padding-bottom: 15px;
  flex-direction: column;
}

.wfc_user_info ul.payment_methods li .desc {
  flex:      1 0 100%;
  width:     100%;
  max-width: 100%;
  display:   inline-block;
}

.wfc_user_info ul.payment_methods li:last-of-type {
  border-bottom: 0 !important;
}

.wfc_user_info ul.payment_methods li strong {
  flex:           1 0 100%;
  width:          100%;
  max-width:      100%;
  line-height:    1.2;
  margin-bottom:  10px;
  text-transform: uppercase;
}

.wfc_user_info ul.payment_methods li select[name="mapping_payment_gateways"],
.wfc_user_info ul.payment_methods li select[name="mapping_payment_methods"] {
  flex:      1 0 80%;
  width:     80%;
  max-width: 35em;
  height:    25px;
}

.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;
  color:       #007cba;
}

.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 .logout.button {
  width:       100%;
  text-align:  center;
  font-size:   15px !important;
  line-height: 20px;
  padding:     6px;
  font-weight: 700;
  margin:      1em auto;
  text-align:  center;
  display:     block;
}

.wfc_login .wfc_login_wrap .permissions_check * {
  color: #007cba;
}

.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;
}

.wfc_login .wfc_login_wrap .logout.button,
.api-action.delete {
  background-color: #c00c1c !important;
  border-color:     #c00c1c !important;
  box-shadow:       0 2px 1px #59040d !important;
  color:            #fff !important;
  text-transform:   uppercase;
}

.api-action.delete {
  font-size: 11px !important;
}

.button-primary.sended.api-action,
.api-action.send {
  background-color: #007cba !important;
  border-color:     #007cba !important;
  box-shadow:       0 2px 1px #034262 !important;
  color:            #fff !important;
  font-size:        11px !important;
  text-transform:   uppercase;
}

.api-action.verify {
  background-color: #ff653a !important;
  border-color:     #ff653a !important;
  box-shadow:       0 2px 1px #c7431e !important;
  color:            #fff !important;
  font-size:        11px !important;
  text-transform:   uppercase;
}

.button-primary.upload.api-action {
  background-color: #87ca5f !important;
  border-color:     #87ca5f !important;
  box-shadow:       0 2px 1px #428f19 !important;
  color:            #fff !important;
  font-size:        11px !important;
  line-height:      30px !important;
  text-transform:   uppercase;
}

.pdf-action.button-primary {
  padding:          0 10px !important;
  line-height:      2.15 !important;
  font-size:        11px !important;
  min-height:       20px !important;
  background-color: #e34a56 !important;
  border-color:     #e34a56 !important;
  box-shadow:       0 2px 1px #bb1c2d !important;
  color:            #fff !important;
  text-transform:   uppercase;
  vertical-align:   text-top;
  max-height:       32px;
}

/* sync */
.sync_number.dashicons-hidden {
  color: #007cba !important;
}

.sync_number.dashicons-update {
  color: #428f19 !important;
}

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

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

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

.api-action.sync_number .dashicons::before {
  font-size: 22px !important;
}

.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:         flex;
  height:          100%;
  max-height:      32px;
  align-items:     center;
  align-content:   center;
  justify-content: center;
}

.wfc_order_actions_wrapper .actions .api-action .dashicons::before {
  line-height:    1.4;
  font-size:      15px;
  vertical-align: top;
}

/* 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: #007cba;
  color:            #fff;
  margin:           0;
  padding:          1rem;
  width:            100%;
  max-width:        100%;
}

.addon .info {
  padding:   0 2% 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: #007cba;
}

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

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

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

@media screen and (max-width: 1140px) {
  #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;
  }

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