/*------------------------------------------------------------------
[Master Stylesheet]

Project:    XAKTI admin bootstrap
Version:    1.0

[Table of contents]

1. Color system
2. Body
3. navbar
4. left-sidebar
5. right-sidebar
6. content
7. widgets
8. ui elements
9. forms
10. example pages
-------------------------------------------------------------------*/

:root{
  --bg-blue: rgb(33, 150, 243);
  --bg-transparent: rgba(0, 0, 0, 0);
  --bg-black-opc: rgba(0, 0, 0, 0.1) !important;
  --bg-light-opc: rgba(255, 255, 255, 0.1) !important;
  --bg-lightblue: lightblue;
  --bg-grey: grey;
  --bg-maroon:#e91e63;
  --bg-red: rgb(244, 67, 54);
  --bg-green: rgb(76, 175, 80);
  --shadow_1: 1px 1px 4px rgba(0,0,0,0.1), 1px 3px 4px rgba(0,0,0,0.1);
  /*--shadow_2: 0px 2px 6px 0px rgba(0,0,0,0.3);*/
  --shadow_2: 0 3px 6px rgba(0,0,0,0.16), 0px 3px 6px rgba(0,0,0,0.23);
  --shadow_3: 0px 3px 9px 0px rgba(0,0,0,0.3);
  --shadow_4: 0px 4px 12px 0px rgba(0,0,0,0.3);
  --purple-pink: linear-gradient(to right, #f095ff, #f64848);
  --yellow-pink: linear-gradient(to right, #ffc061, #ff8fb5);
  --lightpurple-blue: linear-gradient(to right, #e8c3fd, #86c5fc);
  --red-orange:linear-gradient(to right, var(--red), var(--orange));
  --red-yellow:linear-gradient(to right, var(--red), var(--yellow));
  --trs-1: 0.2s linear;
}

/*theme*/
.theme-blue>.navbar, .theme-blue>.wrap>.sidebar>.sb-header>.sb-bg,.theme-primary>.navbar, .theme-primary>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--blue);
}
.theme-indigo>.navbar, .theme-indigo>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--indigo);
}
.theme-purple>.navbar, .theme-purple>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--purple);
}
.theme-pink>.navbar, .theme-pink>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--pink);
}
.theme-red>.navbar, .theme-red>.wrap>.sidebar>.sb-header>.sb-bg,.theme-danger>.navbar, .theme-danger>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--danger);
}
.theme-orange>.navbar, .theme-orange>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--orange);
}
.theme-yellow>.navbar, .theme-yellow>.wrap>.sidebar>.sb-header>.sb-bg,.theme-warning>.navbar, .theme-warning>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--yellow);
}
.theme-green>.navbar, .theme-green>.wrap>.sidebar>.sb-header>.sb-bg,.theme-success>.navbar, .theme-success>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--green);
}
.theme-teal>.navbar, .theme-teal>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--teal);
}
.theme-cyan>.navbar, .theme-cyan>.wrap>.sidebar>.sb-header>.sb-bg,.theme-info>.navbar, .theme-info>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--cyan);
}
.theme-white>.navbar, .theme-white>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--white);
}
.theme-gray>.navbar, .theme-gray>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--gray);
}
.theme-gray-dark>.navbar,.theme-dark>.navbar, .theme-gray-dark>.wrap>.sidebar>.sb-header>.sb-bg,.theme-dark>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: var(--gray-dark);
}
.theme-red-yellow>.navbar, .theme-red-yellow>.wrap>.sidebar>.sb-header>.sb-bg{
  background: var(--red-yellow);
}
.theme-red-orange>.navbar, .theme-red-orange>.wrap>.sidebar>.sb-header>.sb-bg{
  background: var(--red-orange);
}
.theme-red-pink>.navbar, .theme-red-pink>.wrap>.sidebar>.sb-header>.sb-bg{
  background: linear-gradient(to right, var(--red), var(--pink));
}
.theme-pink-yellow>.navbar, .theme-pink-yellow>.wrap>.sidebar>.sb-header>.sb-bg{
  background: linear-gradient(to right, var(--pink), var(--yellow));
}
.theme-pink-orange>.navbar, .theme-pink-orange>.wrap>.sidebar>.sb-header>.sb-bg{
  background: linear-gradient(to right, var(--pink), var(--orange));
}
.theme-contoh>.navbar, .theme-contoh>.wrap>.sidebar>.sb-header>.sb-bg{
  background: linear-gradient(to right, #f095ff, #f64848);
}
.sidebar-dark>.wrap>.sidebar{
  background-color: #1a1c29 !important;
}
.sidebar-dark>.wrap>.sidebar>.sb-header>.sb-bg{
  background-color: #040617;
  opacity: 0.86 !important;
}
.sidebar-dark>.wrap>.sidebar>.nav .nav-item .nav-link,.sidebar-dark>.wrap>.sidebar>.nav .nav-item.nav-link{
  color: #ccc;
}
/*.sidebar-dark>.wrap>.sidebar>.sidebar-nav>.nav-item>.nav-link{
  color: #ddd;
}*/
/*end theme*/
/*background color*/

.bg-blue{background-color: var(--bg-blue) !important;}
.bg-maroon{background-color: var(--bg-maroon) !important;}
.bg-indigo{background-color: var(--indigo);}
/*.bg-purple{background-color: var(--purple);}*/
.bg-pink{background-color: var(--pink);}
.bg-red,.bg-danger{background-color: var(--danger) !important;}
.bg-orange{background-color: var(--orange) !important;}
.bg-yellow,.bg-warning{background-color: var(--yellow) !important;}
.bg-green,.bg-success{background-color: var(--green);}
.bg-teal{background-color: var(--teal) !important;}
.bg-cyan,.bg-info{background-color: var(--cyan);}
.bg-white{background-color: white !important;}
.bg-gray{background-color: var(--gray) !important;}

.bg-primary-opc{background-color: rgba(0, 123, 255, 0.7)!important;}
.bg-warning-opc{background-color: rgba(255, 193, 7, 0.7)!important;}
.bg-success-opc{background-color: rgba(40, 167, 69, 0.7)!important;}
.bg-danger-opc{background-color: rgba(220, 53, 69, 0.7)!important;}

.bg-purple{background-color: #6f42c1;}

.bg-transparent{background-color: var(--bg-transparent) !important;}
.bg-none{background: unset !important;}
.bg-grey{ background-color: var(--bg-grey) !important;}
.bg-opc{  background-color: var(--bg-black-opc) !important;}

.bg-gradient-danger{
  background: linear-gradient(to bottom right, #f91201, #ff9e80);
}
.bg-gradient-warning{background: linear-gradient(to bottom right, orange, yellow);}
.bg-gradient-blue{
  /*background: linear-gradient(to bottom right, #0778d2, #80deea);*/
  background: linear-gradient(to bottom right, #f91201, #ff9e80);
  -webkit-filter: hue-rotate(200deg);
}
.bg-gradient-success{
  background: linear-gradient(to bottom right, #0778d2, #80deea);
  /*background: linear-gradient(to bottom right, #4caf50, green);*/
  -webkit-filter: hue-rotate(-50deg);
}
.bg-red-yellow{background: var(--red-yellow);}
.bg-red-orange{background: var(--red-orange);}
.bg-red-pink{background: linear-gradient(to right, var(--red), var(--pink));}
.bg-pink-yellow{background: linear-gradient(to right, #e83e8c, #ffc107);}
.bg-pink-orange{background: linear-gradient(to right, var(--pink), var(--orange));}
.bg-contoh{background: var(--red-orange);}

.bg-green-cyan{background: linear-gradient(to right, #28a745, #17a2b8);}

.bg-purple-teal{background: linear-gradient(to right, #6f42c1, #20c997);}

.bg-purple-yellow{background: linear-gradient(to right, #800080, #FFFF33);}

.bg-purple-pink{background: linear-gradient(to right, #800080, #FF0099);}

.bg-red-pink{background: linear-gradient(to right, #CC3300, #FF0099);}

.bg-purple-blue{background: linear-gradient(to right, #800080, #0000FF);}

.bg-lbpurple-lbteal{background: linear-gradient(to right, #6f42c161, #20c99766);}
.no-drop {cursor: no-drop;}
.not-allowed {cursor: not-allowed;}

/*end background color*/


.filter-1{
    -webkit-filter: grayscale(1) sepia(0.5) contrast(2.5);
}
/*shadow*/
.shadow-1{
  box-shadow: var(--shadow_1);
}
.shadow-2{
  box-shadow: var(--shadow_2);
}
.shadow-3{
  box-shadow: var(--shadow_3);
}
.shadow-4{
  box-shadow: var(--shadow_4);
}
/*end shadow*/



/*font*/
.font-10{font-size: 10px !important;}
.font-11{ font-size: 11px !important;}
.font-12{ font-size: 12px !important;}
.font-13{ font-size: 13px !important;}
.font-14{ font-size: 14px !important;}
.font-15{ font-size: 15px !important;}
.font-18{ font-size: 18px !important;}
.font-20{ font-size: 20px !important;}
.font-25{ font-size: 25px !important;}
/*end font*/

/*font-color*/
.font_blue{ color:#007bff;}
.font_indigo{ color:#6610f2;}
.font_purple{ color:#6f42c1;}
.font_pink{ color:#e83e8c;}
.font_red{ color:#dc3545;}
.font_orange{ color:#fd7e14;}
.font_yellow{ color:#ffc107;}
.font_green{ color:#28a745;}
.font_teal{ color:#20c997;}
.font_white{ color:#ffffff;}
/*end font-color*/


/*info box*/
.info-box-2{
  padding: 10px;
  margin-bottom: 3px;
  background-color: #fff;
}
.info-box-1{
  height: 100px;
}
.info-box-1,.info-box-3{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  position: relative;
  display: -webkit-flex;  
}

.info-box-1>.info-box-icon>.gg-icon{
  margin-right: 0;
  display: flex;align-items: center; 
  font-size: 40px;
}
.info-box-1>.info-box-icon{
  width: 90px; 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; 
  justify-content: space-around;
  -webkit-justify-content: space-around;
  color: #fff;
}
.info-box-1>.info-box-body{
  padding-left: 20px;
  /*padding:5px 10px 2px 25px;*/
  display: flex;  
  flex-flow:column nowrap;
  -webkit-flex-flow: column nowrap; 
  justify-content: center;
  -webkit-justify-content: center;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.info-box-1>.info-box-body>.info-box-title{
  font-size: 15px;
}
.info-box-1>.info-box-body>.info-box-subtitle{
  font-size: 25px;
}
.info-box-2{
  text-align: center;
  height: 200px; 
  display: flex;  
  flex-flow:column nowrap;
  -webkit-flex-flow: column nowrap; 
  justify-content: center;
  -webkit-justify-content: center;
}
.info-box-2>.info-box-icon{
  border-radius: 100%;
  padding: 10px;
  display: flex; 
  align-self: center;
  /*box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.1);  */
}
.info-box-2>.info-box-icon>.gg-icon{
  margin-right: 0;
  font-size: 3em;
}
.info-box-2>.info-box-body{
}
.info-box-2>.info-box-body>.info-box-title{
  font-size: /*15px;*/ 17px;
  /*color: #999;*/ letter-spacing: 2px;
}
.info-box-2>.info-box-body>.info-box-subtitle{
  /*margin-top: -10px;*/ color: #999;
  font-size: 2em;
  letter-spacing: 2px;
}
.info-box-3,.info-box-4,.info-box-5{
  height: 120px;
  color: #fff;
  padding: 10px;
  margin-bottom: 3px;
/*  border-bottom: 3px solid transparent;
  border-image: linear-gradient(to right, red, orange);
  border-image-slice: 1;*/
  /*background: var(--red-orange);*/
  /*-webkit-filter: hue-rotate(180deg);*/
}
.info-box-3:hover.info-box-3>.info-box-icon{
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);  
}
.info-box-3>.info-box-icon{
  width: 70px; 
  height: 70px;
  display: flex; 
  -webkit-flex-flow: row wrap; 
  justify-content: space-around;
  -webkit-justify-content: center;
  align-self: center;
  font-size: 50px;
  color: currentColor;
  margin-left: 15px;
  box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.1);  
  background-color: var(--bg-black-opc);
  border-radius: 100%;
}
.info-box-3>.info-box-icon>.gg-icon{
  margin-right: 0;
  display: flex;align-items: center; font-size: 30px;
}
.info-box-3>.info-box-body{
  padding:5px 10px 2px 25px;
  position: absolute;
  left: auto;
  right: 25px;
  color: currentColor;
  text-align: right;
  align-self: center;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.info-box-3>.info-box-body>.info-box-title{
  font-size: 15px;
  line-height: 0.6;
  opacity: 0.7;
}
.info-box-3>.info-box-body>.info-box-subtitle{
  font-size: 30px;
  line-height: 1.2;
  margin-right: -4px;
}
.info-box-4,.info-box-5{
  position: relative;
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.info-box-4>.info-box-icon{
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.info-box-4>.info-box-icon>.gg-icon{
  font-size: 6em;
  color: rgba(255,255,255,0.2);
  z-index: 0;
  margin-right: 0;
  display: flex;align-items: center;
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
}
.info-box-4>.info-box-body{
  padding: 10px;
}
.info-box-4:hover.info-box-4>.info-box-icon>.gg-icon{
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  transform: scale(1.4,1.4);
}
.info-box-4>.info-box-body>.info-box-subtitle{
  font-size: 1.8em;
}
.info-box-5{
  padding:0;
}
.info-box-5>.info-box-body{
  position: absolute;
  top: 0;
  width: 100%;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
}
.info-box-5>.info-box-icon{
  padding-top: 33px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-box-5>.info-box-icon>.gg-icon{
  font-size: 3em;
  color: rgba(255,255,255,0.5);
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
/*end info box*/

/*hover*/

.hover-1:hover, .hover-1:focus {
  color: #495057;
  text-decoration: none;
  background-color: rgba(0,0,0,0.06) !important;
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -o-transition: 0.2s linear;
}
.hover-1:active {
  color: #212529;
  background-color: rgba(0,0,0,0.1) !important;
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -o-transition: 0.2s linear;
}
.hover-2{
  transition: var(--trs-1);
  -webkit-transition: var(--trs-1);
  -moz-transition: var(--trs-1);
}
.hover-2:hover{
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  box-shadow: var(--shadow_1);
}
.hover-3:hover{
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
    border-image: linear-gradient(to right, red, orange);
    border-image-slice: 1;
  -webkit-filter: hue-rotate(-50deg);
}
.hover-5:hover{
  /*border-bottom: 2px solid #555;*/
  box-shadow: 4px 4px 0 2px transparent, 2px -2px 0 0px transparent inset, 0px 2px 0 0px rgba(0,0,0,0.3);

}
/*end hover*/

.radius-1{border-radius: 5px;}
.radius-2{border-radius: 10px;}
.radius-3{border-radius: 50px;}
.radius-4{border-radius: 100px;}

/*box*/
.box{
  display: block;
  padding: 0 !important;
  background-color: #fff;
}
.box>.box-heading{
  padding: 7px;
  color: #444;
  font-weight: 600;
  font-size: 15px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}
a:hover{
  text-decoration: none;
}
.box>.box-heading>.box-title a,.box>.box-heading>.box-title a:hover{
  color: currentColor;
  text-decoration: none;
}
.box>.box-heading>.box-title .gg-icon{
  vertical-align: text-bottom;
}
.box>.box-body{
  padding: 7px;
}
/*end box*/


.space-1, [class*=vspace-1] {
    max-height: 3px;
    min-height: 3px;
    overflow: hidden;
    margin: 2px 0 1px;
}
.space-2, [class*=vspace-2] {
    max-height: 6px;
    min-height: 6px;
    overflow: hidden;
    margin: 4px 0 1px;
}

.space-12, [class*=vspace-12] {
    max-height: 1px;
    min-height: 1px;
    overflow: hidden;
    margin: 12px 0 11px;
}

@media only screen and (max-width:767px) {
    .space_posbx {
    margin-top:20px;
}
}

.bTbThx_20 {width:20%;}
.bTbThx_15 {width:15%;}
.bTbThx_12 {width:12%;}
.bTbThx_10 {width:10%;}
.bTbThx_25 {width:25%;}
.bTbThx_28 {width:28%;}
.bTbThx_30 {width:30%;}
.bTbThx_60 {width:60%;}
.bTbThx_75 {width:75%;}



.lbl_tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}
.lbl_tooltip .lbl_tooltiptext {
  visibility: hidden;
  /*width: 120px;*/ width: 220px;
  /*background-color: black;*/
  background: linear-gradient(to right, #e83e8c, #ffc107);
  color: #fff; font-size:13px;
  text-align: center;
  border-radius: 3px;
  padding: 8px 0;  
  /* Position the tooltip - For top-msg > bottom-arrow */
  /*position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;*/

  /* Position the tooltip - For bottom-msg > top-arrow */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -100px;

  /* Position the tooltip - For right-msg > left-arrow */
  /*position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;*/

  /* Position the tooltip - For left-msg > right-arrow */
  /*position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;*/
}
.lbl_tooltip .lbl_tooltiptext::after {
  content: "";
  position: absolute;
  /* Position the tooltip - For top-msg > bottom-arrow */
  /*top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;*/

  /* Position the tooltip - For bottom-msg > top-arrow */
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent purple transparent;

  /* Position the tooltip - For right-msg > left-arrow */
  /*top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;*/

  /* Position the tooltip - For left-msg > right-arrow */
  /*top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;*/
}
.lbl_tooltip:hover .lbl_tooltiptext {
  visibility: visible;
}

.lbl_tooltip_img {
    width: 20px;
    height: 20px;
}
.lbl_tooltip_mouse {
    cursor:alias;
}

.lbl_head_italic
{
    font-family: Palatino Linotype; font-style: italic; font-weight: bold;
}
.lbl_head_italic_underline
{
    font-family: Palatino Linotype; font-style: italic; font-weight: bold; text-decoration:underline;
}

.lbl_tooltip_sb .lbl_tooltiptext_sb {
  visibility: hidden;
  background: linear-gradient(to right, #e83e8c, #ffc107);
  color: #fff; font-size:13px;
  text-align: center;
  border-radius: 3px;
  padding: 8px 0;  
  position: absolute;
  z-index: 1;
}
.lbl_tooltip_sb .lbl_tooltiptext_sb::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent purple transparent;
}
.lbl_tooltip_sb:hover .lbl_tooltiptext_sb {
  visibility: visible;
}

.lbl_tooltip_mb {
  position: relative;
  display: inline-block;
}
.lbl_tooltip_mb .lbl_tooltiptext_mb {
  visibility: hidden;
  width: 250px;
  background: linear-gradient(to right, #e83e8c, #ffc107);
  color: #fff; font-size:13px;
  text-align: center;
  border-radius: 3px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -125px;
}
.lbl_tooltip_mb .lbl_tooltiptext_mb::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent purple transparent;
}
.lbl_tooltip_mb:hover .lbl_tooltiptext_mb {
  visibility: visible;
}

/********************data-Table : responsive auto column width********************/
.text-nowrap {
  white-space: nowrap !important; 
}
@media (max-width: 576px) {
  .text-sm-nowrap {
    white-space: nowrap !important; 
  } 
}
@media (max-width: 768px) {
  .text-md-nowrap {
    white-space: nowrap !important; 
  } 
  .chkbxPos {float: right; margin-right: -25px; margin-top: -45px;}
.bTbThx_20 {width:20%;}
.bTbThx_15 {width:15%;}
.bTbThx_12 {width:12%;}
.bTbThx_10 {width:10%;}
.bTbThx_25 {width:25%;}
.bTbThx_28 {width:28%;}
.bTbThx_30 {width:30%;}
.bTbThx_60 {width:60%;}
.bTbThx_75 {width:75%;}
}
@media (max-width: 992px) {
  .text-lg-nowrap {
    white-space: nowrap !important; 
  }
}
@media (max-width: 1000px) {
  .text-xl-nowrap {
    white-space: nowrap !important; 
  } 
}


.chkbxPos {float: right; margin-right: -25px;}

.bdypanelbx {margin-top:-20px;}



.lbl_tooltip_lg {
  position: relative;
  display: inline-block;
}
.lbl_tooltip_lg .lbl_tooltiptext_lg {
  visibility: hidden;
  width: 470px;
  background: linear-gradient(to right, #e83e8c, #ffc107);
  color: #fff; font-size:13px;
  text-align: center;
  border-radius: 3px;
  /*padding: 8px 0;*/  

  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -100px;
}
.lbl_tooltip_lg .lbl_tooltiptext_lg::after {
  content: "";
  position: absolute;

  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent purple transparent;
}

.lbl_tooltip_lg:hover .lbl_tooltiptext_lg {
  visibility: visible;
}
.lbl_tooltip_img_lg {
    width: 20px;
    height: 20px;
    margin-top:-10px;
}
.lbl_tooltip_mouse_lg {
    cursor:alias;
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px) {
    .lbl_tooltip_lg .lbl_tooltiptext_lg {
        width: 282px;
    }
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) { 
    .lbl_tooltip_lg .lbl_tooltiptext_lg {
        width: 337px;
    }
}
/* ----------- iPhone 6+, 7+ and 8+ ----------- */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) { 
    .lbl_tooltip_lg .lbl_tooltiptext_lg {
        width: 377px;
    }
}
/* ----------- iPhone X ----------- */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) { 
    .lbl_tooltip_lg .lbl_tooltiptext_lg {
        width: 337px;
    }
}

/* ----------- iPad 1, 2, Mini and Air ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}
/* ----------- iPad Pro 10.5" ----------- */
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) {
}
/* ----------- iPad Pro 12.9" ----------- */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) {
}



.probtbx_atd {text-align:center; letter-spacing: 2px; background: #54a107; color: #ffffff; width:100%;}
.prgb {font-weight: bold; width: 100%;}

.probtbx_crlt {text-align:center; letter-spacing: 2px; background: #055da8; color: #ffffff; width:100%;}

.probtbx_urlt {text-align:center; letter-spacing: 2px; background: #8107a4; color: #ffffff; width:100%;}


@media (max-width: 768px) {
    .gpbx {
    padding-top:15px;
}
}