*{
    font-family: arial;
    user-select: none;
}

.heading{
    text-align: center;
}

.alarmButtons{
  background-color: transparent;
  box-shadow: none;
  outline: none;
  display: block;
  margin: auto;
  margin-top: 15px;
  margin-bottom: 20px;
  border: 2px solid darkgray;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 15px;
  color: #3E403F;
  transition: .2s all;
  border-radius: 14px;
  user-select: none;
  text-align: center;
}

.alarmButtons:hover {
  background-color: green;
  color: white;
  transition: .2s all;    
}

.editImage, .deleteImage {
    width: 13px;
    height: 13px;
}
.deleteImage{
    width: 9px;
}

.alarms{
    font-size: 25px;
    text-align: center;
    display: block;
}

.active {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
}

.active:hover {
    cursor: pointer;
    background-color: #F7F7F7;
    transition: .2s all;
}

.multipleAlarms{
    float: left;
    width: 50%;
}

.multipleAlarmsCaption{
    font-size: 25px;
}

.modal {
    z-index: 2;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top:0px;
  left: 0px;
  background-color: rgba(0,0,0,0.5);

}

.modalHeading {
    text-align: center;
}

.modalContent {
    position: relative;
    padding: 10px;
    width: 420px;
    background-color: white;
    margin: auto;
    border-radius: 4px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.close{
    text-align: right;
    position: absolute;
    right: 8px;
    top: 3px;
    color: #3E403F;
    border-radius: 50%;
    font-size: 20px;
    user-select: none;
    cursor: pointer;
    }

.close:hover{
    transition: 0.3s all;
    animation-name: CloseButtonAnimation;
    animation-iteration-count: 1;
    animation-duration: 2s;
    color: red;

}

.alarmInput{
    display: block;
    margin: auto;
    text-align: center;
    font-size: 20px;
    border: none;
    outline: none;
}

 @keyframes CloseButtonAnimation {
  0% {transform: rotate(180deg);}
}

.rightDiv{
    text-align: center;
    position: relative;
    margin: auto;
    display: block;
}

.message{
    color: red;
    text-align: center;
}

.statusText{
    display: inline-block;
    padding-left: 6px;
    width: 1px;
}

.bell{
  width: 80px;
  height: 80px;
  font-size: 40px;
  margin:100px auto;
  color: #9e9e9e;
  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}