/* ------------------------------ */
/* ------------------------------ */
/* ROOT */
:root {
   --padding-a: 10px;
}


/* ------------------------------ */
/* ------------------------------ */
/* HEADER */
#Header {
   position: fixed;
   display: block;
   top: 0px;
   width: 100%;
   height: 86px;
   background-color: var(--background-primary);
   border-top: 5px solid var(--primary-color);
   border-bottom: 1px solid var(--border-color);
   margin-bottom: 0px;
   z-index: 100;
}

#Header .center {
   position: relative;
   display: block;
   width: 100%;
   height: 80px;
   padding: 0px 20px;
   margin: auto;
}

#Header .logo {
   display: block;
   width: auto;
   height: 80px;
   padding: 23px 0px;
   color: var(--text-primary);
   font-size: 30px;
   font-weight: 600;
   line-height: 1;
   float: left;
}

#Header .nav {
   position: fixed;
   display: none;
   top: 0px;
   right: 0px;
   width: 300px;
   height: 100%;
   padding: 10px;
   background-color: var(--background-primary);
   border-left: 1px solid var(--border-color);
   border-right: 5px solid var(--primary-color);
}

#Header .link {
   position: relative;
   display: block;
   width: auto;
   height: 50px;
   padding: 15px;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
   margin-bottom: 10px;
}

#Header .link.x,
#Header .link:hover {
   cursor: pointer;
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   color: var(--text-secondary);
}

#Header .link::after {
   content: '\00BB';
   position: absolute;
   top: 15px;
   right: 15px;
}

#Header #headerBtn {
   display: block;
   width: 50px;
   height: 50px;
   float: right;
   margin: 15px 0px;
}


/* --------------------------- */
/* --------------------------- */
/* LAYOUT */
#Content {
   position: absolute;
   display: block;
   top: 86px;
   left: 0px;
   width: 100%;
   min-height: calc(100vh - 172px);
   padding: var(--padding-a);
   padding-bottom: 100px;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   border-top: none;
   border-bottom: none;
   overflow: auto;
}

#Sidebar {
   position: fixed;
   display: none;
   top: 0px;
   right: 0px;
   width: 300px;
   height: 100%;
   background-color: var(--background-primary);
   border-left: 1px solid var(--border-color);
   border-right: 1px solid var(--border-color);
   overflow: auto;
}


/* --------------------------- */
/* --------------------------- */
/* SIDEBAR */
#Sidebar .header {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   border-left: 5px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
   color: var(--text-primary);
   font-size: 30px;
   font-weight: 600;
   line-height: 1;
}

#Sidebar .ad {
   display: block;
   width: 100%;
   min-height: 250px;
   overflow: auto;
   padding: 25px;
   background-color: var(--background-secondary);
   border-bottom: 1px solid var(--border-color);
}

#Sidebar .link {
   position: relative;
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   border-bottom: 1px solid var(--border-color);
   color: var(--text-primary);
   font-size: 20px;
   font-weight: 400;
   line-height: 1;
}

#Sidebar .link::after {
   content: '\00BB';
   position: absolute;
   top: 22.5px;
   right: 22.5px;
}

#Sidebar .link:hover {
   cursor: pointer;
   background-color: var(--background-secondary);
   color: var(--primary-color);
}

#Sidebar .textfield {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   background-color: var(--background-secondary);
   border-bottom: 1px solid var(--border-color);
   color: var(--text-primary);
   font-size: 20px;
   font-weight: 400;
   line-height: 1;
}

#Sidebar .wrapper {
   display: block;
   width: auto;
   height: auto;
   overflow: auto;
   padding: 10px;
   padding-bottom: 0px;
}


/* --------------------------- */
/* --------------------------- */
/* PAGE HEADER */
#Page-Header {
   display: block;
   width: auto;
   height: auto;
   padding: 20px;
   padding-bottom: 30px;
   border-bottom: 1px solid var(--border-color);
   margin-bottom: 10px;
}

#Page-Header h1 {
   display: block;
   width: auto;
   height: auto;
   overflow: visible;
   color: var(--text-primary);
   font-size: 20px;
   font-weight: 600;
   line-height: 1;
   text-align: center;
   margin-bottom: 10px;
}

#Page-Header p {
   display: block;
   width: auto;
   height: auto;
   overflow: auto;
   color: var(--text-primary);
   font-size: 10px;
   font-weight: 400;
   line-height: 1.6;
   text-align: center;
}


/* ------------------------------ */
/* ------------------------------ */
/* POST */
#Post {
   display: block;
   width: auto;
   min-height: 100px !important;
   overflow: auto;
   padding: 0px;
   padding-bottom: var(--padding-a);
   background-color: var(--background-primary);
   border: 0px solid var(--border-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

#Post h1 {
   display: block;
   width: auto;
   min-height: 22px;
   overflow: visible;
   padding: 15px;
   border-left: 5px solid var(--border-color);
   color: var(--text-primary);
   font-size: 22px;
   font-weight: 600;
   line-height: 1.6;
   margin-bottom: 10px;
}

#Post h2 {
   display: block;
   width: auto;
   height: auto;
   overflow: visible;
   padding: 0px;
   color: var(--text-primary);
   font-size: 16px;
   font-weight: 600;
   line-height: 1.6;
   margin-bottom: 10px;
}

#Post p {
   display: block;
   width: auto;
   height: auto;
   overflow: visible;
   padding: 0px;
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1.6;
   margin-bottom: 10px;
}

#Post *:last-child {
   margin-bottom: 0px;
}


/* ------------------------------ */
/* ------------------------------ */
/* FOOTER */
#Footer {
   position: fixed;
   display: block;
   bottom: 0px;
   width: 100%;
   height: 86px;
   background-color: var(--background-primary);
   border-top: 1px solid var(--border-color);
   border-bottom: 5px solid var(--border-color);
   margin-bottom: 0px;
   z-index: 100;
}

#Footer .center {
   position: relative;
   display: block;
   width: 100%;
   height: 80px;
   padding: 0px 20px;
   margin: auto;
}

#Footer .logo {
   display: block;
   width: auto;
   height: 80px;
   padding: 23px 0px;
   color: var(--text-primary);
   font-size: 30px;
   font-weight: 600;
   line-height: 1;
   float: right;
}

#Footer .nav {
   position: fixed;
   display: none;
   top: 0px;
   right: 0px;
   width: 300px;
   height: 100%;
   padding: 10px;
   background-color: var(--background-primary);
   border-left: 1px solid var(--border-color);
   border-right: 5px solid var(--border-color);
}

#Footer .link {
   position: relative;
   display: block;
   width: auto;
   height: 50px;
   padding: 15px;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
   margin-bottom: 10px;
}

#Footer .link.x,
#Footer .link:hover {
   cursor: pointer;
   background-color: var(--primary-color);
   border-color: var(--primary-color);
   color: var(--text-secondary);
}

#Footer .link::after {
   content: '\00BB';
   position: absolute;
   top: 15px;
   right: 15px;
}

#Footer #footerBtn {
   display: block;
   width: 50px;
   height: 50px;
   float: left;
   margin: 15px 0px;
}


/* ------------------------------ */
/* ------------------------------ */
/* DISCUSSION */
#Discussion {
   display: grid;
   grid-template-columns: 80px calc(100% - 80px);
   width: auto;
   min-height: 96px;
   overflow: auto;
   padding: var(--padding-b) 0px;
   background-color: var(--background-primary);
   border-bottom: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

#Discussion .image {
   display: block;
   width: 80px;
   height: 96px;
   overflow: hidden;
   border-radius: var(--border-radius);
}

#Discussion .image img {
   display: block;
   width: 100%;
   height: 100%;
}

#Discussion .info {
   display: grid;
   grid-template-rows: minmax(18px, auto) minmax(12px, auto) 14px 14px;
   gap: 5px;
   width: auto;
   min-height: 100%;
   overflow: visible;
   padding: var(--padding-a);
}

#Discussion .title {
   display: block;
   width: 100%;
   min-height: 18px;
   overflow: auto;
   color: var(--text-primary);
   font-size: 18px;
   font-weight: 600;
   line-height: 1.6;
   text-transform: capitalize;
   word-wrap: break-word;
   margin-bottom: 0px;
}

#Discussion .content {
   display: block;
   width: 100%;
   min-height: 12px;
   padding: 0px;
   color: var(--placeholder);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.6;
}

#Discussion .row {
   display: block;
   width: 100%;
   height: 12px;
   padding: 0px;
   color: var(--placeholder);
   font-size: 12px;
   font-weight: 400;
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* SECTIONS */
.Sections {
   display: grid;
   gap: 10px;
   width: auto;
   height: auto;
   overflow: auto;
   margin-bottom: 10px;
}

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

.Sections.col-2 {
   grid-template-columns: 1fr 1fr;
}

.Sections.col-3 {
   grid-template-columns: 1fr 1fr 1fr;
}

.Sections.col-4 {
   grid-template-columns: 1fr 1fr 1fr 1fr;
}

.Sections .section {
   display: block;
   width: auto;
   height: 55px;
   padding: 15px;
   background-color: var(--background-primary);
   border: 1px solid var(--background-primary);
   border-radius: var(--border-radius);
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
   text-align: center;
   text-transform: uppercase;
}

.Sections .section.x,
.Sections .section:hover {
   cursor: pointer;
   background-color: var(--background-primary);
   border-bottom: 5px solid var(--primary-color);
   color: var(--primary-color);
}

.Sections .section.highlight {
   cursor: pointer;
   height: 45px;
   padding: 15px;
   background-color: var(--primary-color);
   border: 1px solid var(--primary-color);
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: 600;
}

.Sections.col-3 .section,
.Sections.col-4 .section {
   height: 70px;
   padding: 25px 0px;
   font-size: 20px;
}


/* ------------------------------ */
/* ------------------------------ */
/* USERS */
.Users {
   position: relative;
   display: grid;
   grid-template-columns: 80px calc(100% - 80px);
   width: auto;
   min-height: 80px;
   overflow: auto;
   padding: var(--padding-b);
   background-color: var(--primary-color);
   border: 1px solid var(--primary-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

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

.Users .image {
   display: block;
   width: 80px;
   height: 96px;
   overflow: hidden;
   border-radius: var(--border-radius);
}

.Users .image img {
   display: block;
   width: 100%;
   height: 100%;
}

.Users .info {
   display: grid;
   grid-template-rows: 20px repeat(5, 10px);
   gap: 5px;
   width: 100%;
   min-height: 100%;
   overflow: visible;
   padding: var(--padding-a);
}

.Users .name {
   display: block;
   width: 100%;
   height: 16px;
   color: var(--text-secondary);
   font-size: 16px;
   font-weight: 600;
   text-transform: capitalize;
}

.Users .row {
   display: block;
   width: 100%;
   height: 00px;
   padding: 0px;
   color: var(--text-secondary);
   font-size: 10px;
   font-weight: 400;
   line-height: 1;
}

.Users .date {
   position: absolute;
   display: block;
   top: 25px;
   right: 20px;
   width: auto;
   height: auto;
   color: var(--text-secondary);
   font-size: 10px;
   font-weight: 400;
   line-height: 1;
}

.Users .count-a {
   float: left;
}

.Users .count-b {
   float: right;
}


/* ------------------------------ */
/* ------------------------------ */
/* POSTS */
.Posts {
   display: grid;
   grid-template-columns: 80px calc(100% - 80px);
   width: auto;
   min-height: 120px;
   overflow: visible;
   padding: var(--padding-b) 0px;
   background-color: var(--background-primary);
   border-bottom: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

/* .Posts:last-child {
   margin-bottom: 0px;
} */

.Posts .image {
   display: block;
   width: 80px;
   height: 96px;
   overflow: hidden;
   border-radius: var(--border-radius);
}

.Posts .image img {
   display: block;
   width: 100%;
   height: 100%;
}

.Posts .info {
   display: grid;
   grid-template-rows: calc(100% - 14px) 14px;
   width: auto;
   min-height: 100%;
   overflow: visible;
   padding: var(--padding-a);
}

.Posts .title {
   display: block;
   width: 100%;
   min-height: 18px;
   overflow: auto;
   color: var(--text-primary);
   font-size: 18px;
   font-weight: 600;
   line-height: 1.6;
   text-transform: capitalize;
   word-wrap: break-word;
}

.Posts .row {
   display: block;
   width: 100%;
   height: 14px;
   padding: 0px;
   color: var(--placeholder);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
}

.Posts .user {
   color: var(--primary-color);
   text-align: left;
}

.Posts .count {
   float: right;
}


/* ------------------------------ */
/* ------------------------------ */
/* COMMENTS */
.Comments {
   position: relative;
   display: grid;
   grid-template-columns: 80px calc(100% - 80px);
   width: auto;
   min-height: 60px;
   overflow: auto;
   padding: var(--padding-b) 0px;
   background-color: var(--background-primary);
   border-bottom: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

/* .Comments:last-child {
   margin-bottom: 0px;
} */

.Comments .image {
   display: block;
   width: 80px;
   height: 96px;
   overflow: hidden;
   border-radius: var(--border-radius);
}

.Comments .image img {
   display: block;
   width: 100%;
   height: 100%;
}

.Comments .info {
   display: grid;
   grid-template-rows: 20px auto;
   gap: 10px;
   width: auto;
   min-height: 100%;
   overflow: auto;
   padding: var(--padding-a);
}

.Comments .name {
   display: block;
   width: 100%;
   height: 20px;
   color: var(--text-primary);
   font-size: 16px;
   font-weight: 600;
}

.Comments .comment {
   display: block;
   width: 100%;
   min-height: 10px;
   overflow: visible;
   padding: 0px;
   color: var(--text-primary);
   font-size: 10px;
   font-weight: 400;
   line-height: 1.6;
}

.Comments .date {
   position: absolute;
   display: block;
   top: 20px;
   right: 20px;
   width: auto;
   height: 10px;
   color: var(--placeholder);
   font-size: 8px;
   font-weight: 400;
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* DISCUSSIONS */
.Discussions {
   position: relative;
   display: grid;
   grid-template-columns: 80px calc(100% - 80px);
   width: auto;
   min-height: 60px;
   overflow: visible;
   padding: var(--padding-b) 0px;
   background-color: var(--background-primary);
   border-bottom: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

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

.Discussions .image {
   display: block;
   width: 80px;
   height: 96px;
   overflow: hidden;
   border-radius: var(--border-radius);
}

.Discussions .image img {
   display: block;
   width: 100%;
   height: 100%;
}

.Discussions .info {
   display: grid;
   grid-template-rows: minmax(16px, auto) 10px 10px;
   gap: 5px;
   width: auto;
   min-height: 100%;
   overflow: visible;
   padding: var(--padding-a);
}

.Discussions .title {
   display: block;
   width: 100%;
   min-height: 16px;
   overflow: visible;
   color: var(--text-primary);
   font-size: 16px;
   font-weight: 600;
   line-height: 1.6;
}

.Discussions .row {
   display: block;
   width: 100%;
   height: 10px;
   padding: 0px;
   color: var(--placeholder);
   font-size: 10px;
   font-weight: 400;
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* REPLIES */
.Replies {
   position: relative;
   display: grid;
   grid-template-columns: 80px calc(100% - 80px);
   width: auto;
   min-height: 100px;
   overflow: visible;
   padding: var(--padding-b) 0px;
   background-color: var(--background-primary);
   border-bottom: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

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

.Replies .image {
   display: block;
   width: 80px;
   height: 96px;
   overflow: hidden;
   border-radius: var(--border-radius);
}

.Replies .image img {
   display: block;
   width: 100%;
   height: 100%;
}

.Replies .info {
   display: grid;
   grid-template-rows: 18px minmax(10px, auto);
   gap: 10px;
   width: auto;
   min-height: 100%;
   overflow: visible;
   padding: var(--padding-a);
}

.Replies .name {
   display: block;
   width: auto;
   min-height: 18px;
   overflow: visible;
   color: var(--text-primary);
   font-size: 18px;
   font-weight: 600;
}

.Replies .comment {
   display: block;
   width: 100%;
   min-height: 10px;
   overflow: visible;
   padding: 0px;
   color: var(--text-primary);
   font-size: 10px;
   font-weight: 400;
   line-height: 1;
}

.Replies .date {
   position: absolute;
   display: block;
   top: 20px;
   right: 20px;
   width: auto;
   height: 10px;
   color: var(--placeholder);
   font-size: 8px;
   font-weight: 400;
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* NOTIFICATIONS */
.Notifications {
   position: relative;
   display: grid;
   grid-template-columns: 64px calc(100% - 64px);
   width: auto;
   height: 100px;
   padding: var(--padding-b);
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

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

.Notifications .image {
   display: block;
   width: auto;
   height: 78px;
   overflow: hidden;
   border-radius: var(--border-radius);
}

.Notifications .image img {
   display: block;
   width: 100%;
   height: 100%;
}

.Notifications .info {
   display: grid;
   grid-template-rows: calc(100% - 20px) 20px;
   gap: 5px;
   width: auto;
   height: 100%;
   padding: var(--padding-a);
}

.Notifications .name {
   display: block;
   width: 100%;
   height: 100%;
   color: var(--text-primary);
   font-size: 18px;
   font-weight: 600;
}

.Notifications .comment {
   display: block;
   width: 100%;
   height: 20px;
   padding: 0px;
   color: var(--text-primary);
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
}

.Notifications .date {
   position: absolute;
   display: block;
   top: 30px;
   right: 30px;
   width: auto;
   height: 10px;
   color: var(--placeholder);
   font-size: 10px;
   font-weight: 400;
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* FORM */
.Form {
   position: relative;
   display: block;
   width: auto;
   height: auto;
   padding: 0px;
   background-color: var(--background-primary);
   border: 0px solid var(--border-color);
   border-radius: var(--border-radius);
   margin-bottom: var(--padding-a);
}

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

.Form .field {
   display: grid;
   grid-template-columns: 40% 60%;
   width: auto;
   height: auto;
   margin-bottom: var(--padding-b);
}

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

.Form .field-name {
   display: block;
   width: auto;
   height: auto;
   padding: 15px;
   color: var(--text-primary);
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
   text-align: left;
   text-transform: capitalize;
}

.Form .textfield {
   display: block;
   width: auto;
   height: 45px;
   padding: 15px;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
}

.Form .textarea {
   display: block;
   width: auto;
   height: 100px;
   padding: 15px;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1.6;
   resize: none;
}

.Form .select {
   position: relative;
   display: grid;
   grid-template-columns: 40% 60%;
   width: 100%;
   min-height: 50px;
   overflow: visible;
   margin-bottom: var(--padding-b);
}

.Form .selectfield {
   display: block;
   width: 100%;
   height: 50px;
   padding: 15px;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
}

.Form .selectfield::after {
   content: '\21B4';
   position: absolute;
   top: 15px;
   right: 20px;
}

.Form .selectfield+.options-menu {
   position: absolute;
   display: none;
   top: 60px;
   left: 40%;
   width: 60%;
   max-height: 200px;
   overflow: auto;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   z-index: 5;
}

.Form .selectfield+.options-menu>.option {
   display: block;
   width: 100%;
   height: 50px;
   padding: 15px;
   color: var(--text-primary);
   font-size: 14px;
}

.Form .selectfield+.options-menu>.option:hover {
   background-color: var(--background-primary);
   color: var(--primary-color);
   cursor: pointer;
}

.Form .submit {
   display: block;
   width: auto;
   height: 50px;
   padding: 15px;
   background-color: var(--primary-color);
   border: 1px solid var(--primary-color);
   border-radius: var(--border-radius);
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: 600;
   line-height: 1;
   text-align: center;
}


/* ------------------------------ */
/* ------------------------------ */
/* CHECKBOX */
.Checkboxes {
   display: block;
   width: auto;
   height: auto;
   overflow: auto;
   background-color: var(--background-secondary);
   margin-bottom: 0px;
}

.Checkbox {
   display: block;
}

.Checkbox + label {
   position: relative;
   display: block;
   width: 100%;
   min-height: 60px;
   overflow: auto;
   padding: 0px;
   background-color: var(--background-secondary);
   border-radius: var(--border-radius);
   color: var(--text-color);
   font-size: 18px;
   line-height: 2.5;
   text-align: left;
   text-transform: capitalize;
   cursor: pointer;
}

.Checkbox:empty + label::before {
   content: ' ';
   position: relative;
   display: block;
   top: 0px;
   left: 0px;
   width: 120px;
   height: 60px;
   float: left;
   background-color: var(--background-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
}

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

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

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


/* ------------------------------ */
/* ------------------------------ */
/* FORM */
#Close {
   position: fixed;
   display: none;
   top: 0px;
   left: 0px;
   width: calc(100% - 300px);
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 60;
}

#Messages {
   position: fixed;
   display: block;
   top: 0px;
   left: 0px;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 20px;
   color: #000;
   font-size: 18px;
   text-align: center;
   background-color: #fcecc3;
   line-height: 1.6;
   z-index: 1000;
}

.Errors {
   display: block;
   width: calc(100% - 0px);
   height: auto;
   padding: 15px;
   background-color: #fcecc3;
   border: 1px solid #fcecc3;
   border-radius: var(--border-radius);
   color: #000;
   font-size: 10px;
   font-weight: 400;
   line-height: normal;
   text-align: left;
   margin-bottom: 0px;
}

.Empty {
   display: block;
   width: 100%;
   height: 50px;
   padding: 15px;
   color: var(--text-primary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
   text-align: center;
   text-transform: capitalize;
}

.Load-More {
   position: relative;
   display: block;
   width: auto;
   height: 56px;
   padding: 20px;
   background-color: var(--background-primary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   color: var(--text-primary);
   font-size: 16px;
   font-weight: 600;
   line-height: 1;
   text-align: left;
   text-transform: uppercase;
   margin-bottom: 15px;
}

.Load-More::after {
   content: '\00BB';
   position: absolute;
   top: 18px;
   right: 20px;
}

.Load-More:hover {
   cursor: pointer;
   background-color: var(--background-secondary);
   color: var(--primary-color);
}

#backBtn,
#switchBtn {
   display: block;
   width: auto;
   height: 50px;
   padding: 15px;
   background-color: var(--primary-color);
   border: 1px solid var(--primary-color);
   border-radius: var(--border-radius);
   color: var(--text-secondary);
   font-size: 14px;
   font-weight: 400;
   line-height: 1;
   text-align: center;
   margin-bottom: 10px;
}