:root {
    --white:white;
    --lightgrey:#F1F1F1;
    --lightergrey:#f9f9f9;
    --middlegrey:#A4AEB2;
    --darkgrey:#333333;
    --orange:#c32f25!important;
    --darkorange:#C16327;
    --blue:#33647E;
    --darkblue:#204B61;
    --transparent-orange:rgb(228,126,61, 0.9);
    --gray-dark2: #666666;
    --disabled:#e2e2e2;
    --scrollbar-width: calc(100vw - 100%);
}

/* global */
body {font-family: "proxima-nova",sans-serif;padding-bottom:40px;}
#application {min-height:100vh;}
label {display:block;width:100%;}
hr {border-top:1px solid #eee;}
img {max-width:100%;height:auto;}
.my-page-header {padding: 4rem 2rem 1rem;}
.page-header {border-bottom: 2px solid var(--lightgrey);margin-bottom: 20px;}
.page-header .fa-stack {color:var(--orange);font-size: medium;margin-top: -4px;}
.page-header h1 {color: var(--orange);font-size: xx-large;}
#header {min-height:40px;}
thead th {background: var(--blue);color:var(--white);}
#formDisplay th i {font-size: 17px;margin-right: 10px;color:var(--darkblue);}
.dataTables_length {width:inherit;float:right;}
.dataTables_filter {width:inherit;float:left;}
#OverLay {z-index:100;}
.btn-primary,
.btn-success {background:var(--orange);border-color:var(--orange);}

/* login */
#LoginApp img {max-width:400px;}

/* Font-awesome duplicates */
.fa-cc-american-express {
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
}
.fa-cc-american-express:before{content:"\f1f3"}

.list-group-unbordered > .list-group-item {border-left: 0;border-right: 0;border-radius: 0;padding-left: 0;padding-right: 0;}
.list-group-unbordered-first-last .list-group-item:first-child {border-top:0;}
.list-group-unbordered-first-last .list-group-item:last-child {border-bottom:0;}

.credit-card {max-width:342px;border:1px solid rgba(0,0,0,.125);}

#credit-card-form {max-width:780px;}

/* Customer - Navbars */
.customer-page-navbar li a {color:var(--gray-dark2);}
.customer-page-navbar li.active a {color:var(--darkgrey);font-weight:bold;}

#sidenav {position:fixed;left:0;margin-top:-32px;background-color:#f9f9f9;width:295px;padding-top:45px;}
#sidenav h4, #sidenav-mobile h4 {padding-left:15px;color:var(--darkblue);}
#sidenav .list-group-item, #sidenav-mobile .list-group-item {border:0;border-top:1px solid var(--lightgrey);background-color:var(--lightergrey);color:var(--darkgrey);}
#sidenav .list-group-item:last-child, #sidenav-mobile .list-group-item:last-child {border-bottom: 1px solid var(--lightgrey);}
#sidenav .list-group-item.active, #sidenav-mobile .list-group-item.active {background-color:var(--white);color:var(--darkblue);font-weight:bold;}
#sidenav-mobile {
    margin-bottom: 20px;
}

/* forms */
.user-subscriptions .card-body h4 {color:var(--orange);text-transform:uppercase;font-size:20px;font-weight:700;}
.user-subscriptions .pricing-card-title {font-size: 16px;text-align:center;}
.user-subscriptions .pricing-card-title .original-price {color:#c6c6c6;}

/* plugins */
#activePlugins {width:100%;height:600px;border:3px solid #ddd;position:relative;overflow:auto;}
#activePlugins:after {content:'Drag Plugins Here';position:absolute;top:50%;left:50%;color:#ddd;margin-left:-75px;}
#activePlugins .plugin {width:100%!important;border-radius:0 0 0 0;}
.available-plugins .btn-group {display:none;}
#droppable {height: 160px;background: repeating-linear-gradient(-45deg, #8c8c8c, #8c8c8c 25%, #999 25%, #999 50%, #8c8c8c 50%) top left fixed;background: -webkit-repeating-linear-gradient(-45deg, #8c8c8c, #8c8c8c 25%, #999 25%, #999 50%, #8c8c8c 50%) top left fixed;background-size: 30px 30px;background-color: #8c8c8c;text-align: center;font-size: xx-large;border: 5px solid rgba(0,0,0,0.08);}
#droppable i {padding-top: 62px; color: #fff;}
#droppable.active {background: repeating-linear-gradient(-45deg, #8c2929, #8c2929 25%, #992d2d 25%, #992d2d 50%, #8c2929 50%) top left fixed;background: -webkit-repeating-linear-gradient(-45deg, #8c2929, #8c2929 25%, #992d2d 25%, #992d2d 50%, #8c2929 50%) top left fixed;background-size: 30px 30px;background-color: #8c2929;}

@media (max-width: 575px) {
    #LoginApp img {max-width:100%;}
    body[data-user="z"] .my-page-header .content-left h1 {font-size:26px;}
    body[data-user="z"] .my-page-header .content-right button.navbar-toggler {position: absolute;top: -31px;right: 0;}
}