label {
    font-weight: 400;
    color: #000 !important;
    /* color: #6e6e6e !important; */
}

h5 {
    color: #0d56d6;
    font-weight: 500;
}

.page-wrapper .page-content-tab {
    background-color: #f9f9f9;
}

.col-form-label {
    padding-top: calc(.4rem + 1px);
    padding-bottom: calc(.4rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
    color: #000000;
}

.leftbar-tab-menu .main-icon-menu {
    background-color: #001c64;
}

.leftbar-tab-menu .main-menu-inner .topbar-left .logo .logo-lg {
    height: 24px;
}
.table_header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-black {
    color: #fff;
    background: #292929;
}
.material_details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stages {
    padding: 1rem 1rem 0rem 1rem;
}

.stage_card_main {
    background-color: #fcfcfc;
    border: 1px solid #f1f1f1;
    border-radius: 15px;
}

.stage_info {
    background-color: #fff;
    padding: 15px;
    margin: 25px 25px 0px 25px;
    border: 1px solid #f1f1f1;
    border-radius: 15px;
}
.checkbox_bg{
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
}
.stage-card {
    padding: 20px;
    background-color: #f9f9f9;
}

.workflow {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-start;
}

/* .stage {
    flex: 1;
    min-width: 150px;
    position: relative;
    text-align: center;
    cursor: pointer;
} */

.stage-box {
    color: #000;
    padding: 25px 15px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 1em;
    position: relative;
    overflow: hidden;
    border: 1px solid #f1f1f1;
}

.stage-b .stage-box{
    background-color: #000;
    color: #fff !important;
    border-radius: 15px;
}

.arrow {
    color: #667eea;
    font-size: 2em;
    font-weight: bold;
    flex-shrink: 0;
}

.status-t {
    padding: 10px !important;
}


#editableTable {
    border: 1px solid #f1f1f1;
    width:100%; 
    border-collapse:collapse; 
    text-align:left;
}
.summary-section {
    padding: 20px 20px 20px 20px;
    background-color: #fff6f6;
    border-top: 1px solid #cfcfcf;
    margin-top: 20px;
}

.summary-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ffe7e7;
}

.summary-row:last-child {
    border-bottom: none;
    /* border-top: 2px solid #333; */
    font-weight: 600;
    font-size: 16px;
    margin-top: 10px;
    padding-top: 15px;
}

.summary-label {
    margin-right: 40px;
    color: #666;
    min-width: 150px;
    text-align: right;
}

.summary-value {
    min-width: 150px;
    text-align: right;
    font-weight: 500;
}
.p-From {
    background-color: #f9f9f9;
    border-radius: 20px;
}

.qc-From{
    background-color: #eaedf2;
    border-radius: 10px;
}

.met-profile .met-profile-main .met-profile_user-detail .met-user-name {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #000 !important;
}
.activity-scroll {
    min-height: auto;
}
.header-task-m {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reminer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.selectr-option.selected {
    background-color: #f1f5fa !important;
    color: #000;
}
#default option{
    font-weight: 600;
}

.qf_btn{
    display: flex;
    /* flex-direction: column; */
    gap: 10px;
    align-items: center;

}

.task_tb {
    width: 33.33%;
}
/* .nav.nav-tabs .nav-item.show.active, .nav.nav-tabs .nav-item.show:focus, .nav.nav-tabs .nav-link.active, .nav.nav-tabs .nav-link:focus {
    color: #0b51b7;
    background-color: #fff;
    border-color: transparent transparent #0b51b7;
    text-align: center;
} */

.nav.nav-tabs .nav-item.show, .nav.nav-tabs .nav-link {
    color: #303e67;
    text-align: center;
}

.badge-count_td {
    background-color: #f4092c !important;
    color: #fff !important;
    font-size: 16px;
    margin-left: 10px;
}
.badge-count_up {
    background-color: #0d56d6 !important;
    color: #fff !important;
    font-size: 16px;
    margin-left: 10px;
}

.float-right {
text-align: right;
margin-bottom: 10px;
}

.project_tb {
    width: 50%;
}

.form-check-input {
    width: 2em;
    height: 2em;
    /* margin-top: 0.25em; */
    margin-top: -0.29em;
    vertical-align: middle;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, .25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    print-color-adjust: exact;
    /* margin-bottom: 10px; */
    margin-right: 10px;
}
.form-check .form-check-input {
    float: left;
    margin-left: 0.0em;
}

.accordion-header{
    margin: 0;
}

.new_accordion .accordion-button{
    padding: 10px 20px;
    font-size: 16px;
}

.prospecting-task-box{
    border-left: 3px solid #bedbff;
}

.negotiation-task-box{
    border-left: 3px solid #fee685
}

.prospecting-badge{
    background: #bedbff;
    color: #0d56d6;
}

.negotiation-badge{
    background: #fee685;
    color: #bb4d20;
}

.negotiation-task-box h5{
    color: #bb4d20;
}

.closed-won-task-box{
    border-left: 3px solid #0e8236;
}

.closed-won-badge{
    background: #b9f8cf;
    color: #0e8236;
}

.closed-won-task-box h5{
    color: #0e8236;
}

.closed-lost-task-box{
    border-left: 3px solid #e5e7eb;
}

.closed-lost-badge{
    background: #e5e7eb;
    color: #36416e;
}

.closed-lost-task-box h5{
    color: #36416e;
}

.thead-gray{
    background: #f1f1f1;
}
/* 
.select2{
    padding: 2px 12px;
    border-radius: 3px;
    border: coral;
    display: block;
    width: 100%;
    font-size: .8125rem;
    font-weight: 400;
    color: #000444;
    border: 1px solid #e8ebf3;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: none;
    border-radius: 4px;
} */

.header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
}

.header-icon {
    font-size: 1.3rem;
}

.progress-badge {
    background: #fff3cd;
    color: #856404;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-block;
    font-size: 0.875rem;
    border: 1px solid #ffd966;
}

.checklist-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
    cursor: pointer;
}

.checklist-item.completed {
    border-color: #00c776;
    background: #ecfff6;
}

.checklist-item.completed span {
    text-decoration: line-through;
}

.status-icon {
    color: #00c776;
    font-weight: bold;
    font-size: 16px;
    display: none;
}

.checklist-item.completed .status-icon {
    display: block;
}

.form-check-input {
    cursor: pointer;
}
.uppy-DragDrop-inner {
    line-height: 1.4;
    margin: 0;
    padding: 80px 20px;
    text-align: center;
}

.upload-btn {
    background: #0d56d6;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.upload-btn:hover {
    background: #0d56d6;
}

.detail-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 500;
}

.detail-value {
    font-size: 1rem;
    color: #1f2937;
    margin-bottom: 20px;
    font-weight: 500;
}

.detail-value.price {
    color: #0d56d6;
    font-size: 1.25rem;
    font-weight: 600;
}

.detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-group {
    margin-bottom: 0;
}

.notes-section {
    margin-top: 8px;
}

.notes-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    color: #374151;
    margin-top: 8px;
    line-height: 1.5;
}

.delete-btn {
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 600;
    font-size: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-top: 20px;
}

.delete-btn:hover {
    background: #b91c1c;
}
.title-icon {
    color: #0d56d6;
    font-size: 1.25rem;
}


.bd-bottom {
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 16px;
    margin-top: 24px;
}

.section-title:first-of-type {
    margin-top: 0;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 16px;
}

.field-group {
    margin-bottom: 0;
}

.field-label {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-bottom: 4px;
    font-weight: 400;
}

.field-value {
    font-size: 0.9375rem;
    color: #1f2937;
    font-weight: 400;
}

.field-value.price {
    color: #0d56d6;
    font-size: 1.125rem;
    font-weight: 600;
}

.notes-section {
    margin-top: 16px;
}

.notes-label {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-bottom: 8px;
    font-weight: 400;
}

.notes-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.5;
}

.divider {
    border-top: 1px solid #e5e7eb;
    margin: 20px 0;
}

.modal-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 8px;
    line-height: 1.5;
}

.upload-area {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 20px;
}

.upload-area:hover {
    border-color: #7c3aed;
    background-color: #faf5ff;
}

.upload-area.drag-over {
    border-color: #7c3aed;
    background-color: #f3e8ff;
}

.upload-icon {
    font-size: 3rem;
    color: #7c3aed;
    margin-bottom: 12px;
}

.upload-text {
    font-size: 0.9375rem;
    color: #7c3aed;
    font-weight: 600;
    margin-bottom: 4px;
}

.upload-subtext {
    font-size: 0.8125rem;
    color: #6b7280;
}

.file-input {
    display: none;
}

.file-preview {
    display: none;
    margin-top: 16px;
    padding: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    align-items: center;
    gap: 12px;
}

.file-preview.show {
    display: flex;
}

.file-icon {
    font-size: 1.5rem;
    color: #7c3aed;
}

.file-info {
    flex: 1;
}

.file-name {
    font-size: 0.875rem;
    color: #1f2937;
    font-weight: 500;
    margin-bottom: 2px;
}

.file-size {
    font-size: 0.75rem;
    color: #6b7280;
}

.remove-file-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    font-size: 1.25rem;
}

.remove-file-btn:hover {
    color: #dc2626;
}





.up-file-card {
    background: linear-gradient(135deg, #e8e4ff 0%, #f0edff 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #d8d0ff;
    transition: all 0.3s ease;
    height: 100%;
}

.up-file-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.up-file-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.file-icon {
    color: #7c3aed;
    font-size: 24px;
}

.file-details h6 {
    margin: 0;
    color: #7c3aed;
    font-weight: 600;
    font-size: 16px;
}

.file-details p {
    margin: 4px 0 0 0;
    color: #6b7280;
    font-size: 13px;
}

.delete-btn_icon {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
}

.delete-btn_icon:hover {
    color: #dc2626;
    transform: scale(1.1);
}

.view-btn_icon {
    background: none;
    border: none;
    color: #0d56d6;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
}

.view-btn_icon:hover {
    color: #0d56d6;
    transform: scale(1.1);
}

.up-file-blue{
    background: #eff6ff;
    border-color: #bedbff;
}

.up-file-blue .file-icon{
    color: #155dfc;
}

.up-file-blue .file-details h6{
    color: #155dfc;
}

.up-file-red{
    background: #fef2f2;
    border-color: #ffc9c9;
}

.up-file-red .file-icon{
    color: #e7000b;
}

.up-file-red .file-details h6{
    color: #82181a;
}

.up-file-red-1{
    background: #fef2f2;
    border-color: #ffa2a2;
    border-width: 2px;
}

.up-file-red-1 .file-icon{
    color: #e7000b;
}

.up-file-red-1 .file-details h6{
    color: #82181a;
}

.up-file-purple{
    background: #faf5ff;
    border-color: #dab2ff;
}

.up-file-purple .file-icon{
    color: #9810fa;
}

.up-file-purple .file-details h6{
    color: #9810fa;
}





.info-section {
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.product-info-section {
    /* background-color: #e8f4f8; */
    border: 1px solid #b8dce8;
}

.stock-info-section {
    /* background-color: #f0f0f8; */
    border: 1px solid #d0d0e0;
}

.rate-pricing-section {
    /* background-color: #e8f8f0; */
    border: 1px solid #b8e8d0;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c5f6f;
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.info-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.info-value {
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 600;
}

.category-badge {
    background-color: #f0e6ff;
    color: #8b4db8;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge {
    background-color: #d4f4dd;
    color: #2d7a4a;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.stock-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.stock-item {
    text-align: left;
}

.stock-value {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 4px;
}

.stock-value.current {
    color: #2d9d78;
}

.stock-value.reorder {
    color: #e67e22;
}

.price-value {
    font-size: 18px;
    font-weight: 700;
    color: #5b4db8;
}

.total-value-box {
    background-color: #ffffff;
    border: 2px solid #2d9d78;
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-label {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.total-sublabel {
    font-size: 12px;
    color: #2d9d78;
    margin-top: 2px;
}

.total-amount {
    font-size: 32px;
    font-weight: 700;
    color: #2d9d78;
}

.remarks-section {
    margin-top: 12px;
}

.remarks-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    margin-bottom: 4px;
}

.remarks-text {
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 600;
}
.dataTables_filter {
    margin-bottom: 12px;
}
.text-grey{
    color: #737373 !important;
}

  .project-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    box-shadow: 0 2px 20px rgba(0,0,0,0.07);
    border: 1px solid #ebebeb;
  }

  /* Header */
  .card-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
  }

  .card-title-row h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.3;
  }

  .badge-active {
    background: #e6f9ef;
    color: #1db954;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 20px;
    border: 1px solid #b2e8cc;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .subtitle-link {
    color: #e8600a;
    font-size: 0.87rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 0.35rem;
    display: inline-block;
  }

  .description {
    font-size: 0.84rem;
    color: #6b7280;
    margin-bottom: 1.1rem;
    line-height: 1.5;
  }
  .stats-box {
    background: #fffdf4;
    border: 1px solid #f3e8c8;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1.1rem;
    gap: 0.5rem;
}
.card-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.p-8 {
    padding: 8px !important;
}
.stat-item {
    text-align: center;
    flex: 1;
}

           .search-wrapper {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-icon {
      position: absolute;
      left: 16px;
      color: #9ea5b0;
      display: flex;
      align-items: center;
      pointer-events: none;
      transition: color 0.2s ease;
    }

    .search-input {
      width: 100%;
      padding: 13px 16px 13px 46px;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: #1a1d23;
      background: #f4f5f7;
      border: 1.5px solid transparent;
      border-radius: 10px;
      outline: none;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .search-input::placeholder {
      color: #9ea5b0;
    }

    .search-input:focus {
      background: #ffffff;
      border-color: #4f6ef7;
      box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.12);
    }

    .search-wrapper:focus-within .search-icon {
      color: #4f6ef7;
    }

.btn_disibled{
    pointer-events: none;
    opacity: 0.5;
}

.f-22{
    font-size: 22px;
}


.qc-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* left-right */
  width: 100%;
}

.qc-icon {
  font-size: 28px;
}

.qc-text {
  font-size: 14px;
  font-weight: 600;
}

.qc-green {
  color: #10b981;
}

.qc-view-link {
  display: inline-flex;
  align-items: center;   
  gap: 5px;
  text-decoration: none;
}

.qc-view-link i {
  font-size: 20px;
}

.qc-reset-btn {
    background-color: #ffffff;   
    border: 1px solid #ff7f00;   
    color: #ff7f00;              
    transition: color 0.3s ease; 
}

.qc-reset-btn:hover,
.qc-reset-btn:focus,
.qc-reset-btn:active {
    color: #000000;             
    background-color: #ffffff !important; 
    border-color: #ff7f00 !important;     
    box-shadow: none !important;         
}



/*QC DEFECTIVE MODAL CSS*/
.qc-modal-header {
  background-color: #0b51b7;
  color: white;
}

.qc-modal-title {
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
}

.qc-modal-max {
  max-width: 550px;
  min-width: 350px;
}

.qc-product-info {
  background-color: #f3f3f5; 
  border-radius: 0.375rem;     
  padding: 1rem;               
  border: 1px solid #d1d5db;
}

.qc-product-label {
  color: #000000;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}


.qc-product-value {
  color: #000000;
  font-weight: 400;
  margin-left: 0.25rem;
}

.qc-defective-label {
  color: #dc3545;
  font-weight: 600;
}

.qc-defective-input {
  background-color: #f3f3f5; 
  color: #9999a6;             /* grayish text */
  border: 1.5px solid #dc3545; 
  border-radius: 0.375rem;
  padding-left: 1rem;
  font-weight: 600;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.qc-defective-input::-webkit-inner-spin-button,
.qc-defective-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qc-defective-input:focus,
.qc-defective-input:hover {
  border-color: rgba(112, 112, 0, 0.7); 
  outline: none;
}

.qc-defect-details-label {
  color: #dc3545;
  font-weight: 600;
}

.qc-defect-details-textarea {
  background-color: #ffffff;
  border: 1.5px solid #dc3545;
  color: #000000;
  border-radius: 0.375rem;
  font-size: 0.95rem;
  padding: 0.5rem;
  resize: vertical;
}

.qc-defect-details-textarea::placeholder {
  color: #bfbfbf;
}

.modal-footer .btn {
  min-width: 100px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

.qc-card {
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #bbd4ff;
  background-color: #e7f0ff;
}

.qc-progress-header {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qc-progress-title {
  font-weight: 600;
  margin: 0;
}

.qc-progress-percent {
  font-size: 1.5rem;
  color: #2563eb; 
  font-weight: 700;
}

.qc-progress {
  height: 12px;
  border-radius: 8px;
  background-color: #d9d9d9;
  margin-bottom: 1rem;
  overflow: hidden;
}

.qc-progress-bar {
  height: 12px;
  border-radius: 8px;
  background: linear-gradient(to right, #10b981, #059669); 
  transition: width 0.3s ease;
}

.qc-box {
  background: white;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  padding: 1rem 0;
}

.qc-box-label {
  margin-bottom: 0.25rem;
  color: #111827;
  font-weight: 600;
}

.qc-box-value {
  font-weight: 700;
}

.qc-box-total .qc-box-value {
  color: #111827; 
}

.qc-box-approved {
  background-color: #d1fae5; 
}

.qc-box-approved .qc-box-label,
.qc-box-approved .qc-box-value {
  color: #065f46; 
}

.qc-box-defective {
  background-color: #fee2e2; 
}

.qc-box-defective .qc-box-label,
.qc-box-defective .qc-box-value {
  color: #b91c1c; 
}

.qc-box-pending {
  background-color: #fef3c7; 
}

.qc-box-pending .qc-box-label,
.qc-box-pending .qc-box-value {
  color: #92400e; 
}


/*DEFECT REPORT */

/* Modal base */
.dr-modal {
  border-radius: 12px;
  padding: 0px;
}

/* Header */
.dr-header {
  border-bottom: none;
}

.dr-title {
  font-weight: 600;
}

.dr-subtitle {
  font-size: 0.9rem;
  color: #6b7280;
}

/* Common box */
.dr-box {
  padding: 15px;
  border-radius: 10px;
}

/* Green box */
.dr-box-green {
  width: 97%;
    margin-left: 10px;
  background: #e6f4ea;
  border: 1px solid #86efac;
}

/* Red box */
.dr-box-red {
  width: 97%;
 margin-left: 10px;
  background: #fde8e8;
  border: 1px solid #fca5a5;
}

/* Box title */
.dr-box-title {
 font-size: medium;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Badge */
.dr-badge {
  background: #fee2e2;
  color: #dc2626;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  margin-left: 5px;
}

/* Status */
.dr-status-open {
  background: #fee2e2;
  color: #dc2626;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
  margin-left: 5px;
}

/* Text */
.dr-text-muted {
  color: #4b5563;
  margin-top: -5px;
}

/* Close button */
.dr-close-btn {
   width: 50%;       
  background: #000;
  color: #fff;
  border-radius: 8px;
  display: block;      
  margin-left: auto; 
}
.dr-box p strong {
  color: #000; 
}
.qc-view-box {
  min-height: 60px;     
  padding: 0.5rem;       
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
  color: #000;          
}


/* .check-info{
    display:flex;
    align-items:center;
    width:100%;
}

.check-info input{
    margin-left:auto;
} */


.date-time-row{
    display:flex;
    align-items:center;
    width:100%;
}

.date-time-row span{
    margin-right:20px;
}

.mini-check{
    margin-left:auto;   
    width:15px;
    height:15px;
}





.card-completed{
    background:#f5f5f5;
    border:1px solid #ddd;
}

.card-completed .card-header,
.card-completed .checklist-item,
.card-completed .status-icon,
.card-completed small,
.card-completed span,
.card-completed label{
    opacity:0.6;
}

.mini-check{
    accent-color:#0d6efd;
    opacity:1 !important;
}
.card-completed .card-header{
    background:#ececec;
    border-bottom:1px solid #d9d9d9;
}

.card-completed h5{
    color:#6b7280;
}

.card-completed .progress-badge{
    background:#e5e7eb;
    color:#6b7280;
}


.pending-text{
    font-size:14px;
    font-weight:400;
    color:#6c757d;
}

.completed-badge{
    background:#198754;
    color:#fff;
    padding:4px 10px;
    border-radius:4px;
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.5px;
}




.right-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.status-icon{
    margin-right:0;
}

.qc-row{
    display:flex;
    align-items:center;
    gap:4px;
}

.qc-text{
    font-size:12px;
    white-space:nowrap;
}

/* .mini-check{
    width:12px;
    height:12px;
    margin:0;
} */


/*DESIGNER CRM CSS*/

.dc-description{
    font-size: 0.84rem;
    color: #6b7280;
    margin-bottom: 0.1rem;
    line-height: 1.5;
}


.dc-quick-wrap{
    background:#fff;
    border:1px solid #e8ebf3;
    border-radius:15px;
    padding:20px;
}

.dc-quick-heading{
    font-size:22px;
    font-weight:600;
    color:#000444;
    margin-bottom:18px;
}

.dc-action-card{
    background:#f8faff;
    border:1px solid #dfe7f7;
    border-radius:12px;

    height:110px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    transition:all .25s ease;
    cursor:pointer;
}

.dc-action-card:hover{
    background:#eef4ff;
    border-color:#0b51b7;

    transform:translateY(-2px);

    box-shadow:0 4px 12px rgba(11,81,183,.08);
}

.dc-action-icon{
    font-size:22px;
    color:#0b51b7;
    margin-bottom:10px;
    transition:.25s ease;
}

.dc-action-title{
    font-size:15px;
    font-weight:600;
    color:#303e67;
    margin:0;
    transition:.25s ease;
}

.dc-action-card:hover .dc-action-icon{
    color:#0b51b7;
}

.dc-action-card:hover .dc-action-title{
    color:#0b51b7;
}


@media(max-width:767px){

    .dc-quick-wrap{
        padding:15px;
    }

    .dc-quick-heading{
        font-size:20px;
    }

    .dc-action-card{
        height:90px;
    }

    .dc-action-icon{
        font-size:20px;
        margin-bottom:8px;
    }

    .dc-action-title{
        font-size:14px;
    }
}


.dc-list-card{
    background:#fff;
    border:1px solid #e8ebf3;
    border-radius:12px;
    padding:16px;
    height:100%;
}

.dc-list-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.dc-list-title{
    margin:0;
    font-size:18px;
    font-weight:600;
    color:#000444;
}

.dc-view-btn{
    text-decoration:none;
    color:#0d56d6;
    font-size:13px;
    font-weight:500;
    padding:6px 12px;
    border:1px solid #bedbff;
    border-radius:8px;
    transition:.25s ease;
}

.dc-view-btn:hover{
    background:#eff6ff;
    color:#0d56d6;
}

.dc-project-item{
    background:#f8faff;
    border:1px solid #dbe7ff;
    border-radius:10px;
    padding:14px 16px;
    margin-bottom:12px;
    transition:.25s ease;
}

.dc-project-item:last-child{
    margin-bottom:0;
}

.dc-project-item:hover{
    background:#eff6ff;
    border-color:#bedbff;
}

.dc-item-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.dc-project-name{
    margin:0 0 2px;
    font-size:16px;
    font-weight:600;
    color:#1f2937;
    line-height:1.4;
}

.dc-project-code{
    font-size:13px;
    color:#6b7280;
    font-weight:400;
}

.dc-project-meta{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:10px;
}

.dc-project-meta span{
    display:flex;
    align-items:center;
    gap:5px;
    font-size:13px;
    color:#6b7280;
}

.dc-project-meta i{
    font-size:15px;
}

.dc-status{
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:500;
    line-height:1.2;
}

.dc-status-blue{
    background:#dbeafe;
    color:#155dfc;
}

.dc-status-purple{
    background:#f3e8ff;
    color:#9333ea;
}

.dc-status-orange{
    background:#fff7ed;
    color:#ea580c;
}

.dc-status-green{
    background:#dcfce7;
    color:#16a34a;
}

.dc-status-gray{
    background:#f3f4f6;
    color:#4b5563;
}


@media(max-width:620px){

    .dc-list-card{
        padding:12px;
    }

    .dc-list-title{
        font-size:16px;
    }

    .dc-view-btn{
        font-size:12px;
        padding:5px 10px;
    }

    .dc-project-item{
        padding:12px;
    }

    .dc-item-top{
        flex-direction:column;
        gap:8px;
    }

    .dc-project-name{
        font-size:14px;
    }

    .dc-project-code{
        font-size:12px;
    }

    .dc-project-meta{
        gap:10px;
    }

    .dc-project-meta span{
        font-size:12px;
    }

    .dc-status{
        align-self:flex-start;
        font-size:11px;
    }
}


.dc-system-wrap{
    border:1px solid #bedbff;
    border-radius:15px;
    background:#ffffff;
    margin-bottom:24px;
    box-shadow:none;
}

.dc-system-wrap .card-body{
    padding:24px;
}

.dc-system-title{
    margin-bottom:18px;
    font-size:18px;
    font-weight:600;
    color:#000444;
}


.dc-overview-card{
    border-radius:12px;
    box-shadow:none;
    height:100%;
}

.dc-overview-card .card-body{
    padding:16px;
}

.dc-project-card{
    background:#eef4ff;
    border:1px solid #bedbff;
}


.dc-bom-card{
    background:#f5efff;
    border:1px solid #dcc4ff;
}


.dc-design-card{
    background:#eefbf3;
    border:1px solid #bceccc;
}


.dc-user-card{
    background:#fff7ed;
    border:1px solid #ffd9b3;
}


.dc-overview-label{
    font-size:13px;
    font-weight:600;
    margin-bottom:10px;
}

.dc-project-card .dc-overview-label{
    color:#155dfc;
}

.dc-bom-card .dc-overview-label{
    color:#9333ea;
}

.dc-design-card .dc-overview-label{
    color:#15803d;
}

.dc-user-card .dc-overview-label{
    color:#ea580c;
}

.dc-overview-count{
    margin:0;
    font-size:18px;
    font-weight:700;
}

.dc-project-card .dc-overview-count{
    color:#1e40af;
}

.dc-bom-card .dc-overview-count{
    color:#6b21a8;
}

.dc-design-card .dc-overview-count{
    color:#166534;
}

.dc-user-card .dc-overview-count{
    color:#9a3412;
}




.detail-box{
    min-height: 80px;
}


.dc-import-btn{
    background-color: #22b783;
    color: #fff !important;
    border: 1px solid #22b783;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    white-space: nowrap;

    padding: 6px 7px;
    line-height: 1.4;

    transition: all 0.3s ease;
}

.dc-import-btn:hover{
    background-color: transparent;
    color: #22b783 !important;
    border: 1px solid #22b783 !important;
}


.dc-export-2-btn{
    background: transparent;
    color: #22b783 !important;
    border: 1px solid #22b783;
    padding: 2px 11px;
    border-radius: 5px;
    transition: all .3s ease;
}

.dc-export-2-btn:hover,
.dc-export-2-btn:focus{
    background-color: #dff7ef !important; 
    color: #000 !important;
    border-color: #22b783 !important;
}


.designer-solar-value {
    font-family: 'Sora', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}


/* EXECUTION MODULE CSS NEW*/

.clickable-card,
.card{
    transition: all .3s ease;
}

.card:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}



.ex-dash-card{
    background:#fff;
    border:1px solid #eaf0f9;
    border-radius:16px;
    overflow:hidden;
    transition:.3s;
    height:100%;
}

.ex-dash-card:hover{
    box-shadow:0 10px 25px rgba(11,81,183,.08);
}

.ex-dash-header{
    padding:18px 22px;
    border-bottom:1px solid #eaf0f9;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.ex-dash-title{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:#000444;
}

.ex-dash-view-btn{
    color:#0b51b7;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.ex-dash-job-item{
    padding:18px 22px;
    border-bottom:1px solid #f1f5fa;
}

.ex-dash-job-top{
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.ex-dash-job-id{
    background:#eaf0f9;
    color:#0b51b7;
    padding:6px 12px;
    border-radius:8px;
    font-size:13px;
    font-weight:700;
}

.ex-dash-job-content{
    flex:1;
}

.ex-dash-job-name{
    color:#000444;
    font-size:16px;
    font-weight:700;
    margin-bottom:4px;
}

.ex-dash-job-location{
    color:#7081b9;
    font-size:14px;
    margin-bottom:10px;
}

.ex-dash-progress{
    height:6px;
    background:#eaf0f9;
    border-radius:50px;
    overflow:hidden;
}

.ex-dash-progress-bar{
    height:100%;
    background:#0b51b7;
    border-radius:50px;
}

.ex-dash-status{
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.ex-dash-status-blue{
    background:#eef4ff;
    color:#0b51b7;
}

.ex-dash-status-warning{
    background:#fff5e8;
    color:#d98a00;
}

.ex-dash-status-green{
    background:#e9f8ef;
    color:#198754;
}

.ex-dash-status-danger{
    background:#ffeaea;
    color:#dc3545;
}

.ex-dash-action-card{
    height:100%;
    min-height:130px;
    border:1px solid #eaf0f9;
    border-radius:14px;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:12px;
    transition:.3s;
    background:#fff;
}

.ex-dash-action-card:hover{
    border-color:#0b51b7;
    transform:translateY(-4px);
    box-shadow:0 10px 20px rgba(11,81,183,.10);
}

.ex-dash-action-card i{
    font-size:42px;
    color:#0b51b7;
}

.ex-dash-action-card span{
    color:#000444;
    font-size:15px;
    font-weight:600;
    text-align:center;
}


.ex-nav-section{
    display:flex;
    align-items:center;
    gap:8px;
    margin: 16px -12px 9px;
    padding: 0 15px;
    font-size: 13px;
    font-weight:700;
    color:#0b51b7;

    white-space:nowrap;   /* Add this */
}

.ex-nav-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#7081b9;
    flex-shrink:0;
}



.ex-sign-box{
    border:2px dashed #d7dce8;
    border-radius:12px;
    padding:15px;
    min-height:160px;
}

.ex-sign-box h6{
    color:#000444;
    font-weight:700;
    margin-bottom:20px;
}

.ex-sign-space{
    height:60px;
    border-bottom:1px solid #d7dce8;
    margin-bottom:12px;
}

.ex-sign-box p{
    margin-bottom:4px;
    color:#7081b9;
    font-size:13px;
}


.ex-doc-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.ex-doc-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 16px;
    border-radius:30px;

    border:2px solid #d9e2f2;
    background:#ffffff;

    color:#7081b9;
    font-size:13px;
    font-weight:600;

    cursor:pointer;
    transition:all .25s ease;
}

.ex-doc-pill:hover{
    border-color:#0b51b7;
    color:#0b51b7;
    background:#f5f8ff;
}

input[type="checkbox"]:checked + .ex-doc-pill{
    background:#eaf2ff;
    border-color:#0b51b7;
    color:#0b51b7;
    box-shadow:0 0 0 3px rgba(11,81,183,.08);
}


/* ==========================
   TOP ACTION BAR
========================== */

.ex-woi-back-link{
    color:#7081b9;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.ex-woi-btn-draft,
.ex-woi-btn-print,
.ex-woi-btn-submit{
    transition:all .25s ease;
}

/* Draft */

.ex-woi-btn-draft:hover{
    background:#ffffff;
    border-color:#cfd7e6;
    color:#000444;
    box-shadow:0 4px 12px rgba(0,4,68,.08);
}

/* Print PDF */

.ex-woi-btn-print:hover{
    background:#09439a;
    border-color:#07377d;
    color:#ffffff;
    box-shadow:0 6px 16px rgba(11,81,183,.25);
}

/* Submit */

.ex-woi-btn-submit:hover{
    background:#1da474;
    border-color:#188863;
    color:#ffffff;
    box-shadow:0 6px 16px rgba(34,183,131,.25);
}

.ex-woi-back-link:hover{
    color:#0b51b7;
}

.ex-woi-action-btns{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
}


/* ==========================
   BUTTONS
========================== */

.ex-woi-btn-draft{
    background:#f9f9f9;
    border:1px solid #e8ebf3;
    color:#000444;
    font-weight:600;
    padding:10px 18px;
    border-radius:8px;
}



.ex-woi-btn-print{
    background:#0b51b7;
    border:1px solid #0b51b7;
    color:#fff;
    font-weight:600;
    padding:10px 18px;
    border-radius:8px;
}



.ex-woi-btn-submit{
    background:#22b783;
    border:1px solid #22b783;
    color:#fff;
    font-weight:600;
    padding:10px 18px;
    border-radius:8px;
}




/* ==========================
   HEADER CARD
========================== */

.ex-woi-header-card{
    /* border-radius:16px;
    border:1px solid #e8ebf3; */
    overflow:hidden;
    box-shadow:none;
    
}

.ex-woi-code{
    color:#7081b9;
    font-size:11px;
    letter-spacing:1.5px;
    font-weight:600;
    text-transform:uppercase;
    margin-bottom:8px;
}

.ex-woi-main-title{
    color:#000444;
    font-size:34px;
    font-weight:700;
    margin-bottom:8px;
}

.ex-woi-subtitle{
    color:#7081b9;
    font-size:15px;
    line-height:1.6;
    margin-bottom:0;
}


/* ==========================
   COMPANY
========================== */

.ex-woi-logo-name{
    color:#0b51b7;
    font-size:34px;
    font-weight:800;
    line-height:1;
}

.ex-woi-company-name{
    color:#000444;
    font-size:13px;
    font-weight:700;
    margin-top:2px;
    line-height:1.4;
}

.ex-woi-company-desc{
    color:#7081b9;
    font-size:12px;
    line-height:1.5;
    margin-top:6px;
}

/* .ex-woi-header-line{
    height:3px;
    background:#22b783;
} */

/* .ex-woi-header-line{
    height:3px;
    background:#22b783;
    width:100%;
    margin:0;

    
} */

.ex-woi-header-card{
    position:relative;
    margin-bottom:2rem;
      /* margin:-20px -20px 2rem -20px; */
}

.ex-woi-header-line{
    position:absolute;
    left: 4px;
    right: 4px;
    bottom:0;
    height:3px;
    background:#22b783;
}


@media(max-width:767px){

    .ex-woi-action-btns{
        justify-content:flex-start;
        margin-top:10px;
    }

    .ex-woi-main-title{
        font-size:26px;
    }

    .ex-woi-logo-wrap{
        text-align:left !important;
    }

}





.wiof-card{
    border:1px solid #e8ebf3;
    /* border-radius:16px; */
    overflow:hidden;
    background:#fff;
}

/* HEADER */

.wiof-header{
    background:#fff;
}

.wiof-header-inner{
    padding:24px 24px 20px;
}

.wiof-header-line{
    width:100%;
    height:3px;
    background:#22b783;
    margin-top: -38px;
}

/* CODE */

.wiof-code{
    color:#7081b9;
    font-size:11px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:10px;
}

/* TITLE */

.wiof-title{
    font-size:24px;
    line-height:1.2;
    font-weight:700;
    color:#000444;
    margin-bottom:10px;
}

/* SUBTITLE */

.wiof-subtitle{
    color:#7081b9;
    font-size:15px;
    line-height:1.6;
    margin-bottom:0;
}

/* COMPANY */

.wiof-company{
    text-align:right;
}

.wiof-company-logo{
    font-size:22px;
    font-weight:800;
    color:#0b51b7;
    line-height:1;
}

.wiof-company-name{
    color:#000444;
    font-size:12px;
    font-weight:700;
    line-height:1.4;
}

.wiof-company-desc{
    color:#7081b9;
    font-size:11px;
    line-height:1.5;
}

/* FORM SECTION */

.wiof-section{
    margin-bottom:32px;
}

.wiof-section-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.wiof-section-line{
    width:18px;
    height:2px;
    background:#22b783;
}

.wiof-section-badge{
    width:22px;
    height:22px;
    border-radius:6px;
    background:#eaf8f2;
    color:#22b783;
    font-size:12px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.wiof-section-title{
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#000444;
    margin:0;
}

.ex-woi-logo-s{
    color:red;
}


.lm-material-head th{
    text-align:center;
    vertical-align:middle;
}



.srv-total-row{
    background:#fafbfb;
    font-weight:700;
}

.srv-grand-total-row{
    background:#f5f8ff;
    font-weight:700;
    color:#0b51b7;
}

.srv-action-col{
    text-align:center;
    vertical-align:middle;
}






/* ==========================
   DEPARTMENT RESPONSIBILITIES
========================== */

.jsn-dept-box{
    border:1px solid #e8ebf3;
    border-radius:12px;
    overflow:hidden;
    background:#ffffff;
    height:100%;
}

.jsn-dept-head{

    background:#eef4ff;

    color:#0b51b7;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    padding:14px 18px;

    border-bottom:1px solid #e8ebf3;
}

.jsn-dept-list{
    list-style:none;
    margin:0;
    padding:18px;
}

.jsn-dept-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:14px;

    color:#000444;

    font-size:14px;
}

.jsn-dept-list li:last-child{
    margin-bottom:0;
}

.jsn-dept-list input[type="checkbox"]{

    width:16px;

    height:16px;

    margin-top:2px;

    accent-color:#0b51b7;

    flex-shrink:0;
}


.jsn-scope-table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
}

.jsn-scope-table th,
.jsn-scope-table td{
    padding:8px;
}


.jsn-completion-table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
}

.jsn-completion-table th,
.jsn-completion-table td{
    padding:8px;
}

.jsn-completion-table{
    width:100%;
    border-collapse:collapse;
    text-align:left;
}

.jsn-completion-table th,
.jsn-completion-table td{
    padding:8px;
}

.jsn-completion-table thead{
    background:#f4f4f4;
}

.jm-note-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border:1px solid #f2d18a;
    background:#fff7e8;
    border-radius:10px;
    color:#9a6a00;
    font-size:14px;
    line-height:1.6;
}

.jm-note-box i{
    font-size:18px;
    color:#e0a126;
    flex-shrink:0;
}
.mc-dispatch-clearance{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border-radius:10px;

    background:#e8f8ee;
    border:1px solid #b8e6c7;

    color:#198754;
    font-weight:600;
}

.mc-dispatch-clearance i{
    font-size:18px;
    color:#198754;
}


.mp-note-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 18px;
    border-radius:10px;

    background:rgba(234, 193, 113, 0.12);
    border:1px solid rgba(234, 193, 113, 0.45);

    color:#9b6a00;
    font-size:14px;
    line-height:1.6;
}

.mp-note-box i{
    font-size:20px;
    color:#d4a017;
    flex-shrink:0;
}


.badge.bg-light{
    background: rgba(22, 62, 112, 0.06) !important;
    border: 1px solid rgba(22, 62, 112, 0.15) !important;
    color: var(--primary-color) !important;
    font-weight: 500;
}

.leftbar-tab-menu .main-icon-menu .main-icon-menu-body .nav.nav-tabs .nav-link {
    border: none;
    position: relative;
    padding: 0;
    color: #fff;
    width: 50px;
    height: 36px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #1256b9;
    border-radius: 5px;
    font-weight: 500;
}