@charset "UTF-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --bg: #fafafa;
  --bg2: #fff;
  --blur-bg: rgba(255,255,255,0.5);
  --blur-bg2: rgba(255,255,255,0.6);
  --blur-bg3: rgba(255, 255, 255, 0.7);
  --text: #31344b;
  --text2: #44476a;
  --text3: #fafafa;
  --text4: #888;
  --text5: #bbb;
  --border-color: #ddd;
  --text-icon: #111;
  --blue: #0da6d2;
  --blue2: #0da6d2;
  --blue3: #0da6d2;
  --orange: #ff6600;
  --green: #94d60a;
  --green2:#299e60;
  --green3: #62bd19;
  --soft-green: #f3fef3;
  --soft-red: #fdf5f5;
  --gray:  #fcfefc;
  --red: #f44336;
  --red2: #f87979;
  --shadow: rgba(40,40,40,0.1);
  --shadow-blue: #ccecf5;
  --shadow-orange: #fbdec1;
  --wave-svg: url('data:image/svg+xml;utf8,<svg width="1440" height="70" viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg"><path fill="%23fafafa" d="M0,40 C360,80 720,0 1080,40 1260,60 1440,20 1440,20 L1440,80 L0,80 Z"/></svg>') no-repeat bottom;
  --td: inline;
  --td2: none;
}
[data-theme="dark"] {
  --bg: #333348;
  --bg2: #272744;
  --text: #fafafa;
  --text2: #bdbdbd;
  --text3: #ddd;
  --text4: #999;
  --text5: #999;
  --border-color: #888;
  --text-icon: #eaeaea;
  --blue2: #212740;
  --blue3: #444e76;
  --soft-green: #333348;
  --gray:  #50506c;
  --blur-bg: rgba(51,51,72,0.3);
  --blur-bg2: rgba(0,0,0,0.4);
  --blur-bg3: rgba(0,0,0,0.3);
  --green2:#94d60a;
  --shadow: rgba(230,230,230,0.1);
  --shadow-blue: #444e76;
  --shadow-orange: #9b4317;
  --wave-svg: url('data:image/svg+xml;utf8,<svg width="1440" height="70" viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg"><path fill="%23333348" d="M0,40 C360,80 720,0 1080,40 1260,60 1440,20 1440,20 L1440,80 L0,80 Z"/></svg>') no-repeat bottom;
   --td: none;
   --td2: inline;
}
::-webkit-scrollbar {
  width: 8px;  
  height: 8px; 
}

::-webkit-scrollbar-track {
  background: var(--bg);  
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--blue3);   
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--orange); 
}
body {
  font-family: 'Poppins', sans-serif;
  padding:0;
  position:relative;
  background: var(--bg);
  color: var(--text2);
  font-optical-sizing: auto;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body.no-scroll {
  overflow: hidden;
}
header {
  position: relative;
  background: var(--blue2);
  color: white;
  padding: 60px 160px; 
  transition: all 0.4s ease;
}

header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 82px;
  background: var(--wave-svg);
  background-size: cover;
  pointer-events: none;
  z-index: 1;
}

header>figure {
  display: flex;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:0 160px;
  height:44px;
  color: var(--text);
  background: var(--blur-bg);
  box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  -moz-backdrop-filter:blur(20px);
  -ms-backdrop-filter:blur(20px);
  z-index:3;
  user-select:none;
  transition: all 0.4s ease;
}
header>figure>a {
  display:flex;
  text-decoration:none;
}
header>figure>img,
header>figure>a>img {
  width:35px;
  height:35px;
  border-radius:50%;
  margin:5px 4px 0 0;
}
body.form.account header>figure>img,
body.form.account header>figure>a>img {
  margin:4px 5px 0 0;
}
header>figure>img:hover,
header>figure>a>img:hover {
  opacity:0.7;
}
header>figure>figcaption,
header>figure>a>figcaption {
  padding-top:1px;
  color: var(--orange);
}
header>figure>figcaption>strong,
header>figure>a>figcaption>strong {
  display:block;
  color: var(--blue);
  font-weight: 400;
  margin-top:-2px;
  font-size:0.810rem;
  line-height:0.950rem;
}

header>figure>figcaption:hover,
header>figure>figcaption:hover>strong,
header>figure>a>figcaption:hover>strong {
  opacity:0.7;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 1.4px;
  color: var(--text3);
}
h1>span {
  display:block;
  font-size:1rem;
  font-weight:500;
}
h1>span>u {
  text-decoration:none;
}

a {
  color: var(--blue);
}
a:hover {
  color: var(--orange);
}
a:active {
  color: var(--green);
}
header>a {
  position:fixed;
  z-index:3;
  top:5px;
  right:210px;
  text-decoration:none;
  display: block;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  background-size: 200%;
  background-position: left;
  color: #fff;
  font-size: 1.1rem;
  line-height:1.6rem;
  font-weight: 500;
  padding: 5px 10px 2px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1),
    inset 0px 2px 2px rgba(255, 255, 255, 0.5);
  transition: all 0.4s ease;
}

header>a.cart-btn {
  right: 310px;
  padding:7px 5px 0 5px;
}

header>a>sup {
  position:absolute;
  top:-4px;
  right:-6px;
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  justify-content: center;
  align-items: center;
  background: red;
  animation: heartbeat 1.5s ease-in-out infinite; 
}

header>a:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff;
  background-position: right;
  animation: gelatine 0.4s 1;
}
header>a>i {
  font-size:1rem;
}
header>a.cart-btn>i {
  font-size:1.4rem;
}
header>button {
  position:fixed;
  top:5px;
  right:160px;
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--orange);
  text-shadow: 0 -0.700px 0 var(--shadow-orange);
  z-index:3;
  transition: 0.4s;
}
header>button.webSite {
  display: flex;
  justify-content: center;
  align-items: center;
  background:linear-gradient(60deg,#ff6600,#ff0066,orange,rgb(55, 141, 167),rgb(117, 152, 242));
  background-size: 200%;
  background-position: left;
  color: #fff;
  font-size: 1.1rem;
  line-height:1.6rem;
  text-shadow:none;
  font-weight: 500;
  border: 0;
  padding: 5px 10px 2px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1),
    inset 0px 2px 2px rgba(255, 255, 255, 0.5);
  transition: all 0.4s ease-in;
  cursor:pointer;
  z-index:3;
  right: 200px;
}

header>button>i {
  pointer-events: none;
}
header>button:hover {
  color: var(--blue);
  text-shadow: 0 -0.700px 0 var(--shadow-blue);
  transition: 0.4s;
  animation: gelatine 0.4s 1;
}
header>button.webSite:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff;
  background-position: right;
}
aside {
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  background: var(--blur-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  -moz-backdrop-filter:blur(20px);
  -ms-backdrop-filter:blur(20px);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  z-index: 1000;
}
aside.show {
  transform: translateX(0);
}
aside>h2 {
  color: #fff;
  background: var(--blue2);
  border-bottom: solid 1px rgba(255,255,255,0.4);
  height:44px;
  line-height:44px;
  padding-left:15px;
  margin:0;
  font-size:1.2rem;
  text-transform:uppercase;
  font-weight:800;
  color: #fff;
  letter-spacing:0.2px;
  font-family: "Nunito", sans-serif;
  user-select:none;
}

aside>button {
  position: absolute;
  display:inline-block;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  transition: 0.4s;
  width:30px;
  height:30px;
  color: #fafafa;
  border: solid 1px var(--shadow-blue);
  border-radius: 50%;
  vertical-align:middle;
  line-height:30px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 2px rgba(255, 255, 255, 0.8);
}

aside>button:hover {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
  transition: 0.4s ease;
  transform: rotateZ(-360deg) scale(0.95);
  animation: gelatine 0.4s 1;
}
aside>button:focus {
  outline: none;
  color: var(--orange);
  border-color:#fff;
  background:#fff;
  transition: 0.4s ease;
  transform:  rotateZ(360deg);
}

aside>div {
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  height:0px;
  overflow:hidden;
  background-color: var(--blue2);
  border-top: solid 1px rgba(0,0,0,0.1);
}
aside.show>div {
  height:120px;
  transition: 2s;
}
aside>div>p {
  margin-bottom:10px;
  padding:10px 5px 0 15px;
  font-size:15px;
  color: #fff;
  letter-spacing:0.2px;
  font-family: "Nunito", sans-serif;
  border-top: solid 1px rgba(255,255,255,0.7);
  user-select:none;
}
aside>div>p:after {
  content: "↓";
  margin-left:3px;
}
aside>div>a {
  float:left;
  color: #fff;
  text-decoration:none;
  font-weight:600;
  font-size:16px;
  font-family: 'Nunito', sans-serif;
  border: solid 1px #eaeaea;
  background:none;
  height:40px;
  padding:0 10px;
  line-height:40px;
  border-radius:6px;
  transition:0.4s;
  cursor: pointer; 
  margin-left:15px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 2px rgba(255, 255, 255, 0.7); 
}
aside>div>a:hover {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
  transition:0.4s;
  animation: gelatine 0.4s 1;
}
aside>div>a>i {
  font-weight:normal;
}
aside>div>a:last-child {
  color: #fff;
  border-color: var(--shadow-blue);
  background-image: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  animation:animatedgradient 3s ease alternate infinite;
  background-size:200%;
  background-position: left;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 2px rgba(255, 255, 255, 0.5);
  margin-left:10px;
}
aside>div>a:last-child:hover {
  background-position: right;
  animation: gelatine 0.4s 1;
}


aside>nav {
  border-top: solid 1px rgba(0, 0, 0, 0.2);
  width: 280px;
  height: calc(100vh - 44px);
  overflow-y: auto;
  padding: 10px;
  padding-bottom:130px;
  scrollbar-width: thin;
  scrollbar-color: var(--shadow-blue) transparent;
}
aside>nav::-webkit-scrollbar {
  width: 6px;  
  height: 6px; 
}
aside>nav::-webkit-scrollbar-track {
  background: transparent;  
  border-radius: 0;
}
aside>nav>ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position:relative;
}
aside>nav>ul>li>a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px;
  color: var(--text);
  border-radius: 8px;
  font-weight: 500;
  transition: background 0.4s, color 0.4s;
  background:none;
  border: solid 1px transparent;
  font-size:16px;
  font-weight:600;
  width:100%;
  cursor: pointer;
  user-select:none;
}

aside>nav>ul>li>a:hover {
  background-color: var(--orange);
  border-color: var(--shadow-orange);
  color: #fff;
  transition: background 0.4s, color 0.4s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.8);
}

aside>nav>ul>li>a[aria-current="true"],
aside>nav>ul>li>a[aria-current="page"],
section>ul>li>a[aria-current="true"],
section>nav>ul>li>a[aria-current="page"] {
  background-color: var(--blue2);
  border-color: var(--shadow-blue);
  color: #fff;
  transition: background 0.4s, color 0.4s;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), inset 0px 2px 2px rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
aside>nav>ul:hover li:not(:hover)>a { 
  color: var(--text2);
}

aside>nav>ul:hover li:not(:hover)>a[aria-current="page"],
aside>nav>ul:hover li:not(:hover)>a[aria-current="true"] {
  color: var(--blue);
  background: transparent;
  border-color: transparent;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 4px rgba(255, 255, 255);
}

body>nav {
  padding: 0 160px 20px;
  overflow:hidden;

}
body>nav>ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  border-bottom: solid 1px var(--border-color);
  padding: 0 0 10px 0;
  margin: 0 0 5px 0;
  user-select:none;
}

body>nav>ul>li::after {
  content: "›";
  margin: 0 10px;
  color: #aaa;
}

body>nav>ul>li:last-child::after {
  content: "";
  margin: 0;
}
body>nav>ul>li {
  color: var(--text4);
  white-space: nowrap;
}
body>nav>ul>li>a {
  text-decoration:none;
}
body>nav>ul>li:last-child {
  flex: 1;                
  overflow: hidden;        
  text-overflow: ellipsis;  
  white-space: nowrap;   
}

strong {
  font-weight:600;
  font-style:normal;
  color: var(--text);
}
b {
  font-weight:500;
  font-style:normal;
}
h2 {
  color: var(--blue);
  font-weight:600;
  font-size: 1.4rem;
  border-bottom: solid 2px var(--orange);
  margin-bottom:10px;
}
h3 {
  color: var(--text);
  font-weight:500;
  font-size: 1.3rem;
}
h2>i {
  color: var(--orange);
  font-weight:400;
}
main {
  padding: 0 160px 20px;
  min-height:250px;
}
.webSite {
  cursor: pointer;
}

.form section {
  padding-top:5px;
  top: -18px;
  position:relative;
  z-index:2;
 
}
.form h2 {
  transition: 0.4s;
}
.form.new section>h2 {
  width:47%;
  margin:0 auto;
  transition: 0.4s;
}
.form section>div>ul {
  width:47%; 
  padding:20px;
  margin-top:20px;
  border-radius:20px;
  float:left;
  box-shadow: 0 0 30px var(--shadow-blue);
  list-style:none;
  background: var(--bg2);
  height:inherit;
  opacity:1;
  transiton:0.4s;
}
.form.new section>div>ul:first-child {
  margin: 20px auto;
  float:inherit;
  transiton:0.4s;
}
.form.new section>div>ul:nth-child(2) {
  padding:0;
  margin:0;
  height:0;
  opacity:0;
}
.form section>div>ul:last-of-type {
  margin-left:6%; 
}
.form section>div>ul>li>form {
  position:relative;
  margin-top:15px;
  transition:0.4s;
}
.form section>div>ul>li:first-of-type>form,
#login,
#account,
#register {
  margin-top:0;
}

.form:not(.account) section>div>ul>li>form:not(.active) {
  display:none;
}
.form section>div>ul>li>form>h3 {
  display:block;
  cursor: pointer;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  width:97%;
  user-select: none;
  font-weight:400;
  font-size:1rem;
  color: var(--text2);
}

.form section>div>ul>li>form:not(.open-form)>h3:hover {
  color: var(--orange);
}
.form section>div>ul>li>form.open-form>h3 {
  color: var(--blue);
  transition:0.4s;
  margin:0;
  padding:0;
}
.form section>div>ul>li>form>h3::after {
  content:"▼";
  position:absolute;
  right:0;
  transition:0.4s;
  color: var(--blue);
}
#login h3 {
  pointer-events: none;
}
#login>h3::after {
  content:"";
}

.form section>div>ul>li>form:not(.open-form)>h3:hover::after {
  transition:0.4s;
  transform: rotateZ(90deg);
  color: var(--orange);
}
.form section>div>ul>li>form.open-form>h3::after { 
  content:"×";
  font-size:1.6rem;
  top:-6px;
  color: var(--orange);
}
.form section>div>ul>li>form.open-form>h3:hover::after { 
  transform: rotateZ(360deg);
  color: var(--blue);
}
.form section>div>ul>li>form>h3>i {
  width:20px;
}

.form section>div>ul>li>form:not(.open-form)>h3:hover>i {
  color: var(--blue);
}
.form section>div>ul>li>form.open-form>h3>i {
  color: var(--orange);
}
.form section>div>ul>li>form>div {
  position:relative;
}
.form section>div:not(.new)>ul>li>form>div {
  height:0;
  opacity:0;
  transition: 0.4s;
  text-align:center;
}
.form section>div>ul>li>form.open-form>div {
  padding:15px;
  background: var(--bg);
  border-radius:10px;
  margin-top:5px;
  height:inherit;
  opacity:1;
  transition: 0.4s;
}
.form section>div>ul>li>form>div>sub {
  display:none;
}
.form section>div>ul>li>form.open-form>div>sub {
  position:relative;
  display:block;
  height:inherit;
  opacity:1;
  margin-top:-25px;
  margin-right:5px;
  user-select:none;
  float:right;
  font-size:0.7rem;
  transition: all 0.2s ease;
  color: gray;
  font-family: "Nunito", sans-serif;
}
.form section>div>ul>li>form>div>sub.min-fail {
  color: var(--red);
}
.form section>div>ul>li>form>div>sub.min-ok {
  color: var(--green);
}
.form section>div>ul>li>form>div>sub.bold {
  color: var(--blue);
  font-weight: 500;
}

.form section>div>ul>li>form>div>b {
  font-style:normal;
  text-align:left;
  font-family: "Nunito", sans-serif;
  font-size:0.9rem;
  font-weight:400;
  float:left;
  display:block;
  width:100%;
  white-space: normal;  
  word-wrap: break-word;
}
.form section>div>ul>li>form>div>b>em {
  font-style:normal;
  color: var(--orange);
  font-weight:500;
}
.form section>div>ul>li>form>div>b>u {
  font-style:normal;
  color: blue;
  text-decoration:none;
  user-select:none;
}
.form section>div>ul>li>form>div>p {
  height:0;
  opacity:0;
  transition: 0.4s;
}
.form section>div>ul>li>form.open-form>div>p {
  height:inherit;
  opacity:1;
  transition: 0.4s;
  text-align:left;
}
.form section>div>ul>li>form>div>small {
  height:0;
  opacity:0;
  font-size:0;
  line-height:0;
  display:block;
  transition: 0.4s;
  text-align:left;
}
.form section>div>ul>li>form.open-form>div>small {
  font-family: "Nunito", sans-serif;
  font-size:0.8rem;
  line-height:1.3;
  height:inherit;
  opacity:1;
  margin-top:10px;
  transition: 0.4s;
 
}

.form section>div>ul>li>form#about.open-form>div>small,
.form section>div>ul>li>form#services.open-form>div>small {
  margin-top:3px;
}
.form section>div>ul>li>form>div>small>b {
  color: var(--red);
  font-weight:500;
  margin-right:2px;
}
.form section>div>ul>li>form>div>small>b:last-of-type {
  margin-right:2px;
  letter-spacing:0;
}
.form section>div>ul>li>form>div>small>a:last-of-type {
  float:right;
}
.form section>div>ul>li>form>div>small>i {
  font-style:normal;
}
.form section>div>ul>li>form>div>input,
.form section>div>ul>li>form>div>span>input,
.form section>div>ul>li>form>div>select,
.form section>div>ul>li>form>div>textarea {
  display:none;
  opacity:0;
}
.form section>div>ul>li>form.open-form>div>input,
.form section>div>ul>li>form.open-form>div>span>input,
.form section>div>ul>li>form.open-form>div>select,
.form section>div>ul>li>form.open-form>div>textarea,
.form section>div>ul>li>form.open-form>div>details>input,
.form section>div>ul>li>form.open-form>div>details>span>input,
.form section>div>ul>li>form.open-form>div>details>label>textarea,
.contact input,
.contact select,
.contact textarea {
  width:100%;
  display:block;
  opacity:1;
  border-radius: 0 !important;
  -webkit-appearance: none;
  appearance: none;
  padding:5px 0;
  margin-top:15px;
  font-size:1.2rem;
  font-family: "Nunito", sans-serif;
  border:none;
  border-bottom: solid 1px var(--blue);
  background: none;
  color: var(--text);
  box-sizing: border-box;
}
.form section>div>ul>li>form.open-form>div>select,
.contact select {
  color: var(--blue);
  cursor:pointer;
}
.form section>div>ul>li>form.open-form>div>input[type="file"] {
  display: none;
}
.form section>div>ul>li>form.open-form>div>details>input,
.form section>div>ul>li>form.open-form>div>details>span>input {
  margin:5px 0;
  padding:3px 0;
}
.form section>div>ul>li>form#account.open-form>div>details>input,
.form section>div>ul>li>form#account.open-form>div>details>span>input,
.form section>div>ul>li>form#account.open-form>div>details>label>textarea {
   padding:5px 0;
}
.form section>div>ul>li>form#account.open-form>div>details>input:last-of-type,
.form section>div>ul>li>form#account.open-form>div>details>span:last-of-type {
  margin-top:10px;
}
.form section>div>ul>li>form.open-form>div>details>label>textarea {
  padding: 8px 0; 
  line-height: 1.5; 
  min-height: 150px;
  resize: none;
}
.form section>div>ul>li>form>div>textarea {
  padding: 8px 0; 
  line-height: 1.5; 
  min-height: 88px;
  margin-bottom:10px;
  box-sizing: border-box;
  overflow-y: hidden;
  resize: none;
}

.form section>div>ul>li>form>div>details {
  display:none;
  position:relative;
}

.form section>div>ul>li>form>div>details>span {
  position:relative;
}

.form section>div>ul>li>form.open-form>div>details {
  display:block;
  text-align:left;
  box-sizing: border-box;
  border: solid 1px #eaeaea;
  padding:2px 10px;
  border-radius:6px;
  margin-bottom:10px;
  transition: 0.4s all ease;
  overflow:hidden;
}

.form section>div>ul>li>form#account.open-form>div>details:last-of-type {
  margin-bottom:0;
}

.form section>div>ul>li>form.open-form>div>details.warning{border-color:var(--red);animation:jello-horizontal 0.9s both}

.form section>div>ul>li>form.open-form>div>details[open] {
  padding:5px 10px;
  border-radius:8px;
  box-shadow: 0 0 15px rgba(100,100,100,0.1);
}
.form section>div>ul>li>form.open-form>div>details:first-of-type[open] {
  margin-top:0;
}
.form section>div>ul>li>form>div>details:last-of-type {
  margin-bottom:20px;
}
.form section>div>ul>li>form.open-form>div>details.new_platform[open] {
  animation:bounce-top 2s both;
  border-color: var(--blue);
  box-shadow: 0 0 15px var(--shadow-blue);
}
.form section>div>ul>li>form>div>details>summary {
  cursor:pointer;
  user-select:none;
  display:block;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  width:100%;
  height:25px;
  position:relative;
  list-style: none;
}
.form section>div>ul>li>form>div>details summary::-webkit-details-marker {
  display: none;
}
.form section>div>ul>li>form>div>details>summary::after {
  content:"▼";
  width:25px;
  height:25px;
  background: var(--bg);
  text-align:center;
  position:absolute;
  display:inline-block;
  right:-6px;
  color: var(--blue);
  transition: 0.4s all ease;
}
.form section>div>ul>li>form>div>details>summary:hover::after {
  transition:0.4s;
  transform: rotateZ(90deg);
  color: var(--orange);
}
.form section>div>ul>li>form>div>details[open]>summary::after {
  content:"\2715";
  color: var(--orange);
  transition: 0.4s all ease;
}


.form section>div>ul>li>form>div>details[open]>summary:hover::after {
  transform: rotateZ(360deg);
  color: var(--blue);
}
.form section>div>ul>li>form>div>details>summary:hover {
  color: var(--orange);
}
.form section>div>ul>li>form>div>details[open]>summary {
  color: var(--blue);
}
.form section>div>ul>li>form>div>details.warning[open]>summary{color: var(--red)}
.form section>div>ul>li>form>div>details>summary>i {
  width:17px;
}
.form section>div>ul>li>form>div>details>label,
.prlink {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 0.85em;
  margin-top:5px;
  color: var(--blue);
  font-family: "Nunito", sans-serif;
  font-weight:300;
}
.form section>div>ul>li>form#account>div>details>label {
  font-size: 0.9rem;
  font-weight:400;
  margin-bottom:10px;
  cursor: pointer;
}
.form section>div>ul>li>form#account>div>details>label>input {
  position:relative;
  top:1.5px;
}
.form section>div>ul>li>form>div>details>small {
  line-height:1.1rem;
  display:block;
}
.form section>div>ul>li>form>div>details>small>b {
  color: var(--red);
}
.form section>div>ul>li>form>div>details>small>strong {
  font-style:normal;
  font-weight:500;
}
.prlink {
  text-align:left;
  margin:0;
}
.live-link { font-style:normal; }
.open-form .prlink {
  margin:-5px 0 -10px 0;
}
.form section>div>ul>li>form>div>details>label>i,
.prlink>i {
  font-style:normal;
  margin-left:-0.5px;
}
.form section>div>ul>li>form.open-form>div>details>button {
  border:none;
  background: var(--blue);
  float:left;
  color: #fafafa;
  border-radius:5px;
  padding:2px 6px;
  height:25px;
  margin:5px 0;
  cursor:pointer;
}

.form section>div>ul>li>form.open-form>div>details>button:last-of-type {
  float:right;
  background: var(--red);
}
.form section>div>ul>li>form.open-form>div>details>button:first-of-type:hover,
.form section>div>ul>li>form.open-form>div>details>button:last-of-type:hover {
  background: var(--orange);
  color: #fff;
}
.form section>div>ul>li>form.open-form>div>details>button:first-of-type:focus,
.form section>div>ul>li>form.open-form>div>details>button:last-of-type:focus {
  background: var(--green);
  color:#fff;
}
#since_year,
#since_month,
#since_day {
  width: 30%;
  margin:0;
  float: left;
}
#since_month {
  margin: 0 5%;
}
.form section>div>ul>li>form.open-form>div>select#since_day {
  margin-bottom:10px;
}
select,
.contact select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position:relative;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE0IDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIwLDAgMTQsMCA3LDgiIGZpbGw9IiM5OTkiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.form section>div>ul>li>form>div>fieldset {
  display: none;
}
.form section>div>ul>li>form.open-form>div>fieldset {
  display: flex;
  align-items: center;
  border-radius: 6px;
  box-sizing: border-box;
  border: solid 1px #eaeaea;
  text-align:left; 
  height:33px;
  margin-bottom:10px;
  color: var(--text);
}

.form section>div>ul>li>form>div>fieldset>input {
  border-radius:4px;
  box-sizing: border-box;
  border: solid 1px #eaeaea;
  color: var(--text);
  background: var(--bg2);
  display: inline-flex; 
  height:25px;
  padding-left:4px;

}
.form section>div>ul>li>form>div>fieldset>input[type="time"]:not(:disabled) {
   border: solid 1px var(--blue); 
   cursor: pointer;
}
.form section>div>ul>li>form>div>fieldset>input:nth-child(1) {
  margin:0 6px; 
  cursor:pointer;
}
.form section>div>ul>li>form>div>fieldset>input:nth-child(3) {
  margin-left: auto;
}
.form section>div>ul>li>form>div>fieldset>input:nth-child(4) {
  margin: 0 2px 0 4px;
}
.form section>div>ul>li>form>div>fieldset>label {
  cursor:pointer;
}
.form section>div>ul>li>form>div>fieldset>label>span:last-child {
  display:none;
}
.form section>div>ul>li>form>div>fieldset>input:nth-child(1):hover + label,
.form section>div>ul>li>form>div>fieldset>label:hover {
  color: var(--orange);
}
.form section>div>ul>li>form>div>fieldset>input[type="checkbox"]:checked + label {
  color: var(--blue);
}
.form section>div>ul>li>form>div>fieldset>input:nth-child(3):focus,
.form section>div>ul>li>form>div>fieldset>input:nth-child(4):focus {
  outline: none;
  border-color: var(--green); 
}


.form section>div>ul>li>form>div>input:focus,
.form section>div>ul>li>form>div>span>input:focus,
.form section>div>ul>li>form>div>select:focus,
.form section>div>ul>li>form>div>textarea:focus,
.form section>div>ul>li>form>div>details>input:focus,
.form section>div>ul>li>form>div>details>span>input:focus,
.form section>div>ul>li>form>div>details>label>textarea:focus,
.contact input:focus,
.contact select:focus,
.contact textarea:focus {
  outline: none;
  border-color: var(--green);
}

.form section>div>ul>li>form>div>select:focus,
.contact select:focus {
  color: var(--green);
}

.form section>div>ul>li>form.open-form>div>input.is-invalid:focus,
.form section>div>ul>li>form.open-form>div>span>input.is-invalid:focus,
.form section>div>ul>li>form.open-form>div>select.is-invalid:focus,
.form section>div>ul>li>form.open-form>div>textarea.is-invalid:focus,
.form section>div>ul>li>form>div>details>input.is-invalid:focus,
.form section>div>ul>li>form>div>details>span>input.is-invalid:focus,
.contact input.is-invalid:focus,
.contact select.is-invalid:focus,
.contact textarea.is-invalid:focus {
  outline: none;
  border-color: var(--green); 
}

.form section>div>ul>li>form.open-form>div>select.is-invalid:focus {
  color: var(--blue);
}
.form section>div>ul>li>form.open-form>div>input.is-invalid,
.form section>div>ul>li>form.open-form>div>span>input.is-invalid,
.form section>div>ul>li>form.open-form>div>select.is-invalid,
.form section>div>ul>li>form.open-form>div>textarea.is-invalid,
.form section>div>ul>li>form>div>details>input.is-invalid,
.form section>div>ul>li>form>div>details>select.is-invalid,
.form section>div>ul>li>form.open-form>div>input.is-invalid:focus,
.form section>div>ul>li>form.open-form>div>select.is-invalid:focus,
.form section>div>ul>li>form.open-form>div>textarea.is-invalid:focus,
.form section>div>ul>li>form>div>details>input.is-invalid:focus,
.form section>div>ul>li>form>div>details>span>input.is-invalid:focus,
.form section>div>ul>li>form>div>details>select.is-invalid:focus,
.form section>div>ul>li>form.open-form>div>input.is-invalid::placeholder,
.form section>div>ul>li>form.open-form>div>textarea.is-invalid::placeholder,
.form section>div>ul>li>form>div>details>input.is-invalid::placeholder,
.form section>div>ul>li>form>div>details>span>input.is-invalid::placeholder,
.contact input.is-invalid:focus,
.contact select.is-invalid:focus,
.contact textarea.is-invalid:focus,
.contact input.is-invalid::placeholder,
.contact textarea.is-invalid::placeholder {
  border-color:var(--red);
  color: var(--red);
}

.form section>div>ul>li>form>div>select:focus {
  color: var(--orange);
}
.form section>div>ul>li>form>div>select:focus>option {
  color: var(--blue);
}
.form section>div>ul>li>form>div>input:first-child,
.form section>div>ul>li>form>div>select:first-child,
.form section>div>ul>li>form>div>textarea:first-child {
  margin-top:0;
}
input[type="file"] {
  display: none;
}
input[readonly] {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;    
  -ms-user-select: none; 
  pointer-events: none;
}
.form section>div>ul>li>form>div>label {
  transition: 0.4s all ease;
  display:none;
}
.form section>div>ul>li>form.open-form>div>label {
  transition: 0.4s; 
  min-width: 170px;
  padding:0 10px;
  line-height:35px;
  display:flex;
  vertical-align:center;
  align-items:center;
  display:inline-block;
  text-align:center;
  border-radius: 20px;
  border: solid 2px var(--blue);
  font-weight: 500;
  user-select:none;
  color: var(--blue);
  cursor:pointer;
  box-sizing: border-box;
  background: none;
  margin-top:10px;
  position:relative;
  padding-left:40px;
}

.form section>div>ul>li>form.open-form>div>span {
  display:block;
  position:relative;
}


.form section>div>ul>li>form>div>label:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.form section>div>ul>li>form>div>label::before {
  content:"+";
  font-family:Arial, Helvetica, sans-serif;
  font-weight:600;
  font-size:1.8rem;
  align-items: center;
  text-align:center;
  background:var(--blue);
  color: #fafafa;
  display:flex;
  justify-content: center;
  vertical-align: center;
  display:inline-block;
  width:35px;
  height:35px;
  line-height:35px;
  position:absolute;
  left:0;
  border-radius:50%;
  transition: 0.4s all ease;
}

.form section>div>ul>li>form>div>label:hover::before {
  background:var(--bg);
  color: var(--orange);
}
.currentImage {
  display:none;
  transition: 0.4s all ease;
}
.open-form .currentImage {
  display:block;
  border: solid 2px #eaeaea;
  background: var(--bg2);
  width:170px;
  height:170px;
  margin:0 auto;
  border-radius:50%;
  padding:5px; 
}
.currentImage>img {
  width:100%;
  height:auto;
  border-radius:50%;
}

.previewArea {
  display:block;
  width:100%;
  max-height: 300px;
  position: relative;
  overflow: hidden;
  border: 1px solid #eaeaea;
  border-radius:6px;
  background: var(--bg2);
}

.previewArea img {
  display: block;
  max-width: 100%;
  max-height: 300px;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.previewArea>button {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--red);
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 4px;
}

.previewArea>button:hover {
  background: var(--orange);
  animation: gelatine 0.4s 1;
}

.previewArea>button:focus {
  background: var(--green);
}

#cropperContainer {
  display: none;
  max-width: 100%; 
  max-height: 300px; 
  position: relative;
  text-align:left
}
#cropperContainer>h4 {
  color: #fff;
  text-shadow: 0 1px 0 #000;
  text-align:left;
  font-weight:500;
  z-index:2;
  position: absolute; 
  top: 2px; 
  left: 5px; 
  user-select:none;
}
#cropperContainer>img {
  max-width:100%; 
  display:block;
}
#cropperContainer>button {
  position: absolute; 
  top: 5px; 
  right: 5px; 
  background: var(--red); 
  color: white; 
  border: none; 
  padding: 5px 10px; 
  cursor: pointer; 
  border-radius: 4px
}
#cropperContainer>button:hover {
  background: var(--orange); 
  animation:gelatine 0.4s 1;
}
#cropperContainer>button:focus {
  background: var(--green); 
}
.form section>div>ul>li>form>div>button,
.form section>div>ul>li>form#account.open-form>div>details>button {
  height:0;
  opacity:0;
  font-size:0;
  color: transparent;
  border:none;
  transition:0.4s;
  width:100%;
  text-align:center;
}

.form section>div>ul>li>form.open-form>div>button,
.form section>div>ul>li>form#account.open-form>div>details>button {
  height:inherit;
  opacity:1;
  transition:0.4s;
  line-height:1.5rem;
  font-size:1.5rem;
  background: var(--blue);
  color: #fafafa;
  font-weight:600;
  border-radius:10px;
  padding:6px 0;
  margin-top:10px;
  cursor: pointer;
}

.form section>div>ul>li>form.open-form>div>button:hover,
.form section>div>ul>li>form#account.open-form>div>details>button:hover {
  background: var(--orange);
  transition:0.4s;
}
.form section>div>ul>li>form.open-form>div>button:active,
.form section>div>ul>li>form#account.open-form>div>details>button:active {
  background: var(--green);
  transition:0.4s;
}

.gallery {
  display:none;

}
.open-form .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position:relative;
  margin-top:28px;
  padding-top:15px;
  border-top: solid 2px #eaeaea;
}
.gallery>button {
  background: var(--blue);
  color: #fafafa;
  border:none;
  border-radius:6px;
  height:30px;
  cursor:pointer;
  transition: 0.4s all ease;
  vertical-align:bottom;
}
.gallery>button::after {
  content: "→";
  margin-left: 0.5em;
  position:relative;
  top:-1px;
}
.gallery>button:hover {
  background: var(--orange);
}
.gallery>button:focus {
  background: var(--green);
}
.gallery>figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  position:relative;
  border-radius:6px;
  box-sizing: border-box;
}

.open-form .gallery>figure { animation: bounce-top2 3s both; }
.open-form .gallery>figure.duration-0 { animation-duration:1s; }
.open-form .gallery>figure.duration-1 { animation-duration:1.2s; }
.open-form .gallery>figure.duration-2 { animation-duration:1.4s; }
.open-form .gallery>figure.duration-3 { animation-duration:1.6s; }
.open-form .gallery>figure.duration-4 { animation-duration:1.8s; }
.open-form .gallery>figure.duration-5 { animation-duration:2s; }
.open-form .gallery>figure.duration-6 { animation-duration:2.2s; }
.open-form .gallery>figure.duration-7 { animation-duration:2.4s; }
.open-form .gallery>figure.duration-8 { animation-duration:2.6s; }
.open-form .gallery>figure.duration-9 { animation-duration:2.8s; }

.gallery>figure>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius:6px;
  flex-grow: 1;
  image-rendering: auto;
  
}

.gallery>figure>img:hover {
  transition:0.4s;
  opacity:0.7;
  cursor:zoom-in;
}
.gallery>figure.editing {
  overflow:hidden;
}
.gallery>figure.editing>img,
.gallery>figure.editing>figcaption {
  display:none;
}
.gallery>figure>textarea {
  display:none;
  width:100%;
  height:300px;
  border-radius:6px;
  padding:5px;
  background: var(--bg2);
  color: var(--text2);
  border: solid 1px var(--blue);
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
  resize: none;
  overflow:hidden;
}
.gallery>figure.editing>textarea {
  display:block;
}
.gallery>figure.editing>textarea:focus {
  outline: none; 
  border: solid 1px var(--green); 
}
.gallery>figure>button {
  position:absolute;
  top:4px;
  color: #fafafa;
  border: none;
  padding:0 4px;
  cursor: pointer;
  border-radius:4px;
  font-size:0.8rem;
  height:18px;
  font-family: "Nunito", sans-serif;
  pointer-events: auto;
}

.gallery>figure>.set {
  left:4px;
  background: var(--blue);
}

.gallery>figure.editing>button {
  top:inherit;
  height:20px;
  bottom:4px;
}

.gallery>figure>.del {
  right:4px;
  background: var(--red);
  visibility: visible;
  opacity:1;
  transition: 0.4s all ease;
}
.gallery>figure>.set::before {
  content:"Düzenle";
  font-family: "Nunito", sans-serif;
}
.gallery>figure.editing>.set::before {
  content:"Kaydet";
}
.gallery>figure>.del::before {
  content:"Sil";
  font-family: "Nunito", sans-serif;
}
.gallery>figure.editing>.del::before {
  content:"Vazgeç";
}
.gallery>figure>.set:hover,
.gallery>figure>.del:hover {
  background: var(--orange);
}
.gallery>figure>.set:active,
.gallery>figure>.del:active {
  background: var(--green);
}
.gallery>figure>figcaption {
 position: absolute;
  bottom: 0;
  left: 0;
  height:auto;
  box-sizing: border-box;
  width: 100%;
  background: rgba(0,0,0,0.5);
  border-radius: 0 0 6px 6px;
  color: white;
  padding: 4px;
  font-size: 10px;
  line-height: 1.200em; 
  max-height: calc(1.430em * 2);
  text-align: center;
  display: -webkit-box;          
  -webkit-box-orient: vertical;  
  -webkit-line-clamp: 2;         
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  pointer-events: none;
}

.hide{ display:none !important; }
.notice {display:none;z-index:999;position:relative;}
.open-form>div>p.notice,
.open-form>div>details[open]>p.notice,
.contact p.notice {display:block}
.billing p.notice {display:block}
.messages p.notice {display:block}

.billing .success-form  p.notice {
  display:none;
}

.notice{width:100%;padding:8px 10px; border-radius:4px;margin:20px 0 10px;text-align:left;}
.operation p.notice {margin:10px 0 10px}
.check{background:#f6e6f6;color:#740575;margin:0 0 5px 0;border-left:solid 3px #740575;padding:5px 10px;font-size:0.850rem}
.check::before{font-weight:600;content:"✓";margin-right:3px;margin-left:-3px}
.check>b{font-style:normal;font-weight:600}
.open-form>div>p.notice.check{animation:bounce-top 2s both}
.default{background:#dbf0fa;color:#1d776e;border-left:solid 3px #1d776e}
.default>b,.default>strong{font-style:normal;font-size:0.9rem;font-weight:500;display:block;padding:3px 5px;border-radius:4px;margin:5px 0;background:#f8d7da;color:#721c24;border-left:solid 3px #721c24;animation:shake-horizontal 0.9s cubic-bezier(.455,.03,.515,.955) 2 both;animation-delay:1.2s}
.open-form>div>p.notice.default{animation:bounceDownAnim 2s alternate both}
.open-form>div>p.notice.default>a{animation:blink 0.1s 6;animation-delay:1.2s}

.default>strong{animation:gelatine 2s 1;animation-delay:1s}
.open-form>div>p.notice.default{animation:bounceDownAnim 2s alternate both}
.open-form>div>p.notice.default>a{animation:blink 0.1s 6;animation-delay:2s}



.notice.success{background:#d4edda;color:#155724;border-left:solid 3px #155724;animation:slide-in-blurred-top 1.5s cubic-bezier(.23,1.000,.32,1.000) both}
.notice.error{background:#f8d7da;color:#721c24;border-left:solid 3px #721c24;animation:shake-to-alert 0.9s linear 2 both}
.notice.warning{background:#fff3cd;color:#856404;border-left:solid 3px #856404;animation:jello-horizontal 0.9s both}
.notice.info{background:#cce5ff;color:#004085;border-left:solid 3px #004085;animation:shake-horizontal 0.9s cubic-bezier(.455,.03,.515,.955) 1 both}
.is-invalid{border:1px solid var(--red);animation:gelatine 1s 1;animation-delay:0.9s}


.lightbox-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  padding:10px;
  overflow: auto; 
  display: flex;
  width:100%;
  height:100vh;
  justify-content: center;
  align-items: center;
}

.lightbox-content img,
.lightbox-content iframe {
  max-width: 100%;
  max-height: 100%;
  border: none;
  display: block;
  margin: auto;
  border-radius:6px;
}

.lightbox-content img {
  user-select:none;
}

.lightbox-caption {
  color: #fff;
  margin-top: 1rem;
  max-width: 90vw;
  text-align: center;
  font-size: 1rem;
  user-select: none;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  background: rgba(0,0,0,0.5);
  width:30px;
  height:30px;
  text-align:center;
  display:flex;
  vertical-align:center;
  justify-content:center;
  line-height:2rem;
  border-radius:4px;
}
.lightbox-close:hover {
  background: rgba(0,0,0,0.8);

}
#confirm-delete-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}


.modal {
  display: none;
  position: fixed;
  z-index: 99998;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: center; 
  align-items: center;
  background: var(--shadow); 
}

.modal-content {
  background: var(--blur-bg2); 
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  -moz-backdrop-filter: blur(30px);
  -ms-backdrop-filter: blur(30px);
  padding: 30px;
  border-radius: 12px;
  width: 70%;
  max-width: 700px; 
  overflow: hidden;  
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.4s cubic-bezier(.23, 1.000, .32, 1.000) both;
}
.modal-content>div {
  max-height: 60vh;  
  overflow-y: auto;  
}
.modal-content>div>h4 {
  color: var(--blue);
  font-weight:600;
  margin:20px 0 5px 0;
}
.modal-content>div>h4:first-child {
  margin-top:5px;
}
.modal-content>div>ul {
  margin:0;
  margin-bottom:-15px;
  border: solid 1px var(--border-color);
  padding:5px 10px;
  border-radius:10px;
  background: var(--soft-green);
}
.modal-content>div>ul>li:last-child {
  border:none;
  margin:0;
}
.modal-content .cart-btn {
  background: var(--green2);
  color: #fff;
  height:40px;
  line-height:40px;
  padding:0 10px;
  box-sizing: border-box;
  display:flex;
  justify-content: center;
  align-items: center;
  border-radius:10px;
  text-decoration:none;
  margin-top:15px;
}
.modal-content .cart-btn:hover {
  background: var(--orange);
}
.modal-content .cart-btn:active {
  background: var(--green);
}
.modal-content .cart-btn>i {
  margin-right:0.5em;
}
.invoice { 
  margin-right:5px;
  position:relative;
  background: #fff;
  padding:35px 40px 50px 40px;
  color: #444;
  font-size:0.9rem;
}
.invoice>h2 {
  color: var(--orange);
  font-size:1.5rem;
  border-bottom-color: var(--blue);
}
.invoice>h2>img {
  position:relative;
  top:2px;
}
.invoice>h3 {
  color: #000;
  font-weight:800;
  font-size:1rem;
}
.invoice>h4 {
  margin:25px 0 5px 0;
  color: #111;
  font-weight:700;
  font-size:0.9rem;
}
.invoice>h4:last-of-type {
  border-top: dotted 3px #ccc;
  padding-top:15px;
}
.invoice>p {
  line-height:1.4rem;
  padding-bottom:6px;
}
.invoice>p>b {
  color: #222;
  font-style:normal;
  font-weight:600;
  display:inline-block;
  width:135px;
}
.invoice>p>strong {
  color: #222;
  font-style:normal;
  font-weight:600;
}

.modal-content>div>small {
  border-top: solid 1px var(--border-color);
  display:block;
  width:100%;
  padding-top:10px;
  margin-top:10px;
}
.modal-content>div>small>b {
  color: var(--blue);
}
.modal-content>div>small.date>b {
  display:inline-block;
  width:115px;
}
.modal-content>div>small.date>b:last-of-type {
  letter-spacing: 0.310px;
}


.modal-content>button {
  color: var(--orange);
  background: none;
  font-size: 22px;
  box-sizing: border-box;
  border: solid 1px var(--blue);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease; 
  padding: 0;
  line-height: 30px;
  text-align: center;
}

.modal-content>button:hover,
.modal-content>button:focus {
  color: var(--blue);
  border-color: var(--orange);
  transform: rotateZ(-360deg) scale(0.95);
}

.modal-backdrop {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(8px);
}

.modal-box {
  position: relative;
  background: var(--bg2);
  padding: 0;
  border-radius: 15px;
  width: 260px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 10;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: var(--text);
  text-align: center;
  font-size: 16px;
}


.modal-box>p {
  padding: 20px 10px 5px 10px;
}

.modal-buttons {
  margin-top: 15px;
  display: flex;
  border-top: 1px solid var(--border-color);
  background:#fafafa;
  border-radius: 0 0 15px 15px;
  overflow: hidden;
  height: 35px;
  position: relative;
}

.modal-buttons button {
  flex: 1;
  border: none;
  background: var(--bg);
  font-size: 17px;
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--blue);
  user-select: none;
}
.modal-buttons button:hover {
  color: var(--orange);
}
.modal-buttons button:focus {
  color: var(--green);
}

.modal-buttons button:active {
  background: var(--bg2);
}

.btn-separator {
  position: absolute;
  top: 1px; bottom: 1px;
  left: 50%;
  width: 1px;
  background: var(--border-color);
  transform: translateX(-50%);
  z-index: 15;
}

p.message {
  padding: 6px 10px;
  z-index:999;
  display:block;
  position:absolute;
  bottom:0;
  width:100%;
  height:100%;
  justify-content: center;
  align-items: center;
  vertical-align:center;
  font-size: 0.9rem;
  border-radius: 6px;
  text-align:left;
  border: solid 1px #eaeaea;
}
p.message.success {
  background-color: rgba(212,237,218,0.8);
  color: #155724;
  border-color:#00ff00;
  animation:fadeIn 0.9s both;
}
p.message.error {
  background-color: rgba(248,215,218,0.9);
  color: #721c24;
  border-color:#721c24;
  animation:jello-horizontal 0.9s both;
}

main>section {
  margin-bottom:30px;
}
main>section>h3 {
  margin-bottom:10px;
}
main>section>ul,
main>section>ol {
  margin-left:20px;
  margin-bottom:40px;
}
main>section>ul.ul {
  list-style:none;
  padding-left:0;
  margin-left:0;
  margin-top:20px;
}
main>section>ul.ul>li {
  margin-bottom:20px;
  margin-left:25px;
}
main>section>ul.ul>li a::before {
  content:"►";
  width:25px;
  text-decoration:none;
  display:inline-block;
  margin-left:-25px;
}
main>section>p {
  margin-bottom:40px;
}
main>section>ul:last-of-type,
main>section>ol:last-of-type,
main>section>p:last-of-type {
  margin-bottom:0;
}
main>section>details {
  margin-bottom:10px;
}
main>section>details>summary {
  font-weight:500;
  cursor:pointer;
  color: var(--blue);
}
main>section>details[open]>summary {
  color: var(--orange);
}
section.page>h2 {
  width: 45%;
}
section.page>p,
section.page>div {
  display:block;
  width:45%;
  float:left;
}
section.page>div {
  margin-right:10%;
  margin-top: 20px;
}

section.page>div>a {
  float:left;
  width:47%;
  margin:0 6% 30px 0 ;
  background: var(--bg2);
  border-radius:20px;
  padding:20px 0;
  height:200px;
  font-size:32px;
  text-align:center;
  text-decoration:none;
  color: var(--text);
  box-shadow: 0 0 20px var(--shadow-blue);
  border: solid 1px var(--blue);
  position:relative;
  transition:0.4s;
}
section.page>div>a:nth-child(2) {
  margin-right:0;
}
section.page>div>a:hover {
   box-shadow: 0 0 20px var(--shadow-orange);
  border-color: var(--orange);
  transform: translateY(-10px);
  transition:0.4s;
  color: var(--blue);
}
section.page>div>a:active {
  box-shadow: 0 0 20px var(--green);
  border-color: var(--green);
  transform: translateY(0);
  transition:0.4s;
  color: var(--green);
}
section.page>div>a>i {
  display:block;
  font-size:50px;
  font-weight:normal;
  color: var(--orange);
}
section.page>div>a>span {
  display:block;
  padding:5px 10px;
  left:15px;
  right:15px;
  border-radius:10px;
  font-size:1.4rem;
  line-height: 1.1;
  height:40px;
  position:absolute;
  bottom: 15px;
  background: var(--blue);
  color: #fafafa;
  border: solid 1px #eaeaea;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), inset 0px 2px 2px rgba(255, 255, 255, 0.7); 
}
section.page>div>a:hover>span {
  background: var(--orange);
  border-color: var(--orange);
  transition:0.4s;
  animation: gelatine 0.4s 1;
}
section.page>div>a:active>span {
  background: var(--green);
  border-color: var(--green);
  transition:0.4s;
}



.contact {
  box-shadow: 0 0 30px var(--shadow-blue);
  background: var(--bg2);
  margin:30px 0;
  border-radius:20px;
  padding:20px;
  width:35%;
  float:left;
  position:relative;
  top:-18px;
  z-index:2;
  min-height:374px;

}
.contact.single-form {
  width:100%;
}
.contact.simple-form {
  width:50%;
  margin: 30px auto;
  float:inherit;
  min-height: inherit;
}
.contact:nth-child(2) {
  width:30%;
  margin:30px 5%;
  padding-bottom:18px;
}
.contact:nth-child(3) {
  width:25%;
}
.contact.single-form>h2 {
  width:45%;
}
.contact.single-form>form {
  float:left;
  width:45%;
  position:relative;
}

.contact.single-form>figure {
  width:45%;
  position:relative;
  float:right;
  margin-top:-20px;
  text-align:right;
}
.contact.single-form>figure>img {
  border-radius:10px;
}

.contact div {
  position:relative;
  margin-bottom:6.5px;
}
.contact input,
.contact textarea,
.contact select { 
  background-color: var(--bg2);
  padding:5px 5px 5px 22px;
  margin:0;
  font-size:1rem;
}
.contact.single-form input,
.contact.single-form textarea,
.contact.single-form select {
  padding:6px 5px 6px 25px;
  font-size:1.1rem;
}

.contact input,
.contact select {
  height:34.5px;
}

.contact textarea {
  resize: none; 
  overflow: hidden;
  min-height:75px;
}
.contact textarea.lg {
  min-height:150px;
}
.contact.single-form textarea {
  min-height:102px;
}
.contact.single-form textarea.lg {
  min-height:179px;
}
.contact.simple-form input {
  font-size:1.1rem;
  margin-bottom:10px;
  height:40px;
  padding-left:27px;
}
.contact.simple-form span {
  display:block;
  position:relative;
}
.contact.simple-form .fa-envelope,
.contact.simple-form .fa-key {
  position:relative;
  font-size:1.1rem;
  top:6px;
}
.contact option[disabled] {
  color: #999 !important;
  font-weight: 600;
}

.contact select:focus>option {
  color: var(--blue);
}

.contact input:hover+label,
.contact textarea:hover+label,
.contact select:hover+label {
  color: var(--blue);
}
.contact input:focus+label,
.contact textarea:focus+label,
.contact select:focus+label {
  color: var(--green);
}
.contact input.is-invalid:focus+label,
.contact textarea.is-invalid:focus+label,
.contact select.is-invalid:focus+label {
  color: var(--red);
}

.contact label {
  display:inline-block;
  position:absolute;
  left:0;
  top:3px;
}
.contact label>.fa-envelope {
  position:relative;
  top:1px;
}

.contact.single-form label {
  top:5px;
}

label.passType {
  display:flex;
  position:absolute;
  top:10px;
  right:0;
  left:inherit;
  padding:0;
  min-width:inherit;
  border: none;
  margin:0;
  cursor:pointer;
}
.passType.fa-eye {
  color: var(--blue);
}
.passType.fa-eye-slash {
  color: var(--green);
}

.contact button {
  width:100%;
  background: var(--blue);
  border-radius:10px;
  border:none;
  padding:0;
  height:40px;
  line-height:1.3rem;
  font-size:1.3rem;
  color: #fafafa;
  cursor:pointer;
  outline: none;
  transition: all 0.2s ease;
}
.contact.simple-form button {
  height:40px;
  line-height:1.2rem;
  font-size:1.2rem;
}
.contact button:hover {
  background: var(--orange);
  color: #fff;
}
.contact button:active {
  background: var(--green);
  color: #fff;
}

.contact>p {
  line-height:1.150rem;
  font-size:0.9rem;
  margin-top:20px;
  margin-bottom:0;
  display:block;
  padding:0;
}
.contact>p:last-child {
  margin-top:15px;
}
.contact.simple-form.success-form p:first-of-type {
  display:none;
}
.contact>p>b {
  color: var(--red);
}
.contact address {
  padding-bottom:15px;
  font-style:normal;
  font-size:0.950rem;
}
.contact address>strong {
  font-size:1.2rem;
}
.contact address>a>i {
  display:inline-block;
  width:20px;
}
.contact address>a {
  font-size:1.050rem;
}

.contact address>a:first-of-type {
  margin-top:10px;
  margin-bottom:5px;
  display:inline-block;
}
.contact address>a {
  text-decoration:none;
}
.contact address>a:hover {
  color: var(--orange);
}
.contact address>a:active,
.contact address>a:focus {
  color: var(--green);
}
.contact h3 {
  margin-top:15px;
  margin-bottom:0;
  font-size:1.2rem;
  font-weight:600;
  color: var(--orange);
}
.contact h3>i {
  font-size:1rem;
}

.contact ul {
  list-style:none;
  margin:0;
}
.contact ul>li::before {
  content:"\21A6";
  margin-right:5px;
  font-size:1.1rem;
}

.contact ul>li {
  color: var(--text);
  font-weight:500;
  width:100%;
  display: flex;
  align-items: center; 

}
.contact ul>li>span {
  color: var(--text2);
  font-weight:400;
  margin-left: auto;
}

.contact>u {
  display:block;
  position:relative;
  bottom:-5px;
  padding-top:10px;
  font-size:0.9rem;
  line-height: 1.1rem;
  border-top: dashed 1px #bdbdbd;
  color: var(--red2);
  text-decoration:none;
}
.contact>u>span {
  display:inline-block;
  position:relative;
  width:90%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

.contact>u.active {
  color: var(--green3);
}
.contact>u.active {
  font-size:1rem;
  line-height:1.2rem;
}
.contact>u>i {
  display:inline-block;
  width: 12px;
  height: 12px;
  margin-right:3px;
  position:relative;
  top:-4px;
  background-color: var(--red2);
  border-radius: 50%;
  position: relative;
  text-decoration:none;
  font-style:normal;
}

.contact>u>i::after {
  content:""; 
  border-radius: 50%;
  height: 20px;
  width: 20px;
  position: absolute;
  left: -6px;
  top: -6px;
}
.contact>u.active>i {
  background-color: var(--green3); 
}
.contact>u.active>i::after {
  border: solid 2px var(--green3); 
  -webkit-animation: pulsate 1.5s ease-out;
  -webkit-animation-iteration-count: infinite; 
  opacity: 0.0;
}
.contact>iframe {
  border: none;
  border-radius:10px;
}
.single-form.success-form h2 {
  color: transparent;
  border:none;

}

.success-form form div:not(.success-container),
.success-form form button {
  display:none;
}


.success-container { 
  display: none;
  position:relative;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: var(--green2);
  background: rgba(248,254,248,1);
  min-height:276px;
  margin-top:15px;
  border-radius:15px;
}
.single-form .success-container {
   margin-top:-20px;
   min-height:335px;
}
.billing .success-container {
   margin-top:-10px;
   min-height:208px;
   z-index:0;
}
.success-form .success-container {
  display:flex;
  animation:fadeIn 0.9s both;
}

.success-form .success-container::after {
  content:"Mesajınız İletildi";
  letter-spacing:0.2px;
  font-family: "Nunito", sans-serif;
  user-select:none;
  font-weight:500;
  font-size:2rem;
}
.billing .success-form .success-container::after {
  content:"Başarıyla İletildi";
}


.check-container {
  display:flex;
  width: 6.25rem;
  height: 7.5rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
}


.check-background {
  width: 100%;
  height: calc(100% - 1.25rem);
  background: linear-gradient(to bottom right, #5de593, #41d67c);
  box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 
                0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
  transform: scale(0.84);
  border-radius: 50%;
  animation: animateContainer 0.75s ease-out forwards 0.75s;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.check-background svg {
  width: 65%;
  transform: translateY(0.25rem);
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: animateCheck 0.35s forwards 1.25s ease-out;
}

.check-shadow {
  display:flex;
  bottom: calc(-15% - 5px);
  left: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(73, 218, 131, 1), transparent);
  animation: animateShadow 0.75s ease-out forwards 0.75s;
}

@keyframes animateContainer {
  0% {
    opacity: 0;
    transform: scale(0);
    box-shadow: 0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset, 
                0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
  }
  25% {
    opacity: 1;
    transform: scale(0.9);
  }
  43.75% {
    transform: scale(1.15);
    box-shadow: 0px 0px 0px 43.334px rgba(255, 255, 255, 0.25) inset, 
                0px 0px 0px 65px rgba(255, 255, 255, 0.25) inset;
  }
  62.5% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 
                0px 0px 0px 21.667px rgba(255, 255, 255, 0.25) inset;
  }
  81.25% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 
                0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
  }
  100% {
    opacity: 1;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset, 
                0px 0px 0px 0px rgba(255, 255, 255, 0.25) inset;
  }
}

@keyframes animateCheck {
  from {
    stroke-dashoffset: 80;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes animateShadow {
  0% {
    opacity: 0;
    width: 100%;
    height: 15%;
  }
  25% {
    opacity: 0.25;
  }
  43.75% {
    width: 40%;
    height: 7%;
    opacity: 0.35;
  }
  100% {
    width: 85%;
    height: 15%;
    opacity: 0.25;
  }
}


.faq>h2 {
  width:50%;
}
.faq>div:first-of-type {
  width:50%;
  float:left;
  margin-top:20px;
}

.faq>div:last-of-type {
  margin-top: 40px;
  float:left; 
  padding: 20px; 
  background: #eaf1ff; 
  border-left: 5px solid #004aad; 
  border-radius: 6px; 
  font-size: 1rem; 
  color: #004aad;
}

.faq>figure {
  width:50%;
  float:left;
  margin-top:-20px;
  text-align:right;
}

.faq details {
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom: solid 1px #bdbdbd;
  max-height: 47px;
  transition: max-height 0.4s ease;
  position:relative;
}
.faq details summary::-webkit-details-marker {
  display: none;
}

.faq details[open] {
  max-height: 2000px; 
}
.faq details>summary {
  cursor:pointer;
  font-weight:500;
  user-select:none;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  font-size:1.1rem;
  position:relative;
  list-style: none;
}
.faq details summary::-webkit-details-marker {
  display: none;
}
.faq details>summary::after {
  content:"﹢";
  font-weight:400;
  font-size:2.5rem;
  line-height:1rem;
  background: var(--bg);
  text-align:center;
  position:absolute;
  display:inline-block;
  right:-10px;
  top:4px;
  color: var(--blue);
}
.faq details>summary:hover::after {
  color: var(--orange);
}
.faq details[open]>summary::after {
  content:"-";
  right:0;
  color: var(--orange);
}
.faq details>summary:hover {
  color: var(--orange);
}
.faq details[open]>summary {
  color: var(--blue);
}
.faq details>ul {
  margin-left:20px;
}
.faq details>p,
.faq details>ul>li {
  margin-bottom:20px;
}
.faq details>p:first-of-type {
  margin-top:10px;
}
.faq details>p:last-of-type {
  margin-bottom:0;
}

table {
  width: 100%;
  max-width: 600px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
  margin:2rem 0;
}
thead tr {
  background-color: var(--blue); 
  color: white;
  text-align: left;
}
th, td {
  padding: 12px 15px; 
}
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
tbody tr:hover {
  background-color: #e6f0ff; 
}
th {
  font-weight: 600;
}


.messages>button {
  width:50%;
  margin-top:10px;
  float:left;
  background: none;
  border: none;
  border-bottom: solid 1px var(--border-color);
  height:40px;
  line-height:40px;
  font-weight:600;
  font-family: 'Poppins', sans-serif;
  color: var(--orange);
  font-size:1.2rem;
  text-align:left;
  text-transform:uppercase;
  cursor:pointer;
}
.messages>button:last-of-type {
  text-align:right;
}
.messages>button:not(.active):hover {
  color: var(--green);
}
.messages>button.active:first-of-type {
  padding-left: 10px;
}
.messages>button.active:last-of-type {
  padding-right: 10px;
}

.messages>button.active {
  color: var(--blue);
  background: var(--bg2);
  border-radius:10px 10px 0 0;
  border: solid 1px var(--border-color);
  border-bottom-color: transparent;
  border-bottom:none;
  pointer-events:none;
  font-weight:500;
}

.messages>button>span {
  display:none;
  height:20px;
  line-height:20px;
  justify-content: center;
  align-items:center;
  position:relative;
  top:-1px;
  color: #fff;
  padding:0 3px;
  border-radius:4px;
  font-size:18px;
  font-weight:500;
  background: var(--red);
}
.messages>button>span.active {
  display:inline-flex;
}
.messages>h2:last-of-type {
  margin-top:20px;
  float:left;
  width:100%;
}
.messages>ul {
  list-style:none;
  margin:0;
  float:left;
  padding:10px;
  width:100%;
  position:relative;
  border: solid 1px var(--border-color);
  border-top:none;
  background: var(--bg2);
  border-radius:0 0 10px 10px;
  min-height:50px;
  max-height:320px;
  overflow-y: auto;
  display:none;
  flex-direction:column-reverse; 
  scrollbar-width: thin;
  scrollbar-color: var(--blue3) transparent;
}
.messages>ul.active {
  display:flex;
}

.messages>ul>li {
  padding:5px 0 10px;
  margin-bottom:10px;
  position:relative;
  border-bottom: solid 1px #e3f0eb; 
}
.messages>ul>li.department_1 {
  border-bottom-color: #fbcee9;
}
.messages>ul>li.department_2 {
  border-bottom-color: #d0bff2;
}
.messages>ul>li.department_3 {
  border-bottom-color: #edf2bf;
}
.messages>ul>li.department_4 {
  border-bottom-color: #ebe0c0;
}
.messages>ul>li.department_5 {
  border-bottom-color: #cefbf7;
}
.messages>ul>li.department_6 {
  border-bottom-color: #fbe9ce;
}
.messages>ul>li:last-child {
  padding-top:0;
}
.messages>ul>li:first-child {
  margin-bottom:0;
  padding-bottom:0;
  border-bottom: none;
}
.messages>ul>li>b {
  display:inline-flex;
  padding:0 8px;
  justify-content:center;
  align-items:center;
  border-radius:5px;
  background: #e3f0eb;
  color: #333;
  border: solid 2px transparent;
}
.messages>ul>li>b.new {
  color: #146a14;
  font-weight:600;
  border-color: var(--green);
}
.messages>ul>li>b>span {
  display:inline-block;
  padding:0 3px;
  border-radius:5px;
  background: var(--bg);
  color: var(--text2);
  margin-left:8px;
  margin-right:-4px;
  font-size:0.8rem;
}

.messages>ul>li.department_1>b {
  background: #fbcee9;
}
.messages>ul>li.department_2>b {
  background: #d0bff2;
}
.messages>ul>li.department_3>b {
  background: #edf2bf;
}
.messages>ul>li.department_4>b {
  background: #ebe0c0;
}
.messages>ul>li.department_5>b {
  background: #cefbf7;
}
.messages>ul>li.department_6>b {
  background: #fbe9ce;
}

.messages>ul>li>time {
  position:absolute;
  right:0;
  top:5px;
  font-size:0.6rem;
}
.messages>ul>li>p {
  display:block;
  margin-top:5px;
  padding-left:5px;
  border-left: solid 3px #e3f0eb;
  word-wrap: break-word;  
  white-space: normal;
}
.messages>ul>li>p.new {
  color: var(--green);
}
.messages>ul>li.department_1>p {
  border-left-color: #fbcee9;
}
.messages>ul>li.department_2>p {
  border-left-color: #d0bff2;
}
.messages>ul>li.department_3>p {
  border-left-color: #edf2bf;
}
.messages>ul>li.department_4>p {
  border-left-color: #ebe0c0;
}
.messages>ul>li.department_5>p {
  border-left-color: #cefbf7;
}
.messages>ul>li.department_6>p {
  border-left-color: #fbe9ce;
}

.messages>form {
  position:relative;
  float:left;
  width:100%;
}
.user-details>div.messages>form {
  margin-top: 10px;
}
.messages>form>select {
  position:absolute;
  top:2px;
  left:2px;
  width:222px;
  cursor: pointer;
  padding:5px 10px;
  border: none;
  outline:none;
  z-index:1;
  font-weight:600;
  font-family: 'Poppins', sans-serif;
  color: var(--orange);
  background-color:transparent;
  font-size:1.1rem;
  border-bottom: solid 1px var(--blue);
  border-radius: 10px 0 10px 0;
}
.messages>form>select:focus {
  color: var(--green);
  border-bottom-color: var(--green);
}
.messages>form>select.is-invalid,
.messages>form>select.is-invalid:focus {
  border-bottom-color: var(--red);
  color: var(--red);
  background-color: #fef6f6;
  border-right: solid 1px var(--red);
}
.messages>form>select:focus>option {
  color: var(--blue);
  font-weight:400;
}
.messages>form>select>option:disabled {
  color: var(--orange);
  font-weight:600;
}
.messages>form>textarea {
  display:block;
  width:100%;
  min-height:70px;
  position:relative;
  border: solid 1px var(--blue);
  border-radius:10px;
  padding:40px 10px 10px;
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  background:var(--bg2);
  font-size:1rem;
  outline:none;
  resize:none;
  overflow-y: hidden;
}
.messages>form>textarea.is-invalid,
.messages>form>textarea.is-invalid:focus {
  border-color: var(--red);
  color: var(--red);
}
.messages>form>textarea:focus {
  border-color: var(--green);
}
.messages>form>button {
  background:var(--blue);
  color: #fafafa;
  border: none;
  line-height:40px;
  height:40px;
  box-sizin:border-box;
  font-size:1.2rem;
  font-weight:900;
  text-transform:uppercase;
  border-radius:10px;
  cursor:pointer;
  width:100%;
  margin-top:10px;
}
.messages>form>button:hover {
  background:var(--orange);
}
.messages>form>button:active {
  background:var(--green);
}

.admin {
  padding:0;
  margin:0;  
}
.admin>h2 {
  margin-bottom:20px;
  margin-top:-10px;
  padding-bottom:3px;
}
.admin h2>span {
  float:right;
  color: var(--orange);
  position:relative;
  top:2px;
}
.admin h2>span>i {
  font-style:normal;
  margin-left:15px;
  padding:2px 4px;
  border-radius: 4px;
  background: var(--blue);
  font-size:1rem;
  line-height:1.2rem;
  bottom:3px;
  position:relative;
  display:inline-block;
  color: #fafafa;
  font-weight:500;
}
.admin h2>span>i::before {
  content:"|";
  left: -15px;
  color: var(--border-color);
  font-size:1.5rem;
  font-weight:400;
  position:absolute;
}
.admin:not(.operation)>a {
  display: block;
  text-align:center;
  min-height: 60px;
  float:left;
  padding:4px 0;
  text-decoration: none;
  border: solid 1px var(--border-color);
  width: 22%;
  margin-right:4%;
  margin-bottom: 1.6%;
  border-radius:10px;
  box-sizing: border-box;
  font-weight:500;
  color: var(--text5)
}
.admin:not(.operation)>a.active {
  color: var(--green2);
  border-color: var(--green);
  background: var(--soft-green);
}
.admin:not(.operation)>a.active.red {
  color: var(--red);
  border-color: var(--red2);
  background: var(--soft-red);
}
.admin:not(.operation)>a:hover {
  color: var(--orange);
  border-color: var(--orange);
}
.admin:not(.operation)>a>b {
  font-style:normal; 
  font-weight:600;
  display:block;
  font-size:1.8rem;
  line-height:1.6rem;
  color: var(--text5);
}
.admin:not(.operation)>a.active>b {
  color: var(--green);
}
.admin:not(.operation)>a.active.red>b {
  color: var(--red);
}
.admin:not(.operation)>a:nth-child(4),
.admin:not(.operation)>a:nth-child(8),
.admin:not(.operation)>a:nth-child(12),
.admin:not(.operation)>a:nth-child(16),
.admin:not(.operation)>a:nth-child(20) {
  margin-right: 0; 
}

.admin.operation>.a_list>a {
  text-decoration:none;
  display:block;
  width:100%;
  float:left;
  border-top: solid 1px var(--border-color);
  padding:10px 0;
}
.admin:not(.operation)>a>i {
  display:block;
  font-style:normal;
  padding:0 4px;
  width:100%;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.admin.operation>.a_list>a:first-of-type {
  border-top: none;
  padding-top:0;
}
.admin.operation>.a_list>a.active {
  color: var(--green); 
}
.admin.operation>.a_list>a.active.red {
  color: var(--red2); 
}
.admin.operation>.a_list>a:visited {
  color: var(--text4); 
}
.admin.operation>.a_list>a:hover,
.admin.operation>.a_list>a.active:hover {
  color: var(--orange); 
}
.admin.operation>.a_list>a>span {
  width:25%;
  float:left;
  text-align:left;
  display:inline-block;
  padding-left:5px;
  border-right: dotted 1px var(--border-color);
  box-sizing:border-box;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

.admin.operation>.a_list>a>span:first-child {
  padding-left:0;
}
.admin.operation>.a_list>a>span:nth-child(2) {
  width:60%;
}
.admin.operation>.a_list>a>span:last-of-type {
  width:15%;
  border-right: none;
  text-align:right;
}

.user-details>div {
  width:47%;
  padding:20px;
  margin:0 0 6% 0;
  border-radius: 15px;
  background: var(--bg2);
  box-sizing: border-box;
  box-shadow: 0 2px 30px var(--shadow-blue);
  float:left;
}
.user-details>div.messages>h2:last-of-type {
  margin-top:0;
  padding-bottom:10px;
  line-height:1.3rem;
  float:left;
  width:100%;
}
.user-details>div:not(.messages)>ul {
  list-style:none;
  display:block;
  padding:0;
  width:100%;
  margin:0;
}
.user-details>div:nth-child(2)>ul {
  height:524px;
}
.user-details>div.messages>ul {
  display:flex;
  padding:0;
  border:none;
  min-height:320px;
  max-height:320px;
}
.user-details>div:nth-child(3),
.user-details>div:nth-child(5),
.user-details>div:nth-child(7),
.user-details>div:nth-child(9),
.user-details>div:nth-child(11) {
  margin-left:6%;
}
.user-details>div:not(.messages)>ul>li {
  width: 100%;
  display:block;
  margin-bottom:3px;
  padding-bottom:2px;
  border-bottom: dotted 1px var(--border-color)
}
.user-details>div:not(.messages)>ul>li:first-of-type {
  border-bottom: none;
  margin-bottom:10px;
  padding-bottom:10px;
  border-bottom: solid 2px var(--orange);
}
.user-details>div:not(.messages)>ul>li:last-of-type {
  margin-bottom:0;
  padding-bottom:0;
  border-bottom: none;
}

.user-details>div:not(.messages)>ul>li>a {
  text-decoration: none;
}
.user-details>div:not(.messages)>ul>li>a>img {
  width: 48px;
  height:auto;
  float:left;
  margin-right:10px;
}
.user-details>div:not(.messages)>ul>li>a:hover>img {
  opacity: 0.6;
}
.user-details>div:not(.messages)>ul>li>a>div:last-child {
  color: var(--orange);
}
.user-details>div:not(.messages)>ul>li>b {
  display:inline-block;
  width:125px;
}

.billing,
.order {
  width:100%;
  margin:20px auto;
  padding-top:5px;
  top: -18px;
  position:relative;
  z-index:2;
}
.billing>article,
.order>article {
  width:100%;
  display:flex;
  border-top: solid 1px var(--border-color);
  padding-top:10px;
  justify-content: space-between;
  vertical-align:middle;
  align-items:center;
  margin-top:35px;
  float:left;
}

.billing>article>small,
.order>article>small {
  padding-left:19px;
  font-size:0.9rem;
  line-height:2rem;
  margin-bottom:0.5rem;
  font-weight:600;
  background:transparent url("lock.svg") no-repeat 0px 7px;
}

.billing>div {
  width:27%;
  min-height:312px;
  border:none;
  position:relative;
  float:left;
  margin-right:5%;
  padding:20px;
  display:inline-block;
  border-radius: 15px;
  background: var(--bg2);
  box-sizing: border-box;
  box-shadow: 0 2px 30px var(--shadow-blue);
}
.billing.firm>div {
  min-height:360px;
}
.billing:not(.firm)>div:first-of-type>h2 {
  display:none;
}
.billing>div:first-of-type {
  width:36%;
}
.billing>div:last-of-type {
  margin-right:0;
}
.billing>div>ul  {
  width:100%;
  list-style:none;
  margin-top:20px;
}
.billing>div>ul>li {
  text-align:right;
  display:flex;
  margin-bottom:14px;
  padding-bottom:5px;
  border-bottom: dotted 1px #bdbdbd;
}
.billing.firm>div>ul>li {
  margin-bottom:20px;
  padding-bottom:9px;
}
.billing>div:last-of-type>ul>li>span {
  font-size:0.950rem;
  padding-top:1px;
}

.billing>div>ul>li:last-child {
  margin:0;
}
.billing>div>ul>li:nth-child(7) {
  border:none;
}
.billing>div>ul>li>b {
  margin-right: auto;
}
.billing>div>ul>li>b>i {
  display:inline-block;
  width:20px;
  text-align:left;
}

.transfer-details>li>b>em {
  display:inline-block;
  font-style:normal;
  border: solid 1px var(--orange);
  color: var(--orange);
  border-radius:5px;
  background: var(--b2);
  padding:0 2px;
  width:41px;
  height:18px;
  line-height:16px;
  box-sizing: border-box;
  float:right;
  cursor:pointer;
  position:relative;
  top:1px;
  font-size:0.550rem;
  font-weight:200;
  text-align:left;
}
.transfer-details>li>b>em:hover {
  border-color: var(--green);
  color: var(--green);
}

.billing div>div,
.billing form>div {
  width:100%;
  position:relative;
  float:left;
}
.billing>div>form>div>div  {
  width:30%;
}
.billing>div>form>div>div:last-child  {
  width:40%;
}
.billing>div>form:first-of-type {
  margin-top:15px;
}
.billing>div:first-of-type>form {
  background:var(--soft-green);
  padding:20px 10px 10px;
  margin-top:0;
  border-radius:0 0 10px 10px;
  float:left;
  width:100%;
}
.billing>div:first-of-type>form:not(.active) {
  display:none;
}
.billing>div:first-of-type>form>div>em {
  position:absolute;
  right:0;
  top:-8px;
  font-style:normal;
  display:inline-block;
  -webkit-transition: all 0.8s ease-in-out;
  transition: all 0.8s ease-in-out;
  user-select:none;
  padding-left:30px;
  background:transparent url("ssl_img.png") no-repeat 0px 0px;
}

.billing>div:first-of-type>form>div>em>span {
  display:inline-block;
  width:39px;
  line-height:1.350rem;
  overflow:hidden;
  font-size:1.5rem;
  color: var(--green2);
  font-weight:600;
  margin-top:1px;
}
.billing>div:first-of-type>form>div>em>span>i {
  display:block;
  width:100%;
  text-align:left;
  font-size:0.6rem;
  font-style:normal;
  margin-top:-5px;
  font-weight:400;
  background:#05cf13 -webkit-gradient(linear,left top,right top,from(#00ff00),to(#00ff00),color-stop(0.2,#05cf13)) 0 0 no-repeat;
  -webkit-background-size:20px;
  color:rgba(255,255,255,0.100);
  -webkit-background-clip:text;
  -webkit-animation-name:shine;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count:infinite;
}
.billing>div>form>div>span:not(.check-container),
.billing>div:first-of-type>form>div>div>span {
  position:absolute;
  top:8px;
  right:0;
  cursor: help;
  display:inline-block;
  z-index:1;
}

.transfer-details>li:last-child>span {
  position:relative;
  top:0px;
  right:0;
  cursor: help;
  display:inline-block;
  z-index:1;
  float:right;
}
.transfer-details>li:last-child>span::after,
.billing>div>form>div>span:not(.check-container)::after,
.billing>div:first-of-type>form>div>div>span::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  max-width: 150px;       
  width: max-content;    
  white-space: normal;   
  word-break: break-word;  
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
}
.transfer-details>li:last-child>span:hover::after,
.billing>div>form>div>span:hover::after,
.billing>div:first-of-type>form>div>div>span:hover::after {
  opacity: 1;
}
.transfer-details {
  list-style:none;
  width:100%;
  font-size:0.9rem;
  margin-top:-10px;
}
.transfer-details>li {
  margin-bottom:10px;
 
}
.transfer-details>li:last-child {
  border-bottom: solid 1px #999;
  padding-bottom:5px;
  margin-bottom:19.5px;
}
.transfer-details img {
  position:relative;
  top:4px;
  user-select:none;
  display: var(--td);
}
.transfer-details u {
  text-decoration:none;
  display: var(--td2);
}
.transfer-details b {
  position:relative;
  display:inline-block;
  width:80px;
  -webkit-touch-callout: none; 
  -webkit-user-select: none;  
  -khtml-user-select: none;    
  -moz-user-select: none;     
  -ms-user-select: none;     
  user-select: none;   
}
.transfer-details span {
  font-size:0.850rem;
}
.transfer-details span.active {
  background: rgba(0,0,0,0.7);
  color: #fafafa;
  padding:2px 3px;
  border-radius:4px;
}
.transfer-details span.active::before {
  content:"✅";
  margin-right:3px;
}
.transfer-details b>button {
  position:relative;
  font-size:0.6rem;
  top:3px;
  float:right;
  cursor:pointer;
}
.billing>div:first-of-type>button {
  float:left;
  background: var(--gray);
  border: solid 1px var(--soft-green);
  border-radius: 10px 10px 0 0;
  padding:10px;
  font-weight:500;
  color: var(--orange);
  position:relative; 
  font-size:1rem;
  line-height:1rem;
  cursor:pointer;
  margin-bottom:0;
  box-sizing:border-box;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  max-width:100%;

}
.billing>div>form>div>button,
.billing>div>form>button {
  width:58%;
  background: var(--green2);
  color: #fafafa;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  border-radius:10px;
  cursor:pointer;
  text-align:center;
  display:block;
  border:none;
  font-size:1.2rem;
  float:left;
}
.billing>div>form>button {
  width:100%;
  background: var(--blue);
  margin-top:17px;
}
.billing p {
  width:100%;
  display:block;
  float:left;
  margin:5px 0 -5px 0;
}
.billing>div>form>div>strong {
  width:42%;
  display:inline-block;
  font-weight:400;
  font-style:normal;
  padding:0;
  margin:0;
  float:left;
  height:40px;
  line-height:40px;
  font-size:0.9rem;
  user-select:none;
}

.billing>div>form>div>strong>span {
  color: var(--blue);
}
.billing>div>form>div>strong>u {
  display:block;
  line-height:0.7rem;
  font-size:0.8rem;
  text-decoration:none;
  color: #888;
  margin-bottom:-10px;
  margin-top:7px;
  letter-spacing:2.8px;
}

.billing>div>form>div>button:hover,
.billing>div>form>button:hover {
  background: var(--orange);
  color: #fff;
}
.billing>div>form>div>button:active,
.billing>div>form>button:active {
  background: var(--green);
  color: #fff;
}
.billing>div>button:hover,
.billing>div>button:active {
  color: var(--green);
}
.billing>div:first-of-type>button:first-of-type {
  text-align:left;
  width:43%;
}
.billing>div:first-of-type>button:last-of-type {
  width:54%;
  float:right;
  text-align:center;
}
.billing>div>button.active {
  color: var(--blue);
  background: var(--soft-green);
  pointer-events:none;
  box-shadow: none;
}
.billing input,
.billing textarea,
.billing select {
  width:100%;
  position:relative;
  padding:6px 0;
  border:none;
  border-bottom: solid 1px var(--blue);
  margin-bottom:20px;
  background:transparent;
  font-size:1rem;
  z-index:1;
  color: var(--text2);
  font-family: "Nunito", sans-serif;
  box-sizing: border-box;
}
.billing label {
  top:5px;
  left:0;
  position:absolute;
  z-index:0;
  user-select:none;
  color: #999;
}
.billing label:after {
  content:":";
}
.billing>div>form>div>div:nth-child(1)>label,
.billing>div>form>div>div:nth-child(2)>label {
  top:-10px;
  font-size:0.8rem;
  color: var(--blue);
}

.billing>div>form>div>div:nth-child(1)>select:focus+label,
.billing>div>div>div>div:nth-child(2)>select:focus+label {
  color: var(--green);
}
.billing textarea {
  resize:none;
  padding-top:10px;
  min-height:95px;
  margin-bottom:0;
}
.billing.firm textarea {
  min-height:85px;
}
.billing select {
  cursor:pointer;
  user-select:none;
  color: var(--text2);

}
.billing select>option {
  color: #666;
}
.billing input:focus,
.billing textarea:focus,
.billing select:focus{
  outline:none;
  border-bottom-color: var(--green);
}
.billing input.is-invalid:focus,
.billing textarea.is-invalid:focus,
.billing select.is-invalid:focus{
  border-bottom-color: var(--red);
}
.billing input:focus+label,
.billing textarea:focus+label,
.billing>div>form>div:nth-child(3)>input:focus+label,
.billing input.active:focus+label,
.billing textarea.active:focus+label,
.billing>div>form>div:nth-child(3)>input.active:focus+label {
  top:-10px;
  font-size:0.8rem;
  transition: 0.4s;
  color: var(--green);
}

.billing input.is-invalid:focus+label,
.billing textarea.is-invalid:focus+label,
.billing>div>form>div:nth-child(3)>input.is-invalid:focus+label,
.billing input.active.is-invalid:focus+label,
.billing textarea.active.is-invalid:focus+label,
.billing>div>form>div:nth-child(3)>input.active.is-invalid:focus+label {
  color: var(--red);
}

.billing input.active+label,
.billing textarea.active+label,
.billing>div>form>div:nth-child(3)>input.active+label {
  top:-10px;
  font-size:0.8rem;
  transition: 0.4s;
  color: var(--blue);
}

.billing input:focus+label:after,
.billing textarea:focus+label:after,
.billing>div>form>div:nth-child(3)>input:focus+label:after,
.billing input.active:focus+label:after,
.billing textarea.active:focus+label:after,
.billing>div>form>div:nth-child(3)>input.active:focus+label:after,
.billing input.active+label:after,
.billing textarea.active+label:after,
.billing>div>div>div:nth-child(3)>input.active+label:after,
.billing>div>div>div>div:nth-child(1)>label:after,
.billing>div>div>div>div:nth-child(2)>label:after {
   content:"";
}

.order>ul {
  list-style:none;
  margin:0px 4.5% 40px 0;
  padding:20px;
  display:inline-block;
  border-radius: 15px;
  background: var(--bg2);
  width:30%;
  border: dashed 2px transparent;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.order>ul.active {
  border-color: var(--orange); 
  box-shadow: 0 2px 6px var(--shadow-orange);
}
.order>ul:nth-child(3),
.order>ul:nth-child(6),
.order>ul:nth-child(9),
.order>ul:nth-child(12),
.order>ul:nth-child(15),
.order>ul:nth-child(18) {
  margin-right:0;
}

.order>ul>li {
  text-align:right;
  margin-bottom:15px;
  border-bottom: dotted 1px #bdbdbd;
  font-size:1rem;
  line-height:1.3rem;
  padding-bottom:10px;
}

.order>ul>li:last-child {
  margin:0;
  border:none;
  padding-bottom:0;
}
.order>ul>li:nth-child(6) {
  border:none;
}

.order>ul>li.order-detail {
  display:none;
}

.order>ul>li>b {
  margin-right: auto;
  float:left;
  padding-right:3px;
}
.order>ul>li>b>i {
  display:inline-block;
  width:20px;
  text-align:left;
}
.order>ul>li>a,
.order>ul>li>button {
  display:block;
  border: solid 1px var(--blue);
  height:40px;
  cursor:pointer;
  font-size:20px;
  line-height:38px;
  border-radius:10px;
  width:100%;
  text-align:center;
  text-decoration:none;
  background: var(--bg);
  color: var(--blue);
  font-weight:500;
  box-sizing: border-box;
}
.order>ul.active>li>a,
.order>ul.active>li>button {
  color: #fff;
  border-color: var(--orange);
  background: var(--orange);
}
.order>ul.active>li>a:hover,
.order>ul>li>a:hover,
.order>ul.active>li>button:hover,
.order>ul>li>button:hover {
  color: #fff;
  border-color: var(--green2);
  background: var(--green2);
}

.order>ul.active>li>a:focus,
.order>ul>li>a:focus,
.order>ul.active>li>button:active,
.order>ul>li>button:active,
.order>ul.active>li>button:focus,
.order>ul>li>button:focus {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
}

footer {
  position:relative;
  width:100%;
  float:left;
  margin-top:50px;
  padding:40px 160px 10px 160px;
  background: #242526;
}
.page-footer {
  margin-top:20px;
  padding:10px 160px 10px 160px;
  background:none;
}
footer>section {
  width:25%;
  float:left;
  display:block;
}
footer>section>h3 {
  font-weight:600;
  color: var(--blue);
  font-size:1.1rem;
  position:relative;
  margin-bottom:20px;
}
footer>section>h3::after {
  content:"";
  overflow:hidden;
  display:block;
  position:absolute;
  bottom:-5px;
  left:0;
  width:60px;
  height:2px;
  background: var(--orange);
}
footer>section>ul {
  list-style: none;
  padding: 0;
}
footer>section:last-of-type>ul {
  width:50%;
  float:left;
}
footer>section>ul>li {
  margin-bottom:8px;
}
footer>section>ul>li>a {
  color:#bdbdbd;
  text-decoration:none;
  user-select:none;
}
footer>section>ul>li>a:hover {
  color: var(--orange);
  text-decoration:none;
}
footer>section>ul>li>a:active,
footer>section>ul>li>a:focus {
  color: var(--green);
}
footer>section>ul>li>a[aria-current="page"] {
  color: var(--blue);
  background:none;
  box-shadow: none;
}
footer>section>h3>i,
footer>section>ul>li>a>i {
  display:inline-block;
  width:20px;
}
footer>section>h3>i {
  color: var(--orange);
}
footer>p {
  float:left;
  width:100%;
  margin-top:20px;
  padding-top:10px;
  border-top: solid 1px var(--border-color);
  text-align: left;
  font-size: 0.875rem;
  color: #777;
}

#bottomBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  position:relative;
  max-width: max-content;
  background: linear-gradient(90deg,rgb(118, 167, 63) 0%,rgb(51, 143, 118) 40%,rgb(55, 141, 167) 50%,rgb(117, 152, 242) 70%,rgb(144, 118, 236) 100%);
  background-size: 200%;
  background-position: left;
  color: #fff;
  font-size: 1.2rem;
  line-height:1.2rem;
  font-weight: 500;
  border: 0;
  padding: 12px 16px;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1),
    inset 0px 2px 2px rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: all 0.4s ease-in;
  position:fixed;
  right:160px;
  bottom:10px;
  animation:animatedgradient 3s ease forwards infinite;
  cursor:pointer;
  z-index:9;
}
#bottomBtn:hover {
  background-position: right;
  animation: gelatine 0.4s 1;
}
.btn-two {
  width:%100;
  position:relative;
  margin: 2em 0;
  display:inline-flex;
  justify-content: center;
}
.btn-two>a {
  padding: 1em 2em;
  font-size: 1.2rem; 
  
  align-items: center;
  text-decoration: none; 
  color: #fafafa; 
  background-color: var(--orange); 
  border-radius: 30px 0 0 30px;
  border: solid 1px rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 3px rgba(50, 50, 50, 0.2),
    inset 0px 4px 4px rgba(255, 255, 255, 0.9);
}
.btn-two>a>i {
   margin-right:0.5rem;
}
.btn-two>a:last-child {
   background-color: var(--green3); 
   border-radius:0 30px 30px 0;
   margin-left:4px;
}
.btn-two>a:hover {
  background: var(--blue);
  color: #fff;
}
.btn-two>a:active {
  background: var(--green);
  color: #fff;
  text-shadow: 0 0 5px #fff;
  box-shadow:
    inset  0 2px 3px rgba(0, 0, 0, 0.4);
}
button {
  user-select: none;
  -webkit-user-select: none; 
  -moz-user-select: none;   
  -ms-user-select: none;   
}
.cursor::after{content:"";border-right:solid 2px;margin-left:2px;opacity:0;animation:blink 0.6s infinite}

.progress-wrap {
  position: fixed;
  bottom: 105px;
  right: 15px;
  width: 38px;
  height: 38px;
  z-index: 999;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.11);
  opacity: 0;
  transform: translateY(50px);
  pointer-events: none;
  transition: 0.4s;
}
.progress-wrap.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: 0.4s;
}
.progress-circle {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
}
.progress-circle circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.progress-background {
  stroke: #eee;
  opacity:0.5;
}
.progress-bar {
  stroke: var(--blue);
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.25s ease-out;
}
.progress-wrap:hover .progress-bar {
  stroke: var(--orange);
  transition: 0.4s;
}
.progress-icon {
  font-size: 20px;
  color: var(--orange);
  pointer-events: none;
  z-index: 1;
  transition: 0.4s;
}
.progress-wrap:hover .progress-icon {
  color: var(--blue);
  transition:0.4s;
}

.theme-button {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  font-size:22px;
  right: 18px;
  bottom: 10px;
  z-index:3;
}
.theme-button:active {
  opacity:0.6;
}


.theme-button::before {
  content: '🌙';
  display: block;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.theme-button.light-mode::before {
  content:"🌙"; 
}
.theme-button.dark-mode::before {
  content: "🌞";
}

.fix-support {
  position: fixed;
  bottom: 50px;
  right: 15px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  z-index: 999;
  cursor: pointer;
  border: none;
  display: block;
  text-align:center;
 
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.11);
  transition: 0.4s;
  color: var(--blue);
  padding-top:3px;
  background: var(--blur-bg2);
  text-decoration:none;
}

.fix-support>i {
   font-size:20px;
   margin:0;
   padding:0;
}
.fix-support>span {
  font-family: "Nunito", sans-serif;
  user-select:none;
  font-size:0.6rem;
  display:inline-block;
  position:relative;
  top:-15px;
  color: var(--orange);
}

.fix-support:hover {
  color: #fff;
  background: var(--orange);
}
.fix-support:hover>span,
.fix-support:focus>span {
  color: #fff;
}
.fix-support:focus {
  color: #fff;
  background:  var(--green);
}

dialog {
  margin:0;
  padding:6px 160px;
  position:fixed;
  color: #fafafa;
  border:none;
  top:55px;
  left:0;
  width:100%;
  z-index: 99999;
  background:none;
  outline:none;
  display:none;
}
dialog.active {
  display:block;
}
dialog>div {
  padding:5px 5px 5px 10px;
  border-radius:8px;
  background: rgba(255, 0, 0, 0.7);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
  border: solid 1px red;
   backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  -moz-backdrop-filter:blur(3px);
  -ms-backdrop-filter:blur(3px);
  font-weight:500;
}
dialog.active>div {
  animation:slide-in-blurred-top 1.5s cubic-bezier(.23,1.000,.32,1.000) both;
}

dialog>div>p {
   display:inline-block;
   user-select:none;
}
dialog.active>div>p {
   animation:blink 0.2s 9;
   animation-delay:1.5s;
}
dialog>div>p>i {
  display:inline-block;
}
dialog.active>div>p>i {
  animation: swing 1s ease-in-out infinite; 
}
dialog>div>p>span {
  font-weight:700;
  display:inline-block;
}
dialog.active>div>p>span {
  animation: heartbeat 1.5s ease-in-out infinite;
  animation-delay: 4s
}
dialog>div>a {
  float:right;
  height:25px;
  padding:0 10px;
  border:none;
  border-radius:6px;
  color: #fafafa;
  text-decoration:none;
  background: var(--blue);
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1),
    inset 0px 2px 2px rgba(255, 255, 255, 0.5);
}
dialog.active>div>a {
  animation:shake-horizontal 0.9s cubic-bezier(.455,.03,.515,.955) 2 both;
  animation-delay:3s
}
dialog>div>a:hover {
  background: var(--orange);
  color: #fff;
  animation: gelatine 0.4s 1;
}
dialog>div>a:active,
dialog>div>a:focus {
  background:var(--green);
}

.fa-facebook-messenger{color:#0084FF}label>.fa-instagram,summary>.fa-instagram{position:relative;top:1px;font-size:17px;background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);-webkit-background-clip:text;-webkit-text-fill-color:transparent}label>.fa-square-facebook,summary>.fa-square-facebook{color:#1877f2}label>.fa-tiktok,summary>.fa-tiktok{color:var(--text);font-size:16px;text-shadow:1px -1px 0 #fe2C55,-1px 1px 0 #25f4ee}label>.fa-linkedin,summary>.fa-linkedin{color:#0077b5}label>.fa-pinterest,summary>.fa-pinterest{color:#e60023}label>.fa-youtube,summary>.fa-youtube{color:#ff0000;font-size:16px}.fa-telegram{color:#0088cc}.fa-github{color:#181717}.fa-spotify{color:#1DB954}.fa-reddit-alien{color:#FF4500}.fa-twitch{color:#9146FF}.fa-medium{color:#00ab6c;font-size:15px}.fa-blogger{color:#f57d00}.fa-soundcloud{color:#FF5500;font-size:15px}.fa-vimeo{color:#1ab7ea}.fa-discord{color:#7289da;font-size:15px}.fa-snapchat{color:#FFFC00;width:17px;height:17px;background:#444;position:relative;font-size:13px;padding-top:2px;padding-left:2px;display:inline-block;border-radius:4px}.fa-behance{color:#1769ff;font-size:16px}.fa-dribble{color:#ea4c89;}.fa-google{color:#4285F4;font-size:15px}.fa-stack-overflow{color:#fe7a15}.s-sahibinden{position:relative;top:-1px;width:17px;height:17px;background-color:#ffeb01;color:#000;font-weight:600;font-size:14px;font-family:Arial,sans-serif;display:inline-flex;justify-content:center;align-items:center;border-radius:4px;font-style:normal}.s-sahibinden::before{content:"S"}.fa-phone-square{color:#229746}label>.fa-location-dot{color:#ea4335}.s-referans{content:url('favicon.svg');display:inline-block;width:17px;height:17px;position:relative;top:3px}.s-canva{content:url('canva-icon.svg');display:inline-block;width:17px;height:17px;position:relative;top:3px}.s-capcut{content:url('capcut-icon.svg');display:inline-block;width:17px;position:relative;top:3px}

.menu-tab{font-style:normal} 

.menu-tab::before{content:"☰";color:var(--orange);margin-right:3px} 


.topButtons {
  margin-top:-12px;
  margin-bottom:10px;
  padding-bottom:8px;
  display:flex;
  justify-content: space-between;
  width:100%;
  border-bottom: solid 1px var(--shadow-blue)
}
.topButtons>form {
  height:24px;
  padding:0;
  display:flex;
  min-width:40%;
  background: var(--bg2);
  border: solid 1px var(--border-color);
  border-radius:6px;
}
.topButtons>form:hover {
  border: solid 1px var(--blue);
}
.topButtons>form>input {
  height:100%;
  width:100%;
  padding:0 5px;
  background: none;
  border-radius: 6px 0 0 6px;
  outline:none;
  color: var(--text);
  border:none;
}
.topButtons>form>button {
  padding:0 6px;
  border:none;
  cursor:pointer;
  color: var(--text2);
  background: var(--gray);
  border-left: solid 1px var(--border-color);
  border-radius: 0 5px 5px 0;
  outline:none;
}

.topButtons>form>button:hover {
   background: var(--blue);
   color: #fafafa;
   border-left-color: var(--blue);
}
.topButtons>form>button:active {
  background: var(--green);
  border-left-color: var(--green);
  color: #fafafa;
}
.topButtons>label {
  font-weight:500;
  font-size:0.9rem;
  position:relative;
  display:flex;
  justif-content: center;
  align-items:center;
  cursor: pointer;
}
.topButtons>label:hover {
  color: var(--blue)
}
.topButtons>label>input {
  margin-right:5px;
}


.topButtons>button {
  display:inline-block;
  background: none;
  color: var(--text2);
  padding:0 4px;
  font-weight:500;
  border-radius:6px;
  height:24px;
  line-height:18px;
  font-size:0.9rem;
  box-sizing:border-box;
  cursor:pointer;
  border: solid 1px var(--border-color);
}
.topButtons>button:hover {
  background: var(--red2);
  color: #fafafa;
  border-color: var(--red);
}
.topButtons>button:focus {
  background: var(--soft-green);
  color: var(--green);
  border-color: var(--green2);
}
.pagination-container {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 10px;
  border: solid 1px var(--shadow-blue);
  border-radius: 10px;
  gap: 10px;
  float:left;
  width:100%;
}
.pagination-container a {
  text-decoration: none;
  color: var(--blue);
  background-color: var(--bg2); 
  padding: 10px 15px;
  margin: 2px; 
  border: 1px solid var(--text5);
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  font-weight: 500;
  min-width: 40px; 
  text-align: center;
}
.pagination-container a:visited {
  background-color: var(--bg); 
  color: var(--text4);
  border-color: var(--border-color);
  pointer-events: none;
}
.pagination-container a:hover,
.pagination-container a:focus {
  border-color: var(--shadow-orange);
  background: var(--soft-green);
  color: var(--orange); 
}

.pagination-container a.current-page {
  background-color: var(--blue); 
  color: #fafafa;
  border-color: var(--blue);
  pointer-events: none;
}
.pagination-container a:first-child,
.pagination-container a:last-child {
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 6px;
}


@media (max-width: 1350px) {
  .transfer-details span {
    font-size:0.8rem;
  }
  .billing>form:last-of-type>ul>li>span {
    font-size:0.9rem;
	padding-top:2px;
  }
}
@media (max-width: 1340px) {
  .contact.single-form>figure>img {
    width:100%;
	height:100%;
  } 
  .transfer-details span {
    font-size:0.780rem;
  }
  .billing>div:last-of-type>ul>li>span {
    font-size:0.820rem;
	padding-top:3px;
  }
}
@media (max-width: 1280px) {
 .billing>div {
    width:26.5%;
    margin-right:3%;
  }
  .billing>div:first-of-type {
    width:39%;
  }
  .billing>div:last-of-type {
    width:28.5%;
  }
  .transfer-details span {
    font-size:0.8rem;
  }
  .billing>div:last-of-type>ul>li>span {
    font-size:0.8rem;
	padding-top:4px;
  }
}
@media (max-width: 1224px) {
  header {
    padding: 50px 20px 60px; 
  }
  header>figure {
	padding:0 20px;
	height:35px;
  }
  header>figure>img,
  header>figure>a>img {
    width:31px;
    height:31px;
    margin:2px 3px 0 0;
  }
  body.form.account header>figure>img,
  body.form.account header>figure>a>img {
    width:30px;
	height:30px;
    margin:2px 4px 0 0;
  }
  body>nav {
    padding: 0 20px 20px;
  }
  header>figure>figcaption,
  header>figure>a>figcaption {
	font-size:0.9rem;
	padding-top: 0;
	margin-top:-1px;
  }
  header>figure>figcaption>strong,
  header>figure>a>figcaption>strong {
	font-size:0.730rem;
	line-height:0.830rem;
	margin-top:-2px;
  }
  header>a {
    top:3px;
	font-size:1rem;
    right:65px;
    padding: 2px 10px 0 10px;
  }
  header>a.cart-btn {
    right:140px;
	padding:2px 5px 0 5px;
  }
  header>a>sup {
    top: -3px;
    width:16px;
    height:16px;
  }
 
  header>a>i {
    font-size: 0.9rem;
  }
  header>a.cart-btn>i {
    font-size:1.1rem;
	position:relative;
	top:2px;
  }
  header>button {
    right:20px;
	top:3px;
	font-size:1.8rem;
  }
  header>button.webSite {
    font-size: 1rem;
    line-height:1.5rem;
    padding: 3px 10px 1px 10px;
	right:60px;
  }
  h1 {
    font-size: 2rem;
    letter-spacing: 1.1px;
  }
  aside>h2 {
    height:34px;
	line-height:34px;
  }
  aside>button {
    top:4px;
	width:24px;
	height:24px;
	line-height:24px;
  }
  aside>nav {
    height: calc(100vh - 34px);
    padding-bottom:120px;
  }
  main {
    padding:0 20px;
  }
  .contact.simple-form {
    width:65%;
  }
  .contact.single-form.success-form {
    min-height:inherit;
  }
  .single-form .success-container {
    margin-top:40px;
	background: none;
	min-height:inherit;
  }
  .billing>div {
    width:27%;
    margin-right:5%;
  }
  .billing>div:first-of-type {
    width:36%;
  }
  .billing>div:last-of-type {
    width:27%;
  }
  .transfer-details span {
    font-size:0.790rem;
  }
  .billing>div:last-of-type>ul>li>span {
    font-size:0.850rem;
  }
  footer {
    padding:20px 20px 10px 20px;
  }
  .page-footer {
    padding:5px 20px 5px 20px;
  }
  .progress-wrap {
    right:6px;
  }
  .theme-button {
    right:9px;
  }
  .fix-support {
    right:5px;
  }
  #bottomDemoBtn {
    left: 20px;
  }
  #bottomBtn {
    right: 20px;
  }
  .lightbox-close {
    top:10px;
    right: 10px;
  }
  dialog {
    padding:6px 20px;
	top:43px;
  }
  .modal-content {
    width: 80%;
  }
}
@media (max-width: 1010px) {
  .billing>div,
  .billing>div:first-of-type {
    width:45%;
    margin-right:10%
  }
  .billing>div:nth-child(2) {
    margin-right:0;
  }
  .billing>div:last-of-type {
    width:100%;
	margin-top:70px;
  }
  .transfer-details span {
    font-size:0.850rem;
  }
  .billing>div:last-of-type>ul>li>span {
    font-size:1rem;
	padding-top:0;
  }
  .order>ul>li {
    font-size:0.950rem;
  }
}
@media (max-width: 991px) {
  footer>section {
    width:33.333%;
  }
  footer>section:last-of-type {
    width:100%;
	margin-top:30px;
  }
  footer>section:last-of-type>ul:first-of-type {
	width:45%;
  }
  footer>section:last-of-type>ul:last-of-type {
	width:55%;
  }
  footer>section:last-of-type>ul>li {
    float:inherit;
	width:25%;
	text-align:center;
  }
  footer>section:last-of-type>ul:first-of-type>li {
	width:30%;
  }
  footer>section:last-of-type>ul:first-of-type>li:first-child,
  footer>section:last-of-type>ul:first-of-type>li:last-child {
	width:20%;
  }
  footer>section:last-of-type>ul>li:first-child {
	text-align:left;
  }
  footer>section:last-of-type>ul:last-of-type>li:first-child,
  footer>section:last-of-type>ul>li:last-child {
	text-align:right;
  }
  .contact {
    width:45%;
  }
  .contact:nth-child(2) {
    width:45%;
    margin:30px 0 80px 10%;
  }
  .contact:nth-child(3) {
    width: 100%;
  }
  .contact.simple-form {
    width:80%;
  }
  .contact:nth-child(3)>iframe {
	height:200px;
  }
  .contact.single-form>h2 {
    width:100%;
  }
  .contact.single-form:not(.success-form)>figure {
    margin-top:30px;
  }
  .faq>h2 {
    width:100%;
  }
  .faq>div:first-of-type {
    width:100%;
  }
  .faq>figure {
    width:100%;
    margin-top:40px;
    text-align:center;
  }
  .billing>article>small,
  .order>article>small {
    font-size:0.850rem;
  }
  .order>ul {
    width:47%;
  }
  
  .order>ul:nth-child(3),
  .order>ul:nth-child(6),
  .order>ul:nth-child(9),
  .order>ul:nth-child(12),
  .order>ul:nth-child(15),
  .order>ul:nth-child(18) {
    margin-right:4.5%;
  }
  .order>ul:nth-child(2),
  .order>ul:nth-child(4),
  .order>ul:nth-child(6),
  .order>ul:nth-child(8),
  .order>ul:nth-child(10),
  .order>ul:nth-child(12) {
    margin-right:0;
	float:right;
  }
}
@media (max-width: 865px) {
  header {
    padding: 50px 20px 50px; 
  }
  header::after {
    height: 62px;
  }
  header>figure {
	padding:0 5px;
  }
  header>a {
    top:3px;
	font-size:1rem;
    right:50px;
    padding: 2px 10px 0 10px;
  }
  header>a>i {
    font-size: 0.9rem;
  }
  header>button {
    right:5px;
  }
  header>button.webSite {
    font-size: 1rem;
    line-height:1.5rem;
    padding: 3px 10px 1px 10px;
	right:40px;
  }
  .form.new section>h2 {
    width:100%;
    transition: 0.4s;
  }
  .form section>div {
    padding: 0 20px 20px 20px;
	margin-top:20px;
	border-radius: 20px;
	background: var(--bg2);
    box-shadow: 0 0 30px var(--shadow-blue);
	position:relative;
	float:left;
	width:100%;
	transition: 0.4s;
  }
  form.new section>div {
    padding-bottom:0;
  }
  .form section>div>ul {
    padding: 0;
	margin-top:15px;
	border-radius: 0;
	background: none;
    box-shadow:none;
	float:inherit;
	width:100%;
	transition: 0.4s;
  }
  .form section>div>ul:last-of-type {
	margin-left:0;
  }
  .form.new section>div>ul:last-of-type {
	margin-bottom:0;
  }
  section.page>div>a {
    width:100%;
	margin:0 0 30px 0;
  }
  .messages>ul {
    max-height:500px;
  }
  .billing>article,
  .order>article {
    display:block;
  }
  .billing>article>small,
  .order>article>small {
    font-size:1rem;
	display:block; 
  }
  .billing>div,
  .billing>div:first-of-type {
    width:100%;
    margin-right:0;
	min-height:inherit;
  }
  .billing>div:nth-child(2) {
    margin-top:60px;
  }
  .billing>div:last-of-type {
	margin:60px 0 30px;
  }
  .billing:not(.firm)>div:first-of-type>h2 {
    display:block;
  }
  .billing>div>ul>li,
  .billing.firm>div>ul>li {
    margin-bottom:10px;
    padding-bottom:0;
  }
  .billing>div>ul>li:last-child {
    border-bottom:none;
	margin-bottom:0;
  }
  .billing.firm>div,
  .billing textarea,
  .billing.firm textarea {
    min-height:inherit;
  }
  .billing select,
  .billing>div>div>div>input:last-child  {
    margin-bottom:0;
  }
  .order>ul>li {
    font-size:0.9rem;
  }
  footer>section:last-of-type>ul:first-of-type,
  footer>section:last-of-type>ul:last-of-type {
	width:50%;
  }
  footer>section:last-of-type>ul>li,
  footer>section:last-of-type>ul:first-of-type>li,
  footer>section:last-of-type>ul:first-of-type>li:first-child,
  footer>section:last-of-type>ul:first-of-type>li:last-child,
  footer>section:last-of-type>ul>li:first-child,
  footer>section:last-of-type>ul:last-of-type>li:first-child,
  footer>section:last-of-type>ul>li:last-child {
    float:inherit;
	width:inherit;
	text-align:left;
  } 
  .invoice {
    padding:15px 15px 30px 15px; 
  }
}
@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  aside>nav {
    width: 280px;
  }
  .order>ul>li {
    font-size:0.850rem;
  }
  .admin:not(.operation)>a {
    width: 47%;
    margin-right:6%;
    margin-bottom: 4%;
  }
  .admin:not(.operation)>a:nth-child(2),
  .admin:not(.operation)>a:nth-child(6),
  .admin:not(.operation)>a:nth-child(10),
  .admin:not(.operation)>a:nth-child(14),
  .admin:not(.operation)>a:nth-child(18) {
    margin-right:0;
  }
  footer>section,
  footer>section:last-of-type {
	width:100%;
	margin-top:50px;
  }
  footer>section:first-of-type {
	margin-top:0;
  }
  footer>section>h3::after {
    width:100%;
    height:1px;
  }
  footer>section:last-of-type>ul:first-of-type,
  footer>section:last-of-type>ul:last-of-type {
	width:100%;
  }
  footer>section>ul>li,
  footer>section:last-of-type>ul>li,
  footer>section:last-of-type>ul:first-of-type>li,
  footer>section:last-of-type>ul:first-of-type>li:first-child,
  footer>section:last-of-type>ul:first-of-type>li:last-child,
  footer>section:last-of-type>ul>li:first-child,
  footer>section:last-of-type>ul:last-of-type>li:first-child,
  footer>section:last-of-type>ul>li:last-child {
    float:left;
	width:50%;
	max-width:50%;
	text-align:left;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	margin-bottom:15px;
	font-size:0.9rem;
  }
  .contact {
    width:100%;
	margin-bottom:40px;
	min-height:inherit;
  }
  .contact:nth-child(2) {
    width:100%;
    margin:40px 0 50px 0;
	padding-bottom:20px;
  }
  .contact.simple-form {
    width:100%;
  }
  .contact.single-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
  }
  .contact.single-form>form {
    width:100%;
	float:none;
  }
  .contact.single-form>h2 {
	margin-top:50px;
  }
  .contact.single-form>figure {
    width:100%;
	order: -1; 
	float:none;
	margin-top:0; 
  }
  .contact textarea {
    min-height: 150px;
  }
  .contact button {
    height:45px;
	line-height:1.3rem;
  }
  .single-form .success-container {
    margin-top:-20px;
	background: rgba(248,254,248,1);
	min-height:335px;
  }
  .btn-two {
    display:block;
	padding-bottom:80px;
  }
  .btn-two>a {
    padding: 1em 0;
	width:49%;
	float:left;
    display:inline-flex;
    justify-content: center;
  }
  .btn-two>a:last-child {
    margin-left:2%;
  }
  .invoice>p>b {
    display:inline;
    width:inherit;
  }
  .modal-content>div {
    max-height:65vh;
  }
}
@media (max-width: 600px) {
  section.page>h2,
  section.page>p,
  section.page>div {
    width:100%;
  }
  section.page>div {
    margin:20px 0 30px 0;
  }
  section.page>div>a {
    width:47%;
  }
  section.page>div>a:nth-child(2) {
    margin:0 0 0 6%;
  } 
  .faq>figure>img {
    width:90%;
	height:90%;
  } 
  .order>ul {
    width:100%;
	margin-bottom:70px;
  }
  .order>ul:nth-child(3),
  .order>ul:nth-child(6),
  .order>ul:nth-child(9),
  .order>ul:nth-child(12),
  .order>ul:nth-child(15),
  .order>ul:nth-child(18) {
    margin-right:0;
  }
  .order>ul>li {
    font-size:1rem;
  }
  .modal-content {
    width: 90%;
    padding: 20px;
  }
  .pagination-container {
    padding: 5px 5px;
    border-radius: 4px;
    gap: 3px;
  }
  .pagination-container a {
    padding: 8px 10px; 
    font-size: 13px;
    min-width: 30px;
    flex-grow: 1; 
   }
   .pagination-container a:first-child,
   .pagination-container a:last-child {
     min-width: 50px;
   }
}
@media (max-width: 539px) {
  section>h2:first-of-type { font-size:1.250rem; padding-bottom:5px;}
  .open-form .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  } 
  .btn-two>a {
	font-size:1rem;
  }
}


@media screen and (max-width: 480px) {
  table, thead, tbody, th, td, tr {
    display: block;
    width: 100%;
  }
  thead tr {
    display: none; 
  }
  tbody tr {
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background-color: white;
    padding: 10px;
  }
  tbody td {
    padding-left: 50%;
    position: relative;
    text-align: left;
    border: none;
    border-bottom: 1px solid #ddd;
  }
  tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    font-weight: 700;
    color: #004aad;
    white-space: nowrap;
  }
  tbody td:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 450px) {
  .billing>article>small,
  .order>article>small {
    font-size:1rem;
	display:block; 
  }
  .billing>article>img,
  .order>article>img {
    width: 100%;
	height:auto;
  }
}
@media (max-width: 429px) {
  .billing>article>small,
  .order>article>small {
    font-size:0.9rem;
	display:block; 
  }
}
@media (max-width: 410px) {
  h1 {
    font-size: 1.350rem;
  }
  section>h2:first-of-type { font-size:1.1rem; padding-bottom:5px;}
  .form section>div>ul>li>form>div>fieldset>label>span:first-child {
    display:none;
  }
  .form section>div>ul>li>form>div>fieldset>label>span:last-child {
    display:inline;
  }
  .billing>article>small,
  .order>article>small {
    font-size:0.8rem; 
  }
  .transfer-details span {
    font-size:0.8rem;
  }
}
@media (max-width: 389px) {
  h1 {
    font-size: 1.3rem;
  }
  #bottomDemoBtn>span {
    display:none;
  }
  .btn-two>a {
	font-size:0.950rem;
	text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
	display:block;
	padding:1rem 0.8rem;
	text-align:center;
  }
  .btn-two>a>i {
	margin-right:0.3rem;
  }
  .transfer-details>li:nth-child(1) b,
  .transfer-details>li:nth-child(2) b {
    display:inherit;
	width:inherit;
  }
  .transfer-details>li>b>span {
    display:none;
  }
  body>nav>ul.action-page>li::after {
	margin:0 6px;
  }
  body>nav>ul.action-page>li {
	font-size:1rem;
  }
}
@media (max-width: 375px) {
  .modal-content>div>h4 {
    font-size:0.9rem;
  }
  .modal-content>div {
    font-size:0.9rem;
	line-height:1.3rem;
  }
  .modal-content>div>small.date>b {
    width:105px;
  }
}
@media (max-width: 370px) {
  h1 {
    font-size: 1.250rem;
  }
  body>nav>ul.action-page>li::after {
	margin:0 4px;
  }
  .billing>article>small,
  .order>article>small {
    font-size:0.8rem; 
  }
}
@media (max-width: 360px) {
  .form section>div>ul>li>form>div>fieldset>input:nth-child(1) {
    margin:0 3px; 
  }
  .form section>div>ul>li>form>div>fieldset>label {
    font-size:0.9rem;
  }
  .gallery>figure {
    width: 100%;
  }
  .btn-two>a {
	font-size:0.9rem;
  }
  .btn-two>a>i {
	margin-right:0.1rem;
  }
  .transfer-details span {
    font-size:0.8rem;
  }
}
@media (max-width: 355px) {
  body>nav>ul.action-page>li::after {
	margin:0 6px;
  }
  body>nav>ul.action-page>li {
	font-size:0.930rem;
  }
  .form section>div>ul>li>form>div>small>a:last-of-type {
    font-size: 0.7rem;
	margin-top:2px;
  }
  .form section>div>ul>li>form>div>fieldset>label {
    font-size:0.7rem;
  }
  .btn-two>a {
	font-size:0.850rem;
	padding:1rem 1rem;
	line-height:0.9rem;
  }
  .billing>article>small,
  .order>article>small {
    font-size:0.750rem; 
  }
  .transfer-details span {
    font-size:0.750rem;
  }
}
@-webkit-keyframes shine{0%{background-position:top left}50%{background-position:top right}}
@keyframes swing {0%{transform: rotate(0deg)}25%{transform:rotate(-15deg)}50%{transform:rotate(0deg)}75%{transform:rotate(15deg)}100%{transform:rotate(0deg)}}
@-webkit-keyframes pulsate{0%{-webkit-transform:scale(0.1, 0.1);opacity:0.0}50%{opacity:1.0}100%{-webkit-transform:scale(1.2, 1.2);opacity:0.0}}
@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}10%{-webkit-transform:scale(.91);transform:scale(.91);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}17%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}33%{-webkit-transform:scale(.87);transform:scale(.87);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}45%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}
@keyframes blink{0%{opacity:0}40%{opacity:0}50%{opacity:1}90%{opacity:1}100%{opacity:0}} 
@keyframes fadeIn{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@-webkit-keyframes tilt-in-top-1{0%{-webkit-transform:rotateY(30deg) translateY(-300px) skewY(-30deg);transform:rotateY(30deg) translateY(-300px) skewY(-30deg);opacity:0}100%{-webkit-transform:rotateY(0deg) translateY(0) skewY(0deg);transform:rotateY(0deg) translateY(0) skewY(0deg);opacity:1}}@keyframes tilt-in-top-1{0%{-webkit-transform:rotateY(30deg) translateY(-300px) skewY(-30deg);transform:rotateY(30deg) translateY(-300px) skewY(-30deg);opacity:0}100%{-webkit-transform:rotateY(0deg) translateY(0) skewY(0deg);transform:rotateY(0deg) translateY(0) skewY(0deg);opacity:1}}
@keyframes bounceDownAnim{0%{opacity:0;transform:translateY(-50px)}60%{opacity:1;transform:translateY(20px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes bounce-then-breathe{0%,5%,10%,15%{transform:translateY(0)}2.5%,7.5%,12.5%{transform:translateY(-15px)}20%,40%,60%,80%,100%{transform:translateY(0)}30%,50%,70%,90%{transform: translateY(-5px)}}
@keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(calc(-250px*7))}}
@keyframes animatedgradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes gelatine{0%,100%{transform:scale(1, 1)}25%{transform:scale(0.9, 1.1)}50%{transform: scale(1.1, 0.9)}75%{transform:scale(0.95, 1.05)}}
@keyframes slide-in-blurred-bottom{0%{-webkit-transform:translateY(1000px) scaleY(2.5) scaleX(.2);transform:translateY(1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}
@keyframes shake-to-alert{0%,20%,40%,60%,80%,100%{transform: rotate(0) translateY(-5px)}10%,25%,35%,50%,65%{transform:rotate(5deg) translateY(-5px)}15%,30%,45%,55%,70%{transform:rotate(-5deg) translateY(-5px)}}
@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes shake-horizontal{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%{-webkit-transform:translateX(10px);transform:translateX(10px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:translateX(-8px);transform:translateX(-8px)}}
@-webkit-keyframes bounce-top2{0%{filter: brightness(1.02);-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{filter: brightness(1.04);opacity:1}40%{filter: brightness(1.06);-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{filter: brightness(1.08);-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{filter: brightness(1.1);-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{filter: brightness(1.2);-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{filter: brightness(1.3);-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}@keyframes bounce-top2{0%{filter: brightness(1.02);-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{filter: brightness(1.04);opacity:1}40%{filter: brightness(1.06);-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{filter: brightness(1.08);-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{filter: brightness(1.1);-webkit-transform:translateY(-6px);transform:translateY(-6px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{filter: brightness(1.2);-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{filter: brightness(1.3);-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}
.slide-out-top{-webkit-animation:slide-out-top .5s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-top .5s cubic-bezier(.55,.085,.68,.53) both}
@-webkit-keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}@keyframes slide-out-top{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}}
.slide-in-blurred-top{-webkit-animation:slide-in-blurred-top 2s cubic-bezier(.23,1.000,.32,1.000) both;animation:slide-in-blurred-top 2s cubic-bezier(.23,1.000,.32,1.000) both}
@-webkit-keyframes slide-in-blurred-top{0%{-webkit-transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform:translateY(-1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes slide-in-blurred-top{0%{-webkit-transform:translateY(-1000px) scaleY(2.5) scaleX(.2);transform:translateY(-1000px) scaleY(2.5) scaleX(.2);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-filter:blur(40px);filter:blur(40px);opacity:0}100%{-webkit-transform:translateY(0) scaleY(1) scaleX(1);transform:translateY(0) scaleY(1) scaleX(1);-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-filter:blur(0);filter:blur(0);opacity:1}}
.input{display:none !important;}