/* Generated by Fontie - the magic webfont generator <http://fontie.flowyapps.com> */

@font-face {
    font-family: 'Karbon Light';
    src: url('../../fonts/KarbonLight.woff2') format('woff2'),
    url('../../fonts/KarbonLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Karbon Medium';
    src: url('../../fonts/KarbonMedium.woff2') format('woff2'),
    url('../../fonts/KarbonMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Karbon Regular';
    src: url('../../fonts/Karbon.woff2') format('woff2'),
    url('../../fonts/Karbon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Karbon Bold';
    src: url('../../fonts/KarbonMedium.woff2') format('woff2'),
    url('../../fonts/KarbonMedium.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

body {
    font-family: "Karbon Regular", Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}

.nav-tabs {
    border: none !important;
}

.input-group.checkbox .input-group-text {
    background: transparent !important;
    border: none !important;
    padding: 6px 0px !important;
    width: 120px !important;
}

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

    .input-group.checkbox {
        margin: 0 0 25px 0;
    }

}

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

    .input-group-prepend {
        width: 100%;
    }

    .container, .container-fluid {
        padding: 0 30px !important;
    }

    .input-group-prepend, .input-group > .input-group-prepend > .input-group-text {
        overflow: hidden;
    }

    .tab-content .container {
        padding: 0 15px !important;
    }

}

.nav-tabs .nav-link.active {
    background: #f8f8f8;
    border: none;
}

.close {
    position: absolute;
    right: 1px;
    top: 7px;
    width: 32px;
    height: 27px;
    opacity: 0.3;
}

.close:hover, .download:hover {
    opacity: 1;
    cursor: pointer;
}

.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 20px;
    width: 2px;
    background-color: #f33;
}

.close:before {
    transform: rotate(45deg);
}

.close:after {
    transform: rotate(-45deg);
}

.btn {
    outline: none;
    box-shadow: none !important;
}

#header {
    background: #383435;
}

#header .logo {
    padding: 10px 0 15px;
    position: relative;
}

header .strapline {
    color: #999;
    font-size: 12px;
    font-weight: bold;
    left: 125px;
    letter-spacing: 0.1em;
    position: absolute;
    text-transform: uppercase;
    top: 35px;
    width: 240px;
}

@media only screen and (max-width: 600px) {

    header .strapline {
        font-size: 10px;
        top: 38px;
    }

}

.navbar-collapse {
    display: flex !important;
}

.navbar-nav {
    flex-direction: row;
}

.navbar-nav .nav-link {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
}

#menu {
    background: #efefef;
    border-bottom: 1px solid #dcdcdc;
}

#menu .navbar-collapse {
    padding: 0;
    float: left;
}

#menu .navbar-collapse .navbar-nav > li > a:hover {
    background: #dcdcdc;
}

.tooltip-inner {
    max-width: 500px;
}

.badge-incomplete, .badge-unapproved {
    background: #5c0000;
}

.badge-inactive {
    background: #de0000;
}

.badge-live, .badge-approved {
    background: #96c039;
}

.navbar-nav > li > a {
    color: #383435;
}

.navbar-form .input-group > .form-control {
    border: 1px solid #ccc;
    border-radius: 0;
}

.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    height: calc(1.5em + .75rem + 2px);
    font-size: 12px;
    background: #212026;
    color: #ffffff;
    border-color: #212026;
    border-radius: 0 25px 25px 0;
    text-transform: uppercase;
    font-size: 1rem;
}

.input-group-append, .input-group-prepend {
    max-width: -webkit-fill-available;
    overflow: hidden;
}

.input-group-btn:last-child > .btn:hover, .input-group-btn:last-child > .btn-group:hover,
.input-group-btn:last-child > .btn:focus, .input-group-btn:last-child > .btn-group:focus {
    background: #42404c;
}

.approve-wrapper {
    padding-top: 5px;
}

.approve-wrapper p {
    display: inline-block;
    padding-right: 40px;
    max-width: 50%;
}

@media (max-width: 480px) {
    .approve-wrapper p {
        max-width: 80%;
    }
}

.approve-wrapper .btn {
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 0;
}

@media (max-width: 600px) {

    .approve-wrapper .btn {
        display: inline-block;
        position: relative;
        right: auto;
        top: auto;
    }

}

@media (max-width: 480px) {
    .approve-wrapper {
        float: none;
    }
}

.approve-wrapper .img-wrapper {
    float: left;
    padding: 0 20px;
    border-left: 2px solid #ccc;
}

@media (max-width: 991px) {
    .approve-wrapper .img-wrapper {
        border-left: none;
        padding-left: 0;
    }
}

.approve-wrapper .approve-loading img {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#export-download i {
    font-size: 40px;
    color: #03bafc;
}

#export-download span {
    font-size: 14px;
    color: #000;
}

#export-download span u {
    color: #03bafc;
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.column-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: initial;
}

@media only screen and (max-width: 600px) {

    .tp-bgimg {
        background-position: -700px 0 !important;
        max-height: 200px;
    }

}

.tingle-modal-box {
    width:22%;
}

.tingle-modal-box input[type=checkbox]:after {
    display: none;
}