/* ------------------------------ */
/* ------------------------------ */
/* HEADER */
.Header {
   position: fixed;
   display: block;
   width: 100%;
   height: 91px;
   background-color: var(--backgroundMainColor);
   border-top: 10px solid var(--accentMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   z-index: 100;
}

.Header .center {
   position: relative;
   display: block;
   width: var(--websiteWidth);
   height: 80px;
   margin: auto;
}

.Header .name {
   display: block;
   width: auto;
   height: 80px;
   padding: 23px 0px;
   color: var(--fontMainColor);
   font-size: 30px;
   font-weight: var(--fontTwo);
   line-height: 1;
   float: left;
}

.Header .name.x,
.Header .name:hover {
   cursor: pointer;
   color: var(--accentMainColor);
}

.Header .nav {
   display: block;
   width: auto;
   height: 80px;
   padding: 32px 0px;
   color: var(--placeholderMainColor);
   font-size: 15px;
   font-weight: var(--fontOne);
   line-height: 1;
   word-spacing: 15px;
   text-align: right;
   float: right;
}

.Header .link {
   display: inline-block;
   width: auto;
   height: 15px;
   color: var(--fontMainColor);
   font-size: 15px;
   font-weight: var(--fontOne);
   line-height: 1;
   word-spacing: normal;
}

.Header .link::after {
   content: '/';
   width: auto;
   margin-left: 20px;
   color: var(--borderMainColor);
}

.Header .link.x,
.Header .link:hover {
   cursor: pointer;
   color: var(--accentMainColor);
}

.Header .link.x::after,
.Header .link:hover::after {
   color: var(--borderMainColor);
}

.Header .link:last-child::after {
   content: '';
   margin-left: 0px;
}

.Header #sideMenuBtn,
.Header #mainMenuBtn {
   display: none;
}


/* --------------------------- */
/* --------------------------- */
/* LAYOUT */
.Content {
   position: absolute;
   display: block;
   top: 91px;
   left: calc(50% - 512px);
   width: calc(1024px - 300px);
   min-height: calc(100vh - 100px);
   padding: 15px;
   padding-bottom: 105px;
   background-color: var(--backgroundMainColor);
   border-left: 1px solid var(--borderMainColor);
   border-right: 1px solid var(--borderMainColor);
   overflow: auto;
}

.Sidebar {
   position: fixed;
   display: block;
   top: 91px;
   left: calc(50% + 211px);
   width: 301px;
   height: calc(100vh - 110px);
   padding-bottom: 71px;
   background-color: var(--backgroundMainColor);
   border-left: 1px solid var(--borderMainColor);
   border-right: 1px solid var(--borderMainColor);
   overflow: auto;
}

.Content.R {
   left: calc(50% - 212px);
}

.Sidebar.R {
   left: calc(50% - 512px);
}

.Sidebar::-webkit-scrollbar {
   display: none;
}


/* ------------------------------ */
/* ------------------------------ */
/* SIDEBAR */
.Sidebar .header {
   display: block;
   width: 100%;
   height: 75px;
   padding: 25px;
   background-color: transparent;
   border-left: 10px solid var(--borderMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   font-size: 24px;
   color: var(--fontMainColor);
   font-weight: var(--fontThree);
   text-align: left;
   text-transform: uppercase;
}

.Sidebar .search {
   position: relative;
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   background-color: var(--backgroundMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   border-radius: 0px;
   color: var(--fontMainColor);
   font-size: 18px;
   font-weight: var(--fontOne);
   line-height: 1;
   text-align: left;
   margin-bottom: 0px;
}

.Sidebar .ad {
   display: block;
   width: 300px;
   min-height: 250px;
   background-color: var(--backgroundMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   border-radius: 0px;
   margin: 0px;
}

.Sidebar .user {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: transparent;
   border-bottom: 1px solid var(--borderMainColor);
}

.Sidebar .user .username {
   display: block;
   width: 100%;
   min-height: 80px;
   overflow: auto;
   padding: 25px;
   border-bottom: 1px solid var(--borderMainColor);
   color: var(--accentMainColor);
   font-size: 25px;
   font-weight: var(--fontTwo);
   line-height: 1;
   text-align: center;
}

.Sidebar .user .image {
   display: block;
   width: 100%;
   min-height: 250px;
   overflow: auto;
   padding: 0px;
   background-color: var(--backgroundMainColor);
   border-bottom: 10px solid var(--accentMainColor);
}

.Sidebar .user .info {
   display: block;
   width: 100%;
   height: 65px;
   padding: 25px;
   border-bottom: 1px solid var(--borderMainColor);
   color: var(--fontMainColor);
   font-size: 15px;
   line-height: 1;
   text-align: left;
}

.Sidebar .user .info:last-child {
   border-bottom: none;
}

.Sidebar .link {
   position: relative;
   display: block;
   width: 100%;
   height: 65px;
   padding: 25px;
   border-bottom: 1px solid var(--borderMainColor);
   border-left: 10px solid var(--borderMainColor);
   color: var(--fontMainColor);
   font-size: 15px;
   line-height: 1;
   text-align: left;
}

.Sidebar .link::after {
   content: var(--symbolOne);
   position: absolute;
   top: 20px;
   right: 20px;
   font-size: 22.5px;
}

.Sidebar .link.x,
.Sidebar .link:hover {
   background-color: var(--backgroundMainColor);
   border-left: 10px solid var(--accentMainColor);
   color: var(--accentMainColor);
}

.Sidebar .link:last-child {
   border-bottom: none;
}

.Sidebar .buy {
   position: relative;
   display: block;
   width: calc(100% - 30px);
   height: 72px;
   padding: 25px;
   background-color: var(--fontMainColor);
   border: 1px solid #fff;
   border-radius: var(--borderRadiusOne);
   color: #000;
   font-size: 20px;
   font-weight: var(--fontTwo);
   line-height: 1;
   text-align: left;
   text-transform: uppercase;
   margin: 15px;
}

.Sidebar .buy::after {
   content: var(--symbolOne);
   position: absolute;
   top: 23px;
   right: 23px;
}

.Sidebar .buy.x,
.Sidebar .buy:hover {
   background-color: var(--accentMainColor);
   border: 1px solid var(--accentMainColor);
   color: #000;
}


/* ------------------------------ */
/* ------------------------------ */
/* SECTION */
.Section {
   display: block;
   width: calc(100% + 30px);
   height: 90px;
   background-color: var(--backgroundMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   padding: 15px;
   color: var(--fontMainColor);
   font-size: 15px;
   font-weight: var(--fontOne);
   line-height: 1;
   margin: -15px;
   margin-bottom: 15px;
}

.Section .search {
   position: relative;
   display: block;
   width: calc(50% - 5px);
   height: 100%;
   padding: 20px;
   background-color: var(--backgroundMainColor);
   border: 1px solid var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   color: var(--fontMainColor);
   font-size: 18px;
   font-weight: var(--fontTwo);
   line-height: 0.9;
   text-align: left;
}

.Section .info {
   position: relative;
   display: block;
   width: calc(50% - 5px);
   height: 100%;
   padding: 20px;
   background-color: var(--backgroundMainColor);
   border: 1px solid var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
   color: var(--fontMainColor);
   font-size: 20px;
   font-weight: var(--fontTwo);
   line-height: 0.9;
   text-align: left;
   text-transform: uppercase;
}

.Section .link {
   position: relative;
   display: block;
   width: calc(50% - 5px);
   height: 100%;
   padding: 20px;
   background-color: var(--accentMainColor);
   border: 1px solid var(--accentMainColor);
   border-radius: var(--borderRadiusOne);
   color: #000;
   font-size: 20px;
   font-weight: var(--fontTwo);
   line-height: 0.9;
   text-align: left;
   text-transform: uppercase;
}

.Section .link::after {
   content: var(--symbolOne);
   position: absolute;
   top: 20px;
   right: 20px;
}

.Section .link:hover {
   cursor: pointer;
}

.Section .menu {
   position: relative;
   display: block;
   top: 0px;
   left: 0px;
   width: calc(50% - 10px);
   height: 100%;
   overflow: visible;
   float: left;
   z-index: 30;
}

.Section .menu .selection {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   padding: 20px;
   background-color: var(--backgroundMainColor);
   border: 1px solid var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
   color: var(--fontMainColor);
   font-size: 20px;
   font-weight: var(--fontTwo);
   line-height: 0.9;
   text-align: left;
   text-transform: uppercase;
}

.Section .menu .selection::after {
   content: '\21B4';
   position: absolute;
   top: 16px;
   right: 20px;
   color: var(--fontMainColor);
   font-size: 20px;
}

.Section .menu .selection.x,
.Section .menu .selection:hover {
   cursor: pointer;
   background-color: rgba(255, 255, 255, 0.03);
   color: var(--accentMainColor);
}

.Section .menu .options {
   position: absolute;
   display: none;
   top: 70px;
   left: 0px;
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: var(--backgroundMainColor);
   border: 1px solid var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
}

.Section .menu .options .option {
   position: relative;
   display: block;
   width: 100%;
   height: 60px;
   padding: 20px;
   background-color: var(--backgroundMainColor);
   color: var(--fontMainColor);
   font-size: 20px;
   font-weight: var(--fontTwo);
   line-height: 0.9;
   text-align: left;
   text-transform: uppercase;
}

.Section .menu .options .option::after {
   content: var(--symbolOne);
   position: absolute;
   top: 20px;
   right: 20px;
}

.Section .menu .options .option.x,
.Section .menu .options .option:hover {
   cursor: pointer;
   background-color: rgba(255, 255, 255, 0.03);
   color: var(--accentMainColor);
}


/* ------------------------------ */
/* ------------------------------ */
/* USERS */
.Users {
   position: relative;
   display: block;
   width: 100%;
   min-height: 200px;
   overflow: auto;
   padding: 0px;
   background-color: var(--backgroundMainColor);
   border: 1px solid var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   margin-bottom: 15px;
}

.Users:last-child {
   margin-bottom: 0px;
}

.Users .image {
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Users .info {
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 25px;
   float: left;
}

.Users .username {
   display: block;
   width: 100%;
   min-height: 24px;
   overflow: auto;
   font-size: 24px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 15px;
   margin-top: 0px;
}

.Users .email {
   display: block;
   width: 100%;
   height: 20px;
   color: var(--accentMainColor);
   font-size: 16px;
   font-weight: var(--fontTwo);
   line-height: 1;
   margin-bottom: 15px;
}

.Users .details {
   display: block;
   width: 100%;
   height: 12px;
   color: #888;
   font-size: 12px;
   font-weight: var(--fontOne);
   line-height: 1;
   margin-bottom: 10px;
}


/* ------------------------------ */
/* ------------------------------ */
/* LISTS */
.Lists {
   position: relative;
   display: block;
   width: 100%;
   min-height: auto;
   overflow: auto;
   padding: 0px;
   background-color: transparent;
   margin-bottom: 15px;
}

.Lists:last-child {
   margin-bottom: 0px;
}

.Lists .image {
   position: relative;
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Lists .pending {
   position: absolute;
   display: block;
   top: 15px;
   left: 15px;
   width: auto;
   height: 25px;
   padding: 7.5px 20px;
   background-color: var(--accentMainColor);
   border-radius: 30px;
   color: #000;
   font-size: 10px;
   font-weight: var(--fontTwo);
   line-height: 1;
   text-align: center;
}

.Lists .info {
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 25px;
   padding-bottom: 0px;
   padding-top: 15px;
   float: left;
}

.Lists .name {
   display: block;
   width: 100%;
   min-height: 30px;
   overflow: auto;
   font-size: 24px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 20px;
   margin-top: 0px;
}

.Lists .description {
   display: block;
   width: 100%;
   min-height: 75px;
   overflow: auto;
   color: var(--placeholderMainColor);
   font-size: 18px;
   font-weight: var(--fontOne);
   line-height: normal;
   margin-bottom: 20px;
}

.Lists .row {
   display: block;
   width: 100%;
   height: 20px;
   color: var(--fontMainColor);
   font-size: 20px;
   font-weight: var(--fontTwo);
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* LINKS */
.Links {
   position: relative;
   display: block;
   width: 100%;
   min-height: auto;
   overflow: auto;
   padding: 0px;
   background-color: transparent;
   margin-bottom: 15px;
}

.Links:last-child {
   margin-bottom: 0px;
}

.Links .image {
   position: relative;
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Links .pending {
   position: absolute;
   display: block;
   top: 15px;
   left: 15px;
   width: auto;
   height: 25px;
   padding: 7.5px 20px;
   background-color: var(--accentMainColor);
   border-radius: 30px;
   color: #000;
   font-size: 10px;
   font-weight: var(--fontTwo);
   line-height: 1;
   text-align: center;
}

.Links .info {
   position: relative;
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 25px;
   padding-bottom: 0px;
   padding-top: 15px;
   float: left;
}

.Links .name {
   display: block;
   width: 100%;
   min-height: 30px;
   overflow: auto;
   font-size: 24px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 20px;
   margin-top: 0px;
}

.Links .description {
   display: block;
   width: 100%;
   min-height: 75px;
   overflow: auto;
   color: var(--placeholderMainColor);
   font-size: 18px;
   font-weight: var(--fontOne);
   line-height: normal;
   margin-bottom: 20px;
}

.Links .row {
   display: block;
   width: 100%;
   height: 20px;
   color: var(--fontMainColor);
   font-size: 20px;
   font-weight: var(--fontTwo);
   line-height: 1;
}

.Links .visit {
   position: absolute;
   display: block;
   bottom: 0px;
   right: 0px;
   width: 200px;
   height: 45px;
   padding: 15px;
   background-color: var(--fontMainColor);
   border-radius: var(--borderRadiusOne);
   color: #000;
   font-size: 15px;
   font-weight: var(--fontTwo);
   text-align: center;
}

.Links .visit:hover {
   background-color: var(--accentMainColor);
}


/* ------------------------------ */
/* ------------------------------ */
/* DISCUSSIONS */
.Discussions {
   position: relative;
   display: block;
   width: 100%;
   min-height: 200px;
   overflow: auto;
   padding: 0px;
   background-color: transparent;
   border-radius: var(--borderRadiusOne);
   margin-bottom: 15px;
}

.Discussions:last-child {
   margin-bottom: 0px;
}

.Discussions .image {
   position: relative;
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Discussions .pending {
   position: absolute;
   display: block;
   top: 15px;
   left: 15px;
   width: auto;
   height: 25px;
   padding: 7.5px 20px;
   background-color: var(--accentMainColor);
   border-radius: 30px;
   color: #000;
   font-size: 10px;
   font-weight: var(--fontTwo);
   line-height: 1;
   text-align: center;
}

.Discussions .info {
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 25px;
   float: left;
}

.Discussions .title {
   display: block;
   width: 100%;
   min-height: 80px;
   overflow: auto;
   font-size: 18px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 25px;
   margin-top: 0px;
}

.Discussions .details {
   display: block;
   width: 100%;
   height: 14px;
   color: #888;
   font-size: 14px;
   font-weight: var(--fontOne);
   line-height: 1;
   margin-bottom: 10px;
}


/* ------------------------------ */
/* ------------------------------ */
/* REPLIES */
.Replies {
   position: relative;
   display: block;
   width: 100%;
   min-height: 200px;
   overflow: auto;
   padding: 0px;
   background-color: transparent;
   border-radius: var(--borderRadiusOne);
   margin-bottom: 15px;
}

.Replies:last-child {
   margin-bottom: 0px;
}

.Replies .image {
   position: relative;
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Replies .pending {
   position: absolute;
   display: block;
   top: 15px;
   left: 15px;
   width: auto;
   height: 25px;
   padding: 7.5px 20px;
   background-color: var(--accentMainColor);
   border-radius: 30px;
   color: #000;
   font-size: 10px;
   font-weight: var(--fontTwo);
   line-height: 1;
   text-align: center;
}

.Replies .info {
   position: relative;
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 25px;
   float: left;
}

.Replies .username {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   font-size: 18px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 15px;
   margin-top: 0px;
}

.Replies .username .FR {
   color: var(--borderMainColor);
}

.Replies .reply {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   color: var(--fontMainColor);
   font-size: 14px;
   font-weight: var(--fontOne);
   line-height: 1.5;
   margin-bottom: 40px;
}

.Replies .options p {
   position: absolute;
   display: block;
   bottom: 25px;
   right: 25px;
   width: 100%;
   height: 14px;
   overflow: visible;
   color: var(--borderMainColor);
   font-size: 14px;
   font-weight: var(--fontOne);
   line-height: 1;
   word-spacing: 5px;
   text-align: right;
   text-transform: uppercase;
}

.Replies .options a {
   display: inline-block;
   width: auto;
   height: 14px;
   color: var(--fontMainColor);
   font-size: 14px;
   font-weight: var(--fontOne);
   line-height: 1;
   word-spacing: normal;
}


/* ------------------------------ */
/* ------------------------------ */
/* ORDERS */
.Orders {
   position: relative;
   display: block;
   width: 100%;
   min-height: 160px;
   overflow: auto;
   padding: 0px;
   background-color: transparent;
   border: 1px solid var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
   margin-bottom: 15px;
}

.Orders:last-child {
   margin-bottom: 0px;
}

.Orders .image {
   display: block;
   width: 160px;
   height: 160px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Orders .info {
   display: block;
   width: calc(100% - 160px);
   min-height: 160px;
   padding: 25px;
   float: left;
}

.Orders .email {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   font-size: 18px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 15px;
   margin-top: 0px;
}

.Orders .details {
   display: block;
   width: 100%;
   height: 14px;
   color: var(--fontMainColor);
   font-size: 14px;
   font-weight: var(--fontTwo);
   line-height: 1;
   margin-bottom: 10px;
}


/* --------------------------- */
/* --------------------------- */
/* NOTIFICATIONS */
.Notifications {
   position: relative;
   display: block;
   width: 100%;
   height: 70px;
   overflow: visible;
   padding: 0px;
   background-color: transparent;
   margin-bottom: 15px;
}

.Notifications:last-child {
   margin-bottom: 0px;
}

.Notifications .image {
   display: block;
   width: 70px;
   height: 70px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Notifications .info {
   position: relative;
   display: block;
   width: calc(100% - 70px);
   height: 70px;
   padding: 25px;
   float: left;
}

.Notifications .info a {
   font-size: 20px;
   font-weight: var(--fontTwo);
}


/* ------------------------------ */
/* ------------------------------ */
/* LINK */
.Link {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 0px;
   background-color: transparent;
}

.Link .user {
   display: block;
   width: 100%;
   height: 200px;
   margin-bottom: 15px;
}

.Link .user-image {
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Link .user-info {
   position: relative;
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 25px;
   float: left;
}

.Link .user-name {
   display: block;
   width: 100%;
   height: 25px;
   overflow: visible;
   font-size: 25px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
   line-height: 1;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 15px;
}

.Link .user-rows {
   position: absolute;
   display: block;
   bottom: 25px;
   left: 25px;
   width: calc(100% - 50px);
   height: auto;
   overflow: auto;
}

.Link .user-row {
   display: block;
   width: 100%;
   height: 14px;
   color: #888;
   font-size: 14px;
   font-weight: var(--fontOne);
   line-height: 1;
   margin-bottom: 10px;
}

.Link .visit {
   position: absolute;
   display: block;
   top: 12.5px;
   right: 12.5px;
   width: 200px;
   height: 45px;
   padding: 15px;
   background-color: var(--fontMainColor);
   border-radius: var(--borderRadiusOne);
   color: #000;
   font-size: 15px;
   font-weight: var(--fontTwo);
   text-align: center;
}

.Link .visit:hover {
   background-color: var(--accentMainColor);
}

.Link .stats {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 0px;
   background-color: transparent;
   border: 1px solid var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
   margin-top: 15px;
}

.Link .stat {
   position: relative;
   display: block;
   width: 50%;
   height: auto;
   overflow: auto;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid var(--borderMainColor);
   float: left;
}

.Link .stat:nth-last-child(-n+2) {
   border-bottom: none;
}


/* ------------------------------ */
/* ------------------------------ */
/* DISCUSSION */
.Discussion {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 0px;
   background-color: transparent;
}

.Discussion .image {
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   float: left;
}

.Discussion .info {
   position: relative;
   display: block;
   width: calc(100% - 200px);
   min-height: 200px;
   padding: 12.5px;
   padding-left: 20px;
   float: left;
}

.Discussion .name {
   display: block;
   width: 100%;
   height: 15px;
   overflow: visible;
   font-size: 15px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
   line-height: 1;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 10px;
}

.Discussion .details {
   display: block;
   width: 100%;
   height: 12px;
   color: #888;
   font-size: 12px;
   font-weight: var(--fontOne);
   line-height: 1;
   margin-bottom: 5px;
}


/* ------------------------------ */
/* ------------------------------ */
/* OVERVIEW */
.Overview {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.Overview .box {
   display: block;
   width: calc((100% / 3) - 10px);
   height: 128px;
   background-color: var(--backgroundMainColor);
   border: 1px solid var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
   color: var(--fontMainColor);
   margin-right: 15px;
   margin-bottom: 15px;
}

.Overview .box:nth-child(3n) {
   margin-right: 0px;
}

.Overview .value {
   width: 100%;
   height: 70px;
   padding: 25px;
   background-image: url('../../images/patterns/a.png');
   background-size: var(--backgroundMainSize);
   text-align: right;
   font-size: 20px;
}

.Overview .name {
   width: 100%;
   height: 56px;
   padding: 20px;
   background-color: transparent;
   border-top: 1px solid var(--borderMainColor);
   text-align: left;
   font-size: 14px;
   line-height: 0.95;
   border-radius: 0px 0px 5px 5px;
}


/* ------------------------------ */
/* ------------------------------ */
/* TABLE */
.Table .header {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 25px;
   padding-bottom: 5px;
   background-color: var(--backgroundMainColor);
   background-image: url('../images/patterns/a.png');
   background-size: var(--backgroundMainSize);
   border: 1px solid var(--borderMainColor);
   border-radius: var(--borderRadiusTwo);
}

.Table .data {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 25px;
   padding-bottom: 5px;
   background-color: var(--backgroundMainColor);
   border: 1px solid var(--borderMainColor);
   border-top: none;
}

.Table .row {
   display: block;
   width: 100%;
   height: 20px;
   margin-bottom: 15px;
   color: var(--fontMainColor);
   font-size: 16px;
   line-height: 1;
}

.Table .data-a {
   display: block;
   width: calc(100% - 400px);
   height: 20px;
   float: left;
   text-align: left;
}

.Table .data-b {
   display: block;
   width: 200px;
   height: 20px;
   float: left;
   text-align: right;
}

.Table .data-c {
   display: block;
   width: 400px;
   height: 20px;
   float: left;
   text-align: right;
}

.Table .data-d {
   display: block;
   width: 50%;
   height: 20px;
   padding: 0px;
   float: left;
   text-align: left;
}

.Table .data-d:nth-child(odd) {
   padding-right: 12.5px;
}

.Table .data-d:nth-child(even) {
   padding-left: 12.5px;
}


/* --------------------------- */
/* --------------------------- */
/* FORM */
.Form {
   display: block;
   width: calc(100% + 30px);
   height: auto;
   overflow: auto;
   margin: -15px;
}

.Form .text-editor {
   padding: 25px;
   padding-bottom: 0px;
}

.Form .header {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 0px;
   padding-bottom: 0px;
   margin-bottom: 0px;
}

.Form .header-title {
   display: block;
   width: 100%;
   height: 150px;
   padding: 50px;
   background-color: transparent;
   border-bottom: 1px solid var(--borderMainColor);
   font-size: 50px;
   font-weight: var(--fontThree);
   color: var(--fontMainColor);
}

.Form .header-description {
   display: block;
   width: 100%;
   min-height: 120px;
   overflow: auto;
   padding: 50px;
   padding-bottom: 0px;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   color: var(--placeholderMainColor);
   font-size: 20px;
   font-weight: var(--fontOne);
   line-height: 1.5;
   margin-top: 0px;
}

.Form .field {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 0px;
   margin-bottom: 0px;
}

.Form .field-name {
   display: block;
   width: 100%;
   height: 130px;
   padding: 50px;
   background-color: transparent;
   font-size: 30px;
   font-weight: var(--fontTwo);
   color: var(--fontMainColor);
}

.Form .textinfo {
   display: block;
   width: 100%;
   height: 80px;
   padding: 30px;
   background-color: var(--backgroundMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   border-radius: 0px;
   font-size: 20px;
   font-weight: var(--fontOne);
   color: var(--fontMainColor);
   margin-bottom: 0px;
}

.Form .textfield {
   display: block;
   width: 100%;
   height: 80px;
   padding: 30px;
   background-color: var(--backgroundMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   border-radius: 0px;
   font-size: 20px;
   font-weight: var(--fontOne);
   color: var(--fontMainColor);
}

.Form .textfield.i {
   text-indent: 12.5px;
}

.Form .textarea {
   display: block;
   width: 100%;
   height: 200px;
   padding: 30px;
   background-color: var(--backgroundMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   border-radius: 0px;
   font-size: 20px;
   font-weight: var(--fontOne);
   color: var(--fontMainColor);
   resize: none;
}

.Form .sign {
   position: absolute;
   display: block;
   top: 140px;
   left: 10px;
   width: 25px;
   height: 50px;
   padding: 15px;
   background-color: transparent;
   color: var(--fontMainColor);
   font-size: 20px;
   font-weight: var(--fontOne);
   line-height: 1.5;
   text-align: right;
}

.Form .length {
   position: absolute;
   display: block;
   top: 140px;
   right: 20px;
   width: 100px;
   height: 50px;
   padding: 15px;
   background-color: var(--backgroundMainColor);
   border-radius: 2px;
   color: var(--fontMainColor);
   font-size: 12px;
   font-weight: var(--fontOne);
   line-height: 1.5;
   text-align: right;
}

.Form .instructions {
   display: none;
   width: 100%;
   min-height: 74px;
   overflow: auto;
   padding: 30px;
   background-color: var(--backgroundMainColor);
   border-radius: var(--borderRadiusOne);
   color: var(--placeholderMainColor);
   font-size: 14px;
   font-weight: var(--fontOne);
   line-height: 1.5;
   text-transform: lowercase;
   margin-top: 15px;
}

.Form .textfield:focus ~ .instructions {
   display: block;
}

.Form .menu {
   position: relative;
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
}

.Form .select {
   display: block;
   width: 100%;
   height: 72px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid var(--borderMainColor);
   color: var(--fontMainColor);
   font-size: 20px;
   font-weight: var(--fontOne);
   line-height: 1;
}

.Form .select:hover {
   cursor: pointer;
}

.Form .select::after {
   content: '\21B4';
   position: absolute;
   right: 25px;
   top: 20px;
   font-size: 25px;
}

.Form .options {
   position: absolute;
   display: none;
   top: 71px;
   left: -1px;
   width: calc(100% + 1px);
   max-height: 200px;
   overflow: auto;
   background-color: var(--backgroundMainColor);
   border: 1px solid var(--borderMainColor);
   border-right: none;
   z-index: 10;
}

.Form .option {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   background-color: transparent;
   font-size: 20px;
   line-height: 1.1;
   color: var(--fontMainColor);
   font-weight: var(--fontOne);
}

.Form .option:hover {
   cursor: pointer;
   background-color: #252525;
   color: var(--accentMainColor);
}

.Form .submit {
   display: block;
   width: calc(100% - 50px);
   height: 80px;
   padding: 0px;
   background-color: var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
   margin: 55px 25px;
   margin-top: 45px;
}

.Form .submit input {
   display: block;
   width: 100%;
   height: 80px;
   padding: 0px;
   background-color: var(--accentMainColor);
   border: 1px solid var(--accentMainColor);
   border-radius: var(--borderRadiusOne);
   color: #000;
   font-size: 20px;
   font-weight: var(--fontThree);
   text-align: center;
   text-transform: uppercase;
   transform: translateY(-10px);
}

.Form .submit input:hover {
   cursor: pointer;
   background-color: var(--accentMainColor);
   border: 1px solid var(--accentMainColor);
}

.Form .submit input:active {
   cursor: pointer;
   background-color: var(--accentMainColor);
   border: 1px solid var(--accentMainColor);
   transform: translateY(0px);
}


/* ------------------------------ */
/* ------------------------------ */
/* CHECKBOX */
.Checkboxes {
   display: block;
   width: 100%;
   height: 100%;
   overflow: auto;
   padding: 0px;
}

.Checkbox {
   display: block;
}

.Checkbox+label {
   position: relative;
   display: block;
   width: 100%;
   min-height: 120px;
   overflow: auto;
   padding: 50px;
   background-color: var(--backgroundMainColor);
   border-bottom: 1px solid var(--borderMainColor);
   border-radius: 0px;
   color: var(--fontMainColor);
   font-size: 18px;
   line-height: 2.5;
   text-align: left;
   margin-top: 5px;
   margin-bottom: 15px;
   cursor: pointer;
}

.Checkbox+label:last-child {
   margin-bottom: 0px;
}

.Checkbox:empty+label::before {
   content: ' ';
   position: relative;
   display: block;
   top: 0px;
   left: 0px;
   width: 100px;
   height: 50px;
   float: left;
   background-color: var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
   margin-right: 25px;
}

.Checkbox:checked+label::before {
   background-color: var(--borderMainColor);
}

.Checkbox:empty+label::after {
   content: ' ';
   position: absolute;
   display: block;
   top: 50px;
   left: 50px;
   width: 50px;
   height: 50px;
   float: left;
   background-color: var(--placeholderMainColor);
   border-radius: var(--borderRadiusOne);
   transition: all 200ms;
}

.Checkbox:checked+label::after {
   left: 100px;
   background-color: var(--accentMainColor);
}


/* ------------------------------ */
/* ------------------------------ */
/* FOOTER */
.Footer {
   position: fixed;
   display: block;
   bottom: 0px;
   left: 0px;
   width: 100%;
   height: 91px;
   background-color: var(--backgroundMainColor);
   border-bottom: 10px solid var(--borderMainColor);
   border-top: 1px solid var(--borderMainColor);
   margin-top: 0px;
}

.Footer .center {
   position: relative;
   display: block;
   width: var(--websiteWidth);
   height: 80px;
   margin: auto;
}

.Footer .name {
   display: block;
   width: auto;
   height: 80px;
   padding: 23px 0px;
   color: var(--fontMainColor);
   font-size: 30px;
   font-weight: var(--fontTwo);
   line-height: 1;
   float: right;
}

.Footer .name.x,
.Footer .name:hover {
   cursor: pointer;
   color: var(--accentMainColor);
}

.Footer .nav {
   display: block;
   width: auto;
   height: 80px;
   padding: 32px 0px;
   color: var(--placeholderMainColor);
   font-size: 15px;
   font-weight: var(--fontOne);
   line-height: 1;
   word-spacing: 15px;
   text-align: left;
   float: left;
}

.Footer .link {
   display: inline-block;
   width: auto;
   height: 15px;
   color: var(--fontMainColor);
   font-size: 15px;
   font-weight: var(--fontOne);
   line-height: 1;
   word-spacing: normal;
}

.Footer .link::after {
   content: '/';
   width: auto;
   margin-left: 20px;
   color: var(--borderMainColor);
}

.Footer .link.x,
.Footer .link:hover {
   cursor: pointer;
   color: var(--accentMainColor);
}

.Footer .link.x::after,
.Footer .link:hover::after {
   color: var(--borderMainColor);
}

.Footer .link:last-child::after {
   content: '';
   margin-left: 0px;
}

.Footer #footerMenuBtn {
   display: none;
}


/* ------------------------------ */
/* ------------------------------ */
/* GLOBAL */
.Messages {
   position: fixed;
   display: block;
   top: 0px;
   left: 0px;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 25px;
   color: #000;
   font-size: 18px;
   text-align: center;
   background-color: #fcecc3;
   line-height: normal;
   z-index: 110;
}

.LOADING,
.EMPTY {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   color: var(--fontMainColor);
   font-size: 14px;
   text-align: center;
}

.ERRORS {
   display: none;
   width: calc(100% - 50px);
   height: auto;
   padding: 25px;
   background-color: #fcecc3;
   border: 1px solid #fcecc3;
   border-radius: var(--borderRadiusOne);
   color: #000;
   font-size: 18px;
   font-weight: var(--fontOne);
   line-height: normal;
   text-align: left;
   margin: 25px;
}

.MORE {
   display: block;
   width: calc(100% - 50px);
   height: 70px;
   padding: 25px;
   background-color: var(--backgroundMainColor);
   border-bottom: 5px solid var(--borderMainColor);
   border-radius: var(--borderRadiusOne);
   font-size: 18px;
   font-weight: var(--fontTwo);
   color: var(--fontMainColor);
   text-align: center;
   text-transform: uppercase;
   line-height: 1;
   margin: 25px;
   margin-bottom: 0px;
}

.MORE:hover {
   cursor: pointer;
   border-bottom: 5px solid var(--accentMainColor);
   color: var(--accentMainColor);
}

.Padding {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 25px;
}

.Title {
   display: block;
   width: calc(100% + 30px);
   height: 100px;
   overflow: visible;
   padding: 25px;
   border-bottom: 1px solid var(--borderMainColor);
   color: var(--fontMainColor);
   font-size: 45px;
   font-weight: var(--fontThree);
   line-height: 1;
   margin: -15px;
   margin-bottom: 15px;
}

.SubTitle {
   display: block;
   width: calc(100% + 30px);
   height: 70px;
   overflow: visible;
   padding: 25px;
   border-bottom: 1px solid var(--borderMainColor);
   color: var(--fontMainColor);
   font-size: 18px;
   font-weight: var(--fontTwo);
   line-height: 1;
   margin: -15px;
   margin-bottom: 15px;
}

#CLOSE {
   position: fixed;
   display: none;
   top: 0px;
   right: 0px;
   width: calc(100% - 300px);
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 20;
}

.DESKTOP {
   display: none !important;
}


/* ------------------------------ */
/* ------------------------------ */
/* HTML */
h1 {
   display: block;
   width: 100%;
   min-height: 40px;
   overflow: auto;
   font-size: 40px;
   margin-bottom: 50px;
   text-align: center;
   line-height: 1.6;
}

h2 {
   display: block;
   width: 100%;
   min-height: 30px;
   overflow: auto;
   font-size: 30px;
   margin-bottom: 15px;
   text-align: left;
   line-height: 1.6;
   text-transform: capitalize;
}

h3 {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   font-size: 20px;
   margin-bottom: 15px;
   text-align: left;
   line-height: 1.6;
   text-transform: capitalize;
}

p {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   font-size: 20px;
   margin-bottom: 25px;
   text-align: left;
   line-height: 1.6;
}

ul, ol { 
   display: block;
   list-style: disc outside none;
   margin: 1em 0;
   padding: 0 0 0 40px;
   font-size: 20px;
   text-align: left;
   line-height: 1.6;
}

ol { 
   list-style-type: decimal;
}

li { 
   display: list-item;
   margin-bottom: 15px;
   line-height: 1.6;
}