:root
{
   --searchbar-color-primary: linear-gradient(0deg, rgb(0, 197, 171) 0%, rgb(74, 196, 172) 100%);
   --th-color-primary: linear-gradient(0deg, rgb(0, 197, 171) 0%, rgb(74, 196, 172) 100%);
   --detail-color-primary: linear-gradient(0deg, rgb(0, 197, 171) 0%, rgb(74, 196, 172) 100%);
}

.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;
}

.row.search-bar-bg
{
   padding: 3px;
   background: var(--searchbar-color-primary);
   margin: 0px;
   justify-content: center;
}

.search-bar-element
{
   place-content: center;
   height: 43px;
   background: var(--searchbar-color-primary);
   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; */
}

.bg-department-related
{
   opacity: 1;
   background: linear-gradient(180deg, rgba(107, 214, 180, 1) 0%, rgba(48, 134, 126, 1) 100%) !important;
}

th.mirror
{
   /* height: 35px; */

   background: rgb(118, 213, 193);
   background: var(--th-color-primary);
   color: #362a27 !important;
   font-weight: 400;
   text-align: center;
   vertical-align: middle;
   height: 50px !important;
}

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

th.two-row
{
   /* height: 35px; */

   background: var(--th-color-primary);
   color: #362a27 !important;
   font-weight: 400;
   text-align: center;
   vertical-align: middle;
   height: 50px !important;
}

th
{
   /* height: 35px; */

   background: rgb(118, 213, 193);
   background: var(--th-color-primary);
   color: #362a27 !important;
   font-weight: 500;
   text-align: center;
   vertical-align: middle;
   height: 50px !important;
}

.formatTable tr:nth-child( even)
{
   background-color: #cffff1;
   cursor: pointer !important;
}

.formatTable tr:hover
{
   background-color: #BBEBEB;
   cursor: pointer !important;
}

.card-dpt-detail:hover .hover-text
{
   display: block;
}

.tab-detail
{
   padding: 10px 20px;
   background: var(--detail-color-primary);
   color: #000;
}

.nav-link
{
   color: #000;
}

.tab-active
{
   border: 1px solid #00c5ab !important;
   border-bottom: 0 !important;
   background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%) !important;
   background-size: 200% auto;
   color: #fff !important;
   transition: .5s;
}

.tab-active:hover
{
   background-position: right center !important;
   color: #000 !important;
   text-decoration: none;
}

.tab-content .main-row
{
   padding: 10px 40px;
}

.pin-control
{
   width: 300px;
}

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

.import-step-1
{
   top: 25%;
   left: 4%;
   width: 150px;
   animation: fadeIn 2s forwards;
}

.import-step-2
{
   top: 50%;
   left: 22%;
   width: 340px;
   animation: fadeIn 2s forwards;
   animation-delay: 1.5s;
}

.import-step-3
{
   top: 29%;
   left: 50%;
   width: 250px;
   animation: fadeIn 1s forwards;
   animation-delay: 2.5s;
}

.import-step-4
{
   top: 65%;
   left: 66%;
   width: 300px;
   animation: fadeIn 1s forwards;
   animation-delay: 3.5s;
}