.main-container{
 background-color: #efefef;
 display: flex;
 height: 100% !important;
}

.login-container{
  /*border:1px solid white;*/
  width: 600px;
  height: 400px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  display: inline-flex; 
}
.backbox{  
  background-color: #081a2c;
  width: 100%;
  height: 80%;
  position: absolute;
  transform: translate(0,-50%);
  top:50%;
  display: inline-flex;
}

.frontbox{
  background-color: white;
  border-radius: 20px;
  height: 100%;
  width: 50%;
  z-index: 10;
  position: absolute;
  right:0;
  margin-right: 3%;
  margin-left: 3%;
  transition: right .8s ease-in-out;
}

.moving{
  right:45%;
}

.loginMsg, .signupMsg{
  width: 50%;
  height: 100%;
  font-size: 15px;
  box-sizing: border-box;
}

.loginMsg .title,
.signupMsg .title{
  font-weight: 300;
  font-size: 23px;
}

.loginMsg p,
.signupMsg p {
  font-weight: 100;
}

.textcontent{
  color:white;
  margin-top:65px;
  margin-left: 12%;
}

.loginMsg button,
.signupMsg button {
  background-color: #404040;
  border: 2px solid white;
  border-radius: 10px;
  color:white;
  font-size: 12px;
  box-sizing: content-box;
  font-weight: 300;
  padding:10px;
  margin-top: 20px;
}

/* front box content*/
.login, .signup{
  padding: 20px;
  text-align: center;
}

.login h2,
.signup h2 {
  color: #35B729;
  font-size:22px;
}

.inputbox{
  margin-top:30px; 
}
.login input, 
.signup input {
  display: block;
  width: 100%;
  height: 40px;
  background-color: #f2f2f2;
  border: none;
  margin-bottom:20px;
  font-size: 12px;
}

.login button,
.signup button{
  background-color: #35B729;
  border: none;
  color:white;
  font-size: 12px;
  font-weight: 300;
  box-sizing: content-box;
  padding:10px;
  border-radius: 10px;
  width: 60px;
  position: absolute;
  right:30px;
  bottom: 30px;
  cursor: pointer;
}

/* Fade In & Out*/
.login p {
  cursor: pointer;
  color:#404040;
  font-size:15px;
}

.loginMsg, .signupMsg{
  /*opacity: 1;*/
  transition: opacity .8s ease-in-out;
}

.visibility{
  opacity: 0;
}

.hide{
  display: none;
}


h1 {
  font-family: Avenir;
  font-style: normal;
  font-weight: 800;
  font-size: 36px;
  line-height: 152.56%;
  /* identical to box height, or 55px */
  text-transform: uppercase;
  color: #000000;
}

.main-controlller {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
}

.bg-blue {
  background-color: #081a2c;
}

.left-panel {
  width: 350px;
  height: 100vh;
  position: fixed;
  left: 0;
}
.left-panel .user-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  height: 300px;
}
.left-panel .user-section .user-image img {
  height: 80px;
}
.left-panel .user-section .user-name {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  line-height: 29px;
  /* identical to box height */
  text-align: center;
  color: #ffffff;
}

.site-nav nav ul,
.user-logout nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.site-nav nav ul li a,
.user-logout nav ul li a {
  font-family: Avenir;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 70px;
  /* identical to box height, or 31px */
  padding-left: 40px;
  text-transform: uppercase;
  color: #ffffff;
}

.user-logout {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

.right-panel {
  padding-top: 60px;
  width: 100%;
  padding-left: 350px;
}
.right-panel h1 {
  display: block;
  text-align: center;
}
.right-panel .form-ui {
  padding: 0 30px 30px;
}
.right-panel .form-ui h3 {
  /* h3 */
  font-family: Avenir;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 152.56%;
  /* identical to box height, or 37px */
  text-transform: uppercase;
  margin-top: 40px;
  margin-bottom: 20px;
  /* black */
  color: #081a2c;
}
.right-panel .form-ui input[type=text],
.right-panel .form-ui input[type=email],
.right-panel .form-ui input[type=number],
.right-panel .form-ui select {
  width: 100%;
  border: none;
  border-bottom: 1px solid #c1c1c1;
  border-radius: 0px;
  padding: 20px 0 30px 0;
  margin-bottom: 15px;
  font-family: Avenir;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  /* identical to box height, or 66px */
  color: #081a2c;
  transition: border-color 300ms ease;
}
.right-panel .form-ui input[type=text]:hover, .right-panel .form-ui input[type=text]:focus,
.right-panel .form-ui input[type=email]:hover,
.right-panel .form-ui input[type=email]:focus,
.right-panel .form-ui input[type=number]:hover,
.right-panel .form-ui input[type=number]:focus,
.right-panel .form-ui select:hover,
.right-panel .form-ui select:focus {
  box-shadow: none;
  border-color: #081a2c;
}
.right-panel .form-ui input[type=text]::-moz-placeholder, .right-panel .form-ui input[type=email]::-moz-placeholder, .right-panel .form-ui input[type=number]::-moz-placeholder, .right-panel .form-ui select::-moz-placeholder {
  color: #787878;
  text-transform: uppercase;
}
.right-panel .form-ui input[type=text]:-ms-input-placeholder, .right-panel .form-ui input[type=email]:-ms-input-placeholder, .right-panel .form-ui input[type=number]:-ms-input-placeholder, .right-panel .form-ui select:-ms-input-placeholder {
  color: #787878;
  text-transform: uppercase;
}
.right-panel .form-ui input[type=text]::placeholder,
.right-panel .form-ui input[type=email]::placeholder,
.right-panel .form-ui input[type=number]::placeholder,
.right-panel .form-ui select::placeholder {
  color: #787878;
  text-transform: uppercase;
}
.right-panel .form-ui select {
  color: #787878;
  text-transform: uppercase;
}
.right-panel .form-ui .btn-primary {
  background: #5ed781;
  width: 250px;
  height: 55px;
  border-radius: 85px;
  font-family: Avenir;
  font-style: normal;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  text-transform: uppercase;
  margin-top: 20px;
  border: none;
  color: #ffffff;
  transition: all 350ms ease;
}
.btn-modify {
  background: #5ed781;
  width: 50px;
  height: 25px;
  border-radius: 85px;
  font-family: Avenir;
  font-style: normal;
  text-align: center;
  text-transform: uppercase;
  border: none;
  color: #ffffff;
  transition: all 350ms ease;
} 
.right-panel .form-ui .btn-primary:hover {
  background-color: #081a2c;
}


.checkbox label,
.form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #333;
}
.checkbox input,
.form-radio input {
  width: auto;
  opacity: 0.00000001;
  position: absolute;
  left: 0;
}
.checkbox {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  -webkit-transition: border-color 0.28s ease;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: #B73394;
  display: block;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  -webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  box-shadow: 0 0 0 0.0625rem #fff;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: #B73394;
}
.checkbox input:checked ~ .helper {
  color: #B73394;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  -webkit-transition: height 0.28s ease;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: 1rem;
}

li { list-style-type: none; }
.form-wrapper {
  margin: 50px auto 50px;
  font-family: 'Lora', serif;
  font-size: 1.09em;
}
.form-wrapper.login { margin-top: 120px; }
.form-wrapper p { font-size: .8em; text-align: center; }
.form-control:focus { box-shadow: none; }
.form-wrapper {
  border: 1px solid #80CED7;
  border-radius: 5px;
  padding: 25px 15px 0px 15px;
}
.form-wrapper.auth .form-title { color: #007EA7; }
.home-wrapper button,
.form-wrapper.auth button {
  background: #007EA7;
  color: white;
}
.home-wrapper {
  margin-top: 150px;
  border-radius: 5px;
  padding: 10px;
  border: 1px solid #80CED7;
}

.left_panel_button {
 border-radius: 10px;
}
.left_panel_button {
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	margin: 5px 0px 5px 30px;
}
.left_panel_button:hover {
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}
.left_panel_button:active {
	position:relative;
	top:1px;
}
.left_user_panel {
	display: flex;
	align-items: center;
	align-self: center;
}
.user-name {
}
.user-edit {
	margin-left: 5px;
}
/* Drag Bar*/
.bar-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  margin: 10px auto;
}
.bar-container p {
  margin-right: 10px;
}
.bar-container .token_seekbar {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 90%;
  border-radius: 10px;
  background: #fff;
}
.bar-container .token_seekbar .token_fill {
  height: 10px;
  background: #0af;
  border-radius: 10px;
}
.bar-container .token_seekbar .token_handle {
  width: 10px;
  height: 10px;
  background: #0af;
  border-radius: 10px;
  transform: scale(2);
  transition: all 0.1s ease-in-out;
}
.bar-container .token_seekbar .token_handle:hover {
  background: #33bbff;
  cursor: pointer;
  transform: scale(2.5);
}

.bar-container .tem_seekbar {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 90%;
  border-radius: 10px;
  background: #fff;
}
.bar-container .tem_seekbar .tem_fill {
  height: 10px;
  background: #0af;
  border-radius: 10px;
}
.bar-container .tem_seekbar .tem_handle {
  width: 10px;
  height: 10px;
  background: #0af;
  border-radius: 10px;
  transform: scale(2);
  transition: all 0.1s ease-in-out;
}
.bar-container .tem_seekbar .tem_handle:hover {
  background: #33bbff;
  cursor: pointer;
  transform: scale(2.5);
}

/* AJAX Loading */
#overlay {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.6);
}
.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}
.is-hide {
  display: none;
}