@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(https://fonts.googleapis.com/css?family=Merriweather:400);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,200,100,500,600,700,800,900);

/*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #bada55;
    text-shadow: none;
}

::selection {
    background: #bada55;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

:disabled { cursor: not-allowed !important; opacity: .7; }

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}



.pay_install_dt
{
    width:60%;
}

.pay_install_dd
{
    width:35%;
}

.pay_small_input
{
    width:50%;
}


.ReqField, .reqfield
{
    color:Red;
}


body { 
    font-family: 'Open Sans', sans-serif;
    color: #666;
    min-height: 100%;
    background: url(../img/bg.jpg) bottom center fixed;
    background-size: 100% 100%;
    font-size: 14px;
	margin: 0px ;
    padding: 0px;
    text-align: center;
    }
body.easter { 
    background: url(../img/bg3.jpg) top center fixed;
    background-repeat: no-repeat; 
    background-size: auto 100%;
    }
    body.easter header,
    body.easter div#pagewrap > section { border: 8px solid rgba(186, 218, 85, .5); }
    body.easter header {
        border-left: none;
        border-right: none;
        }
    
    div#pagewrap { padding-top: 20px; }

div#wrapper, div#pagewrap {  }

div#pagewrap > section {
    margin: 0 auto; 
    background: rgba(255, 255, 255, .5); 
    padding: 20px; 
    width: 80%; 
    text-align: left; 
    border: 8px solid rgba(255, 255, 255, .8);
    /*border: 8px solid rgba(186, 218, 85, .5);*/
    border-radius: 3px;
    position: relative;
    }
header, footer { position: relative; }
header {
    text-align: left; 
    background: rgba(255, 255, 255, .9);
    height: 50px;
    margin: 0 0 20px;
    border: 8px solid #fff;
    border-left: none;
    border-right: none;
    }
#loginheader {
    background: url(../img/logo.png);
    background-size: 26%;
    background-repeat: no-repeat;
    height: 230px;
    background-position: center bottom;
    border: none;
    }
footer {
    text-align: center;
    color: #fff;
    font-size: 12px;
    padding: 20px;
    background: url(../img/logo.png);
    background-size: 12%;
    background-repeat: no-repeat;
    height: 60px;
    background-position: center bottom;
    margin: 0 0 40px;
    }
    #Login footer { background: none; }

header h1 {
    position: absolute;
    margin: 0;
    top: 5px;
    left: 50px;
    text-shadow: 0px 1px 3px rgba(255, 255, 255, 1);
    color: #444;
    font-size: 30px;
    font-family: Merriweather, 'Open Sans', sans-serif;
    font-weight: 400;
    }
h2.view-title {
    margin: -10px 0 25px -10px;
    text-shadow: 0px 1px 3px rgba(255, 255, 255, 1);
    color: #444;
    font-size: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    font-family: Merriweather, 'Open Sans', sans-serif;
    font-weight: 400;
    }
a.help {
    position: absolute;
    top: -8px;
    right: -8px;
    border-radius: 0 0 0 10px;
    }


.error { color: #b00000; }

div.messaging {
    position: absolute;
    top: -8px;
    border: 1px solid #999;
    border-top: none;
    border-radius: 0 0 5px 5px;
    padding: 20px 100px 20px 70px;
    width: 40%;
    left: 20%;
    background: rgba(255, 255, 255, .9);
    overflow: hidden;
    box-shadow: 0px 3px 8px 3px rgba(0, 0, 0, 0.5);
    max-height: 500px;
    transition: max-height 2s ease-in;
    }
div.messaging.hidden {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    padding: 0;
    border: none;
    box-shadow: none;
    }
    div.messaging:before {
        content: "\f087";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        display: inline;
        height: 40px;
        width: 40px;
        top: 8px;
        left: 10px;
        position: absolute;
        font-size: 30px;
        border: 2px solid;
        border-radius: 22px;
        text-align: center;
        background: #fff;
        color: #5cb85c;
        }
    div.messaging.error { color: #b00000; }
    div.messaging.error:before { content: "\f088"; color: #b00000; }
    div.messaging .close-me {
        position: absolute;
        right: 2px;
        bottom: 2px;
        }

/* Confirms */
#messages {
    position: fixed;
    top: 10px;
    border-radius: 5px;
    background: ivory;
    width: 50%;
    left: 25%;
    z-index: 10000;
    border: 1px solid #333;
    padding: 0 0 40px;
    box-shadow: 0px 3px 8px 3px rgba(0, 0, 0, 0.5);
    }

    #messages h4 {
        margin: 0;
        padding: 5px 20px;
        background: #bada55;
        border-bottom: 1px solid #333;
        border-radius: 5px 5px 0 0;
        background: rgb(255, 255, 255); 
        color: rgb(100, 100, 100);
        padding: 6px 10px;
        border-radius: 5px 5px 0 0;
        border-bottom: 1px solid rgb(200, 200, 200); 
        font-size: 20px;
        background-color: #F5F4F9;
        background-image: linear-gradient(to bottom, #eee 0%, #fff 100%);
        background-repeat: repeat-x;
        box-shadow: 0 1px 0 #fff inset;
        text-align: left;
        font-family: Merriweather, 'Open Sans', sans-serif;
        }
        .alert i.fa-exclamation-triangle {
            font-style: normal;
            font-weight: normal;
            display: inline-block;
            height: 34px;
            width: 40px;
            font-size: 30px;
            border: 2px solid;
            border-radius: 22px;
            text-align: center;
            background: #fff;
            float: left;
            margin: 10px;
            padding: 3px 0;
            }
    #messages p { padding: 0 20px; text-align: left; }
    #messages.alert p {
        text-align: left;
        padding-left: 64px;
        }
    #messages a.close-me {
        position: absolute;
        bottom: 5px;
        right: 5px;
        }
    #messages .action { 
        position: absolute; 
        right: 0; 
        left: 0; 
        margin: 0; 
        border-top: 1px solid #ccc; 
        padding: 5px; 
        bottom: 0; 
        text-align: right;
        }
        
        #messages .action .btn { margin-left: 10px; }





ul.account {
    list-style: none;
    margin: 0 10px;
    padding: 0;
    float: right;
    }
    ul.account li {
        padding: 5px 10px;
        display: inline-block; 
        }
    ul.account li.user:before {
        content: "\f21b";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        display: inline-block;
        height: 30px;
        width: 30px;
        top: 3px;
        left: -12px;
        position: relative;
        font-size: 22px;
        border: 2px solid;
        border-radius: 34px;
        text-align: center;
        background: #fff;
        }
        ul.account li a {
            text-decoration: none;
            font-weight: bold;
            color: #000088;
            font-family: Merriweather, 'Open Sans', sans-serif;
            }

nav.primary ul {
    margin: 0; 
    padding: 0; 
    width: 33%; 
    display: inline-block; 
    min-width: 250px; 
    vertical-align: top;
    }
    nav.primary li {
        list-style: none;
        margin: 0 .5% 1% 0;
        padding: 0;
        display: inline-block;
        height: 65px;
        width: 100%;
        border: 1px solid #bada55;
        border-radius: 8px;
        position: relative;
        vertical-align: top;
        background: rgba(255, 255, 255, .5);
        }
        nav.primary li a {
            display: block;
            height: 35px;
            padding: 17px 10px 10px 20px;
            color: #666;
            text-decoration: none;
            line-height: 1.2em;
            font-family: Merriweather, 'Open Sans', sans-serif;
            }
        nav.primary li a:focus { outline: none; }
            nav.primary li a span {
                /*display: none;*/ 
                opacity: 0;
                color: transparent;
                bottom: 140%;
                transition: opacity .5s, bottom .5s;
                -moz-transition: opacity .5s, bottom .5s;
                -webkit-transition: opacity .5s, bottom .5s;
                font-size: 10px !important;
                line-height: 12px;
                text-indent: -10000px;
                }
            nav.primary li:hover a span:after,
            nav.primary li a:focus span:after {
                content: "";
                border: 1px solid #666;
                background: #bada55;
                transform: rotate(45deg);
                height: 20px;
                width: 20px;
                display: block;
                position: absolute;
                bottom: -10px;
                left: 50%;
                margin-left: -12px;
                border-left: none;
                border-top: none;
                }
            nav.primary li:hover a span,
            nav.primary li a:focus span {
                display: block; 
                bottom: 121%;
                position: absolute;
                border: 1px solid #666;
                background: #bada55;
                font-weight: normal !important;
                border-radius: 5px;
                padding: 10px;
                font-style: normal;
                opacity: 1.0;
                text-indent: 0;
                color: #666;
                
                width: 200px;
                left: 50%;
                margin-left: -110px;
                }
                nav.primary li a span:hover { display: none; }
    nav.primary li:hover { background: #fff; font-style: italic; }
        nav.primary li a .fa {
            font-size: 19px;
            vertical-align: middle;
            padding: 0;
            border: 2px solid #bada55;
            border-radius: 16px;
            text-align: center;
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-right: 10px;
            line-height: 29px;
            background: #fff;

            }
        nav.primary li:hover a .fa,
        nav.primary li a:focus .fa {
            -webkit-animation:spin .25s linear;
            -moz-animation:spin .25s linear;
            animation:spin .25s linear;
            }
            @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
            @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
            @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

ul.actions {
    list-style: none;
    margin: 15px 0;
    padding: 0;
    clear: both;
    height: 30px;
    }
    ul.actions li { float: right; }
/*
.submit-shift > fieldset:first-child { margin-top: 50px; }
.submit-shift ul.actions:last-child {
    position: absolute;
    top: 55px;
    right: 38px;
    }
*/

section#Content, section#LoginContent { margin: 0 auto; }

#pagewrap section#LoginContent {
    width: 400px !important; 
    min-width: 300px; 
    margin-top: 20px !important;
    background: rgba(255, 255, 255, .3);
    }

fieldset {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px 10px;
    border-radius: 5px;
    margin: 10px 1%;
    width: 96%;
    background: rgba(255, 255, 255, .8);
    }
    fieldset p { margin: 5px 20px 10px; }
fieldset.two-col-float {
    width: 45%;
    display: inline-block;
    vertical-align: top;
    }
section#LoginContent fieldset {
    width: 92%;
    padding: 2%;
    margin: 0 2% 10px;
    background: #fff;
    border: 2px solid #bada55;
    }
    section#LoginContent fieldset button {
        float: right;
        margin: 10px;
        }
    section#LoginContent fieldset legend {
        padding: 10px 20px 10px 30px; 
        border: 1px solid #bada55; 
        border-radius: 3px 18px 18px 3px;
        }
    #Login section#LoginContent fieldset legend:before { content: "\f085"; }
    section#LoginContent fieldset legend span.bd-icon { line-height: 1.4em; }
    #Login section#LoginContent fieldset legend:before,
    section#LoginContent fieldset legend span.bd-icon { 
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        display: inline;
        height: 55px;
        width: 55px;
        top: -12px;
        left: -20px;
        position: absolute;
        font-size: 38px;
        border: 2px solid #bada55;
        border-radius: 30px;
        background: #fff;
        text-align: center;
        }
    legend {
        border: 0;
        padding: 0;
        padding: 4px 10px;
        margin: 0 10px;
        background: #fff;
        border-radius: 3px;
        font-size: 15px;
        border: 1px solid #ccc;
        font-family: Merriweather, 'Open Sans', sans-serif;
        }

/*#fsCreditCards, #fsEmailOptions { background: #fff; min-height: 80px; }*/
#fsCreditCards dl { padding-right: 6%; }
#fsCreditCards dl, #fsCreditCards dt, #fsCreditCards dd { display: inline; }
#fsCreditCards label { display: inline; }
#fsCreditCards input, #fsEmailOptions input { vertical-align: middle; } 
/* #fsEmailOptions dl { margin-bottom: 5px; }
#fsEmailOptions dt { width: 80%; padding: 0; }
#fsEmailOptions dd { width: 15%; } */


/* buttons */
.btn-primary {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
    }
.btn-primary:hover {
    color: #fff;
    background-color: #3071a9;
    border-color: #285e8e;
    }
.btn-success:hover, button[type="submit"]:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}
.btn-success, button[type="submit"] {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn-cancel:hover {
    color: #666;
    background-color: #ddd;
    border-color: #666;
}
.btn-cancel {
    color: #666;
    background-color: #ccc;
    border-color: #999;
}
button, .btn {
    transition: all 0.3s ease 0s !important;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid #fff;
    border-radius: 4px;
    text-decoration: none;
    }

i.fa {
    padding-right: 5px;
    min-width: 16px;
    text-align: center;
    }

.wiz-button {
    color: #666;
    text-decoration: none;
    border: 1px solid #fff;
    background: #ccc;
    border-radius: 5px;
    display: inline-block;
    width: 25.5%;
    padding: 10px 3%;
    margin: 0 1% 10px 0;
    min-height: 150px;
    vertical-align: top;
    font-size: 13px;
    }
.wiz-button:hover {
    background: #fff; 
    color: #000088; 
    border-color: #000088; 
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
    }
.wiz-button p { font-weight: bold; }
.wiz-button ul { margin: 0 20px; padding: 0; font-size: 12px; }


.dataTables_wrapper {
    padding: 10px 10px;
    background: rgba(255, 255, 255, .5);
    border-radius: 3px;
    }

table.dataTable thead th.action { background: none; cursor: default; }
table.dataTable tbody td.action { white-space: nowrap; line-height: 1.5em; }

td.action .action-view, td .action-view, 
td.action .action-edit, 
td.action .redirect-edit, 
td.action .redirect-view, 
td.action .action-delete, 
td.action .action-copy {
    text-indent: -10000px;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0 5px;
    position: relative;
    }

td.action .action-view:after, td .action-view:after, 
td.action .action-edit:after, 
td.action .redirect-edit:after,
td.action .redirect-view:after,
td.action .action-delete:after, 
td.action .action-copy:after {
    display: inline-block;
    text-align: center;
    background: #eee;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: 1px solid;
    border-radius: 5px;
    text-indent: 0;
    position: absolute;
    left: 0;
    top: 0;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    cursor: pointer;
    }
td.action .action-edit:after, td.action .redirect-edit:after { content: '\f040'; }
td.action .action-view:after, td .action-view:after, td .redirect-view:after { content: '\f06e'; }
td.action .action-delete:after, td.action .action-delete:after { content: '\f014'; }
td.action .action-copy:after { content: '\f0c5'; }
#liCancel {
    /*float: left;*/
    /*margin: 0;*/
    }

#LoginContent fieldset dl { margin: 0 8px; }

/* forms */
fieldset dl, dl.form-group {
    margin: 0; 
    padding: 0; 
    font-size: 14px; 
    }
    
dl.form-group { margin: 5px 1%; }
    fieldset dt,
    .form-group dt {
        margin: 0; 
        padding: .7em 0 0; 
        display: inline-block; 
        width: 40%; 
        vertical-align: top;
        line-height: 1.4em;
        }
        dt label {
            font-weight: bold; 
            text-align: right; 
            display: block; 
            }
            dt label:after {
                content: ":";
                }
        dd label {
            /* padding: .7em 0 0 10px; */
            display: block;
            }
            dt label span { padding-right: 10px; }
    fieldset dd,
    .form-group dd {
        margin: 0; 
        padding: 0; 
        display: inline-block; 
        width: 58%; 
        vertical-align: top;
        line-height: 1.4em;
        vertical-align: bottom;
        }
    .form-group dt,
    .form-group dd,
    .form-group label {
        /* width: auto; */ 
        }
        
    #divOfferBox dt{width:15%;text-align:right;}
    #divOfferBox dd{width:80%;}        
    
    #fsSearchCriteria dt { width: 28%; }
    
    input#txtCustNo { width: 70%; }
    
    #fsCustomerDetails dl { margin-bottom: 10px; }
        #fsCustomerDetails dt { padding: 0; }
    #txtOfferCode, #txtReferredCustomer { width: 150px; }
    
    #fsSearchResults dd { padding: 10px 0 0 5px; }
    #fsSearchResults #btnDelete {
        position: absolute;
        top: 28px;
        right: 12px;
        }
    #fsSearchResults #fsDeleteConfirmation { display: inline; padding: 0; }
        
    #fsSearchResults #btnResetPassword {
        position: absolute;
        top: 68px;
        right: 12px;
        }

    #fsSearchResults #btnResetProfile {
        position: absolute;
        top: 28px;
        right: 12px;
        }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
    padding: 5px 1%;
    margin: 5px 1%;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 14px;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus { border-color: #333; }
dd > input[type="text"],
input[type="tel"],
dd > input[type="email"],
dd > input[type="password"],
dd > input[type="search"],
dd > select,
dd > textarea {
    width: 96%; 
    }
td input[type="text"],
input[type="tel"],
td input[type="email"],
td input[type="password"],
td input[type="search"],
td select,
td textarea {
    width: 96%; 
    }

dd > select,
td select {
    width: 100%; 
    }
    
input:read-only { 
    border: none;
    background: none;
    }
    
input[type="checkbox"] {
    height: 20px;
    width: 20px;
    margin: 0;
    padding: 0;
    margin: 0 0 0 5px;
    }
dd input[type="checkbox"] {
    margin-top: .7em;
    }
    
.action input[type="checkbox"] {
    height: 20px;
    width: 20px;
    margin: 5px;
    }
    
fieldset.two-col dl, dl.two-col {
    width: 48%;
    display: inline-block;
    }
.tab_content dl.two-col {
    width: 46%;
    }

fieldset.three-col dl, dl.three-col {
    width: 31%;
    display: inline-block;
    vertical-align: middle;
    }

dl.one-line { display: block !important; clear: both;  }

.inline-fields dd input,
.inline-fields dd select { width: auto; }
.inline-fields dt label { padding: 0; }

table {
  width: 100%;
  margin-bottom: 20px;
  background: none;
}

table caption {
    font-size: 14px;
    background: #eee;
    border: 1px solid #ddd;
    padding: 4px 10px;
    width: 96%;
    margin: 10px auto;
    border-radius: 5px 5px 0 0;
    }
table tr, table td {
  background: none !important;
  color: #666 !important; 
}
table a { color: #666 !important; }

.redirect-link {color: blue !important; }


table thead > tr > th,
table tbody > tr > th,
table tfoot > tr > th,
table thead > tr > td,
table tbody > tr > td,
table tfoot > tr > td {
  padding: 4px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  
}

table thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #dddddd;
}

table caption + thead tr:first-child th,
table colgroup + thead tr:first-child th,
table thead:first-child tr:first-child th,
table caption + thead tr:first-child td,
table colgroup + thead tr:first-child td,
table thead:first-child tr:first-child td {
  border-top: 0;
}

table tbody + tbody {
  border-top: 2px solid #dddddd;
}

table table {
  background-color: #ffffff;
}

table.striped > tbody > tr:nth-child(odd) > td,
table.striped > tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9;
    }

th.action { text-indent: -10000px; }
div.dataTables_scroll {
    background: rgba(255, 255, 255, .5);
    border-radius: 3px; 
    }
    
.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate { white-space: nowrap; } 

table.dataTable tbody tr:hover td { background: #fff !important; }

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc, 
table.dataTable thead .sorting_asc_disabled, 
table.dataTable thead .sorting_desc_disabled {
    background-position: center right;
    line-height: 1em;
    font-size: 12px;
    }
table.dataTable tbody td {
    line-height: 1.2em;
    font-size: 12px;
    }
table.dataTable thead th, 
table.dataTable thead td {
    padding: 6px 18px 6px 10px;
    }



/* TABS */

.tabset {
    padding: 6px 0 0;
    /*border: 1px solid #eee;
    background-color: rgb(250, 250, 250);*/
    margin: 20px 0;
    position: relative;
    clear: both;
    border-radius: 4px 4px 0 0;
    }
    .tabset>dt {
        display: inline-block;
        margin: 0 0 -2px 3px; 
        padding: 0; 
        width: auto;
        vertical-align: middle;
        }
    .tabset>dt:first-child {
        margin: 0 0 -2px 30px; 
        }
    .tabset dt.active {
        border-top: 3px solid rgba(0, 100, 0, .5);
        border-radius: 4px 4px 0 0;
        z-index: 20;
        border-bottom: 1px solid #fff;
        border-left: 1px solid rgba(0, 100, 0, .5);
        border-right: 1px solid rgba(0, 100, 0, .5);
        }
        .tabset>dt>a {
            white-space: nowrap;
            color: #fff;
            background: rgba(0, 100, 0, .5);
            text-decoration: none;
            position: relative;
            display: block;
            padding: 3px 15px;
            line-height: 1.42857143;
            border: 1px solid rgb(0, 100, 0);
            border-bottom: transparent;
            border-radius: 4px 4px 0 0;
            }

        .tabset>dt>a:hover {
            background-color: #fff;
            box-shadow: none;
            color: #333;
            border-color: rgb(0, 100, 0) rgb(0, 100, 0) transparent;
            opacity: 0.85;
            }
        .tabset>dt.active>a {
            background-color: #fff;
            border: none;
            color: #333;
            line-height: 16px;
            position: relative;
            z-index: 20;
            padding: 6px 15px;
            }
        .tabset dt.active a:hover { opacity: 1; }

    .tabset>dd {
        display: none;
        width: 94%;
        margin: 0 1%; 
        padding: 10px 2%; 
        background: rgba(255, 255, 255, .8);
        border: 2px solid rgba(0, 100, 0, .5);
        z-index: 10;
        border-radius: 5px;
        }
    /*
        .tabset:after {
            content: "";
            display: table;
            clear: both;
            }
        */
    .tabset>dd.active { display: block; }







/* MODALS */

#iframeContainer.full-screen, #iframeContainer.full-screen iframe {
    position: fixed;
    height: 100%;
    width: 100%;
    border: 0;
    z-index:10000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    }

#iframeContainer iframe { background: #fff url('../img/hex-loader.gif') center center no-repeat; }
body.fs-modal { overflow: hidden; }

#iframeContainer.modal {
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
    color: #111;
    min-width: 60%;
    padding: 0;
    position: absolute;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    }
    #iframeContainer.modal .modal-content {}
    #iframeContainer.modal iframe {
        width: 100%;
        height: 100%;
        overflow: auto;
        min-height: 380px;
        min-width: 450px;
        border-radius: 10px;
        border: 1px solid #ccc;
        }
.modal fieldset { padding: 40px 10px 50px; text-align: left; }
.modal-title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    font-style: italic;
    font-size: 20px;
    text-align: left;
    background: url(../img/bg.jpg) center top;
    color: #fff;
    z-index: 1000;
    }
    
/* for jacked up modals that should be selects */
#iframeContainer.gimpy { min-width: 300px; }
#iframeContainer.gimpy .b-close { right: -16px; top: -16px; z-index: 10000; }
#iframeContainer.gimpy .modal-title { position: absolute; border-radius: 10px 10px 0 0; text-align: center; }
#iframeContainer.gimpy fieldset { padding: 0; margin: 0; text-align: center; width: 100%; border-radius: 10px; }
#stupidList li:nth-child(2n) { background: #eee }

    

.button.b-close, .button.bClose {
    border-radius: 7px 7px 7px 7px;
    box-shadow: none;
    font: bold 131% sans-serif;
    padding: 0 6px 2px;
    position: absolute;
    right: -24px;
    top: -24px;
}
.button {
    background-color: #2b91af;
    border-radius: 10px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
}



/*select.multi-col { font-family: "Courier New", Courier, monospace; }*/

dl.fake-select { margin: 0; padding: 0; display: block; }
dl.fake-select dt {
    margin: 0;
    padding: 8px;
    display: block;
    font-weight: bold;
    font-size: 1.5em;
    border-bottom: 1px solid #ccc;
    }
dl.fake-select dd { margin: 0; padding: 0; display: block; padding: 5px; }

body.modal { background: #fff; }
body.modal fieldset { border: none; }
body.modal .actions {
    padding: 10px;
    margin: 0;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #ccc;
    left: 0;
    background: #eee;
    }
    .actions li { margin-left: 10px; }
    
    
    
    
    

/* jacked up one-off stuff for Service Grouping (LinkServices.aspx) to compensate for "less than optimal" markup */

/* List view (should be a table and/or unordered lists - NOT selects) */
#earth2016WebAppHtmlElementInTheUIthatMayNotAlwaysBeADivOrWhatever { min-height: 400px; }
    #earth2016WebAppHtmlElementInTheUIthatMayNotAlwaysBeADivOrWhatever ul {
        height: 40px; 
        margin-top: 0; 
        }
    #earth2016WebAppHtmlElementInTheUIthatMayNotAlwaysBeADivOrWhatever dl {
        width: 64%; 
        display: inline-block; 
        vertical-align: top;
        }
    #earth2016WebAppHtmlElementInTheUIthatMayNotAlwaysBeADivOrWhatever dl.groups-group-grouping {
        width: 30%; 
        margin-right: 2%; 
        }
        #earth2016WebAppHtmlElementInTheUIthatMayNotAlwaysBeADivOrWhatever dt,
        #earth2016WebAppHtmlElementInTheUIthatMayNotAlwaysBeADivOrWhatever dd {
            display: block; 
            width: auto; 
            }
        #earth2016WebAppHtmlElementInTheUIthatMayNotAlwaysBeADivOrWhatever .why-is-this-a-select dd {
            min-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            }
            #earth2016WebAppHtmlElementInTheUIthatMayNotAlwaysBeADivOrWhatever label { text-align: left; }
                select#lbAssocServices option[selected] {
                    background: #bada55 !important; 
                    font-weight: bold !important; 
                    font-style: italic !important; 
                    }
            #lbServiceLines {
                border: none;
                background: none;
                height: auto;
                overflow: visible;
                cursor: default !important;
                }
                #lbServiceLines option {
                    color: #000;
                    display: inline-block;
                    width: 48%;
                    float: left;
                    /*text-transform: capitalize;*/
                    }
    
/* Add & Edit view (should be a list - NOT a table) */
#divNewName { width: 50%; }
    #divNewName dt { }
    #divNewName dd { }
    
#cblServiceLines tr, #cblScreens tr { display: inline; }
    #cblServiceLines td, #cblScreens td {
        display: inline-block; 
        width: 31%; 
        border: none; 
        }
#cblServiceLines inpput, #cblScreens input { vertical-align: top; }
    #cblServiceLines label, #cblScreens label {
        padding: 0 0 0 10px; 
        display: inline-block; 
        width: 85%; 
        font-size: 13px; 
        }

/*
#cblServiceLines tr { display: inline; }
    #cblServiceLines td {
        display: inline-block; 
        width: 31%; 
        border: none; 
        }
        #cblServiceLines input { vertical-align: top; }
        #cblServiceLines label {
            padding: 0 0 0 10px; 
            display: inline-block; 
            width: 85%; 
            font-size: 13px; 
            }            
*/


/* error view */
#wrapper { text-align: center; }
#errorz #wrapper section {
    text-align: center; 
    margin: 0 auto;
    width: 60%;
    background: rgba(255, 255, 255, .3);
    padding: 20px 10px;
    border-radius: 10px;
    border: 1px solid #fff;
    }
    #errorz #wrapper section h3 { color: #333; }
#errorz footer { display: none; }


#employee_fieldset { min-height: 400px; }
    #employee_fieldset ul {
        height: 40px; 
        margin-top: 0; 
        }
    #employee_fieldset dl {
        width: 30%; 
        display: inline-block; 
        vertical-align: top;
        }
    #employee_fieldset dl.groups-group-grouping {
        width: 30%; 
        margin-right: 2%; 
        }
        #employee_fieldset dt,
        #employee_fieldset dd {
            display: block; 
            width: auto; 
            }
        #employee_fieldset .why-is-this-a-select dd {
            min-height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
            }
            #employee_fieldset label { text-align: left; }
                select#lbAssocServices option[selected] {
                    background: #bada55 !important; 
                    font-weight: bold !important; 
                    font-style: italic !important; 
                    }
            #lbServiceLines {
                border: none;
                background: none;
                height: auto;
                overflow: visible;
                cursor: default !important;
                }
                #lbServiceLines option {
                    color: #000;
                    display: inline-block;
                    width: 48%;
                    float: left;
                    /*text-transform: capitalize;*/
                    }



.fake-select-menu {
    height: 20px;
    width: 20px;
    position: relative;
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    }
.fake-select-menu:before {
    display: inline-block;
    text-align: center;
    background: #eee;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    border: 1px solid;
    border-radius: 5px;
    text-indent: 0;
    position: absolute;
    left: 0;
    top: 0;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    cursor: pointer;
    content: '\f0a7';
    }
    .fake-select-menu ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 20px;
        left: 0;
        border: 1px solid;
        list-style: none;
        border-radius: 0 3px 3px 3px;
        background: #fff;
        box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.3);
        display: none;
        z-index: 10000;
        }
    .fake-select-menu:hover ul { display: block; }
        .fake-select-menu a {
            padding: 2px 10px;
            display: block;
            text-decoration: none;
            color: #666;
            white-space: nowrap;
            font-weight: normal;
            font-size: 12px;
            line-height: 1em;
            }
        .fake-select-menu a:hover { background: #eee; }





#stupidList {
    list-style: none; 
    max-height: 400px;
    overflow: auto;
    margin: 36px 0 0;
    padding: 0;
    }
    #stupidList label {
        text-align: center;
        padding: 0px 10px 10px;
        font-size: 16px;
        font-style: italic;
        border-bottom: 1px solid #ccc;
        }
    #stupidList a {
        /*text-transform: capitalize; */
        text-decoration: none; 
        color: #666; 
        text-align: left;
        display: block;
        padding: 0 20px;
        }
        #stupidList a dfn { display: inline-block; }
    #stupidList a:hover {
        text-decoration: underline; 
        }
        
        
        
        
/* Bundle_Details.aspx BS */

#bodyBundleDetails #divCompany select:disabled {
    /* border: none; */
    /* background: none; */
    height: auto;
    overflow: visible;
    cursor: default !important;
    }

#bodyBundleDetails #divCompany select:disabled option {
    color: #000;
    display: inline-block;
    width: 48%;
    float: left;
    /*text-transform: capitalize;*/
    }
    
    


#bodyCompanyParameter #divEmailOption dl { width: 45%; }
#bodyCompanyParameter #divEmailOption p {
    display: inline; 
    font-weight: bold; 
    vertical-align: bottom;
    font-size: 20px;
    }



#bodyCompanyParameter td.action input { width: 70%; }

#bodyServiceDescDetails #taServiceDesc { width: 70%; vertical-align: middle; }
#bodyServiceDescDetails #jsCopyInvoice2 { margin: 0 0 10px; }




.hide-cke-save .cke_button__save, .cke_button__save { display: none !important; }


#addEmp #txtCompany,
#addEmp #dlEmployeeID,
#addEmp #dlEmployeeName,
#addEmp #dlPassword,
#addEmp #dlPasswordConfirm,
#addEmp #liSave { display: none; }

#addEmp .show-stuff #txtCompany,
#addEmp .show-stuff #dlEmployeeID,
#addEmp .show-stuff #dlEmployeeName,
#addEmp .show-stuff #dlPassword,
#addEmp .show-stuff #dlPasswordConfirm,
#addEmp .show-stuff #liSave { display: inline-block; }


#bodyCompanyParameter #txtValidDays { width: 100px; }


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* STYLES GO HERE */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
    /* STYLES GO HERE */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
    /* STYLES GO HERE */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    /* STYLES GO HERE */
    nav.primary li a { font-size: 12px; }
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    /* STYLES GO HERE */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    /* STYLES GO HERE */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
    /* STYLES GO HERE */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
    /* STYLES GO HERE */
}

/* iPhone 5 (portrait & landscape)----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
    /* STYLES GO HERE */
}

/* iPhone 5 (landscape)----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
    /* STYLES GO HERE */
}

/* iPhone 5 (portrait)----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
    /* STYLES GO HERE */
}


@media only screen and (min-width: 480px) and (max-width: 768px) {
}

/* ======================================
 
    MediaQuery-Reporter Styles
 
========================================= */
/*
body:after {
    content: "less than 320px";
    font-weight: bold;
    position: fixed;
    width: 100%;
    text-align: center;
    background-color: hsla(1,60%,40%,0.5);
    color: #fff;
    bottom: 0;
    font-size: 15px;
}
@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.5);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.5);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.5);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 and up";
        background-color: hsla(360,60%,40%,0.5);
    }
}
*/