:root {
    --primary: #121131;
    --secondary: #EF5225;
    --tertiary: #818286;

    --soft-primary: rgba(18, 17, 49, 0.03);
    --soft-secondary: rgba(239, 82, 37, 0.03);
    --soft-secondary-2: rgba(239, 81, 37, 0.264);
    --soft-tertiary: #81828617;
    --soft-tertiary-2: #8182865d;

    --primary-hover: #07071d;
    --secondary-hover: #c5360f;
    --tertiary-hover: #5e5f62;

    --white-soft: rgba(255, 255, 255, 0.5);
    --black-soft: rgba(34, 34, 34, 0.5);

    --white: #ffffff;
    --black: #222222;

    --fs-HeroHeader: 56px;
    --fs-BigHead: 36px;
    --fs-MidleHead: 32px;
    --fs-Head: 26px;
    --fs-Head2: 24px;
    --fs-HeadSub: 18px;
    --fs-LittleHeadSub: 16px;
    --fs-Text: 18px;
    --fs-TextSub: 14px;
    --fs-LittleTextSub: 11px;
    --fs-SmallText: 10px;
    --ButtonFont: 14px;

    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;

    --text-20: 20px;
    --text-16: 16px;
}

.echarts-tooltip {
    font-family: 'Prompt', sans-serif !important;
    padding: 20px;
}

.echarts-tooltip__header {
    font-size: var(--text-20);
    color: #000000;
    font-weight: 500;
    margin-bottom: 10px;
    font-family: 'Prompt', sans-serif;
    font-size:25px;
}

.echarts-tooltip__volume {
    font-size: var(--text-16);
    font-weight: 600;
    color: #000000;
    margin-bottom: 10px;
    font-family: 'Prompt', sans-serif;
    font-size:25px;
}

.echarts-tooltip__last-updated {
    font-weight: 400;
}

#line {
    width: 100%!important;
    max-width: 100%!important;
    /* สำหรับการจัดการกรณีกราฟยาวมากเกินไป */
    height: 500px;
}

.box-graph-c01 {
    border: 1px solid #ccc;
    padding: 10px;
    height: 500px;
    width: 100%!important;
}

@media (max-width:1199px) {
    .box-graph-c01 {
        height: auto;
        width: 100%;
    }
    #line {
        width: 100%;
        max-width: 100%;
        /* สำหรับการจัดการกรณีกราฟยาวมากเกินไป */
        height: 500px;
    }
    [data-zr-dom-id="zr_0"] {
        width: 100%;
        max-width: 100%!important;
        height: 500px!important;
        /* กำหนดความกว้างเป็น 100% */
        /* กำหนดความสูงเป็น 300px หรือค่าที่คุณต้องการ */
        /* ส่วนอื่นๆ ของ CSS ที่คุณต้องการใช้ในการปรับแต่ง canvas นี้ */
    }
}


/* //////////////////////// */

ul.share__info__info {
    padding-left: 0;
}

.share__info__info li {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 30px 0.1fr 30px 1.5fr;
    grid-template-columns: 1fr 0.1fr 1.5fr;
    grid-gap: 30px;
    color: var(--black);
    font-weight: 400;
    font-size: 16px;
    padding: 20px 10px;
    border-bottom: 1px solid var(--primary);
}

.share__info__info li strong {
    color: var(--primary);
    font-weight: 400;
}

.share__table {
    background-color: #fff;
    border-bottom: 3px solid var(--primary)!important;
}

.share__info__s1 {
    text-align: left;
}

.share__info__s2 {
    text-align: right;
}

.share__info__total {
    font-weight: 600;
    text-align: right;
    color: var(--black);
}

.line001 {
    padding: 120px 0;
}

.box__crop-grop {
    margin: 100px auto;
}

@media only screen and (max-width: 767px) {
    .line001 {
        padding: 60px calc(var(--bs-gutter-x) * 0.5) 60px calc(var(--bs-gutter-x) * 0.5);
    }
    .share__info__info li {
        -ms-grid-columns: 1fr 30px 0.1fr 30px 1.5fr;
        grid-template-columns: 2fr 0 1.5fr;
        grid-gap: 30px;
    }
}


/* ///////////////// */

.crop__form1 {
    /*height: 367px;*/
    /* padding: 0px 45px 0px 0px; */
    background-color: #dfdfdf;
    padding: 24px 30px;
}

.crop-form2 {
    background-color: #dfe9df;
    padding: 24px 30px;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgb(241 248 255);
}

.form-group-input {
    padding: 10px 0;
}

@media only screen and (max-width: 1199px) {
    .crop-form2 {
        padding: 31px 30px 42px;
    }
    .crop__form1 {
        padding: 30px 25px 53px;
        /*height: 392px;*/
    }
}

@media only screen and (max-width: 991px) {
    .crop-form2 {
        padding: 30px 30px 40px;
        margin-top: 30px;
    }
    .crop__form1 {
        padding: 30px 25px 40px;
        height: auto;
    }
}