﻿/*!
 * site.css
 * Copyright (c) 2019 Creative Designs
 */
@charset "UTF-8";
[v-cloak] {
		display: none;
}
:root {
		--err-color: RGBA(251, 148, 148, 1);
		/* themes */
		--theme-default: 4, 135, 242;
}
html, body {
		margin: 0px;
		padding: 0px;
		font-family: "system-ui", sans-serif;
		font-size: 13px;
		height: 100%;
		height: 100vh;
		background: linear-gradient(115deg,rgba(232, 236, 241,.5) 0%,#ffffff 100%);
}
body{
		overflow-x:hidden;
}
a:link {
		color: #337ab7;
		text-decoration: none !important;
}
a:visited {
		color: #337ab7;
}
a:hover {
		color: #337ab7;
}
a:active {
		color: #337ab7;
		outline:none;
}
a:focus{
		outline:none;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		color: #ccc;
}
@keyframes btnspinner {
  to {transform: rotate(360deg);}
}
.btn-spinner {
  position: relative;
}
.btn-spinner > span{
		margin-left:6px;
}
.btn-spinner:after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 27%;
  left: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-top-color: transparent;
  animation: btnspinner .6s linear infinite;
}
.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity:.6;
}
.disabled > span {
		opacity:.4 !important;
}
.q-field {
		padding:5px !important;
}
.error-page{
		padding:20px !important;
}
/* page layout */
.app-layout {
		height: 100vh;
		display: flex;
		flex-direction: column;
}
.app-header {
		height:55px;
		max-height:55px;
		min-height:55px;
		background: radial-gradient(circle, rgba(var(--theme-default),1) 71%, #000 96%);
		color:#fff;
		position:relative;
		width:100%;
}
.app-body{
		height:90vh;
}
.app-footer {
		margin-top:60px;
		padding:10px;
		color:#555;
}
.hdr-angle {
		position: absolute;
		left: 20%;
		top: 0px;
		background-color: rgba(0,0,0,.02);
		width: 50%;
		height: 55px;
		-moz-transform: skew(69deg, 0deg);
		-webkit-transform: skew(69deg, 0deg);
		-o-transform: skew(69deg, 0deg);
		-ms-transform: skew(69deg, 0deg);
		transform: skew(69deg, 0deg);
		border-right: solid 1px #ccc;
}
.hdr-cname{
		font-size:25px;
		padding-left:10px;
		padding-top:8px;
}
.hdr-uname{
		position:absolute;
		right:10px;
		top:60px;
		color:#555;
		font-size:13px;
}
.hdr-items{
		position:absolute;
		right:10px;
		top:10px;
}
.hdr-item {
		float: right;
		cursor: pointer;
		transition: .2s ease-in-out;
		margin-right: 2px;
}
.theme-item {
		color:rgba(255,255,255,.4);
}
.theme-item:hover{
		color:#fff;
}
.not-registered{
		padding:20px;
		padding-left:10px;
		color:#555;
		font-size:16px;
}
.r-thankyou{
		font-size:19px;
}
.r-details{
		margin-top:25px;
		padding:25px;
		background:#fff;
		border:solid 1px #eee;
		border-radius:5px;
}
.r-details-table{
		display:table;
		border-spacing: 7px;
}
.pdata{
		padding-top:20px;
		max-width:450px;
		padding-left:5px;
		white-space:nowrap;
}
.pinput{
		border: none;
		border-bottom: solid 1px #ccc;
		color: #555;
		display: block;
		font-size: 14px;
		width: 100%;
		outline: none;
		padding-top: 6px;
		padding-bottom: 6px;
		padding-left:6px;
		background:#f9f9f9;
}
.pinput:focus{
		border-bottom: solid 1px rgba(81,203,238,.5);
		background:rgba(81,203,238,0.07);
}
#divMain{
		color:#555;
}
.ptitle{
		font-size:20px;
}
.pproducts{
		padding-top:20px;
		padding-bottom:6px;
		display:inline-block;
		text-transform:uppercase;
}
.pitem{
		background:#fff;
		border:solid 1px #ddd;
		border-radius:5px;
		margin-top:20px;
		padding:20px;
}
.pitem-name{
		font-weight:bold;
		font-size:17px;
}
.pitem-desc{
		padding-top:10px;
}
.pitem-links{
		padding:25px;
		background:#f8f8f8;
		border:solid 1px #ddd;
		border-radius:5px;
		margin-top:15px;
}
.lul li{
		line-height:30px;
}
.ul-num{
		list-style:number;
}
.pdiv{
		color:#ccc;
		margin-left:10px;
		margin-right:10px;
}
.pitem-ltitle{
		padding-top:10px;
		font-weight:bold;
}
.pcontent{
		font-size:16px;
}