* {
    -webkit-font-smoothing: antialiased;
   }
body,html{
   width: 100%;
   
    background-color:rgb( 197, 228, 231);
    font-family: 'Space Mono', monospace;
    display: flex;
    align-items: center;
}

.bill:focus {
    outline: 2px solid rgb(38, 192, 171);
    background-color: rgb(235, 244, 243);
}

.bill,
.people {
    background-color: rgb(244, 250, 250);
    color: rgb(0, 73, 77);
    width: 100%;
}

.bill::placeholder{
    color: rgb(0, 73, 77)
}

.people:focus {
    outline: 2px solid red;
}

.discont {
    background-color: rgb(0, 73, 77);
    color: white;
    font-size: medium;
    width: 90px;
}


.discont-o {
    background-color: rgb(38, 192, 171);
    color: rgb(0, 73, 77);
    font-size: medium;
    width: 90px;
}

.custom {
    width: 90px!important;
    border: none;
    font-size: medium;
}
.intut-div{
    width: 100%;
}
.custom:focus {
    outline: 2px solid rgb(38, 192, 171);
}

.reset {
    background-color: rgb(38, 192, 171);
    color: rgb(0, 73, 77);
    
}
.reset:focus{
    background-color: rgb(170, 222, 215);

}
.reset:hover,.discont:hover,.discont-o:hover{
    background-color: rgb(78, 226, 206);
}

.right-spliter{
    display: flex;
    border-radius: 5%;
    margin-right: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    width: 300px;
    background-color: rgb(0, 73, 77);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.custom::placeholder {
    display: flex;
    justify-content: center;
}

.custom:focus::placeholder{
    color: transparent;
}

input{
    width: 250px;
    font-size: 24px;
    text-align: end;
}

.left-spliter{
    margin: 40px;
    
}

.top-text{

    color: rgb( 0, 73, 77)
}

.spliter{

    border-radius: 5%;
    margin-top: 50px;
    height: 400px;
}

.top-text{

    margin: 0;
    margin-top: 10%;
}

.botton-text {
    font-size: x-small;
}
.person-text{
   color: rgb( 197, 228, 231);
   font-size: x-small;
}
.tip-size{
    font-size: x-small;
}

.people::placeholder{
    color: rgb(0, 73, 77);
 
}
.dollar{
    position: absolute;
    margin-top:6px;
    color: gray;
    margin-left:2px;

    
}
.numbers{

   color: rgb(38, 192, 171);
   font-size: xx-large;
}
.user{
    position: absolute;
    margin-top:6px;
    color: gray;
    margin-left:3px;
    margin:auto;
}
.hidden{
    display: none;
    
}

.midle-left{
    display: flex;
    
    flex-direction: column;
    
}

@media screen and (max-width: 700px) {

    .contenedor{margin-top: 0px!important;
        overflow:auto;
    }
    .spliter{
        width: 80%;
        height: 500px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        margin-top: 1px;
        
    }
    .top-text{
        padding-top:  5px!important;
        padding-bottom: 2px!important;
    }
    .left-spliter{
        display: flex!important;
        align-items: center;
        justify-content: space-around!important;
        width: 90%;
        height: 30%;
        margin: 3px;
        margin-left: 50px;
        font-size: xx-small;
    
    }
    
    .botton-text{
        width: 80%;
    }
    
    .bill,.people{
        width:80%
    }

    .botton-text{
        margin-top: 3px;
        width: auto;
    }
    .middle-left{
    width: 90%;
   
    
        
    }
    
    
    .top-buttons{
        
    display: flex;
    justify-content: space-between;
    
    width: 80%;
    }
    .botton-buttons{
        width: 80%;
        margin-bottom: 1px;
    }
    
 .bill,.people{
    width: 100%;
    height: 30px;
    font-size: small;
 }

    
    .right-spliter{
        width: 90%;
        margin-top: 0%;
        margin-right: 0%;
        
        height: 50%;
    
    }
    .left-spliter{
       margin: auto;
    }
    .discont,.discont-o{
        font-size: small;
        width: 80px;
    }
  
    .custom{
        margin-left: 1px;
        width: 75px!important;
        font-size: x-small;
    }
    
    }