/* LOGIN */
.login-form {margin: 30px auto 60px; }
.login-form div {display: block; width: 100%; margin: 10px auto; position: relative;}
.login-form .req:after {font-size: 25px; opacity: 0.5; padding: 0px 0px 0px 8px; color: red; content:"*";}
.login-form div input {border: 1px solid silver; padding: 14px 1%; font-size: 15px; min-width: 276px;}
.login-form div select {border: 1px solid silver; padding: 14px 1%; font-size: 15px; min-width: 301px;}

.login-form div .checkbox {min-width: 1px;}
.login-form div img {display: inline-block; height: 36px; margin-bottom: -12px; margin-left: 5px;}
.login-form div button {font-size: 17px; padding: 7px 30px; margin-top: 10px; border: none; color: white !important; cursor: pointer; text-transform: uppercase; color: white!important;}
.login-form .sec input {}
.login-form .sec {text-align: left;}
.login-form .sec div {margin: 7px 0px; width: auto;}
.login-form .keep input {width: 20px; min-width: 20px;}
.login-form .keep label {font-size: 15px; cursor: pointer;}

.login-alert {padding: 2% 2% 2% 15%; border: 2px solid rgb(197, 0, 0); position: relative; box-shadow: 0px 0px 30px -19px black;}
.login-alert i {color: rgb(197, 0, 0); font-size: 70px; height: 70px; width: 70px; margin: auto; top: 0px; bottom: 0px; left: 5%; position: absolute;}
.login-alert {line-height: 18px;color: rgb(98, 98, 98);}

.errors {display: block; width: 100%; margin-bottom: 25px !important;}
.errors div {width: 100%; color: rgb(255, 0, 0); display: block;}
.errors div span {margin-top: -1px; margin-right: 4px; font-size: 24px; float: left;}
.errors div i {padding-right: 8px;}

.login-alert {padding: 2% 2% 2% 15%; border: 2px solid rgb(197, 0, 0); position: relative; box-shadow: 0px 0px 30px -19px black;}
.login-alert i {color: rgb(197, 0, 0); font-size: 70px; height: 70px; width: 70px; margin: auto; top: 0px; bottom: 0px; left: 5%; position: absolute;}
.login-alert {line-height: 18px;color: rgb(98, 98, 98);}





/* PROFILE */
.profile-info {width: 100%; display: inline-block; border-radius: 20px; overflow: hidden;}
.profile-info-head {width: 100%; background: linear-gradient(90deg,rgb(142, 186, 39) 0%, rgb(11, 129, 79) 50%); text-align: left; display: inline-block; position: relative;}

.profile-info-head-items {width: 88%; padding: 0.7% 0% 0.5% 2%; display: inline-block; position: relative;}
.profile-info-head-item {width: 50%; height: 50px; float: left; position: relative;}
.profile-info-head-item-icon {width: 10%; height: 50px; text-align: center; float: left; position: relative;}
.profile-info-head-item-icon i {font-size: 25px; line-height: 50px; color: rgb(255, 255, 255);}
.profile-info-head-item-data {width: 90%; height: 50px; font-size: 18px; line-height: 50px; letter-spacing: 0.5px; font-weight: 300; float: left; color: rgb(238, 238, 238); position: relative; overflow: hidden; text-overflow: ellipsis;}
.profile-info-head-item-data b {font-size: 20px; letter-spacing: 1px; font-weight: 700;}

.profile-info-head-setup {width: 10%; height: 100%; top: 0px; right: 0px; background: rgb(9, 104, 64); text-align: center; position: absolute;}
.profile-info-head-setup i {font-size: 60px; color: rgb(255, 255, 255); top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute;}

.profile-body-item {width:50%; min-height: 250px; background: rgb(239, 239, 239); float: left;}
.profile-body-item-title {}
.profile-body-item-points {font-size: 22px; color: rgb(185, 185, 185); text-transform: uppercase;}
.profile-body-item-points div { text-align: center; margin-top: 20px;}
.profile-body-item-points div span {font-size: 50px; font-weight: 600; color: rgb(104, 104, 104);}

.profile-body-item-orders {font-size: 22px; color: rgb(185, 185, 185); text-transform: uppercase;}
.profile-body-item-orders a {color: rgb(185, 185, 185);}
.profile-body-item-orders div { text-align: center; margin-top: 22px;}
.profile-body-item-orders div i {font-size: 50px; color: rgb(104, 104, 104);}

.profile-info-title {font-size: 20px; text-transform: uppercase; font-weight: 600; display: inline-block; width: 99%; padding: 0.5%; background: rgba(0, 0, 0, 0.05);}
.profile-info-title span {float: left; margin-top: 2px; margin-right: 6px; font-size: 22px;}
.profile-info-text { display: inline-block; width: 99%; padding: 0.5%;}
.profile-info-text div {font-size: 18px; margin: 5px 0px 20px 30px;}




/* USER ORDERS */
.my-orders {width: 100%; display: inline-block;}

.my-orders-head {padding: 1% 4%; width: 92%; background: rgb(219, 219, 219); display: inline-block; margin: 10px auto;}
.my-orders-head div {width: 20%; font-size: 12px;opacity: 0.7; text-transform: uppercase; float: left; min-height: 5px;}

.my-orders-head-title {}
.my-orders-head-date {text-align: right;}
.my-orders-head-status {text-align: right;}
.my-orders-head-price {text-align: right;}

.my-orders-item {padding: 1% 4%; width: 92%; display: inline-block; margin-bottom: 10px;}
.my-orders-item div {width: 20%; font-size: 14px;text-transform: uppercase; float: left; min-height: 5px;}
.my-orders-item:nth-child(2n+2) {background: whitesmoke;}
.my-orders-item:hover {box-shadow: inset 0px 0px 1px 1px rgb(177, 177, 177);}

.my-orders-item-title {font-weight: 600;font-size: 16px !important;}
.my-orders-item-title a {color: rgb(48, 48, 48);}
.my-orders-item-date {text-align: right;}
.my-orders-item-status {text-align: right;}
.my-orders-item-price {text-align: right; font-weight: 700;font-size: 14px !important;}

.my-order-detail-status {width: 100%;display: inline-block; margin-bottom: 3%;}
.my-order-detail-status-ikona {width: 112px; height: 112px; margin-right: 25px; background: rgb(245, 245, 245); float: left;}
.my-order-detail-status-ikona i {font-size: 70px;}

.status-1 {color: rgb(42, 95, 155);}
.status-2 {color: rgb(131, 65, 131);}
.status-3 {color: rgb(60, 138, 60);}
.status-4 {color: rgb(176, 50, 50);}
.status-5 {color: rgb(177, 172, 74);}
.status-6 {color: rgb(176, 50, 50);}

.paid-0 {}
.paid-1 {color: rgb(24, 223, 24);}


.my-order-detail-status-info {float: left;}
.my-order-detail-status-info div {font-size: 15px; line-height: 30px; width: 1080px; letter-spacing: 1px; background: rgb(245, 245, 245);height: 30px;padding: 8px 15px;}
.my-order-detail-status-info div:first-child {margin-bottom: 20px;}
.my-order-detail-status-info div i {font-size: 20px;margin: 3px 10px 0px 0px;opacity: 0.5;float: left;}
.my-order-detail-status-info div strong {font-size: 15px; margin-right: 10px; letter-spacing: 0px; font-weight: 600; text-transform: uppercase;}

.my-order-detail-pay-ship {width: 100%;display: inline-block;}
.my-order-detail-pay-ship-item {width: 48%;float: left; margin-bottom: 2%; padding-bottom: 1%; border-bottom: 1px solid rgb(245, 245, 245);}
.my-order-detail-pay-ship-item:first-child {margin-right: 4%;}
.my-order-detail-pay-ship-item-title {padding: 1.5% 5%; margin-bottom: 2%; font-size: 18px;text-transform: uppercase;font-weight: 600;background: rgb(245, 245, 245);}
.my-order-detail-pay-ship-item-title i {padding-right: 5px; }
.my-order-detail-pay-ship-item-text {width: 75%; margin-left: 5%;float: left; font-size: 14px;}
.my-order-detail-pay-ship-item-price {font-size: 14px;font-weight: 700;width: 15%; text-align: right; float: left;}

.detail-head .my-orders-head-title {width: 64%;}
.detail-head .my-orders-head-date {width: 12%;}
.detail-head .my-orders-head-status {width: 12%;}
.detail-head .my-orders-head-price {width: 12%;}

.detail-item .my-orders-item-title {width: 64%; font-size: 14px !important;}
.detail-item .my-orders-item-date {width: 12%;}
.detail-item .my-orders-item-status {width: 12%;}
.detail-item .my-orders-item-price {width: 12%;}

.my-order-detail-sumary {padding: 1% 4%;width: 92%;background: rgb(228, 228, 228);display: inline-block;margin: 10px auto;}
.my-order-detail-sumary-title {width: 50%; float: left;text-transform: uppercase;font-size: 12px;}
.my-order-detail-sumary-prices {width: 50%; float: left; text-align: right;}
.my-order-detail-sumary-prices-dph {font-size: 26px;font-weight: 700;}
.my-order-detail-sumary-prices-dph span {font-size: 13px;letter-spacing: -0.5px;}
.my-order-detail-sumary-prices-dph-no {font-size: 14px;font-weight: 600; opacity: 0.8; margin-top: 5px;}
.my-order-detail-sumary-prices-dph-no span {font-size: 12px;letter-spacing: -0.5px;}

.my-orders-empty { width: 100%; display: inline-block; text-align: center;}
.my-orders-empty i {font-size: 70px; color: rgb(219, 219, 219);margin: 50px auto 0px; font-size: 100px;}
.my-orders-empty div {font-size: 30px; color: silver;width: 100%; margin: 50px auto;}




/* USER SETUP */
.profile-setup {width: 100%; display: inline-block;}
.profile-setup-menu {float: left;width: 25%;}
.profile-setup-menu a {color: #333;}
.profile-setup-menu-item {width: 100%; background: rgb(219, 219, 219); margin-bottom: 3%; display: flex; gap: 10px; align-items: center;}
.profile-setup-menu-item i {width: 50px; font-size: 24px; text-align: center;}
.profile-setup-menu-item div {font-size: 18px; padding: 18px 0px; letter-spacing: 2px; text-transform: uppercase;}
.profile-setup-menu .aa {background: rgb(141, 186, 39); color: rgb(255,255,255);}

.profile-setup-form {float: right;width: 69%; border-left: 1px solid rgb(225, 225, 225);padding-left: 3%; margin-bottom: 5%;}
.profile-setup-form .login-form {margin: 0px auto;}
.profile-setup-form .login-form i {color: rgb(131, 131, 131); font-size: 13px;}

.profile-setup-input {margin-bottom: 15px; position: relative;}
.profile-setup-input input {width: 96%; padding: 12px 2%; font-size: 16px; border: 1px solid rgb(209, 209, 209); letter-spacing: 1px; display: block; box-shadow: 4px 3px 20px -15px rgb(192, 192, 192); font-family: 'Montserrat', sans-serif;}
.profile-setup-input input:disabled {background: rgba(255, 0, 0, 0.07);}
.profile-setup-input label {font-size: 11px; padding: 0px 0px 4px; letter-spacing: 1px; color: rgb(160, 160, 160); display: block; text-transform: uppercase;}
.psi-half {width: 55%;}
.psi-req:after {right: 10px; top: 23px; bottom: 0px; margin: auto; height: 14px;width: 14px; content: "\f0a3"; font-family: "Font Awesome 5 Pro"; color: rgba(255, 0, 0, 0.4);font-size: 12px;position: absolute;}

.profile-setup-input-hint {color: grey; margin-bottom: 15px; line-height: 20px; font-size: 14px; text-align: justify;}

.switch label, .switch input {display: inline-block; width: auto; cursor: pointer;}
.switch label {color: #2D2D2D;font-size: 15px;font-weight: 600; position: relative; padding-left: 30px;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: -moz-none;-o-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.switch input {display: none;}
.switch label:before {border: 1px solid silver; width: 16px; height: 16px; padding: 1px;margin-right: 6px;font-family: Font Awesome 5 Pro;display: inline-block; content: "\f00c"; color: white;font-size: 0px; line-height: 16px;position: absolute;text-align: center;top: 0px;left: 0px; transition: all 0.2s;}
.switch input:checked+label:before {font-size: 16px; background: #29ae29; border: 1px solid #29ae29; content: "\f00c"; font-family: "Font Awesome 5 Pro";}

.profile-setup-input-hr {color: rgb(93, 93, 93); font-weight: 600; width: 100%; padding: 0px 0px 10px; margin: 15px auto 20px; display: inline-block; border-bottom: 1px solid rgb(224, 224, 224);}

.profile-setup-buttons {width: 100%; display: inline-block;}
.profile-setup-button {float: left;margin-right: 10px;}
.profile-setup-button button {padding: 12px 35px;border: none;background: rgb(49, 185, 96);color: white;text-transform: uppercase;font-size: 15px; letter-spacing: 2px; cursor: pointer; font-family: 'Montserrat', sans-serif;}
.profile-setup-button button:hover {opacity: 0.8;}