/*Colorize-------------------*/
/*--------------------------*/
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 a,
 li,
 div,
 small,
 span,
 strong {
  font-family: 'Inter', sans-serif;
 }

 /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap'); */

 body{
  font-family: "Poppins", sans-serif;
 }
 
#cron_string{
  background-color: #3C4E5B;
  color: white;
  border: 1px solid #fb6c1f;
}

 p {
   color: #727272;
   line-height: 2;
 }
 
 .browserupgrade {
   margin: 0.2em 0;
   background: #ccc;
   color: #000;
   padding: 0.2em 0;
 }
 
 *,
 *::before,
 *::after {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
 
 html,
 body {
   width: 100%;
   min-height: 100%;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
  
 }
 

.ui.container{width:auto!important;margin-left:150px!important;margin-right:20px!important;}

 /* custom scroll bar */
 ::-webkit-scrollbar {
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #F36B22; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ffb300; 
}

 
 body .wrapper {
   overflow-x: hidden;
   overflow-y: auto;
 }

 /* chart */




 .svg-icon {
   width: 20px;
   height: 20px;
   fill: #727272;
 }
 
 .ui.dropdown .icon svg.svg-icon {
   position: relative;
   top: -3px;
 }
 
 .content-table {
   overflow: auto;
 }

 .content-table table tr th{
  background-color: #CECECE;
 }
 
 .ext-toolbar {
   position: absolute;
   /* top: 0px; */
   z-index: 1;
 }
 
 @media (max-width: 576px) {
   .ext-toolbar {
     position: static;
   }
 }
 
 .navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 50px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   background: rgba(255, 255, 255, 0.36);
   backdrop-filter: blur(25.5px);
   z-index: 3;
 }
 
 
 .navbar .humburger-btn {
   position: relative;
   cursor: pointer;
   width: 25px;
   height: 25px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
 
 .navbar .humburger-btn span {
   display: block;
   width: 100%;
   height: 5px;
   border-radius: 2px;
   -webkit-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   background-color: #F36B22;
 }
 
 .navbar .humburger-btn span:nth-child(1) {
   width: 13px;
 }
 
 .navbar .humburger-btn span:nth-child(3) {
   width: 10px;
 }
 
 .navbar .humburger-btn:hover span {
   background-color: #242060;
 }
 
 .navbar .nav-item a {
   display: inline-block;
 }
 
 .navbar .nav-item a.custom-badge {
   position: relative;
 }
 
 .navbar .nav-item a.custom-badge:before {
   position: absolute;
   content: "";
   top: -5px;
   right: -2px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #fb6c1f;
 }
 
 .navbar .navbar-left {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   overflow: hidden;
   width: 240px;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   -webkit-box-shadow: 2px 0 10px -2px rgba(0, 0, 0, 0.1);
           box-shadow: 2px 0 10px -2px rgba(0, 0, 0, 0.1);
 }
 
 .navbar .navbar-left a.brand {
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   position: relative;
   height: 44px;
   opacity: 1;
   align-items: center;
   display: flex;
   justify-content: center;
 }
 
 .navbar .navbar-left a.brand img {
   display: block;
   width: 50%;

 }
 
 .navbar .navbar-left a.brand-thumb {
   position: absolute;
   width: 26px;
   top: -55px;
   left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   opacity: 0;
 }
 
 .navbar .navbar-left a.brand-thumb img {
   display: block;
   width: 100%;
 }
 
 .navbar .navbar-center {
   padding: 0 15px;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
  gap: 20px;
  font-size: 21px;
 }
 
 .navbar .navbar-right {
   padding: 0 15px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: flex-end;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
 .navbar .navbar-right .nav-item .ui.dropdown {
   color: #f25804;
   display: flex;
   justify-content: center;
   align-items: center;
 }


 /* edited */
 .nav-item .ui.label{
  display: flex;
  align-items: center;
 }

 /* edited end */

 .nav-item .ui.label:hover{
  background-color: #f25804;
 }


 .navbar .navbar-right .nav-item .ui.dropdown span img {
   width: 25px;
 }

 .navbar .navbar-right .nav-item .ui.dropdown span{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
 }


 .navbar .navbar-right .nav-item .ui.dropdown .menu {
   top: 50px;
 }
 
 .navbar .navbar-right .nav-item:not(:last-child) {
   margin-right: 30px;
 }
 
 .navbar .navbar-right .nav-item a:hover .svg-icon {
   fill: #fb6c1f;
 }
 
 @media (max-width: 480px) {
   .navbar .navbar-right .nav-item .ui.dropdown span {
     display: none;
   }
   .navbar .navbar-right .nav-item .ui.dropdown b {
     display: inline-block;
     vertical-align: middle;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background-size: cover;
     background-repeat: no-repeat;
   }
  
 }
 
 .navbar.shrink-logo .navbar-left {
   width: 50px;
   background-color: #252060;
   border-right: none;
 }
 
 .navbar.shrink-logo .navbar-left a.brand {
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   opacity: 0;
 }
 
 .navbar.shrink-logo .navbar-left a.brand-thumb {
   top: 50%;
   opacity: 1;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
 }
 
 .navbar.shrink-logo .humburger-btn span:nth-child(1) {
   -ms-flex-item-align: end;
       align-self: flex-end;
   width: 13px;
 }
 
 .navbar.shrink-logo .humburger-btn span:nth-child(3) {
   -ms-flex-item-align: end;
       align-self: flex-end;
   width: 10px;
 }
 
 .navbar.shrink-logo .humburger-btn span:nth-child(2) {
   width: 100%;
 }
 
 @media (max-width: 768px) {
   .navbar.shrink-logo .humburger-btn span:nth-child(1) {
     width: 100%;
   }
   .navbar.shrink-logo .humburger-btn span:nth-child(3) {
     width: 100%;
   }
 }
 
 @media (max-width: 1023px) {
   .navbar .navbar-right .nav-item .full-screen {
     display: none;
   }
 }
 
 .sidebar {
   position: fixed;
   top: 20px;
   left: 0;

   width: 240px;
   height: 100%;
   background-color: rgb(228, 228, 228);
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
  font-weight: 600;
   z-index: 2;
 }
 
 /* .sidebar .box-profile {
   position: relative;
   padding: 15px 15px 65px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
 } */
 
 .sidebar .box-profile figure {
   overflow: hidden;
   width: 90px;
   border-radius: 50%;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   -webkit-box-shadow: 0 0 0 6.5px rgba(0, 0, 0, 0.07);
           box-shadow: 0 0 0 6.5px rgba(0, 0, 0, 0.07);
 }
 
 .sidebar .box-profile figure img {
   display: block;
   width: 100%;
 }
 
 .sidebar .box-profile > div {
   position: absolute;
   width: 100%;
   bottom: 15px;
   opacity: 1;
   pointer-events: all;
   white-space: nowrap;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
 }
 
 .sidebar .box-profile strong,
 .sidebar .box-profile small {
   text-transform: capitalize;
   text-align: center;
   display: block;
 }
 
 .sidebar .box-profile strong {
   margin-bottom: 2px;
   font-size: 17px;
   font-weight: 700;
   color: #242060;
 }
 
 .sidebar .box-profile small {
   font-weight: 400;
   font-size: 13px;
   color: #727272;
 }
 
 .sidebar .box-list-menu {
   padding: 15px 15px;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   margin-top: 30px;
 }
 
 .sidebar .box-list-menu ul.sidemenu {
   padding: 0;
   margin: 0;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   list-style-type: none;
   white-space: nowrap;
   align-items: center;
 }
 
 .sidebar .box-list-menu ul.sidemenu li {
   position: relative;
   margin-bottom: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   
 }
 
 .sidebar .box-list-menu ul.sidemenu li svg,
 .sidebar .box-list-menu ul.sidemenu li span {
   display: inline-block;
   vertical-align: middle;
 }
 
 .sidebar .box-list-menu ul.sidemenu li a {
   padding: 8px 15px;
   color: #333333;
   display: flex;
   text-align: left;
 }

  #setting{
  margin-top: 45px;
 } 
 
 .sidebar .box-list-menu ul.sidemenu li a span {
   position: relative;
   opacity: 1;
   left: 0;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   font-size: 14px;
   margin-left: 10px;
 }
 
 
 .sidemenu a img span{
   display: flex;
   align-items: center;
 }
 
 /* .sidebar .box-list-menu ul.sidemenu li a:hover {
   color: #fb6c1f;
 }
 
 .sidebar .box-list-menu ul.sidemenu li a:hover .svg-icon {
   fill: #fb6c1f;
 } */
 
 .sidebar .box-list-menu ul.sidemenu li.has-submenu:after {
   position: absolute;
   content: "";
   top: 15px;
   right: 10px;
   width: 7px;
   height: 7px;
   border: 2px solid #727272;
   -webkit-transform-origin: center;
           transform-origin: center;
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
   border-left: none;
   border-top: none;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   border-bottom-right-radius: 1px;
 }
 
 .sidebar .box-list-menu ul.sidemenu li.has-submenu:hover:after {
   border-color: #242060;
 }
 
 .sidebar .box-list-menu ul.sidemenu li.has-submenu .sub-menu {
   /* display: block !important; */
   visibility: visible !important;
 }
 
 .sidebar .box-list-menu ul.sidemenu li.has-submenu .sub-menu a {
   position: relative;
   font-weight: 300;
   left: 32px;
   display: block;
   transition: .3s ease-in-out;
 }

 .sidebar .box-list-menu ul.sidemenu li.has-submenu .sub-menu a:hover{
  font-weight: 600;
 }
 
 .sidebar .box-list-menu ul.sidemenu li.has-submenu .sub-menu a.sub-active {
   /* color: #fb6c1f; */
   font-weight: 600;
 }
 
 .sidebar .box-list-menu ul.sidemenu li.has-submenu.rotate:after {
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
 }
 
 .sidebar .box-list-menu ul.sidemenu li.active:after {
   border-color: #fb6c1f;
 }
 
 .sidebar .box-list-menu ul.sidemenu li.active span {
   font-weight: 600;
   color: #3f3a83;
 }
 
 .sidebar .box-list-menu ul.sidemenu li.active > a {
   border-radius: 5px;
   background-color:#F36B22;
 }
 
 
 .sidebar .box-list-menu ul.sidemenu li.active > a .svg-icon {
   fill: #fb6c1f;
 }
 
 .sidebar.half {
  background-color: #4a4680;
   width: 50px;
   overflow-x: unset;
   overflow-y: unset;
 }
 
 .sidebar.half .box-profile {
   padding-bottom: 15px;
 }
 
 .sidebar.half .box-profile figure {
   margin: 0;
   width: 40px;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 
 .sidebar.half .box-profile > div {
   opacity: 0;
   bottom: -55px;
   pointer-events: none;
 }
 
 .sidebar.half .box-list-menu {
   padding: 0;
 }
 
 .box-list-menu .sidemenu a{
   text-align: center;
 }
 .sidebar.half .box-list-menu ul.sidemenu li a {
   border-radius: 0;
 }
 
 .sidebar.half .box-list-menu ul.sidemenu li a span {
   left: 10px;
   opacity: 0;
 }
 
 .sidebar.half .box-list-menu ul.sidemenu li.has-submenu:after {
   display: none;
 }
 
 .sidebar.half .box-list-menu ul.sidemenu li.has-submenu .sub-menu {
   position: absolute;
   top: 0;
   left: 50px;
   background-color: #fff;
   -webkit-box-shadow: 4px 4px 10px -4px rgba(0, 0, 0, 0.15);
           box-shadow: 4px 4px 10px -4px rgba(0, 0, 0, 0.15);
  
 }
 
 .sidebar.half .box-list-menu ul.sidemenu li.has-submenu .sub-menu a {
   left: 0;
 }
 
 @media (max-width: 768px) {
   .sidebar.half {
     position: fixed;
     width: 240px;
     left: -250px;
     height: calc(100vh - 50px);
   }
   .sidebar.half .box-profile {
     padding: 15px 15px 65px;
   }
   .sidebar.half .box-profile figure {
     margin: 0;
     width: 90px;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
     -webkit-box-shadow: 0 0 0 6.5px rgba(0, 0, 0, 0.07);
             box-shadow: 0 0 0 6.5px rgba(0, 0, 0, 0.07);
   }
   .sidebar.half .box-profile > div {
     width: 100%;
     bottom: 15px;
     opacity: 1;
     pointer-events: all;
     white-space: nowrap;
     -webkit-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
   }
 }
 
 .main-content {
   padding: 20px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   position: relative;
   margin-top: 50px;
   width: auto;
   margin-left: 240px;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
 }
 
 .main-content.full {
   margin-left: 50px;
 }
 
 @media (max-width: 768px) {
   .main-content {
     margin-left: 0;
   }
   .main-content.full {
     margin-left: 0;
   }
 }
 
 .transformer-tabs ul {
   list-style: none;
   padding: 0;
   margin: 0;
   border-bottom: 3px solid white;
 }
 
 .transformer-tabs li {
   padding: 0;
   display: inline-block;
   vertical-align: bottom;
 }
 
 .transformer-tabs li:not(:last-child) {
   margin-right: 3px;
 }
 
 .transformer-tabs a {
   display: inline-block;
   color: #ffffff;
   background-color: #F36B22;
   text-decoration: none;
   text-transform: capitalize;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   padding: 0.8rem 1.5rem;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
 }
 
 .transformer-tabs a svg {
   margin-right: 5px;
   display: inline-block;
   vertical-align: middle;
   fill: #ffffff;
 }
 
 .transformer-tabs a.tab-on {
   color: #fb6c1f;
   position: relative;
   bottom: -3px;
   border-bottom: 3px solid transparent;
   background-color: #fff;
   box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }
 
 .transformer-tabs a.tab-on svg {
   fill: #fb6c1f;
 }
 
 @media (max-width: 700px) {
   .transformer-tabs ul {
     border-bottom: 0;
     overflow: hidden;
     position: relative;
     background-color: #fff;
   }
   .transformer-tabs ul::after {
     content: "";
     position: absolute;
     top: 15px;
     right: 20px;
     width: 7px;
     height: 7px;
     border: 2px solid #727272;
     -webkit-transform-origin: center;
             transform-origin: center;
     -webkit-transform: rotate(45deg);
             transform: rotate(45deg);
     border-left: none;
     border-top: none;
     border-bottom-right-radius: 1px;
     z-index: 2;
     pointer-events: none;
   }
   .transformer-tabs ul.open a {
     padding: 0.5rem;
     position: relative;
     display: block;
   }
   .transformer-tabs li {
     display: block;
   }
   .transformer-tabs a {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
   .transformer-tabs a.tab-on {
     border: 0;
     z-index: 1;
     background-color: #fff;
   }
 }
 
 .tabs > div {
   display: none;
   padding: 1rem;
   background-color: #fff;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
 .tabs > .tab-on {
   display: block;
 }
 
 ul.list-icon {
   padding: 0;
   margin: 0;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   list-style-type: none;
   white-space: nowrap;
 }
 
 ul.list-icon li {
   position: relative;
   margin-bottom: 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
 
 ul.list-icon li a {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   padding: 10px 15px;
   color: #727272;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
 
 ul.list-icon li a span {
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   position: relative;
   font-size: 14px;
   margin-left: 10px;
   white-space: pre-wrap;
 }
 
 ul.list-icon li a .svg-icon {
   fill: #fb6c1f;
 }
 
 .flexi-table {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
 
 .flexi-table .flexi-tb-row {
   width: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
 .flexi-table .flexi-tb-row.header {
   position: relative;
 }
 
 .flexi-table .flexi-tb-row.header:before, .flexi-table .flexi-tb-row.header:after {
   position: absolute;
   content: "";
   left: 0;
   width: 100%;
   background-color: #ccc;
 }
 
 .flexi-table .flexi-tb-row.header:before {
   bottom: 4px;
   height: 1px;
 }
 
 .flexi-table .flexi-tb-row.header:after {
   bottom: 0;
   height: 2px;
 }
 
 @media (max-width: 768px) {
   .flexi-table .flexi-tb-row.header {
     padding: 0;
     height: 0;
     display: none;
   }
 }
 
 .flexi-table .flexi-tb-row.tb-content {
   background-color: #fff;
 }
 
 .flexi-table .flexi-tb-row.tb-content:not(:last-child) {
   margin-bottom: 10px;
 }
 
 .flexi-table .flexi-tb-row.tb-content > .flexi-tb-cell {
   color: #727272;
   font-weight: 400;
   font-size: 14px;
 }
 
 .flexi-table .flexi-tb-row .flexi-tb-cell {
   font-family: "Poppins", sans-serif;
   position: relative;
   line-height: 1.5;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   padding: 10px 15px;
 }
 
 .flexi-table .flexi-tb-row .flexi-tb-cell:first-child {
   width: 100%;
   max-width: 200px;
 }
 
 .flexi-table .flexi-tb-row .flexi-tb-cell:last-child {
   -webkit-box-flex: initial;
       -ms-flex: initial;
           flex: initial;
   text-align: right;
   font-size: 12px;
 }
 
 @media (max-width: 768px) {
   .flexi-table .flexi-tb-row .flexi-tb-cell {
     padding-top: 16px;
     padding-bottom: 16px;
     display: block;
     border: none;
     font-size: 16px;
     font-weight: 500;
   }
   .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(1) {
     padding-left: 20px;
   }
   .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(2) {
     text-align: left;
   }
   .flexi-table .flexi-tb-row .flexi-tb-cell:last-child {
     text-align: left;
   }
   .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(1), .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(2), .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(3), .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(4), .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(5), .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(6), .flexi-table .flexi-tb-row .flexi-tb-cell:nth-child(7) {
     max-width: unset;
   }
   .flexi-table .flexi-tb-row .flexi-tb-cell:before {
     content: attr(data-title);
     top: 0;
     font-family: "Poppins", sans-serif;
     text-transform: uppercase;
     font-size: 10px;
     font-weight: 400;
     display: block;
     color: #828282;
     margin-bottom: 10px;
   }
 }
 
 .flexi-table .flexi-tb-row:first-child .flexi-tb-cell {
   font-family: "Poppins", sans-serif;
   color: #727272;
 }
 
 .flexi-table .flexi-tb-row:last-child .flexi-tb-cell {
   border: none;
 }
 
 @media (max-width: 768px) {
   .flexi-table {
     display: block;
   }
   .flexi-table .flexi-tb-row {
     display: block;
     border-bottom: 1px solid #f2f2f2;
     padding-bottom: 18px;
     padding-top: 30px;
     padding-right: 15px;
   }
   .flexi-table .flexi-tb-row:nth-child(even) {
     background-color: #f0f0f0;
   }
 }
 
 .preview-data {
   white-space: initial;
 }
 
 .preview-data dt {
   margin-bottom: 5px;
   font-family: "Poppins", sans-serif;
   font-size: 12px;
   line-height: 18px;
   text-transform: capitalize;
   /* identical to box height */
   color: #aaaaaa;
 }
 
 .preview-data dd {
   margin: 0;
   font-weight: 500;
   font-size: 16px;
   color: #333;
   line-height: 1.5;
 }
 
 .preview-data dd:not(:last-child) {
   margin-bottom: 15px;
 }
 
 .preview-data dd.spanText span {
   display: inline-block;
   padding: 3px 10px;
   margin-bottom: 3px;
   border-radius: 5px;
   background-color: #3ec3bd;
   color: #ffffff;
 }
 
 .preview-data dd.spanText span:not(:last-child) {
   margin-right: 3px;
 }
 
 .step-progress {
   padding: 20px;
   width: 100%;
   border-radius: 5px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   background-color: #2770dd;
 }
 
 .step-progress article {
   margin-bottom: 10px;
 }
 
 .step-progress article h4 {
   color: #fff;
   margin-bottom: 0;
 }
 
 .step-progress article p {
   /* color: rgba(255, 255, 255, 0.75); */
   color: #fff;
   font-size: 12px;
 }
 
 .step-progress > .step-wrapper {
   padding-left: 0;
   width: 100%;
   position: relative;
   counter-reset: step;
   z-index: 1;
 }
 
 .step-progress > .step-wrapper li {
   position: relative;
   list-style: none;
   float: left;
   width: calc(100% / 4);
   color: #92bdff;
   text-align: center;
 }
 
 .step-progress > .step-wrapper li span:before {
   position: absolute;
   content: "";
   width: calc(100% - 39px);
   height: 5px;
   background: #fff;
   top: 19px;
   -webkit-transform-origin: left center;
            transform-origin: left center;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   -webkit-transform: scaleX(0);
            transform: scaleX(0);
   /*half of height Parent (li) */
   left: calc(-50% + 19px);
   z-index: 0;
 }
 
 .step-progress > .step-wrapper li:before {
   content: counter(step);
   counter-increment: step;
   width: 40px;
   height: 40px;
   border: 2px solid #fff;
   -webkit-box-shadow: 0px 4px 15px -2px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 4px 15px -2px rgba(0, 0, 0, 0.25);
   display: block;
   text-align: center;
   margin: 0 auto 10px auto;
   color: #fff;
   border-radius: 50%;
   background-color: #2770dd;
   /* Center # in circle */
   line-height: 39px;
   z-index: 3;
 }
 
 .step-progress > .step-wrapper li:after {
   content: "";
   position: absolute;
   width: 100%;
   height: 5px;
   background: #579aff;
   top: 19px;
   /*half of height Parent (li) */
   left: -50%;
   z-index: -1;
 }
 
 .step-progress > .step-wrapper li:first-child:after {
   content: none;
 }
 
 .step-progress > .step-wrapper li:first-child span:before {
   display: none;
 }
 
 .step-progress > .step-wrapper li.ok {
   font-weight: 600;
   color: #fff;
 }
 
 .step-progress > .step-wrapper li.ok:before {
   font-family: "Font Awesome 5 Free";
   content: "\f00c";
   background: #fff;
   color: #2770dd;
 }
 
 .step-progress > .step-wrapper li.ok span:before {
   -webkit-transform: scaleX(1);
            transform: scaleX(1);
 }
 
 .step-progress > .step-wrapper li.process {
   font-weight: 600;
   color: #fff;
 }
 
 .step-progress > .step-wrapper li.process:before {
   font-family: "Font Awesome 5 Free";
   content: "\f021";
   background: #fff;
   color: #2770dd;
   -webkit-animation: fa-spin 2s infinite linear;
            animation: fa-spin 2s infinite linear;
 }
 
 .step-progress > .step-wrapper li.process + li:after {
   border-radius: 50px;
 }
 
 .step-progress > .step-wrapper li.process span:before {
   -webkit-transform: scaleX(1);
            transform: scaleX(1);
 }
 
 @-webkit-keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 @keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 
 /* .page-wrapper {
   width: 100%;
 }
 
 .page-wrapper .page-container {
   padding: 0 0 20px;
   position: relative;
   width: 100%;
   height: 150px;
   overflow-x: hidden;
 }
 
 .page-wrapper .page-container .page {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
 }
 
 .page-wrapper .page-container .page#page2 {
   left: 100%;
 }
 .page-wrapper .page-container .page#pageMulti2 {
   left: 100%;
 }
 
 .page-wrapper .page-container .page#page3 {
   left: 100%;
 }
 
 .page-wrapper .page-container .page#pageMulti3 {
   left: 100%;
 }
 
 .page-wrapper .page-container .page#page4 {
   left: 100%;
 } */
 
 .text-info-child {
   /* padding: 10px; */
   width: auto;
   display: flex;
   /* flex-direction: column; */
   justify-content: space-between;
 }
 
 .text-info-child .item {
   padding: 5px;
 }
 
 .text-info-child .item:not(:last-child) {
   flex: 1;
   margin-bottom: 7px;
 }
 
 .text-info-child .item:last-child {
   min-width: 280px;
   max-width: 280px;
 }
 
 .text-info-child .item strong {
   display: block;
   margin-bottom: 5px;
   font-size: 13px;
   text-transform: capitaliz
 }
 
 .text-info-child .item p {
   font-size: 13px;
 }
 
 .text-info-child .item p span {
   padding: 3px 10px;
   border-radius: 5px;
   background-color: #3ec3bd;
   color: #ffffff;
 }
 
 .text-info-child .item p span:not(:last-child) {
   margin-right: 5px;
 }
 
 .checklist-custom {
   display: inline-block;
   vertical-align: middle;
 }
 
 .checklist-custom .toggleButton {
   cursor: pointer;
   display: block;
   -webkit-transform-origin: 50% 50%;
           transform-origin: 50% 50%;
   -webkit-transform-style: preserve-3d;
           transform-style: preserve-3d;
   -webkit-transition: -webkit-transform 0.14s ease;
   transition: -webkit-transform 0.14s ease;
   transition: transform 0.14s ease;
   transition: transform 0.14s ease, -webkit-transform 0.14s ease;
 }
 
 .checklist-custom .toggleButton:active {
   -webkit-transform: rotateX(30deg);
           transform: rotateX(30deg);
 }
 
 .checklist-custom .toggleButton input {
   display: none;
 }
 
 .checklist-custom .toggleButton input + div {
   border: 3px solid rgba(251, 108, 31, 0.3);
   border-radius: 50%;
   position: relative;
   width: 25px;
   height: 25px;
 }
 
 .checklist-custom .toggleButton input + div svg {
   fill: none;
   stroke-width: 3.6;
   stroke: rgba(251, 108, 31, 0.3);
   fill: #fff;
   stroke-linecap: round;
   stroke-linejoin: round;
   width: 25px;
   height: 25px;
   display: block;
   position: absolute;
   left: -3px;
   top: -3px;
   right: -3px;
   bottom: -3px;
   z-index: 1;
   stroke-dashoffset: 124.6;
   stroke-dasharray: 0 162.6 133 29.6;
   -webkit-transition: all 0.4s ease 0s;
   transition: all 0.4s ease 0s;
 }
 
 .checklist-custom .toggleButton input:checked + div svg {
   stroke: #fb6c1f;
   stroke-dashoffset: 162.6;
   stroke-dasharray: 0 162.6 28 134.6;
   -webkit-transition: all 0.4s ease 0.2s;
   transition: all 0.4s ease 0.2s;
 }
 
 ul.check {
   padding-left: 0;
   margin-bottom: 30px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
 ul.check li {
   cursor: pointer;
   padding: 5px 10px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   -webkit-box-shadow: 0px 5px 25px -1px rgba(0, 0, 0, 0.15);
           box-shadow: 0px 5px 25px -1px rgba(0, 0, 0, 0.15);
   border-radius: 5px;
 }
 
 ul.check li .checklist-title {
   margin-right: 10px;
 }
 
 ul.check li .checklist-title strong {
   font-weight: 500;
   color: #fb6c1f;
 }
 
 ul.check li:hover {
   background-color: #fff0e9;
 }
 
 ul.check li:hover .checklist-title strong {
   color: #fb6c1f;
 }
 
 ul.check li:not(:last-child) {
   margin-right: 10px;
 }
 
/* login */


.background-login{
  display: grid;
  height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.background-login img{
  width: 100%;
  align-items: center;

}



/* @media only screen and (max-width: 480px) {
  .background-login img {
    width: 100%;
    object-fit: cover;
  }
} */
 /* .login {
  width: 100%;
  display: flex;
 } */

 
 /* .login img .bg-login img{
  width: 100%;
  object-fit: cover;
 } */


/*  
 .login > .left {
   position: relative;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
   height: 100%;
   background: radial-gradient(50% 50% at 49.94% 50%, #ff9900 0%, #ec5a0c 100%);
   background-blend-mode: screen, color-dodge;
   background-size: auto;
   background-repeat: no-repeat;
 } */
 

 #modal1
 {
  display: none;
 }
 #modal2
 {
  display: none;
 }


 .login > .left .greeting {
  
   padding: 100px 50px;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   text-align: center;
   /*background: rgba(255, 255, 255, 0);
   backdrop-filter: blur(10px); 
   border-radius: 30px;*/
 }
 
 .login > .left .greeting strong,
 .login > .left .greeting p {
   text-transform: capitalize;
   color: #fff;
 }

 
 .login > .left .greeting p {
   font-size: 17px;
 }
 



 .login .right > svg {
   position: absolute;
   bottom: 0;
   left: -198px;
   height: 100%;
 }
/*  
 .login .right .login-heading {
   -ms-flex-item-align: end;
       align-self: flex-end;
     position: relative;
     z-index: 2;
    -ms-flex-item-align: center;
       align-self: center;
 } */

 .login .greeting .login-heading img{
    width: 100%;
    margin-bottom: 10px;
 }

 
 .login .right .login-body {
   position: relative;
   width: 100%;
   max-width: 370px;
   z-index: 2;
 }
 
 .login .right .login-body h4 {
   margin-bottom: 20px;
   color: #333;
   text-align: center;
 }
 
 .login .right .login-body form .field {
   margin-bottom: 20px;
 }
 
 .login .right .login-footer .copyright {
   position: relative;
   text-align: center;
   margin-top: 50px;
   font-size: 13px;
   color: #e0e0e0;
   z-index: 2;
 }


/* 
 @media only screen and (max-width: 600px) {
  .nav-item .ui .item .content{
    display: none !important ;
   }

   .nav-item .ui{
    text-align: center;
      width: 70%;
      align-items: center;
   }

   .nav-item .ui .item img{
    width: 30%;
   }

   .nav-item .ui{
    float: right;
    right: 0;
   }
  
   .container-calendar{
    align-items: center;
   }
   .container-calendar .display-date{
    font-size: 8px;
    font-weight: 200;
   }

   .container-calendar .display-date{
    display: none !important;
   }
   .nav-item .item .angle{
    display: none !important;
   }

   .home-dashboard .block-info{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
   }

   .home-dashboard .block-info .block-info-item .left{
    font-size: 10px;
   }

   
 }  */

 /* calendar default html */
.container-calendar{
  display: flex;
  justify-content: space-around;
  padding: 45px 40px;
  
}
 .display-date {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  padding: 0 15px;
}

.display-time {
  display: flex;
  font-size: 13px;
  transition: ease-in-out 0.1s;
  transition-property: background, box-shadow, color;
  color: gray;
}


 /* calendar default html */
 
 @media (max-width: 1024px) {
   .login .right {
     width: 100%;
   }
   
 }
 

 .home-dashboard{
    animation-name: dash-animation;
    animation-duration: 3s;
 }

@keyframes dash-animation {
  
    from{
      opacity: 0;
    }
    to{
      opacity: 100%;
    }
}
 
 .home-dashboard #block-info {
   padding: 0;
   margin: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
           flex-direction: row;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   list-style: none;
   margin-bottom: 30px;
 }

 .home-dashboard #block-info-column{


  background-color: #fff;
  padding: 20px;
  display: flex;
  gap: 20px;
  border-radius: 8px;
  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
   list-style: none;
   margin-bottom: 30px;
 }
 
 .home-dashboard #block-info .block-info-item {
   margin-right: 1.5%;
   width: 15%;
 }
 .home-dashboard #block-info-column .block-info-item {
   margin-right: 1.5%;
   width: 15%;
 }
 
 .home-dashboard #block-info .block-info-item {
   padding: 5px 20px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   border-radius: 8px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
  height: 10%;

         
 }
 
 .home-dashboard #block-info-column .block-info-item {
   padding: 5px 20px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   border-radius: 8px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
  height: 10%;

           box-shadow: 4px 3px 15px -6px rgba(0, 0, 0, 0.25);
 }
 

 .home-dashboard #block-info .block-info-item {
  transition: .4s ease-in-out;
  border: 1px solid #2A3F4F;
 }

 .home-dashboard #block-info .block-info-item:hover{
  box-shadow: 4px 3px 15px -6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
 }

 
 .home-dashboard #block-info-column .block-info-item:nth-child(1) {
  background: orange 
 }
 
 .home-dashboard #block-info .block-info-item .left span,
 .home-dashboard #block-info .block-info-item .left strong {
   color: #2A3F4F;
   display: block;
   font-weight: 600;
   font-family: 'Inter', sans-serif;
 }
 
 .home-dashboard #block-info-column .block-info-item .left span,
 .home-dashboard #block-info-column .block-info-item .left strong {
   color: white;
   display: block;
   font-family: 'Inter', sans-serif;
 }
 
 .home-dashboard #block-info .block-info-item .left span {
   margin-bottom: 5px;
   text-transform: capitalize;
 }
 .home-dashboard #block-info-column .block-info-item .left span {
   text-transform: capitalize;
 }
 
 .home-dashboard #block-info .block-info-item .left strong {
   display: block;
   font-size: 48px;
   font-weight: 600;
   line-height: 1;
 }
 .home-dashboard #block-info-column .block-info-item .right strong {
   display: block;
   font-size: 25px;
   font-weight: 600;
   line-height: 1;
   color: white;
 }
 
 .home-dashboard #block-info .block-info-item .right div {
  color: #2A3F4F;
  font-size: 25px;
   width: 52px;
   height: 52px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
 }
 
 .home-dashboard #block-info .block-info-item .right div .svg-icon {
   fill: #fff;
 }


.ui.card .content.header{
  border-bottom: 1px solid #f25804;
  grid-template-columns: 2fr 2fr;
  display: grid;
  align-items: center;
  border-radius: 8px;
}

.diagram_border{
  border-radius: 15px;
}

.filter .select .button{
  background-color: #e4e4e4;
  transition: .3s;
  outline: none;
  color: rgb(28, 76, 110);
  margin-bottom: 20px;
}
.filter .select .button:hover{
  color: rgb(255, 255, 255);
  background: rgb(28, 76, 110);
}




#SingleChart{
  cursor: pointer;
}

#MultiChart{
  cursor: pointer;
}

.modalstatus {
  overflow-y: hidden;
  padding: 50px;
  width: 100%;
}

.wrap-text {
  max-width:500px;
  white-space: normal; /* Allows text to wrap */
  word-wrap: break-word; /* Breaks words that are too long to fit */
  word-break: break-all; /* Breaks at any character for very long strings without spaces */
}

 
 @media (max-width: 576px) {
  

   .home-dashboard #block-info {
     padding: 0;
     margin: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
         -ms-flex-direction: row;
             flex-direction: row;
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
     list-style: none;
   }
   .home-dashboard #block-info .block-info-item {
     margin-right: 2.5%;
     margin-bottom: 0px;
     width: 48.75%;
   }
   .home-dashboard #block-info .block-info-item:nth-child(2n) {
     margin-right: 0;
   }
   .home-dashboard #block-info .block-info-item {
     padding: 10px;
     margin-bottom: 7px;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
   }
   .home-dashboard #block-info .block-info-item .left {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-ordinal-group: 3;
         -ms-flex-order: 2;
             order: 2;
     width: 100%;
     -webkit-box-pack: justify;
         -ms-flex-pack: justify;
             justify-content: space-between;
   }
   .home-dashboard #block-info .block-info-item .left span {
     max-width: 65px;
   }
   .home-dashboard #block-info .block-info-item .left strong {
     font-size: 35px;
   }
   .home-dashboard #block-info .block-info-item .right {
     margin-bottom: 15px;
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
             order: 1;
   }
 }
 
 @media (max-width: 992px) {
   .ui.horizontal.cards .card {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
   }
   .ui.horizontal.cards .card .image {
     width: auto;
   }
 }
 
 @media (max-width: 768px) {
   .ui.horizontal.cards .card {
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
   }
   .ui.horizontal.cards .card .image {
     width: 100%;
   }
 }
 
 .inbox .ui.card .content.inbox-wrapper {
   background-color: #273B4A;
 }
 
 .inbox .ui.card .content.inbox-wrapper .flexi-table .tb-content .flexi-tb-cell figure {
   display: inline-block;
   vertical-align: middle;
   margin: 0 10px 0 0;
   width: 50px;
   border-radius: 50%;
   overflow: hidden;
 }
 
 .inbox .ui.card .content.inbox-wrapper .flexi-table .tb-content .flexi-tb-cell figure img {
   display: block;
   width: 100%;
 }
 
 .settings .description {
   margin-bottom: 15px;
 }
 
 .settings .description .ui.header {
   font-family: "Poppins", sans-serif;
   font-size: 14px;
   font-weight: 500;
   margin: 0 0 7px;
 }
 
 .settings .description p {
   margin-bottom: 20px;
   font-size: 12px;
 }
 
 @media (max-width: 576px) {
   #page3 .column:nth-child(2) {
     padding-top: 0;
   }
   #page3 .column:nth-child(2) .preview-data {
     margin-top: 0;
   }
 }
 
 .ui.card {
   width: auto;
   -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);
           box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);
 }
 
 .ui.card .content .caption {
   font-family: "Poppins", sans-serif;
   font-size: 17px;
   font-weight: 600;
 }
 
 .ui.cards .card {
   -webkit-box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);
           box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.15);
           
 }
 
 .ui.dropdown .menu {
   border: none;
 }
 
 .ui.dropdown.notif .menu {
   min-width: auto;
   /* white-space: pre-wrap; */
 }
 
 .ui.dropdown.notif .menu > * {
   white-space: initial;
 }
 
 
 .ui.dropdown.notif .menu > .item:not(:last-child) {
   border-bottom: 1px solid #ccc;
 }
 
 .ui.dropdown.notif .menu > .item h4.ui.header {
   margin-bottom: 2px;
 }
 
 .ui.dropdown.notif .ui.left.menu {
   /* width: 100%; */
   width: 17rem;
   max-width: 250px;
 }
 .ui.whiteBg:not(.animated):not(.compact) > span {
   position: relative;
   left: -22px;
 }
 
 /* .ui.search.selection.dropdown > input.search {
   padding-left: 35px;
 } */
 
 /* .ui.input.left.icon > input[type='text'] {
   padding-left: 16px;
 } */
 
 span.default.text {
   color: #999;
 }
 
 .ui.input.left.icon svg {
   position: absolute;
   top: 8px;
   left: 11px;
   width: 16px;
   fill: #fb6c1f;
 }
 
 
 .ui.input input[type="text"],
 .ui.input input[type="password"] {
   background: #ffffff;
   -webkit-box-shadow: 0 15px 15px -10px rgb(0, 0, 0);
           box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);
   border: 1px solid #F29339;
   
 }
 
 .ui.input input[type="text"]:focus,
 .ui.input input[type="password"]:focus {
   -webkit-box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);
 }
 
 .ui.whiteBg:not(.animated):not(.compact) {
   width: 100%;
   background-color: rgb(255, 255, 255);
   padding-left: 37px !important;
   -webkit-box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);
           box-shadow: 0 15px 15px -10px rgba(0, 0, 0, 0.1);
 }
 
 .ui.whiteBg:not(.animated):not(.compact) > span {
   font-size: 12px;
 }
 
 .ui.whiteBg:not(.animated):not(.compact) .icon {
   background-color: #fff;
 }
 
 .ui.whiteBg:not(.animated):not(.compact) .icon svg {
   fill: #fb6c1f;
 }
 
 .ui.whiteBg:not(.animated):not(.compact) .arrow {
   position: absolute;
   top: 50%;
   right: 5px;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
 
 .ui.button {
   padding: 8px 16px;
   text-transform: capitalize;
   font-family: "Poppins", sans-serif;
   font-size: 16px;
   font-weight: 500;
 }

 .txt-center .ui.button{
  padding: 8px 125px;
  width: 100%;
  text-align: center;
 }
 
 .ui.button svg {
   width: 16px;
   display: inline-block;
   vertical-align: middle;
 }
 
 .ui.button.primary {
   color: #fff;
  margin-top: 20px;
 }
 

 
 .ui.button.primary.basic {
   -webkit-box-shadow: 0 0 0 1px #fb6c1f;
           box-shadow: 0 0 0 1px #fb6c1f;
   color: #fb6c1f;
 }
 
 .ui.button.primary.basic:hover, .ui.button.primary.basic:focus {
   background-color: #f25804;
   -webkit-box-shadow: unset;
           box-shadow: unset;
   color: #fff;
 }
 
 .ui.button.orange {
   color: #fb6c1f;
   background-color: #fff0e9;
 }
 
 .ui.button.orange svg {
   fill: #fb6c1f;
 }
 
 .ui.button.orange:hover, .ui.button.orange:focus {
   color: #fb6c1f;
   background-color: #ffdfd0;
 }
 
 .ui.button.blue{
  align-items: center;
  color: #252060;
  background-color: rgb(49, 49, 237);
 }

 .ui.button.blue svg{
  fill: white;
 }

 .ui.button.teal {
   color: #1e8e3e;
   background-color: #d2ffdf;
 }
 
 .ui.button.teal svg {
   fill: #1e8e3e;
 }
 
 .ui.button.teal:hover, .ui.button.teal:focus {
   color: #1e8e3e;
   background-color: #b9ffcd;
 }
 
 .ui.modal .content {
   padding: 20px 20px 25px;

 }
 
 .ui.modal > .header:not(.ui) {
   position: relative;
   font-family: "Poppins", sans-serif;
   font-size: 17px;
   font-weight: 500;
   border-bottom: none;

 }
 
 .ui.modal .close {
   top: 10px;
   right: 10px;
   color: #000000;
 }
 
 .ui.modal .description .ui.header {
   font-family: "Poppins", sans-serif;
   font-size: 14px;
   font-weight: 500;
   margin: 0 0 7px;
 }
 
 .ui.modal .description p {
   margin-bottom: 20px;
   font-size: 12px;
 }
 
 .ui.modal .actions {
   border-top: none;
 }
 
 h4.ui.header .content {
   font-weight: 500;
   color: #727272;
 }
 
 h4.ui.header .content .ui.inline.dropdown {
   font-weight: 600;
   color: #333;
 }
 
 .ui.toggle.checkbox input:checked ~ label:before,
 .ui.toggle.checkbox input:focus:checked ~ .box:before,
 .ui.toggle.checkbox input:focus:checked ~ label:before {
   background-color: #3bc138 !important;
 }
 
 .dt-custom thead tr th {
   border: 1px solid white;
   background-color: #efefef;
   font-family: "Poppins", sans-serif;
   font-weight: 500;
 }
 
 .dt-custom thead tr th:not(:last-child) {
   border: 1px solid white;
   border-right: none;
 }
 
 .dt-custom.dataTable {
   margin-bottom: 20px;
 }
 
 .dt-custom.dataTable.no-footer {
   border: none;
 }
 
 .dataTables_wrapper .button {
   padding: 6px 12px;
 }
 
 .dataTables_wrapper [class*='toolbar'] {
   float: left;
 }
 
 table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
   background-color: transparent;
 }
 
 .ui.form .field.error input:not([type]), .ui.form .field.error input[type=date], .ui.form .field.error input[type=datetime-local], .ui.form .field.error input[type=email], .ui.form .field.error input[type=file], .ui.form .field.error input[type=number], .ui.form .field.error input[type=password], .ui.form .field.error input[type=search], .ui.form .field.error input[type=tel], .ui.form .field.error input[type=text], .ui.form .field.error input[type=time], .ui.form .field.error input[type=url], .ui.form .field.error select, .ui.form .field.error textarea, .ui.form .fields.error .field input:not([type]), .ui.form .fields.error .field input[type=date], .ui.form .fields.error .field input[type=datetime-local], .ui.form .fields.error .field input[type=email], .ui.form .fields.error .field input[type=file], .ui.form .fields.error .field input[type=number], .ui.form .fields.error .field input[type=password], .ui.form .fields.error .field input[type=search], .ui.form .fields.error .field input[type=tel], .ui.form .fields.error .field input[type=text], .ui.form .fields.error .field input[type=time], .ui.form .fields.error .field input[type=url], .ui.form .fields.error .field select, .ui.form .fields.error .field textarea {
     border-width: 1px;
     border-style: solid;
     border-color: #d68a8a;
 }
 
 /* #datatables_buttons_info h2 {
   font-family: 'Poppins';
 } */
 
 @media (max-width: 576px) {
   .dataTables_wrapper .toolbar {
     float: unset;
     margin-bottom: 25px;
   }
 }
 
 .dataTables_wrapper .dataTables_length,
 .dataTables_wrapper .dataTables_filter {
   margin-bottom: 15px;
 }
 
 .dataTables_wrapper .dataTables_length label,
 .dataTables_wrapper .dataTables_filter label {
   font-family: "Poppins", sans-serif;
   font-weight: 500;
 }
 
 .dataTables_wrapper .dataTables_length input,
 .dataTables_wrapper .dataTables_filter input {
   margin-left: 10px;
   border: 1px solid #dedede;
 }
 
 .dataTables_wrapper .dataTables_info {
   font-size: 12px;
   color: #727272;
 }
 
 .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button.previous:hover, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button.next:hover {
   color: #fb6c1f !important;
   background: transparent;
   border: none;
 }
 
 .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button.previous.disabled, .dataTables_wrapper .dataTables_paginate.paging_simple_numbers a.paginate_button.next.disabled {
   color: #aeaeae !important;
 }
 
 .dataTables_wrapper .dataTables_paginate.paging_simple_numbers span a.paginate_button:hover {
   color: #fb6c1f !important;
   background: transparent;
   border: none;
 }
 
 .dataTables_wrapper .dataTables_paginate.paging_simple_numbers span a.paginate_button.current {
   background: -webkit-gradient(linear, left top, left bottom, from(#fb8647), to(#f57129));
   background: linear-gradient(180deg, #fb8647 0%, #f57129 100%);
   border: 1px solid #fb6c1f;
   border-radius: 2px;
   color: #fff !important;
   font-weight: 600;
 }
 
 .posa {
   position: absolute;
 }
 
 .posr {
   position: relative;
 }
 
 .pdx-10 {
   padding: 0 10px 0 !important;
 }
 
 .pdy-10 {
   padding: 10px 0 10px 0 !important;
 }
 
 .pdt-10 {
   padding-top: 10px !important;
 }
 
 .pdr-10 {
   padding-right: 10px !important;
 }
 
 .pdb-10 {
   padding-bottom: 10px !important;
 }
 
 .pdl-10 {
   padding-left: 10px !important;
 }
 
 .pdx-20 {
   padding: 0 20px 0 !important;
 }
 
 .pdy-20 {
   padding: 20px 0 20px 0 !important;
 }
 
 .pdt-20 {
   padding-top: 20px !important;
 }
 
 .pdr-20 {
   padding-right: 20px !important;
 }
 
 .pdb-20 {
   padding-bottom: 20px !important;
 }
 
 .pdl-20 {
   padding-left: 20px !important;
 }
 
 .pdx-30 {
   padding: 0 30px 0 !important;
 }
 
 .pdy-30 {
   padding: 30px 0 30px 0 !important;
 }
 
 .pdt-30 {
   padding-top: 30px !important;
 }
 
 .pdr-30 {
   padding-right: 30px !important;
 }
 
 .pdb-30 {
   padding-bottom: 30px !important;
 }
 
 .pdl-30 {
   padding-left: 30px !important;
 }
 
 .pdx-40 {
   padding: 0 40px 0 !important;
 }
 
 .pdy-40 {
   padding: 40px 0 40px 0 !important;
 }
 
 .pdt-40 {
   padding-top: 40px !important;
 }
 
 .pdr-40 {
   padding-right: 40px !important;
 }
 
 .pdb-40 {
   padding-bottom: 40px !important;
 }
 
 .pdl-40 {
   padding-left: 40px !important;
 }
 
 .pdx-50 {
   padding: 0 50px 0 !important;
 }
 
 .pdy-50 {
   padding: 50px 0 50px 0 !important;
 }
 
 .pdt-50 {
   padding-top: 50px !important;
 }
 
 .pdr-50 {
   padding-right: 50px !important;
 }
 
 .pdb-50 {
   padding-bottom: 50px !important;
 }
 
 .pdl-50 {
   padding-left: 50px !important;
 }
 
 .pdx-60 {
   padding: 0 60px 0 !important;
 }
 
 .pdy-60 {
   padding: 60px 0 60px 0 !important;
 }
 
 .pdt-60 {
   padding-top: 60px !important;
 }
 
 .pdr-60 {
   padding-right: 60px !important;
 }
 
 .pdb-60 {
   padding-bottom: 60px !important;
 }
 
 .pdl-60 {
   padding-left: 60px !important;
 }
 
 .pdx-70 {
   padding: 0 70px 0 !important;
 }
 
 .pdy-70 {
   padding: 70px 0 70px 0 !important;
 }
 
 .pdt-70 {
   padding-top: 70px !important;
 }
 
 .pdr-70 {
   padding-right: 70px !important;
 }
 
 .pdb-70 {
   padding-bottom: 70px !important;
 }
 
 .pdl-70 {
   padding-left: 70px !important;
 }
 
 .pdx-80 {
   padding: 0 80px 0 !important;
 }
 
 .pdy-80 {
   padding: 80px 0 80px 0 !important;
 }
 
 .pdt-80 {
   padding-top: 80px !important;
 }
 
 .pdr-80 {
   padding-right: 80px !important;
 }
 
 .pdb-80 {
   padding-bottom: 80px !important;
 }
 
 .pdl-80 {
   padding-left: 80px !important;
 }
 
 .pdx-90 {
   padding: 0 90px 0 !important;
 }
 
 .pdy-90 {
   padding: 90px 0 90px 0 !important;
 }
 
 .pdt-90 {
   padding-top: 90px !important;
 }
 
 .pdr-90 {
   padding-right: 90px !important;
 }
 
 .pdb-90 {
   padding-bottom: 90px !important;
 }
 
 .pdl-90 {
   padding-left: 90px !important;
 }
 
 .pdx-100 {
   padding: 0 100px 0 !important;
 }
 
 .pdy-100 {
   padding: 100px 0 100px 0 !important;
 }
 
 .pdt-100 {
   padding-top: 100px !important;
 }
 
 .pdr-100 {
   padding-right: 100px !important;
 }
 
 .pdb-100 {
   padding-bottom: 100px !important;
 }
 
 .pdl-100 {
   padding-left: 100px !important;
 }
 
 .mgx-5 {
   margin: 0 5px 0 !important;
 }
 
 .mgy-5 {
   margin: 5px 0 5px 0 !important;
 }
 
 .mgt-0 {
   margin-top: 0 i !important;
 }
 
 .mgt-5 {
   margin-top: 5px !important;
 }
 
 .mgr-5 {
   margin-right: 5px !important;
 }
 
 .mgb-0 {
   margin-bottom: 0 !important;
 }
 
 .mgb-5 {
   margin-bottom: 5px !important;
 }
 
 .mgl-5 {
   margin-left: 5px !important;
 }
 
 .mgx-10 {
   margin: 0 10px 0 !important;
 }
 
 .mgy-10 {
   margin: 10px 0 10px 0 !important;
 }
 
 .mgt-10 {
   margin-top: 10px !important;
 }
 
 .mgr-10 {
   margin-right: 10px !important;
 }
 
 .mgb-10 {
   margin-bottom: 10px !important;
 }
 
 .mgl-10 {
   margin-left: 10px !important;
 }
 
 .mgx-15 {
   margin: 0 15px 0 !important;
 }
 
 .mgy-15 {
   margin: 15px 0 15px 0 !important;
 }
 
 .mgt-15 {
   margin-top: 15px !important;
 }
 
 .mgr-15 {
   margin-right: 15px !important;
 }
 
 .mgb-15 {
   margin-bottom: 15px !important;
 }
 
 .mgl-15 {
   margin-left: 15px !important;
 }
 
 .mgx-20 {
   margin: 0 20px 0 !important;
 }
 
 .mgy-20 {
   margin: 20px 0 20px 0 !important;
 }
 
 .mgt-20 {
   margin-top: 20px !important;
 }
 
 .mgr-20 {
   margin-right: 20px !important;
 }
 
 .mgb-20 {
   margin-bottom: 20px !important;
 }
 
 .mgl-20 {
   margin-left: 20px !important;
 }
 
 .mgx-25 {
   margin: 0 25px 0 !important;
 }
 
 .mgy-25 {
   margin: 25px 0 25px 0 !important;
 }
 
 .mgt-25 {
   margin-top: 25px !important;
 }
 
 .mgr-25 {
   margin-right: 25px !important;
 }
 
 .mgb-25 {
   margin-bottom: 25px !important;
 }
 
 .mgl-25 {
   margin-left: 25px !important;
 }
 
 .mgx-30 {
   margin: 0 30px 0 !important;
 }
 
 .mgy-30 {
   margin: 30px 0 30px 0 !important;
 }
 
 .mgt-30 {
   margin-top: 30px !important;
 }
 
 .mgr-30 {
   margin-right: 30px !important;
 }
 
 .mgb-30 {
   margin-bottom: 30px !important;
 }
 
 .mgl-30 {
   margin-left: 30px !important;
 }
 
 .mgx-35 {
   margin: 0 35px 0 !important;
 }
 
 .mgy-35 {
   margin: 35px 0 35px 0 !important;
 }
 
 .mgt-35 {
   margin-top: 35px !important;
 }
 
 .mgr-35 {
   margin-right: 35px !important;
 }
 
 .mgb-35 {
   margin-bottom: 35px !important;
 }
 
 .mgl-35 {
   margin-left: 35px !important;
 }
 
 .mgx-40 {
   margin: 0 40px 0 !important;
 }
 
 .mgy-40 {
   margin: 40px 0 40px 0 !important;
 }
 
 .mgt-40 {
   margin-top: 40px !important;
 }
 
 .mgr-40 {
   margin-right: 40px !important;
 }
 
 .mgb-40 {
   margin-bottom: 40px !important;
 }
 
 .mgl-40 {
   margin-left: 40px !important;
 }
 
 .mgx-45 {
   margin: 0 45px 0 !important;
 }
 
 .mgy-45 {
   margin: 45px 0 45px 0 !important;
 }
 
 .mgt-45 {
   margin-top: 45px !important;
 }
 
 .mgr-45 {
   margin-right: 45px !important;
 }
 
 .mgb-45 {
   margin-bottom: 45px !important;
 }
 
 .mgl-45 {
   margin-left: 45px !important;
 }
 
 .mgx-50 {
   margin: 0 50px 0 !important;
 }
 
 .mgy-50 {
   margin: 50px 0 50px 0 !important;
 }
 
 .mgt-50 {
   margin-top: 50px !important;
 }
 
 .mgr-50 {
   margin-right: 50px !important;
 }
 
 .mgb-50 {
   margin-bottom: 50px !important;
 }
 
 .mgl-50 {
   margin-left: 50px !important;
 }
 
 .pdx-0 {
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
 
 @media (max-width: 576px) {
   .sm-pdx-0 {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
 }
 
 .mgr-0 {
   margin-right: 0 !important;
 }
 
 .txt-left {
   text-align: left;
 }
 
 .txt-center {
   text-align: center;
 }
 
 .txt-right {
   text-align: right;
 }
 
 .hidding {
   display: none !important;
 }
 
 .z0 {
   z-index: 0;
 }
 
 .z1 {
   z-index: 1;
 }
 
 .z2 {
   z-index: 2;
 }
 
 .z3 {
   z-index: 3;
 }
 
 .z4 {
   z-index: 4;
 }
 
 .z5 {
   z-index: 5;
 }
 
 .z6 {
   z-index: 6;
 }
 
 .z7 {
   z-index: 7;
 }
 
 .z8 {
   z-index: 8;
 }
 
 .z9 {
   z-index: 9;
 }
 
 .z10 {
   z-index: 10;
 }
 
 .z11 {
   z-index: 11;
 }
 
 .z12 {
   z-index: 12;
 }
 
 .z13 {
   z-index: 13;
 }
 
 .z14 {
   z-index: 14;
 }
 
 .z15 {
   z-index: 15;
 }
 
 .top-5 {
   top: 5px;
 }
 
 .top-10 {
   top: 10px;
 }
 
 .top-15 {
   top: 15px;
 }
 
 .top-20 {
   top: 20px;
 }
 
 .top-25 {
   top: 25px;
 }
 
 .top-30 {
   top: 30px;
 }
 
 .top-35 {
   top: 35px;
 }
 
 .top-40 {
   top: 40px;
 }
 
 .top-45 {
   top: 45px;
 }
 
 .top-50 {
   top: 50px;
 }
 
 .top-55 {
   top: 55px;
 }
 
 .top-60 {
   top: 60px;
 }
 
 .top-65 {
   top: 65px;
 }
 
 .top-70 {
   top: 70px;
 }
 
 .top-75 {
   top: 75px;
 }
 
 .top-80 {
   top: 80px;
 }
 
 .top-85 {
   top: 85px;
 }
 
 .top-90 {
   top: 90px;
 }
 
 .top-95 {
   top: 95px;
 }
 
 .top-100 {
   top: 100px;
 }
 
 .dflex {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
 .dflex.justify-between {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
 }
 
 .w-100 {
   width: 100% !important;
 }
 
 .h-100 {
   height: 100% !important;
 }
 
 .showcolor {
   color: rgba(0,0,0,.8) !important;
   background-color: #cacbcd !important;
 }
 
 .playbook_caption {
   font-family:"Poppins", sans-serif;
   font-size: 17px;
   font-weight: 550;
 }


 .playbook_caption_red {
   color: #db2828;
 }
 .playbook_caption_blue {
   color: #0a5a96;
 }
 .playbook_caption_orange {
   color: #f2711c
 }
 .playbook_caption_green {
   color: #21ba45;
 }
 
 #jsonStr, #regeStr {
   border: 2px dashed #666;
   margin: 20px;
   padding: 10px;
   font-family: "Arial";
 }
 
 table.dataTable thead th, table.dataTable thead td {
   padding: 10px 18px;
   border-bottom: 3px double #cdcdcd; 
 }
 table.dataTable.no-footer {
   border-bottom: 3px double #cdcdcd; 

/* ============================================================================
   PLAYBOOK DROPDOWN GROUPING STYLES
   ============================================================================ */

/* Group headers (category labels) */
.ui.dropdown .menu > .header {
  font-weight: 700 !important;
  font-size: 0.85em !important;
  color: #555 !important;
  padding: 10px 16px 6px 16px !important;
  margin-top: 0 !important;
  background-color: #f8f9fa !important;
  text-transform: capitalize;
  border-top: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* First header - no top border */
.ui.dropdown .menu > .header:first-child {
  border-top: none;
}

/* Items within groups - indented */
.ui.dropdown .menu > .item {
  padding-left: 24px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  line-height: 1.5em !important;
}

/* Recently Used items - special styling */
.ui.dropdown .menu > .item.recent-item {
  background-color: #fffbf0 !important;
  border-left: 3px solid #ffc107;
  font-style: italic;
  color: #f57c00 !important;
}

/* Recently Used items - hover */
.ui.dropdown .menu > .item.recent-item:hover {
  background-color: #fff8e1 !important;
}

/* Divider after recently used */
.ui.dropdown .menu > .divider {
  margin: 4px 0 !important;
  border-top: 1px solid #ddd;
}

/* Hover state for regular items */
.ui.dropdown .menu > .item:hover {
  background-color: #f5f5f5 !important;
}

/* Selected/active state */
.ui.dropdown .menu > .item.selected,
.ui.dropdown .menu > .item.active {
  background-color: #e3f2fd !important;
  font-weight: 600 !important;
}

/* Dropdown search input */
.ui.dropdown > .search {
  padding: 0.8em 1em !important;
}

/* Icon in Recently Used header */
.ui.dropdown .menu > .header .icon {
  margin-right: 0.5em;
  opacity: 0.7;
}