:root{
  --app-box-shadow:0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
  --app-box-shadow-high:0 1px 4px rgb(0 0 0 / 60%);
  --app-box-shadow-low:0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  --app-width:100%;
  --app-width-25:25%;
  --app-height:100%;
  --app-height-vh:100vh;
  --app-position:relative;
  --app-position-absolute:absolute;
  --app-position-fixed:fixed;
  --app-curr-height:350px;
  --app-bg-color:#151515;
  --app-color:#FFF;
  --app-center-content-left:50%;
  --app-center-content-top:50%;
  --app-center-content-0:0;
  --app-center-content-transform:translate(-50%,-50%);
  --app-max-width:400px;
  --app-featured-img: linear-gradient(180deg,#fff,#262626);
  --app-padding-1:9.1px;
  --app-padding-content:5px;
  --app-text-align:center;
  --app-text-shadow:1px 1px 1px rgb(24, 24, 24);
  --app-font-size-small:12px;
  --app-margin-top:5px;
  --app-border-radius:50%;
  --app-border-normal:1px solid var(--app-color);
  --app-border-thin:solid thin #dddbdb33;
  --app-transition-normal:all 0.4s ease-in-out 0s;
  --app-border-thin-light-red:rgba(255,104,53,0.3) solid thin;
  --app-background-color-light-red:rgba(255,104,53,0.06);
  --app-font-wight-900:900;
  --app-auto:auto;
  --app-bgr-green-yo:rgb( 131,187,48) !important;
  --app-transition-half:all 0.5s ease-in-out 0.1s;
  --app-orange: #e3780c;
  --app-orange-livscore:#ff8a00;
  --app-black-livscore:#222;
  --app-colorTransparentDarkGray: rgb(51 51 51/0.8);
  --app-colorTransparentWhite: rgb(255 255 255/0.8);
  --app-colorTransparentGray60: rgb(0 0 0/0.06);
  --app-colorTransparentGray100: rgb(0 0 0/0.1);
  --app-colorTransparentGray500: rgb(0 0 0/0.1);
  --app-colorTransparentGray800: rgb(0 0 0/0.8);
  --app-glimmer-spinner-icon: #65676B;
  --app-hero-banner-background: #FFFFFF;
  --app-hosted-view-selected-state: rgba(2, 25, 54, 0.1);
  --app-highlight-bg: #E7F3FF;
  --app-hover-overlay: rgba(0, 0, 0, 0.05);
  --app-media-hover: rgba(68, 73, 80, 0.15);
  --app-media-inner-border: rgba(0, 0, 0, 0.1);
  --app-media-outer-border: #FFFFFF;
  --app-media-pressed: rgba(68, 73, 80, 0.35);
  --app-messenger-card-background: #FFFFFF;
  --app-messenger-reply-background: #F0F2F5;
  --app-overlay-alpha-80: rgba(244, 244, 244, 0.8);
  --app-overlay-on-media: rgba(0, 0, 0, 0.6);
  --app-nav-bar-background: #FFFFFF;
  --app-nav-bar-background-gradient: linear-gradient(to top, #FFFFFF, rgba(255,255,255.9), rgba(255,255,255,.7), rgba(255,255,255,.4), rgba(255,255,255,0));
  --app-nav-bar-background-gradient-wash: linear-gradient(to top, #F0F2F5, rgba(240,242,245.9), rgba(240,242,245,.7), rgba(240,242,245,.4), rgba(240,242,245,0));
  --app-negative: hsl(350, 87%, 55%);
  --app-negative-background: hsl(350, 87%, 55%, 20%);
  --app-new-notification-background: #E7F3FF;
  --app-non-media-pressed: rgba(68, 73, 80, 0.15);
  --app-non-media-pressed-on-dark: rgba(255, 255, 255, 0.3);
  --app-notification-badge: #e41e3f;
  --app-placeholder-icon: #8A8D91;
  --app-placeholder-text: #8A8D91;
  --app-placeholder-text-on-media: rgba(255, 255, 255, 0.5);
  --app-popover-background: #FFFFFF;
  --app-positive: #14f348;
  --app-positive-background: #DEEFE1;
  --app-press-overlay: rgba(0, 0, 0, 0.10);
  --app-primary-button-background: #1B74E4;
  --app-primary-button-pressed: #77A7FF;
  --app-primary-button-text: #fdfdfd;
  --app-primary-deemphasized-color: #aaa;
  --app-primary-deemphasized-button-pressed: rgba(0, 0, 0, 0.05);
  --app-primary-deemphasized-button-pressed-overlay: rgba(25, 110, 255, 0.15);
  --app-primary-deemphasized-button-text: #1877F2;
  --app-primary-icon: #050505;
  --app-primary-text-on-media: #FFFFFF;
  --app-primary-web-focus-indicator: #D24294;
  --app-progress-ring-neutral-background: rgba(0, 0, 0, 0.2);
  --app-progress-ring-neutral-foreground: #000000;
  --app-progress-ring-on-media-background: rgba(255, 255, 255, 0.2);
  --app-progress-ring-on-media-foreground: #FFFFFF;
  --app-progress-ring-blue-background: rgba(24, 119, 242, 0.2);
  --app-progress-ring-blue-foreground: hsl(214, 89%, 52%);
  --app-progress-ring-disabled-background: rgba(190,195,201, 0.2);
--app-progress-ring-disabled-foreground: #BEC3C9;
--app-rating-star-active: #EB660D;
--app-scroll-thumb: #BCC0C4;
--app-scroll-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1) inset;
--app-secondary-button-background: #E4E6EB;
--app-secondary-button-background-floating: #ffffff;
--app-secondary-button-background-on-dark: rgba(0, 0, 0, 0.4);
--app-secondary-button-pressed: rgba(0, 0, 0, 0.05);
--app-secondary-button-stroke: transparent;
--app-secondary-button-text: #050505;
--app-secondary-icon: #65676B;
--app-secondary-text: #65676B;
--app-secondary-text-on-media: rgba(255, 255, 255, 0.9);
--app-section-header-text: #575757;
--app-shadow-1: rgba(0, 0, 0, 0.1);
--app-shadow-2: rgba(0, 0, 0, 0.2);
--app-shadow-5: rgba(0, 0, 0, 0.5);
--app-shadow-8: rgba(0, 0, 0, 0.8);
--app-shadow-inset: rgba(255, 255, 255, 0.5);
--app-surface-background: #FFFFFF;
--app-text-highlight: rgba(24, 119, 242, 0.2);
--app-toggle-active-background: #E7F3FF;
--app-toggle-active-icon: rgb(24, 119, 242);
--app-toggle-active-text: rgb(24, 119, 242);
--app-toggle-button-active-background: #E7F3FF;
--app-wash: #E4E6EB;
--app-web-wash: #F0F2F5;
--app-warning: hsl(40, 89%, 52%);
--app-fb-logo-color: #2D88FF;
--app-dialog-anchor-vertical-padding: 56px;
--app-animation-enter-exit-in: cubic-bezier(0.14, 1, 0.34, 1);
--app-animation-enter-exit-out: cubic-bezier(0.45, 0.1, 0.2, 1);
--app-animation-swap-shuffle-in: cubic-bezier(0.14, 1, 0.34, 1);
--app-animation-swap-shuffle-out: cubic-bezier(0.45, 0.1, 0.2, 1);
--app-animation-move-in: cubic-bezier(0.17, 0.17, 0, 1);
--app-animation-move-out: cubic-bezier(0.17, 0.17, 0, 1);
--app-animation-expand-collapse-in: cubic-bezier(0.17, 0.17, 0, 1);
--app-animation-expand-collapse-out: cubic-bezier(0.17, 0.17, 0, 1);
--app-animation-passive-move-in: cubic-bezier(0.5, 0, 0.1, 1);
--app-animation-passive-move-out: cubic-bezier(0.5, 0, 0.1, 1);
--app-animation-quick-move-in: cubic-bezier(0.1, 0.9, 0.2, 1);
--app-animation-quick-move-out: cubic-bezier(0.1, 0.9, 0.2, 1);
--app-animation-fade-in: cubic-bezier(0, 0, 1, 1);
--app-animation-fade-out: cubic-bezier(0, 0, 1, 1);
--app-duration-extra-extra-short-in: 100ms;
--app-duration-extra-extra-short-out: 100ms;
--app-duration-extra-short-in: 200ms;
--app-duration-extra-short-out: 150ms;
--app-duration-short-in: 280ms;
--app-duration-short-out: 200ms;
--app-duration-medium-in: 400ms;
--app-duration-medium-out: 350ms;
--app-duration-long-in: 500ms;
--app-duration-long-out: 350ms;
--app-duration-extra-long-in: 1000ms;
--app-duration-extra-long-out: 1000ms;
--app-duration-none: 0ms;
--app-fast: 200ms;
--app-slow: 400ms;
--app-black: #000000;
--app-black-rgb: rgb(0, 0, 0);
--app-black-bgr-soft:#1c1a1a;
--app-black-bgr-soft-deep:#131212;
--app-black-alpha-05: rgba(0, 0, 0, 0.05);
--app-black-alpha-10: rgba(0, 0, 0, 0.1);
--app-black-alpha-15: rgba(0, 0, 0, 0.15);
--app-black-alpha-20: rgba(0, 0, 0, 0.2);
--app-black-alpha-30: rgba(0, 0, 0, 0.3);
--app-black-alpha-40: rgba(0, 0, 0, 0.4);
--app-black-alpha-50: rgba(0, 0, 0, 0.5);
--app-black-alpha-60: rgba(0, 0, 0, 0.6);
--app-black-alpha-70: rgba(0, 0, 0, 0.7);
--app-black-alpha-80: rgba(12, 4, 4, 0.8);
--app-black-alpha-90: rgba(0, 0, 0, 0.9);
--app-blue-05: #ECF3FF;
--app-blue-30: #AAC9FF;
--app-blue-40: #77A7FF;
--app-blue-60: #1877F2;
--app-blue-70: #2851A3;
--app-blue-80: #1D3C78;
--app-button-text: #444950;
--app-comment-background: #F2F3F5;
--app-dark-mode-gray-35: #CCCCCC;
--app-dark-mode-gray-50: #828282;
--app-dark-mode-gray-70: #4A4A4A;
--app-dark-mode-gray-80: #373737;
--app-dark-mode-gray-90: #282828;
--app-dark-mode-gray-100: #1C1C1C;
--app-font-size-md:0.95em;
--app-margin-top-1:5px;
--app-header-height: 56px;
--app-global-panel-width: 68px;
--app-button-corner-radius: 6px;
--app-width-150:150px;
--app-width-200:200px;
--app-width-100:100px;
--app-width-90:90px;
--app-width-80:80px;
--app-width-70:70px;
--app-width-60:60px;
--app-width-50:50px;
--app-width-55:55px;
--app-width-40:40px;
--app-width-30:30px;
--app-width-20:20px;
--app-width-16:16px;
--app-width-17:17px;
--app-width-15:15px;
--app-width-14:14px;
--app-width-13:13px;
--app-width-12:12px;
--app-width-11:11px;
--app-width-10:10px;
--app-width-9:9px;
--app-width-8:8px;
--app-width-5:5px;
--app-width-4:4px;
--app-width-3:3px;
--app-width-2:2px;
--app-width-1:1px;
--app-border-bottom-purple-light: 1px solid #5417A5;
--app-em-font-size:0.7em;
--app-border-color:rgb(233, 54, 84);
--app-border-light:rgba(255, 255, 255, 0.05) thin solid;
}
/* control scroll bar here */
 /* width */
 ::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #fefefe; 
  transition: background-color 0.6s ease;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 15px;
  transition: background-color 0.6s ease;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(167, 166, 166); 
  /* background: #555;  */
  transition: background-color 0.6s ease;
}
 *{box-sizing: border-box;}
 @media (min-width:993px){
  
}
  /*when screen is medium */
@media (max-width:992px) and (min-width:601px){
  .cor-column-4c{width:100%!important;}  
  .cor-column-5c{width:100%!important;} 
  .cor-column-2c{width:100%!important;} 
  .cor-column-smr-4c{float:left!important;width:25%!important;}
  .smr-body-cnt{width: 100%!important;}
  .adm-cor-padding-top{padding: 0.78em;}.spt-header-smr{font-size: 11px!important}
  .spt-header-smr12{font-size: 12px!important}
  .aks-vot-smr-alrt-box{
    left: var(--app-center-content-left)!important;
    bottom:5.50%!important;
    transform: translate(-50%,-5.50%)!important;
    z-index: 2000000000000000;
  }
}/*end of medium screen*/
  
  /*when screen is small i.e phone screen*/
@media (max-width:600px){
  .adm-cor-padding-top{padding: 0.78em;}
  .spt-header-smr{font-size: 11px!important}
  .spt-header-smr12{font-size: 12px!important}
  .putme-fontsize-sml{font-size: 25px!important;}
  .equ-smr-cont{width: 100%!important;height: 100%!important;}
  .cor-column-5c{width:100%!important;} 
  .cor-column-4c{width:50%!important;} 
  .cor-column-1c{float:left;width:50%;}
  .cor-column-2c{width:100%!important;}
  .cor-column-smr-4c{width:25%!important;}
  .cor-centr-width-height{height: 100%!important;}
  /*show pregress*/
  /*.cor-marg-top-smr{margin-top: 60%!important;}*/
  .smr-body-cnt{width: 100%!important;position: absolute!important;z-index: 3!important;height: 100vh!important;background-color: rgba(0, 0, 0,0.989);}
  .sml-hide-gen-cnt{display: none;}
  .smr-width-jamb{width: 338px!important;}
  .aks-vot-smr-alrt-box{
    left: var(--app-center-content-left)!important;
    bottom:5.50%!important;
    transform: translate(-50%,-5.50%)!important;
    z-index: 2000000000000000;
  }
  /* .aks-sen-smr-start-m{
    padding: 0!important;
  } */
}/*end of small screen css*/
@media (max-height:307px){
   .kab-adm-font-colr-sm-wrdnews{font-size: 20px!important;}
   .kab-smr-idealgas-midd-prod{width:100%;min-width: 260px!important;padding: 2!important;height: 330px!important;font-size: small!important;}
   /* useful smr screen */
   .kab-adm-height{max-height: 320px!important;}
    /************/
   .kab-smr-font-size{font-size: smaller!important;}
   .kab-smr-idealgas-midd-prod-smr{min-width: 260px!important;padding: 2!important;height: 450px!important;font-size: small!important;margin-top: 22%!important;}
   /* .kab-adm-height{height: 430px!important;} */
   .cor-mx-heit{max-width: 80px!important;max-height: 80px!important;margin-top: 40%!important;transition: 0.4s ease-in-out 0s;}
}/*end of medium screen*/
 @media print and (color) {
    * {
       -webkit-print-color-adjust: exact;
    }
    #sptatprint{margin-left: 450px!important;}
    .spt-prt-chofcurs{margin-left: 600px;}
 }
 /* end login system */
 table{
   
    border-collapse: collapse;
}
th, td{
    padding: 4px;
    /*text-align: left;*/
    /* border-bottom: 2px solid #ddd; */

}
table,th,td{
    border: 1px solid #ddd;
    
} 
 /* ::placeholder{
    color: #FFFFFF!important;
    opacity: 1;
}  */
/*grid layout*/
/*grid with 5 column*/
.cor-column-1c{float:left;width:100%;}
.cor-column-2c{float:left;width:50%;}
.cor-column-2c-lg{float:left;width:50%;}
.cor-column-4c{float:left;width:25%;}
.cor-column-5c{float:left;width:20%;}
.cor-row::after{content: "";display:table;clear:both;}
.cor-column{float:left;}
 /*backgr img motor*/
 .mva-zoom-bgimg{animation: shrink 9s infinite alternate;}@keyframes shrink{0%{background-size: 100% 100%;}100%{background-size: 150% 150%;}}
 /* .mva-zoom-bgimg{animation: shrink 9s infinite alternate;}@keyframes shrink{0%{background-position: 0 0;}100%{background-position: 100% 0;}} */
 /*txt at the center*/
 .quote-wrapper {height: 250px;position: relative;width: 250px;}.text {background: radial-gradient(
      ellipse at center,
      rgba(0, 20, 20, 1) 0%,
      rgba(0, 20, 20, 1) 70%,
      rgba(210, 20, 20, 0) 70.3%
    );
    height: 100%;
    width: 100%;
    color: white;
position: relative;
margin: 0;}
  .text p {font-size: 14px;font-style: italic;height: 100%;line-height: 1.5;padding: 0;text-align: center;text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3); }.text::before {content: "";float: left;height: 100%;width: 50%;shape-outside: polygon( 0 0, 98% 0,50% 6%,23.4% 17.3%,6% 32.6%,0 50%,6% 65.6%,23.4% 82.7%,50% 94%,98% 100%,0 100%
    );shape-margin: 4%;}
  .text p::before {content: "";float: right;height: 100%;width: 50%;shape-outside: polygon(2% 0%,100% 0%,100% 100%,2% 100%,50% 94%,76.6% 82.7%,94% 65.6%,100% 50%,94% 32.6%,76.6% 17.3%,
50% 6%); shape-margin: 4%;}.quote-wrapper blockquote footer {bottom: 25px;font-size: 17px;font-style: italic;position: absolute;text-align: center;text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);width: 100%;}
    /*css slide or fade in effect*/
    .come-in {opacity:1!important;transform: translateX(150px);animation: come-in 1s 0s ease-in-out forwards;}
    .come-in:nth-child(odd) {animation-duration: 0.6s; /* So they look staggered */}
    @keyframes come-in {to { transform: translateX(0); }}
    /* box-shadow: 0 1px 3px rgba(black, 0.2)*/
    .hideme{
      opacity: 0;
    }

    .come-in-left {opacity:1!important;transform: translateX(-150px);animation: come-inleft 1s 0.1s ease forwards;}
    .come-in-left:nth-child(odd) {animation-duration: 0.6s; /* So they look staggered */}
    @keyframes come-inleft {to { transform: translateX(0); }}
    /*animate left*/
    .come-in-left-slow {opacity:1!important;transform: translateX(-150px);animation: come-inleft-slow 5s 0.1s ease forwards;}
    .come-in-left-slow:nth-child(odd) {animation-duration: 1.3s; /* So they look staggered */}
    @keyframes come-inleft-slow {to { transform: translateX(0); }}
    /*animate bottom*/
    .come-in-lefttxt-btm {opacity:1!important;transform: translateY(150px);animation: come-intxt-btm 5s 0.1s ease forwards;}
    .come-in-lefttxt-btm:nth-child(odd) {animation-duration: 1.3s; /* So they look staggered */}
    @keyframes come-intxt-btm {to { transform: translateY(0); }}
    /*animate top*/
    .come-in-lefttxt-topp {opacity:1!important;transform: translateY(-150px);animation: come-intxt-topp 5s 0.1s ease forwards;}
    .come-in-lefttxt-topp:nth-child(odd) {animation-duration: 1.3s; /* So they look staggered */}
    @keyframes come-intxt-topp {to { transform: translateY(0); }}
    /*animate right*/
    .come-in-txt-right{opacity:1!important;transform: translateX(150px);animation: come-intxt-right 0.8s 0.1s ease forwards;}
    .come-in-right:nth-child(odd) {animation-duration: 1.3s; /* So they look staggered */}
    @keyframes come-intxt-right {to { transform: translateX(0); }}
    /* box-shadow: 0 1px 3px rgba(black, 0.2)*/
    .hidemeleft{
      opacity: 0;
    }
    .mva-listTpy{list-style-type: square!important;color: black!important;}
    /*slide effect right*/
    .come-in-txt{opacity:1!important;transform: translateX(150px);animation: come-intxt 1s 0.1s ease forwards;}
    .come-in:nth-child(odd) {animation-duration: 0.6s; /* So they look staggered */}
    @keyframes come-intxt {to { transform: translateX(0); }}
    /*slide effect left*/
    .come-in-lefttxt {opacity:1!important;transform: translateY(550px);animation: come-intxt 1s 0.1s ease forwards;}
    .come-in-lefttxt:nth-child(odd) {animation-duration: 0.6s; /* So they look staggered */}
    @keyframes come-intxt {to { transform: translateY(0); }}
    /*slides*/
    .cor-go-out-slowly{position: relative;animation: goOutslowly 0.5s ease-in-out forwards;}
    @keyframes goOutslowly{from{left: 0;opacity: 1;}to{left: -300px;opacity: 0;}}
     .come-slide-down{position: relative;animation: slidDwn 0.4s ease-in-out forwards;}
     @keyframes slidDwn{from{top: 0;opacity: 1;}to{top: 200px;opacity: 0;}}
     .cor-go-out{position: relative;animation: goOut 0.4s ease-in-out forwards;}
     @keyframes goOut{from{left: 0;opacity: 1;}to{left: -10px;opacity: 0;}}
     .cor-go-out-in{position: relative;animation: goOutin 0.7s ease-in-out forwards;}
     @keyframes goOutin{from{left: 50px;opacity: 0;}to{left: 0px;opacity: 1;}}
     .come-slide-toup{position: relative;animation: slidToup 0.4s ease-in-out forwards;}
     @keyframes slidToup{from{top: 200px;opacity: 0;}to{top: 0px;opacity: 1;}}
     .cor-cominR{position: relative;animation: cominR 0.4s ease-in-out forwards;}
     @keyframes cominR{from{right: -10;opacity: 0;}to{right: 0px;opacity: 1;}}
     /* animate diff partern */
     .come-slide-toup0{animation: slidToup1 0.9s ease-in-out 0.2s forwards;}
     @keyframes slidToup1{from{top: 100px;opacity: 0;}to{top: 0px;opacity: 1;}}
     .come-slide-toup1{position: relative;animation: slidToup 1s ease-in-out 0.1s forwards;}
     @keyframes slidToup{from{top: 100px;opacity: 0;}to{top: 0px;opacity: 1;}}
     .come-slide-toup2{position: relative;animation: slidToup2 1s ease-in-out 0.2s forwards;}
     @keyframes slidToup2{from{top: 100px;opacity: 0;}to{top: 0px;opacity: 1;}}
     .come-slide-toup3{position: relative;animation: slidToup3 1s ease-in-out 0.3s forwards;}
     @keyframes slidToup3{from{top: 100px;opacity: 0;}to{top: 0px;opacity: 1;}}
     .come-slide-toup4{position: relative;animation: slidToup4 1s ease-in-out 0.4s forwards;}
     @keyframes slidToup4{from{top: 100px;opacity: 0;}to{top: 0px;opacity: 1;}}
     .come-slide-toup5{position: relative;animation: slidToup5 1s ease-in-out 0.5s forwards;}
     @keyframes slidToup5{from{top: 100px;opacity: 0;}to{top: 0px;opacity: 1;}}
     .come-slide-toup6{position: relative;animation: slidToup6 1s ease-in-out 0.6s forwards;}
     @keyframes slidToup6{from{top: 100px;opacity: 0;}to{top: 0px;opacity: 1;}}
     /*  */
    /*blink*/
    .mva-blink{animation: blinkUpDn 1s infinite}
    .chr-white-hover:hover{color: white;transition: 0.4s ease-in-out 0s;}
    @keyframes blinkUpDn{0%{opacity: 0;}50%{opacity: 1;}100%{opacity: 0;}}
     /* dstv load */
 .spt-bigBox-cont-dst{background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0,0.4); position:fixed;top:0;left:0;
    bottom:0;right:0;width:100%;height:100vh;overflow:hidden;z-index: 1500000000000;}
    .pay-loading-anm:after{content: '.';animation: dstv 1s steps(5, end) infinite;}
    @keyframes dstv {0%, 20% {color: rgba(0,0,0,0);text-shadow:.25em 0 0 rgba(0,0,0,0),.5em 0 0 rgba(0,0,0,0);}
    40% {color: white;text-shadow:.25em 0 0 rgba(0,0,0,0),.5em 0 0 rgba(0,0,0,0);}60% {text-shadow:
    .25em 0 0 white,.5em 0 0 rgba(0,0,0,0);}80%, 100% {text-shadow:.25em 0 0 white,.5em 0 0 white;}}
    /*some useful animation custom*/
.hidden {position: relative;animation: rtyd 0.9s forwards;}
@keyframes rtyd{from{left: 0px;opacity: 1;}to{left: 50px;opacity: 0;}}
.visible {position:relative;animation: rty 0.1s }
.av2-altB-cont{min-width: 400px;height: 150px;border: 1px solid #ddd;border-radius: 6px;}
.spt-bigBox-cont{background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0,0.4); position:fixed;top:0;left:0;
  bottom:0;right:0;width:100%;height:100vh;z-index: 100000;transition: 0.4s ease-in-out 0s;overflow: hidden;}
.spt-bigBox-cont2{background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0,0.4); position:fixed;top:0;left:0;
    bottom:0;right:0;width:100%;height:100vh;z-index: 100000000000000000;transition: 0.4s ease-in-out 0s;overflow: hidden;}
.spt-bigBox-cont-pop{background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0,0.4); position:fixed;top:0;left:0;
  bottom:0;right:0;width:100%;height:100vh;z-index: 1000;transition: 0.4s ease-in-out 0s;overflow: hidden;}
.spt-bigBox-cont-transp{background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0,0); position:fixed;top:0;left:0;
  bottom:0;right:0;width:100%;height:100vh;z-index: 10000000000000000;transition: 0.4s ease-in-out 0s;overflow: hidden;}
  .spt-bigBox-cont-installer{background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0,0.4); position:fixed;top:0;left:0;
    bottom:0;right:0;width:100%;height:100vh;z-index: 20000000000000;transition: 0.4s ease-in-out 0s;overflow: hidden;}
.av2-anim-left{position: relative;animation: animleft 0.2s ease-in-out forwards;}
@keyframes animleft{from{left: 0px;opacity: 1;}to{left: -300px;opacity: 0;}}
.av2-anim-right{position:relative;animation: animright 0.5s ease-in-out forwards}
@keyframes animright{from{right: 0px;opacity: 1;}to{right: -300px;opacity: 0;}}
.av2-anim-comright{position:relative;animation: animcomright 2.5s ease-in-out 0.1s forwards}
@keyframes animcomright{from{right: -20px;opacity: 0;}to{right: 0px;opacity: 1;}}
.alt-zoom-in{transform: scale(0.7,0.7);}
/*loadding pdf*/
.dot {display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:3px;
  background:rgb(242,108,32);animation: wave 1.3s linear infinite;/* transition: 0.4s; */}
  .dot:nth-child(2) {animation-delay: -1.1s;}.dot:nth-child(3) {animation-delay: -0.9s;}
  @keyframes wave {0%, 60%, 100% {transform: initial;}30% {transform: translateY(-30px);}}
  .spt-bigBox-cont-loading{background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0,1); position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100%;z-index: 10;transition: 0.9s ease-in 0s}
.alt-ext-animate-top{position:relative;animation:animatexittop 0.5s forwards}@keyframes animatexittop{from{top:0px;opacity:1} to{top:-300px;opacity:0}}
.stp-marg-top-smr{margin-top: 18%;}
.cor-cont-Box-header{width: 100%;padding: 6px 10px;}.spt-cont-Box-Body{width: 100%;padding: 4px 5px;background-color: black;color: white;}
.cor-cont-Box-Body{width: 100%;padding: 4px 5px;background-color: black;color: white;}
.stp-border{border: solid thin #dddbdb33;}.cor-text-col{color:rgba(210, 20, 172, 1)!important}
.cor-border{border: solid thin #dddbdb33;}
.cor-text-col-bgr{background-color: rgba(245, 23, 116, .8)!important;color: white!important;}
.cor-text-col-text{color: rgba(245, 23, 116, .8)!important;}
/* .cor-text-col-bgr{background-color:rgba(210, 20, 172, 1)!important;color: white!important;} */
.cor-text-col-bgr-prog{background-color:rgba(210, 20, 172, 1)!important;color: white!important;}
.cor-border-bottom{border-bottom: solid thin #dddbdb33;}
.cor-border-top{border-top: solid thin #dddbdb33;}
.cor-border-left{border-left: solid thin #dddbdb33;}
.cor-border-right{border-right: solid thin #dddbdb33;}
.cor-box-shadow1{box-shadow: 0 1px 1px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);}
.cor-box-shadow1-hover:hover{box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);}
.cor-box-shadow{background-color: rgba(255,255,255,.01);
  transition: background-color 0.6s ease;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.09), 0 2px 10px 0 rgba(0,0,0,0.02); border: rgba(255, 255, 255, 0.288) thin solid;}
.cor-modul-btn-hover:hover{background-color: black!important;
    transition: background-color 0.6s ease;cursor: pointer;}.cor-fadein-cnt{transition: 0.4s ease-in-out 0s;}
 .alt-zoom-in-ext{animation: eTrasact 0.8s 0.36s ease-in-out forwards;}
 @keyframes eTrasact{0%{transform: scale(0.7,0.7);}100%{transform: scale(0.0,0.0);}}
 .cor-animate-zoomcor {animation:animatezoomcor 0.8s ease-in-out forwards;}@keyframes animatezoomcor{from{transform: scale(0.7,0.7)} to{transform:scale(0.7,0.7);}}
 /* .cor-animate-zoom {animation:animatezoomcor 0.9s}@keyframes animatezoomcor{from{transform:scale(1)} to{transform:scale(0)}} */
 /* new anim */
 .putme-loginPage-cont{position:fixed;top:0;left:0;
  bottom:0;right:0;width:100%;height:100vh;z-index: 5;}
  .putme-loginPage-cont-log{position:fixed;top:0;left:0;
    bottom:0;right:0;width:100%;height:100vh;z-index: 10;}
  .cor-medium{font-size: 13px!important;}
  .cor-xl{font-size: 25px;}
  .cor-pointer{cursor: pointer!important;}
  /*footer*/
  .putme-display-inline3{display: inline-block;margin: 3px;}
  .putme-displ-inl-sidbr1{display: inline-block;margin: 5px;}.alv2-phne-contr{transform: rotate(19deg);}
  /*alert*/
  .cor-alert-cont-top{width: 300px;height: 50px;background-color:rgba(210, 20, 172, 1)!important;transition: 0.4s ease-in-out 0s;}
  .cor-alert-cont-bdy{width: 300px;height: 120px;background-color: rgba(19, 18, 18, 0.911)!important;transition: 0.4s ease-in-out 0s;}
  .cor-admin-fiedco{color:rgb(238, 147, 220)!important;transition: 0.4s ease-in-out 0s;}
  .cor-animain-top{position: relative;animation: aniTop 0.4s ease-in-out forwards;}@keyframes aniTop{from{top: 0;opacity: 1;}to{top: -200px;opacity: 0;}}
  .cor-animain-down{position: relative;animation: aniDown 0.4s ease-in-out forwards;}@keyframes aniDown{from{top: 0;opacity: 1;}to{top: 200px;opacity: 0;}}
  /*box shadow*/
  .cor-modul-btn{border-radius: 10px;background-color: rgba(255,255,255,.08);
    transition: background-color 0.6s ease;box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0,0,0,0.12); border: rgba(255,255,255,.05) thin solid;padding: 13px;}
  .cor-modul-btn-hover:hover{background-color: rgba(240, 224, 224, 0.144);
      transition: background-color 0.6s ease;cursor: pointer;}
  .cor-dark-backgroud{background-color: #151515}
  .cor-alrt-bgr{background-color:rgba(210, 20, 172, 1)!important;color: white;transition: 0.4s ease-in-out 0s;}
  .cor-fix-img-br{border:1px solid rgba(210, 20, 172, 1);transition: 0.4s ease-in-out 0s;}
  .cor-intalics{font-style: italic!important;} .cor-bold{font-weight: bold!important;}.cor-txtdecoration{font-family:"Comic Sans MS", cursive, sans-serif!important;}
/*Designs*/
.cor-circle-btn{width: 80px;margin: auto;height: 80px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.3);color: white;}
/*text-shadow*/
.cor-text1-shaow{
  text-shadow: 1px 1px 1px rgb(24 24 24);
  text-shadow: 1px 1px 1px rgb(24 24 24 / 53%);
}
  /*angle 45*/
.adm-font-rot-45{transform: rotate(45deg);}
.adm-font-rot-97{transform: rotate(97deg);}
/*backgrounds*/
.cor-mainbody-bgr{background-color: rgba(0, 0, 0, 0.533)!important;transition: background-color 0.4s ease-in-out 0s!important;}
/* form utube  ui*/
.cor-utub-ui-cnt,.cor-mainbody-bgr{width: 100%;}.cor-utub-inpt{border-radius:15px;position:relative;background-color: #d3cfcf;transition: 0.4s ease-in-out 0s;
  transition: background-color 0.6s ease;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.09), 0 2px 10px 0 rgba(0,0,0,0.02); border: rgba(255, 255, 255, 0.288) thin solid;}
.cor-prev-pt{pointer-events:none}
.cor-ul-fix-bdy{background-color: rgb(36, 6, 36)!important;color: white!important;transition: 0.4s ease-in-out 0s;}
.cor-ul-fix:hover{background-color: rgb(41, 8, 33);color: white!important;transition: 0.4s ease-in-out 0s;}
/* nav bars whatsapp controller*/
.spt-bigBox-cont-Spln-what{background-color: rgba(20, 20, 20, 0.4);position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100vh;z-index: 100000000000;transition: 0.4s ease-in-out 0s;overflow: hidden;font-size: 15px!important;font-weight: lighter!important;}
/* transparent bg */
.spt-bigBox-cont-Spln-transparent{background-color: rgba(20, 20, 20, 0.1);position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100vh;z-index: 7000;transition: 0.4s ease-in-out 0s;overflow: hidden;font-size: 15px!important;font-weight: lighter!important;}
.cor-border-non{border:none!important}
.cor-container-bg-black{background-color: rgba(0, 0, 0, 0.4);background-image: radial-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.7));position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100vh;z-index: 110000;transition: 0.4s ease-in-out 0s;overflow: hidden;font-size: 15px!important;font-weight: lighter!important;}
.cor-border-non{border:none!important}
.cor-border-top-l-r{border-top-left-radius: 5px;border-top-right-radius: 5px;}
.cor-main1-bgr{background-color: #1c1a1a;color: #dfdfdf;border: thin #222 solid;}
.cor-main1-bgr-vot{background-color: #ededed;}
.cor-brng-txt-right{position: relative;animation: getRight 2.5s forwards;z-index: 5;}
@keyframes getRight{0%{right: -300px;}100%{right: 0px;}}
.cor-zom-up{position: relative;animation: zomUpTo 2.5s forwards;}
@keyframes zomUpTo{0%{font-size: 15px;}100%{font-size: 25px;}}
.cor-zom-up2{position: relative;animation: zomUpToDown 2.5s forwards;}
@keyframes zomUpToDown{0%{font-size: 25px;}100%{font-size: 0px;}}
.aks-mpdf-font-size{color:red;}
.cor-cbt-text-wrapper{
  background: linear-gradient(to right, #eb12d8 10%, #25abe8 50%, white 60%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: white;
  background-clip: text;
  text-fill-color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-background-clip: text;
  animation: text-animation 1.5s linear infinite;
  display: inline-block;
}
@keyframes text-animation{
  to{
    background-position: 200% center;
  }
}
.aks-vot-alrt-cnt{
  width: var(--app-width);
  height: 3.125em;
  position: var(--app-position);
  z-index: 9;
}
.cor-margin-top{
  margin-top:var(--app-width-9);
}
.cor-up-inp-zomm{
  transition: all ease-in 2s;
  transform:scale(1);
}
.cor-up-inp-zomm:hover{
    transform:scale(1.06)
}
.cor-play-heart-beat{
  transition: all ease-in 0.8s;
  transform:scale(1);
}
.cor-play-heart-beat:hover{
  transform:scale(1.19);
}
/* dialog boxes */
/* pop */
#mydiv{
  position: var(--app-position-absolute);
  z-index: 9000;
  border: 1px solid #d3d3d3;
  left: var(--app-center-content-left);
  top: var(--app-center-content-top);
  transform: var(--app-center-content-transform);
  width:var(--app-width);
  max-width: 350px;
  height: 550px;
  box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
}
#mydivheader{
  padding: 3px;
  height:30px;
  cursor: move;
  z-index: 10;
  color: #fff;
  width:inherit;
  box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%);
}
.cor-center-cont{
  position:var(--app-position-absolute);
  left:var(--app-center-content-left);
  top:var(--app-center-content-top);
  transform: var(--app-center-content-transform);
  width:var(--app-width);
}
.cor-center-bottom-cnt{
  position:var(--app-position-absolute);
  left:var(--app-center-content-left);
  bottom:var(--app-center-content-0);
  transform: translate(-50%,-0%);
  text-align: center;
}
.cor-notify-color{
  color: var(--app-orange-livscore);
  font-weight:bold;
  font-size: var(--app-width-13);
}
.cor-vibrate-heartbeat-trika{
  transition: all ease-in 0.8s;
  transform:scale(1);
}
.cor-vibrate-heartbeat-trika:hover{
  transform:scale(1.6);
}
/* payment success */
.success-checkmark {
  width: 80px;
  height: 115px;
  margin: 0 auto;
}
.success-checkmark .check-icon {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #4caf50;
}
.success-checkmark .check-icon::before {
  top: 3px;
  left: -2px;
  width: 30px;
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}
.success-checkmark .check-icon::after {
  top: 0;
  left: 30px;
  width: 60px;
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
  animation: rotate-circle 4.25s ease-in;
}
.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
  content: "";
  height: 100px;
  position: absolute;
  background: #ffffff;
  transform: rotate(-45deg);
}
.success-checkmark .check-icon .icon-line {
  height: 5px;
  background-color: green;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
}
.success-checkmark .check-icon .icon-line.line-tip {
  top: 46px;
  left: 14px;
  width: 25px;
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s;
}
.success-checkmark .check-icon .icon-line.line-long {
  top: 38px;
  right: 8px;
  width: 47px;
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s;
}
.success-checkmark .check-icon .icon-circle {
  top: -4px;
  left: -4px;
  z-index: 10;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  box-sizing: content-box;
  border: 4px solid green;
}
.success-checkmark .check-icon .icon-fix {
  top: 8px;
  width: 5px;
  left: 26px;
  z-index: 1;
  height: 85px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: #ffffff;
}

@keyframes rotate-circle {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}
@keyframes icon-line-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes icon-line-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
/* end payment */
/* progress bar */
.aks-cbt-progres{
  width: 10px;
  height: 10px;
  background-color:#FFF;
  border-radius: var(--app-border-radius);
}
.aks-cbt-progres-anione{
position: var(--app-position);
animation: anione 0.7s infinite ease-in-out 0.1s;
}
.aks-cbt-progres-anitwo{
  position: var(--app-position);
  animation: anione 0.7s infinite ease-in-out 0.3s;
}
.aks-cbt-progres-anithree{
  position: var(--app-position);
  animation: anione 0.7s infinite ease-in-out 0.6s;
}
@keyframes anione{from{transform:scale(1)} to{transform:scale(0)}}
.aks-cbt-heart-beat{
  transition: all ease-in 0.8s;
  transform:scale(1);
}
.app-login-page{
  position: var(--app-position-absolute);
  left:var(--app-center-content-left);
  top:var(--app-center-content-top);
  transform: var(--app-center-content-transform);
  width: var(--app-width);
  max-width: 265px;
}
/* chrome anim */
/* #sun{
	position: relative;
	width: 300px;
	height: 300px;
	border: 1px solid rgb(212, 231, 236);
	border-radius: 50%;
	transform: rotate(0deg);
	transition: transform 0.7s linear;
} */
/* #moon {
	position: absolute;
	width: 80px;
	height: 80px;
    border-radius: 50%;
	transform: rotate(0deg);
	transition: transform 0.7s linear; */
	/* top: -40px;   -child size/2 */
	/* left: 110px;   parent size/2 - child size/2 */
  /* background-color:rgb(212, 231, 236);
} */
/* .cor__rotate__sun{animation: spin 10s linear infinite;}
.cor__rotate__moon{animation: spin 10s linear infinite reverse;}
@keyframes spin {
  100% {
    transform: rotate(1turn);
  }
} */
/* <div id="parent" class="cor__rotate__sun">
        <div id="child" class="cor__rotate__moon"></div>
    </div> */
/*end chrome anim