.detail-box {
    /* justify-content: space-between; */
    display: flex;
    width: 100%;
    background-color: white;
}
.supplier-list {
    font-size: 0.9rem;
    font-weight: bold;
}
.company-click{
    color: #0e5ef5;
    cursor: pointer;
}
.d-box1 {
    width: 20%;
    min-width: 280px;
    /* padding-top: 3vh; */
    /* background-color: #7ba735; */
    -moz-box-shadow:   -11px 0px 13px 0px #0000002b;
    -webkit-box-shadow: -11px 0px 13px 0px #0000002b;
    box-shadow: -11px 0px 13px 0px #0000002b;
}
.d-box2 {
    width: 80%;
    background-color: white;
    padding: 3vh 20px 0px 20px;
    background-image: linear-gradient(#F0F0F0, #ffffff);
    max-width: 1160px;
    padding-right: 0;
}
.l-menu {
    background-image: linear-gradient(#97C058, white 50%);
    -moz-box-shadow:    inset -13px 0px 18px 0px #00000038;
    -webkit-box-shadow: inset -13px 0px 18px 0px #00000038;
    box-shadow:inset -13px 0px 18px 0px #00000038;
    max-height: 100%;
    margin-bottom: 5rem;

}
.l-menu a {
    padding: 10px 45px 10px;
    text-decoration: none;
    color: #3d671a;
    display: flex;
    font-size: 0.7vw;
    flex-direction: column;
    border-bottom: 1px solid #93c648;
    font-weight: bold;
}
.l-menu a:hover {
    background-color: #4f8522!important;
    color: white!important;
}
.l-menu a.active {
    background-color: #4f8522!important;
    color: white!important;
}
.l-menu a:focus {
    background-color: #fff;
    color: #93c648;
}
.d-title {
    align-items: center;
    display: flex;
    justify-content: center;
}
.d-title p {
    font-size: 42px;
    /* color: #fff; */
    color: #3d671a;
    font-weight: 600;
}
.d-title-img {
    margin-right: 20px;
    width: 90px;
}
.d-action {
    display: flex;
    justify-content: space-between;
    /*background-image: linear-gradient(#acadad, #dddede);*/
    height: 45px;
    padding-top: 15px;
    padding-left: 15px;
    background:#F6F6F6
}
.d-sel-gup {
    justify-content: center;
    display: flex;
}
.d-sel-gup p {
    font-size: 15px;
    color: #044C3A;
    margin-top: 3px;
}
.se-con {
    margin-left: 10px;
    height: 17px;
    width: 40px;
}
.se-con3{
    margin-left: 10px;
}
.d-search {
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    padding: 5px;
    background-color: #041d139e;
    color: #fff;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDUxMi4wMDUgNTEyLjAwNSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8Zz4KCQk8cGF0aCBkPSJNNTA1Ljc0OSw0NzUuNTg3bC0xNDUuNi0xNDUuNmMyOC4yMDMtMzQuODM3LDQ1LjE4NC03OS4xMDQsNDUuMTg0LTEyNy4zMTdjMC0xMTEuNzQ0LTkwLjkyMy0yMDIuNjY3LTIwMi42NjctMjAyLjY2NyAgICBTMCw5MC45MjUsMCwyMDIuNjY5czkwLjkyMywyMDIuNjY3LDIwMi42NjcsMjAyLjY2N2M0OC4yMTMsMCw5Mi40OC0xNi45ODEsMTI3LjMxNy00NS4xODRsMTQ1LjYsMTQ1LjYgICAgYzQuMTYsNC4xNiw5LjYyMSw2LjI1MSwxNS4wODMsNi4yNTFzMTAuOTIzLTIuMDkxLDE1LjA4My02LjI1MUM1MTQuMDkxLDQ5Ny40MTEsNTE0LjA5MSw0ODMuOTI4LDUwNS43NDksNDc1LjU4N3ogICAgIE0yMDIuNjY3LDM2Mi42NjljLTg4LjIzNSwwLTE2MC03MS43NjUtMTYwLTE2MHM3MS43NjUtMTYwLDE2MC0xNjBzMTYwLDcxLjc2NSwxNjAsMTYwUzI5MC45MDEsMzYyLjY2OSwyMDIuNjY3LDM2Mi42Njl6IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BhdGg+Cgk8L2c+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPC9nPjwvc3ZnPg==");
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right 0.7em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: 0.85em auto, 100%;
}
.se-con2 {
    margin-left: 10px;
    height: 17px;
    width: 140px;
}
.select-css {
    outline: none;
    border: none;
    display: block;
    font-size: 15px;
    color: #4f8522;
    line-height: 1.3;
    padding: 5px;
    width: 100%;
    max-width: 200px; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #a4a5a5;
    /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
      for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

    */
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDQ1MS44NDcgNDUxLjg0NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8cGF0aCBkPSJNMjI1LjkyMywzNTQuNzA2Yy04LjA5OCwwLTE2LjE5NS0zLjA5Mi0yMi4zNjktOS4yNjNMOS4yNywxNTEuMTU3Yy0xMi4zNTktMTIuMzU5LTEyLjM1OS0zMi4zOTcsMC00NC43NTEgICBjMTIuMzU0LTEyLjM1NCwzMi4zODgtMTIuMzU0LDQ0Ljc0OCwwbDE3MS45MDUsMTcxLjkxNWwxNzEuOTA2LTE3MS45MDljMTIuMzU5LTEyLjM1NCwzMi4zOTEtMTIuMzU0LDQ0Ljc0NCwwICAgYzEyLjM2NSwxMi4zNTQsMTIuMzY1LDMyLjM5MiwwLDQ0Ljc1MUwyNDguMjkyLDM0NS40NDlDMjQyLjExNSwzNTEuNjIxLDIzNC4wMTgsMzU0LjcwNiwyMjUuOTIzLDM1NC43MDZ6IiBmaWxsPSIjZmZmZmZmIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIiBjbGFzcz0iIj48L3BhdGg+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPC9nPjwvc3ZnPg==");
    background-repeat: no-repeat, repeat;
    /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
    background-position: right 0.4em top 50%, 0 0;
    /* icon size, then gradient */
    background-size: 0.65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
    display: none;
}
/* Hover style */

/* Focus style */

/* Set options to normal weight */
.select-css option {
    font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css,
:root:lang(ar) .select-css,
:root:lang(iw) .select-css {
    background-position: left 0.7em top 50%, 0 0;
    padding: 0.6em 0.8em 0.5em 1.4em;
}

/* Disabled styles */

.select-css:disabled:hover,
.select-css[aria-disabled="true"] {
    border-color: #aaa;
}

.d-btn-add {
    margin-top: -5px;
    margin-right: -20px;
    margin-left: 20px;
    cursor: pointer;
    background-position-x: 1px;
    background-position-y: 5px;
    width: 90px;
    height: 40px;
    text-align: center;
    background: url(../image/icon-add2.png) no-repeat center left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border: none;
    background-size: 40%;
    background-color: #239f7200;
    color: #a4a5a5;
    font-size: 1rem;
    padding-left: 20px;
}
.btn-search{
    font-size: 0.7rem;
}
.d-btn-export{
    margin-top: -5px;
    margin-right: -20px;
    margin-left: 20px;
    cursor: pointer;
    background-position-x: 1px;
    background-position-y: 5px;
    width: 90px;
    height: 40px;
    text-align: center;
    background: url(../image/icon-export-white.png) no-repeat center left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border: none;
    background-size: 40%;
    background-color: #239f7200;
    color: #a4a5a5;
    font-size: 1rem;
    padding-left: 20px;
}


.d-btn-import {
    margin-right: -5px!important;
    padding-left: 45px!important;
}

.d-btn-delete {
    margin-top: -5px;
    margin-right: 10px;
    cursor: pointer;
    background-position-x: 1px;
    background-position-y: 5px;
    width: 90px;
    height: 40px;
    text-align: right;
    background: url(../image/icon-del2.png) no-repeat center left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border: none;
    background-size: 40%;
    background-color: #239f7200;
    color: #a4a5a5;
    font-size: 1rem;
}
.d-btn-order {
    margin-top: -5px;
    /* margin-right: -20px; */
    /* margin-left: 20px; */
    cursor: pointer;
    color:#a4a5a5 ;
    background-position-x: 1px;
    background-position-y: 5px;
    width: 90px;
    height: 40px;
    text-align: center;
    /* background: url(../image/icon-add2.png) no-repeat center left; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    border: none;
    background-size: 40%;
    background-color: #239f7200;
    font-size: 1rem;
    /* padding-left: 20px; */
}
.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}
.some-txt {
    margin: 0px 5px;
    color: #93c648;
}
.ac-btn-con {
    display: flex;
    justify-content: space-between;
}
.d-table-con {
    width: 100%;
    /* margin-top: 20px; */
    overflow: auto;
    display: block;
    max-width: 1120px;
}
.d-table-con table {
    width: 100%;
    border-collapse: collapse;
}
.d-tb-tr {
    text-align: left;
    /* background: #7c7b7b; */
    color: #ffffff;
    /*background-image: linear-gradient(#737373, #9E9E9E);*/
    background:#A6A4A5;
}
.d-tb-tr th {
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 14px;
}
.d-tb-tr th span{
    font-size: 14px;
}
/* table tr td {
    vertical-align: baseline;
} */

.toggle {
    --uiToggleBorderWidth: var(--toggleBorderWidth, 2px);
    --uiToggleColor: var(--toggleColor, #93c648);

    display: var(--toggleDisplay, inline-flex);
    position: relative;
}

.toggle__input {
    /*
    The pattern by Sara Soueidan https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
    */
    width: var(--uiToggleSize);
    height: var(--uiToggleSize);
    opacity: 0;


    top: 0;
    left: 0;
    margin: 10;
}

/*
  1. Calculation of the gap for the custom checkbox
  */

.toggle__label {
    display: inline-flex;
    min-height: var(--uiToggleSize);
    padding-left: calc(var(--uiToggleSize) + var(--toggleIndent, 0.4em));
}

.toggle__input:not(:disabled) ~ .toggle__label {
    cursor: pointer;

}

/*
  1. Ems helps to calculate size of the checkbox
  */

.toggle__label::after {
    content: "";
    box-sizing: border-box;
    width: 1em;
    height: 1em;
    font-size: var(--uiToggleSize); /* 1 */

    background-color: #fff;
    border: var(--uiToggleBorderWidth) solid var(--uiToggleColor);

    position: absolute;
    left: 0;
    top: 0;

}

.toggle__input:checked ~ .toggle__label::after {
    background-color: var(--uiToggleColor);
}

.toggle__text {
    margin-top: auto;
    margin-bottom: auto;
}

/*
  The arrow size and position depends from sizes of square because I needed an arrow correct positioning from the top left corner of the element toggle

  1. Ems helps to calculate size and position of the arrow
  */

.toggle__label::before {
    content: "";
    width: 0;
    height: 0;
    font-size: var(--uiToggleSize); /* 1 */

    border-left-width: 0;
    border-bottom-width: 0;
    border-left-style: solid;
    border-bottom-style: solid;
    border-color: var(--toggleArrowColor, #fff);

    position: absolute;
    top: 0.5428em;
    left: 0.25em;
    z-index: 3;

    transform-origin: left top;
    transform: rotate(-40deg) skew(10deg);
}

.toggle__input:checked ~ .toggle__label::before {
    --uiToggleArrowWidth: var(--toggleArrowWidth, 2px);

    width: 0.4em;
    height: 0.2em;
    border-left-width: var(--uiToggleArrowWidth);
    border-bottom-width: var(--uiToggleArrowWidth);
}

/*
  The animation of switching states
  */

.toggle__input:not(:disabled) ~ .toggle__label::after {
    will-change: background-color;
    transition: background-color 0.2s ease-out;
}
.d-td1 {
    padding: 27px 10px 0px 0px;
    display: flex;
    margin-left: 10px;
}
.d-td1 p {
    font-size: 16px;
    margin-left: 10px;
    color: #333333;
}
.d-td2 {
    color: #fff;
    padding: 16px;
}
.d-td3 {
    padding: 10px 0px;
}
.d-td3 div {
    border-left: 1px solid #93c648;
    padding: 0px 10px;
}
.d-tr-td td p {
    font-weight: bold;
}
.txt-td1 {
    color: #4f8522;;
    word-break: break-word;
    font-size: 14px;
}
.txt-td2 {
    color: #333333;
    font-weight: bold;
    word-break: break-word;
    font-size: 13px;
}
.txt-td3 {
    color: rgb(71, 71, 71);
}
#d-name {
    border: none;
}
/* .ct-b1 tr {
    background-color: rgba(0, 0, 0, 0.178);
} */
.ct-b1 tr:nth-child(even) {
    border-bottom: 1px solid #ffffff5e;
    border-top: 1px solid #ffffff5e;
    background-color: #dddddd3b;
}

.d-th1 {
    width: 10%;
}
.d-th2 {
    width: 15%;
}
.d-th3 {
    width: 21%;
}
.d-th4 {
    width: 15%;
}
.d-th5 {
    width: 10%;
}
.d-th6 {
    width: 13%;
}
.d-th7 {
    width: 3%;
}
.d-th8 {
    width: 17%;
}
.d-tr-td{
    margin-top: 10px;
    margin-bottom: 10px;
}
.d-tr-td-w {
    height: 500px;
    font-weight: bold;
}
.d-tb-mob {
    justify-content: center;
    background-color: #fff;

    width: 100%;
    left: 0;
}
tbody .d-tr-td:nth-of-type(even){
    background: #dadada;
}
.d-tb-th2-1,
.d-tb-th2-2,
.d-tb-th2-3,
.d-tb-th2-4 {
    text-align: left;
}
.d-tb-th2-1 {
    padding-left: 20px;
    width: 10%;
}
.d-tb-th2-2 {
    padding-left: 10px;
    width: 16%;
}
.d-tb-th2-3 {
    width: 5%;
}
.d-tb-th2-4 {
    width: 60%;
}

.d-tb-mob table {
    width: 100%;
}
#tb-nm-op {
    color: rgb(71, 71, 71);
}
#tb-nm-op span {
    color: #93c648;

    font-size: 20px;
}
.d-tb-mob {
    display: none;
    z-index: auto;
}
.mo-tabbar {
    display: none;
    padding: 30px;
    background-color: #93c648;
}
.d-mo-bar {
    justify-content: space-between;
    display: flex;

    align-items: center;
}
.mo-input {
    margin-top: 15px;
}
.mo-page-name {
    font-size: 30px;
    color: #fff;
    font-weight: 600;
    margin-left: 10px;
}
.mo-input {
    align-items: center;
    justify-content: space-between;
    display: flex;
}
.moselect {
    width: 100%;
}
.mo-bar-ic {
    color: #fff;
     font-size: 50px;
     padding: 0px 10px;
}
.mo-bar-ic2 {
    color: #fff;
     font-size: 25px;
     padding: 0px 21px;
     margin-left: 7px;
}

.icon-menu-2 {
    color: #fff;
    right: 15px;
    cursor: pointer;
    top: 17px;
    font-size: 35px;
    background-color: transparent;
    border: none;
}

.sidenav {
    height: 0%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 5;
    top: 7%;
    left: 0;
    background-color: #f9f9f9;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }

  .sidenav a {
    text-decoration: none;
    font-size: 20px;
    padding-left: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #818181;
    display: block;
    font-weight: bold;
    transition: 0.3s;
  }

  .sidenav a:hover {
    color: #518A0B;

  }

    .sidenav a.active{
        color: #ffffff;
        background: #518A0B;
    }

  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

  /* Style the search field */
form.searchForm input[type=text] {
    padding: 5.5px;
    font-size: 16px;
    float: left;
    width: 70%;
    background: #a4a5a5;
    border: unset;
  }

  /* Style the submit button */
  form.searchForm button {
    float: left;
    width: 20%;
    padding: 5.5px;
    background: #a4a5a5;
    color: white;
    font-size: 16px;
    /* border: 1px solid grey; */
    border-left: none; /* Prevent double borders */
    cursor: pointer;
    border: unset;
  }

  form.searchForm button:hover {
    background: #5a5a5a;
  }

  /* Clear floats */
  form.searchForm::after {
    content: "";
    clear: both;
    display: table;
  }

  .sortable:hover{
    border-bottom: 1px solid #fff;
    cursor: pointer;
  }

  .p-20 {
      padding-top: 10vh;
  }

    .sub-header {
        text-align: center;
        margin: 0px;
        background-color: #d5d5d5;
        padding: 10px 0;
    }

    .d-td-border {
        vertical-align: baseline;
        border-left: 1px solid #93c648;
        padding: 0 5px;
    }

    input[type=date] {
        background: #a4a5a5;
        color: #044C3A;
        border: none;
        padding: 0 5px;
        height: 30px;
    }

    .list_menu{
    list-style: none;
    }

    .list_menu > li {
        padding-top: 10px;
        padding-bottom: 10px;
        border: 1px solid;
        margin-top: 5px;
        font-size: 14px;
        background: #F4F4F4;
        cursor: row-resize;
        padding-left: 10px;
    }



@media (max-width: 1440px) {

    .d-box1 {
        width: 15%;
        min-width: 230px;
    }
    .d-tb-tr th{
        font-size: 13px;
    }
    .d-sel-gup p {
        font-size: 14px;
    }

    .d-box2 {
        width: 80%;
        max-width: 890px!important;
    }
    .d-table-con {
        max-width: 890px!important;
    }

    .d-box2 table{
        font-size: 0.8rem;
    }

    .d-box2 table tr td select{
        font-size: 0.8rem;
    }

    .l-menu a {
        font-size: 1vw;
    }
    /* .d-box1 {
        width: 20%;
    } */
    .d-tb-tr th span {
        font-size: 13px;
    }
    .d-td1 p {
        font-size: 13px;
        margin-left: 10px;
        color: #333333;
    }
    .txt-td1 {
        font-size: 13px;
    }
    .txt-td2 {
        font-size: 13px;
    }
}
@media (max-width: 1280px) {
    .d-box1 {
        width: 15%;
        min-width: 188px;
    }
    .d-tb-tr th{
        font-size: 11px;
    }
    .d-sel-gup p {
        font-size: 14px;
    }

    .d-box2 {
        width: 80%;
        max-width: 890px!important;
    }
    .d-table-con {
        max-width: 890px!important;
    }

    .d-box2 table{
        font-size: 0.8rem;
    }

    .d-box2 table tr td select{
        font-size: 0.8rem;
    }

    .l-menu a {
        font-size: 1vw;
    }
    /* .d-box1 {
        width: 20%;
    } */
    .d-tb-tr th span {
        font-size: 11px;
    }
    .d-td1 p {
        font-size: 11px;
        margin-left: 10px;
        color: #333333;
    }
    .txt-td1 {
        font-size: 11px;
    }
    .txt-td2 {
        font-size: 11px;
    }
}
@media (max-width: 1024px) {
    .mo-tabbar {
        position: fixed;
        right: 0;
        left: 0;
        display: inline;
        z-index: 3;
        padding-top: 13%;
        top: 0;
    }
    .detail-box {
        flex-direction: column;
    }
    .d-tb-mob {
        padding-top: 50vw;
        display: inline;
        height: 100vh;
        overflow: scroll;
    }
    .d-box1 {
        display: none;
    }
    .d-box2 {
        display: none;
    }
    table {
        color: rgb(71, 71, 71);
    }
    .tb-j {
        padding: 40px;

    }

    .tb-j:nth-child(even) {
        border-top: 1px solid #ffffff5e;
        background-color: #13533b1f;
    }
    .d-sel-gup{height: 25px; margin-left: 20px;}
    .d-btn-add{width: 35px;}
    .d-btn-delete{width: 37px;}
    .select-css,.d-search {
        padding: 10px;
    }
}
@media (max-width: 768px) {
    .user-menu{

    }
    .mo-page-name {
        font-size: 5vw;
        width: 228px;
    }
    .tb-j {
        padding: 20px;
    }
    .mo-tabbar{
        padding-top: 20%;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
    .d-tb-mob table tr {
        vertical-align: initial!important;
    }
    .d-tb-mob table tr th {
        padding-top: 5px;
    }
    .d-btn-add {
        background: url(../image/icon-add-white.png) no-repeat center left;
        width: 60px;
        margin-right: -15px;
        height: 35px;
        color: #ffffff;
    }

    .d-btn-delete {
        background: url(../image/icon-del-white.png) no-repeat center left;
        width: 72px;
        height: 35px;
        color: #ffffff;
    }
    .select-css {
        max-width: unset;
        background: #ffffff;
    }
    .select-css, .d-search{
        background: #ffffff;
    }
}
@media (max-width: 414px) {
    .tb-j {
        padding: 10px;
    }
    table {
        font-size: 11px;
    }

    #tb-nm-op span {
        font-size: 14px;
    }
    .d-tb-th2-1 {
        width: 5%;
        padding-left: 5px;
    }
    .mo-page-name {
        font-size: 18px;
    }
    .icon-menu-2{
        font-size: 25px;
    }
    .d-mo-bar.aa{
        padding-bottom: 10px;
        border-bottom: 0.5px solid #ffffff;
    }
}

.select-css-mobile{
    font-size: 15px;
    height: 30px;
    width: 100%;
}
.search_input{
    width: 100%;
    height: 25px;
    font-size: 17px;
}
.search_icon{
    position: absolute;
    background: none;
    border: none;
    font-size: 20px;
    top: 0;
    right: 10px;
}
.link_btn{
    text-decoration: none;
}
.input_date{
    width:100%;
    background: #ffffff !important;
}
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .nav-item {
        margin-right: 3px;
    }
    .col-service p{
        font-size: 0.7rem;
    }
    .primary-bond-product {
        height: 13rem;
    }
    .quote-container{
        height: 13rem;
    }

    .quote-container p {
        font-size: 1.2rem !important;
        margin-top: -55px;
        font-family: "Kanit";
        margin-bottom: -16px;
        font-weight: bolder;
    }
    .header_title {
        position: absolute;
        top: 3rem;
        right: 5rem;
        text-align: right;
    }
    .quote {
        font-family: 'Andale Mono';
        color: #B88346;
        font-size: 4rem !important;
    }
    .big_text {
        font-size: 5rem;
        line-height: 5rem;
    }
    .item-slide {
        height: 16rem !important;
    }
    .owl-stage-outer {

    }
    .header_section {
        font-size: 2rem;
    }
    .owl-carousel {

    }
    .product-box-detail-container .product-box-detail{
        height: 14rem;
        max-height: 14rem;
    }

    .title-product{
        font-size: 1.5rem;
    }
    .product-detail {
        font-size: 1.1rem;
        margin-bottom: 0.7rem;
        margin-top: -1.2rem;
    }

    .button-readmore{

    }
    .product-box-detail .left-btn{

    }
    .product-box-detail .right-btn{

    }
    .gallery-item a img{
        width: 70% !important;
    }
    .frame-item {
        padding: 0.5rem;
    }

    .reward-item-single-thumb img {
        width: 9rem !important;
    }

    #media-slide > div.owl-dots {
        position: relative;
        bottom: -7.4rem;
    }
    #media-slide > div.owl-stage-outer > div > div > div > div > iframe{
        height: 140px !important;
    }
    .product-item-label {
        width: fit-content;
        padding: 2rem;
        display: flex;
        width: 27rem;
        height: 15rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 2rem;
    }
    .product-item-label-small{
        width: 24rem;
    }
    .card-custom{
        width: 90%;
    }
    .product-mutual-item-label {
        width: 24rem;
        height: 16rem;
    }
    .left-media-button {
        left: -0.2rem;
        bottom: 2.4rem;
    }
    .right-media-button {
        right: -0.9rem;
        bottom: 2.4rem;
    }
    .row-product-contact-left {

    }

    .small-text {
        font-size: 1.4rem;
    }
    .small-text-eng {
        font-size: 1.4rem;
    }
    .hidden-desktop{

    }
    .primary-bond-item{
        height: 12rem;
        font-size: 1.2rem;
    }
    .line-item{
        height: 20rem;
    }
    .header_service {
        font-size: 2rem;
        line-height: 2rem;
    }
    .title-card-product {
        font-size: 1.2rem;
    }
    .card-custom-insurance{
        width: 90%;
    }
    .news-item{
        height:30rem;
    }
    .item-investment-service {
        height: 16rem;
        max-height: 100%;
        width: 18rem;
    }
    .item-fx-service-foreign {
        height: 18rem;
        max-height: 100%;
        font-size: 1.2rem;
    }
    .bond-item-label-small {
        display: flex;
        width: 22rem;
        height: 8rem;
        flex-direction: column;
        justify-content: center;
    }
    .item-bond-service {
        height: 16rem;
        max-height: 100%;
        font-size: 1.2rem;
        margin-bottom: 5rem;
    }

}