:root {
    --random-color: #000;
}

/*.content{*/
/*    background-color: #f0f8ff;*/
/*}*/
html, body {
    height: 100%;
    width: 100%
}

@font-face {
    font-family: font_strong;
    src: url('../font/utmeremitage.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: font_strong2;
    src: url('../../public/font/Orbitron.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: font_strong3;
    /*src: url('../../public/font/Orbitron.ttf') format('truetype');*/
    src: url('../../public/font/tektur_1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

#header_1 {
    font-family: font_strong, sans-serif;
}




.important-bg {
    background: #1a323e !important;

}
#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    cursor: pointer;
}

#overlay_popup {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
    cursor: pointer;
}

#overlay2 {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 14;
    cursor: pointer;
}

#body_web{
    zoom: 0.84;
    overflow: hidden auto;
}

.moto_img{
    width: 600px;
    max-height: 500px;
    object-fit: contain;
}

.alert_btn {
    width: fit-content;
    min-width: 150px;
    height: 45px;
    border-radius: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid transparent;
    overflow: hidden;
    /* background: linear-gradient(#54DEBA,#54A8DE,#54D4DE) padding-box; */


}

.alert_btn::after {
    content: '';
    position: absolute;
    top: -3px; /* Adjust based on your desired border width */
    left: -3px; /* Adjust based on your desired border width */
    right: -3px; /* Adjust based on your desired border width */
    bottom: -3px; /* Adjust based on your desired border width */
    height: 150%;
    width: 150%;
    border-radius: 30px;
    z-index: -1;
}

.alert_modal {
    border-radius: 5px;

}

.diagnose_div{
    background-color: transparent;
    padding: 0px;
}

#viewRemapCustom2_aside_remap {
    /*height: 200px;*/
    position: absolute;
    top: 87px;
    right: 12px;
    background-color: white;
    width: 20%;
    z-index: 16;
    display: none;
    transition: height 0.5s ease-out, top 0.5s ease-out, right 0.5s ease-out;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 5px;
}

#viewRemapCustom2_aside_remap.show {
    display: grid;
}

.modal-dialog{
    max-width: 650px;
}

.p_3:hover{
    transition: all 0.2s ease-in-out;
    transform: scale(1.03);
    background-color: #d1dbe4;
}

.p_3{
    display: grid;
    grid-template-columns: 20% 75%;
    background-color: #fff;
}

.menu_title{
    font-size: 20px;
    font-weight: 400;
    line-height: 52px;
}

.align_cent{
    display: flex;
    justify-content: center;
    align-items: center;
}

.select2-container--open .select2-dropdown{
    left: 95px;
}

/*.dialog_modal{*/
/*    margin-left: 550px;*/
/*    margin-top: 250px;*/
/*}*/
#header {
    display: flex;
    justify-content: center;
}

#text_overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: white;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


.vertical_line {
    border-left: 1px solid white;
}

#pdf_container {
    background: #ccc;
    text-align: center;
    display: none;
    padding: 5px;
    height: 820px;
    overflow: auto;
}

@media print {
    body {
        display: none;
    }
}

.centered-text {
    font-weight: bolder;
    text-align: center;
    flex-grow: 1;
}

.left-text {
    font-weight: bolder;
    text-align: left;
    flex-grow: 1;
}

.item2 {
    color: #FFFFFF;
    font-size: 25px;
}

.p-3 {
    color: #4c9a47;
    font-size: 20px;
}

.p-3:hover {
    border: 2px solid #4c9a47;
    border-radius: 5px;
    color: #4c9a47;
}

.sidebar2 {
    width: 350px;
}

.left_menu {
    background: #4c9a47;
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.left_menu:hover {
    background-color: #4c9a47;
    border-radius: 10px;
    transform: scale(1.05);
}

.list_error {
    transition: all 0.2s ease-in-out;
}

.list_error:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: scale(1.01);
}

.sub_menu {
    transition: all 0.2s ease-in-out;
}

.sub_menu:hover {
    transform: scale(1.03);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


.sub_menu2 {
    flex-direction: row;
    align-items: center;
    transition: all 0.2s ease-in-out;

}

.sub_menu2:hover {
    transform: scale(1.01);
    /*box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}

.orange-text {
    color: #FFCC00;
}

.bottom_button {
    /*box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);*/
    border-radius: 10px;
    /*background-color: #FFFFFF;*/
    display: -ms-flexbox;
    display: flex;
    min-height: 50px;
    padding: .5rem;
    /* margin-left: 386px; */
    /* margin-bottom: -21px; */
    justify-content: space-between;
    position: fixed;
    bottom: 5px;

}

.error_button {
    width: 540px;
    border-radius: 9px;
}

.smartkey_editor_btn {
    width: 250px;
    border-radius: 9px;
}

.buttons {
    display: flex;
    justify-content: space-between;
}

.modal-header {
    border-bottom: 1px solid #4c9a47 !important;
    font-size: larger;
}

#main_header {
    background-color: #4c9a47;
    color: #FFFFFF;
}

#btn_connect {
    background-color: #4c9a47 !important;
    color: #FFFFFF;
    border: 1px solid #4c9a47;
}


.button_menu_view {
    color: #4c9a47;
    width: 34px;
    height: 34px;
    background-color: #FFFFFF;
    position: absolute;
    right: -9px;
    /*transform: translateY(314px);*/
    text-align: center;
    border-radius: 50%;
    z-index: 1;
}

.form-control {
    border-color: #4c9a47 !important;
}


.button_menu_view:hover {
    /*transform: scale(1.01);*/
    /*box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#view_menu_left {
    transition: all 0.5s ease;
}

#button_menu_view {
    transition: left 0.5s ease;
}

.new {
    width: 40px;
}

.hide-left {
    transition: all 0.5s ease;
    transform: translateX(-130%);
}

.form-control {
    background-color: #FFFFFF !important;
}

.center {
    display: flex;
    justify-content: center;
    align-content: center;
}

.viewRow3 {
    border-radius: 5px;
}

.btn_search_function {
    color: #000;
}

.btn_search_function:hover {
    background-color: #4c9a47;
    color: #FFF;
}

.active {
    background-color: #4c9a47;
    color: #FFF !important;
}

.active_chat {
    background-color: #c3c3c3;
}

#myImageViewport {
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}

#myImageContent img {
    width: auto;
    height: auto;
    margin: auto;
}

#myImageContent div {
    position: absolute;
    font-size: 80px;
}

.imgdiv {

    overflow: auto;
    cursor: grab;
    border: 2px solid #4c9a47;
}

.gradient {
    background: linear-gradient(180deg, rgba(251, 251, 246, 1) 0%, rgba(247, 230, 184, 1) 89%, rgba(241, 212, 139, 1) 100%);
}

.btn_send_request {
    background-color: #4c9a47;
}

.btn_abs {
    border: 1px solid #4c9a47;
}

.btn_engine {
    border: 1px solid #4c9a47;
}

.color-button {
    background-color: #4c9a47;
}

.color-border {
    border: 2px solid #4c9a47;
}

.color-border1px {
    border: 1px solid #4c9a47;
}

.height_custom {
    height: 47px
}

.btn_error_search {
    background-color: #4c9a47;
}

#ViewSearchFunction_btn_odo {
    border: 2px solid #4c9a47;
}

#ViewSearchFunction_btn_scu {
    border: 2px solid #4c9a47;
}

#ViewSearchFunction_btn_ecm {
    border: 2px solid #4c9a47;
}

.button-bg-color {
    background-color: #4c9a47;
    color: #FFFFFF;
}

.button-bg-color:hover {
    color: #FFFFFF;
}

.button-outline {
    border: 1px solid #4c9a47;
    color: #4c9a47;
}

.button-outline:hover {
    background-color: #4c9a47;
    color: #FFFFFF;
}

.btn-alert-left {
    border: 3px solid #4c9a47
}

.btn-alert-left:hover {
    background-color: #4c9a47;
    color: #FFFFFF;
}

.btn-alert-right {
    border: 3px solid #8f8f8f
}

.btn-alert-right:hover {
    background-color: #636363;
    color: #FFFFFF;
}

.btn-alert-exit {
    border: 3px solid #e35057
}

.btn-alert-exit:hover {
    background-color: #e35057;
    color: #FFFFFF;
}

.white-text {
    color: #FFFFFF;
}

.title-custom {
    width: 310px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.gradient-border {
    border-radius: 10px;
    padding: 6px 12px;
    background-image: linear-gradient(0deg, #0396FF, #0264AA);
    /* Fill the inside with white */
    /*background-origin: border-box;*/
    /*box-shadow: inset 0 100vw white;*/
    /* A transparent border, so the very edge of the button shows through */
    border: 3px solid transparent;
}

.battery_test_icon {
    width: 60%;
}

.battery_test_icon_text {
    color: #4c9a47;
}

.icon_div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.red {
    color: red;
}

.green {
    color: #32cd32;
}

.bold_font {
    font-weight: 600;
}

.gray {
    color: #828282;
}


.slidecontainer {
    width: 100%;
    position: relative;
}

.custom-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 602%);
    width: 10px; /* Độ rộng của phần mà u xanh */
    height: 9%; /* Chiều cao bằng chiều cao của slider */
    background-color: #4c9a47; /* MÃ u xanh */
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(50, 205, 50, 1) 0%, rgba(239, 204, 0, 1) 50%, rgba(255, 0, 0, 1) 100%);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #d3d3d3;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #d3d3d3;
    cursor: pointer;
}

.custom_button {
    width: 150px;
    height: 40px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider1 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider1:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider1 {
    background-color: #2196F3;
}

input:focus + .slider1 {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider1:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider1.round {
    border-radius: 34px;
}

.slider1.round:before {
    border-radius: 50%;
}

/*.user_message{*/
/*    background: #f0f8ff;*/
/*    border-radius: 10px;*/
/*}*/
.user_message:hover {
    background-color: #c3c3c3;
    border-radius: 5px;
}


.list_history {
    height: 80px;
    min-height: 20px !important;
}

.nav-item {
    margin: 10px 20px 10px 20px;

}

.btn-outline-light:hover {
    color: #0a0e14;
    background-color: #0b51c5;
}



.table-bordered th, .table-bordered td {
    text-align: center;
    border: 6px solid #ffffff;
}

.table-bordered td {
    width: 50px;
    margin: 0px;
    padding: 5px;

}

th {
    background-color: #d0d4db;
    width: 80px;
    height: 40px;
    margin: 10px;
    color: #0b51c5;
}

.table-container {
    max-height: 100%; /* Adjust the height as needed */
    overflow-y: auto;
    position: relative;
}

.table-container table {
    width: fit-content;
    max-width: 100%;
    border-collapse: collapse;
}

#viewRemapCustom2_table_remap th,
#viewRemapCustom2_table_remap td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remap_table td.heatmap {
    --heatmap-color: #c6f4f9; /* Giá trị mặc định là trong suốt */
    --heatmap-text: #000 ;
}

.remap_table td.heatmap{
    background-color: var(--heatmap-color); /* Áp dụng biến CSS là m mà u nền */
    color : var(--heatmap-text);
}

.remap_table td {
    border: 6px solid #ffffff;
    background-color: #c6f4f9;
    width: 80px;
    height: 40px;
    margin: 10px;
}

.highlight_cell {
    --hight-light-cell: deepskyblue; /* Giá trị mặc định là trong suốt */
    --hight-light-text: white ;
}

.highlight_cell {
    background-color: var(--hight-light-cell) !important; /* or any other color you prefer */
    color : var(--hight-light-text) !important;
}

.highlight_cell2 {
    --hightlight-cell: #cacaca; /* Giá trị mặc định là trong suốt */
    --hightlight-text: black ;
}

.highlight_cell2 {
    background-color: var(--hightlight-cell) !important; ; /* or any other color you prefer */
    color : var(--hightlight-text) !important; ;
}


.remap_table td.yellow-highlight2 {
    background-color: yellow;
    color: black !important;
}

.remap_table td.yellow-highlight {
    background-color: yellow;
    /*background-color: #bc5090 ;*/
    color: black !important ;
}


.remap_table td.selected, th.selected {
    background-color: #dc143c;
    border: 6px solid #ffffff;
    color: #ffffff;

}

td.highlightStored_cell {
    background-color: #74BD45 ;
    color : white !important; ;
}


.remap_table td.color_transparent,
th.color_transparent{
    color: transparent;
}


#error_content {
    width: 100%;
    height: 100%;
}


.height_full {
    height: 100%;
}

.height_97 {
    height: 97%;
}

.height_98 {
    height: 98%;
}

.height_94 {
    height: 94%;
}

.height_92 {
    height: 92%;
}

.height_93 {
    height: 93%;
}

.height_91 {
    height: 91%;
}

.text_info {
    font-size: 20px;
    line-height: 2.8rem;
    background-color: #fcfeff;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-bottom: 10px;
}

.footer-motoInfo {
    display: flex;
    justify-content: center;
}

.margin_top {
    margin-top: 52px;
}

.margin_bottom_0 {
    margin-bottom: 0px
}

.margin_bottom_10 {
    margin-bottom: 10px;
}

.margin_bottom {
    margin-bottom: 30px
}

.info-box-number {
    font-size: 20px;
}


.ViewMonitorVSS_ivState {
    height: 100%;
}

.ViewMonitorVSS_button {
    display: flex;
    margin-top: auto;
    z-index: 2;
    width: 74%;
    justify-content: center;
}

.ViewMonitorVSS_img_div {
    width: 98%;
    height: 55%;
    border: 1px solid #000;
    border-radius: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.ViewMonitorSensorAnalog_chart_card {
    margin-top: 30px;
}

.ViewMonitorCKP_div_check {
    width: 95%;
    line-height: 50px;
    font-size: larger;
    font-weight: 600;
}

.ViewSimulateSensor_gauge {
    width: 350px;
    height: 350px;
    margin-top: 50px;
}

.iframe_view {
    height: 1000px;
    position: relative;
    align-items: center;
}

.iframe_content {
    width: 100%;
    height: 100%;
    border: none;
    transform: scale(1);
    margin-top: 40px;
}

.btn_row2_view_write_odo,
.btn_row1_view_write_odo {
    font-size: 20px;
    width: 100%;
    height: 40px;
    border-radius: 9px;
}

.text-uppercase {
    text-transform: uppercase;
}

.font20px {
    font-size: 20px;
}

.font_20px {
    font-size: 20px;
}

.font22px {
    font-size: 22px;
    margin-bottom: 0px;
}

.font18px {
    font-size: 18px;
}

.fontWeight600 {
    font-weight: 600;
}

.colorPrimary {
    color: #4c9a47;
}

.fontSize16px {
    font-size: 16px;
}

.font16px {
    font-style: italic;
    font-size: 17px;
}

.margin-bottom-0 {
    margin-bottom: 0px;
}

.overflow_text {
    display: inline-block;
    max-width: 90%; /* Giới hạn chiều rộng tối đa là 80% của phần tử cha */
    white-space: nowrap; /* Không cho phép xuống dòng */
    overflow: hidden; /* Ẩn phần trà n ra ngoà i */
    text-overflow: ellipsis; /* Thay thế phần trà n ra ngoà i bằng '...' */
}


#ViewSmartKeyEditor_lstView,
#ViewSmartKeyEditor_showHexView {
    height: 99%;
}

#ViewEditorResetEcm_lstItem {
    height: 77%;
}

.remap2_updated_value {
    color: #ff6361;
}

.menu {
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    background-color: #0781FD;
}

.menu_item:hover {
    transform: scale(1.03);
    transition: all 0.2s ease-in-out;
    /*box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2)*/
}

.menu_item {
    /*background: linear-gradient(0deg, rgba(250, 248, 222, 1) 0%, rgba(243, 235, 165, 1) 53%, rgba(240, 230, 140, 1) 100%);*/
    /*height: 50px;*/
    cursor: pointer;
    color: #fff;
    padding: 10px;
    font-size: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    border-radius: 10px;
}

.width_50 {
    width: 50%;
}

.btn_remap2 {
    width: 100px;
}

.zindex_3 {
    z-index: 3;
}

.font14px {
    font-size: 14px;
    font-style: italic;
}

.font15px {
    font-size: 15px;
    font-style: italic;
}

.btn-primary-gradient {
    min-width: 135px;
    padding: 12px 26px;
    color: #fff;
    background-image: linear-gradient(0deg, rgba(34,139,34,1) 0%, rgba(101,173,99,1) 100%);
    border-radius: 8px;
    border: 0;
    font-weight: 500;
    font-size: 19px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07), inset 0 1px 0 0px rgba(255, 255, 255, 0.15);
    transition: all 150ms ease-in-out;
}

.btn-primary-gradient:hover {
    filter: brightness(1.1);
    color: #FFF;
}

.btn-primary-gradient:active {
    transform: scale(.95);
}

.btn-default-gradient {
    min-width: 135px;
    padding: 12px 26px;
    color: #FFF;
    background-image: linear-gradient(180deg, rgba(106, 106, 106, 1) 0%, rgba(173, 173, 174, 1) 100%);
    border-radius: 8px;
    border: 0;
    font-weight: 500;
    /*font-size: 19px;*/
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: all 150ms ease-in-out;
}

.btn-default-gradient:hover {
    filter: brightness(1.1);
    color: #fff;
}

.btn-default-gradient:active {
    transform: scale(.95);
}

.ViewRemapFiles_upfile {
    display: grid;
    grid-template-columns: 88% 10%;
    width: 95%;
}

.icon_odo {
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 3px
}

.main-header img {
    transform: scale(1.3);
}

.nav_icon {
    display: inline-block; /* helps transform behave predictably */
    transition: transform 150ms ease-in-out;
    will-change: transform; /* optional: slightly smoother on some devices */
}

.nav_icon:hover {
    transform: scale(1.3);
}

/* Thêm transition để hiệu ứng mượt hơn */
/*.btn_remap2 {*/
/*    display: inline-block; !* helps transform behave predictably *!*/
/*    transition: transform 150ms ease-in-out;*/
/*    will-change: transform; !* optional: slightly smoother on some devices *!*/
/*}*/

.gradient-box {
    min-width: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    color: #FFF;
    border-radius: 10px;

    /* Mấu chốt nằm ở đây: Viền trong suốt + 2 lớp background */
    border: solid 5px transparent;

    background:
        /* Lớp 1: Nền nút (chỉ hiện bên trong padding) */
            linear-gradient(180deg, #0781FD 0%, #0346ED 100%) padding-box,

                /* Lớp 2: Nền viền (hiện ở vùng border nhờ trong suốt) */
            linear-gradient(180deg, rgba(7, 129, 253, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(3, 70, 237, 1) 100%) border-box;
}

.gradient-box:hover {
    color: #fff;
    /* Nếu muốn hiệu ứng hover đổi màu viền thì đổi gradient lớp 2 ở đây */
}

/* Animation scale */
.btn_remap2.gradient-box {
    transition: transform 150ms ease-in-out;
    will-change: transform;
}

.btn_remap2.gradient-box:active {
    transform: scale(0.95);
}

.div_btn_diagnose{
    transition: transform 1s ease, opacity 0.5s ease;
    transform: translateY(-100%);
    opacity: 0;
}

.div_btn_diagnose.show {
    transform: translateY(0);
    opacity: 1;
    height: 50px;
}


#viewRemapCustom2_parameter {
    /*transition: transform 0.5s ease, opacity 0.5s ease;*/
    /*transform: translateY(100%);*/
    opacity: 1;
}

/*#viewRemapCustom2_parameter.show {*/
/*    transform: translateY(0);*/
/*    opacity: 1;*/
/*    height: 250px;*/
/*}*/

#viewRemapCustom2_menu {
    transition: height 0.5s ease;
    height: calc(100% - 0px); /* Initial height */
}

#viewRemapCustom2_menu.shrink {
    transition: height 0.5s ease;
    height: calc(100% - 60px); /* Adjust this value based on the height of tvParameter */
}

.remap2_icon {
    margin: 35px 1px 1px 15px;
    width: 35px;
    height: 35px;
}

#viewReadEngineNew_div_gauge {
    padding: 5px;
}

.grid-container {
    zoom: 0.9;
    /*display : grid;*/
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    /*gap: 2px;*/
}

.grid-item {
    /*background-color: #fff;*/
    background-color: #1A323E;
    /*width: 20%;*/
    /*height: 33.33%;*/
    border: 1px solid #fff; /* This creates the colored gap effect */
    box-sizing: border-box;
}

.div_gauge {
    /*background-color: white;*/
    /*background-color: #1A323E;*/
    background-color: #0c1b23;
}

.engine_canvas {
    border: none;
    padding: 0;
    margin: 0;
    display: block; /* Ensures no extra space is added */
}

.engine_zoom {
    zoom: 0.98;
}

.min_height {
    min-height: 120px;
}


.progress1 {

    background: rgba(255,255,255,0.1);

    justify-content: flex-start;

    align-items: flex-end; /* Align items to the bottom */

    position: relative;

    padding: 0 5px;

    display: flex;

    height: 200px;

    width: fit-content;

}



.progress-value {

    box-shadow: 0 10px 40px -10px #fff;

    background: #fff;

    width: 30px;

    transform-origin: bottom; /* Set the origin to the bottom */

    transition: height 0.8s ease;

}

.btn_error_search,

.btn_send_request,

.color-button {

    background-color: #4c9a47;

}


.title-custom1 {

    width: 120px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.nowrap {

    white-space: nowrap;

}


.margin_left_15 {

    margin-left: 15px;

}

.modal-dialog{

    max-width: 650px;

}


.table-container thead {

    position: sticky;

    top: -3px;

    background-color: #f8f9fa; /* Adjust the background color as needed */

    z-index: 10; /* Increase z-index to ensure visibility */

    border-top: 4px solid #000; /* Add top border */

    border-bottom: 4px solid #000; /* Add bottom border */

}

.div_gauge {

    position: relative; /* Đảm bảo div_gauge là container định vị */

}



.div_title {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 2; /* Đảm bảo div_title nằm trên canvas */

    color: rgb(255, 255, 255);

    padding: 10px;

    margin-bottom: 0px;

    display: flex;

    /*justify-content: space-between;*/

}



.main_sub_div{

    display: flex;

    line-height: 4.5rem;

    justify-content: center;

    font-size: 30px;

}

#main_value_PARAMETER_KEY_01{

    font-size: 95px;

    font-weight: 600;

}

#main_unit_PARAMETER_KEY_01{

    font-size : 30px;

    font-weight : 200;

    color : white;

    text-align : center;

    /*border: 1px solid;*/

    width: fit-content;

    border-radius: 10px;

    padding: 5px;

    /*margin-bottom : 10px;*/

}



.main_container{

    position: absolute;

    font-family: font_strong3;

    top: 18%;

}



.main_value_unit{

    font-size: font_strong3;

    font-size: 30px;

}



.main_value_div{

    display: flex;

    justify-content: center;

    flex-direction: column;

    align-items: center;

}



.left_chart_div{

    margin-left: 57%;

}



.right_chart_div{

    margin-left: -57%;

}





/*.info-box-content .info-box-number {*/

/*    white-space: nowrap;*/

/*    overflow: hidden;*/

/*    text-overflow: ellipsis;*/

/*    max-width: 90%;*/

/*    display: inline-block;*/

/*    vertical-align: middle;*/

/*}*/








@media only screen and (max-width: 600px) {

    .sub_menu2 {
        flex-direction: column;
        align-items: center;
    }
}

@media only screen and (min-width: 570px) {
    .col-sm-10 {
        width: 83.33%
    }

    .left_menu {
        justify-content: center;
    }

    .menu_left_icon {
        width: 50px;
        margin: unset;
    }

    .info-box-number {
        display: none;
    }

    /*.info-box-icon{*/
    /*    margin: 0px;*/
    /*}*/
    .span_description {
        display: none;
    }

    .sub_menu2 {
        flex-direction: column;
        align-items: center;
    }
}

@media only screen and (min-width: 768px) {


    .list4 {
        margin-top: 28px;
    }

    .sub_menu2 {
        flex-direction: column;
        align-items: center;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .btn_row2_view_write_odo {
        width: 100%;
    }

    .info-box-number {
        display: block;
    }

    .left_menu {
        justify-content: unset;
    }

    .menu_left_icon {
        width: 50px;
        margin: 1px 15px 1px 10px;
    }

    /*.info-box-icon{*/
    /*    margin: 1px 15px 1px 10px;*/
    /*}*/
    #viewWriteODO_text1,
    #viewWriteODO_text2 {
        margin-top: 3px;
        margin-left: 7px;
    }

    /*.viewEditorODO_form-control{*/
    /*    width: 650px*/
    /*}*/
    /*.btn_row1_view_write_odo{*/
    /*    width: 100%;*/
    /*}*/
}

@media only screen and (min-width: 1300px) {

    .span_description {
        display: block;
    }

    .list4 {
        margin-top: 0px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1700px) {
    #btn_engine {
        width: 100px;
    }

    #btn_abs {
        width: 100px;
    }

    #header_1 {
        display: block;
    }

    .iframe_content {
        width: 100%;
        height: 100%;
        border: none;
        /*transform : scale(0.69);*/
        /*transform : scale(0.95);*/
        margin-top: 30px;
    }

    #body_web {
        zoom: 0.83;
    }

    .margin_top {
        margin-top: 37px;
    }

    .margin_bottom {
        margin-bottom: 0px
    }

    /*.icon_div{*/
    /*    width: 50px;*/
    /*}*/
    .height_92 {
        height: 90%;
    }

    .height_93 {
        height: 91%;
    }

    .height_97 {
        height: 95%;
    }

    /*#row3{*/
    /*    height: 71%;*/
    /*}*/
    #error_content {
        height: 100%;
    }

    #list_content {
        padding-bottom: 15px;
    }

    #ViewEditorResetEcm_lstItem {
        height: 70%;
    }


    .ViewMonitorVSS_button {
        display: flex;
        margin-top: auto;
        z-index: 2;
        width: 74%;
        justify-content: center;
        margin-bottom: 10px;
    }


    .ViewMonitorVSS_img_div {
        width: 98%;
        height: 52%;
        border: 1px solid #000;
        border-radius: 20px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .width_50 {
        width: 45%;
    }

    .ViewMonitorSensorAnalog_btn_check {
        margin-bottom: 10px;
    }

    .ViewMonitorSensorAnalog_chart_card {
        margin-top: 10px;
    }

    .ViewMonitorCKP_div_check {
        width: 95%;
        line-height: 30px;
        font-size: 15px;
        font-weight: 600;
    }

    .ViewSimulateSensor_gauge {
        width: 300px;
        height: 300px;
        margin-top: 20px;
    }

    .smartkey_editor_btn {
        width: 144px;
        border-radius: 9px;
    }

    .btn_row1_view_write_odo,
    .btn_row2_view_write_odo {
        width: 100%;
        height: 45px;
        border-radius: 9px;
    }

    .error_button {
        width: 540px;
        border-radius: 9px;
    }

    #ViewSmartKeyEditor_lstView,
    #ViewSmartKeyEditor_showHexView {
        height: 97%;
    }

    .ViewRemapFiles_upfile {
        display: grid;
        grid-template-columns: 90% 10%;
        width: 91%;
    }

    /*.menu_item {*/
    /*    font-size: 15px;*/
    /*}*/

    .remap2_icon {
        margin: 35px 1px 1px 10px;
        width: 30px;
        height: 30px;
    }

    #viewReadEngineNew_div_gauge {
        padding: 0px;
    }

    .font20px {
        font-size: 18px;
    }

    .min_height {
        min-height: 100px;
    }


}

@media only screen and (min-width: 1800px) {
    #btn_engine {
        width: 100px;
    }

    #btn_abs {
        width: 100px;
    }

    #header_1 {
        display: block;
    }

    .iframe_content {
        width: 100%;
        height: 100%;
        border: none;
        /*transform : scale(0.69);*/
        /*transform : scale(0.95);*/
        margin-top: 30px;
    }

    #body_web {
        zoom: 0.83;
    }

    .margin_top {
        margin-top: 37px;
    }

    .margin_bottom {
        margin-bottom: 0px
    }

    /*.icon_div{*/
    /*    width: 50px;*/
    /*}*/
    .height_92 {
        height: 90%;
    }

    .height_93 {
        height: 91%;
    }

    .height_97 {
        height: 95%;
    }

    /*#row3{*/
    /*    height: 71%;*/
    /*}*/
    #error_content {
        height: 100%;
    }

    #list_content {
        padding-bottom: 15px;
    }

    #ViewEditorResetEcm_lstItem {
        height: 70%;
    }


    .ViewMonitorVSS_button {
        display: flex;
        margin-top: auto;
        z-index: 2;
        width: 74%;
        justify-content: center;
        margin-bottom: 10px;
    }


    .ViewMonitorVSS_img_div {
        width: 98%;
        height: 52%;
        border: 1px solid #000;
        border-radius: 20px;
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .width_50 {
        width: 45%;
    }

    .ViewMonitorSensorAnalog_btn_check {
        margin-bottom: 10px;
    }

    .ViewMonitorSensorAnalog_chart_card {
        margin-top: 10px;
    }

    .ViewMonitorCKP_div_check {
        width: 95%;
        line-height: 30px;
        font-size: 15px;
        font-weight: 600;
    }

    .ViewSimulateSensor_gauge {
        width: 300px;
        height: 300px;
        margin-top: 20px;
    }

    .smartkey_editor_btn {
        width: 144px;
        border-radius: 9px;
    }

    .btn_row1_view_write_odo,
    .btn_row2_view_write_odo {
        width: 100%;
        height: 45px;
        border-radius: 9px;
    }

    .error_button {
        width: 540px;
        border-radius: 9px;
    }

    #ViewSmartKeyEditor_lstView,
    #ViewSmartKeyEditor_showHexView {
        height: 97%;
    }

    .ViewRemapFiles_upfile {
        display: grid;
        grid-template-columns: 90% 10%;
        width: 91%;
    }

    /*.menu_item {*/
    /*    font-size: 15px;*/
    /*}*/

    .remap2_icon {
        margin: 35px 1px 1px 10px;
        width: 30px;
        height: 30px;
    }

    #viewReadEngineNew_div_gauge {
        padding: 0px;
    }

    .font20px {
        font-size: 18px;
    }

    .min_height {
        min-height: 100px;
    }

    .left_chart_div{
        margin-left: 44%;
    }

    .right_chart_div{
        margin-left: -44%;
    }


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1900px) {
    /*.btn_row2_view_write_odo{*/
    /*    width: 430px;*/
    /*}*/
    /*.viewEditorODO_form-control{*/
    /*    width: 810px*/
    /*}*/
    /*.btn_row1_view_write_odo{*/
    /*    width: 670px;*/
    /*}*/
}

#ViewSmartKeyEditor_showHexView .hex-col {
    display: inline-block;
    margin-right: 8px; /* Adjust spacing between columns */
}

#ViewSmartKeyEditor_showHexView .hex-col:after {
    content: '';
    display: inline-block;
    height: 100%;
    width: 1px;
    background-color: #000; /* Line color */
    margin-left: 8px; /* Adjust spacing after the line */
}

#ViewSmartKeyEditor_showHexView .hex-col.line-after-1:after,
#ViewSmartKeyEditor_showHexView .hex-col.line-after-5:after,
#ViewSmartKeyEditor_showHexView .hex-col.line-after-9:after,
#ViewSmartKeyEditor_showHexView .hex-col.line-after-13:after {
    content: '|'; /* This creates the line. Adjust as needed */
}

/*.gradient-box:active {*/
/*    transform: scale(0.95);*/
/*}*/

.gradient-box-default {
    min-width: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin: auto;*/
    position: relative;
    box-sizing: border-box;
    border: solid 5px transparent; /* !importanté */
    color: #FFF;
    background: linear-gradient(180deg, rgba(95, 158, 160, 1) 0%, rgba(128, 177, 178, 1) 100%);
    background-clip: padding-box; /* !importanté */
    border-radius: 10px;
}

.gradient-box-default:hover {
    color: #fff;
}

.gradient-box-default::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -5px; /* !importanté */
    border-radius: inherit; /* !importanté */
    /*background: linear-gradient(0deg, #0781FD 0%, #0346ED 100%);*/
    background: linear-gradient(0deg, rgba(95, 158, 160, 1) 0%, rgba(230, 239, 234, 1) 52%, rgba(112, 167, 169, 1) 100%);
}

.gradient-box-danger {
    min-width: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin: auto;*/
    position: relative;
    box-sizing: border-box;
    border: solid 5px transparent; /* !importanté */
    color: #FFF;
    background: linear-gradient(180deg, rgba(255, 14, 14, 1) 0%, rgba(158, 0, 0, 1) 100%);
    background-clip: padding-box; /* !importanté */
    border-radius: 10px;
}

.gradient-box-danger:hover {
    color: #fff;
}

.gradient-box-danger::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -5px; /* !importanté */
    border-radius: inherit; /* !importanté */
    /*background: linear-gradient(0deg, #0781FD 0%, #0346ED 100%);*/
    background: linear-gradient(0deg, rgba(255, 14, 14, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(190, 0, 0, 1) 100%);
}

.gradient-box-success {
    min-width: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin: auto;*/
    position: relative;
    box-sizing: border-box;
    border: solid 5px transparent; /* !importanté */
    color: #FFF;
    background: linear-gradient(0deg,rgba(88,162,84,1) 0%, rgba(34,139,34,1) 100%);
    background-clip: padding-box; /* !importanté */
    border-radius: 10px;
}

.gradient-box-success:hover {
    color: #fff;
}

.gradient-box-success::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -5px; /* !importanté */
    border-radius: inherit; /* !importanté */
    /*background: linear-gradient(0deg, #0781FD 0%, #0346ED 100%);*/
    background: linear-gradient(180deg, rgba(34,139,34,1) 0%, rgba(234,244,233,1) 50%, rgba(80,161,78,1) 100%);
}

.justify_end {
    justify-content: flex-end;
}

.card {
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.viewRemap2_active {
    color: #000;
    background: #fff;
    border-radius: 10px;
    /*height: 50px;*/
    /*color: #0a001f;*/
    /*font-size: 18px;*/
}

.rm2_value {
    font-size: 20px;
    font-weight: 600;
}

.content_engine {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid;
    font-size: 17px;
}

#viewRemapCustom2_parameter {
    margin-top: 10px;
    border-radius: 10px;
    /*border: 1px solid #0a001f;*/
}

.left_side {
    background-color: rgb(251, 255, 255);
    margin-right: 10px;
    border-radius: 5px;
    padding: 15px 15px 0px;
    overflow: hidden auto;
}

select.calcSelect {
    appearance: none;
    display: flex;
    justify-content: space-between;
    width: 200px;
    align-items: center;
    color: black;
    padding: 7px 30px 7px 20px;
    border-radius: 5px;
    cursor: pointer;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23000' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A") right 15px center / 20px no-repeat;
    animation: rotateHue 10s infinite;
}

/* Custom styling for options */
.calcSelect option {
    padding: 10px;
    border-top: 1px solid #444;
}

/* Custom styling for selected option display */
.calcSelect-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

select.calcSelect:focus{
    border: 1px solid #0781FD;
    box-shadow: 0 0 5px rgba(7, 129, 253, 0.5);
}

/* Style for hover/focus states using standard selectors */
.calcSelect option:hover,
.calcSelect option:focus {
    background: #4B534B;
    color: white;
    font-weight: bold;
}

/* Style for selected option */
.calcSelect option:checked {
    background: #0781FD;
    color: white;
    font-weight: bold;
}

.card-fade {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.card-show {
    opacity: 1;
}



@media  screen and (max-width: 1200px) {
    #body_web{
        zoom: 0.54;
        overflow: hidden auto;
    }
    #col_view_content{
        height: 875px !important;
    }
}

@media  screen and (max-width: 1300px) {
    #body_web{
        zoom: 0.75;
        overflow: hidden auto;
    }
    #col_view_content{
        height: 875px !important;
    }
}

.form-control{
    height: calc(2.25rem + 10px);
    font-size: 20px;
}

.form-control-upfile{
    display: block;
    width: 100%;
    height: calc(2.25rem + 10px);
    padding: 0.375rem 0.75rem;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #4c9a47;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    transition: border-color 0.15s
    ease-in-out, box-shadow 0.15s
    ease-in-out;
}

.upload_file_remap{

    background: #4c9a47;
    color: white;
    border: 1px solid #4c9a47;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.history_div:hover{
    transform: scale(1.05);
    transition: all 0.4s ease-in-out;
}

.select2-container--open .select2-selection {
    /* Đặt thuộc tính outline về none */
    outline: none !important;
}

.select2-search__field{
    border: 1px solid #4c9a47 !important ;

}

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da;
    padding: 0.46875rem 0.75rem;
    height: calc(2.25rem + 10px) !important;
    font-size: 20px;
}

.select2-container--default,
.select2-selection--single
{
    border-color: #4c9a47 !important ;
}

.select2-container .select2-selection--single:focus,
.select2-container .select2-selection--multiple:focus {
    /* Đặt thuộc tính outline về none */
    outline: none !important;
}

.select2-container--open .select2-selection {
    /* Đặt thuộc tính outline về none */
    outline: none !important;
}

.select2-container .select2-selection--single:focus,
.select2-container .select2-selection--multiple:focus {
    /* Đặt thuộc tính outline về none */
    outline: none !important;
}

.tool_tip {
    position: relative;
    display: flex;
    align-items: end;
    cursor: pointer;
}

.tool_tip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 99;
    bottom: 60%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}

.tool_tip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.filter-icon {
    width: 30px;
    margin-bottom: 5px;
}

.history_div:hover{
    transform: scale(1.05);
    transition: all 0.4s ease-in-out;
}

.main_color_text{
    color: #4c9a47;
}

.main_border {
    border: 1px solid #4c9a47;
}

.icon_up_file{
    /*width: 34px;*/
    height: 45px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 2px solid #a9a9a9;
    border-radius: 5px;
    /*transition: all 0.2s ease-in-out;*/
}
.icon_up_file:hover{
    /*padding: 1px;*/
    /*border: 1px solid var(--main-color);*/
    /*border-radius: 5px;*/
    /*transition: all 0.2s ease-in-out;*/
    transform: scale(1.1);
}