@font-face {
   font-family: "BankGothic Md BT";
   src: url("../css/fonts/BG1.ttf");
}

@font-face {
   font-family: "Tw Cen MT";
   src: url("../css/fonts/TCM.TTF");
}

:root {
   /* --d0: #000;
   --d1: #141923;
   --d2: #1e2533;
   --d4: #434c5e;
   --d5: #7b87a1; */
   /* --hue: 215;
   --sat: 20%;
   --d0: hsl(var(--hue), var(--sat), 8%);
   --d1: hsl(var(--hue), var(--sat), 10%);
   --d2: hsl(var(--hue), var(--sat), 15%);
   --d3: hsl(var(--hue), var(--sat), 21%);
   --d4: hsl(var(--hue), var(--sat), 27%);
   --d5: hsl(var(--hue), var(--sat), 30%);
   --d6: hsl(var(--hue), var(--sat), 38%);
   --d7: hsl(var(--hue), var(--sat), 47%);
   --d8: hsl(var(--hue), var(--sat), 53%);
   --d9: hsl(var(--hue), var(--sat), 60%);
   --d10: hsl(var(--hue), var(--sat), 75%); */

   --background-radial: radial-gradient(farthest-corner at 40px 40px, #171d28, #0f131b 100%);
   --background: #323740;

   --greenblack: #0f1010;

   --buttonA: #384052;
   /* --buttonA: #ffae00; */
   --buttonAHover: #495165;
   --buttonAText: #c2c0bc;
   /* --buttonAText: #000 */
   --red: #bb4949;
   --blue: #64addb;


   --blue: #3eb0ef;
   --green: #a4d037;
   --purple: #ad26b4;
   --yellow: #fecd35;
   --red: #f05230;
   --darkgrey: #15171a;
   --midgrey: #738a94;
   --lightgrey: #c5d2d9;
   --whitegrey: #e5eff5;
   --pink: #fa3a57;
   --brown: #a3821a;
   --darkmode: #1a1c20;
}

* {
   margin: 0;
   padding: 0;
   text-decoration: none;
}

html {
   height: 100%;
   scroll-behavior: smooth;
}

body {
   background-color: #000;
   text-align: center;
   padding: 0;
   margin: 0;
   top: 0px;
   position: relative;
   /* bottom: 700px; */
   font-style: normal;
   font-family: 'Exo 2';
   box-sizing: border-box;
   min-height: 100%;
   position: relative;
   padding-top: 60px;
   /* height: 3.1vw; */
}

/*SECTION 01*/
.section-01 {
   background-image: url("../imgs/mo_tiger.png");
   width: 100%;
   height: 900px;
   background-size: cover;
   background-repeat: no-repeat;
   text-align: center;
   min-width: 850px;
   /* margin-top: 70px; */
   animation: animate 1.5s 1;
}

.section-01-column {
   padding: 10px;
   display: inline-block;
   /* background: red; */
   height: 100%;
   width: 50%;
   box-sizing: border-box;
   align-content: center;
   align-items: center;
}

.section-01-row-01 {
   margin-top: 20%;
   width: 100%;
   height: 300px;
   /* background: #a7a7a7; */
   overflow: hidden;
}

.section-01-left {
   /* background: blue; */
   float: left;
   margin-top: 10%;
   width: 50%;
   height: auto;
   /* min-width: 465px; */
   text-align: left;
}

.section-01-right {
   float: right;
   width: 50%;
   height: 500px;
}

.section-01-left h5 {
   text-align: left;
   font-size: 2em;
   font-family: BankGothic Md BT;
   letter-spacing: 0.2em;
   color: #ffae00;
   display: block;
   animation: fade-in-bottom 1s 1;
   margin-bottom: -40px;
}

.section-01-left h1 {
   display: block;
   margin-top: -25px;
   text-align: left;
   font-size: 8.5em;
   color: white;
   font-family: BankGothic Md BT;
   letter-spacing: -0.1em;
   text-shadow: 0 0px 45px rgb(0, 0, 0);
   margin-left: -0.1em;
}

.userSubmit {
   background-color: white;
}

.button {
   background-color: #080808;
   color: #ffae00;
   outline: none;
   border: none;
   font-size: 0.9em;
   font-family: inherit;
   background-repeat: no-repeat;
   box-shadow: 0 1em 2em 0 #080808;
   transition: 0.2s;
}

.button-orange {
   outline: none;
   border: none;
   background-color: #ffae00;
   width: 200px;
   height: 2.4em;
   display: block;
   border-radius: 5px;
   /* margin-left: 110px; */
   margin-top: 10px;
   font-weight: 900;
   font-size: 1em;
   /* letter-spacing: -0.1em; */
   display: inline-block;
   font-family: 'Titillium Web';
}

.button-trial {
   outline: none;
   border: none;
   /* background-color: #991414; */
   background-color: var(--d2);
   width: 200px;
   height: 2.4em;
   display: block;
   border-radius: 5px;
   /* margin-left: 110px; */
   margin-top: 10px;
   font-weight: 100;
   font-size: 1em;
   /* color: #ffffffd7; */
   color: #ffae00;
   letter-spacing: 0.05em;
   display: inline-block;
   font-family: 'Titillium Web';
   margin-left: 20px;
   border: 1px solid #ffae00;
   box-shadow: 0 0 10px 0 black;
}


.button-trial:hover {
   cursor: pointer;
   background-color: var(--d4);
   /* color: #ffae00; */
}


.button-text {
   font-size: 0.9em;
   font-family: inherit;
   letter-spacing: 0em;
}

.button-orange:hover {
   cursor: pointer;
   background-color: #ffdc90;
   /* color: #ffae00; */
}

.btn-normal {
   outline: none;
   border: none;
   background-color: #080808;
   background-color: var(--buttonA);
   font-family: BankGothic Md Bt;
   font-size: 1em;
   color: var(--buttonAText);
   /* border: 1px solid #ffae0083; */
   background-repeat: no-repeat;
   border-radius: 3px;
   /* box-shadow: 0 0.5rem 1rem #080808; */
   /* transition: 0.05s; */
   width: auto;
   /* height: 2em; */
   padding: 0.5vw 1rem;
   cursor: pointer;
   margin: 10px;
   margin-left: 0;
   float: left;
}

.btn-normal:hover {
   /* border: 1px solid #ffae00; */
   background-color: var(--buttonAHover);
   color: #fff;
   /* width: 65%; */
}

.btn-normal:active {
   opacity: 0.3;
}

.btn-orange {
   background-color: #080808;
   /* background-color: #181818; */
   display: inline-block;
   color: #cecece;
   outline: none;
   border: none;
   font-size: 1em;
   background-repeat: no-repeat;
   border-radius: 5px;
   /* box-shadow: 0 0.5rem 1rem #080808; */
   margin-top: 1em;
   width: auto;
   min-width: 200px;
   height: 2.4em;
   cursor: pointer;
   border: 1px solid #ffae0083;
   font-family: BankGothic Md Bt;
   padding: 0 1rem;
   margin: 0 1rem;
   box-sizing: border-box;
   position: relative;
}

.btn-orange:hover {
   border: 1px solid #ffae00;
   color: #fff;
}

.btn-orange:active {
   /* background-color: #181818; */
   opacity: 0.3;
   /* color: #555; */
}

.btn-silver {
   border: 1px solid rgb(0, 138, 230);
   border-top: 1px solid rgb(146, 211, 255);
   margin: 5px;
   padding: 0.5rem 1rem;
   position: relative;
   box-shadow: none;
   outline: none;
   border: none;
   color: #cecece;
   font-size: 0.9rem;
   box-shadow: 0 0 1rem 0 #000000;
   width: auto;
   height: auto;
   padding: 0.5rem 3rem;
   border: 1px solid #444444;
   border-top: 1px solid #999999;
   font-family: BankGothic Md Bt;
   cursor: pointer;
   background-image: -webkit-linear-gradient(#333333, #222222);
   border-radius: 2px;
   transition: 0.1s;
   box-shadow: 0 0.5em 1rem 0 #000000 inset, 0 0.5rem 1rem 0 black;
   width: 200px;
   height: 3em;
}

.btn-silver:hover {
   border: 1px solid #666666;
   border-top: 1px solid #dedede;
}

.btn-silver:active {
   box-shadow: 0 1em 2rem 0 #000000 inset;
   border: 1px solid #444444;
   border-top: 1px solid #333333;
   border-bottom: 1px solid #555555;
   color: #333333;
   opacity: 0.8;
}



.btn-corner-left {
   position: absolute;
   bottom: 20px;
   left: 20px;
}

.btn-top {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}

.btn-bottom {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
}

.btn-center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

.btn-submit {
   background-color: #080808;
   /* background-color: #181818; */
   color: #cecece;
   outline: none;
   border: none;
   font-size: 1em;
   background-repeat: no-repeat;
   border-radius: 5px;
   box-shadow: 0 10px 10px #080808;
   transition: 0.05s;
   margin-top: 1em;
   width: 60%;
   height: 3em;
   cursor: pointer;
   border: 1px solid #ffae0083;
   font-family: BankGothic Md Bt;
}

.btn-submit:hover {
   border: 1px solid #ffae00;
   color: #fff;
   /* width: 65%; */
}

.btn-submit:active {
   opacity: 0.3;
}

.addToCart {
   width: 200px;
}

.button:hover {
   background-color: #36363685;
   /* box-shadow:#ffae00ad 0 0 0 1px inset; */
   cursor: pointer;
}

input[type="text"],
input[type="password"],
input[type="email"] {
   outline: none;
   /* border: none; */
   width: 100%;
   height: 2.5rem;
   background-color: #000;
   text-align: left;
   font-size: 1em;
   border: 1px solid #242c3b;
   color: #a3a3a3;
   padding-left: 1rem;
   box-sizing: border-box;
   transition: 0.3s;
   animation: expand-input 1s 1;
   border-radius: 6px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
   border: 1px solid #ffae00;
   /* height: 3em; */
   /* width: 100%; */
}

.text {
   display: block;
   font-size: 0.9rem;
   font-family: inherit;
   /* font-weight: 400; */
   color: rgb(231, 231, 231);
   color: #a7a7a7;
   margin-bottom: 5px;
   animation: fade-in-text 1.5s 1;
}

.text__interface {
   display: inline-block;
   width: auto;
   font-size: 0.9em;
   color: #a7a7a7;
   animation: fade-in-text 1.5s 1;
   font-family: "Titillium Web";
   opacity: 0.8;
   color: #a3a3a3;
}

.gray-text {
   display: inline-block;
   font-size: 14px;
   font-family: inherit;
   color: #a7a7a7;
   animation: fade-in-text 1.5s 1;
   margin-left: 0.5em;
   margin-right: 0.5em;
}

.text-highlighted {
   color: #ffae00;
   margin-bottom: 5px;
   margin-top: 10px;
}

.paragraph {
   text-align: justify;
   color: #b8b8b8;
   font-size: 0.9rem;
}

b {
   color: white;
}

.paragraph li {
   margin-left: 1.5rem;
}

.text-centered {
   text-align: center;
}

.box {
   display: inline-block;
}

.cnlogo_form {
   margin: 0 auto;
   width: 30%;
   height: auto;
   /* opacity: 0.3; */
   display: inline-block;
   margin-bottom: 10px;
   animation: logo-fade-in 2s 1;
}

.form-cnlogo {
   margin-top: 15px;
}

.form-container {
   display: inline-block;
   /* margin-bottom: 2em; */
   width: 100%;
   max-width: 30rem;
   padding: 3em;
   /* background-color: #161616; */
   background-color: #0f131b;
   background: radial-gradient(farthest-corner at 40px 40px, var(--d2), var(--d0) 100%);
   /* border: 1px solid #222; */
   border-radius: 8px;
   text-align: center;
   height: auto;
   min-width: 300px;
   position: relative;
   animation: fade-in-bottom 1s 1;
   box-sizing: border-box;
   /* border-radius: 10px; */
   /* margin: 2% 0; */
}

.form-title {
   display: inline-block;
   box-sizing: border-box;
   width: 100%;
   height: auto;
   /* border-bottom: 1px #ffae00 solid; */
   padding-bottom: 20px;
   margin-top: -20px;
   margin-bottom: 20px;
}

.container-text {
   margin-top: 15px;
   text-align: left;
}

.fullname-box {
   width: auto;
   height: auto;
   /* background: red; */
   margin-top: 20px;
   margin-bottom: 20px;
}

.firstname-box {
   padding: 0;
   /* background: red; */
   display: inline-block;
   /* margin-left: 10px; */
   /* margin-top: 15px; */
   width: 45%;
   height: auto;
   /* background-color: red; */
   text-align: right;
   margin-right: 16px;
}

.lastname-box {
   /* background: blue; */
   display: inline-block;
   /* margin-left: 10px; */
   /* margin-top: 15px; */
   width: 45%;
   height: auto;
   /* background-color: red; */
   text-align: left;
   margin-left: 16px;
}

.firstname-text {
   float: left;
}

.lastname-text {
   margin-left: -10px;
   float: left;
}

.img-404 {
   width: 100%;
   height: auto;
}

h1 {
   font-size: 2em;
}

.text-h1 {
   font-size: 2em;
}

.text-big-h1 {
   font-family: BankGothic Md BT;
   font-size: 8em;
   letter-spacing: -1em;
   animation: fade-in-bottom 0.5s 1;
}

.section-404 {
   display: block;
   /* background-image: url('../imgs/404.png'); */
   width: 100%;
   text-align: center;
   margin: 0 auto;
   position: relative;
   padding-top: 200px;
   padding-bottom: 50px;
}

.container-404-text {
   /* display: inline-block; */
   /* position: absolute; */
   /* top: 50%; */
   /* left: 50%; */
   /* transform: translateY(100%) translateX(-50%); */
   margin-bottom: 100px;

}

.container-404-text h2 {
   font-family: "Titillium Web";
   color: #b8b8b8;
   /* margin-top: 150px; */
   /* font-size: 4em; */
   /* letter-spacing: -0.3em; */
}

.container-404-text p {
   /* font-size: 1.5em; */
   color: white;
}

.section-signup {
   /* background-image: url("../imgs/section-signin.png"); */
   width: 100%;
   height: auto;
   background-size: 100%;
   min-width: 360px;
   min-height: 920px;
   background-repeat: no-repeat;
   /* margin-top: -100px; */
   padding-bottom: 100px;
   background-color: rgb(0, 0, 0);
   /* background-position-y: 65px; */
   background-position: bottom;
   box-sizing: border-box;
   margin-bottom: 70px;
}

.section-message {
   padding: 50px;
   box-sizing: border-box;
   width: 100%;
   height: 980px;
   max-width: 600px;
}

.form-control {
   height: 25px;
   width: 100%;
   color: white;
   border: none;
   padding-left: 12px;
   outline: none;
   background-color: #080808;
   background-color: #000000;
   height: 2.5rem;
   color: #bababa;
   border: none;
   display: inline-block;
   border-radius: 2px;
   font-family: inherit;
   border: 1px solid #ffffff41;
   transition: 0.3s;
   cursor: pointer;
   animation: expand-input 1s 1;
   margin-top: 20px;
}

.text-area {
   height: 150px;
   width: 100%;
   color: white;
   border: none;
   /* padding-left: 12px; */
   outline: none;
   background-color: #000000;
   color: #bababa;
   /* margin-bottom: 10px; */
   font-family: inherit;
   border: 1px solid #ffffff41;
   transition: 0.3s;
   max-width: 100%;
   min-width: 100%;
   min-height: 100%;
   max-height: 150px;
   text-align: left;
   padding: 15px;
   box-sizing: border-box;
   text-align: justify;
}

.text-area:focus {
   border: 1px solid #ffae00;
}

.form-control:focus {
   border: 1px solid #ffae00;
   width: 100%;
}

.licenceYears {
   height: 2em;
   padding-left: 5px;
   width: 4em;
   margin-right: 10px;
   transition: 0s;
   border: 1px solid #ffae0075;
}

.licenceYears:hover {
   border: 1px solid #ffae00;
}

.licenceYears:focus {
   height: 2em;
   padding-left: 5px;
   width: 4em;
}

.text-title {
   font-family: "Titillium Web";
   font-family: "Exo 2";
   /* font-family: BankGothic Md Bt; */
   color: #ffffff;
   font-weight: bold;
   font-size: 3rem;
   opacity: 0.8;
}

.text-title-big {
   font-size: 3rem;
}

.text-title-small {
   font-size: 1.5rem;
}

.text-title-big {
   font-size: 5rem;
}

#select-day {
   display: inline-block;
   width: 21%;
   margin-right: 3.3%;
}

#select-month {
   display: inline-block;
   width: 40%;
   margin: 3.3%;
}

#select-year {
   display: inline-block;
   width: 23%;
   margin-left: 3.3%;
}

.form-bottom-box {
   /* border-top: 1px #ffffff41 solid; */
   /* margin-top: 30px; */
   /* padding-top: 25px; */
}

.hyperlink {
   color: #ffae00c9;
}

.hyperlink:hover {
   color: #ffae00c9;
   color: #ffae00;
   opacity: 1;
}

.hyperlink:active {
   opacity: 0.3;
}


.bottom-hyperlink {
   color: #ffae00c9;
   font-size: 1rem;
}

.bottom-hyperlink:hover {
   color: #ffae00c9;
   color: #ffae00;
   opacity: 1;
}

.bottom-hyperlink:active {
   opacity: 0.3;
}

.hyperlink_icon {
   opacity: 0.5;
}

.hyperlink_icon:hover {
   opacity: 0.9;
}

.hyperlink_icon:active {
   opacity: 0.2;
}

.cnlogo-container {
   width: 100%;
   height: auto;
   /* margin-bottom: 3rem; */
}

.cnlogo-signup {
   width: 400px;
   height: auto;
   display: inline-block;
   transition: 0.1s;
   margin-bottom: 0px;
   animation: fadeIn 1.5s 1;
   opacity: 0.9;
   mix-blend-mode: screen;
}

.cnlogo-signup:hover {
   opacity: 1;
}

.reset-password-modal {
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 300px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: #080808;
   animation: animate 0.3s 1;
}

.reset-btn-close {
   width: 50px;
   height: auto;
   top: 0;
   right: 0;
   position: absolute;
   font-size: 2em;
   cursor: pointer;
   transition: 0.2s;
}

.reset-btn-close:hover {
   background-color: #36363685;
}

.active-signup {
   color: #ffae00;
   background-color: #080808;
}

/* ================ SECTION 02 ================ */
.section-02 {
   display: block;
   width: 100%;
   height: 800px;
}

.errorText {
   background-color: rgba(255, 0, 0, 0.148);
   width: 80%;
   height: auto;
   color: red;
   padding: 10px;
   box-sizing: border-box;
   /* border-radius: 5px; */
   border: 1px solid red;
   margin-bottom: 15px;
   display: inline-block;
   animation: fadeIn 0.2s 5;
   font-family: BankGothic Md Bt;
   border-radius: 6px;
}

.form-description {
   /* margin-top: 5px; */
   /* text-align: left; */
   /* font-family: BankGothic Md Bt; */
   color: #a3a3a3;
   /* letter-spacing: 0.3rem; */
}

#otherOcupation {
   display: none;
}

.separator {
   color: #a7a7a7;
   padding: 0 10px;
   opacity: 0.7;
}

.separator_plugin_menu {
   line-height: 5rem;
   margin-top: 19px;
}

.separator__horizontal {
   width: 70%;
   height: 1px;
   background-color: #333333;
   margin: 0 auto;
   margin-top: 30px;
   margin-bottom: 30px;
}

.separator__horizontal__left {
   width: 50%;
   height: 1px;
   background-color: #333333;
   /* margin-top: 20px; */
   margin-bottom: 20px;
}


.disabled {
   opacity: 0.4;
   cursor: inherit;
}

.disabled:hover {
   border: 1px solid #ffae0083;
}

.passwordError {
   display: none;
   margin-top: 5px;
   font-size: 0.8em;
   color: red;
   transition: 0.5s;
}

.passwordErrorMatch {
   display: none;
   margin-top: 5px;
   font-size: 0.8em;
   color: greenyellow;
   transition: 0.5s;
}

.passwordErrorLong {
   display: none;
   margin-top: 5px;
   font-size: 0.8em;
   color: red;
   transition: 0.5s;
}

.passwordLongEnough {
   display: none;
   margin-top: 5px;
   font-size: 0.8em;
   color: greenyellow;
   transition: 0.5s;
}

.big-message {
   color: #d4d2ce;
   font-size: 4em;
   font-family: "Titillium Web";
}

.main {
   background-color: #000;
   /* background: radial-gradient(ellipse at 50% -100vw, #252c3a, #000 1500px); */

   /* padding-bottom: 50px; */
   animation: fadeIn 1s 1;
   min-height: 900px;
}

.mainBox {
   margin: 0 auto;
   padding: 1em;
   max-width: 1200px;
   width: 100%;
   /* background-color: red; */
}

.main_box {
   width: 100%;
   margin: 0 auto;
   /* background-color: red; */
   padding: 25px;
   max-width: 1400px;
   box-sizing: border-box;
   position: relative;
   padding-top: 50px;
}

.error404 {
   color: #ffae00;
   font-size: 5em;
}

.typo__titillium {
   font-family: "Titillium Web";
}

.white__text {
   color: white;
}

.button__blue {
   color: #ffffff;
   outline: none;
   border: none;
   font-size: 0.8em;
   font-family: inherit;
   background-repeat: no-repeat;
   border-radius: 0.2em;
   width: auto;
   height: 2em;
   cursor: pointer;
   animation: fadeIn 1s 1;
   padding: 0 1em 0 1em;
   background-color: #029cdf;
   border-top: 1px solid #39c4ff;
}

.button__blue:hover {
   background-color: #39c4ff;
}

.tooltip {
   position: relative;
   display: inline-block;
}

.tooltip .tooltiptext {
   visibility: hidden;
   width: 150px;
   background-color: #0f0f0f;
   color: #cecece;
   text-align: center;
   /* border-radius: 6px; */
   padding: 5px;
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   margin-left: -60px;
   opacity: 0;
   transition: opacity 0.2s;
   border: 1px solid #555555;
   font-size: 0.8em;
   font-family: "Titillium Web";
   box-shadow: 0 0 15px 2px black;
}

.tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -15px;
   border-width: 5px;
   border-style: solid;
   border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
}

::placeholder {
   color: #a7a7a7;
   opacity: 0.5;
   font-family: "Titillium Web";
}

.button__icon {
   background-color: #080808;
   color: #cecece;
   outline: none;
   border: none;
   font-size: 0.9em;
   font-family: inherit;
   background-repeat: no-repeat;
   box-shadow: 0 1em 2em 0 #080808;
   transition: 0s;
   cursor: pointer;
   border: 1px solid #ffae0083;
   animation: fadeIn 1s 1;
   font-family: BankGothic Md Bt;
   height: 35px;
   width: 35px;
   cursor: pointer;
   position: absolute;
   top: -25px;
   right: 8px;
   padding: 5px;
   /* border-radius: 5px; */
   opacity: 0.8;
   transition: 0.1s;
}

.button__icon:hover {
   opacity: 1;
   border: 1px solid #ffae00;
}

.custom__alert__modal {
   position: fixed;
   /* Stay in place */
   z-index: 3;
   /* Sit on top */
   left: 0;
   top: 0;
   width: 100%;
   /* Full width */
   height: 100%;
   /* Full height */
   overflow: auto;
   /* Enable scroll if needed */
   background-color: #000000e3;
   display: none;
   /* text-align: left; */
}

.custom__alert__messageBox {
   animation: fade-in-bottom 1s;
   margin: 0 auto;
   display: block;
   width: 500px;
   height: auto;
   box-sizing: border-box;
   background-color: #0f0f0f;
   border: 1px solid #333333;
   border-top: 1px solid #474747;
   padding: 2rem;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

.btn__silver {
   border: 1px solid rgb(0, 138, 230);
   border-top: 1px solid rgb(146, 211, 255);
   margin: 5px;
   padding: 0.5rem 1rem;
   position: relative;
   box-shadow: none;
   outline: none;
   border: none;
   color: #cecece;
   font-size: 0.9rem;
   box-shadow: 0 0 1rem 0 #000000;
   width: auto;
   height: auto;
   padding: 0.5rem 1rem;
   border: 1px solid #444444;
   border-top: 1px solid #999999;
   font-family: BankGothic Md Bt;
   cursor: pointer;
   background-image: -webkit-linear-gradient(#333333, #222222);
   border-radius: 2px;
   transition: 0.1s;
   box-shadow: 0 0.5em 1rem 0 #000000 inset, 0 0.5rem 1rem 0 black;
   width: 60%;
   height: 3em;
}

.btn__silver:hover {
   border: 1px solid #666666;
   border-top: 1px solid #dedede;
}

.btn__silver:active {
   box-shadow: 0 1em 2rem 0 #000000 inset;
   border: 1px solid #444444;
   border-top: 1px solid #333333;
   border-bottom: 1px solid #555555;
   color: #333333;
   opacity: 0.8;
}

.btn__cancel {
   position: relative;
   margin: 5px;
   width: 100px;
   height: auto;
   padding: 0.5rem 1rem;
}

.text__warning {
   color: red;
}

.text__green {
   color: greenyellow;
   opacity: 1;
}

.text__red {
   color: red;
   opacity: 0.8;
}

.text__center {
   text-align: center;
}

.text__left {
   text-align: left;
}

.text__right {
   text-align: right;
}

.text__modal__title {
   font-size: 1.2rem;
   font-family: BankGothic Md Bt;
   color: white;
}

.text__orange {
   color: #ffae00;
   opacity: 1;
}

.plugin_description_label {
   margin-left: 200px;
   /* color: #a3a3a3; */
}

.plugin_description_description {
   margin-left: 2px;
   color: #a7a7a7;
   opacity: 1;
}

.menu__simple {
   /* font-family: BankGothic Md Bt; */
   /* color: #cecece; */
   font-size: 1rem;
   /* letter-spacing: -.05rem; */
}

.logo_cart_insideButton {
   width: 20px;
   height: auto;
   /* background-color: red; */
   display: inline-block;
   margin-bottom: -20px;
}


.btn_download {
   /* background-color: #0099ff; */
   /* color: white; */
   width: auto;
   /* padding-left: 20px; */
   /* padding-right: 20px; */
   /* position: absolute; */
   /* bottom: 20px; */
   /* right: 20px; */
   z-index: 1;
   /* height: auto; */
   /* width: auto; */
   padding: 0.5rem 2rem;
   /* border: none; */
   /* font-family: inherit; */
   /* font-weight: 500; */
   margin: 5px;
   /* font-family: inherit; */
   font-size: 1rem;
   width: 50%;
}

.icon-s {
   display: inline-block;
   /* height: 22px; */
   width: 22px;
   height: 22px;
   margin: 0 10px;
   display: inline-block;
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center;
   background-position-y: 0;
}

.icon-socialmedia {
   opacity: 0.8;
}


.icon-s-80 {
   display: inline-block;
   /* height: 22px; */
   width: 22px;
   height: 22px;
   margin: 0 10px;
   display: inline-block;
   background-repeat: no-repeat;
   background-size: 80%;
   background-position: center;
   /* background-position-y: 0; */
   margin-bottom: -20px;
}

.icon-ss {
   display: inline-block;
   height: 18px;
   width: 18px;
   margin: 0 10px;
   display: inline-block;
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center;
   background-position-y: 0;
}

.icon-l {
   display: inline-block;
   height: 50px;
   width: 50px;
   /* margin: 0 10px; */
   display: inline-block;
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center;
   /* background-position-y: 0px; */
   /* border: 1px solid white; */
}

.icon-bottom {
   background-position-y: 0;
}

.icon-windows {
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: -5px;
   background-image: url(../imgs/icons/icon_win_white.svg);
   opacity: 1;
}

.icon-account {
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: -5px;
   background-image: url(../imgs/icons/icon_account.svg);
   opacity: 1;
}

.icon-dashboard {
   /* margin-left: 10px; */
   margin-bottom: -6px;
   background-image: url(../imgs/icons/icon_dashboard.svg);
}

.icon-affiliate {
   /* margin-left: 10px; */
   margin-bottom: -6px;
   background-image: url(../imgs/icons/icon_affiliate.svg);
}

.icon-cart {
   margin-bottom: -6px;
   background-image: url(../imgs/icons/icon_cart.svg);
}

.icon-arrow {
   /* margin-bottom: -6px; */
   background-image: url(../imgs/icons/icon_arrow.svg);
}

.icon-orders {
   margin-bottom: -6px;
   background-image: url(../imgs/icons/icon_orders.svg);
}

.icon-logout {
   margin-bottom: -6px;
   background-image: url(../imgs/icons/icon_logout.svg);
}

.icon-support2 {
   margin-bottom: -6px;
   background-image: url(../imgs/icons/icon_support2.svg);
}

.icon-faq {
   margin-bottom: -6px;
   background-image: url(../imgs/icons/icon_faq.svg);
}

.desaturated {
   filter: grayscale(1);
}

.icon-macOS {
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: -3px;
   background-image: url(../imgs/icons/icon_apple_white.svg);
   opacity: 1;
}

.icon-key {
   margin-left: 10px;
   margin-right: 10px;
   /* margin-bottom: -5px; */
   background-image: url(../imgs/icons/icon_key.svg);
   /* opacity: 0.8; */
}

.container_gray {
   animation: fade-in-bottom 1s;
   margin: 0 auto;
   width: 100%;
   height: auto;
   padding: 60px;
   box-sizing: border-box;
   margin-top: 50px;
   /* background-color: #0f0f0f; */
   /* background-color: #0f131b; */
   /* background: radial-gradient(farthest-corner at 40px 40px, #171d28, #0f131b 100%); */
   background: radial-gradient(farthest-corner at 40px 40px, var(--d2), var(--d0) 100%);
   /* border: 1px solid #333333; */
   /* border: 1px solid #242c3b; */
   /* border-radius: 10px; */
   /* border-top: 1px solid #474747; */
   overflow: hidden;
}

.grid-renderer {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -ms-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -ms-flex-pack: start;
   -webkit-justify-content: center;
   justify-content: center;
   /* border: 1px solid white; */
   width: 100%;
}

.grid-elmnt-container {
   box-sizing: border-box;
   position: relative;
   margin: 10px;
   /* border: 1px solid white; */
}

.img-100 {
   width: 100%;
   height: auto;
   margin: 20px 0;
}

.artist_credit {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 0.8rem;
   color: white;
   opacity: 0.7;
   /* border: 1px solid white; */
   height: 1rem;
   z-index: 10;
}

.artist_credit:hover {
   opacity: 1.0;
}

.desaturate {
   filter: grayscale(1);
}

.arrow__left {
   border-bottom: 2px solid #ffae00;
   border-left: 2px solid #ffae00;
   width: 6px;
   height: 6px;
   display: inline-block;
   transform: rotate(45deg);
   margin-right: 5px;
   margin-bottom: 2px;
   transition: 0.1s;
}

.arrow__right {
   border-bottom: 2px solid #ffae00;
   border-left: 2px solid #ffae00;
   width: 6px;
   height: 6px;
   display: inline-block;
   transform: rotate(225deg);
   margin-right: 5px;
   transition: 0.1s;
}

.arrow__right_red {
   border-bottom: 2px solid var(--red);
   border-left: 2px solid var(--red);
   width: 6px;
   height: 6px;
   display: inline-block;
   transform: rotate(225deg);
   margin-right: 5px;
   transition: 0.1s;
}

.block_modal {
   display: none;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index: 3;
   position: fixed;
}

.carousel-container {
   width: 100%;
   overflow: hidden;
}

.carousel {
   background: rgba(255, 0, 0, 0.438);
   width: 100%;
   height: 600px;
   display: flex;
   position: relative;
   padding: 10px;
   box-sizing: border-box;
}

.carousel-item {
   width: 100%;
   height: 100%;
   /* background-color: green; */
   position: relative;
   border: 1px solid white;
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: center;
}

.carousel-item-title {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

.carousel-btns {
   position: absolute;
   width: 100vw;
   height: 1vw;
   background: black;
   bottom: 1vw;
}

::-webkit-scrollbar {
   width: auto;
}

::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px var(--d0);
   border: 1px solid var(--d3);
   background: var(--d1);
}

::-webkit-scrollbar-thumb {
   background-image: -webkit-linear-gradient(left, #242c3b, var(--d1));
   border-radius: 5px;
   box-shadow: 0 0 15px 0 black;
}

::-webkit-scrollbar-thumb:hover {
   background-image: -webkit-linear-gradient(left, #464f5f, var(--d1));
}

.trusteby_banner_container {
   width: 100%;
   height: 15vh;
   /* margin-bottom: 100px; */
   /* background-image: radial-gradient(farthest-corner at 50%, #10141c, #000000 80%); */
   padding-bottom: 50px;
   padding-top: 100px;
}

.trustedby_container {
   text-align: center;
   margin: 0 auto;
   display: grid;
   /* border: 1px solid white; */
   grid-template-columns: repeat(9, 1fr);
   grid-gap: 10px;
   grid-row-gap: 30px;
   align-content: center;
   /* padding: 80px; */
   box-sizing: border-box;
   padding: 0 500px;
}

.trusteby_banner_text {
   margin-bottom: 30px;
   font-size: 1.3rem;
}

.trustedby_logo {
   display: block;
   width: 100%;
   height: 50px;
   max-width: 130px;
   /* background: red; */
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0.6;
   margin: 0 auto;
   box-sizing: border-box;
   position: relative;
}

.banner_video {
   width: 100%;
   height: 70vh;
   align-items: center;
   align-content: center;
   /* margin-top: 80px; */
   position: relative;
}

.banner_video video {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Ensure the video covers the entire div */
   opacity: 0.6;
}

.banner_middle_box {
   width: 100%;
   height: auto;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   z-index: 3;
   padding: 50px 0;
}

.oniric_licenses_box {
   /* border: 1px solid cyan; */
   box-sizing: border-box;
   margin: 0 auto;
   width: 100%;
}


.license_type_buttons_container {
   width: 300px;
   height: 50px;
   /* border: 1px solid white; */
   display: flex;
   margin: 20px auto;
}

#licenses_box_lifetime {
   display: none;
}

.license_type_button {
   color: var(--d7);
   text-align: center;
   align-content: center;
}

.license_type_button:hover {
   filter: brightness(1.2);
   cursor: pointer;
}

.license_type_button_active {
   background-color: var(--d3);
   color: #ffae00;
}

.license_type_button_subcription {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   border: 1px solid var(--d6);
   width: 100%;
   height: 100%;
}

.license_type_button_perpetual {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   border: 1px solid var(--d6);
   width: 100%;
   height: 100%;
}

.btn_manage_subscription {
   margin-left: 50px;
   padding: 5px 10px;
   box-sizing: border-box;
   background-color: black;
   color: rgb(205, 205, 205);
   font-family: BankGothic Md Bt;
   border: 1px solid #ffae00bf;
   border-radius: 5px;
   cursor: pointer;
}

.btn_manage_subscription:hover {
   border: 1px solid #ffae00;
   color: rgb(232, 232, 232);
}

.btn_manage_subscription:active {
   opacity: 0.4;
}

.checkbox {
   display: flex;
   align-items: center;
   gap: 10px;
   cursor: pointer;
   font-family: sans-serif;
   color: #ddd;
}

/* Hide native checkbox */
.checkbox input {
   display: none;
}

/* Custom box */
.checkmark {
  width: 16px;
  height: 16px;
  border: 1px solid #444;
  background: #1a1a1a;
  box-shadow: inset 0 0 5px #000;
}

/* Hover effect */
.checkbox:hover .checkmark {
   border-color: #aaa;
}

/* Checked state */
.checkbox input:checked + .checkmark {
  background: linear-gradient(135deg, #00ffa6, #00c3ff);
  box-shadow: 0 0 6px rgba(0,255,166,0.6);
}

/* Check icon */
.checkmark::after {
   content: "";
   position: absolute;
   left: 4px;
   top: 0px;
   width: 5px;
   height: 10px;
   border: solid black;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
   opacity: 0;
   transition: opacity 0.2s ease;
}

/* Show check */
.checkbox input:checked+.checkmark::after {
   opacity: 1;
}

.blocked {
  opacity: 0.7;
  cursor: not-allowed;
}

.displayNone {
   display: none;
}

/* ================ ANIMATIONS ================ */

@keyframes fadeIn {
   0% {
      opacity: 0;
   }
}

@keyframes animate {
   0% {
      margin-top: -20px;
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes fade-in-bottom {
   0% {
      top: 10px;
      opacity: 0;
   }

   100% {
      opacity: 1;
      top: 0px;
   }

   0% {
      opacity: 0;
   }
}

@keyframes expand-input {
   0% {
      opacity: 0;
      width: 90%;
      margin-bottom: 5px;
   }

   100% {
      opacity: 1;
      top: 100%;
   }
}

@keyframes fade-in-text {
   0% {
      /* margin-top: -1px; */
      color: #ffae00;
      opacity: 0;
   }
}

@keyframes fade-in-top {
   0% {
      margin-top: 50px;
      opacity: 0;
   }
}

@media only screen and (max-width: 1145px) {

   .container_gray {
      padding: 3vw;
   }


   .main {
      margin-top: 10vw;
   }

   body {
      top: 0;
      bottom: 0;
   }

   /***********FORM CSS ************/
   .form-bottom-box .hyperlink {
      font-size: 2.5rem;
   }

   .container-text .hyperlink {
      font-size: 2.5rem;
   }

   .bottom-hyperlink {
      font-size: 2vw;
   }

   .hyperlink {
      font-size: 10vw;
   }

   .form-container {
      width: 100%;
      max-width: none;
      /* min-width: none; */
      padding: 10vw;
      height: 100%;
      /* position: absolute; */
      /* top: initial; */
      /* left: initial; */
      /* transform: initial; */
      /* margin: 0; */
      /* padding-top: 10vw; */
      /* box-sizing: border-box; */
      /* border: 1px solid white; */
   }

   .form-container-signup {
      position: relative;
      top: 0%;
      left: 0%;
      transform: none;
      margin-top: -50px;
   }

   .title-mobile {
      color: white;
      font-size: 8vw;
   }

   .icon-l {
      width: 100px;
      height: 100px;
   }

   input[type="text"],
   input[type="password"],
   input[type="email"] {
      font-size: 2.5rem;
      height: 7rem;
      border-width: 2px;
      margin-top: 10px;
      margin-bottom: 30px;
      padding-left: 30px;
      border-radius: 1.5vw;
   }

   .section-signup {
      min-width: none;
      min-height: none;
   }

   .form-control {
      height: 7rem;
      font-size: 2.2em;
      padding-left: 30px;
   }

   .form-title {
      /* margin-bottom: 40px; */
      /* border-bottom: 2.5px #ffae00 solid; */
      margin-top: 0px;
   }

   .btn-submit {
      font-size: 4.5vw;
      width: 100%;
      border-width: 2.5px;
   }

   .text {
      font-size: 4vw;
   }

   .text-title {
      font-size: 7rem;
   }

   .form-description {
      margin-bottom: 50px;
      /* font-size: 2.3rem; */
   }

   .cnlogo-signup {
      width: 400px;
   }

   .form-bottom-box {
      /* margin-top: 60px; */
      /* padding-top: 60px; */
      /* border-top: 2.5px #ffffff41 solid; */
   }

   .cnlogo_form {
      margin-top: 0;
      width: 50%;
      margin-bottom: 5vw;
      /* display: none; */
   }

   .separator__horizontal {
      height: 2.5px;
   }

   .mainBox {
      max-width: 100%;
      padding: 0;
      margin: 0;
   }

   .main_box {
      width: 95%;
   }

   .text-title {
      font-size: 6vw;
   }

}