@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";

:root {
    --color-primary-pink: #E21683;
    --color-secondary-pink: #EC8EC4;
    --color-tertiary-pink: #cb1476;
    --color-primary-blue: #004A98;
    --color-secondary-blue: #CADDF4;
    --color-tertiary-blue: #003b7a;
    --color-black-01: #484848;
    --color-black-02: #898989;
    --color-black-03: #B9B9B9;
    --color-red-01: #E25D7D;
    --color-red-02: #cb5471;
    --color-green-01: #51C285;
    --color-green-02: #49af78;
    --color-yellow-01: #F7BE51;
    --color-yellow-02: #deab49;

}

/*IBMPlexSansThai font*/
@font-face {
    font-family: 'IBMPlexSansThai 200';
    src: url('../../fonts/IBMPlexSansThai/IBMPlexSansThai-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'IBMPlexSansThai 300';
    src: url('../../fonts/IBMPlexSansThai/IBMPlexSansThai-Light.ttf');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'IBMPlexSansThai 400';
    src: url('../../fonts/IBMPlexSansThai/IBMPlexSansThai-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'IBMPlexSansThai 500';
    src: url('../../fonts/IBMPlexSansThai/IBMPlexSansThai-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'IBMPlexSansThai 600';
    src: url('../../fonts/IBMPlexSansThai/IBMPlexSansThai-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'IBMPlexSansThai 700';
    src: url('../../fonts/IBMPlexSansThai/IBMPlexSansThai-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Circular Std 500';
    src: url('../../fonts/CircularFontFamily/AvenirLTStd-Black.otf');
    font-weight: 500;
    font-style: normal;
}

.text-blue {
    color: var(--color-primary-blue) !important;
}

.text-pink {
    color: var(--color-primary-pink) !important;
}

.text-green {
    color: #51C285 !important;
}

.text-red {
    color: red !important;
}

.text-red-01 {
    color: var(--color-red-01) !important;
}

.text-black {
    color: #000 !important;
}

.text-black-01 {
    color: var(--color-black-01) !important;
}

.text-black-02 {
    color: var(--color-black-02) !important;
}

.text-black-03 {
    color: var(--color-black-03) !important;
}

.text-black-700 {
    color: #202A45 !important;
}

.text-black-800 {
    color: #273046 !important;
}

.secondary-heading {
    font-family: 'IBMPlexSansThai 700';
    font-size: 20px;
    line-height: 33px;
}


/* space */
.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

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

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

/* btn */
.btn {
    padding: 0;
    border: 0;
    box-shadow: 0px 1px 0px rgba(22, 29, 37, 0.102);
    border-radius: 5px;
    font-family: 'IBMPlexSansThai 700';
    font-size: 14px;
    line-height: 23px;
}

.btn-primary-blue {
    background: var(--color-primary-blue);
    color: #FFFFFF;
}

.btn-primary-blue:hover,
.btn-primary-blue:active {
    color: #fff;
    background-color: var(--color-tertiary-blue);
}


.btn-primary-pink {
    background: var(--color-primary-pink);
    color: #FFFFFF;
}

.btn-primary-pink:hover,
.btn-primary-pink:active {
    color: #fff;
    background-color: var(--color-tertiary-pink);
}

.btn-red-01 {
    background: var(--color-red-01);
    color: #FFFFFF;
}

.btn-red-01:hover,
.btn-red-01:active {
    color: #fff;
    background-color: var(--color-red-02);
}

.btn-green-01 {
    background: var(--color-green-01);
    color: #FFFFFF;
}

.btn-green-01:hover,
.btn-green-01:active {
    color: #fff;
    background-color: var(--color-green-02);
}

.btn-yellow-01 {
    background: var(--color-yellow-01);
    color: #FFFFFF;
}

.btn-yellow-01:hover,
.btn-yellow-01:active {
    color: #fff;
    background-color: var(--color-yellow-02);
}

.btn-border-red {
    color: var(--color-red-01);
    background-color: #FFFFFF;
    border: 1px solid var(--color-red-01);
}

.btn-border-red:hover,
.btn-border-red:active {
    background-color: var(--color-red-01);
    color: #FFFFFF;
}

.btn-border-primary-blue {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color-primary-blue);
    border-radius: 5px;
    font-family: 'IBMPlexSansThai 600';
    font-size: 14px;
    line-height: 23px;
    color: var(--color-primary-blue);
    transition: all .3s;
    background-color: #fff;
}

.btn-border-primary-blue:hover {
    background-color: var(--color-primary-blue);
    color: #fff;
}

.btn-cancel {
    background: #fff;
    color: #9095A2;
    border: 1px solid #9095A2;
    width: 85px;
    height: 36px;
}

.btn-cancel:hover,
.btn-cancel:active {
    color: #000;
    border: 1px solid #000;
    background-color: #fff;
}


/* tab-bar */
.nav-tabs {
    border-color: #E0E2E5;
}

.nav-tabs .nav-link {
    padding: 0;
    border: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    line-height: 23px;
    color: #888888;
    margin-right: 20px;
    cursor: pointer;
    transition: all .3s;
}

.nav-tabs .nav-link:nth-child(1) {
    margin-left: 20px;
}

.nav-tabs .nav-link.active {
    font-family: 'IBMPlexSansThai 700';
    color: #1A3D92;
    border-color: #1A3D92;
}

.nav-link:hover {
    color: #1A3D92;
    border-color: #1A3D92;
}

.nav-tabs .nav-link.link2.active {
    color: var(--color-primary-pink);
    border-color: var(--color-primary-pink);
}

.nav-link.link2:hover {
    color: var(--color-primary-pink);
    border-color: var(--color-primary-pink);
}

.tab-content {
    padding: 10px 20px 25px;
}

.tab-content.content2 {
    padding: 10px 0 0 0;
}


/* form */
.form-control {
    font-family: 'IBMPlexSansThai 400';
    border: 1px solid #c8ccce;
    border-radius: 5px;
    height: 40px;
    font-size: 14px;
    padding-left: 12px;
    margin-top: 5px;
}

.form-label {
    font-family: 'IBMPlexSansThai 500';
    font-size: 16px;
    line-height: 26px;
    color: var(--color-primary-blue);
}

.invalid-feedback {
    font-size: 14px;
}

/* form-job */
.form-job-info {
    font-family: 'IBMPlexSansThai 600';
    font-size: 18px;
    line-height: 30px;
    color: #484848;
}

.form-id {
    width: 235px;
}

.form-max-width {
    width: 277px;
}

.form-area {
    width: 80px;
}

/* table */
.col-1.head {
    max-width: 50px;
}

.col.head {
    max-width: 40px;
}

.table-style {
    text-align: left;
    border-collapse: collapse;
    margin-top: 15px;
}

.thead-style tr {
    padding: 15px 0 15px 20px;
    font-family: 'Circular Std 500';
    font-size: 14px;
    line-height: 15px;
    color: #435175;
}

.tbody-style tr {
    padding: 25px 0 25px 20px;
    border-top: 1px solid #E0E2E5;
    font-size: 14px;
    line-height: 23px;
    color: var(--color-black-01);
}

.tbody-style tr:last-child {
    border-bottom: 1px solid #E0E2E5;
}

.dataTables_length {
    display: none;
}

.dataTables_paginate {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

.paginate_button {
    display: none;
}

.paginate_button.previous,
.paginate_button.next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background-color: #F5F5F6;
    border: 1px solid #BABFC3;
}

.paginate_button.previous.disabled,
.paginate_button.previous.disabled svg,
.paginate_button.next.disabled,
.paginate_button.next.disabled svg {
    fill: #aaa;
    cursor: auto;
}

.paginate_button.previous {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 0;
}

.paginate_button.next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* section-table */
.section-table {
    background-color: #fff;
    margin-top: 20px;
    margin-bottom: 55px;
    padding-top: 10px;
    padding-bottom: 25px;
    border: 1px solid #F0F0F0;
    border-radius: 10px;
}

.searchDeviceId,
.company,
.jobId,
.sortBy {
    width: 100%;
    padding: 6.5px 15px;
    font-size: 14px;
    line-height: 23px;
    color: #888888;
    border: 1px solid #D2D4DA;
    border-radius: 5px;
    height: 36px;
}

.searchDeviceId {
    padding-left: 42px;
    background-image: url("../../images/icon/search.svg");
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-size: 16px 16px;
}

.searchDeviceId::placeholder {
    font-family: 'IBMPlexSansThai 400';
    font-weight: normal;
}

.company,
.jobId,
.sortBy {
    padding: 6.5px 15px 6.5px 10px;
    color: #435175;
}

select,
.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 5px;
}

.searchDeviceId:focus,
select:focus {
    outline: 1.5px solid black;
}

.gx-2 {
    --bs-gutter-x: 10px;
}

.dataTables_filter {
    display: none;
}

.dataTables_empty {
    padding: 20px;
}