html{
  height: 100%;
  font-family: Arial;
  overflow: hidden;
}

body {
  background-color: #38b6ff;
  height: 100%;
  font-family: Arial;
  background-image: none;
  overflow: auto;
  overflow-x:hidden;
  overflow-y:scroll;
}

ul {
  text-align: center;
  columns: 4;
  column-count:4;
  -webkit-columns: 4;
  -moz-columns: 4;
}

.btn-warning {
  margin-top: 3px;
  margin-right: 3px;
  font-size: 18px;
}

.btn-danger {
  margin-top: 3px;
  margin-right: 3px;
  font-size: 18px;
}

.btn-success {
  font-size: 18px;
  margin-top: 3px;
  margin-right: 3px;
}

.columns{
    float: center;
    position: relative;
    margin-right: 20px;
}

.columns1{
    float: center;
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding-left: 275px;
}

.meter { 
	margin-left: -2px;
	margin-top: 2px;
	height: 26px;  /* Can be anything */
	position: relative;
	background: #555;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	padding: 3px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.meter > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
  width: 100%;
}

.pointCount {
  display: inline-block;
}

.total {
  display: inline-block;
}

.Progress {
  margin-bottom: -10px;
}

.selection {
  position: relative;
  padding: 2px;
}

input { margin-bottom: 10px; }

.select-items {
  width: 20px;
  height: 10px;
}
.pointer {
  position: fixed;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  opacity: 0.4;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
}

.pointer1{
  transition: 0.05s;
}

.pointer2{
  transition: 0.10s;
  width: 35px;
  height: 35px;
}

.pointer3{
  transition: 0.15s;
  width: 30px;
  height: 30px;
}

.pointer4{
  transition: 0.20s;
  width: 25px;
  height: 25px;
}

.pointer5{
  transition: 0.25s;
  width: 20px;
  height: 20px;
}

#page-container {
  position: relative;
  min-height: 100%;
}

#content-wrap {
  padding-bottom: 3rem;    /* Footer height */
}

.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin: 10px;
    padding: 12px 24px;
    border: 1px solid #113fd8;
    border-radius: 25px;
    background: #2076ff;
    background: -webkit-gradient(linear, left top, left bottom, from(#2076ff), to(#113fd8));
    background: -moz-linear-gradient(top, #2076ff, #113fd8);
    background: linear-gradient(to bottom, #2076ff, #113fd8);
    -webkit-box-shadow: #268eff 0px 0px 40px 0px;
    -moz-box-shadow: #268eff 0px 0px 40px 0px;
    box-shadow: #268eff 0px 0px 40px 0px;
    text-shadow: #0a257f 1px 1px 1px;
    font: normal normal bold 20px arial;
    color: #ffffff;
    text-decoration: none;
}
.button:hover,
.button:focus {
    border: 1px solid #144afe;
    background: #268eff;
    background: -webkit-gradient(linear, left top, left bottom, from(#268eff), to(#144cff));
    background: -moz-linear-gradient(top, #268eff, #144cff);
    background: linear-gradient(to bottom, #268eff, #144cff);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #113fd8;
    background: -webkit-gradient(linear, left top, left bottom, from(#113fd8), to(#113fd8));
    background: -moz-linear-gradient(top, #113fd8, #113fd8);
    background: linear-gradient(to bottom, #113fd8, #113fd8);
}

.footer {
            display: block;
            position: static;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3rem;
            background-color: gray;
            color: black;
            padding: 5px;
}
    .alignLeft {
            float: left;
    }
    .alignRight {
            float: right;
    }
    #gradient {
            background-image: linear-gradient(
                to top right, 
                #a7fbfc, #ff80bd
                );
    }
    
    kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
   }
   
   .myTextArea {
       width: 100%;
       height: 120px;
       color: white;
       background-color: #333;
       resize: none;
   }
   
   .comment-box {
       width: 100%;
       height: 100%;
       padding: 10px;
       margin-bottom: 5px;
       background-color: #ddd;
       border-radius: 4px;
       color: black;
       position: relative;
   }
   
   .comment-btn {
   width: 100px;
   height: 30px;
   font-size: 16px;
   font-weight: 400;
   background-color: #333;
   color: white;
   border: none;
   border-radius: 25px;
   margin-top: 10px;
   opacity: 0.9;
   }
   
    .comment-btn:hover {
       opacity: 1.0;
   }
   
   .edit-btn {
       width: 50px;
       height: 20px;
       font-size: 16px;
       font-weight: 400;
       background-color: transparent;
       opacity: 0.6;
       color: black;
       border: none;
   }
   
      .edit-btn:hover {
       opacity: 1.0;
   }
   
   .delete-btn {
       width: 60px;
       height: 20px;
       font-size: 16px;
       font-weight: 400;
       background-color: transparent;
       opacity: 0.6;
       color: black;
       border: none;
   }
   
    .delete-btn:hover {
       opacity: 1.0;
   }
   
      .reply-btn {
       width: 60px;
       height: 30px;
       font-size: 16px;
       font-weight: 400;
       border-radius: 25px;
       margin-bottom: 5px;
       margin-left: 5px;
       background-color: orange;
       opacity: 0.8;
       color: black;
       border: none;
   }
   
    .reply-btn:hover {
       opacity: 1.0;
   }