* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global Styles */
body {
    /* font-family: Arial, sans-serif; */
    line-height: 1.6;
    background-color: #F5F4E7;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    /* width: 80%; */
    /* margin: 0 auto; */
    padding: 20px;
}



@media screen and (max-width: 820px) {
 #head_img {
  display: none;
 }
}




/* Header Styles */
header {
    background-color: #aedf97;
    color: #fff;
    padding: 10px 0;
    min-height:50px;
}

header .container h1 {
    font-size: 2em;
}

header nav ul {
    list-style-type: none;
}

header nav ul li {
    display: inline;
    margin-right: 20px;
}

header nav ul li a {
    color: #111;
    text-decoration: none;
}

/* Section Styles */
section {
    padding: 50px 0;
}

section h2 {
    margin-bottom: 20px;
}

/* Plan Styles */
.plan {
    /* background-color: #f9f9f9; */
    padding: 5px 0 0 15px;
    margin-bottom: 20px;
}

.plan h3 {
    color: #333;
}

/* Footer Styles */
footer {
    background-color: #4e8e3d;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    margin-top: auto;
}

#page-container {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

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

#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #4e8e3d;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

.sel {
        border: 1px solid #c7c7c7;
        border-radius: 6px;
        color: #000000;
        padding: 3px;
}


p {
	line-height:28px;
	font-size:16px;
}

.main {
	min-height:380px;
}


#overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
  opacity: 0.7;
  z-index: 9000;
  width: 100%;
  min-width: 1270px;
  min-height: 2000px;
  height: 100%;
  display: none;
}


#add_seg_div {
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #e8e8e8;
  background: #fdfdfd;
  display: none;
  z-index: 9001;
}


.butt {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
        background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
        background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
        background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
        background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
        background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
        background-color:#ffffff;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        border:1px solid gray;
        display:inline-block;
        cursor:pointer;
        color:#222;
        font-family:arial;
        font-size:13px;
        padding:3px;
        margin:1px;
        text-decoration:none;
        text-shadow:0px 1px 0px #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.butt:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
        background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
        background-color:#f6f6f6;
}
.butt:active {
        position:relative;
        top:1px;
}





#zbutton {
        -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
        -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
        box-shadow:inset 0px 1px 0px 0px #ffffff;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
        background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
        background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
        background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
        background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
        background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
        background-color:#ffffff;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        border:1px solid gray;
        display:inline-block;
        cursor:pointer;
        color:#222;
        font-family:arial;
        font-size:13px;
        padding:3px;
        margin:1px;
        text-decoration:none;
        text-shadow:0px 1px 0px #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

#zbutton:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
        background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
        background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
        background-color:#f6f6f6;
}
#zbutton:active {
        position:relative;
        top:1px;
}





div.table-title {
   display: block;
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
}

.table-title h3 {
   color: #fafafa;
   font-size: 30px;
   font-weight: 400;
   font-style:normal;
   font-family: "Roboto", helvetica, arial, sans-serif;
   text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
   text-transform:uppercase;
}


/*** Table Styles **/

.table-fill {
  /* background: white; */
  border-radius:5px;
  border:2px solid #c8c8c8;
  /* height: 320px; */
  margin: auto;
  max-width: 600px;
  padding:5px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
}
 
.table-fill th {
  color:black;
  background:#aedf97;
  /* border-bottom:4px solid #9ea7af; */
  /* border-right: 1px solid #343a45; */
  font-size:18px;
  font-weight: 100;
  padding:8px;
  text-align:center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

.table-fill th:first-child {
  border-top-left-radius:3px;
}
 
.table-fill th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}
  
.table-fill tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}
 
.table-fill tr:hover td {
  background:#a4c4f7;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}
 
.table-fill tr:first-child {
  border-top:none;
}

.table-fill tr:last-child {
  border-bottom:none;
}
 
.table-fill tr:nth-child(odd) td {
  background:#EBEBEB;
}
 
.table-fill tr:nth-child(odd):hover td {
  background:#a4c4f7;
}

.table-fill tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}
 
.table-fill tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}
 
.table-fill td {
  background:#F5F4E7;
  padding:10px;
  /* text-align:left; */
  vertical-align:middle;
  font-weight:300;
  font-size:16px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

.table-fill td:last-child {
  border-right: 0px;
}

.table-fill th.text-left {
  text-align: left;
}

.table-fill th.text-center {
  text-align: center;
}

.table-fill th.text-right {
  text-align: right;
}

.table-fill td.text-left {
  text-align: left;
}

.table-fill td.text-center {
  text-align: center;
}

.table-fill td.text-right {
  text-align: right;
}