:root {
    --top-1: 73%;
    --left-pin-1: 5%;
    --left-text-1: 13%;
    --top-2: 33%;
    --left-pin-2: 17.5%;
    --left-text-2: 78%;
    --top-3: 53%;
    --left-pin-3: 43.2%;
    --left-text-3: 73%;
    --top-4: 86%;
    --left-pin-4: 60%;
    --left-text-4: 13%;
    --top-5: 49%;
    --left-pin-5: 84%;
    --left-text-5: 78%;
 }
 
 @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
 
.btn-detail-search, .back-to-top, .btn-toggle-category{
   border-radius: 20px;
   background: linear-gradient(180deg, rgba(87,207,169,1) 0%, rgba(51,142,134,1) 100%);
}

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

.main-content, .main-content .top
{
   left: 0;
   width: 100%;
   padding: 0;
   margin: 0;
}

.display-page
{
   margin-top: 20px;
   min-height: 90vh;
   background-color: #fff;
   border: 0;
}

.display-content
{
   padding: 0px 40px;
}
.tab-detail .topic-header{
   color: #fff;
}
.product-detail{
   font-weight: 500 !important;
   font-size: 20px !important;
   /*color: Orange;*/
   color: #FFE672;
}
img
{
   max-width: 100%;
   height: auto;
}
.row.group-row{
   margin-bottom: 5px;
   padding: 5px 5px 0 0 ;
   border-bottom: 1px solid #ccc;
}

.row.group-row:last-child {

}

.department{
   /*margin: 5px !important;*/
   margin: 15px !important;
   margin-top: 0 !important;
   border-radius: 0 0 40px 40px;
   transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
}

 .department:hover{
   transform: scale(1.05);
   background-color: #eafaf7;
   box-shadow: inset 0 -2px 10px 1px #70d7c1 !important;
}

.department-image-control .department-logo-icon:hover{
   transition: transform 0.5s ease-in-out;
   transform: scale(1.12);
}

.department-image-control {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 0;
    margin: 0;
    width: 55px;
    margin-right: 25px;
    transition: transform 0.5s ease-in-out;
}

.department .department-header{
   max-width: 100%;
}

.department-header {
    min-height: 80px;
    margin: 0;
    padding: 0;
}

.department-title{
   font-weight: 500;
   padding: 0;
   margin: 0;
}

.department-detail{
   padding: 0;
}

.department-detail .row:last-child{
   padding-bottom: 30px;
}

.department-doc-detail{
   padding: 10px 4px 4px 4px;
   font-weight: 300;
}

.bg-department-related {
    opacity: 1;
    background: rgb(45,171,125);
    background: linear-gradient(0deg, rgba(45,171,125,1) 0%, rgba(47,189,137,1) 40%, rgba(107,208,171,1) 80%, rgba(130,226,190,1) 100%);
}

.bg-department-related .card-title{
   display: flex;
   justify-content: center;
   font-size: 20px;
   color: white !important;
}

.card-body .card-sub{
   display: none;
   color: #fff;
   margin-top: 10px;
}

.swiper-button-prev, .swiper-button-next{
   color: #fff !important;
}

th{
  /*height:35px;*/
background: #43b38c;
  color: #FFF !important;
  font-weight: 500;
  text-align: center;
  vertical-align: middle;  
  height: 50px !important;
}

th > span:first-child {
   font-size: 16px;
}

th.two-row{
  /*height:35px;*/
background: #43b38c;
  color: #FFF !important;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;  
  height: 50px !important;
}

th.mirror{
  /*height:35px;*/
background: #43b38c;
  color: #FFF !important;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;  
  height: 50px !important;
}

th.mirror-but-none {
background: transparent;
  color: #362a27 !important;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;  
  height: 50px !important;
  /*box-shadow: inset 2px 2px 0px 0px #70d7c1 !important;*/
  position: relative;
}

th.mirror-but-none::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #2DAB7D;
    border-radius: 20px 20px 0px 0px;
    border-bottom: none;
    box-sizing: border-box;
    pointer-events: none;
}

tbody > tr{
   height: 57px
}

.selected-row{	
   box-shadow: inset 0px 0px 4px 2px #2DAB7D !important
}

table.dataTable tbody td {
    vertical-align: middle;
}

.formatTable tr:nth-child(even) {
    background-color: #B3E6D3;
}

tbody tr:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
    transition: all 0.3s ease;
    background-color: #f1f1f1;
}

.department.border-department1{
   border: 3px solid #1A9F9C;
}
.department.border-department2{
   border: 3px solid #0070C0;
}
.department.border-department3{
   border: 3px solid #1A9F9C;
}
.department.border-department4{
   border: 3px solid #0070C0;
}

.bg-process{
   background-image: url('../../Images/bg_process.jpg');
   background-size: cover;
}

.row.search-bar-bg {
    padding: 3px;
    background: #43b38c;
    margin: 0px;
    justify-content: center;
}

.search-bar-element {
    place-content: center;
    height: 43px;
    background: #43b38c;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; */
}

.it-be-like-map {
    position: relative;
    width: 100%;
    height: 510px;
    background-repeat: no-repeat;
    background-size: contain;
    /*background-image: url('../../Images/bg_process.jpg');*/
    background-position: center;
    margin: 0px 0px 0px 0px;
    transition: all 1s ease;
}

.it-be-like-map  svg{
   padding-left: 300px;
}

.main-topic {
   color: #3b4ad9;
   font-weight: 400;
}

.pin-container{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
}

.pin{
   position: relative;
   width: 52px;
   height: 52px;
   border: 2px solid Red;
   background-color: #eb4d41;
   color: White;
   display: flex;
   justify-content: center;
   align-items: center;
   box-shadow: 8px 8px 16px rgba(52, 54, 56, 0.08);
   border-radius: 100% 100% 0 100%;
   transform: rotate(45deg);
   transform-origin: right bottom;
   transition: .25s;
}
.pin > .bi{
transform: rotate(-45deg);
font-size: 40px;
}

.pin:hover, .pin:focus {
   background-color: White;
   box-shadow: 8px 8px 48px rgba(52, 54, 56, 0.18);
   transform: rotate(45deg) scale(1.2);
   cursor: pointer;
}

.pin:hover .bi{
   font-size: 20px;
   transform: rotate(-45deg) scale(1.2);
   color: red;
}

.pin-1, .pin-2, .pin-3, .pin-4, .pin-5 {
   position: absolute;
 }

 .pin-1 {
   top: var(--top-1);
   left: var(--left-pin-1);
 }

 .pin-2 {
   top: var(--top-2);
   left: var(--left-pin-2);
 }

 .pin-3 {
   top: var(--top-3);
   left: var(--left-pin-3);
 }

 .pin-4 {
   top: var(--top-4);
   left: var(--left-pin-4);
 }

 .pin-5 {
   top: var(--top-5);
   left: var(--left-pin-5);
 }

 .text-1, .text-2, .text-3, .text-4, .text-5 {
   opacity: 0;
   position: absolute;
   transition: .25s;
 }

.text-1 {
    top: 81%;
    left: 10%;
    color: White;
    background-color: #eb4d41;
    border-radius: 5px;
    font-size: 1.5rem;
    animation: fadeIn 2s forwards;
    padding: 5px;
}

.text-2 {
    top: 40%;
    left: 23%;
    color: White;
    background-color: #eb4d41;
    border-radius: 5px;
    font-size: 1.5rem;
    animation: fadeIn 2s forwards;
    animation-delay: 1.5s;
    padding: 5px;
}

.text-3 {
    top: 61%;
    left: 48%;
    color: White;
    background-color: #eb4d41;
    border-radius: 5px;
    font-size: 1.5rem;
    animation: fadeIn 1s forwards;
    animation-delay: 2.5s;
    padding: 5px;
}
.text-4 {
     top: 62%;
    left: 78%;
    color: White;
    background-color: #eb4d41;
    border-radius: 5px;
    font-size: 1.5rem;
    animation: fadeIn 1s forwards;
    animation-delay: 4.5s;
    padding: 5px;
}
.text-5 {
    top: 93%;
    left: 66%;
    color: White;
    background-color: #eb4d41;
    border-radius: 5px;
    font-size: 1.5rem;
    animation: fadeIn 1s forwards;
    animation-delay: 3.5s;
    padding: 5px;
}

 .pin:hover + .text-1,
 .pin:hover + .text-2,
 .pin:hover + .text-3,
 .pin:hover + .text-4,
 .pin:hover + .text-5 {
   border: 1px solid red;
 }
 
 .pin-control{
    width: 300px;
 }
 .transit-step-1, .transit-step-2, .transit-step-3, .transit-step-4, .transit-step-5 {
   position: absolute;
   opacity: 0;
   transition: .25s;
 }

.transit-step-1 {
    top: 10%;
    left: 14%;
    width: 150px;
    animation: fadeIn 2s forwards;
}

.transit-step-2 {
    top: 58%;
    left: 12%;
    width: 340px;
    animation: fadeIn 2s forwards;
    animation-delay: 1.5s;
}

.transit-step-3 {
    top: 28%;
    left: 41%;
    width: 300px;
    animation: fadeIn 1s forwards;
    animation-delay: 2.5s;
}

.transit-step-4 {
    top: 75%;
    left: 66%;
    width: 380px;
    animation: fadeIn 1s forwards;
    animation-delay: 3.5s;
}

/*.transit-step-5 {
    top: 26%;
    left: 78%;
    width: 230px;
    animation: fadeIn 1s forwards;
    animation-delay: 4.5s;
}*/

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.tab-detail{
   padding: 10px 20px;
   background: rgb(45,171,125);
   background: linear-gradient(0deg, rgba(45,171,125,1) 0%, rgba(47,189,137,1) 40%, rgba(107,208,171,1) 80%, rgba(130,226,190,1) 100%);
}
.icon-head-column{
   /*border-radius: 50%;*/
   width: 220px;
   height: 200px;
   background-size: cover;
   /*z-index: 3;*/
   /*border: 1px solid #52D3D8;
   box-shadow: inset 0px 0px 4px 2px #52D3D8 !important;*/
}

.icon-head-column.icon-column2{
   background-image: url("../../Images/icon-column-2.png");
}

.icon-head-column.icon-column3{
   background-image: url("../../Images/icon-column-3.png");
   /*width: 180px;*/
}

.icon-head-column.icon-column4{
   background-image: url("../../Images/icon-column-4.png");
   /*width: 205px;*/
}

.icon-head-column.icon-column5{
   background-image: url("../../Images/icon-column-5.png");
}

.manual-detail-control {
    display: flex;
    margin-top: 15px;
    margin-bottom: 2px;
    gap: 2px;
}

.manual-detail-box {
    /*border: 1px solid #009DFA;*/
    border-radius: 3px;
    height: 20px;
    width: 20px;
    position: relative;
    display: inline-block;
    background-size: cover;
    cursor: pointer;
    transition: transform 0.5s ease-in-out;
}

.manual-detail-box:hover{
   /*border: 2px solid;
   border-color: #009DFA;*/
}

.manual-detail-box:hover .hover-text {
   display: block;
}

.hover-text {
   display: none;
   position: absolute;
   top: 25px;
   left: 0;
   background: #fff;
   border: 2px solid #009DFA;
   padding: 5px;
   z-index: 10;
   white-space: nowrap; /* Ensures the text doesn't wrap */
   animation: fadeIn 0.5s forwards;
}

.hover-text::before {
   content: '';
   position: absolute;
   top: -10px;
   left: 0px;
   border-width: 5px;
   border-style: solid;
   border-color: transparent transparent #000 transparent;
   z-index: 11;
   color: #009DFA;
}

.manual-detail-box:hover .hover-text a {
   color: #000;
   text-decoration: none;
}

.hover-text a:hover {
   text-decoration: underline;
}

.product-label{
   margin: 0;
}

@charset "UTF-8";

.select2-container .select2-choice{
   height: 34.3px !important;
   align-content: center;
   padding: 0 20px !important;
   border-radius: 5px !important ;
}

.select2-arrow{
   padding-top: 5px !important;
}

.select2-container.select2-allowclear .select2-choice abbr {
    margin-top: 3px;
}




.wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

.card-radio.import {
  position: relative;
  width: 100%;
  height: 33px;
  background: #fff;
  border-radius: 5px 0px 0px 5px;
  transition: all 0.3s;
}
/*.card-radio.import > label > div {
   color: #5EDDB0;
}*/

.card-radio.export {
  position: relative;
  width: 100%;
  height: 33px;
  background: #fff;
  border-radius: 0px 5px 5px 0px;
  transition: all 0.3s;
}

/*.card-radio.export > label > div {
  color: #FFD15C;
}*/

/*.card-radio.import::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../Images/icon-import.png');
  background-size: 40px;
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: top;
  opacity: 0.1;*/ /* Adjust the opacity value as needed */
  /*border-radius: 10px;*/ /* Ensure the border radius matches the parent */
  /*z-index: 0;*/ /* Make sure it is below the content */
/*}

.card-radio.export::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../Images/icon-export.png');
  background-size: 40px;
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: top;
  opacity: 0.1;*/ /* Adjust the opacity value as needed */
  /*border-radius: 10px;*/ /* Ensure the border radius matches the parent */
  /*z-index: 0;*/ /* Make sure it is below the content */
/*}*/

.card-radio:hover {
  transform: scale(1.05);
}

.import-radio {
  position: relative;
  top: 0;
  left: 13px;
  height: 100%;
  /*width: 100%;*/
  cursor: pointer;
  /*appearance: none;*/
  border: none;
  border-radius: 5px;
  z-index: 10;
}



/*.import-radio + .check::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 60px;
  width: 16px;
  height: 16px;
  border: 2px solid #d0d0d0;
  border-radius: 50%;
  background-color: #E8E8E8;
}*/

.export-radio {
  position: relative;
  top: 0;
  left: 13px;
  height: 100%;
  /*width: 100%;*/
  cursor: pointer;
  /*appearance: none;*/
  border: none;
  border-radius: 5px;
  z-index: 10;
}

/*.export-radio + .check::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 60px;
  width: 16px;
  height: 16px;
  border: 2px solid #d0d0d0;
  border-radius: 50%;
  background-color: #E8E8E8;
}*/

/*.import-radio:checked + .check::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 61px;
  width: 12px;
  height: 12px;
  background-color: #44B59C;
  border-radius: 50%;
}

.export-radio:checked + .check::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 61px;
  width: 12px;
  height: 12px;
  background-color: #FFD15C;
  border-radius: 50%;
}*/

.import-radio[value="IMP"]:checked + .check::after {
  background-color: #44B59C;
}

.export-radio[value="EXP"]:checked + .check::after {
  background-color: #FFD15C;
}


.import-radio[value="IMP"]:checked {
  border: none;
}

.export-radio[value="EXP"]:checked {
  border: none;
}

.label {
  color: #323232;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  cursor: pointer;
}

.label .title {
  margin: 5px 0 0 35px;
  font-size: 15px;
}

.label .span {
  color: gray;
  font-weight: 700;
  font-size: 15px;
}

.search-bar-toggle {
   position: absolute;
}