@media print {
    body {
        margin: 0;
        padding: 0;
        font-size: 10px;
    }

    a[href]:after {
        content: none !important;
    }

    td, tr {
        padding-left: 1px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    table {
        page-break-inside: auto;
    }

    tfoot {
        display: table-row-group;
    }

    .panel {
        margin-bottom: 5px;
    }

    .panel-heading {
        padding: 5px;
    }

    .panel-body {
        padding: 5px;
    }
}

.jumbotron {
    padding: 30px 15px;
    background-repeat: no-repeat;
    background-position: right top;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    -ms-background-size: auto 100%;
    background-size: auto 100%;
}

body.x4TopMenuBody {
    padding-top: 70px;
    padding-bottom: 0px;
    /* Needed to place the X4 footer to the bottom of the page even on big screens */
    min-height: calc(100vh - 401px);
}

body.x4NoTopMenuBody {
    padding-top: 10px;
    padding-bottom: 0px;
    height: 100%;
}

td.x4currency, th.x4currency {
    text-align: right;
}

tr.x4Striped {
    background: #f5f5f5;
}

tr.x4BookedProgram {
    background-color: #d0e9c6 !important;
}

tr.x4MultiBookedProgram {
    background-color: #abd29c !important;
}

.table > tbody > tr > td.x4NoLine {
    border-top: none;
}

/* This style can be used for tables or divs used to display large search results. Such elements will be hidden by default. For tables the js function  
   setUpDataTables() will make the DataTable visible once all loading has been completed. For divs you must manually show the element once page has loaded.
   Effectively this is used to prevent FOUC (Flash of Unstyled Content).*/
table.x4LargeResult, div.x4LargeResult {
    display: none;
}

table.x4RunListResult, div.x4RunListResult {
    display: none;
    font-size: 11px;
    font-family: verdana,arial,helvetica,sans-serif;
}

table.k4ListResult, div.k4ListResult {
    display: none;
    font-size: smaller;
    font-family: verdana,arial,helvetica,sans-serif;
}

table.x4CampaignRows, div.x4CampaignRows {
    font-size: smaller;
    font-family: arial,helvetica,sans-serif;
}

.table > tbody > tr > td > ul.x4ListInTable {
    margin-bottom: 0px;
}

.x4table-supercondensed > thead > tr > th,
.x4table-supercondensed > tbody > tr > th,
.x4table-supercondensed > tfoot > tr > th,
.x4table-supercondensed > thead > tr > td,
.x4table-supercondensed > tbody > tr > td,
.x4table-supercondensed > tfoot > tr > td {
    padding: 1px;
    padding-left: 3px;
}

.x4Hidden {
    display: none;
}

.x4Loading {
    padding-top: 10px;
}

.x4Confirmable {
}

.x4LoadingBtn {
}

.x4NoMargin {
    margin: 0;
}

.x4RequiredIndicator {
    color: red;
    font-size: 8px;
    vertical-align: text-top;
    padding-left: 1px;
}

.x4IconBtn {
    padding-left: 2px !important;
    padding-right: 2px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

#divSlidePanel {
    position: fixed;
    top: 50px;
    left: 0;
    width: 280px;
    padding: 10px;
    background: #fff;
    margin-left: -280px;
    border-radius: 0px 0px 5px 0px;
    z-index: 4;
    border: 1px solid #000000;
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 6px 12px #000000;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px #000000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.x4PersonnelOnline {
    padding: 1px;
    border-radius: 5px;
    border: 1px solid #000000;
    border: 1px solid rgba(0, 255, 0, 1);
}

.x4PersonnelOffline {
    padding: 1px;
    border-radius: 5px;
    border: 1px solid #000000;
    border: 1px solid rgba(0, 0, 0, .15);
}

.x4PersonnelOnlineButton {
    color: lightgreen;
}

#divSlidePanelContents small {
    font-size: 80%;
}

#lnkSlidePanelOpener {
    float: right;
    margin: -10px -50px 0px 0px;
    border-radius: 0px 5px 5px 0px;
    z-index: 4;
}

#divChatButton {
    position: fixed;
    top: 90px;
    left: 0;
    z-index: 4;
}

#lnkChat {
    float: right;
    border-radius: 0px 5px 5px 0px;
    z-index: 4;    
}

.glyphicon-trash, .glyphicon-remove {
    color: red;
}

.glyphicon-ok, .glyphicon-plus {
    color: green;
}

.x4Disabled {
    color: gainsboro;
}

.x4Btn {
}

.x4SmallInput {
    max-width: 280px;
}

input.x4EditInGridSmall {
    width: 60px !important;
}

input.x4EditInGridMedium {
    width: 90px !important;
}

th.x4DateColumn {
    width: 140px;
}

th.x4TimeColumn {
    width: 70px;
}

th.x4TimeDropdownColumn {
    width: 90px;
}

th.x4SingleButtonColumn {
    width: 60px;
}

th.x4SingleSmallButtonColumn {
    width: 40px;
}

th.x4SingleIconColumn {
    width: 40px;
}

th.x4MediumIconColumn {
    width: 80px;
}

th.x4LargeIconColumn {
    width: 120px;
}

th.x4EditButtonsColumn {
    width: 95px;
}

th.x4SGCodeColumn {
    width: 80px !important;
}

th.x4SmallColumnWithMax {
    max-width: 54px !important;
}

th.x4ExtraSmallColumnWithMax {
    max-width: 30px !important;    
}

th.x4SmallColumn {
    min-width: 42px;
}

th.x4MediumColumn {
    min-width: 180px;
}

td.x4LargeIconColumn {
    height: 80px;
}

.table {
    border-radius: 4px;
}

.table tbody > tr > td.x4CellCenter {
    vertical-align: middle;
    text-align: center;
}

.table tfoot > tr > th.x4CellCenter {
    vertical-align: middle;
    text-align: center;
}

.table thead > tr > th.x4CellCenter {
    vertical-align: middle;
    text-align: center;
}

.x4PanelButtonGroup {
    position: absolute;
    right: 5px;
    top: 5px;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.x4PanelHeading {
    position: relative;
}

.x4PanelCondensed {
    margin-bottom: 0px !important;
}

.x4OkIcon {
    color: green;
}

.x4WarningIcon {
    color: #CCCC00;
}

.x4NotOkIcon {
    color: red;
}

.x4trafficlightgreen {
    color: green;
}

.x4trafficlightyellow {
    color: #ffd000
}

.x4trafficlightred {
    color: red;
}

.x4ChangeIcon {
    color: #428bca;
}

button.x4StackedButton {
    width: 102px;
}

.x4Dotted {
    border-bottom: 1px dashed;
    text-decoration: none;
}

.fa-info, .glyphicon-info-sign {
    color: blue;
}

.x4NoWrap {
    white-space: nowrap;
}

.x4ExtraTopMargin {
    margin-top: 10px;
}

.nav-tabs {
    border-bottom: 1px solid #ddd;
    padding-top: 0px;
    padding-bottom: 40px;
}

.x4ExtraBottomMargin {
    margin-bottom: 10px;
}

div.x4Condensed {
    padding: 5px;
}

div.x4SuperCondensed {
    font-size: 12px;
    padding-top: 4px;
    padding-bottom: 6px;
    padding-right: 4px;
}

li.x4Condensed {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
}

li.x4SuperCondensed {
    font-size: 12px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 4px;
}

.x4ScrollingModal {
    max-height: 420px;
    overflow-y: auto;
}

.x4-alert-neutral {
    background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
    background-repeat: repeat-x;
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.x4ChannelIcon {
    max-width: 70px;
    max-height: 70px;
}

img.x4smallchannelicon {
    max-height: 35px;
}

.x4TBodyStriped > tbody:nth-child(even) {
    background: #f9f9f9;
}

.x4TBodyStriped > tbody + tbody {
    border-top: inherit;
}

div.dataTables_wrapper div.dataTables_filter input {
    height: 22px !important;
}

.x4NoWrap {
    white-space: nowrap !important;
}

.x4largetext {
    font-size: 18px;
}

/*
    Override jQuery UI DatePicker z-index so that it works also on a modal dialog.
 */
.ui-datepicker {
    z-index: 1100 !important;
}

.x4SameAsDateBtnInputGroupAddOn {
    font-size: 12px;
    min-width: 39px;    
    max-width: 39px;
    padding: 6px 6px;
}

.x4SmallInputGroupAddOn {
    font-size: 12px;
    padding-left: 3px;    
    padding-right: 3px;
    text-align: right;
}

.x4WideInputGroupAddOn {
    font-size: 12px;
    padding-left: 1px;
    padding-right: 1px;
    min-width: 54px;
}

.x4TooltipText {
    text-align: left;
}

.x4documentimage {
    height: 40px;
}

.x4documentpreview {
    width: 100%;
    height: 600px;
    border-radius: 4px;    
}

/*Add some margin between the Kendo Notification icon and text.*/
.k-notification-wrap>.k-i-info {    
    margin-right: 4px;
}
.k-notification-wrap>.k-i-error {    
    margin-right: 4px;
}

.k-combobox {
    width: 100% !important;
}

.x4thinlabel {
    font-weight: normal !important;
}

.x4Indented {
    padding-left: 20px;
}

.x4Indented2 {
    padding-left: 40px;
}

.x4Save-mess {
    font-weight: bold;
    color: rgba(62, 144, 62, 1);
}

.expand_butt {
    font-size: 0.8em;
    cursor: pointer;
}

.panel-body.campaign-search .row {
    margin-top: 5px;
}

.campaign-detail-brief-flyout {
    display: none;
    transition: all 0.2s;
}

.historia-excel-btn {
    margin-right: 10px;
    max-width: 100px;
    float: left;
}

.campaign-detail-main {
    transition: all 0.2s;
}

.campaign-primaryViewPanelHeader {
    background-image: linear-gradient(to bottom, #dbf0ff 0%, #adddff 100%) !important;
}

.td-comments-overflow {
    max-height: 60px;
    width: 75ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    word-break: break-word;
}
.td-comments-overflow:hover {
    cursor: pointer;
}
.communication-textarea {
    width: 58vw;
    display: block;
    height: 100px;
    padding: 6px 12px;
    padding-bottom: 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.comment-modal-xl {
    width: 61%;
}

.KTSeurantaTrBlue {
    background-color: #B7E9F7;
}

.KTSeurantaTdDarkBlue {
    background-color: #2738F5;
    color: white;
}

.KTSeurantaTdOrange {
    background-color: #ffe0b2;
}

.KTSeurantaTrWhite {
    background-color: white;
}

.KTSeurantaTdYellow {
    background-color: #FFF380;
}

.KTSeurantaTdRed {
    background-color:#E23D28;
    color: white;
}

.kt-seuranta-dropdown-btn {
    min-width: 150px;
    max-width: 200px;
}

#divKTSeurantaTable {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.kt-seuranta-table {
    width: 100%;
}

.kt-seuranta-excel-btn {
    margin-left: 10px;
    max-width: 100px;
    float: right;
}
.kt-seuranta-selections-div {
    padding-left: 5px !important;
    padding-right: 5px !important;
    position: relative;
    margin-bottom: 10px;
}
.kt-seuranta-kontaktitakuu-checkbox {
    padding-top: 7px;
    margin-right: 50px;
}
.kt-seuranta-gameplan-checkbox {
    padding-top: 7px;
    margin-right: 50px;
}

.kampanjaesto-btn {
    margin-right: 10px;
}
.kampanja-rakenne-dropdown-btn {
    min-width: 100px;
    max-width: 150px;
}
.kampanjarakenne-table {
    background-color: ghostwhite;
}
.kampanjarakenne-table tr:nth-child(even) {
    background-color: #e9eff6;
}
.kampanjarakenne-table th {
    background-color: #e9eff6;
}
.structure-dropdown-btn {
    width: 200px;
}
.structure-length-input {
    width: 225px;
}
.target-group-th {
    background-color: #e9eff6;
}
.customer-joint-warranties-select, .customer-joint-warranties-select-1 {
    width: 100%;
    padding: 5px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.datatable-custom-btn {
    margin-left: 10px !important;
}

#divSendFeedbackContainer {
    text-align:center;
    opacity: 0;
}

.text-right {
    text-align: right;
}

footer.x4-footer {
    margin-bottom: 0px !important;
    margin-top: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    background: #181818;
    min-height: 300px;
    color: #F7F7F7;
}

footer.x4-footer li {
    list-style-type: none;
}

footer.x4-footer .phone-number {
    float: right;
    margin-right: 3em;
}

footer.x4-footer .sanomalogo {
    max-width: 126px;
    height: auto;
}

footer.x4-footer a {
    color: #F7F7F7;
}

footer.x4-footer strong {
    font-size:15px;
}

    footer.x4-footer .big-title {
        font-size: 18px;
  
    }

footer.x4-footer hr {
    margin-top: 50px;
}

footer.x4-footer button {
    margin-top: 20px;
    background: #4A6EF6 !important;
    border: 1px solid #0E31B6 !important;
    border-radius: 0px;
    font-weight: bold;
    padding: 9px 50px;
    outline: none !important;
}

footer.x4-footer textarea {
    resize: none;
    border: 1px solid #707070;
}
footer.x4-footer textarea:focus {
    border-color: #707070;
    box-shadow: none;
}

footer.x4-footer ul {
    padding-left: 0;
}

footer.x4-footer .logocontainer {
    margin-bottom: 50px;
}

footer.x4-footer .glyphicon.glyphicon-envelope {
    margin-right: 0.5em;
}

/* Display the radio buttons in the footer feedback form as stars */
footer.x4-footer .rating {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
}

footer.x4-footer .rating input {
    position: absolute !important;
    left: -100vw;
    z-index:5;
}

footer.x4-footer .rating label {
    width: 25px;
    height: 25px;
    padding: 25px 0 0;
    overflow: hidden;
    background: url("Images/stars.svg") no-repeat top left;
    cursor: pointer;
}

footer.x4-footer .rating:not(:hover) input:indeterminate + label,
footer.x4-footer .rating:not(:hover) input:checked ~ input + label,
footer.x4-footer .rating input:hover ~ input + label {
    background-position: -25px 0;
}

footer.x4-footer .rating:not(:hover) input:focus-visible + label {
    background-position: -50px 0;
}
/* Radio button star style end. */

footer.x4-footer #divFooterFeedbackError {
    color: #FFEB2A;
    margin-top: 0.3em;
    position: absolute;
}

footer.x4-footer #divFooterFeedbackSuccess {
    color: white;
    margin-top: 0.3em;
    position: absolute;
}

/* Places the footer to the bottom of the page even on big screens */
#vueApp {
    min-height: calc(100vh - 471px);
}


img.navbar-brand {
    padding: 5px;
}


/*copied bootstrap dropdownmenu rules here so i can change the class of the navigaiton bar to "dropdown-menu-grey"*/
.dropdown-menu-grey {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu.pull-right {
    right: 0;
    left: auto;
}

.dropdown-menu-grey .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.dropdown-menu-grey > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu-grey > li > a:hover,
.dropdown-menu-grey > li > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}


.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    color: #777;
}

.open > .dropdown-menu-grey {
    display: block;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.dropdown-menu-left {
    right: auto;
    left: 0;
}


.pull-right > .dropdown-menu-grey {
    right: 0;
    left: auto;
}

}

.dropup .dropdown-menu-grey,
.navbar-fixed-bottom .dropdown .dropdown-menu-grey {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
}

@media (min-width: 768px) {
    .navbar-right .dropdown-menu-grey {
        right: 0;
        left: auto;
    }



/*this changes the li items of the drop down to have a different color and background*/
.dropdown-menu-grey > li > a
{
    color: #F7F7F7;
    background-color: #181818;
}

/* this changes the color of the drop down menu text when hovered */
    .dropdown-menu-grey > li > a:hover,
    .dropdown-menu-grey > li > a:focus {
        background-color: #3b3b3b;
        background-image: none;
        color: #fff;
    }
}

/*this makes the navigation bar visible when not selected */
.dropdown-menu-grey > .active > a,
.dropdown-menu-grey > .active > a:hover,
.dropdown-menu-grey > .active > a:focus {
    background-image: none;
}


/* this makes the navigation bar black */

.navbar-default {
    background-image: none;
    background-color: #181818;
    color: #fff;
    font-size:14px;
}


/*this changes the colors of the display items of the top navigation to white*/
.navbar-default .navbar-nav > li > a {
    background-image: none;
    color: #F7F7F7;
}

/* this makes the on hover of the top navigation bar */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
    background-color: #3b3b3b;
    background-image: none;
    color: #fff;
}


.navbar-nav > li > .dropdown-menu-grey {
    background-image: none;
    background-color: #212121;
}

/* this changes the color of the li item in the top bar*/
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #3b3b3b;
}

/* to make sure that when the button is clicked in the top navigation, it doesn't turn black*/

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #e7e7e7;
}

/* these rules change the campaign booking row on top: Colors of the steps */

/*this rule makes the current li element orange with black text*/
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #000000;
    background-color: #ffc107;
}



.nav-justified > li > a,
.nav-pills > li > a {
    color: #000000;
    background-color: #bdbdbd;
    border-radius: 2px;
    float: left;
}


/* makes the list element green*/
.green > a {
    background-color: #81c784 !important;
}

/* to make the price info wider and more indented (now it makes the other windows indented also)
*/


#divPriceInfo {
    box-sizing:border-box;
    margin-top:50px;
    margin-bottom:30px;
    width: 40%;
    height: 550px;
}

    #divPriceInfo > div {
        display: flex;
        padding-left: 20px;
        height: 30px;
        flex-wrap: wrap;
        z-index: 15;
    }

/* Remove float and ensure widths are set for flex items */
.col-sm-2-custom,
.col-sm-3-custom,
.col-sm-1-custom,
.col-sm-3-custom2,
.col-sm-1 {
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    flex: 1;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
}


/* center the discount % */


.col-sm-1-custom .text-right small {
    display:flex;

}

.col-sm-1-custom {
    justify-content: flex-end !important;
}


.col-sm-3-custom2 {
    flex: 1;
    flex-shrink: 3;
    margin-top: 10px;
    flex-wrap: wrap !important;
}


/*.text-right {
    margin-bottom:0;
    display:flex;
    justify-content:flex-end;
}*/

#noborder-col {
    border-bottom: none !important;
    height: 60px !important;
    align-items: center;
}

#title-for-pricing {
    color: #A4A3A6 !important;
    padding-left: 20px;
    padding-right: 15px;
}

.control-label {
    margin: 5px;
    font-weight: bold;
}
#bold-text{
    font-weight:bold !important;
}

.label{
    font-weight:normal;
}

/*rules for the campaign booking steps */
     
/* To change the previous and next buttons to rectangulars*/
#btnNext, #btnPrev {
    border-radius: 4px;
    padding: 10px 15px;
    min-height: 1px;
    min-width: 0;
    margin: 25px;
    display: block;
}

/* to make dots for booking steps */

.dot {
    box-sizing: border-box !important;
    height: 40px;
    width: 40px;
    border-radius: 50% !important;
    padding-bottom: 10px;
    z-index: 3;
    min-width: 0;
    top:20px;
}

/* this makes the texts have a white background-color*/

.nav-pills > li > a[id] {
    background-color: transparent !important;
    min-width: 0;
}

/* to make the booking navigation step dots spaced evenly*/

.nav-pills {
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    min-height: 0;
    display: flex;
    box-sizing: border-box;
    margin-bottom: 0 !important;
}


* {
    min-width: 0;
    min-height: 0;
    box-sizing:border-box;
}
    

.nav-pills > li,
.nav-pills > li > a {
    align-items: center;
    flex-direction: column;
    display:flex;
    top:10px;
}
   


.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
    background-color: #eee;
    min-width: 0;
}

#divWizardSteps {
    display: flex !important;
    min-width: 0;
    flex-direction: column;
}


.btn-toolbar:before, .btn-toolbar:after,
.nav:before, .nav:after,
.navbar-collapse:before, .navbar-collapse:after {
   display: flex;
    content: none;
    min-width: 0;
}


.col-sm-1-middle {
    display: flex !important;
    min-width: 0;
    flex-wrap: wrap !important;
    flex-direction: row;
    width: 100%; 
    justify-content:space-between;
    margin-bottom:10px;
   
}


#line-container {
    display: flex !important;
    flex-direction: row;
    position: relative !important;
    width: 70%;
    box-sizing: unset;
    padding: 10px !important;
    margin-bottom: 10px;
    max-width: 1170px;
}

#draw-line {
    width: 100%;
    position:relative;
    align-self:center;
}


#draw-line:after {
    content: '';
    width: 100%;
    border-bottom: solid 1px #ccc;
    position: absolute !important;
    z-index: 1;
    min-width: 0;
    flex-shrink: 5;
    margin: 0;
    display: flex !important;
    box-sizing: border-box;
    top: 48%;
    left: 0;
    align-self: center;
}



#step-container{
    display:flex;
    align-items:center;
    margin-bottom:0;
    position: relative;
    padding-bottom:0;
}

.nav-pills {
    margin-bottom: 0 !important;
    width:100%;
    box-sizing:border-box;
    flex:1;

}

.x4NoMargin{
    display:flex;
    top:50%;
    box-sizing:border-box;
}

/* adjusting the navigation bar to include the sanoma Logo */

.navbar-header >a{
    float:left;
    margin-right:20px;
    display:flex;
}


.navbar-header{
    display:flex;
}


@media (min-width: 1200px) {
    #navbar-container {
        width: 90%;
    }
}
@media (min-width: 1200px) {
    .navbar-right {
        margin-right:-5px;
    }
}

@media (min-width: 768px) {
    .navbar-right {
        margin-right: -5px;
    }
}

#navbar-container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

#divBodyContent {
    margin-top:20px;
}

@media (min-width: 770px) and (max-width: 824px) {
    #divBodyContent {
        margin-top: 180px;
    }
}

@media (min-width: 824px) and (max-width: 1041px) {
    #divBodyContent {
        margin-top: 126px;
    }
}
@media (min-width: 1041px) and (max-width: 1417px) {
    #divBodyContent {
        margin-top: 70px;
    }
}

/* these rules make the height of the pricing table increase with different screen sizes*/

@media (min-width: 753px) and (max-width: 955px) {
    #divPriceInfo {
        height: 650px;
    }
}

@media (min-width: 530px) and (max-width: 753px) {
    #divPriceInfo {
        height: 700px;
    }
}

@media (min-width: 100px) and (max-width: 530px) {
    #divPriceInfo {
        height: 0px;
    }
}

/* to fix the top menu margin from the planning steps view*/

.x4NoTopMenuBody>#divBodyContent{
    margin-top:20px !important;
}

/* adding some spacing to the front page pikatiet*/

.col-lg-3{
    margin-bottom:15px;
}

/* this fixes the campaign price view  */

#th3OtherSales {
    text-align: right;
}

#tblAirInfosOtherSalesSearchResults > tbody > tr > td,
#tblAirInfosOtherSalesSearchResults > tfoot {
    border: 1px solid #ddd !important;
}

}

/* To control the height of the container for the TotalTV info text in the PacketWizard configuration view */

#divInfoLabels{
    display: flex !important;
}


#divTotalTvInfo,
#divTvInfo,
#divTotalTvFlexibleInfo,
#divTvFlexibleInfo,
#divNothingAvailable {
    display:flex;
    flex-direction:column;
    height:auto !important;
}


.btn-black {
    color: #fff;
    background-color: #333;
    border-color: #222;
}

.btn-black:hover {
    color: #fff;
    background-color: #222;
    border-color: #111;
}

/* newest campaigns view */
.tdBgColorYellow {
    background-color: #FFF380;
}

.tdBgColorRed {
    background-color: #E23D28;
    color: white;
}

.flex-tab {
    display: flex;
    gap: 5px;
}