@charset "UTF-8";
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
/* Login page */
.pagewrap{
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #E9E9E9;
}
.left-side{
    float: left;
    width: 50%;
    height: 100%;
    background-color: #161c27;
    background-image: url(../images/login_bg.jpg);
	background-size:cover;
	background-position: bottom;
	background-repeat: no-repeat;

}
.right-side{
    float: left;
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    background-image: url(../images/mesh.jpg);
	background-size:cover;
	background-position: bottom;
	background-repeat: no-repeat;
}
.logo{
	float: left;
	width: 50%;
	height: auto;
	margin-top: 40px;
	margin-left: 60px;
}
.logo img{
	width: 50%;
	height: auto;
}
.left_bottom{
	width: 30%;
	position: absolute;
	bottom: 0;
	margin-bottom: 40px;
	margin-left: 60px;
}
.bottom_header{
	color: #ffffff;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.bottom_body{
	color: #ffffff;
	font-size: 16px;
	font-weight: 300;
	opacity: 0.6;
	line-height: 1.5;
	margin-bottom: 60px;
}
.bottom_link{
	float: left;
	color: #ffffff;
	font-size: 14px;
	font-weight: 300;
	opacity: 0.6;
	line-height: 1.5;
	margin-top: 50px;
	margin-right: 30px;
}
.login_wrap{
	position: relative;
	width: 50%;
	height: 200px;
	margin: 0 auto;
	top: 30%;
}
.login-header{
	text-transform: uppercase;
	color: #0390e9;
	font-weight: 700;
	margin-bottom: 20px;
}
.form_input_box{
	width: 400px;
	height: 40px;
	border: #70747a 2px solid;
	background-color: transparent;
	font-size: 14px;
	font-weight: 300;
	padding-left: 20px;
	border-radius: 3px;
	margin-bottom: 20px;
}
.checkbox-wrap{
	width: 400px;
	height: 40px;
}
.checkbox{
	float: left;
}
.checkbox_tag{
	font-size: 14px;
	color: #000000;
}
.nextline{
	width: 100%;
	height: auto;
	float: left;
}
.login_btn{
	width: 423px;
	height: 40px;
	border: #0390e9 1px solid;
	background-color: #0390e9;
	color: #ffffff;
	font-size: 14px;
	padding-left: 20px;
	border-radius: 3px;
	margin-top: 20px;
	text-transform: uppercase;
	font-weight: 600;
}
/* Dahboard page */
.dashboardpagewrap{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #F3F3F3;
    background-image: url(../images/mesh.jpg);
	
}
.left-frame{
	position: absolute;
    float: left;
    width: 15%;
    height: 100%;
    background-color: #161c27;
    background-image: url(../images/login_bg.jpg);
	background-size:cover;
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 20px 20px 0px 20px;
	z-index: 1;
}
.navigations-main{
	width: auto;
	height: 40px;
	border: #e9ecef thin solid;
	margin-bottom: 10px;
	font-size: 16px;
	color: #ffffff;
	padding-left: 20px;
	line-height: 40px;
	opacity: 0.7;
	font-weight: 300;
	display: block;
	cursor: pointer;
	text-decoration: none;
}
.navigations-main:hover{
	opacity: 1;
	font-weight: 400;
}
.navigations-main img{
	float: left;
	padding-right: 5%;
	padding-top: 6%;
	width: 9%;
	height:9%;
}
.logo-main{
	position: absolute;
	bottom: 40px;
}
.logo-main img{
	width: 60%;
	height: 60%;
}
.right-frame{
	position: absolute;
    float: left;
    width: 100%;
    height: auto;
}
.profile-image{
	margin-top: 40px;
	width: auto;
	height: auto;
	border-radius: 50%;
	float: right;
	cursor: pointer;
	margin-right: 45px;
}
.profile-image img{
	width: 35%;
	height: 35%;
	border-radius: 50%;
	float: right;
}
.floating-nav{
	float: right;
	width: 30px;
	height: auto;
	background-color: #3f3f95;
	border-radius: 5px;
	margin-top:120px;
	margin-right: -10.5%;
	padding: 5px 5px 0px 5px;
}
.floating-nav-nest{
	background-color: #ffffff;
	width:30px;
	height: 30px;
	border-radius: 3px;
	text-align: center;
	cursor: pointer;
	margin-bottom: 5px;
}
.floating-nav-nest img{
	width: 80%;
	height: 80%;
	margin-top: 2px;
}
.chat-bubble{
	position:fixed;
	float: right;
	bottom: 40px;
	right: 60px;
	background-color: #3f3f95;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;

}
.chat-bubble img{
	width: 50%;
	height: 50%;
	margin-top: 15px;
}

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 1;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #3f3f95;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

/* UNRELATED to tooltips */

main {
  flex: 1 1 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
aside {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #49b293;
  color: #fff;
  padding: 1em;
}
main div {
  text-align: center;
  color: #353539;
}
main span {
  padding: .5em 1em;
  margin: .5em;
  display: inline-block;
  background: #dedede;
}

aside a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  padding: .4em 1em;
}

/* Settings page */
.page-tag{
	float: left;
	width: auto;
	height: auto;
	color: #000000;
	margin-left: 21%;
	margin-top: 30px;
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
}
.page-tag img{
	width: 10%;
	height: 10%;
	float: left;
	margin-right: 10px;
	margin-top: 1px;
}
.accordion-wrapper{
	width: 1090px;
	height: 830px;
	margin-top: 20px;
	margin-left: 21%;
	margin-top: 90px;
	overflow: scroll;
	
}

/* Android 2.3 :checked fix */
@keyframes fake {
    from {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}
body {        
    animation: fake 1s infinite;
}

.worko-tabs {
    margin: 0px;
  	width: 100%;
  
    .state{
      position: absolute;
      left: -10000px;
    }
  
    .flex-tabs{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
        
        .tab{
          flex-grow: 1;
          max-height: 40px;
        }
      
        .panel {
          background-color: #fff;
          padding: 20px;
          min-height: 560px;
          display: none;
          width: 100%;
          flex-basis: auto;
		  border: #000000 thin solid;
		  border-top: none;
      }
    }

    .tab {
      display: inline-block;
      padding: 10px;
      vertical-align: top;
      background-color: #3f3f95;
      cursor: hand;
      cursor: pointer;
		border-bottom: #3f3f95 thin solid;
		border-radius: 5px 5px 0px 0px;
		text-align: center;
		font-size: 14px;
		color: #ffffff;
		
        &:hover{
          background-color: #fff;
        }
    }  
}

#tab-one:checked ~ .tabs #tab-one-label,
#tab-two:checked ~ .tabs #tab-two-label,
#tab-three:checked ~ .tabs #tab-three-label,
#tab-four:checked ~ .tabs #tab-four-label,
#tab-five:checked ~ .tabs #tab-five-label{
    background-color: #fff;
    cursor: default;
	border: #3f3f95 thin solid;
	border-bottom: none;
	color: #3f3f95;
	text-align: center;
	font-size: 14px;
	
}

#tab-one:checked ~ .tabs #tab-one-panel,
#tab-two:checked ~ .tabs #tab-two-panel,
#tab-three:checked ~ .tabs #tab-three-panel,
#tab-four:checked ~ .tabs #tab-four-panel,
#tab-five:checked ~ .tabs #tab-five-panel{
    display: block;
}

@media (max-width: 600px){
  .flex-tabs{
    flex-direction: column;
    
    .tab{
      background: #fff;
      border-bottom: 1px solid #ccc;
      
        &:last-of-type{
          border-bottom: none;
        }
    }
    
    #tab-one-label{order:1;}
    #tab-two-label{order: 3;}
    #tab-three-label{order: 5;};
    #tab-four-label{order: 7;};
    #tab-one-panel{order: 2;}
    #tab-two-panel{order: 4;}
    #tab-three-panel{order: 6;}
    #tab-four-panel{ order: 8;}
  }
  
    #tab-one:checked ~ .tabs #tab-one-label,
    #tab-two:checked ~ .tabs #tab-two-label,
    #tab-three:checked ~ .tabs #tab-three-label,
    #tab-four:checked ~ .tabs #tab-four-label{
      border-bottom: none;
    }
  
  #tab-one:checked ~ .tabs #tab-one-panel,
  #tab-two:checked ~ .tabs #tab-two-panel,
  #tab-three:checked ~ .tabs #tab-three-panel,
  #tab-four:checked ~ .tabs #tab-four-panel{
    border-bottom: 1px solid #ccc;
  }
}

/* Form Styling for settings page */
.form-input-title{
	font-size: 14px;
	color: #000000;
	font-weight: 500;
}
.form-input-title2{
	float: left;
	width: 100%;
	height: auto;
	font-size: 14px;
	color: #000000;
	font-weight: 500;
}
.left-form{
	padding: 40px;
	width: 400px;
	float: left;
}
.left-form2{
	padding: 0px;
	width: 100%;
	float: left;
}
.formwrapper{
	float: left;
	width: 90%;
	height: auto;
}
.formwrapper-right{
	float: right;
	width:10%;
	height: auto;
}
.partition_left{
	float: left;
	width: 100%;
	margin-left: 0px;
}
.partition_right{
	float: left;
	width: 320px;
}
.partition_right2{
	float: left;
	width: 300px;
}
.refreshbtn{
	float: left;
}
.refreshbtn2{
	margin-right: 103px;
	margin-top: 0px;
}
.list-input-box{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width: 300px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
	background-image: url(../images/dw-arw.png);
	background-repeat: no-repeat;
    background-position-x: 244px;
	background-position: calc(100% - 0.75rem) center !important;
    background-position-y: 5px;
	-webkit-appearance: none !important;
    -moz-appearance: none !important;
	background-size: 2%;
}
.list-input-box-small{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width: 150px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
	background-image: url(../images/dw-arw.png);
	background-repeat: no-repeat;
    background-position-x: 244px;
	background-position: calc(100% - 0.75rem) center !important;
    background-position-y: 5px;
	-webkit-appearance: none !important;
    -moz-appearance: none !important;
	background-size: 2%;
}
.list-input-box-small-pop{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width: 100px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
	background-image: url(../images/dw-arw.png);
	background-repeat: no-repeat;
    background-position-x: 244px;
	background-position: calc(100% - 0.75rem) center !important;
    background-position-y: 5px;
	-webkit-appearance: none !important;
    -moz-appearance: none !important;
	background-size: 2%;
}
.list-input-box2{
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width: 300px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
	background-image: url(../images/dw-arw.png);
	background-repeat: no-repeat;
    background-position-x: 244px;
	background-position: calc(100% - 0.75rem) center !important;
    background-position-y: 5px;
	-webkit-appearance: none !important;
    -moz-appearance: none !important;
	background-size: 2%;
}
.list-input-box3{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width: 300px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
	background-image: url(../images/dw-arw.png);
	background-repeat: no-repeat;
    background-position-x: 244px;
	background-position: calc(100% - 0.75rem) center !important;
    background-position-y: 5px;
	-webkit-appearance: none !important;
    -moz-appearance: none !important;
	background-size: 2%;
}
.list-input-box-right{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width: 100px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 0px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
	background-image: url(../images/dw-arw.png);
	background-repeat: no-repeat;
    background-position-x: 244px;
	background-position: calc(100% - 0.75rem) center !important;
    background-position-y: 5px;
	-webkit-appearance: none !important;
    -moz-appearance: none !important;
	background-size: 2%;
}
.list-input-box-right2{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width: 200px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 0px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
	background-image: url(../images/dw-arw.png);
	background-repeat: no-repeat;
    background-position-x: 244px;
	background-position: calc(100% - 0.75rem) center !important;
    background-position-y: 5px;
	-webkit-appearance: none !important;
    -moz-appearance: none !important;
	background-size: 2%;
}
.text-input-box{
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width: 388px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
}
.text-input-box-float{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width:88px;
    height: 27px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
}

.text-input-box-float3{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width:283px;
    height: 27px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
}
.text-input-box-float-right{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width:60px;
    height: 27px;
    margin-top: 10px;
    margin-bottom: 0px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
}

.text-input-box-float-right2{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width:150px;
    height: 27px;
    margin-top: 10px;
    margin-bottom: 0px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-left: 12px;
    cursor: pointer;
}

.inputidentifier{
	float: left;
	width: 100%;
	height: 25px;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	border-bottom: #000000 thin dashed;
}
.inputidentifier3{
	float: left;
	width: 100%;
	height: 30px;
	line-height: 30px;
	background-color:#FAB8B9;
	color: #000000;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 600;
	text-align: center;
}
.tagchecked{
	font-size: 14px;
	margin-bottom: 5px;
}
.tagchecked2{
	float: left;
	font-size: 14px;
	margin-bottom: 5px;
	margin-right: 20px;
}
.tagchecked4{
	float: left;
	font-size: 14px;
	margin-top: 15px;
	margin-right: 20px;
}
.tagchecked3{
	float: left;
	font-size: 14px;
	margin-bottom: 5px;
	margin-top: 15px;
	margin-right: 20px;
}
.checkbox-arranger{
	float: left;
	width: 100%;
	height: auto;
}
.checkbox-arranger-header{
	float: left;
	width: 100%;
	height: auto;
	color: #7E7C7C;
	font-size: 14px;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-bottom: #cccccc thin solid;
}
.text-input-box-float2{
	float: left;
    border: 1px solid #cfd9db;
    background-color: transparent;
    border-radius: 0.25em;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
    width:150px;
    height: 27px;
    margin-top: 10px;
    margin-bottom: 10px;
	margin-right: 10px;
    color: #000000;
    display: block;
    padding-right: 12px;
    cursor: pointer;
	text-align: right;
}
.list-input-box:focus{
	outline: none;
    border-color: #2c3e50;
    box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
}
.text-input-box:focus{
	outline: none;
    border-color: #2c3e50;
    box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
}

.sub_btn{
	width: auto;
	height: 30px;
	border: #0390e9 1px solid;
	background-color: #0390e9;
	color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 3px;
	margin-top: 30px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
}
.sub_btn2{
	width: auto;
	height: 30px;
	line-height: 30px;
	border: #000000 1px solid;
	background-color: #000000;
	color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 3px;
	margin-top: 0px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
	position: relative;
	left: -0px;
	float: left;
}
.sub_btn2 a{
	color: #ffffff;
}
.sub_btn3{
	width: auto;
	height: 30px;
	border: #000000 1px solid;
	background-color: #000000;
	color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 3px;
	margin-top: 10px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
	position: relative;
	left: -0px;
	float: left;
}
.btn-open-popup { 
	width: auto;
	height: 30px;
	border: #000000 1px solid;
	background-color: #000000;
	color: #ffffff;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 3px;
	margin-top: 0px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
	position: relative;
	left: -0px;
	float: left;
    cursor: pointer; 
    transition: background-color 0.3s ease; 
        } 
  
        .btn-open-popup:hover { 
            background-color: #4caf50; 
        } 
  
        .overlay-container { 
			z-index: 1000;
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0, 0, 0, 0.6); 
            justify-content: center; 
            align-items: center; 
            opacity: 0; 
            transition: opacity 0.3s ease; 
        } 
  
        .popup-box { 
            background: #fff; 
            padding: 24px; 
            border-radius: 12px; 
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
            width: 1100px; 
			margin-left: 220px;
            opacity: 0; 
            transform: scale(0.8); 
            animation: fadeInUp 0.5s ease-out forwards; 
			overflow: scroll;
        } 
  
        .form-container { 
			width: 100%;
        } 
  
        .form-label { 
            margin-bottom: 10px; 
            font-size: 16px; 
            color: #444; 
            text-align: left; 
        } 
  
        .form-input { 
			display: none;
            padding: 10px; 
            margin-bottom: 20px; 
            border: 1px solid #ccc; 
            border-radius: 8px; 
            font-size: 16px; 
            width: 100%; 
            box-sizing: border-box; 
        } 
  
        .btn-submit, 
        .btn-close-popup { 
            padding: 12px 24px; 
            border: none; 
            border-radius: 8px; 
            cursor: pointer; 
 
        } 
  
        .btn-submit { 
            background-color: green; 
            color: #fff; 
        } 
  
        .btn-close-popup { 
            margin-top: 12px; 
            color: #FF0004;
			margin-left: 999px;
			margin-top: -5px;
			position: absolute;
			width: 10%;
			height: auto;
        } 
  
        .btn-submit:hover, 
        .btn-close-popup:hover { 
        } 
  
        /* Keyframes for fadeInUp animation */ 
        @keyframes fadeInUp { 
            from { 
                opacity: 0; 
                transform: translateY(20px); 
            } 
  
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
        } 
  
        /* Animation for popup */ 
        .overlay-container.show { 
            display: flex; 
            opacity: 1; 
        } 
.button-wrap{
	width: 80%;
	height: auto;
}
.check-wrap{
	float:left;
	padding-right: 20px;
	margin-top: 25px;
}
.right-form{
	padding: 40px;
	width: 400px;
	float: left;
}
.checkbox_settings{
	font-size: 14px;
	color:#000000;
	margin-top: 10px;
}
.box-wrap{
	width: 400px;
	height: auto;
}

/* * CSS for tables;*/
.tablewrapper{
	overflow: scroll;
}
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  table-layout: fixed;

}

table caption {
  font-size: 1.5em;
  margin: .0em 0 .0em;
  padding: 5px 0px 5px 0px;
  color: #ffffff;
  background-color: #07026F;
}
.tableheader{
	color: #AD0508;
	font-weight: 500;
}
.tableheader2{
	color: #000000;
	font-weight: 700;
	text-transform: uppercase;
}
.tableheader3{
  width: 90%;
  margin: .5em 0 .0em;
  margin: 0 auto;
  color: #ffffff;
  background-color: #07026F;
}
.tableheader4{
  width: 90%;
  margin: .5em 0 .0em;
  margin: 0 auto;

}
.tableid{
  font-size: 1.5em;
  padding: 5px 0px 5px 20px;
}
.tableid2{
  font-size: 1.5em;
  padding: 5px 0px 5px 20px;
  text-transform: uppercase;
  font-weight: 700;
  color: #AD0508;
	line-height: 90px;
}
.tablebtn1{
	float: right;
	position: relative;
	margin-top: -30px;
	margin-right: 30px;
	padding: 5px 20px 5px 20px;
	background-color:#1B04CE;
	cursor: pointer;
}
.tablebtn2{
	float: right;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#1B04CE;
	color: #ffffff;
	cursor: pointer;
}
.tablebtnsettings{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#02A72A;
	color: #000000;
	cursor: pointer;
}
.tablebtnsettings2{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#F2C200;
	color: #000000;
	cursor: pointer;
}
.tablebtnsettings3{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#C888CC;
	color: #000000;
	cursor: pointer;
}
.tablebtnsettings4{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#005F92;
	color: #ffffff;
	cursor: pointer;
}
.tablebtnsettings5{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#B3B3B3;
	color: #000000;
	cursor: pointer;
}
.tablebtnsettings6{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#002259;
	color: #ffffff;
	cursor: pointer;
}
table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: left;
  line-height: 1.5;
  font-weight: 300;
  border: 1px solid #ddd;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
 text-align: center;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #0390e9;
  color: white;
}
/*cost estimate style*/
.tablewrapper{
	overflow: scroll;
}
table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  table-layout: fixed;

}

table caption {
  font-size: 1.5em;
  margin: .0em 0 .0em;
  padding: 5px 0px 5px 0px;
  color: #ffffff;
  background-color: #07026F;
}
.tableheader{
	color: #AD0508;
	font-weight: 500;
}
.tableheader2{
	color: #000000;
	font-weight: 700;
	text-transform: uppercase;
}
.tableheader3{
  width: 90%;
  margin: .5em 0 .0em;
  margin: 0 auto;
  color: #ffffff;
  background-color: #07026F;
}
.tableheader4{
  width: 90%;
  margin: .5em 0 .0em;
  margin: 0 auto;

}
.tableid{
  font-size: 1.5em;
  padding: 5px 0px 5px 20px;
}
.tableid2{
  font-size: 1.5em;
  padding: 5px 0px 5px 20px;
  text-transform: uppercase;
  font-weight: 700;
  color: #AD0508;
	line-height: 90px;
}
.tablebtn1{
	float: right;
	position: relative;
	margin-top: -30px;
	margin-right: 30px;
	padding: 5px 20px 5px 20px;
	background-color:#1B04CE;
	cursor: pointer;
}
.tablebtn2{
	float: right;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#1B04CE;
	color: #ffffff;
	cursor: pointer;
}
.tablebtnsettings{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#02A72A;
	color: #000000;
	cursor: pointer;
}
.tablebtnsettings2{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#F2C200;
	color: #000000;
	cursor: pointer;
}
.tablebtnsettings3{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#C888CC;
	color: #000000;
	cursor: pointer;
}
.tablebtnsettings4{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#005F92;
	color: #ffffff;
	cursor: pointer;
}
.tablebtnsettings5{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#B3B3B3;
	color: #000000;
	cursor: pointer;
}
.tablebtnsettings6{
	float: left;
	margin-right: 2px;
	padding: 5px 20px 5px 20px;
	background-color:#002259;
	color: #ffffff;
	cursor: pointer;
}
table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: left;
  line-height: 1.5;
  font-weight: 300;
  border: 1px solid #ddd;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}
.tableid2{
  font-size: 1.5em;
  padding: 5px 0px 5px 20px;
  text-transform: uppercase;
  font-weight: 700;
  color: #AD0508;
	line-height: 90px;
}