@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Asap);

html { font-family: 'Asap',sans-serif; font-size: 14px; font-weight: 400; margin: 0px; padding: 0px; position: relative; height: 100%; }
body
{
    font-family: 'Asap',sans-serif;
    margin: 0px;
    padding: 0px;
    height: 100%;
    background-color: #fff;
    color: #444;
    position: relative;
    height: 100%;
    line-height: 20px;
}

/* LAYOUT */


.LayoutWrapper
{
    display: grid;
    grid-template-areas: "header" "content" "footer";
    grid-template-columns: 1fr;
    grid-template-rows: 40px auto 40px;
    height: 100vh;
    background-color: #fff;
}

    .LayoutWrapper .FixedHeaderWrapper
    {
        grid-area: header;
        position: fixed;
        background: #bbb;
        width: 100%;
        z-index: 2;
        background: #fff;
    }

    .LayoutWrapper .OuterContentWrapper
    {
        grid-area: content;
    }

    .LayoutWrapper .OuterFooterWrapper
    {
        grid-area: footer;
        background-color: #e71d3b;
        color:#fff;
    }

.OuterTopMenuWrapper { float: left; width: 100%; border-bottom: 0px solid #aaa; min-height:30px; background-color: #3c3935;  transition: background-color 300ms ease-in; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); }
.InnerTopMenuWrapper { width: 1620px; margin: 0px auto; box-sizing: border-box; transition: all 300ms ease-in; position: relative; }

.OuterHeaderContentWrapper { float: left; width: 100%; background-color: #fff; }
.InnerHeaderContentWrapper { width: 1620px; margin: 0px auto; padding-top: 20px; }

.InnerContentWrapper { width: 1620px; margin: 0px auto; padding-bottom: 0px; background-color: #fff; padding-top: 20px; position: relative; margin-bottom:20px; }

.InnerFooterWrapper { width: 1620px; margin: 0px auto; padding-top:10px; box-sizing:border-box; }

/* GENERAL */
h1 { font-size: 1.8rem; line-height: 2.2rem; color: #444; margin-bottom: 0px; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #ccc; clear: both; }
h2 { font-size: 1.6rem; color: #444; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 0px solid #ccc; clear: both; }
h3 { font-size: 1.4rem; color: #444; margin-bottom: 5px; padding-bottom: 0px; border-bottom: 0px solid #ccc; }
h4
{
    font-size: 1.3rem;
    color: #444;
    margin-bottom: 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ccc;
}
h5
{
    font-size: 1.3rem;
    color: #444;
    margin-bottom: 10px;
    padding-bottom: 2px;
    font-weight: 700;
}
p { font-size: 1rem; line-height: 1.4rem; margin-bottom: 10px; }
a
{
    text-decoration: none;
    color: #444;
}
    a:hover { text-decoration: underline; }
select { float: left; height: 34px; border-radius: 3px; }
strong { font-weight: 700; }

/* GLOBAL CLASSES */
.PopupNoScroll { overflow: hidden; }
.Button
{
    background: none;
    font-family: 'Asap',sans-serif;
    border: 2px solid #444;
    /*margin-top: 10px;*/
    margin-bottom:0px;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 16px;
    border-radius: 5px;
    color: #fff;
    background-color: #444;
    cursor: pointer;
    transition: background-color 200ms linear;
    display:inline-block;
    box-sizing:border-box;
}
    .Button:hover
    {
        background-color: #fff;
        color: #e71d3b;
        text-decoration: none;
    }

.UserMessage
{
    padding: 10px;
    display: block;
    padding-left: 40px;
    margin-bottom: 20px;
    padding-right: 40px;
    position: relative;
    clear:both;
}

    .UserMessage span.CloseIcon
    {
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        width: 38px;
        cursor: pointer;
        color: #aaa;
        background-color: #fff;
    }

        .UserMessage span.CloseIcon:hover
        {
            color: #444;
        }

        .UserMessage span.CloseIcon:before
        {
            content: '\f057';
            font-family: 'FontAwesome5';
            font-size: 24px;
            margin-top: -10px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -12px;
        }

    .UserMessage:before
    {
        font-family: 'FontAwesome5';
        float: left;
        font-size: 24px;
        margin-left: -30px;
        margin-right: 0px;
    }

    .UserMessage.Error
    {
        color: #C00000;
        background-color: #F7DDDD;
        border: 2px solid #F7DDDD;
    }

        .UserMessage.Error:before
        {
            content: '\f056';
            color: #C00000;
        }

    .UserMessage.Success
    {
        color: #3c763d;
        background-color: #dff0d8;
        border: 2px solid #dff0d8;
    }

        .UserMessage.Success:before
        {
            content: '\f058';
            color: #3c763d;
        }

    .UserMessage.Info
    {
        color: #31708f;
        background-color: #d9edf7;
        border: 2px solid #d9edf7;
    }

        .UserMessage.Info:before
        {
            content: '\f05a';
            color: #31708f;
        }
    .UserMessage.Warning
    {
        color: #343a40;
        background-color: #ffe28a;
        border: 2px solid #d9edf7;
    }
        .UserMessage.Warning:before
        {
            content: '\f06a';
            color: #343a40;
        }

.Hidden { display: none; }


/* HEADER */

.LogoWrapper
{
    position: absolute;
    right: 0px;
    top: -5px;
    border: 2px solid #3c3935;
    border-radius: 10px;
    width: 140px;
    padding: 5px;
    background-color: #fff;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
    .LogoWrapper .Logo img { float: left; width: 100%; }
.UserMenuWrapper { float: right; margin-right: 180px; padding-top: 8px; padding-bottom: 8px; }
    .UserMenuWrapper a { text-decoration: none; color: #aaa; }
        .UserMenuWrapper a:hover { color: #eee; }

/* MENU */
.InnerTopMenuWrapper nav { float: left; padding-top: 8px; padding-bottom: 8px; }
.InnerTopMenuWrapper nav ul {  }
    .InnerTopMenuWrapper nav ul li { padding-right: 10px; margin-right: 10px; border-right: 1px solid #888; float:left; }
        .InnerTopMenuWrapper nav ul li:last-child { border-right: 0px; }
        .InnerTopMenuWrapper nav ul li a { text-decoration: none; color: #aaa; }
            .InnerTopMenuWrapper nav ul li a:hover { color: #eee; }

.AddNewIcon { position: relative; color: #262626 !important; float: left; text-decoration: none !important; margin-right: 20px !important; color: #fff !important; border: 2px solid #444; padding-left:40px !important; }
    .AddNewIcon:hover {  text-decoration: none !important; color: #e71d3b !important; background-color:#fff !important; }
    .AddNewIcon:before
    {
        content: '\f0fe';
        font-family: FontAwesome5Light;
        font-size: 24px;
        position: absolute;
        left: 10px;
    }

.EditIcon { position: relative; color: #262626 !important; float: left; text-decoration:none !important; margin-right:20px !important }
    .EditIcon:hover { text-decoration: none !important; color: #e71d3b !important; }
    .EditIcon:before { content: '\f040'; font-family: FontAwesome5Light; font-size: 24px; }

.DeleteIcon { position: relative; color: #262626 !important; text-decoration: none !important; }
    .DeleteIcon:hover
    {
        text-decoration: none !important;
        color: #e71d3b !important;
    }
    .DeleteIcon:before { content: '\f2ed'; font-family: FontAwesome5Light; font-size: 24px; }

.UpdateIcon { position: relative; color: #262626 !important; text-decoration: none !important; margin-right: 10px !important; margin-left:10px !important; }
    .UpdateIcon:hover
    {
        text-decoration: none !important;
        color: #e71d3b !important;
    }
    .UpdateIcon:before { content: '\f00c'; font-family: FontAwesome5; font-size: 28px; line-height: 38px; }

.CancelIcon { position: relative; color: #262626 !important; text-decoration: none !important; }
    .CancelIcon:hover
    {
        text-decoration: none !important;
        color: #e71d3b !important;
    }
    .CancelIcon:before { content: '\f00d'; font-family: FontAwesome5; font-size: 28px; line-height: 38px; }

.BackIcon
{
    position: relative;
    color: #262626 !important;
    float: left;
    text-decoration: none !important;
    margin-right: 20px !important;
    color: #fff !important;
    border: 2px solid #444;
    padding-left: 40px !important;
    margin-bottom: 20px;
}

    .BackIcon:hover
    {
        text-decoration: none !important;
        color: #e71d3b !important;
        background-color: #fff !important;
    }

    .BackIcon:before
    {
        content: '\f060';
        font-family: FontAwesome5Solid;
        font-size: 24px;
        position: absolute;
        left: 10px;
    }

.AddNewWrapper {float:left; width:100%; margin-bottom:20px;}

/* LOGIN */
.LoginWrapper { float: left; width: 49%; margin-right: 2%; margin-top:30px; }
.LoginInfoWrapper { float: left; width: 49%; }

/* GRID */
.GridHeader td { font-weight:bold; text-transform:uppercase; }
.GridRow:hover td { background-color: #fafafa !important; }
.GridEditRow td  {  box-shadow: none !important; margin-top: 5px !important; margin-bottom: 5px !important; }
.GridEditRow td input { background: #fff !important; padding: 5px; float: left; box-shadow: none !important;  }

.GridEditRow { background-color: #d0f2c5 !important }
.GridEditRow .dxeTextBox_Moderno {background-color:#fff !important}

.dxbButton.DeleteIcon
{
    position:relative;
    margin-top: 0px;    
}
/* DATEPICKER */
#ui-datepicker-div
{
    z-index: 99 !important;
}
.DatePicker { width: 100px !important; }
.CalendarIcon:before { content: '\f073'; font-family: FontAwesome; font-size: 24px; }
.CalendarIcon.Valid:before { content: '\f274'; }
.ui-datepicker-trigger { font-weight: normal; height: 36px; background: none; border: none; cursor: pointer; }
    .ui-datepicker-trigger:hover { color: #185593; }
.ui-datepicker { background-color: #fff; border: 0px #ccc solid; min-width: 280px; max-width: 400px; padding: 0 !important; }
    .ui-datepicker table { margin: 0 !important; }
.ui-datepicker-header { background-color: #1b7b9a; color: #fff; }
.ui-datepicker-prev, .ui-datepicker-next { padding-top: 4px; cursor: pointer; color: #fff; }
    .ui-datepicker-prev:before { content: '\f053'; font-family: FontAwesome; float: left; padding-left: 5px; }
    .ui-datepicker-prev:hover { color: #e87722; text-decoration: none; }
    .ui-datepicker-next:before { content: '\f054'; font-family: FontAwesome; float: right; padding-right: 5px; }
    .ui-datepicker-next:hover { color: #e87722; text-decoration: none; }
.ui-datepicker-calendar th { border: 1px solid #ddd !important; background-color: #eee; }
.ui-datepicker-calendar td { border: 1px solid #eee !important; }
    .ui-datepicker-calendar td a { text-align: center !important; }
        .ui-datepicker-calendar td a:hover { color: #e87722; }
.ui-datepicker-unselectable.ui-state-disabled { background-color: #eee; border: 1px solid #ddd !important; }
    .ui-datepicker-unselectable.ui-state-disabled span { text-align: center; color: #888; }

.NoData {}

/* TAGITEM */
.TagsWrapper
{
    clear: both;
    margin-top: 20px;
    float: left;
    width: 100%;
}
.TagItem
{
    float: left;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 10px;
    margin-right: 20px;
    padding-right: 38px;
    position: relative;
    font-size: 1.4rem;
    height: 40px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.TagItem:hover
{
    background:#ddd;
}

/* ZIPRANGESITEM */
.ZipRangesWrapper
{
    clear: both;
    margin-top: 20px;
    float: left;
    width: 100%;
}
.ZipRangeItem
{
    float: left;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 10px;
    margin-right: 20px;
    padding-right: 38px;
    position: relative;
    font-size: 1.4rem;
    height: 40px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

    .ZipRangeItem:hover
    {
        background: #ddd;
    }

.DeleteIcon
{
    position:absolute;
    right:5px;
    top:50%;
    margin-top:-12px;
    cursor:pointer;
}
    .DeleteIcon a
    {
        
    }
    .DeleteIcon:before
    {
        content: '\f2ed';
        font-family: FontAwesome5;
        font-size: 24px;
        line-height:24px;
        height:24px;
    }


/* CUSTOMER SEARCH */
.CustomerSearchWrapper { float:left; width:400px; margin-left:30px; margin-bottom:0px; }