/* ------------------------------ */
/* ------------------------------ */
/* LOGIN */
.Login {
   position: fixed;
   top: 200px;
   left: calc(50% - 250px);
   display: block;
   width: 500px;
   height: auto;
   overflow: auto;
   background-color: #fff;
   border: 1px solid #ddd;
   border-top: 10px solid #2d97e5;
   border-radius: 5px;
}

.Login .header {
   position: relative;
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   border-bottom: 1px solid #ddd;
   color: #000;
   font-size: 30px;
   font-weight: 400;
   line-height: 1;
   text-align: left;
}

.Login .header .FR {
   position: absolute;
   display: block;
   top: 35px;
   right: 35px;
   font-size: 14px;
   text-transform: uppercase;
   color: #aaa;
}

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

.Login .textfield {
   display: block;
   width: 100%;
   height: 65px;
   padding: 25px;
   background-color: #f5f5f5;
   border: 1px solid #ddd;
   border-radius: 5px;
   margin-bottom: 15px;
   text-align: center;
}

.Login .submit {
   display: block;
   width: 100%;
   height: 65px;
   padding: 25px;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
   border-radius: 5px;
   color: #fff;
   text-transform: uppercase;
}


/* ------------------------------ */
/* ------------------------------ */
/* HEADER */
.Header {
   display: block;
   width: 100%;
   height: 91px;
   background-color: #fff;
   border-top: 10px solid #2d97e5;
   border-bottom: 1px solid #ddd;
   margin-bottom: 0px;
}

.Header .center {
   position: relative;
   display: block;
   width: 1024px;
   height: 80px;
   margin: auto;
}

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

.Header .logo.x,
.Header .logo:hover {
   cursor: pointer;
   color: #2d97e5;
}

.Header .nav {
   display: block;
   width: auto;
   height: 80px;
   padding: 32px 0px;
   color: #ddd;
   font-size: 15px;
   font-weight: 200;
   line-height: 1;
   word-spacing: 15px;
   text-align: right;
   float: right;
}

.Header .link {
   display: inline-block;
   width: auto;
   height: 15px;
   color: #000;
   font-size: 15px;
   font-weight: 400;
   line-height: 1;
   word-spacing: normal;
}

.Header .link.x,
.Header .link:hover {
   cursor: pointer;
   color: #2d97e5;
}


/* ------------------------------ */
/* ------------------------------ */
/* CONTENT */
.Content {
   display: block;
   width: 1024px;
   min-height: calc(100vh - 182px);
   overflow: auto;
   padding: 0px;
   background-color: #eee;
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   margin: auto;
}

.Main {
   display: block;
   width: calc(100% - 350px);
   min-height: calc(100vh - 182px);
   overflow: auto;
   padding: 0px;
   float: left;
}

.Sidebar {
   display: block;
   width: 350px;
   padding: 0px;
   min-height: calc(100vh - 182px);
   overflow: auto;
   float: left;
}

.Main.L {
   border-left: 1px solid #ddd;
}

.Main.R {
   border-right: 1px solid #ddd;
}


/* ------------------------------ */
/* ------------------------------ */
/* SIDEBAR */
.Sidebar .user {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
}

.Sidebar .user .username {
   display: block;
   width: 100%;
   min-height: 80px;
   overflow: auto;
   padding: 25px;
   border-bottom: 1px solid #ddd;
   color: #2d97e5;
   font-size: 25px;
   font-weight: 600;
   line-height: 1;
   text-align: center;
}

.Sidebar .user .image {
   display: block;
   width: 100%;
   min-height: 250px;
   overflow: auto;
   padding: 0px;
   background-color: #eee;
   border-bottom: 10px solid #333;
}

.Sidebar .user .info {
   display: block;
   width: 100%;
   height: 65px;
   padding: 25px;
   border-bottom: 1px solid #ddd;
   color: #333;
   font-size: 15px;
   font-weight: 100;
   line-height: 1;
   text-align: left;
}

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

.Sidebar .link {
   position: relative;
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   padding-left: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   color: #333;
   font-size: 18px;
   font-weight: 400;
   line-height: 1;
   text-align: left;
   margin-bottom: 0px;
}

.Sidebar .link.x,
.Sidebar .link:hover {
   background-color: #fff;
}

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

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


/* ------------------------------ */
/* ------------------------------ */
/* DASHBOARD */
.Dashboard {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
   padding: 10px;
}

.Dashboard .row {
   display: block;
   width: 100%;
   height: 107px;
   margin-bottom: 10px;
}

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

.Dashboard .stat-x1 {
   display: block;
   width: calc((100% / 4) - ((10px * 3) / 4));
   height: 105px;
   padding: 15px;
   background-color: #eee;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-size: 16px;
   font-weight: 100;
   line-height: 1;
   float: left;
   margin-right: 10px;
}

.Dashboard .stat-x2 {
   display: block;
   width: calc((100% / 2) - ((10px * 2) / 3) + 1px);
   height: 105px;
   padding: 15px;
   background-color: #eee;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-size: 16px;
   font-weight: 100;
   line-height: 1;
   float: left;
   margin-right: 10px;
}

.Dashboard .stat-x2:last-child,
.Dashboard .stat-x1:last-child {
   margin-right: 0px;
}

.Dashboard .top {
   display: block;
   width: 100%;
   height: 30px;
   padding: 10px;
   font-size: 25px;
   font-weight: 600;
   line-height: 1;
   text-align: center;
   margin-bottom: 10px;
}

.Dashboard .bottom {
   display: block;
   width: 100%;
   height: 20px;
   padding: 5px;
   font-size: 15px;
   font-weight: 200;
   line-height: 1;
   text-align: center;
   margin-bottom: 0px;
}

.Dashboard .left {
   display: block;
   width: auto;
   height: 75px;
   padding: 25px;
   font-size: 25px;
   font-weight: 100;
   line-height: 1;
   text-align: left;
   float: left;
}

.Dashboard .right {
   display: block;
   width: auto;
   height: 75px;
   padding: 25px;
   font-size: 25px;
   font-weight: 600;
   line-height: 1;
   text-align: right;
   float: right;
}


/* ------------------------------ */
/* ------------------------------ */
/* OVERVIEW */
.Overview {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
}

.Overview .row {
   display: block;
   width: 100%;
   height: 72px;
   margin-bottom: 0px;
}

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

.Overview .data {
   display: block;
   width: 50%;
   height: 72px;
   padding: 25px;
   background-color: transparent;
   border-right: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   font-size: 20px;
   font-weight: 200;
   line-height: 1;
   float: left;
   margin-right: 0px;
}

.Overview .data:last-child {
   border-right: none;
}

.Overview .left {
   display: block;
   width: auto;
   height: 20px;
   padding: 0px;
   font-size: 20px;
   font-weight: 100;
   line-height: 1;
   text-align: left;
   float: left;
}

.Overview .right {
   display: block;
   width: auto;
   height: 20px;
   padding: 0px;
   font-size: 20px;
   font-weight: 100;
   line-height: 1;
   text-align: right;
   float: right;
}


/* ------------------------------ */
/* ------------------------------ */
/* USERS */
.Users {
   display: block;
   width: calc(100% - 0px);
   min-height: 225px;
   overflow: auto;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
}

.Users .image {
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: #ddd;
   border-radius: 5px;
   float: left;
}

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

.Users .id {
   display: block;
   width: 100%;
   height: 30px;
   overflow: visible;
   font-size: 30px;
   font-weight: 500;
   color: #000;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 15px;
}

.Users .name {
   display: block;
   width: 100%;
   min-height: 30px;
   overflow: auto;
   font-size: 24px;
   font-weight: 500;
   color: #2d97e5;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 10px;
}

.Users .email {
   display: block;
   width: 100%;
   height: 20px;
   color: #aaa;
   font-size: 20px;
   font-weight: 500;
   line-height: 1;
   margin-bottom: 15px;
}

.Users .row {
   display: block;
   width: 100%;
   height: 15px;
   color: #aaa;
   font-size: 15px;
   font-weight: 200;
   line-height: 1;
   margin-bottom: 7.5px;
}


/* ------------------------------ */
/* ------------------------------ */
/* LISTINGS */
.Listings {
   display: block;
   width: calc(100% - 0px);
   height: 250px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
}

.Listings .image {
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: #ddd;
   border-radius: 5px;
   float: left;
}

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

.Listings .id {
   display: block;
   width: 100%;
   height: 20px;
   overflow: visible;
   font-size: 20px;
   font-weight: 500;
   color: #000;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 15px;
}

.Listings .name {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   font-size: 20px;
   font-weight: 500;
   color: #2d97e5;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 7.5px;
}

.Listings .id .date {
   color: #aaa;
   float: right;
}

.Listings .description {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   color: #666;
   font-size: 14px;
   font-weight: 200;
   line-height: normal;
   margin-bottom: 15px;
}

.Listings .row {
   position: absolute;
   display: block;
   bottom: 25px;
   left: 25px;
   width: calc(100% - 50px);
   height: 20px;
   color: #000;
   font-size: 20px;
   font-weight: 500;
   line-height: 1;
}

.Listings .reject,
.Listings .approve {
   position: absolute;
   display: block;
   bottom: 0px;
   right: 0px;
   width: 50px;
   height: 50px;
   padding: 15px;
   background-color: #ddd;
   border-radius: 5px;
   color: #000;
   font-size: 20px;
   font-weight: 400;
   line-height: 1;
   text-align: center;
}

.Listings .reject {
   right: 65px;
}

.Listings .approve:hover,
.Listings .reject:hover {
   color: #fff;
   background-color: #2d97e5;
}


/* ------------------------------ */
/* ------------------------------ */
/* CATEGORIES */
.Categories {
   display: block;
   width: 100%;
   min-height: 222px;
   overflow: auto;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
}

.Categories .image {
   display: block;
   width: 200px;
   height: 200px;
   overflow: hidden;
   background-color: #ddd;
   border-radius: 5px;
   float: left;
}

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

.Categories .name {
   display: block;
   width: 100%;
   min-height: 30px;
   overflow: auto;
   font-size: 24px;
   font-weight: 500;
   color: #333;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 20px;
}

.Categories .description {
   display: block;
   width: 100%;
   min-height: 75px;
   overflow: auto;
   color: #666;
   font-size: 18px;
   font-weight: 200;
   line-height: normal;
   margin-bottom: 20px;
}

.Categories .row {
   display: block;
   width: 100%;
   height: 20px;
   color: #333;
   font-size: 20px;
   font-weight: 500;
   line-height: 1;
}


/* ------------------------------ */
/* ------------------------------ */
/* ORDERS */
.Orders {
   display: block;
   width: 100%;
   min-height: 125px;
   overflow: auto;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
}

.Orders .image {
   display: block;
   width: 125px;
   height: 125px;
   overflow: hidden;
   background-color: #ddd;
   border-radius: 5px;
   float: left;
}

.Orders .info {
   display: block;
   width: calc(100% - 125px);
   min-height: 125px;
   padding: 25px;
   padding-bottom: 0px;
   padding-top: 5px;
   padding-right: 0px;
   float: left;
}

.Orders .date {
   display: block;
   width: 100%;
   min-height: 20px;
   overflow: auto;
   font-size: 20px;
   font-weight: 500;
   color: #333;
   line-height: 1.4;
   text-align: left;
   word-wrap: break-word;
   margin-bottom: 15px;
}

.Orders .row {
   display: block;
   width: 100%;
   height: 16px;
   color: #333;
   font-size: 16px;
   font-weight: 100;
   line-height: 1;
   margin-bottom: 10px;
   text-indent: 0px;
}


/* ------------------------------ */
/* ------------------------------ */
/* TABLE */
.Table {
   display: block;
   width: 100%;
   height: auto;
   overflow: auto;
}

.Table .row {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   color: #333;
   font-size: 20px;
   font-weight: 100;
   line-height: 1;
   margin-bottom: 0px;
}

.Table .date {
   display: inline-block;
   width: 37%;
}

.Table .data {
   display: inline-block;
   width: 30%;
   text-align: right;
}


/* ------------------------------ */
/* ------------------------------ */
/* FORM */
.Form {
   display: block;
   width: 100%;
   height: auto;
   overflow: visible;
}

.Form .dollar {
   display: block;
   width: 20px;
   height: 80px;
   padding-top: 33px;
   float: left;
   margin-right: 5px;
}

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

.Form .field.x {
   padding: 25px;
}

.Form .icon {
   position: absolute;
   top: 15px;
   left: 15px;
   width: auto;
   height: auto;
}

.Form .textfield {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   margin-bottom: 0px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   line-height: 1.3;
   text-indent: 55px;
}

.Form .textarea:focus,
.Form .textfield:focus {
   background-color: #fff;
}

.Form .textfield.short {
   width: 100%;
}

.Form .textarea {
   display: block;
   width: 100%;
   height: 300px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   margin-bottom: 0px;
   resize: none;
   float: none;
}

.Form .select {
   position: relative;
   display: block;
   width: 100%;
   height: 80px;
   overflow: visible;
   margin-bottom: 0px;
}

.Form .selectfield {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   line-height: 1.3;
}

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

.Form .selectfield+.options {
   position: absolute;
   display: none;
   top: 80px;
   left: 0px;
   width: 100%;
   max-height: 241px;
   overflow: auto;
   background-color: #eee;
   border-bottom: 1px solid #ddd;
   border-radius: 0px;
   z-index: 5;
}

.Form .selectfield+.options>.option {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   background-color: #eee;
   color: #333;
   font-size: 20px;
   font-weight: 200;
   line-height: 1.3;
}

.Form .selectfield+.options>.option:hover {
   background-color: #fafafa;
   color: #333;
   cursor: pointer;
}

.Form .submit-wrapper {
   display: block;
   width: calc(100% - 50px);
   height: 80px;
   padding: 0px;
   background-color: #ccc;
   border-radius: 5px;
   margin: 25px;
   margin-top: 35px;
}

.Form .submit {
   display: block;
   width: 100%;
   height: 80px;
   padding: 25px;
   background-color: #333;
   border: 1px solid #333;
   border-radius: 5px;
   color: #fff;
   font-size: 20px;
   font-weight: 400;
   text-align: center;
   text-transform: uppercase;
   transform: translateY(-10px);
}

.Form .submit:hover {
   cursor: pointer;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
}

.Form .submit:active {
   cursor: pointer;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
   transform: translateY(0px);
}

.Form .delete-wrapper {
   display: block;
   width: calc(100% - 50px);
   height: 80px;
   padding: 0px;
   background-color: #ccc;
   border-radius: 5px;
   margin: 25px;
   margin-top: 35px;
}

.Form .delete {
   display: block;
   width: 100%;
   height: 80px;
   padding: 28px;
   background-color: #333;
   border: 1px solid #333;
   border-radius: 5px;
   color: #fff;
   font-size: 20px;
   font-weight: 400;
   text-align: center;
   text-transform: uppercase;
   transform: translateY(-10px);
}

.Form .delete:hover {
   cursor: pointer;
   background-color: #ce4257;
   border: 1px solid #ce4257;
}

.Form .delete:active {
   cursor: pointer;
   background-color: #ce4257;
   border: 1px solid #ce4257;
   transform: translateY(0px);
}


/* ------------------------------ */
/* ------------------------------ */
/* FOOTER */
.Footer {
   display: block;
   width: 100%;
   height: 91px;
   background-color: #fff;
   border-bottom: 10px solid #000;
   border-top: 1px solid #ddd;
   margin-top: 0px;
}

.Footer .center {
   position: relative;
   display: block;
   width: 1024px;
   height: 80px;
   margin: auto;
}

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

.Footer .nav {
   display: block;
   width: auto;
   height: 80px;
   padding: 32px 0px;
   color: #ddd;
   font-size: 15px;
   font-weight: 200;
   line-height: 1;
   word-spacing: 15px;
   text-align: left;
   float: left;
}

.Footer .link {
   display: inline-block;
   width: auto;
   height: 15px;
   color: #000;
   font-size: 15px;
   font-weight: 400;
   line-height: 1;
   word-spacing: normal;
}

.Footer .link.x,
.Footer .link:hover {
   cursor: pointer;
   color: #2d97e5;
}


/* ------------------------------ */
/* ------------------------------ */
/* GLOBALS */
.SEARCH {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   background-color: transparent;
   border-bottom: 1px solid #ddd;
   color: #000;
   font-size: 20px;
   font-weight: 200;
   line-height: 1;
   margin-bottom: 0px;
}

.GLOB-Title {
   display: block;
   width: 100%;
   height: 100px;
   padding: 35px;
   border-bottom: 1px solid #ddd;
   color: #333;
   font-size: 35px;
   font-weight: 400;
   line-height: 1;
   margin-bottom: 0px;
}

.GLOB-SubTitle {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   border-bottom: 1px solid #ddd;
   color: #333;
   font-size: 20px;
   font-weight: 300;
   line-height: 1;
   margin-bottom: 0px;
}

.GLOB-Empty {
   display: block;
   width: 100%;
   height: 70px;
   padding: 25px;
   color: #333;
   font-size: 18px;
   font-weight: 100;
   line-height: 1;
   text-align: center;
   text-transform: capitalize;
}

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

.MORE {
   display: block;
   width: calc(100% - 50px);
   height: 80px;
   padding: 0px;
   background-color: #ccc;
   border-radius: 5px;
   margin: 25px;
   margin-top: 35px;
}

.MORE button {
   display: block;
   width: 100%;
   height: 80px;
   padding: 0px;
   background-color: #333;
   border: 1px solid #333;
   border-radius: 5px;
   color: #fff;
   font-size: 20px;
   font-weight: 400;
   text-align: center;
   text-transform: uppercase;
   transform: translateY(-10px);
}

.MORE button:hover {
   cursor: pointer;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
}

.MORE button:active {
   cursor: pointer;
   background-color: #2d97e5;
   border: 1px solid #2d97e5;
   transform: translateY(0px);
}