/*@font-face { font-family: "unox-icons"; src: url("../css/fonts/unox-icons/unox-icons.eot"); src: url("../css/fonts/unox-icons/unox-icons.eot?#iefix") format("eot"), url("../css/fonts/unox-icons/unox-icons.woff") format("woff"), url("../css/fonts/unox-icons/unox-icons.ttf") format("truetype"), url("../css/fonts/unox-icons/unox-icons.svg#unox-icons") format("svg"); font-weight: normal; font-style: normal; }*/

html { font-size: 16px; margin: 0px; padding: 0px; position: relative; height: 100%; }
body { margin: 0px; padding: 0px; height: 100%; background-color: #fff; position: relative; height: 100%; line-height: 1.4rem; transition: background-color 300ms ease-in; }
html, body { font-family: "CooperHewitt-Medium",Arial,sans-serif; background: #f3f3f3; color: #444; }

.ViewModeDesktop { display: block; background: green; }
.ViewModeMobile { display: none; background: red; }

.OuterPageWrapper { height: 100%; }
.InnerPageWrapper { float: left; width: 100%; height: 100%; position: absolute; }

.InnerHeaderWrapper { float: left; width: 100%; font-size: 13px; }

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

.OuterCategoriesWrapper { float: left; width: 100%; background-color: #262626; height: 47px; }
.InnerCategoriesWrapper { width: 1620px; margin: 0px auto; }

.OuterContentWrapper { float: left; width: 100%; }
.InnerContentWrapper { width: 1620px; margin: 0px auto; padding: 0px; position: relative; background: #fff; box-sizing: border-box; }

.OuterFooterWrapper { float: left; clear: both; width: 100%; position: relative; background-color: #f3f3f3; color: #888; padding-top: 20px; padding-bottom: 20px; margin-top: 0px; box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.2); }
    .OuterFooterWrapper.Bottom { bottom: 0px; position: absolute; }
.InnerFooterWrapper { width: 1620px; margin: 0px auto; font-size: 13px; }

.MainContentWrapper { float: left; width: 100%; background-color: #fff; padding: 20px; box-sizing: border-box; }

/* GLOBAL */
h1 { font-size: 2rem; margin-bottom: 1.5rem; line-height: 2.2rem; font-family: "CooperHewitt-Bold"; }
h2 { font-size: 1.6rem; margin-bottom: 1rem; line-height: 1.8rem; font-family: "CooperHewitt-Semibold"; border-bottom: 1px solid #f3f3f3; padding-bottom: 5px; }
h3 { font-size: 1.2rem; margin-bottom: 1rem; line-height: 1.2rem; font-family: "CooperHewitt-Semibold"; border-bottom: 1px solid #f3f3f3; padding-bottom: 5px; }
h5 { font-size: 1rem; margin-bottom: 1rem; line-height: 1rem; font-family: "CooperHewitt-Semibold"; text-transform: uppercase; }
p { margin-bottom: 1.2rem; }

.Button { background: none; white-space: nowrap; border: 0px; margin-top: 0px; padding: 10px; padding-left: 30px; padding-right: 30px; text-align: center; box-sizing: border-box; text-transform: uppercase; font-size: 1rem; border-radius: 3px; color: #d01e38; background-color: #fafafa; border: 1px solid #ddd; cursor: pointer; transition: all 200ms linear; text-decoration: none; font-family: "CooperHewitt-Medium",Arial,sans-serif; }
    .Button:hover { background-color: #d01e38; text-decoration: none; color: #fff; }
    .Button[disabled="disabled"] {color:#aaa; cursor:default}
        .Button[disabled="disabled"]:hover { background-color: #fafafa; text-decoration: none; color: #aaa; }

.Error
{
    color: #C00000;
    background-color: #F7DDDD;
    padding: 10px;
    display: block;
    padding-left: 40px;
    position: relative;
    clear: both
}
    .Error:before { content: '\f056'; font-family: 'FontAwesome5'; position:absolute; left:10px; top:50%; margin-top:-12px; font-size: 24px; line-height:24px; color: #C00000; }
.Success
{
    color: #3c763d;
    background-color: #dff0d8;
    padding: 10px;
    display: block;
    padding-left: 40px;
    position: relative;
    clear: both
}
    .Success:before { content: '\f058'; font-family: 'FontAwesome5';  position:absolute; left:10px; top:50%; margin-top:-12px; font-size: 24px; line-height:24px; color: #3c763d; }
.Info { color: #31708f; background-color: #d9edf7; padding: 10px; display: block; padding-left: 40px;  position:relative; clear:both }
    .Info:before { content: '\f05a'; font-family: 'FontAwesome5'; position:absolute; left:10px; top:50%; margin-top:-12px; font-size: 24px; line-height:24px; color: #31708f; }
.Warning
{
    color: #343a40;
    background-color: #ffe28a;
    padding: 10px;
    display: block;
    padding-left: 40px;
    position: relative;
    clear: both
}
    .Warning:before { content: '\f06a'; font-family: 'FontAwesome5'; position:absolute; left:10px; top:50%; margin-top:-12px; font-size: 24px; line-height:24px; color: #343a40; }
.Hidden {display:none;}

/* ICONS */
.ReportIcon { position: relative; color: #262626 !important; float: right; margin-left: 10px; }
    .ReportIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .ReportIcon:before { content: '\f15c'; font-family: FontAwesome5Light; font-size: 24px; }

.ReportIconPDF:before
{
    content: '\f1c1';
    font-family: FontAwesome5Light;
    font-size: 24px;
}

    .ReportIconXLS:before
    {
        content: '\f1c3';
        font-family: FontAwesome5Light;
        font-size: 24px;
    }


.InvoiceIcon { position: relative; color: #262626 !important; float: left; }
    .InvoiceIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .InvoiceIcon:before { content: '\f15b'; font-family: FontAwesome5Light; font-size: 24px; }
    .InvoiceIcon:after { content: '\f155'; font-family: FontAwesome5Light; font-size: 12px; position: absolute; left: 6px; top: 8px; }

/*.CardLockIcon { position: relative; color: #262626 !important; float: left; }
    .CardLockIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .CardLockIcon:before { content: '\f389'; font-family: FontAwesome5Light; font-size: 32px; }
    .CardLockIcon:after { content: '\f30d'; font-family: FontAwesome5Solid; font-size: 12px; position: absolute; right: 6px; top: 7px; }*/

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

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

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

.CancelIcon { position: relative; color: #262626 !important; float: left; }
    .CancelIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .CancelIcon:before { content: '\f00d'; font-family: FontAwesome5; font-size: 28px; line-height:38px;}
    /*.CardEditIcon:after { content: '\f040'; font-family: FontAwesome5Solid; font-size: 12px; position: absolute; right: 6px; top: 7px; }*/

.AddNewSubscriptionIcon { position: relative; color: #262626 !important; float: left; padding-left:45px; }
    .AddNewSubscriptionIcon:hover { text-decoration: none !important; color: #fff !important;  }
    .AddNewSubscriptionIcon:before {position:absolute; left:10px; content: '\f674'; font-family: 'FontAwesome5'; font-size: 24px; }

    /* content: '\f674' */
/* LOGO */
.LogoWrapper { padding: 0px; position: absolute; right: 20px; padding-top: 0; margin-top: 0px; box-sizing: border-box; z-index: 999; }

.Icon {text-decoration:none !important;}
.CardLockIcon { position: relative; color: #262626 !important; float: left; line-height:64px; height:64px; }
    .CardLockIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .CardLockIcon:before { content: '\f389'; font-family: FontAwesome5Light; font-size: 64px;  }
    .CardLockIcon:after { content: '\f30d'; font-family: FontAwesome5Solid; font-size: 24px; position: absolute; left: 40px; top: -6px; }

.CardOpenIcon { position: relative; color: #262626 !important; float: left; line-height:64px; height:64px; }
    .CardOpenIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .CardOpenIcon:before { content: '\f389'; font-family: FontAwesome5Light; font-size: 64px;  }
    .CardOpenIcon:after { content: '\f3c1'; font-family: FontAwesome5Solid; font-size: 24px; position: absolute; left: 37px; top: -6px; }

.CardDeactivateIcon { position: relative; color: #262626 !important; float: left; line-height:64px; height:64px; }
    .CardDeactivateIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .CardDeactivateIcon:before { content: '\f389'; font-family: FontAwesome5Light; font-size: 64px;}
    .CardDeactivateIcon:after { content: '\f057'; font-family: FontAwesome5Solid; font-size: 24px; position: absolute; left: 40px; top: -6px;  }

.CardCopyIcon { position: relative; color: #262626 !important; float: left; line-height:64px; height:64px; }
    .CardCopyIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .CardCopyIcon:before { content: '\f389'; font-family: FontAwesome5Light; font-size: 64px; }
    .CardCopyIcon:after { content: '\f0c5'; font-family: FontAwesome5Solid; font-size: 24px; position: absolute; left: 40px; top: -6px; }

.CardCodeIcon { position: relative; color: #262626 !important; float: left; line-height:64px; height:64px; }
    .CardCodeIcon:hover { text-decoration: none !important; color: #d01e38 !important; }
    .CardCodeIcon:before { content: '\f389'; font-family: FontAwesome5Light; font-size: 64px; }
    .CardCodeIcon:after { content: '\f084'; font-family: FontAwesome5Solid; font-size: 24px; position: absolute; left: 40px; top: -6px;  }

.CardChangePinIcon
{
    position: relative;
    color: #262626 !important;
    float: left;
    line-height: 64px;
    height: 64px;
}

    .CardChangePinIcon:hover
    {
        text-decoration: none !important;
        color: #d01e38 !important;
    }

    .CardChangePinIcon:before
    {
        content: '\f389';
        font-family: FontAwesome5Light;
        font-size: 64px;
    }

    .CardChangePinIcon:after
    {
        content: '\f2f1';
        font-family: FontAwesome5Solid;
        font-size: 24px;
        position: absolute;
        left: 40px;
        top: -6px;
    }

.CardCopyCodeIcon
{
    position: relative;
    color: #262626 !important;
    float: left;
    line-height: 64px;
    height: 64px;
}

    .CardCopyCodeIcon:hover
    {
        text-decoration: none !important;
        color: #d01e38 !important;
    }

    .CardCopyCodeIcon:before
    {
        content: '\f389';
        font-family: FontAwesome5Light;
        font-size: 64px;
    }

   
i.CopyCardIcon:after
{
    content: '\f0c5';
    font-family: FontAwesome5Solid;
    font-size: 24px;
    position: absolute;
    left: 20px;
    top: -6px;
}
i.SendCardPinIcon:after
{
    content: '\f084';
    font-family: FontAwesome5Solid;
    font-size: 24px;
    position: absolute;
    left: 40px;
    top: -6px;
}

/* MAIN MENU */
.MainMenuWrapper { float: left; }
    .MainMenuWrapper ul { float: left; }
        .MainMenuWrapper ul li { float: left; list-style: none; display: inline-block; }
            .MainMenuWrapper ul li a { float: left; padding: 32px 20px 20px 20px; position: relative; transition-property: color; transition-duration: .3s; font-family: "CooperHewitt-Medium"; text-decoration: none; text-transform: uppercase; color: #2e2e34; }
                .MainMenuWrapper ul li a:hover { color: #acacb5; }
                .MainMenuWrapper ul li a.Selected { font-family: "CooperHewitt-Bold"; }
                    .MainMenuWrapper ul li a.Selected:after { position: absolute; content: ""; display: block; bottom: 10px; left: 50%; transform: translateX(-50%); right: 0; width: 30px; height: 4px; background: #d1202d; z-index: 12; }
            .MainMenuWrapper ul li .SubMenu { position: absolute; top: 83px; left: 64px; right: 0; z-index: 10; transform-origin: top center; display: none; }
    .MainMenuWrapper > ul > li > a.Selected + .SubMenu { display: block; }
    .MainMenuWrapper > ul > li > a + .SubMenu ul { width: 100%; margin: 0 auto; text-align: left; }
        .MainMenuWrapper > ul > li > a + .SubMenu ul li a { display: inline-block; font-weight: 700; padding: 15px 30px 11px 30px; color: #ccc; transition-property: color; transition-duration: .3s; }
            .MainMenuWrapper > ul > li > a + .SubMenu ul li a:hover { color: #fff; }
            .MainMenuWrapper > ul > li > a + .SubMenu ul li a.Selected { color: #fff; }
                .MainMenuWrapper > ul > li > a + .SubMenu ul li a.Selected:after { display: none; }

.BurgerMenu { box-sizing: content-box; width: 25px; height: 20px; padding: 35px 0 22px 0; display: none; position: relative; margin-left: 20px; }
    .BurgerMenu > span { height: 2px; background: #000; width: 100%; display: block; }
        .BurgerMenu > span:not(:last-child) { margin-bottom: 5px; }

/* VIEW MODE */
.ViewModeWrapper { float: right; display: none; }
    .ViewModeWrapper .ViewModeItem { padding: 15px; padding-left: 50px; padding-right: 20px; float: left; position: relative; color: #2d2d2d; font-size: 1.2rem; font-weight: 700; background-color: #fff; border: 1px solid #d01e38; text-transform: uppercase; border-top: 0; margin-right: 20px; }
        .ViewModeWrapper .ViewModeItem.Selected { background-color: #d01e38; border: 1px solid #d01e38; color: #fff; border-top: 0; }
        .ViewModeWrapper .ViewModeItem a { color: #2d2d2d; text-decoration: none; }
        .ViewModeWrapper .ViewModeItem.Selected a { color: #fff; text-decoration: none; }
    .ViewModeWrapper .Driver:before { content: url('/img/icon_driver.png'); position: absolute; left: 10px; top: 10px; }
    .ViewModeWrapper .Owner:before { content: url('/img/icon_owner.png'); position: absolute; left: 10px; top: 10px; }
    .ViewModeWrapper .Accounting:before { content: url('/img/icon_accounting.png'); position: absolute; left: 10px; top: 11px; }
    .ViewModeWrapper .ViewModeItem.Selected .Driver:before { content: url('/img/icon_driver_white.png'); position: absolute; left: 10px; top: 10px; }
    .ViewModeWrapper .ViewModeItem.Selected .Owner:before { content: url('/img/icon_owner_white.png'); position: absolute; left: 10px; top: 10px; }
    .ViewModeWrapper .ViewModeItem.Selected .Accounting:before { content: url('/img/icon_accounting_white.png'); position: absolute; left: 10px; top: 11px; }

/* FORM */
.Form { float: left; width: 100%; margin-bottom: 30px; clear: left; }
    .Form.Col2 { width: 50%; }
    .Form .FormRow { float: left; width: 100%; clear:left;  }
    .Form .FormRow.Half { float: left; width: 49%; }
    .Form .FormGroup { float: left; width: 100%;  }
        .Form .FormGroup.Small { width: 100px; margin-right: 10px; }
        .Form .FormGroup.Large { width: calc(100% - 110px); margin-right: 0px; }
        .Form .FormGroup.Half { float:left; width:50%; margin-right: 0px; clear:left;}
        .Form .FormGroup.Col2 { float: left; width: 49%; margin-right: 2%; margin-bottom:10px; }  
          .Form .FormGroup.Col3 { float: left; width: 32%; margin-right: 2%; }        
            .Form .FormGroup.Col3:nth-child(3n) { margin-right: 0; }
        .Form .FormGroup.Col4 { float: left; width: 24.75%; margin-right: 1%; }
            .Form .FormGroup.Col2:nth-child(2n) {  margin-right: 0; }
        .Form .FormRow.Max .FormGroup.Col2:nth-child(2n)
        {
            margin-right: 2%;
        }
    .Form .FormRow.Max .FormGroup.Col2.NoRightMargin
    {
        margin-right: 0;
    }
        .Form .OptionWrapper {float:right; width:48%; clear:right;padding-bottom:20px;}
            .Form .OptionWrapper.ChangePinCode
            {
                padding-bottom:30px;
            }
            .Form .OptionWrapper.Max .TextWrapper
            {
                /*width: 100px !important;*/
            }
    .Form label { text-transform: uppercase; font-size: 0.8rem; float: left; clear: left; font-family: "CooperHewitt-SemiBold"; padding-left: 8px; }
    .Form span.Text { float: left; clear: left; border: 1px solid #ddd; padding: 8px; border-radius: 3px; display: inline-block; width: 100%; background: #fff; margin-bottom: 10px; box-sizing: border-box; }
    .Form input[type=text] {  }
    
    .Form .TextWrapper { float: left; clear: left; border: 1px solid #ddd; padding: 8px; border-radius: 3px; display: inline-block; width: 100%; background: #fff; margin-bottom: 10px; box-sizing: border-box;  position:relative; }
    .Form .TextWrapper input[type=text], .Form .TextWrapper input[type=password] { float:left; width:100%; box-sizing:border-box; border:none; background:none; font-family: "CooperHewitt-Medium",Arial,sans-serif; font-size: 1rem; }
    .Form .TextWrapper.Disabled:after {content:'\f023'; font-family:FontAwesome5Light; font-size:16px; position:absolute; right:10px; top:50%; margin-top:-10px;}
    .Form .TextWrapper.Disabled input[type=text] { float:left; padding-right:20px;  }


        .Form .TextWrapper.UserIcon { padding-left:32px; }
        .Form .TextWrapper.UserIcon:before { content:'\f007'; font-family:FontAwesome5Light; font-size:16px; position:absolute; left:10px; top:50%; margin-top:-10px;}
        .Form .TextWrapper.KeyIcon {padding-left:32px; }
        .Form .TextWrapper.KeyIcon:before {content:'\f084'; font-family:FontAwesome5Light; font-size:16px; position:absolute; left:10px; top:50%; margin-top:-10px;}
    .Form span:empty:before { content: '\200b'; }
    .Form input[type=checkbox] { display: none; }
    .Form .CheckboxWrapper label {-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */}
        .Form input[type=checkbox] + label { padding-left: 24px; position: relative; margin-left: 2px; margin-bottom: 5px; }
            .Form input[type=checkbox] + label:not(.Disabled) { cursor: pointer; }
            .Form input[type=checkbox] + label::before { position: absolute; left: 0; top: -1px; content: '\f0c8'; font-family: 'FontAwesome5Light'; font-size: 20px; margin-right: 5px; /*float: left;*/ }
        .Form input[type=checkbox]:checked + label::before { content: '\f14a'; font-family: 'FontAwesome5Light'; }

    .Form h5
    {
        float: left;
        margin-top: 0px;
        margin-bottom: 10px;
        width: 100%;
    }
    .Form .ActionWrapper { clear:both; margin-top:10px; }
.ActionIcon { background: none; text-decoration:none; border: 0px; margin-top: 0px; text-align: center; box-sizing: border-box; text-transform: uppercase; font-size: 1rem; border-radius: 3px; color: #d01e38; cursor: pointer; transition: all 200ms linear;  margin-right:20px; }
    .ActionIcon:hover { text-decoration: none; color: #fff; }
    .ActionIcon:last-child {margin-right:0;}
    .ActionIcon.First {margin-left:0;}

.Form .DropDownListWrapper {  }
.Form .DropDownListWrapper .CustomDropDownListOuterWrapper { float:left; clear:left; margin-bottom:20px; padding-left:8px; width:100%; }
.Form .DropDownListWrapper .CustomDropDownListOuterWrapper .CustomDropDownListInnerWrapper .Selected span {margin-left:0;}

.Form .Button { margin-right:20px; }
    .Form .Button:last-child { margin-right:0px; }
    
/* ACCOUNT */
.AccountWrapper { float: right; position: absolute; right: 105px; top: 42px; }
    .AccountWrapper label { float: left; padding-top: 10px; padding-right: 10px; }
    .AccountWrapper .CustomDropDownListOuterWrapper {line-height:20px !important;}

/* USER INFO */
.UserInfoWrapper { float: left; clear: right; position: relative; padding-top: 14px; margin-left: 10px; z-index: 11; }
    .UserInfoWrapper label { float: left; padding-top: 7px; padding-right: 20px; }

    .UserInfoWrapper .UserInfoContent .User { float: right; cursor: pointer; white-space: nowrap; padding-left: 10px; text-overflow: ellipsis; transition-property: color; transition-duration: .3s; }
        .UserInfoWrapper .UserInfoContent .User:hover { color: #fff; }
        .UserInfoWrapper .UserInfoContent .User:before { float: right; content: '\f2bd'; font-size: 24px; font-family: 'FontAwesome5Light'; }

    /*.UserInfoWrapper .UserInfoContent .User:before { float: right; content: '\f107'; font-size: 32px; font-family: 'FontAwesome5'; padding-left: 5px; }*/
    .UserInfoWrapper .CustomerMenu { display: none; position: absolute; background: #fff; border: 1px solid #ccc; z-index: 99; left: -10px; top: 47px; color: #262626; text-transform: uppercase; border-radius: 3px; border-top-left-radius: 0; border-top-right-radius: 0; }
        .UserInfoWrapper .CustomerMenu.Selected { display: block; }
        .UserInfoWrapper .CustomerMenu li { float: right; clear: right; width: 100%; border: 0px; margin-left: 0px; box-sizing: border-box; padding-left: 0; }
            .UserInfoWrapper .CustomerMenu li span, .UserInfoWrapper .CustomerMenu li a { padding: 5px; cursor: pointer; display: block; width: 100%; color: #262626; box-sizing: border-box; padding-left: 20px; white-space: nowrap; padding-right: 20px; transition: background linear 200ms; text-decoration: none; }
                .UserInfoWrapper .CustomerMenu li span:hover, .UserInfoWrapper .CustomerMenu li a:hover { background-color: #eee; }

        .UserInfoWrapper .CustomerMenu:after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; position: absolute; top: -8px; left: 23px; }
        .UserInfoWrapper .CustomerMenu:before { content: ''; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #bbb; position: absolute; top: -9px; left: 22px; }


/* CATEGORY MENU */
.InnerCategoriesWrapper { color: #ccc; }
    .InnerCategoriesWrapper nav { }
        .InnerCategoriesWrapper nav ul { }
            .InnerCategoriesWrapper nav ul li { float: left; padding: 15px 30px 11px 30px; text-transform: uppercase; font-weight: 400; }

/* LANGUAGE */
.LanguageWrapper { position: absolute; top: 30px; left: 900px; }
    .LanguageWrapper a.Selected { border-radius: 50%; background: #fff; display: inline-block; overflow: hidden; width: 24px; height: 24px; position: relative; cursor: pointer; }
    .LanguageWrapper img { position: absolute; top: -11px; left: -8px; }
    .LanguageWrapper select { display: none; }

/* FOOTER */
.OuterFooterWrapper .FooterItem { float: left; width: 33.3%; padding: 20px; box-sizing: border-box; color: #1f2833; line-height: 1.4rem; }
    .OuterFooterWrapper .FooterItem a { color: #1f2833; }
    .OuterFooterWrapper .FooterItem:last-child { float: right; }
.Facebook { background-image: url(/img/spritemap.png); background-position: -134px -66px; width: 25px; height: 25px; text-decoration: none; display: block; }

/* CUSTOM DROPDOWNLIST */
select.CustomDropDownList { display: none; }
.CustomDropDownListOuterWrapper { float: left; width: 300px; padding: 5px; color: #2e2e34; padding-left: 10px; padding-right: 10px; font-size: 0.9rem; line-height: 25px; background: #fff; box-sizing: border-box; border: 1px solid #c6c6c6; position: relative; border-radius: 3px; margin-right: 0px; }
.CustomDropDownListOuterWrapper.Large {width: 500px;}
.CustomDropDownListInnerWrapper { }
    .CustomDropDownListInnerWrapper .Selected { float: left; width: 100%; cursor: pointer; }
    .CustomDropDownListInnerWrapper .Selected.SingelValue { cursor:default }
        .CustomDropDownListInnerWrapper .Selected:before { position: absolute; width: 30px; top: 0; bottom: 0; right: 0px; text-align: center; color: #232323; padding-top: 8px; content: '\f107'; font-size: 20px; font-family: 'FontAwesome5'; padding-left: 0px; background-color: #fff; border-bottom-right-radius: 3px; border-top-right-radius: 7px; }
        .CustomDropDownListInnerWrapper .Selected.SingelValue:before { content:''; }
        .CustomDropDownListInnerWrapper .Selected span { float: left; padding-top: 3px; margin-left: 5px; white-space: nowrap; width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; margin-right: 0px; }
    .CustomDropDownListInnerWrapper .Items { position: absolute; z-index: 990; background: #fff; min-width: 100%; left: 0px; top: 45px; box-sizing: border-box; padding: 0px; border: 1px solid #ccc; display: none; border-radius: 3px; }
        .CustomDropDownListInnerWrapper .Items .ItemsContent { max-height: 300px; overflow: auto; }
        .CustomDropDownListInnerWrapper .Items.Active { display: block; }
        .CustomDropDownListInnerWrapper .Items .Item { float: left; width: 100%; text-align: left; padding: 10px; box-sizing: border-box; padding-top: 10px; padding-bottom: 6px; cursor: pointer; border-bottom: 1px solid #eee; padding-right: 20px; }
            .CustomDropDownListInnerWrapper .Items .Item.Selected { color: #d01e38; font-family: "CooperHewitt-Semibold"; background: #eee; }
                .CustomDropDownListInnerWrapper .Items .Item.Selected:before { display: none; }
            .CustomDropDownListInnerWrapper .Items .Item:hover { background: #eee; }
        .CustomDropDownListInnerWrapper .Items:after { content: ''; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; position: absolute; top: -8px; right: 6px; }
        .CustomDropDownListInnerWrapper .Items:before { content: ''; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #bbb; position: absolute; top: -9px; right: 5px; }

/* BOX FRONTPAGE */
.BoxWrapper { float: left; width: 100%; margin-bottom: 40px; }
    .BoxWrapper h2 { font-size: 1.4rem; font-weight: 400; border-bottom: 1px solid #d01e38; padding-bottom: 5px; margin-bottom: 10px; text-transform: uppercase; }
    .BoxWrapper .BoxItem { float: left; width: 500px; border: 1px solid #eee; height: 180px; margin-right: 60px; box-sizing: border-box; padding: 30px; padding-left: 100px; position: relative; }
        .BoxWrapper .BoxItem:last-child { margin-right: 0px; }

        .BoxWrapper .BoxItem.CardIcon:before { content: '\f09d'; font-family: 'FontAwesome5Light'; position: absolute; left: 30px; font-size: 40px; }
        .BoxWrapper .BoxItem.InvoiceIcon:before { content: '\f1ec'; font-family: 'FontAwesome5Light'; position: absolute; left: 30px; font-size: 40px; }
        .BoxWrapper .BoxItem.ContactIcon:before { content: '\f007'; font-family: 'FontAwesome5Light'; position: absolute; left: 30px; font-size: 40px; }
        .BoxWrapper .BoxItem.MapIcon:before { content: '\f279'; font-family: 'FontAwesome5'; position: absolute; left: 30px; font-size: 40px; }
        .BoxWrapper .BoxItem.GasPumpIcon:before { content: ' '; background-image: url('/img/icon_gas_pump.svg'); background-size: 40px 40px; position: absolute; left: 30px; display: block; width: 40px; height: 40px; }
        .BoxWrapper .BoxItem.AccountIcon:before { content: '\f085'; font-family: 'FontAwesome5'; position: absolute; left: 30px; font-size: 40px; }

/* CAMPAIGN */
.CampaignWrapper { float: left; width: 100%; border: 1px solid #eee; box-sizing: border-box; margin-bottom: 40px; margin-top: 20px; height: 312px; }
    .CampaignWrapper .ImageWrapper { float: left; width: 50%; }
        .CampaignWrapper .ImageWrapper img { max-width: 100%; }
    .CampaignWrapper .TextWrapper { float: left; width: 50%; box-sizing: border-box; padding: 50px; }
        .CampaignWrapper .TextWrapper h1 { font-size: 2rem; text-transform: uppercase; margin-bottom: 20px; border-bottom: 1px solid #d01e38; padding-bottom: 10px; }

/* ScrollToTop */
.ScrollToTopWrapper { position: fixed; height: 40px; bottom: 0px; right: 100px; z-index: 999; background: #d1202d; width: 180px; display: none; border-top-left-radius: 3px; border-top-right-radius: 3px; }
    .ScrollToTopWrapper .ScrollToTopContent { float: left; padding: 10px; font-size: 1rem; color: #fff; cursor: pointer; display: block; white-space: nowrap; }
        .ScrollToTopWrapper .ScrollToTopContent:before { content: '\f062'; font-family: 'FontAwesome5Light'; float: left; padding-right: 5px; }

/* TOOLTIP */
.IPBTooltip { position: absolute !important; z-index: 999; left: 0; top: 0; max-width: 300px; width: auto; font-weight: 400; line-height:12px; white-space: nowrap; display: block; background: #fff !important; padding: 5px 8px 5px 8px; border-radius: 3px; font-size: 12px; border: 1px solid #ddd; color: #2e2e34; transition: opacity 200ms linear; opacity: 0; }
    .IPBTooltip.Active { opacity: 1; }
    .IPBTooltip.Multiline { white-space: normal; line-height: 1rem; width:300px; }
    .IPBTooltip::after { content: ""; position: absolute; border-width: 5px; border-style: solid; }
    .IPBTooltip::before { content: ""; position: absolute; border-width: 6px; border-style: solid; }
    .IPBTooltip.BOTTOM::before { margin-left: -6px; bottom: 100%; left: 50%; border-color: transparent transparent #ddd transparent; }
    .IPBTooltip.BOTTOM::after { margin-left: -5px; bottom: 100%; left: 50%; border-color: transparent transparent #ededed transparent; }
    .IPBTooltip.TOP::before { margin-left: -6px; top: 100%; left: 50%; border-color: #ddd transparent transparent transparent; }
    .IPBTooltip.TOP::after { margin-left: -5px; top: 100%; left: 50%; border-color: #ededed transparent transparent transparent; }
    .IPBTooltip.LEFT::before { margin-top: -6px; top: 50%; left: 100%; border-color: transparent transparent transparent #ddd; }
    .IPBTooltip.LEFT::after { margin-top: -5px; top: 50%; left: 100%; border-color: transparent transparent transparent #ededed; }
    .IPBTooltip.RIGHT::before { margin-top: -6px; top: 50%; right: 100%; border-color: transparent #ddd transparent transparent; }
    .IPBTooltip.RIGHT::after { margin-top: -5px; top: 50%; right: 100%; border-color: transparent #ededed transparent transparent; }

td.dxgv { overflow: visible !important; }
/* GRID FIX */
table.dxgvTable_Moderno { overflow: visible !important; position: static !important; }
/* GRID FIX */


/* FILTERWRAPPER */
.FilterWrapper { float: left; width: 100%; margin-bottom: 40px; background: #fefefe; padding: 20px; margin-left: -20px; border-top: 1px solid #f3f3f3; border-bottom: 1px solid #f3f3f3; }
    .FilterWrapper h2 { border-bottom: 0; padding-bottom: 0px; }
    .FilterWrapper label { float: left; padding-top: 10px; margin-right: 20px; text-transform: uppercase; }
    .FilterWrapper .DateEditWrapper {float:left; margin-right:40px; }
    .FilterWrapper .CustomDropDownListOuterWrapper { width: 110px; margin-right: 40px; margin-bottom:20px;  }
    .FilterWrapper .ButtonsWrapper { float: left; }
    .FilterWrapper .ButtonsWrapper .Button { float: left; margin-top:-1px; margin-right:40px; margin-left:0px; }

.DateEditWrapper .dxeButtonEditSys.dxeButtonEdit_Moderno {  background-color:#fff;}
.DateEditWrapper .dxeEditArea_Moderno.dxeEditAreaSys { background-color: #fff; font-size: 1rem; font-family: "CooperHewitt-Medium",Arial,sans-serif; line-height:1.2rem; height:24px; }
/* SUMMARY */
.SummaryWrapper { float: left; width: 100%; margin-bottom: 20px; }
    .SummaryWrapper h2 { border-bottom: 1px solid #f3f3f3; padding-bottom: 5px; }
    .SummaryWrapper .SummaryItem { float: left; margin-bottom: 20px; }
        .SummaryWrapper .SummaryItem.Col3 { width: 33.33%; }

        .SummaryWrapper .SummaryItem label { display: block; text-transform: uppercase; color: #888; margin-bottom: 5px; }
        .SummaryWrapper .SummaryItem span { display: block; font-size: 1.4rem; font-family: "CooperHewitt-Semibold"; }
    .SummaryWrapper .Button { float: right; }

/* GRID */
.GridWrapper { background: #fff; }
    .GridWrapper h2 { margin-bottom: 0; border-bottom: 0; padding-bottom: 5px; }
.Grid { width: 100%; font-size: 1rem; }
    .Grid .dxgvGroupPanel_Moderno { border-top: 1px Solid #f3f3f3; }
    .Grid .dxgvGroupPanel_Moderno table table { width:80px !important; }
    .Grid .dxgvHeader_Moderno { font-weight: 600 !important; text-transform: uppercase; font-size: 0.8rem; }

    .Grid td.dxgv { vertical-align: middle !important; }
    .Grid a.Icon span:not(.IPBTooltip) { display: none; }
    /* Remove blank space */
    .Grid .NoWrap { white-space: nowrap; float: left; width: 50px; }

    .Grid .AdaptivityFix td { border-bottom: 1px solid #d1d1d1 !important; }
    .Grid .dxgvAIC { text-align: right; }
    .Grid .GridHeaderDownload table { display: none; }
    /*.Grid table td:nth-child(1) {}
.Grid table td:nth-child(2) {width:100px;}
.Grid table td:nth-child(3) {width:100px;}
.Grid .DueDate {width:100px !important;}
.Grid table td:nth-child(8) {width:90px;}*/

    /*.Grid.Invoice tr.dxgvArm td:nth-child(1) { }

    .Grid.Invoice tr.dxgvArm td:nth-child(8) { width: 70px !important; }*/

    .Grid.OpenInvoice td.Actions {width:60px !important;}
    .Grid.OpenInvoice tr.dxgvArm td:nth-child(5) { width: 120px !important; }
    /*.Grid.OpenInvoice tr.dxgvArm td:nth-child(10) {width:50px !important;  }*/
            /*.Grid.Kort .NoWrap a:nth-child(9) { margin-right: 0px; }*/
    /*.Grid.Kort tr.dxgvArm td:nth-child(7) {width:120px !important; }*/


    .Grid.Kort td.Actions {width:40px !important;}
    .Grid.Kort .NoWrap { width: 25px; }
        .Grid.Kort .NoWrap a { margin-right: 0px; }

    .Grid.Kort.Bombrikker .NoWrap
    {
        width: 55px;
    }

        .Grid.Kort.Bombrikker .NoWrap .DeleteIcon
        {
            margin-left:10px;
        }

.Grid.Users tr.dxgvArm td:nth-child(4) {width:110px;}
.Grid.Users .NoWrap { width: 80px !important; }
.Grid.Users .EditIcon {margin-right:20px; margin-left:10px;}

.Grid.OpenInvoice .Actions .dx-wrap.dx-ellipsis {display:none !important}
.Grid.OpenInvoice .NoWrap {width: 25px;}

.Grid.Invoice .NoWrap {width: 75px !important;}

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

.Grid.ReportUsers {margin-top:20px; float:left; width:100%;}
.Grid.ReportUsers td.Actions {width:100px !important;}
.Grid.ReportUsers .NoWrap { width: 90px !important; }
.Grid.ReportUsers .NoWrap { width: 90px; }
        .Grid.ReportUsers .NoWrap a {  }
        .Grid.ReportUsers .EditIcon {margin-right:20px; margin-left:10px;}
        .Grid.ReportUsers .UpdateIcon {margin-right:20px; margin-left:17px;}

.Grid .InfoColumn { width: 50px}

.Grid .dxgvInlineEditRow_Moderno td
{
    font-size: 1rem;
}
.Grid .dxgvEmptyDataRow_Moderno td {border-bottom: 1px solid #ddd !important;}

.dxbDisabled_Office2010Silver
{
    color: #bbb !important;
}
.dxbDisabled_Office2010Silver:hover
{
    color: #bbb !important;
}

/* MIN SIDE */
.UserDetailInfoWrapper
{
    float: left;
    width: 100%;
}
.UserChangePasswordWrapper { float: left; width: 100%; }

/* KORT */
.CardDetailWrapper { background: #fefefe; border-top: 1px solid #f3f3f3; padding: 20px; width: 100%; padding-bottom: 0; margin-bottom: 20px; border-bottom: 1px solid #f3f3f3; float:left; margin-left:-20px; }

/* BESTILLING */
.OrderCardWrapper  { background: #fefefe; border-top: 1px solid #f3f3f3; padding: 20px; width: 100%; padding-bottom: 0; margin-bottom: 20px; border-bottom: 1px solid #f3f3f3; float:left; margin-left:-20px; }

/* BRUKERE */
.NewUserWrapper {float:left; width:100%; margin-bottom:20px;}
.UserDetailsWrapper {background: #fefefe; border-top: 1px solid #f3f3f3; padding: 20px; width: 100%; padding-bottom: 0; margin-bottom: 20px; border-bottom: 1px solid #f3f3f3; float:left; margin-left:-20px;}

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

/* CUSTOM POPUP */
.CustomPopupOuterWrapper { position: fixed; z-index: 9999; opacity: 0; left: 0px; top: 0px; bottom: 0px; right: 0px; background-color: rgba(52,73,94,0.5); text-align: center; transition: opacity 500ms ease-in-out; }
.CustomPopupInnerWrapper { min-width: 200px; max-width: 400px; display: inline-block; box-shadow: 0px 2px 5px rgba(0,0,0,0.5); border: 10px solid #34698e; background-color: #fff; padding: 20px; border-radius: 10px; position: relative; padding-bottom: 10px; }
.CustomPopupOuterWrapper.Active { opacity: 1; }
.CustomPopupOuterWrapper .CustomPopupContent.Hidden { display: none; }
.CustomPopupOuterWrapper .CustomPopupContent { display: inline; }
    .CustomPopupOuterWrapper .CustomPopupContent h1 { margin-top: 0px; border-bottom: solid 1px #444; padding-bottom: 20px; font-size: 1.4rem; font-weight: bold; padding-left:50px; text-align:left; }
    .CustomPopupOuterWrapper .CustomPopupContent .Form { text-align: left; }
    .CustomPopupOuterWrapper .CustomPopupContent p { text-align: left; }
    .CustomPopupOuterWrapper .CustomPopupContent p b { font-weight:700; }
    .CustomPopupOuterWrapper .CustomPopupContent .Button { float: left; margin-top: 0px; width: 100%; margin-bottom: 10px; }
    .CustomPopupOuterWrapper .CustomPopupContent .CloseButton { float: left; margin-top: 0px; width: 100%; }
.CustomPopupContent:before {font-family: FontAwesome5; position: absolute; left: 20px; top: 25px; padding-right: 6px;  font-size: 48px;  }
.CustomPopupContent.SUCCESS:before { content: '\f058'; color: #3c763d; }
.CustomPopupContent.ERROR:before { content: '\f056'; color: #a94442; }
.CustomPopupContent.INFO:before { content: '\f05a'; color: #31708f; }
.CustomPopupContent.WARNING:before { content: '\f06a'; color: #8a6d3b;  }
.CustomPopupContent .CallbackMessageWrapper { float: left; width: 100%; }

/* ADMIN LINK */
.AdminLinkWrapper {position:absolute; right:106px; top:10px;}
.AdminLinkWrapper a { text-decoration:none; text-transform:uppercase;  color:#2e2e34; transition-property: color; transition-duration: .3s; font-family: "CooperHewitt-Bold";}
.AdminLinkWrapper a:hover { color: #acacb5; }
.AdminLinkWrapper a:before {content:'\f33b'; font-family:FontAwesome5Light; font-size: 24px; float:right; padding-left:6px;}

/* IFRAME YOUTUBE */
.FrameWrapper {float:left; width:50%; text-align:center;  }
.FrameWrapper .iFrameYoutube {width:560px; height:315px; width:790px; height:444px;}

.FrontPageWrapper { float:left; width:50%; padding-right:40px; box-sizing:border-box;}
.FrontPageWrapper ul { padding-left:40px; font-size:1.2rem; }
.FrontPageWrapper ul li { float:left; width:100%; position:relative; margin-bottom:20px;}
.FrontPageWrapper ul li:before { font-family:FontAwesome5Light; content:'\f058'; font-size:1.4em; position:absolute;margin-left:-40px;}


.AddNewSubscription {
    float: left;
    width: 100%;
    margin-bottom: 0px;
    background: #fefefe;
    padding: 20px;
    margin-left: -20px;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;    
}

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

.AddNewIcon
{
    position: relative;
    float: left;
    text-decoration: none !important;
    margin-right: 20px !important;
    padding-left: 40px !important;
}

    .AddNewIcon:hover
    {

    }

    .AddNewIcon:before
    {
        content: '\f040';
        font-family: FontAwesome5Light;
        font-size: 24px;
        position: absolute;
        left: 10px;
    }