@import url(https://fonts.googleapis.com/css?family=Share+Tech+Mono);

body,
p {
  padding: 0;
  margin: auto;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}

h2 {
  margin-top: 0;
  border-bottom: 1px solid black;
  font-size: 1.5em;
  font-weight: bold;
}

button {
  margin-bottom: 10px !important;
}

label {
  text-align: left;
  font-size: 1.25em;
  color: #777776;
  display: block;
}

header {
  text-align: center;
}

main {
  padding: 3em;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.left-column,
.center-column,
.right-column {
  /* we are using col-3 that's why below one we aren't using */
  /* width: 30%;  */
  min-width: 16em;
  margin: 0 1.5em;
  text-align: center;
}

/* Left Column */
#client-name {
  text-align: left;
  margin-bottom: 1em;
  font-family: "Helvetica Light", Helvetica, sans-serif;
  font-size: 1.25em;
  color: #777776;
}
.text-danger {
  color: red;
}


select {
  width: 250px;
  height: 60px;
  margin-bottom: 10px;
}

/* Center Column */
input {
  font-family: Helvetica-LightOblique, Helvetica, sans-serif;
  font-style: oblique;
  font-size: 1em;
  width: 100%;
  height: 2.5em;
  padding: 0;
  display: block;
  margin: 0px ;
  /* margin: 10px 0; */
}



/* left Column */
.left-column {
  padding: 0 1.5em;
}

#log {
  text-align: left;
  border: 1px solid #686865;
  padding: 10px;
  height: 9.5em;
  overflow-y: scroll;
}

.log-entry {
  color: #686865;
  font-family: "Share Tech Mono", "Courier New", Courier, fixed-width;
  font-size: 1.25em;
  line-height: 1.25em;
  margin-left: 1em;
  text-indent: -1.25em;
  width: 90%;
}

/* Other Styles */
.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

button:disabled {
  cursor: not-allowed;
}


/* -------------------- */


.btn-container {
  margin-top: 10px !important;
  margin-bottom: 20px !important;
  
}

.btn-circle {
  border: 3px solid rgba(0, 0, 0, .125) !important;
  width: 70px !important;
  height: 70px !important;
  padding: 10px 16px !important;
  border-radius: 35px !important;
  font-size: 24px !important;
  line-height: 1.33 !important;
  /* color:  #1976d2; */
}

.keypad {
  margin-left: auto !important;
}

/* old to replace this comment below 2 func */
/* .btn-outline-secondary {
  height: 70px !important;
  width: 75px !important;
} */
.btn-secondary {
  height: 70px !important;
  width: 75px !important;
}
.btn-outline-success {
  height: 70px !important;
  width: 75px !important;
}

.gradient-custom-2 {
  /* fallback for old browsers */
  background: #fccb90;
  
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
  
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
  }
  
  @media (min-width: 768px) {
  .gradient-form {
  height: 100vh !important;
  }
  }
  @media (min-width: 769px) {
  .gradient-custom-2 {
  border-top-right-radius: .3rem;
  border-bottom-right-radius: .3rem;
  }
  }


/* ---------------------------for google sign in css-------------------------------- */
/* $white: #fff;
$google-blue: #4285f4;
$button-active-blue: #1669F2; */

/* .google-btn {
  width: 184px;
  height: 42px;
  background-color: #4285f4;
  border-radius: 2px;
  box-shadow: 0 3px 4px 0 rgba(0,0,0,.25);
}
  .google-icon-wrapper {
    position: absolute;
    margin-top: 1px;
    margin-left: 1px;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    background-color: #fff;
  }
  .google-icon {
    position: absolute;
    margin-top: 11px;
    margin-left: 11px;
    width: 18px;
    height: 18px;
  }
  .btn-text {
    float: right;
    margin: 11px 11px 0 0;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.2px;
    font-family: "Roboto";
  }
  /* :hover {
    box-shadow: 0 0 6px #4285f4;
  }
  :active {
    background: #1669F2;
  } */


/* @import url(https://fonts.googleapis.com/css?family=Roboto:500); */ 


------------------


.row {
  margin: 0 auto;
  width: 280px;
  clear: both;
  text-align: center;
  font-family: 'Exo';
}

.digit,
.dig {
  float: left;
  padding: 10px 30px;
  width: 30px;
  font-size: 2rem;
  cursor: pointer;
}

.sub {
  font-size: 0.8rem;
  color: grey;
}

.container-vall {
  background-color: white;
  /* width: 320px; */
  padding: 20px;
  margin: 30px auto;
  height: 420px;
  text-align: center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

#output {
  font-family: "Exo";
  font-size: 2rem;
  height: 60px;
  font-weight: bold;
  color: #1976d2;
}

#call {
  display: inline-block;
  background-color: #66bb6a;
  padding: 4px 30px;
  margin: 10px;
  color: white;
  border-radius: 4px;
  float: left;
  cursor: pointer;
}

.botrow {
  margin: 0 auto;
  width: 280px;
  clear: both;
  text-align: center;    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"
  font-family: 'Exo';
}

.digit:active,
.dig:active {
  background-color: #e6e6e6;
}

#call:hover {
  background-color: #81c784;
}

.dig {
  float: left;
  padding: 10px 20px;
  margin: 10px;
  width: 30px;
  cursor: pointer;
}

/* Custom CSS */
.profile-image {
  width: 20px; /* Adjust the width as needed */
  height: 20px; /* Adjust the height as needed */
  border-radius: 50%; /* Make the image round */
  /* object-fit: cover; Ensure the image covers the entire space */
}