:root{
    --standard-font: "Roboto", sans-serif;
    --dial-green: rgb(59, 186, 52);
    --dial-dark-green: rgb(45, 150, 40);
    --dial-grey: rgb(232, 232, 232);
    --dial-dark-grey: rgb(187, 187, 187);
    --delete-hover: .cls-3:hover{
        fill: var(--dial-dark-grey)
    }
}

*{
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@media (max-height: 844px) and (min-width: 390px){
    h1{
        display: none;
    }
    #tt-logo-container svg{
        display: none;
    }
}



body{
    text-align: center;
    width: 25rem;
    height: 100vh;
    margin: auto;
}

button{
    cursor: pointer;
}

#phone-bezel{
    width: 22rem;
    margin: auto;
    background-color: black;
    padding: 0.55rem 0 0.55rem 0;
    border-radius: 2.8rem;
}

#phone-screen{
    width: 21rem;
    background-color: white;
    margin: auto;
    padding: 0 0 0.3rem 0;
    border-radius: 2.2rem;
    position: relative;
}


#phone-dial-container{
    width: 90%;
    margin: 0 auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#home-line{
    width: 8rem;
    height: 0.3rem;
    border-radius: 0.3rem;
    background-color: black;
    margin: 1rem auto 0 auto;
}


/*icons*/
#phone-screen svg{
    width: 4.8rem;
}

/*Time*/
#time{
    position: absolute;
    top: 0.05rem;
    left: 2rem;
    font-size: 1rem;
    font-weight: 800;
}
/**/


#phone-camera{
    width: 5.5rem;
    height: 1.7rem;
    background-color: black;
    position: relative;
    top: 0.7rem;
    margin: auto;
    border-radius: 0.8rem;
}

#top-icons{
    position: absolute;
    top: 1.15rem;
    right: 1.7rem

}

.cls-5 {
    fill: #343333;
  }

  .cls-6 {
    fill: #11ba06;
  }

  .cls-7 {
    fill: #f8300e;
  }
/**/
/*form*/
input{
    width: 80%;
    font-size: 2.4rem;
    text-align: center;
    margin: 2rem 0 0 0;
    border: none;
}
input:focus{
    outline: none;
}

form button{
    color: #127df1;
    background-color: transparent;
    border: none;
    margin: 0 0 1rem 0;
}

form button:active{
    color: #0d61bb;
    background-color: transparent;
    border: none;
}

#check-btn{
    margin: auto;
}



#results-div{
    width: 100%;
    height: 2.5rem;
}

/**/
/*dial numbers*/
.phone-dial-numbers:not(:last-child){
    width: 5rem;
    height: 5rem;
    margin: 0.5em;
    text-align: center;
    position: relative;
    outline: none;
    border: none;
    border-radius: 5rem;
    background-color: var(--dial-grey);
}

.phone-dial-numbers:not(:last-child):active{
    background-color: var(--dial-dark-grey);
}

.phone-dial-numbers:not(:last-child) p{
    font-size: 2rem;
    font-weight: 800;
    position: relative;
    margin: 0;
    padding: 0;
}

.dial-letters{
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    margin: -0.4rem 0 0 0;
}

#dial-phone{
    width: 5rem;
    height: 5rem;
    text-align: center;
    position: relative;
    outline: none;
    border: none;
    border-radius: 5rem;
    background-color: var(--dial-green);
    margin: 0 0 0 1.8rem;
}

#dial-phone:active{
    background-color: var(--dial-dark-green);
}

.cls-1{
    fill: white;
}



#phone-dial-backspace{
    width: 1.7rem;
    height: 1rem;
    position: relative;
    border: none;
    outline: none;
    background-color: white;
    top: 2.5rem;
    left: 3rem;
}

#backspace-div{
    position: absolute;
    bottom: -0.3rem;
    right: 0.3rem;
}

#backspace-div svg{
    width: 2.2rem;
}

.cls-3{
    fill: var(--dial-grey);
}
.cls-3:active{
    fill: var(--dial-dark-grey)
}



#dial-phone svg{
    width: 2.5em !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 2em !important;
    right: 2em !important;
}
/*dial numbers*/



/*bottom icons*/
#bottom-selection-icons-container{
    margin: 2.6rem 0 0 0;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}
#bottom-selection-icons-container svg{
    width: 85%;
    margin: auto;
}

.selection-names{
    font-size: 0.65rem;
    color: var(--dial-dark-grey);
    margin: 0 0.79rem 0 0.79rem;
}

#keypad-blue{
    color: rgb(18, 125, 241);
}




.a40d7d51-c530-4dc2-a6bc-30a0de3de166 {
    fill: #9b9b9b;
  }

  .e653ce7c-7338-4a9e-bfb9-c81f16bb136d {
    fill: #127df1;
  }

.img-1{
    fill: black;
}

#tt-logo-container svg {
    width: 5rem;

}