html {
    background: #1e8449
}

body {
    margin: 2rem;
    font-family: "exo 2";
    background-color: #f9f9f9
}

header {
    margin-bottom: 1rem
}

header h1 {
    margin: 0;
    font-size: 1.8rem;
    color: #333
}

main {
    display: flex;
    gap: 2rem;
    background-color: #fff;
    padding: 2rem;
    border: 1px solid #ddd
}

aside {
    width: 300px;
    flex-shrink: 0;
    border-right: 2px solid #ccc;
    padding-right: 1rem
}

aside h2 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #333
}

aside p {
    margin: .5rem 0
}

.period-dropdown {
    margin-bottom: 1rem
}

.period-stats h2 {
    font-size: 1rem;
    margin: .75rem 0
}

section {
    flex: 1;
    min-width: 0
}

.period-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem
}

.period-nav button {
    cursor: pointer;
    padding: .5rem 1rem;
    background: #239f52;
    border: 1px solid #1e8449;
    font-size: .9rem;
    color: #fff
}

.period-nav button:hover:not(:disabled) {
    background: #1e8449
}

.period-nav button:disabled {
    opacity: .4;
    cursor: not-allowed
}

.order-group {
    margin-bottom: 2rem;
    display: none
}

.order-group.active {
    display: block
}

.order-group h2 {
    margin-bottom: .2rem;
    font-size: 1.1rem;
    color: #444
}

.order-group h3 {
    margin: .5rem 0;
    font-size: 1rem;
    color: #1e8449
}

.invoiced-orders,.converted-orders,.expired-orders {
    border: 1px solid #ccc;
    margin-bottom: 1rem;
    padding: .5rem;
    background: #fafafa
}

.invoiced-orders h4,.converted-orders h4,.expired-orders h4 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    color: #555;
    text-align: center
}

.order-item {
    border: 1px solid #ccc;
    padding: .7rem;
    margin: 0 0 .5rem;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s
}

.order-item:hover {
    background: #f6f6f6
}

.order-item-header {
    display: flex;
    justify-content: space-between;
    align-items: fkex;
    flex-direction: column
}

.order-item-header h5 {
    margin: 0;
    font-size: 1rem;
    color: #333
}

.order-item-header span {
    font-size: .9rem;
    color: #666
}

.order-item-header.status-pending-payment h5 {
    color: #e18b08
}

.order-item-header.status-processing h5 {
    color: #008cba
}

.order-item-header.status-on-hold h5 {
    color: #a99108
}

.order-item-header.status-completed h5 {
    color: #2d8c2d
}

.order-item-header.status-cancelled h5 {
    color: #c00
}

.order-item-body {
    margin-top: .2rem
}

.order-item-body h6 {
    margin: .5rem 0 .2rem;
    font-size: .95rem;
    color: #333
}

.order-item-body span {
    display: inline-block;
    margin-bottom: .2rem;
    font-size: .9rem;
    color: #555
}

.order-item-hidden {
    display: none;
    margin-top: 0rem;
    border-top: 1px solid #eee;
    padding-top: 0;
    font-size: .9rem;
    opacity: .7
}

.order-item-footer {
    margin-top: .3rem;
    border-top: 1px solid #eee;
    padding-top: .3rem
}

.order-item-footer h6 {
    margin: .2rem 0;
    font-size: .9rem;
    font-weight: 400;
    color: #333
}

form {
    background: #fff;
    padding: 2rem;
    max-width: 400px;
    margin: 2rem auto;
    border: 1px solid #ccc;
    text-align: center;
    width:100%
}

form p {
    margin: 1rem 0
}

form input[type="text"] {
    width: 100%;
    padding: .5rem;
    border: 1px solid #aaa
}

form button {
    padding: .6rem 1.2rem;
    background: #0073aa;
    border: none;
    color: #fff;
    cursor: pointer
}

form button:hover {
    background: #006399
}

.order_trello {
    display: flex;
    justify-content: space-between
}

.order_trello>div {
    width: 31%
}

.order-item-header span {
    display: block
}

.order-item-body {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.order-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.period-nav {
    display: flex;
    justify-content: center
}

select {
    padding: .47rem
}

.top_boxes * {
    padding: 0;
    margin: 0!important;
    font-size: 20px!important
}

.top_boxes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px
}

.period-dropdown select {
    margin-top: 10px
}

hr {
    margin: 30px 0
}

h6 {
    margin: .4rem 0 .2rem;
    font-size: .9rem
}

h1 small {
    font-size: 20px
}

aside img {
    max-width: 260px
}
.form_box a {
    background:url("/wp-content/uploads/Yes-Containers-Shipping-Container-Company.png");
    width:320px;
    height:78px;
    display:block;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    margin:0 auto;
}

.form_box {
    padding:80px;display:flex;flex-direction:column;
 
}
form input {
    width:100%;box-sizing:border-box;padding:0.6rem !important;margin-top:10px;margin-bottom:10px;
}
form  p {
    margin:0
}
button[type="submit"] {
     width:100%;box-sizing:border-box;padding:0.8rem !important;background:#1e8449 !important;margin-bottom:0 !important
} 


.all_orders {
        border: 1px solid #ccc;
    margin-bottom: 1rem;
    padding: .5rem;
    background: #fafafa;
}
.all_orders_list {
    display:flex;
    flex-wrap:wrap;
    align-items:top;
    justify-content:space-between
}
 .all_orders_list > * {
     width: 33%;
     box-sizing: border-box;
 }  
.all_orders_list:after {
    width: 33%;
    content:""
}