*{margin:0; padding:0;}
html {
    -webkit-tap-highlight-color:rgba(0,0,0,0);scroll-behavior:smooth; overscroll-behavior-y: contain;
    touch-action: none!important;
    user-zoom: fixed !important;
}
body {
      overflow-x: hidden; background:#000;color:#eaeaea;;
      font: 300 2.10em 'Lato', Helvetica Neue,  Helvetica, Arial ;
      font-display: swap;
      text-align:right;
      user-select: none; -webkit-user-select: none; /* Safari */ 
       overscroll-behavior-y: contain;
    
         
}
/* lato-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/lato-v23-latin-300.eot'); /* IE9 Compat Modes */
    src: url(' fonts/lato-v23-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url(' fonts/lato-v23-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url(' fonts/lato-v23-latin-300.woff') format('woff'), /* Modern Browsers */
         url(' fonts/lato-v23-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url(' fonts/lato-v23-latin-300.svg#Lato') format('svg'); /* Legacy iOS */
  }
  /* lato-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(' fonts/lato-v23-latin-regular.eot'); /* IE9 Compat Modes */
    src: url(' fonts/lato-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url(' fonts/lato-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url(' fonts/lato-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
         url(' fonts/lato-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url(' fonts/lato-v23-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
input[type="checkbox" ]  { visibility: hidden;scale: 0;}
input { visibility: hidden;position:fixed;top:-100%;}
input[type="radio" ]  { visibility: hidden;}
 
:root { --c:#02ffc4;}
a ,a:link,a:visited,a:hover{color: #15e6f9;;outline: none;text-decoration:none; }

li {list-style: none;}
::-webkit-scrollbar {display: none; /* Chrome, Safari, and Opera */}
::-webkit-selection,::-moz-selection , ::selection {
  background-color: rgb(3, 180, 74);
  color: white;
}
  /* Apply padding and border radius to a parent element instead */
i { font-style:normal ;}
i {
   border-radius: 10px;
   overflow: hidden;
}
  /* Style the parent element when selected */
  i::-webkit-selection {
    background-color: rgb(3, 180, 74);
    color: white;
    box-shadow:2px 2px 2px #ffffff;
  }
  i::-moz-selection  {
    background-color: rgb(3, 180, 74);
    color: white;
    box-shadow:2px 2px 2px #ffffff;
  }
  i::selection {
    background-color: rgb(3, 180, 74);
    color: white;
    border-radius: 10px;
    padding: 5px;
    overflow: hidden;
    box-shadow:2px 2px 2px #ffffff;
  }
  
/* general layout */
.topwrap{
    position: fixed;
    top: 0;
    height: 50%;
    width: 100%;
    transition: .2s;
    will-change: transform;
}
.history {
    padding: 0 5%;
    height: 85%;
    overflow-y: scroll; 
    will-change: transform;
}
#display{
    display: block;
    padding: 15px 5%;
    min-height: 44px;
    font-size: 44px;
    font-weight: 400;
    color: #02ffc4;
    color: #05dcb1;
    background: #040404;
}
.history ,#display{
     /* white-space: pre-line; */
    overflow-wrap: break-word;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text; 
}
.c-msg{
    text-align: center;
    font-size: 20px;
    color: #fff;
   background:#00b19f;
    padding: 10px;
    font-weight: 400;
    border-radius: 15px;
    overflow: hidden;
    width:60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1px;
    margin-top: 1px;
}
/* dialpad */
.calc{
    position: fixed;
    height: 50%;
    width: 100%;
    bottom:0;
    left:0;
    line-height: 0;
    background: #111;
    background: #202426;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    transition: .2s;
    border-radius: 20px;
    overflow: hidden;
    will-change: transform;
}
.arrow{
    position: absolute;
    z-index: 99999;
    padding:  30px;
    color: #05dcb1;
    left: 0;
    bottom: 0;
    line-height: 0;
    transition: .3s;
}
 #cek-i:checked ~ .calc {transform: translate(0, 80%);}
 #cek-i:checked ~ .topwrap {max-height: 90%!important ;}
 #cek-i:checked ~ .topwrap .arrow {rotate: 180deg;}
.c{
    float: left;
    width: 25%;
    padding-top: 1%;
}
.button {
    cursor: pointer;
    position: relative;
    height: 16.666%;  
}
.num{color:#fff;}
.row1 i{
    top: calc(50% - 15px)!important;
    color: #777;
}
.row1 i:active{
    top: calc(50% - 15px)!important;
    color: #ffffff;
}
.button i{ position: relative;
    top: 50%;
}
.dots {
    color: #ccc;
    position: absolute;
    padding: 40px;
    padding-top: 0px;
    padding-left: 10px;
    left: 0;
    z-index: 9999;
}
.operator {color: #02ffc4;}
/* display styling */
.number {color:#dddddd;}
.simbol {color:#99f0f6;padding: 10px;}
.simbol.x,.simbol.d  {font-size: 0; }
.simbol.x::after {
    content: '×';
    font-size: 35px;
}
.simbol.d::after {
    content: '÷';
    font-size: 35px;
}
.result {
	color:#82f1f9;
    padding: 0px;
}
.equal{
    height:33.333%;
    background: #05dcb1;
    /* background: #05cedc; good blue color */
    color: #fff!important;
    border-radius: 15px;
}
.close{
    position: fixed;
    height: 100%;
    width: 50%;
    left: -50%;
    z-index: 999999;
}
#m{
    position: fixed;
    height: 100%;
    width: 50%;
    left: 100%;
    font-size: 22px;
    border-radius: 20px;
    overflow: hidden;
    /* background: #00869b; nice color */
    background: #101217;
    z-index: 9999;
    transition: .2s;
    will-change: transform;
}
#panel{
    position: relative;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    padding-bottom: 50px;
}
.options{
    cursor: pointer;
    padding: 7px;
    position: relative;
    right: 0;
    top: 10px;
    display: block;
    padding-right: 90px;
}
/* chekboxes --------*/
.options:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 13px;
    border-radius: 50%;
    background-color: #5f5f5f;
    transition: .2s ;
    will-change: transform;
    scale: 0;
    z-index: 2;
}
.options:after {
    content: "";
    position: absolute;
    height: 17px;
    width: 40px;
    top: 12px;
    right: 20px;
    border-radius: 17px;
    transition:  .2s ;
    background: rgb(255 255 255 / 18%);
    z-index: 1;
}
#link {
    position: fixed;
    bottom: 0px;
    right: 0;
    width: 100%;
    padding-bottom: 4px;
    padding-top: 10px;
    font-size: 15px;
    text-align: center;
    z-index: 9;
    background: #101217;
    cursor: pointer;
  
}
#link i{font-size: 10px;}

/* chekboxes end */
#cek-m:checked ~ .close {transform: translate(100%, -0%);}
#cek-m:checked ~ #m {transform: translate(-100%, -0%);}
#cek-m:checked ~ .calc {transform: translate(-50%, -0%);}
#cek-m:checked ~ .topwrap {transform: translate(-50%, -0%);}

#cek-1:checked ~ .topwrap {font-size: 25px;}
#cek-2:checked ~ .topwrap {font-size: 2.10rem ;}
#cek-3:checked ~ .topwrap {font-size: 46px;}
#cek-1:checked ~ .calc {font-size: 25px;}
#cek-2:checked ~ .calc {font-size: 2.10rem ;}
#cek-3:checked ~ .calc {font-size: 45px;}


#cek-20:checked ~ .calc {  height: 40%;}
#cek-21:checked ~ .calc {  height: 50%;}
#cek-22:checked ~ .calc {  height: 60%;}


#cek-4:checked ~ .calc {background: #000;}
#cek-5:checked ~ .calc {background: #111;}
#cek-6:checked ~ .calc {background: #101217;}
#cek-7:checked ~ .calc {background: #202426;}

#cek-8:checked ~ .topwrap .arrow  {color:#fff ;}
#cek-8:checked ~ .calc .c .operator {color:#fff ;}
#cek-8:checked ~ .calc .c .equal  {background:transparent;}

#cek-9:checked ~ .topwrap .arrow{ color:#02ffc4;}
#cek-9:checked ~ .calc .c .operator{ color:#02ffc4;}
#cek-9:checked ~ .calc .c .equal  {background:#02ffc4;}

#cek-10:checked ~ .topwrap .arrow {color:#80A2CF;}
#cek-10:checked ~ .calc .c .operator {color:#80A2CF;}
#cek-10:checked ~ .calc .c .equal {background:#80A2CF;}
#cek-10:checked ~ .topwrap #display {color:#BBCEE7;}
#cek-10:checked ~ .topwrap #display .simbol {color:#80A2CF;}
#cek-10:checked ~ .topwrap .history .result{color:#80A2CF;}
#cek-10:checked ~ .topwrap .history .simbol{color:#80A2CF;}

#cek-11:checked ~ .topwrap .arrow {color: #05cedc;}
#cek-11:checked ~ .calc .c .operator {color: #05cedc;}
#cek-11:checked ~ .calc .c .equal {background: #05cedc;}
#cek-11:checked ~ .topwrap #display .simbol {color:#05cedc;}
#cek-11:checked ~ .topwrap .history .result{color:#84f7ff;}
#cek-11:checked ~ .topwrap .history .simbol{color:#acf9ff;}


#cek-12:checked ~ .topwrap .arrow  {color:#00b19f;}
#cek-12:checked ~ .calc .c .operator {color:#00b19f;}
#cek-12:checked ~ .calc .c .equal {background:#00b19f;}




#cek-13:checked ~ .topwrap .arrow  {color:#f06292;}
#cek-13:checked ~ .calc .c .operator {color:#f06292;;}
#cek-13:checked ~ .calc .c .equal {background:#f06292;}
#cek-13:checked ~ .topwrap #display {color:#f06292;}
#cek-13:checked ~ .topwrap #display .simbol {color:#f06292;}
#cek-13:checked ~ .topwrap .history .result{color:#ffb6ce;}
#cek-13:checked ~ .topwrap .history .simbol{color:#ffc3e1}



#cek-1:checked ~ #m #panel .c1:before  ,
#cek-2:checked ~ #m #panel .c2:before  ,
#cek-3:checked ~ #m #panel .c3:before  ,
#cek-4:checked ~ #m #panel .c4:before  ,
#cek-5:checked ~ #m #panel .c5:before  ,
#cek-6:checked ~ #m #panel .c6:before  ,
#cek-7:checked ~ #m #panel .c7:before  ,
#cek-8:checked ~ #m #panel .c8:before  ,
#cek-9:checked ~ #m #panel .c9:before  ,
#cek-10:checked ~ #m #panel .c10:before  ,
#cek-11:checked ~ #m #panel .c11:before  ,
#cek-12:checked ~ #m #panel .c12:before  ,
#cek-13:checked ~ #m #panel .c13:before  ,
#cek-14:checked ~ #m #panel .c14:before  ,
#cek-15:checked ~ #m #panel .c15:before ,
#cek-20:checked ~ #m #panel .c20:before  ,
#cek-21:checked ~ #m #panel .c21:before  ,
#cek-22:checked ~ #m #panel .c22:before  {transform: translate(-140%,0%);background-color:#15e6f9;scale:1;}