body {
    background: #eee;
}
body.main {
    background: #343434;
}

h1 {
    font-family: 'Alegreya SC', serif;
}

textarea { 
    resize: vertical; 
}

.fa-spin-reverse {
  -webkit-animation: fa-spin-reverse 2s infinite linear;
  animation: fa-spin-reverse 2s infinite linear;
}
@-webkit-keyframes fa-spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}
@keyframes fa-spin-reverse {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-359deg);
    transform: rotate(-359deg);
  }
}

.is_stuck {
    z-index: 999;
}
.is_stuck .navbar {
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
}

.select2 {
    width: 100% !important;
}
.select2-selection {
    overflow: hidden;
}

.custom-font {
    font-family: 'Alegreya SC', serif;
}
.text-normal {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.tps-red {
    color: #E62B24;
}

tr.no-border td {
    border-top: 0px !important;
}

.field-validation-error, .has-error .help-block {
    background: #a94442;
    color: #fff;
    display: block;
    padding: 3px 6px;
    border-bottom-right-radius: 10px;
    margin-top: 0px;
}

.mover {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    border-right: 1px solid #aaa;
    padding: 10px 5px;
    text-align: center;
    background: #ccc;
    color: #000;
    cursor: move;
    vertical-align: middle;
}

.mover-spacer {
    padding-left: 35px;
}

.sortable-placeholder {
    height: 40px;
    border: 1px dashed #000;
    background: #f9ffe8;
    margin: 3px 0px;
}

.chart-canvas {
    height: auto !important;
}

.user-thumbnail {
    height: 100px;
    padding: 2px;
    background: #3295b2;
    border-radius: 4px;
    vertical-align: sub;
}
    .user-thumbnail.user-thumbnail-15 {
        height: 15px;
        padding: 1px;
    }
    .user-thumbnail.user-thumbnail-20 {
        height: 20px;
    }
    .user-thumbnail.user-thumbnail-30 {
        height: 30px;
    }
    .user-thumbnail.user-thumbnail-40 {
        height: 40px;
    }
    .user-thumbnail.user-thumbnail-50 {
        height: 50px;
    }


/* ------------------------------------------------------------------------
------------------------------------------------------------------------ */

.logo {
    margin: 0px;
    padding: 0px;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #fff;
    font-size: 25px;
    text-align: center;
    font-family: 'Alegreya SC', serif;
    /*background: #00303E url('/Content/extras/picture-of-the-day.jpg') no-repeat center 50%;*/
    height: 50px;
    line-height: 50px;
    background-size: auto;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
}
    .logo:hover {
        /*background: #003A4B url('/Content/extras/picture-of-the-day.jpg') no-repeat center 50%;*/
        /*background-size: auto;*/
        opacity: 0.85;
        color: #fff;
        text-decoration: none;
    }

.callback-default {
    border-left: 5px solid #ccc !important;
}
.callback-urgent {
    border-left: 5px solid #E62B24 !important;
}
.callback-today {
    border-left: 5px solid #1a8fe8 !important;
}


/* ------------------------------------------------------------------------
   Content layout
------------------------------------------------------------------------ */
.main-content {
    position:relative;
}
.main-content:after { 
    clear: both; 
}

.navbar-toggle {
    float: none;
    width: 100%;
    display: block;
    padding: 8px 0px;
    margin: 0px;
    border-width: 0px;
}

    .left-area {
        position: absolute;
        width: 250px;
        top: 0px;
        left: 0px;
        bottom: 0px;
        z-index: 9;
    }
    .left-area .navbar-collapse {
        padding: 0px;
    }
    .right-area {
        margin-left: 250px;
        background-color: #fafafa;
        border-left: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        border-bottom-left-radius: 4px;
        min-height: 50vh;
        padding-bottom: 20px;
    }

@media (max-width: 767px) {
    .left-area {
        position: static;
        width: 100%;
    }

    .right-area {
        margin-left: 0px;
        border: 0px;
        border-bottom-left-radius: 0px;
    }
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
}
    

.sidebar-menu,
.sidebar-menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
    .sidebar-menu li {
        border-top: 1px solid #2c2c2c;
    }
    .sidebar-menu li.active ul li:first-of-type {
    }
    .sidebar-menu li.active a,
    .sidebar-menu li:hover {
        background: #393939;
    }
    .sidebar-menu a {
        border-top: 1px solid #424242;
        color: #fff;
        display: block;
        padding: 8px 5px 8px 15px;
        text-decoration: none;
    }    
        .sidebar-menu a:hover {
            background: #393939;
        }

        .sidebar-menu ul li {
            border: 0px;
            
        }
        .sidebar-menu ul a {
            border: 0px;
            padding: 5px 5px 5px 40px;
        }
            .sidebar-menu ul a:hover {
                background: #494949;
            }

        .sidebar-menu ul ul a {
            padding: 5px 5px 5px 60px;
        }

        .sidebar-menu .list-splitter {
            height: 1px;
            border-top: 1px solid #2e2e2e;
        }
        
        

        #search-company-input {
            border: 0px;
        }

.location {
    margin-bottom: 15px;
    padding: 5px 15px 10px 15px;
    border-bottom: 1px solid #eee;
}
    .location h1 {
        margin: 0px;
    }

.location strong {
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav-id-containers {
    display: flex;
    text-align: center;
}

    .nav-id-containers p {
        margin-bottom: unset;
    }

.nav-id-item {
    margin-right: 1.5rem;
}

    .nav-id-item p:first-of-type {
        color: #E62B24;
        font-size: 12px;
    }

    .nav-id-item p:last-of-type {
        font-weight: bold;
    }



    
/* ------------------------------------------------------------------------
   Popups
------------------------------------------------------------------------ */
.window-header {
    background: #ccc;
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
    padding: 5px 15px;
}

    .window-header.window-info {
        background: #a9ccf2;
    }
    .window-header.window-flow {
        background: #e6c234;
    }

    .window-action {
        background: #ddd;
        border-top: 1px solid #aaa;
        padding: 10px 15px;
        text-align: right;
    }

    .input-group-addon .input-group-addon-spacer {
        width: 65px;
        display: block;
        text-align: left;
    }

    .select-option {
        padding: 3px;
        font-weight: bold;
    }

    .select-option span {
        font-style: italic;
        font-size: 0.9em;
        font-weight: normal;
    }



/* ------------------------------------------------------------------------
   Customer listing
------------------------------------------------------------------------ */
#company-listing-wrapper {
    border: 1px solid #e7e7e7;
    border-radius: 1px;
    position: relative;
    margin-bottom: 30px;
}
    #company-listing-wrapper .company-listing-inner {
        max-height: 325px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0px 15px;
    }
    #company-listing-wrapper .company-listing-inner.expanded {
        max-height: none;
    }
    #company-listing-wrapper .company-listing-buttons {
        position: relative;
        height: 30px;
    }
    #company-listing-wrapper .close-search {
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        background: #ccc;
        border: 0px;
        font-weight: bold;
        color: #222;
        font-size: 14px;
        cursor: pointer;
        width: 75%;
        padding: 5px 0px;
    }
    #company-listing-wrapper .expand-search {
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;

        background: #ddd;
        border: 0px;
        font-weight: bold;
        color: #222;
        font-size: 14px;
        cursor: pointer;
        width: 25%;
        padding: 5px 0px;
    }

    .company-listing-item-primary {
        border-top: 2px solid #ccc;
        background: #eee;
    }

    .company-listing-title {
        line-height: 2.75em;
        font-weight: bold;
    }

    .company-listing-item {
        border-bottom: 1px solid #e7e7e7;
        padding: 5px 0px;
    }
        .company-listing-item:hover {
            background: #fafafa;
        }
        .company-listing-item:last-child {
            border-bottom: 0px;
        }

    .company-listing-type-customer {
        border-left: 3px solid #38c36a;
    }
    .company-listing-type-marketable {
        border-left: 3px solid #3476d1;
    }
    .company-listing-type-non-marketable {
        border-left: 3px solid #b01313;
    }
    .company-listing-type-supplier {
        border-left: 3px solid #d0be31;
    }
    .company-listing-type-other {
        border-left: 3px solid #808080;
    }
    .company-listing-type-referrers {
        border-left: 3px solid #ac6816;
    }

    .company-listing-alphanumeric {
        text-align: center;
        padding: 3px 0px;
        border-bottom: 1px solid #eee;
    }
        .company-listing-alphanumeric a {
        }

@media (max-width:767px) {
    
    #company-listing-wrapper .company-listing-inner {
        max-height: none;
        overflow: visible;
    }

    #company-listing-wrapper .close-search {
        position: static;
        background: #ccc;
        border: 0px;
        font-weight: bold;
        color: #222;
        font-size: 14px;
        cursor: pointer;
        width: 100%;
        padding: 5px 0px;
    }
    #company-listing-wrapper .expand-search {
        display: none;
    }
}


.alpha-menu {

}
    .alpha-menu a, .alpha-menu span, .alpha-selector {
        display: inline-block;
        margin: 2px;
        font-size: 2em;
        border: 0px;
        text-align: center;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    .alpha-selector {
        margin-bottom: 15px;
    }

    .alpha-menu a, .alpha-selector {
        background-color: #E62B24;
        color: #fff;
        
    }
    .alpha-menu span {
        background-color: #eee;
        color: #aaa;
    }