#floatingQuickMenuBottom {
  position: fixed;
  bottom: 0;
  right: 0;
  border: 1px solid #ccc !important;
  margin-bottom: 60px;
  margin-right: 140px;
  background-color:#f6f7f8;
  padding:4px;
  z-index:2147483647;
}

#floatingQuickPresentationMenuTop {
  position: fixed;
  top: 16px;
  right: 0;
  border: 1px solid #ccc !important;
  margin-bottom: 60px;
  margin-right: 200px;
  background-color:#f6f7f8;
  padding:4px;
  z-index:2147483647;
}

.centered_text{
    text-align: center;
}

.hidden{
    display:none;
}

.hideFullMenu{
    display:none;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.cardText.table.table-bordered.full{ /* jl 28092018 prevent images etc to overflow description and descrfooter*/
    overflow-x: hidden;
}

.userViewPresets {
}

.toolbar.full{
    width:100%;
    margin:0px;
    height:36px;
}
.divider_row_extra_info{
    /*
    position: relative;
    right: 0;
    top:0;*/
    text-align: center!important;
    background: #EDEFF1!important;
    border-radius: 2px!important;
    float: right;
    padding-left: 4px;!important;
    padding-right: 4px;!important;
    margin-right:5px;
    color: #2c323a;
    border: 1px solid rgba(0, 0, 0, .2);
    font-size: 12px;
    line-height: 20px;
	-webkit-box-shadow: none!important;
	-moz-box-shadow: none!important;
	box-shadow: none!important;
}

.divider_row_language{
    padding-left: 2px;
    padding-right: 2px;
    font-weight: 600;
}

.divider_row_type{
    padding-left: 2px;
    padding-right: 2px;
}

.divider_report_table{
    background-color: white;
}

.card-description-text h1, h2, h3, h4, h5, h6{
   line-height: 24px;
}

.card-descrfooter-text h1, h2, h3, h4, h5, h6{
   line-height: 24px;
}

.row_divider_cell h1, h2, h3, h4, h5, h6{
   line-height: 24px;
}

/* Riskcard, row_value cell */
.table.table-bordered.cardData.full p.row_value.risk_card{
    margin-bottom:0;
}

p.row_value.risk_card p{
    margin-bottom:0;
}
/* Riskcard, row_value cell ends */

/* risk table texts  */
.risk_table_header_text_div, .risk_table_header_text_div,
.impact_explanation, .right_explanation,
.probability_col {
    font-style:normal;
}

.risk_number_link{
    font-family: arial;
}

.queryBuilder {
}

.queryBuilderSection {
}

.saveView{
    opacity:0.99;
}

.queryBuilderSection:after,
.queryBuilderSection:before {
    display: table;
    content: '';
    clear: both;
}

.planningPeriodsSelector {
    margin-bottom: -1px;
}

.planningPeriodsSelector > .tabs {
    margin: auto;
}

a.risk_table{
    color: black;
    font-size:36px;
}

#userViewSelectorToolbar{
	text-align:left;
}

.overall_div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:silver;
    z-index:999999999;
}
.center_container{
    height:100%;
    margin-top:60px;
    margin-bottom:60px;
    margin-left:20px;
    margin-right:20px;
    background-color:white;
}
.left-span{
    text-align:left !important;
    position:relative;
    left:0;
}

/* CHOSEN, DROP UP */
.chosen-container .chosen-drop.dropup {
  border-bottom: 0;
  border-top: 1px solid #aaa;
  top: auto;
  bottom: 56px; //
}

.chosen-container.chosen-with-drop .chosen-single.dropup {
  //background-image: none;
}

.chosen-results.dropup .active-result.dropup{
    border-left:1px;
    border-left-color: #aaa;
    border-left-style: solid;
    border-right:1px;
    border-right-color: #aaa;
    border-right-style: solid;
}

.chosen-container.chosen-with-drop .chosen-drop.dropup {
  box-shadow: none;
  margin-bottom: -26px;  // -16px
  //border-right:9px; //jltest
}
/* */


#id_url, #id_name, #id_mapped_ad_group_object_id_string{
    width: 40%;
}

#messageSubject{
    width:400px;
}
#messageContent{
    width:100%;
}

.ta_left{
    text-align:left;
}

.ar_cell{
    padding-left:6px;
    padding-right:6px;
}

#ar_ok{
    color:green;
    padding:4px;
}

#ar_not_ok{
    color:red;
    padding:4px;
}

#ar_search{
    color:black;
    padding:4px;
}

#statusbutton{
    background-color: transparent !important;
    background-image: none !important;
}

.activity_table_th{
    font-weight:bold;
    color:black;
    background-color: silver;
    padding-left:6px;
}
.activity_report_table_updated_cards, .activity_report_table_not_updated_cards{
    border:0;
    width:100%;
    padding:6px;
    border-collapse: collapse;
}

.unitsSelector {
    overflow: hidden;
    z-index: 0;
    clear: right;
    border: 1px solid #b6bcc1;
    background: white;
    background-image: url('/media/icons/personalisation.png');
    background-repeat: no-repeat;
}

.splash_screen, .splash{
    display:none;
}

.card_table_th, .card_row_th{
    max-width:32px;
    width:32px;
    padding-left:8px;
    padding-right:8px;
}

.centered_td{
    text-align: center !important;
    vertical-align: middle !important;
}

.centered_div{
    text-align: center !important;
    vertical-align: middle !important;
}

/* QUICK PRESENTATION BEGINS */
.completelyHidden{
    display:none !important;
}

#presentation_progress_label{
    font-weight:bold;
    padding-left:4px;
    padding-right:4px;
}

/* INTEGRATED DATA TABLES BEGINS */
.account_column, .data_column{
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    height: 20px;
}

/* INTEGRATED DATA TABLES ENDS   */


/*
   SHOW_MODE GERERAL SETTINGS:
*/

.cardContent.show_mode, .table-bordered.show_mode, table.show_mode {
    min-height: 100vh;
}

/* SHOW_MODE_1 BEGINS*/
table.show_mode_1, tr.show_mode_1, td.show_mode_1 {
    border: none;
}

.card_table_header.show_mode_1{
    border:none;
    color: #0095c6;
    font-size:16px;
}

.card_row_th2.show_mode_1, .card_table_th2.show_mode_1{
    border:none;
}
.row-num.card_row_th2.show_mode_1, .icon-link.show_mode_1{
    color:#0095c6;
}

.targetor-color{
    color: #0095c6
}

.cardUnitLabel.show_mode_1, .cardPerspectiveLabel.show_mode_1, .cardPeriodLabel.show_mode_1{
    color:#0095c6;
}

/*
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
*/

.cardUnitName.show_mode_1, .cardPerspectiveName.show_mode_1, .cardPeriodName.show_mode_1 {
    color:#0095c6;
    padding:10px;
}

.cardUnit.show_mode_1, .cardPerspective.show_mode_1, .cardPeriod.show_mode_1{
    background-color: silver;
}
/* SHOW_MODE_1 ENDS*/

/*
.card_row_th{
    padding-left:0px;
    padding-right:0px;

}*/

.toolbar-space.app{
    max-width:30px !important;
}
#main-toolbar{
    float:left;
}

#toolbar-right{
    position:absolute;
    right:0;
    top:51px;
}
.printViewBtn{
    position:relative;
    left:0;
}

#edit_row_direction.container{
    /*background-color: #e1e5e8;*/
}

#cell_status_selector_chosen{
    min-width:200px;
}

#edit_row_direction_main_container{
    padding-left:0;
    padding-right:0;
    padding-bottom:40px;
    padding-top:40px;
}

.risk_input_number{
    font-size:16px;
    font-weight:bold;
    /*height:20px;*/
    padding:0;
    text-align:center;
}

input[type=number] {
    height: 30px;
}

input[type=number]:hover::-webkit-inner-spin-button {
    width: 14px;
    height: 30px;
}

#row-risk-probability, #row-risk-impact, #row-risk-value{
    height:28px !important;
}
.risk_attributes_td{
    min-width:90px;
}

.risk_explanation_td{
    min-width:160px;
    max-width:535px;
    text-align:right;
    padding-right:40px;
}

.risk_explanation_top_align_span{
    vertical-align: top;
}

.risk-control-label{
    font-weight: bold;
}

.filler_20{
   margin-left:20px;
}

.filler_40{
    padding-left:40px;
}

/* hide up/down arrows ("spinners") on input fields marked
type="number" */
.no-spinners {
  -moz-appearance:textfield;
    text-align:center !important;
}

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
    text-align:center !important;
}

#userViewTextLabel, #userViewSelectorToolbar, #takeReportToolbar{
    display:inline-block;
}

.toolbar-space.app{
    width:0;
    max-width:0;
}

.unitsSelectorTools {
    position: absolute;
    top: 5px;
    margin-bottom: 1px;
    left: 5px;
}

div.unitsSelectorTools li{
    z-index:999999
}

.unit-group {
    padding: 5px 5px 5px 5px;
    border-radius: 0 2px 2px 0;
    width: 242px;
    overflow: visible;
    -webkit-transition: all .33s ease;
    transition: all .33s ease;
}

.connector {
    z-index: 100;
}

.unit {
    font-size: 0;
    border-radius: 2px;
    background: black;
    color: white;
    position: relative;
    padding: 0 0 0 32px;
    z-index: 200;
    margin-top: 2px;
    margin-bottom: 2px;
    /*padding-left: 32px;*/
    width: 232px; /* unit-group.width - paddings*/
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    outline: 1px solid transparent;
    outline-offset: -2px;
    -webkit-transition: all .33s ease;
    transition: all .33s ease;
    white-space: nowrap;
}

.unit:after {
    display: table;
    content: '';
    clear: both;
}

.unit.focus {
    /*outline: 1px solid white;*/
    outline: 1px solid rgba(255, 255, 255, .5);
}

.unit-sel {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    padding: 6px 0 6px 0;
    margin-left: -32px;
    border-radius: 1px;
    width: 32px;
    opacity: 1;
    -webkit-transition: all .12s ease;
    transition: all .12s ease;
    cursor: pointer;
    text-align: center;
}

.unit-sel:hover {
    background: #348bed;
    background: rgba(255, 255, 255, .12);
}

.unit-name {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    width: 100%;
    padding: 6px 32px 6px 6px;
    border-radius: 0 1px 1px 0;
    -webkit-transition: all .33s ease;
    transition: all .33s ease;
    color: white;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}

.unit-name .icon-caret-right {
    display: none;
}

.unit.hasChildren {
    cursor: pointer;
}

.hasChildren .unit-sel {
    border-radius: 1px 0 0 1px;
}

.hasChildren .unit-name {
    cursor: pointer;
}

.hasChildren .icon-caret-right {
    font-size: 14px;
    font-family: FontAwesome;
    content: ''; /* icon-caret-right */
    display: inline-block;
    vertical-align: top;
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    padding: 6px 0 6px 0;
    text-align: center;
    -webkit-transition: all .12s ease;
    transition: all .12s ease;
    opacity: .5;
}

.hasChildren .unit-name:hover .icon-caret-right {
    opacity: 1;
    background: #348bed;
    background: rgba(255, 255, 255, .12);
}

.unit-group.clipped {
    padding: 5px 5px 5px 5px;
    border-radius: 0 2px 2px 0;
    width: 42px;
}

.clipped .unit {
    width: 32px;
    padding-left: 0;
}

.clipped .unit:hover {
    /* TODO: move width change to javascript, measure the width of the unit-name + the width of .unit-sel*/
    width: 232px;
    z-index: 300;
    box-shadow: /*inset 0px 0px 0px 1px rgba(0, 0, 0, 0.3),*/ 0 3px 7px rgba(0, 0, 0, 0.3);
}

.clipped .unit-sel {
    opacity: 1;
    width: 0;
    margin-left: 0;
    overflow: hidden;
}

.clipped .unit-name {
    opacity: .5;
    text-overflow: clip;
}

.clipped .unit:hover .unit-name {
    opacity: 1;
}

.clipped .icon-caret-right {
    opacity: 0;
}

.unitsSelectorSelection {
    padding: 10px 10px 2px 10px;
    border-left: 1px solid #b6bcc1;
    border-right: 1px solid #b6bcc1;
    background: #f6f7f8;
    text-align: center;
}

.unitsSelectorSelection .item {
    font-size: 12px;
    color: #747a82;
    display: inline-block;
    padding-right: 4px;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
}

.unitsSelectorSelection .item:hover {
    background: #eaeaea;
    position: relative;
    z-index: 10;
    margin-left: -14px;
    border: 1px solid #b6bcc1;
    box-shadow: 0 0 1px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .3);
}

.unitsSelectorSelection .item:after {
    content: ',';
}

.unitsSelectorSelection .item:last-child:after {
    content: '';
}

.unitsSelectorSelection .item:hover:before {
    font-family: FontAwesome;
    content: ''; /* icon-remove*/
    font-size: 10px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    width: 14px;
    position: relative;
    left: 1px;
}

.perspectivesSelector {
    border: solid #b6bcc1;
    border-width: 0 1px 1px 1px;
    text-align: center;
    background: #f6f7f8;
    padding-bottom: 2px;
}

.perspectivesSelector .item {
    font-family: 'PT Sans Narrow Bold', Arial Narrow;
    text-transform: uppercase;
    font-size: 16px;
    display: inline-block;
    padding: 8px 12px 8px 12px;
    color: #2c323a;
}

.filters {
    border: solid #b6bcc1;
    border-width: 0 1px 1px 1px;
    padding: 4px 10px 4px 10px;
    text-align: center;
    background: #f6f7f8;
}

.filters .btn-filter {
    margin-bottom: 4px;
    float: left;
}

.filterBuilder {
    overflow: scroll;
}

.filterBuilder .table {
    margin-bottom: 0;
}

.filterBuilder th,
.filterBuilder td {
    white-space: nowrap;
}

.filterGroup > th {
    padding: 12px 20px 4px 8px;
    vertical-align: top;
}

.filterGroup th > span {
    margin-right: 20px;
}

.filterGroup th .btn-mini {
    float: right;
    margin-right: -24px;
    position: relative;
    right: 11px;
    top: 1px;
}

.filterGroup > td {
    padding: 0;
    border-bottom: 0;
}

.filterRows td {
    padding: 8px;
}

.filterRows .action {
    vertical-align: top;
    text-align: right;
}

.filterRows tr:first-child .token {
    display: none;
}

.filterRows .token {
    font-size: 10px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: rgb(102, 102, 102);
    background: none repeat scroll 0 0 white;
    width: 44px;
    height: 10px;
    margin-top: -49px;
    margin-right: 8px;
    border-bottom: 0 none;
    border-radius: 2px 2px 0 0;
    overflow: visible;
    cursor: pointer;
    padding: 2px 0 0 0;
}

.cardsListCount {
    position: fixed;
    z-index: 9000;
    margin: 0;
    bottom: 20px;
    left: 20px;
}

.cardsListCountLoadingText {

}

.card {
    max-width: 943px;
    margin: 40px auto 60px auto;
}

.cardHeader {
}

.cardHeader:after {
    content: '';
    display: table;
    clear: both;
}

.cardToolbar {
    float: right;
    box-shadow: none;
    border: solid #cdd1d3;
    border-width: 1px 1px 0 1px;
}

#card_header.cardToolbar{
    padding-top: 1px;
    padding-bottom: 1px;
}

.cardMetaTitle {
    float: left;
    margin: 0 5px 0 0;
    padding: 10px 5px 5px 5px;
    border: solid #cdd1d3;
    border-width: 1px 1px 0 1px;
}

.cardContent {
    background: white;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.18);
}

.cardTitle {
    margin-bottom: -1px;
}

.cardTitle,
.cardTitle td {
    border-color: #c3c8ca;
}

.cardTitle h2 {
    margin: 0;
}

.cardText {
    margin-bottom: -1px;
    cursor: pointer;
}

.cardText,
.cardText td {
    border-color: #c3c8ca;
}

.card-description:active:focus {
    outline: none;
}

.cardData {
    font-size: 13px;
    line-height: 17px;
    word-wrap: break-word;
}

.cardData thead th {
    padding: 0;
}

.cardData thead th > div {
    padding: 8px;
    position: relative;
}

.cardData th,
.cardData td {
    cursor: default;
    padding: 8px 8px 0px 8px;
}

.cardData tbody th {
    text-align: center;
}

.cardData .rowStatus {
}

.dialogData {
    font-size: 14px;
    line-height: 17px;
    word-wrap: break-word;
}

.dialogData thead th {
    padding: 8px;
}

.dialogData thead th > div {
    padding: 8px;
    position: relative;
}

.dialogData th,
.dialogData td {
    cursor: default;
}

.dialogData tbody th {
    text-align: center;
}

.dialogData .rowStatus {
}

.rowStatus img {
    height: 14px;
    width: auto;
}

.sidebar.report-format{
    border-right: 0px !important;
}

.format_selector{
    padding-top:10px;
    padding-bottom:10px;
}

.format_selector.selected{
    background-color: rgba(0,136,204,0.07);
}
.format_selector_text.selected{
    font-weight:bold;
}
.report_extra_options{
    padding-left:10px;
    padding-right:10px;
    padding-top:0px !important;
    padding-bottom:0px;
}

.report_extra_options.container{
    height:400px;
}

.report_option_label{
    min-width:50px;
    width:50px;
}

#extraoptions_header{
    height:20px;
    width:100%;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:36px;
}

#div_cardTable_useDefaultColoring{
    margin-top:2px;
}

.cube_roller2{
    margin-top:-6px;
}


#div_report_preset{
    width:364px;
    min-width:364px;
    max-width:364px;
}
#templateSelect_chosen{
    width:364px;
    min-width:364px;
    max-width:364px;
}
#presetSelect_chosen{
    width:364px;
    min-width:364px;
    max-width:364px;
}

#preset_container{
    padding-top:0px;
    padding-bottom:0px;
    padding-left:0px;
    z-index: 999;
}

.report-preset{
    height:28px;
    max-height:28px;
    min-width:300px;
}

.style-preset{
    height:28px;
    max-height:28px;
    min-width:300px;
}

#style_preset_container{
    padding-top:0px;
    padding-bottom:0px;
    z-index: 999;
    padding-left:0px !important;
}

.prntBold{
    font-weight:bold;
}

.style-font-name-preset{
    height:28px;
    max-height:28px;
    min-width:200px;
    max-width:200px;
    width:200px;
    float:left;
    margin-top:4px;
}

.cover-page-preset{
    height:28px;
    max-height:28px;
    min-width:252px;
    max-width:252px;
    width:252px;
    float:left;
    margin-top:4px;
    margin-bottom:8px;
}

#style_font_name_container{
    padding-top:0px;
    padding-bottom:0px;
    z-index: 999;
    padding-left:0px !important;
}

.style-font-size-preset{
    height:28px;
    max-height:28px;
    min-width:100px;
    float:left;
    margin-top:4px;
}

.unit-style-preset{
    height:28px;
    max-height:28px;
    min-width:60px;
}

#unit_style_preset_container{
    max-width:120px;
    padding-top:0px;
    padding-bottom:10px;
    z-index: 999;
}

.perspective-style-preset{
    height:28px;
    max-height:28px;
    min-width:60px;
}

.background-colors-style-preset{
    height:28px;
    max-height:28px;
    min-width:60px;
}

#perspective_style_preset_container{
    max-width:120px;
    padding-top:0px;
    padding-bottom:0px;
    z-index: 999;
}

#style_font_size_container{
    padding-top:0px;
    padding-bottom:0px;
    z-index: 999;
    padding-left:0;
}

#style_font_size_container, #cover_page_container{
    padding-top:0px;
    padding-bottom:0px;
    z-index: 999;
    padding-left:0;
    padding-right:0;
}


.default-font-preset{
    height:28px;
    max-height:28px;
    min-width:200px;
    float:left;
    padding-top:2px;
}


#default_font_preset_container{
    padding-top:0px;
    padding-bottom:0px;
    z-index: 999;
}

.report_preset_column{
    vertical-align: top;
    height:28px;
    max-height:28px;
}

.extraoptions_column{
    vertical-align: top;
}

.card .selected,
.card .selected th {
    cursor: pointer;
}

.column-resize-handle {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -2px;
    cursor: col-resize;
}

.column-resize-handle:hover,
.column-resize-handle.ui-draggable-dragging {
    /*  background: #0088cc; */
}

.column-resize-handle:after {
    /* increase the hover area of the drag handle without increasing visible size */
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    right: -3px;
    bottom: 0;
    z-index: 700;
}

.cardData tbody .drop-highlight-bottom th,
.cardData tbody .drop-highlight-bottom td {
    border-bottom: 2px solid #0088cc;
    padding-bottom: 7px;
}

.cardData thead .drop-highlight-bottom th > div {
    border-bottom: 2px solid #0088cc;
    padding-bottom: 7px;
}

.cardData tbody .drop-highlight-top th,
.cardData tbody .drop-highlight-top td {
    border-top: 2px solid #0088cc;
    padding-top: 6px;
}

.cardData thead .drop-highlight-top th > div {
    border-top: 2px solid #0088cc;
    padding-top: 6px;
}

.dialogData tbody .drop-highlight-bottom th,
.dialogData tbody .drop-highlight-bottom td {
    border-bottom: 2px solid #0088cc;
    padding-bottom: 7px;
}

.dialogData thead .drop-highlight-bottom th > div {
    border-bottom: 2px solid #0088cc;
    padding-bottom: 7px;
}

.dialogData tbody .drop-highlight-top th,
.dialogData tbody .drop-highlight-top td {
    border-top: 2px solid #0088cc;
    padding-top: 6px;
}

.dialogData thead .drop-highlight-top th > div {
    border-top: 2px solid #0088cc;
    padding-top: 6px;
}

#divider_selector_holder{
    padding-bottom:6px;
    padding-top:6px;
}
/*
input[type="text"].cardDescriptionFooterInput::-webkit-input-placeholder {
    color: #2c323a;
    font-size: 12px;
    opacity: 1 !important;
}

input[type="submit"].cardDescriptionFooterInput::-moz-placeholder{
    color: #2c323a;
    font-size: 12px;
    opacity: 1 !important;
}
*/

.cardDescriptionFooterInput {
    text-align: center!important;
    background: #EDEFF1!important;
    border-radius: 2px!important;
    float: right;
    padding-left: 5px;!important;
    padding-right: 5px;!important;
    width:50px;
    color: #2c323a;
    border: 1px solid rgba(0, 0, 0, .2);
    font-size: 12px;
    line-height: 20px;
	-webkit-box-shadow: none!important;
	-moz-box-shadow: none!important;
	box-shadow: none!important;
    /*min-width:40px;
    max-width:60px;
    width: auto;*/
}

.row-drag-helper {
    font-size: 12px;
    width: 940px;
    margin: auto;
    background: white;
    overflow: hidden;
    box-sizing: content-box;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    opacity: .6;
}

.row-drag-helper-cell {
    box-sizing: content-box;
    padding: 8px;
    float: left;
    height: 50px;
    line-height: 1.45em;
    text-align: left;
    vertical-align: top;
    border: solid #d5d9da;
    border-width: 1px 1px 1px 0;
}

.row-drag-helper-cell:first-child {
    background: #edeff1;
    border-color: #d5d9da;
    text-align: center;
    border-width: 1px 1px 1px 1px;
}

.edit-cell-status [class^="icon-"],
.edit-cell-status [class*=" icon-"] {
    width: 1.2em;
    display: inline-block;
    text-align: center;
}

/********************************
  Pasin CSS-dumpit
*********************************/

/********************************
  Timon CSS-dumpit
*********************************/
.sortView {
    border: solid #b6bcc1;
    border-width: 0 1px 1px 1px;
    padding: 4px 10px 4px 10px;
    text-align: center;
    background: #f6f7f8;
}

/********************************
  Riston CSS-dumpit
*********************************/
.requiredLabel {
    color: #FF0000;
}

.modified {
    background-color: #e0ffff !important;
}

.helpImage {
    height: 8%;
    right: 0;
    top: 38%;
    position: fixed;
    z-index: 8999;
}

.tableCell {
    float:left;/*fix for  buggy browsers*/
    display:table-column;
}

.deleteUserGroup {
    cursor: pointer;
    float: right;
    margin-left: -2px;
    margin-top: -10px;
    height: 20px;
    width: 20px;
    opacity: 0;
    border: none;
}

.deleteUserGroup:hover {
    opacity:1.0;
    border: solid 1px #777777;
}

.description_collapsed {
    max-height: 150px;
    overflow: hidden;
    padding-top:1px;
}

.descrfooter_collapsed {
    max-height: 150px;
    min-height: 20px;
    height: 42px;
    overflow: hidden;
    padding-top:1px;
}
.descrfooter_collapsed.empty, .card-descrfooter.empty {
    height: 4px !important;
    min-height: 4px !important;
}

card-descrfooter.empty {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}

.collapse-description {
    float:right;
}

.collapse-description:hover{
    border:solid #008CCE 1px;
}

.noBordersChosen {
    border: 0 !important;
    box-shadow: none !important;
}

#zenbox_tab {
    border: solid 1px;
    cursor: pointer;
    position: fixed;
    top: 23%;
    height:12%;
    z-index: 10000;
}

/* IE won't read ID-and-class selectors like #zenbox_tab.left, so we use just a class: */
.ZenboxTabLeft {
    left: 0;
    background-position: right 0;
}

.ZenboxTabRight {
    right: 0;
    background-position: left 0;
}

#zenbox_tab:hover {
    background-color: #444;
}

#zenbox_tab img {
    display: block;
    height: 100%;
}

#zenbox_overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 90000;
}

#zenbox_overlay * {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

#zenbox_container {
    height: 620px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 638px;
    z-index: 2;
}

#zenbox_container .zenbox_header {
    position: relative;
    text-align: right;
    width: auto;
    z-index: 100;
}

#zenbox_close {
    cursor: pointer;
    height: 46px;
    position: relative;
    top: 10px;
    width: 46px;
}

#zenbox_body {
    height: 900px;
    margin-top: -18px;
    position: relative;
    width: 615px;
}

#zenbox_scrim {
    background-color: #000;
    filter: alpha(opacity=42);
    -moz-opacity: 0.42;
    left: 0;
    position: absolute;
    opacity: 0.42;
    top: 0;
    width: 100%;
    z-index: 1;
}

.floatingHeader {
    position: fixed;
    top: 0;
    margin: auto;
    width:100%;
    left: 0;
    right: 0;
}

.floatingBase {
    max-width: 943px;
    margin: auto;
}

#floating_header{
    /*margin-left:10px;*/
}

.floatingTable {
    table-layout: fixed;
    margin: auto;
    max-width: 943px;
}

.columnInfoContainer {
    bottom: 0px; 
    display: table; 
    position: absolute;
}

.columnInfo {
    color: #348BED;
    font-size: 20px;
    margin-left: 10px;
    cursor: pointer;
}

.columnInfoDescription {
    background: white;
    border: 1px solid #c3c8ca;
    margin-left: 30px;
    margin-top: -27px;
    max-width: 650px;
    padding: 5px;
    position: absolute;
    z-index: 1000;
    width: 200%;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.18);
}

.stratTable{
    height: 250px;
    width:100%;
    border: 0px;
    border-collapse:collapse;
    min-width: 500px;
}
.stratTh{
    text-align:center;
    height:25px;
    padding-top:6px;
    border: 0px;
    border-collapse:collapse;
    background-color:#FFFFFF;
    border-bottom: 0px solid #FFFFFF;
}
.stratTd{
    position:relative;
    background-image: url('/static/img/arrow_orange.png');
    background-repeat: no-repeat;
    background-size: 75% auto;
    background-position: center;
    padding-bottom:12px;
    border: 0px;
    height:20px;
    z-index:1;
}

.stratTd1{
    position:relative;
    background-image: url('/static/img/arrow_orange1.png');
    background-repeat: no-repeat;
    background-size: 75% auto;
    background-position: center;
    padding-bottom:12px;
    border: 0px;
    height:20px;
    z-index:1;
}
.stratTd2{
    position:relative;
    background-image: url('/static/img/arrow_orange2.png');
    background-repeat: no-repeat;
    background-size: 75% auto;
    background-position: center;
    padding-bottom:12px;
    border: 0px;
    height:20px;
    z-index:1;
}

.show_tree{
    position:relative;
    cursor: pointer;
    margin-bottom:4px;
    z-index: 2147483647;
}

.show_tree:hover {
    background-color: #F1F2F3; /*#E1E5E8; #EDF6FB;*/
    z-index: 2147483647;
    -moz-box-shadow: 2px 4px 2px 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 4px 2px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 2px 4px 2px 0 rgba(0, 0, 0, 0.5);
    font-weight:bold;
}


.stratMsg{
    text-align:left;
    height:10px;
    font-weight:bold;
    padding-left:20px;
    padding-top:6px;
    position: relative;
    bottom:0;
    border-collapse:collapse;
    background-color:#FFFFFF;
    border-top: 1px solid #B6BCC1;
    border-bottom: 0px solid #FFFFFF;
}

#tgtselector {
    padding:0px;
}

#targetselector{
    padding-left  : 20px;
    padding-right : 20px;
    padding-bottom: 15px;
    padding-top   : 15px;
}

#targetselector_chosen{
    padding-left  : 20px;
    padding-right : 20px;
    padding-bottom: 15px;
    padding-top   : 15px;
}

.loader {
  height: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #E1E5E8;  /* #E1E5E8 */ /* #ddd */
}
.loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #0095C6; /* #2980b9; */ /*  targetor blue*/
  animation: loading 1.5s linear infinite;
}

.mobile_loader {
  height: 8px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #E1E5E8;  /* #E1E5E8 */ /* #ddd */
}
.mobile_loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #0097FC; /* #2980b9; */ /*  targetor blue*/
  animation: loading 1.5s linear infinite;
}


.comment {
    /*border: solid #ccc 1px;*/
    margin-top: 8px;
    background-color: white;
    border-radius: 6px;
    padding: 0 0 0 8px;
}

.other-user_comment{
    margin-right:50px;
}
.comment.own-comment {
    margin-left:50px;
    color:white;
    background-color: #0095C6;
}

.muted.own-comment {
    color: white;
}
.muted.own-comment-user {
    color: #D3D3D3;
}

.editCommentArea {
    margin-top: 8px;
    width: inherit;
}

.commentTextArea {
    width: 100%;
}

.comment-new {
    margin-top: 15px;
}

.sendCommentBtn {
    background-color: #0094C5;
    display: inline-block;
}

.commentYesBtn {
    background-color: #95c600;
    display: inline-block;
}

.commentNoBtn {
    display: inline-block;
    background-color: #ff6a39;
}

.menu-item.grayish:hover {
    color: black;
    background: #E1E5E8; /* Old browsers */
}


.commentViewBtn {
    color: #fff;
    text-transform: uppercase;
    padding: 1px 15px 1px 15px;
    margin-top: 2px;
    cursor: pointer;
}

.commentInfo {

}

.btn-targetTaskEdit {
    border: 0;
    background: transparent;
    font-size: 18px;
    color: #6D6D6D;
}

.btn-targetTaskEdit.own-comment {
    border: 0;
    background: transparent;
    font-size: 18px;
    color: white;
}

.hideDescriptionAndFooter {
    display: none !important;
}


.status_explanation{
    padding-left: 3px;
    padding-right: 3px;
}

#cube_roller_holder{
    display:inline;
    position:relative;
    background-color:#F6F6F6; /*#E1E5E8 #F6F6F6  */
}

.cube_tip_item{
    background-color:#E1E5E8; /*#E1E5E8 #F6F6F6  */
    margin-left:4px;
    margin-right:4px;
    margin-bottom:3px;
}
.cube_tip_item.inner{
    margin-left:8px;
    margin-right:8px;
}

/*background-color:red;min-width:45px; width:45px!important;vertical-align:top;padding-left:4px*/

#cube_roller_holder.rollable{
    background-color:#E1E5E8!important; // #E1E5E8!important; /* todo - kesken -> aktiivisen väri!*/
    background: -moz-linear-gradient(top, #E1E5E8 0%, #E1E5E8 100%)!important; /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E1E5E8), color-stop(100%, #E1E5E8))!important; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #E1E5E8 0%, #E1E5E8 100%)!important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #E1E5E8 0%, #E1E5E8 100%)!important; /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #E1E5E8 0%, #E1E5E8 100%)!important; /* IE10+ */
    background: linear-gradient(to bottom, #E1E5E8 0%, #E1E5E8 100%)!important; /* W3C */
}


.rollable{
    background-color:#E1E5E8!important; // #E1E5E8!important; /* todo - kesken -> aktiivisen väri!*/
    background: -moz-linear-gradient(top, #E1E5E8 0%, #E1E5E8 100%)!important; /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E1E5E8), color-stop(100%, #E1E5E8))!important; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #E1E5E8 0%, #E1E5E8 100%)!important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #E1E5E8 0%, #E1E5E8 100%)!important; /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #E1E5E8 0%, #E1E5E8 100%)!important; /* IE10+ */
    background: linear-gradient(to bottom, #E1E5E8 0%, #E1E5E8 100%)!important; /* W3C */
}


#cube_roller_holder.active{
    display:inline;
    position:relative;
    background-color:#E1E5E8!important; /* todo - kesken -> aktiivisen väri!*/
    background: -moz-linear-gradient(#E1E5E8,#E1E5E8)!important;
}


#cube_rolling_detail_selector{
    float:left;
    background-color:#E1E5E8; /*#E1E5E8 #F6F6F6  */
    border:black;
    margin-top:0px;
    border-top:1px;
    border-radius:5px;
    border-top-right-radius:0px;
    max-width:300px;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.75);
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}

#hide_cube_details{
    padding-left:4px;
    padding-right:4px;
    padding-top:1px;
    padding-bottom:1px;
}

#createscenarioimageBtn.dashboard_image_btn{
    padding-top:4px;
}

#card_snapshot{
    position:absolute;
    top:0px !important;
    left:0px !important;
    width:100% !important;
    height:100% !important;
    margin-left:0  !important;
    z-index:999999;
}


.menu_divider {
    height: 1px;
    border-bottom: 1px solid silver;
    padding-top: 0px;
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.print_report_chevron{
    padding-right:2px;
}

.divider_row_expanded {
	max-height: none;
    overflow: hidden;
}

.divider_row_collapsed { /* Under construction */
	max-height: 46px;
    overflow: hidden;
}

/*
@media only screen and (max-height: 1025px) {
    #print-user-view-extended-modal{
        position:absolute !important;
        top:250px !important;
    }
}

@media all and (max-height: 1025px) {
    #print-user-view-extended-modal{
        position:absolute !important;
        top:260px !important;
    }
}
*/

@media only screen and (max-width: 1368px) {
    .snapshot_progress_button{
        display:none;
    }
    #snapshot_toolbar,
    #fixed_col_1_selector_chosen,
    #fixed_col_2_selector_chosen,
    #report_preset_selector_chosen,
    #moving_col_selector_chosen,
    #compared_col_selector_chosen{
        font-size:10px;
    }
    #toggle_comparison{
        max-width:10% !important;
        width:10% !important;
        padding-left:10px;
    }
    .variable-padding{
        padding-left:10px !important;
        padding-right:10px !important;
    }
    .cardUnitName, .cardPerspectiveName, .cardPeriodName{
        font-size:18px !important;
    }
}

@media only screen and (max-width: 1199px) {
    .divider_report_button{
        display:none;
    }
    #toggle_comparison{
        max-width:8% !important;
        width:8% !important;
        padding-left:0px !important;
        min-width:80px !important;
    }
    .radio.portrait{
        padding-left:0px !important;
    }
}


@media only screen and (max-width: 1024px) {
    .menu-item.edit-status{
        max-width:150px;
        min-width:150px;
        width:150px;
    }

    .cardsList.container {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 10px;
        padding-right: 10px;/*jl*/
    }

    #createscenarioimageBtn{
        display: none !important;
    }
}


@media only screen and (min-width: 813px) and (max-width: 980px) {
    .modal-scrollable {
        max-width:980px;
        width:980px;
    }

    body {
        max-width: 980px;
        min-width: 813px;
    }

    .modal-scrollable{
        width: 813px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:980px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:980px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:546px !important;
        width:546px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:980px;
    }

    #roadmap_table{
        width:980px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
        height: 200px;
        max-height:200px;
    }
}

@media only screen and (max-width: 800px) {
    #strategy-tree-container{
        display:none;
    }
    .divider_row_ckeditor{
        height:370px;
        max-height:370px;
    }
}

@media only screen and (min-width: 769px) and (max-width: 812px) {
    .modal-scrollable {
        max-width:800px;
        width:769px;
    }

    body {
        max-width: 800px;
        min-width: 800px;
    }

    #ar_main_table{
        min-width: 500px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }

    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    #user_view_selector_select
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }

    .toolbar-space.app, .toolbar-item.app{
        display:none;
    }

    .toolbar-item.app{
        min-width:0px !important;
        width:0px !important;
    }

    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }

    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:800px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:800px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:546px !important;
        width:546px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:800px;
    }

    #roadmap_table{
        width:800px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}


@media only screen and (min-width: 741px) and (max-width: 768px) {
    .modal-scrollable {
        max-width:768px;
        width:768px;
    }

    body {
        max-width: 768px;
        min-width: 741px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:768px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:768px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:546px !important;
        width:546px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:768px;
    }

    #roadmap_table{
        width:768px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}

@media only screen and (min-width: 737px) and (max-width: 740px) {
    .modal-scrollable {
        max-width:740px;
        width:740px;
    }

    body {
        max-width: 740px;
        min-width: 737px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:768px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:768px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:546px !important;
        width:546px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:768px;
    }

    #roadmap_table{
        width:768px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}
@media only screen and (min-width: 668px) and (max-width: 736px) {
    .modal-scrollable {
        max-width:736px;
        width:736px;
    }

    body {
        max-width: 736px;
        min-width: 668px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector{
        max-width:208px !important;
        width:208px !important;
        font-size:10px;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:220px !important;
        width: 220px !important;
        font-size:10px;
    }

    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:736px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:736px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        padding-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:546px !important;
        width:546px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:736px;
    }

    #roadmap_table{
        width:736px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}

@media only screen and (min-width: 641px) and (max-width: 667px) {
    .modal-scrollable {
        max-width:667px;
        width:667px;
    }

    body {
        max-width: 667px;
        min-width: 641px;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bottom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:667px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:667px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px; /*kisuli*/
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:546px !important;
        width:546px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:667px;
    }

    #roadmap_table{
        width:667px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}


@media only screen and (max-width: 639px) {
    .saveView,
    .optionsMenu,
    .notificationBase,
    .usersettings,
    .adminwrench,
    .help_and_guide,
    .cardsListHeader,
    .btn-publish-card {
        display: none;
    }
    #qbs_usr{
        display:inline !important;
        float:right;
        position:relative;
        top:-400px;
        left:0px;
        margin-top:4px;
        margin-right:6px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
}


@media only screen and (min-width: 600px) {
    div.toolbar-item.app {
        display: block;
    }
}


@media only screen and (min-width: 601px) and (max-width: 640px) {
    .modal-scrollable {
        max-width:640px;
        width:640px;
    }
    div.toolbar-item.app{
        display:inherit;
    }

    body {
        max-width: 640px;
        min-width: 601px;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:640px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:640px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }
    /*
    .modal-scrollable{
        width:100% !important;
        height:100% !important;
        z-index:9999999;
    }*/
    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}


@media only screen and (min-width: 569px) and (max-width: 600px) {
    .hideNarrow{
        /* add this class to all elements you want to hide, when using a small resolution device.All it does, is hiding.*/
        display:none !important;
    }
    .modal-scrollable {
        max-width:600px;
        width:600px;
    }

    body {
        max-width: 600px;
        min-width: 569px;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:600px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:600px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:546px !important;
        width:546px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:600px;
    }

    #roadmap_table{
        width:600px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}


@media only screen and (min-width: 534px) and (max-width: 568px) {
    .hideNarrow{
        /* add this class to all elements you want to hide, when using a small resolution device.All it does, is hiding.*/
        display:none !important;
    }
    .modal-scrollable {
        max-width:568px;
        width:568px;
    }

    body {
        max-width: 568px;
        min-width: 534px;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:568px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:568px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:516px !important;
        width:516px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:568px;
    }

    #roadmap_table{
        width:568px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}


@media only screen and (min-width: 481px) and (max-width: 533px) {
    .hideNarrow{
        /* add this class to all elements you want to hide, when using a small resolution device.All it does, is hiding.*/
        display:none !important;
    }
    .modal-scrollable {
        max-width:533px;
        width:533px;
    }

    body {
        max-width: 533px;
        min-width: 481px;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:533px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:533px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:482px !important;
        width:482px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:533px;
    }

    #roadmap_table{
        width:533px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}


@media only screen and (min-width: 415px) and (max-width: 480px) {
    .hideNarrow{
        /* add this class to all elements you want to hide, when using a small resolution device.All it does, is hiding.*/
        display:none !important;
    }
    .modal-scrollable {
        max-width:480px;
        width:480px;
    }

    body {
        max-width: 480px;
        min-width: 415px;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    .responsive{
        /* USE THIS FOR TESTING PURPOSES!*/
        /*color:yellow;*/
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:6px;
        padding-right:6px;
    }
    .screenSelectorSection.screenSelector{
        left:6px !important;
    }
    .a_navi_main{
        padding-left:6px !important;
        padding-right:6px !important;
    }
    #planning_period_tabs{ /* pull planning period tabs to the right */
        float:right; !important;
    }
    .navbar{
        font-size:12px;
    }
    .navbar-section.navbar-primary{
        padding-left:6px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:6px !important;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }
    option{
        font-size:10px;
    }
    select{
        max-width:220px !important;
    }
    .chosen-container{
        font-size:12px;
    }
    .filterBuilder{
        font-size:10px;
    }
    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:2px;
        width:2px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        height:60px !important;
        width:70px !important;
        min-width:70px !important;
    }
    .report_extra_options.container.hideNarrow{
        font-size:10px !important;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    #unit_style_preset_container{
        padding-bottom:0px;
    }
    .preset_font_size_label{
        display:none !important;
    }
    .sidebar.report-format{
        width:260px;
    }
    #div_report_preset, #selector_holder{
        max-width:260px;
    }
    .print_report_chevron{
        position:absolute;
        left:370px;
    }
    .report-template.hideNarrow{
        font-size:10px;
    }
    .report_format_mini_header{
        margin-bottom:2px;
    }
    td.extraoptions_column div{
       /* margin-bottom:2px;*/
    }
    div.report_extra_options{
        /*max-height:16px !important;*/
    }
    .style-preset{
        min-width:200px;
        max-width:200px;
    }
    #presetSelect_chosen{
        max-width:220px !important;
        min-width:220px !important;
        width:220px !important;
    }
    #templateSelect_chosen{
        width:220px;
        min-width:220px;
        max-width:220px;
    }
    #userViewTitle{
        font-size:20px !important;
    }
    #userViewTitle{
        margin-bottom:10px;
    }
    #floating_header{
       /* margin-left:10px;*/
    }
    #snapshot_table_header{
        width:100% !important;
        max-width:480px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:480px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    .filterGroup th{
        padding-left:4px;
        padding-right:10px;
    }
    .filterGroup span{
        margin-right:10px;
    }
    table.filterRows .action{
        paddinge-left:0px;
    }
    .btn.btn-mini.add-filter{

    }
    .btn.btn-mini.remove-filter{

    }
    input.searchText[type="text"]{
        padding-left:1px;
        padding-right:1px;
        font-size:10px;
    }
    table.cardData th div {
        /* Card Table Header TH elements */
        /*color:red;;*/
        padding-left:3px;
        padding-right:3px;
    }

     /*dashboard*/
    #chart_title{
        font-size:14px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:431px !important;
        width:431px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:480px;
    }

    #roadmap_table{
        width:480px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:30px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    .table.table-bordered.full.cardHistory{
        font-size:11px;
    }
}

/*414begins*/
@media only screen and (min-width: 376px) and  (max-width: 414px) {
    .splash_screen{
        display:block;
        width:100%;
        height:400px;
        background-image: url("/media/icons/personalisation.png");
        background-repeat: no-repeat;
        background-size: 414px auto;
    }
    .modal-scrollable {
        max-width:414px;
        width:414px;
    }

    body {
        max-width: 414px;
        min-width: 376px;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    .splash{
        display:inherit;
    }

    .hideNarrow{
        /* add this class to all elements you want to hide, when using a small resolution device. All it does, is hiding.*/
        display:none !important;
    }

    .img-status{
        height:12px !important;
        width:12px !important;
    }

    .edit-status{
        font-size:12px !important;
        height:20px !important;
    }

    .a_navi_main{
        padding-left:4px !important;
        padding-right:4px !important;
        font-size:12px;
    }

    .navbar-section.navbar-primary{
        padding-left:4px !important;
        padding-right:0px !important;
        min-width:414px !important;
        width:414px !important;
    }

    .navbar-section.navbar-secondary{
        padding-left:4px !important;
    }

    #userViewSpinner{
        display:none;
    }

    #mobile_logout {
        display:inline !important;
        width:10px;
        font-size:12px !important;
        padding-right: 8px;
    }

    /* if used in base.html */
    #mobile_logout2 {
        display:table-cell !important;
        width:10px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #a_mobile_logout2{
        font-size:12px !important;
    }

    #mobile_power_off{
        float:right;
        position:relative;
        top:18px;
        font-size:14px; !important;
    }

    .unitsSelector{
        background-image:none;
    }

    .header-inner{
        padding-left:10px;
        padding-right:10px;
        padding-top:0px;
        padding-bottom:10px;
    }

    .screenSelectorSection.screenSelector{
        left:10px !important;
    }

    .toolbar.full{
        max-width:414px;
        width:100%;
        margin:0px;
        height:36px;
    }

    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }

    #user_view_selector_select{
        max-width:240px !important;
        width:240px !important;
        font-size:10px;
    }

    .toolbar-space.app, .toolbar-item.app{
        display:none;
    }

    .toolbar-item.app{
        min-width:0px !important;
        width:0px !important;
    }

    option{
        font-size:8px;
    }

    select{
        max-width:300px !important;
    }

    /* card basic info - data */
    .cardUnitName, .cardPerspectiveName, .cardPeriodName{
        font-size:12px !important;
    }

    /* card basic info - labels */
    .cardUnitLabel, .cardPerspectiveLabel, .cardPeriodLabel{
        font-size:12px !important;
    }

    .card-description-text{
        font-size:10px !important;
        max-width:384px !important;
        width:384px !important;
    }

    .card-description-text > div{
        font-size:10px !important;
        max-width:384px !important;
        width:384px !important;
    }

    .card-description{
        max-width:366px !important; /* 384 - 2x9 paddings/borders */
        width:366px !important;
    }

    .cardText.table.table-bordered.full{
        overflow-x: hidden;
    }

    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }

    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    .edit-card{
        font-size:10px;
    }

    /* row statuses on the card */
    .edit-status{
        max-height:30px !important;
        height:30px !important;
    }

    .table.table-bordered.cardData.full td{
        padding-left:4px;
        padding-right:4px;
    }

    .row-status-icon img{
        width:12px;
        height:12px;
    }

    .cell-status-icon{
        width:12px;
        height:12px;
    }

    /* header/footer button texts, when header/footer is empty */
    .cardDescriptionFooterInput {
        font-size: 10px;
    }

    /* metatitles (light-blue info boxes) */
    .cardUnsaved.cardMetaTitle{
        font-size:10px !important;
        font-weight: normal !important;
    }

    .cardLocalstore.cardMetaTitle{
        display:none; !important;
        font-size:8px !important;
        font-weight: normal !important;
    }

    /* miscellaneous rules with global impact */
    .chosen-container{
        font-size:12px !important;
    }

    .btn{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }

    .toolbar-space{
        min-width:1px;
        width:1px;
    }

    /* miscellaneous items with restricted impact */
    .filterBuilder{
        font-size:10px;
    }

    /* perspective selector */
    .perspectiveSelector{
        font-size:10px !important;
    }

    div.perspectiveSelector label{
        padding: 1px 1px 1px 1px !important;
    }

    div.perspectiveSelector input{
        margin: 1px 1px 1px 1px;
    }

    .perspectiveSelector .item{
        padding: 1px 1px 1px 1px !important;
    }

    /* report format selection*/
    .format_table{
        font-size:10px;
    }

    .report-template.hideNarrow, .report_extra_options.container.hideNarrow{
        display:none !important;
        /*
        font-size:10px;
        width:200px;
        max-width:200px;
        */
    }

    .report_format_icon{
        width:56px;
        height:56px;
    }

    .format_selector_text{
        font-size:10px;
    }

    .format_table{
        font-size:10px;

    }

    .format_selector{
        min-width:64px !important;
        height:64px !important;
        width:64px !important;
    }

    .report_format_icon{
        width:64px;
        height:64px;
    }

    .format_selector_text{
        font-size:10px;
    }

    .format_table{
        font-size:10px;
    }

    #templateSelect_chosen{
        width:120px;
        min-width:120px;
        max-width:120px;
    }

    #presetSelect_chosen{
        max-width:120px !important;
        min-width:120px !important;
        width:120px !important;
    }

    /*strategy-map, organization-map*/
    div.floatingStatusList{
        max-width:160px !important;
    }

    div.floatingStatusList .others{
        width:160px;
    }

    .almostHidden{
        width:20px !important;
    }

    .almostHidden i{
        padding-left:5px !important;
    }

    div.periodArea select{
        max-width:80px !important;
        min-width:80px !important;
        width:80px !important;
        font-size: 10px;
    }

    .periodArea .chosen-container{
        max-width:80px !important;
        min-width:80px !important;
        width:80px !important;
    }

    .statusGroupArea{
        min-width:160px !important;
        max-width:160px !important;
        width:160px !important;
    }

    .statusGroupArea .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }

    div.statusGroupArea select{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
        font-size: 10px;
    }

    #unitSelector, #targetSelector{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
        font-size: 10px;
    }

    #unitHolder .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }

    .statusListArea, #unitDiv, #addSubUnits{
        font-size:8px !important;
    }

    /* organization-map*/
    #targetHolder .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }

    #targetfloater, #targetDiv, #targetSeparator{
        font-size:8px !important;
    }

    /* locally stored data*/
    #localStoreInfoLabel, #btoggler{
        display:none;
    }

    /* application footer*/
    .footer{
        font-size:8px;
    }

    /* user view title in the middle of screen*/
    #userViewTitle{
        font-size:20px !important;
        margin-bottom:2px;
    }

    #planning_period_tabs{
        float:right !important;
    }

    .planningPeriodsSelector > .tabs {
        float:right !important;
    }

    #card_sorter{
        font-size:12px;
    }

    /* card snapshot view*/
    #snapshot_table_header{
        width:100% !important;
        max-width:360px !important;
    }

    #snapshot_table{
        width:100% !important;
        max-width:414px !important;
    }

    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }

    table.cardData th div {
        padding-left:2px;
        padding-right:2px;
    }

    /* filter cards*/
    .filterGroup > th {
        padding: 3px 5px 2px 2px;
        vertical-align: top;
    }

    .filterGroup th > span {
        margin-right: 20px;
    }

    .filterRows .chosen-container{
        max-width:60px !important;
        width:60px !important;
    }

    .filterRows td{
        padding-left:0px;
        padding-right:0px;
    }

    #filter_target_chosen,
    #filter_target{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_target_type_chosen,
    #filter_target_type{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_responsible_person_chosen,
    #filter_responsible_person{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_row_status_chosen,
    #filter_row_status{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_searchText{
        font-size:8px;
        width:60px !important;
    }

    div.token-list .token{
        font-size:8px;
    }

    .btn.btn-mini.add-filter{
        margin-right:0px;
    }

    div#card_header button{
        padding-left:10px;
        padding-right:10px;
        font-size:12px;
    }

    div.tabs a{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }

    /* cards/dashboard/progress*/
    .screen-selector-tab{
        font-size:12px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    div.perspectiveSelector span{
        font-size:12px;
    }

    /* modal screens*/
    div.modal-header h3{
        font-size:12px;
        margin-top:-13px !important;
    }

    /* hide empty cards checkbox*/
    .hide_empty_cards{
        font-size:12px;
        margin-left:2px;
        margin-right:2px;
    }

    /* choose target dialog */
    .show_tree, .stratTd, .stratTh, .stratMsg{
        font-size: 8px !important;
    }

    .stratTable{
        min-width:404px !important;
        max-width:404px !important;
        width:404px !important;
    }

    /* management jakoavain*/
    .adminwrench{
        font-size:8px;
        padding-left:8px;
        padding-right:8px;
    }

    .modal-scrollable{
        /*width:414px; !important;*/
        /*max-width: 414px; !important;*/
        z-index:9999999;/**/
    }

    /* modal screens*/
    .modal-title h3{
        font-size:10px;
    }

    .modal-footer{
        padding-top:4px !important;
        padding-bottom:4px !important;
    }

    abbr, var{
        font-size: 10px !important;
    }

    /* dashboard, progress*/
    #createscenarioimageBtn,
    #camera-padding,
    #open_new_window{
        display:none;
    }

    /*dashboard*/
    #chart_title{
        font-size:12px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:374px !important;
        width:374px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:414px;
    }

    #roadmap_table{
        width:414px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:20px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    /* in these very small screens we hide some functions not commonly used and if used, usually only used by the admins, who always work with PC's*/
    .saveView,
    .optionsMenu,
    .notificationBase,
    .usersettings,
    .adminwrench,
    .help_and_guide,
    .cardsListHeader,
    .btn-publish-card
    {
        display:none;
    }
}


/*375begins*/
@media only screen and (min-width: 361px) and  (max-width: 375px) {
    .splash_screen{
        display:block;
        width:100%;
        height:400px;
        background-image: url("/media/icons/personalisation.png");
        background-repeat: no-repeat;
        background-size: 375px auto;
    }
    .modal-scrollable {
        max-width:375px;
        width:375px;
    }

    body {
        max-width: 375px;
        min-width: 361px;
    }

    .splash{
        display:inherit;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    #edit_row_properties{
        padding-left:4px;
        padding-right:4px;
    }

    .hideNarrow{
        /* add this class to all elements you want to hide, when using a small resolution device. All it does, is hiding.*/
        display:none !important;
    }

    .img-status{
        height:12px !important;
        width:12px !important;
    }

    .edit-status{
        font-size:12px !important;
        height:20px !important;
    }

    .a_navi_main{
        padding-left:4px !important;
        padding-right:4px !important;
        font-size:12px;
    }

    .navbar-section.navbar-primary{
        padding-left:4px !important;
        padding-right:0px !important;
        min-width:375px !important;
        width:375px !important;
    }

    .navbar-section.navbar-secondary{
        padding-left:4px !important;
    }

    #userViewSpinner{
        display:none;
    }

    #mobile_logout {
        display:inline !important;
        width:10px;
        font-size:12px !important;
        padding-right: 8px;
    }

    /* if used in base.html */
    #mobile_logout2 {
        display:table-cell !important;
        width:10px;
        padding-left: 8px;
        padding-right: 8px;
    }

    #a_mobile_logout2{
        font-size:12px !important;
    }

    #mobile_power_off{
        float:right;
        position:relative;
        top:18px;
        font-size:14px; !important;
    }

    .unitsSelector{
        background-image:none;
    }

    .header-inner{
        padding-left:10px;
        padding-right:10px;
        padding-top:0px;
        padding-bottom:10px;
    }

    .screenSelectorSection.screenSelector{
        left:10px !important;
    }

    .toolbar.full{
        max-width:375px;
        width:100%;
    }

    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:240px !important;
        width: 240px !important;
        font-size:10px;
    }

    option{
        font-size:8px;
    }

    select{
        max-width:300px !important;
    }

    /* card basic info - data */
    .cardUnitName, .cardPerspectiveName, .cardPeriodName{
        font-size:12px !important;
    }

    /* card basic info - labels */
    .cardUnitLabel, .cardPerspectiveLabel, .cardPeriodLabel{
        font-size:12px !important;
    }

    .card-description-text{
        font-size:10px !important;
        max-width:384px !important;
        width:384px !important;
    }

    .card-description-text > div{
        font-size:10px !important;
        max-width:384px !important;
        width:384px !important;
    }

    .card-description{
        max-width:366px !important; /* 384 - 2x9 paddings/borders */
        width:366px !important;
    }

    .cardText.table.table-bordered.full{
        overflow-x: hidden;
    }

    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }

    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }

    .edit-card{
        font-size:10px;
    }

    /* row statuses on the card */
    .edit-status{
        max-height:30px !important;
        height:30px !important;
    }

    .table.table-bordered.cardData.full td{
        padding-left:4px;
        padding-right:4px;
    }

    .row-status-icon img{
        width:12px;
        height:12px;
    }

    .cell-status-icon{
        width:12px;
        height:12px;
    }

    /* header/footer button texts, when header/footer is empty */
    .cardDescriptionFooterInput {
        font-size: 10px;
    }

    /* metatitles (light-blue info boxes) */
    .cardUnsaved.cardMetaTitle{
        font-size:10px !important;
        font-weight: normal !important;
    }

    .cardLocalstore.cardMetaTitle{
        display:none; !important;
        font-size:8px !important;
        font-weight: normal !important;
    }

    /* miscellaneous rules with global impact */
    .chosen-container{
        font-size:12px !important;
    }

    .btn{
        font-size:10px;
        padding-left:8px;
        padding-right:8px;
    }

    .toolbar-space{
        min-width:1px;
        width:1px;
    }

    /* miscellaneous items with restricted impact */
    .filterBuilder{
        font-size:10px;
    }

    /* perspective selector */
    .perspectiveSelector{
        font-size:10px !important;
    }

    div.perspectiveSelector label{
        padding: 1px 1px 1px 1px !important;
    }

    div.perspectiveSelector input{
        margin: 1px 1px 1px 1px;
    }

    .perspectiveSelector .item{
        padding: 1px 1px 1px 1px !important;
    }

    /* report format selection*/
    .format_table{
        font-size:10px;
    }

    .report-template.hideNarrow, .report_extra_options.container.hideNarrow{
        display:none !important;
        /*
        font-size:10px;
        width:200px;
        max-width:200px;
        */
    }

    .report_format_icon{
        width:56px;
        height:56px;
    }

    .format_selector_text{
        font-size:10px;
    }

    .format_table{
        font-size:10px;

    }

    .format_selector{
        min-width:64px !important;
        height:64px !important;
        width:64px !important;
    }

    .report_format_icon{
        width:64px;
        height:64px;
    }

    .format_selector_text{
        font-size:10px;
    }

    .format_table{
        font-size:10px;
    }

    #templateSelect_chosen{
        width:120px;
        min-width:120px;
        max-width:120px;
    }

    #presetSelect_chosen{
        max-width:120px !important;
        min-width:120px !important;
        width:120px !important;
    }

    /*strategy-map, organization-map*/
    div.floatingStatusList{
        max-width:160px !important;
    }

    div.floatingStatusList .others{
        width:160px;
    }

    .almostHidden{
        width:20px !important;
    }

    .almostHidden i{
        padding-left:5px !important;
    }

    div.periodArea select{
        max-width:80px !important;
        min-width:80px !important;
        width:80px !important;
        font-size: 10px;
    }

    .periodArea .chosen-container{
        max-width:80px !important;
        min-width:80px !important;
        width:80px !important;
    }

    .statusGroupArea{
        min-width:160px !important;
        max-width:160px !important;
        width:160px !important;
    }

    .statusGroupArea .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }

    div.statusGroupArea select{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
        font-size: 10px;
    }

    #unitSelector, #targetSelector{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
        font-size: 10px;
    }

    #unitHolder .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }

    .statusListArea, #unitDiv, #addSubUnits{
        font-size:8px !important;
    }

    /* organization-map*/
    #targetHolder .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }

    #targetfloater, #targetDiv, #targetSeparator{
        font-size:8px !important;
    }

    /* locally stored data*/
    #localStoreInfoLabel, #btoggler{
        display:none;
    }

    /* application footer*/
    .footer{
        font-size:8px;
    }

    /* user view title in the middle of screen*/
    #userViewTitle{
        font-size:20px !important;
        margin-bottom:2px;
    }

    #planning_period_tabs{
        float:right !important;
    }

    .planningPeriodsSelector > .tabs {
        float:right !important;
    }

    #card_sorter{
        font-size:12px;
    }

    /* card snapshot view*/
    #snapshot_table_header{
        width:100% !important;
        max-width:360px !important;
    }

    #snapshot_table{
        width:100% !important;
        max-width:375px !important;
    }

    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }

    table.cardData th div {
        padding-left:2px;
        padding-right:2px;
    }

    /* filter cards*/
    .filterGroup > th {
        padding: 3px 5px 2px 2px;
        vertical-align: top;
    }

    .filterGroup th > span {
        margin-right: 20px;
    }

    .filterRows .chosen-container{
        max-width:60px !important;
        width:60px !important;
    }

    .filterRows td{
        padding-left:0px;
        padding-right:0px;
    }

    #filter_target_chosen,
    #filter_target{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_target_type_chosen,
    #filter_target_type{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_responsible_person_chosen,
    #filter_responsible_person{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_row_status_chosen,
    #filter_row_status{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_searchText{
        font-size:8px;
        width:60px !important;
    }

    div.token-list .token{
        font-size:8px;
    }

    .btn.btn-mini.add-filter{
        margin-right:0px;
    }

    div#card_header button{
        padding-left:10px;
        padding-right:10px;
        font-size:12px;
    }

    div.tabs a{
        font-size:12px;
        padding-left:8px;
        padding-right:8px;
    }

    /* cards/dashboard/progress*/
    .screen-selector-tab{
        font-size:12px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    div.perspectiveSelector span{
        font-size:12px;
    }

    /* modal screens*/
    div.modal-header h3{
        font-size:12px;
        margin-top:-13px !important;
    }

    /* hide empty cards checkbox*/
    .hide_empty_cards{
        font-size:12px;
        margin-left:2px;
        margin-right:2px;
    }

    /* choose target dialog */
    .show_tree, .stratTd, .stratTh, .stratMsg{
        font-size: 8px !important;
    }

    .stratTable{
        min-width:375px !important;
        max-width:375px !important;
        width:375px !important;
    }

    /* management jakoavain*/
    .adminwrench{
        font-size:8px;
        padding-left:8px;
        padding-right:8px;
    }

    .modal-scrollable{
        /*width:414px; !important;*/
        /*max-width: 414px; !important;*/
        z-index:9999999;/**/
    }

    /* modal screens*/
    .modal-title h3{
        font-size:10px;
    }

    .modal-footer{
        padding-top:4px !important;
        padding-bottom:4px !important;
    }

    abbr, var{
        font-size: 10px !important;
    }

    /* dashboard, progress*/
    #createscenarioimageBtn,
    #camera-padding,
    #open_new_window{
        display:none;
    }

    /*dashboard*/
    #chart_title{
        font-size:12px !important; /* #0097FC */
        height: auto !important;
        padding-top:0px !important;
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:374px !important;
        width:374px !important;
    }

    #chart_holder{
        top:110px !important;
    }

    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }

    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }

    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }

    table.statisticsPluginTable input{
        font-size: 12px;
        max-width:65px !important;
        width:65px !important;
        padding:2px;
    }

    table.statisticsPluginTable label{
        font-size: 10px;
        padding:2px;
    }

    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }

    #cb_toggle_percent_view_label{
        font-size:8px;
    }

    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px !important;
    }

    /* roadmap*/
    div.roadmap{
        width:375px;
    }

    #roadmap_table{
        width:375px;
    }

    .roadmap-title{
        font-size:12px;
    }

    .periodShowing{
        font-size:20px;
    }

    .swatch-list{
        font-size:14px;
    }

    .spaceTd{
        width:0px;
    }

    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }

    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
    }

    table.roadmap_table label{
        font-size: 11px;
        padding:2px;
    }

    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:100px !important;
        width:100px !important;
    }

    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }

    /* in these very small screens we hide some functions not commonly used and if used, usually only used by the admins, who always work with PC's*/
    .saveView,
    .optionsMenu,
    .notificationBase,
    .usersettings,
    .adminwrench,
    .help_and_guide,
    .cardsListHeader,
    .btn-publish-card
    {
        display:none;
    }
}


/*800begins*/
@media only screen and (max-width: 800px) {
    input .edit-width{
        width:60px;
        max-width:60px;
    }
    table.statisticsTable input{
        font-size: 8px;
        max-width:48px !important;
        width:48px !important;
        padding:2px;
    }
    table.statisticsTable label{
        font-size: 8px;
        padding:2px;
    }
    .col3, .col4, .col5{
        width:0px;
    }
    .statistics_div{
        font-size:10px;
    }
}


/*360begins*/
@media only screen and (min-width: 321px) and (max-width: 360px) {
    .splash_screen{
        /* how should we do this?
            1) can be personalized by the client, or should it be our branding?
            2) at least this should be sized, as we have different resolutions
            we could also use a spinner here to show the users there's something happening
        */
        display:block;
        width:100%;
        height:400px;
        background-image: url("/media/icons/personalisation.png");
        background-repeat: no-repeat;
        background-size: 360px auto;
    }
    .modal-scrollable {
        max-width:360px;
        width:360px;
    }

    .splash{
        display:inherit;
    }
    div.toolbar-item.app{
        display:none;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    #edit_row_properties{
        padding-left:2px;
        padding-right:2px;
    }

    .hideNarrow{
        /* add this class to all elements you want to hide, when using a small resolution device. All it does, is hiding.*/
        display:none !important;
    }
    .cardData{
        max-width:330px !important;
        width:330px !important;
        font-size:8px !important;
    }
    .cardsList.container{
        padding-top:0px;
        padding-bottom:0px;
        padding-left:10px;
        padding-right: 10px;/*jl*/
    }
    .cardText.table.table-bordered.full{
        max-width: 330px !important;
        width: 330px !important;
    }
    .card-description-text.description_collapsed{
        font-size:10px;
    }
    /* statuspopup*/
    .menu-item.edit-status{
        padding-top:2px;
        padding-bottom:2px;
    }
    .img-status{
        height:16px; !important;
        width:16px; !important;
    }
    #edit_row_properties .control-label{
        font-size:10px;
        padding-top:2px;
    }
    /* properties */
    #row-name, #row-planned-start, #row-planned-end, #row-actual-end{
        font-size:10px;
        padding-top:2px;
        padding-bpttom: 2px;
    }
    /* snapshot */
    #snapshot_table{
        font-size:8px;
        max-width:360px;
    }
    #snapshot_table td{
        padding-left:2px;
        padding-right:2px;
    }
    #snapshot_progress_buttons .btn-print{
        display:none;
    }
    #toggle_comparison{
        padding-left:2px;
    }
    #print_options{
        display:none;
    }
    /* /end snapshots*/
    .edit-status{
        font-size:10px; !important;
        height:20px; !important;
    }
    .responsive{
        /* USE THIS FOR TESTING PURPOSES! color:yellow;*/
        /*color:red;*/
    }
    /* statistics*/
    table.statisticsTable input{
        font-size: 8px;
        max-width:48px !important;
        width:48px !important;
        padding:2px;
    }
    table.statisticsTable label{
        font-size: 8px;
        padding:2px;
    }
    .col3, .col4, .col5{
        width:0px;
    }
    .statistics_div{
        font-size:8px;
    }
    /* roadmap*/
    div.roadmap{
        width:360px;
    }
    #roadmap_table{
        width:360px;
    }
    .roadmap-title{
        font-size:10px;
    }
    .periodShowing{
        font-size:12px;
    }
    .swatch-list{
        font-size:10px;
    }
    .spaceTd{
        width:0px;
    }
    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }
    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
        /*
        border-style: solid;
        border-color: red;
            */
    }
    table.roadmap_table label{
        font-size: 8px;
        padding:2px;
    }
    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:120px !important;
        width:120px !important;
    }
    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }
    /* normal navigation */
    .a_navi_main{
        padding-left:4px !important;
        padding-right:4px !important;
        font-size:10px;
    }
    .navbar-section.navbar-primary{
        padding-left:4px !important;
        padding-right:0px !important;
        min-width:360px !important;
        width:360px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:4px !important;
    }

    #userViewSpinner{
        display:none;
    }
    #mobile_logout {
        display:inline !important;
        width:10px;
        font-size:12px !important;
        padding-right: 8px;
    }

    .ui-datepicker{
        /*font-size: 10px !important;*/
    }

    .menu-item.select-children,
    .menu-item.deselect-children,
    .menu-item.select-immediate-children,
    .menu-item.deselect-all{
        padding-top:2px;
        padding-bottom:2px;
        font-size:10px;
    }
    /* if used in App.html*/
    /*
    #a_mobile_logout{
        padding-left: 8px;
        padding-right: 8px;
        font-size:12px !important;
    }
    */
    /* if used in base.html */
    #mobile_logout2 {
        display:table-cell !important;
        width:10px;
        padding-left: 8px;
        padding-right: 8px;
    }
    #a_mobile_logout2{
        font-size:12px !important;
    }
    #mobile_power_off{
        float:right;
        position:relative;
        top:18px;
        font-size:14px; !important;
    }
    .unitsSelector{
        background-image:none;
    }
    .header-inner{
        padding-left:10px;
        padding-right:10px;
        padding-top:0px;
        padding-bottom:10px;
    }
    .screenSelectorSection.screenSelector{
        left:10px !important;
    }
    .toolbar.full{
        max-width:360px;
        width:100%;
    }
    #user-view-selector{
        max-width:245px !important;
        width:245px !important;
        font-size:8px;
    }
    #user_view_selector_select{
        max-width:245px !important;
        width:245px !important;
        font-size:8px;
    }
    #user_view_selector_select_template{
        max-width:245px !important;
        width:245px !important;
        font-size:8px;
    }
    option{
        font-size:8px;
    }
    select{
        max-width:300px !important;
    }
    #qbs_us div{
        /*
        zoom: 0.8;
        -moz-transform: scale(0.8);
        */
    }
    .queryBuilderSection.unitsSelector{
        /*overflow: auto !important;*/
    }
    /* card basic info - data */
    .cardUnitName, .cardPerspectiveName, .cardPeriodName{
        font-size:12px !important;
    }
    /* card basic info - labels */
    .cardUnitLabel, .cardPerspectiveLabel, .cardPeriodLabel{
        font-size:12px !important;
    }
    .card-description-text{
        font-size:10px !important;
        max-width:330px !important;
        width:330px !important;
    }
    .card-description-text > div{
        font-size:10px !important;
        max-width:330px !important;
        width:330px !important;
    }
    .card-description, .card-descrfooter{
        /*max-width:312px !important;*/ /* 330 - 2x9 paddings/borders */
        /*width:312px !important;*/
    }
    .cardText.table.table-bordered.full{
        overflow-x: hidden;
    }
    .edit-card{
        font-size:10px;
    }
    /* row statuses on the card */
    .edit-status{
        max-height:30px; !important;
        height:30px; !important;
    }
    .table.table-bordered.cardData.full td{
        padding-left:4px;
        padding-right:4px;
    }
    .row-status-icon img{
        width:12px;
        height:12px;
    }
    .cell-status-icon{
        width:12px;
        height:12px;
    }

    /* report format selection*/
    /*.sidebar.report-format{
        font-size:10px;
    }*/
    .report-template.hideNarrow, .report_extra_options.container.hideNarrow{
        display:none !important;
        /*
        font-size:10px;
        width:200px;
        max-width:200px;
        */
    }
    .report_format_icon{
        width:56px;
        height:56px;
    }
    .format_selector_text{
        font-size:10px;
    }
    .format_table{
        font-size:10px;
    }
    .format_selector{
        min-width:58px !important;
        height:58px !important;
        width:58px !important;
    }
    #presetSelect_chosen{
        max-width:120px !important;
        min-width:120px !important;
        width:120px !important;
    }
    #templateSelect_chosen{
        width:120px;
        min-width:120px;
        max-width:120px;
    }

    /* header/footer button texts, when header/footer is empty */
    .cardDescriptionFooterInput {
        font-size: 10px;
    }
    /* metatitles (light-blue info boxes) */
    .cardUnsaved.cardMetaTitle{
        font-size:10px !important;
        font-weight: normal; !important;
    }
    .cardLocalstore.cardMetaTitle{
        display:none; !important;
        font-size:8px !important;
        font-weight: normal; !important;
    }
    /* miscellaneous rules with global impact */
    .chosen-container{
        font-size:10px;
    }
    .btn{
        font-size:10px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:1px;
        width:1px;
    }
    /* miscellaneous items with restricted impact */
    .filterBuilder{
        font-size:8px;
    }
    /* perspective selector */
    .perspectiveSelector{
        font-size:10px !important;
    }
    div.perspectiveSelector label{
        padding: 1px 1px 1px 1px !important;
    }
    div.perspectiveSelector input{
        margin: 1px 1px 1px 1px;
    }
    .perspectiveSelector .item{
        padding: 1px 1px 1px 1px !important;
    }
    /*strategy-map, organization-map*/
    div.floatingStatusList{
        max-width:160px !important;
    }
    div.floatingStatusList .others{
        width:160px;
    }
    .almostHidden{
        width:20px !important;
    }
    .almostHidden i{
        padding-left:5px !important;
    }
    div.periodArea select{
        max-width:80px !important;
        min-width:80px !important;
        width:80px !important;
        font-size: 10px;
    }
    .periodArea .chosen-container{
        max-width:80px !important;
        min-width:80px !important;
        width:80px !important;
    }
    .statusGroupArea{
        min-width:160px !important;
        max-width:160px !important;
        width:160px !important;
    }
    .statusGroupArea .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }
    div.statusGroupArea select{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
        font-size: 10px;
    }
    #unitSelector, #targetSelector{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
        font-size: 10px;
    }
    .targetSelectorModal{
        max-width:330px;
        min-width:330px;
        width:330px;
        font-size:10px;
        padding-top:6px !important;
        padding-bottom:6px !important;;
    }
    /*
    div.unitHolder select{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
        font-size: 10px;
    }*/
    #unitHolder .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }
    .statusListArea, #unitDiv, #addSubUnits{
        font-size:8px !important;
    }
    /* organization-map*/
    #targetHolder .chosen-container{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
    }
    #targetfloater, #targetDiv, #targetSeparator{
        font-size:8px !important;
    }
    /* locally stored data*/
    #localStoreInfoLabel, #btoggler{
        display:none;
    }
    /* application footer*/
    .footer{
        font-size:8px;
    }
    /* user view title in the middle of screen*/
    #userViewTitle{
        font-size:20px !important;
        margin-bottom:2px;
    }
    #planning_period_tabs{
        float:right; !important;
    }
    .planningPeriodsSelector > .tabs {
        float:right; !important;
    }
    #card_sorter{
        font-size:10px;
    }
    /* card snapshot view*/
    #snapshot_table_header{
        width:100% !important;
        max-width:360px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:360px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    table.cardData th div {
        padding-left:2px;
        padding-right:2px;
    }
    .properties.row-status-icon img{
       /* width:100%;*/
    }
    /*
    .cell-status-icon{
        width:12px !important;
        height:12px;
    }*/

    /* filter cards*/
    .filterGroup > th {
        padding: 3px 5px 2px 2px;
        vertical-align: top;
    }
    .filterGroup th > span {
        margin-right: 20px;
    }
    .filterRows .chosen-container{
        max-width:60px !important;
        width:60px !important;
    }
    .filterRows td{
        padding-left:0px;
        padding-right:0px;
    }

    #filter_target_chosen,
    #filter_target{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_target_type_chosen,
    #filter_target_type{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_responsible_person_chosen,
    #filter_responsible_person{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_row_status_chosen,
    #filter_row_status{
        max-width:160px !important;
        width:160px !important;
    }

    #filter_searchText{
        font-size:8px;
        width:60px; !important;
    }
    div.token-list .token{
        font-size:8px;
    }
    .btn.btn-mini.add-filter{
        margin-right:0px;
    }

    div#card_header button{
        padding-left:10px;
        padding-right:10px;
        font-size:12px;
    }
    div.tabs a{
        font-size:10px;
        padding-left:8px;
        padding-right:8px;
    }
    /* cards/dashboard/progress*/
    .screen-selector-tab{
        font-size:12px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }
    div.perspectiveSelector span{
        font-size:10px;
    }
    /* modal screens*/
    div.modal-header h3{
        font-size:10px;
        margin-top:-13px; !important;
    }
    div.columnInfoContainer .tabs{
        font-size:10px;
        height:20px !important;
    }
    div.col.col.buttonContainer{
        height:24px !important;
    }
    .table.table-bordered.full.cardHistory{
        font-size:10px;
    }
    /*
    #column-info-tabs{
        max-height:20px !important;
        height:20px !important;
    }
    #column-info-tabs a{
        padding-bottom:3px !important;
    }*/
    #btn_close, #btn_apply{
        padding-top:2px !important;
        padding-bottom:2px !important;
    }
    #edit-cell-lock, .btn.btn-inherit{
        width:20px;
        min-width:20px;
        padding-top:2px !important;
        padding-bottom:2px !important;
    }
    /* hide empty cards checkbox*/
    .hide_empty_cards{
        font-size:10px;
        margin-left:2px;
        margin-right:2px;
    }
    /* choose target dialog */
    .show_tree, .stratTd, .stratTh, .stratMsg{
        font-size: 8px; !important;
    }
    .stratTable, #strategy-tree-container, #tgtselector, #edit-row-target{
        min-width:330px; !important;
        max-width:330px; !important;
        width:330px; !important;
    }
    /* management jakoavain*/
    .adminwrench{
        font-size:8px;
        padding-left:8px;
        padding-right:8px;
    }
    /*
    .modal-scrollable{
        width:360px; !important;
        max-width: 360px; !important;
        z-index:9999999;
    }*/
    /* modal screens*/
    .modal-title h3{
        font-size:10px;
    }
    .modal-footer{
        padding-top:4px; !important;
        padding-bottom:4px; !important;
    }

    abbr, var{
        font-size: 10px; !important;
    }

    /* dashboard, progress*/
    #createscenarioimageBtn,
    #camera-padding,
    #open_new_window{
        display:none;
    }
    /*dashboard*/
    #chart_title{
        font-size:8px; !important; /* #0097FC */
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:320px! important;
        width:320px !important;
    }

    #chart_title{
        padding-top:0px !important;
    }
    #chart_holder{
        top:80px !important;
    }
    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }
    #chartCubeTargetName{
        left: -120px !important;
        max-width: 330px !important;
    }
    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }
    /* progress screen */
    table.statisticsPluginTable{
        /*color:red;*/
    }
    table.statisticsPluginTable input{
        font-size: 8px;
        max-width:48px !important;
        width:48px !important;
        padding:2px;
    }
    table.statisticsPluginTable label{
        font-size: 8px;
        padding:2px;
    }
    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }
    #cb_toggle_percent_view_label{
        font-size:8px;
    }
    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px; !important;
    }
    /* zen-desk */
    /*
    .zEWidget-launcher{
        position: absolute;
        bottom:10px;
        right:10px;
        max-width:40px;
    }*/
    /*
    #Embed{
        position: absolute;
        bottom:10px;
        right:10px;
        max-width:40px;
    }
    */

    /* in these very small screens we hide some functions not commonly used and if used, usually only used by the admins, who always work with PC's*/
    .saveView,
    .optionsMenu,
    .notificationBase,
    .usersettings,
    .adminwrench,
    .help_and_guide,
    .cardsListHeader,
    .btn-publish-card
    {
        display:none;
    }
}


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

    .splash_screen{
        /* how should we do this?
            1) can be personalized by the client, or should it be our branding?
            2) at least this should be sized, as we have different resolutions
            we could also use a spinner here to show the users there's something happening
        */
        display:block;
        width:100%;
        height:400px;
        background-image: url("/media/icons/personalisation.png");
        background-repeat: no-repeat;
        background-size: 320px auto;
    }

    body {
        max-width: 320px;
        min-width: 320px;
    }

    .splash{
        display:inherit;
    }

    #takeReportToolbar, #printViewBtn {
        width:70px;
        position: absolute;
        display:block;
        right: 2px;
        top:27px;
    }

    .hideNarrow{
        /* add this class to all elements you want to hide, when using a small resolution device. All it does, is hiding.*/
        display:none !important;
    }
    .cardData{
        max-width:290px !important;
        width:290px !important;
        font-size:8px !important;
    }
    .cardsList.container{
        padding-top:0px;
        padding-bottom:0px;
        padding-left:10px;
        padding-right: 10px;/*jl*/
    }
    .cardText.table.table-bordered.full{
        max-width: 290px !important;
        width: 290px !important;
    }
    #floating_header{
        /*margin-left:10px;*/
    }
    .img-status{
        height:14px; !important;
        width:14px; !important;
    }
    .edit-status{
        font-size:8px; !important;
        height:20px; !important;
    }
    /*
    div.card-description-text.description_collapsed div{
        overflow: hidden;
    }*/
    .responsive{
        /* USE THIS FOR TESTING PURPOSES! color:yellow;*/
        /*color:red;*/
    }
    .a_navi_main{
        padding-left:4px !important;
        padding-right:4px !important;
        font-size:0.7em;
    }
    .navbar-section.navbar-primary{
        padding-left:4px !important;
        padding-right:0px !important;
        min-width:320px !important;
        width:320px !important;
    }
    .navbar-section.navbar-secondary{
        padding-left:4px !important;
    }
    small, .small{
        font-size:0.6em;
    }
    .commentViewBtn, .sendCommentBtn{
        font-size:10px;
    }
    #userViewSpinner{
        display:none;
    }
    #mobile_logout {
        display:inline !important;
        width:10px;
        font-size:12px !important;
        padding-right: 8px;
    }
    /* if used in App.html*/
    /*
    #a_mobile_logout{
        padding-left: 8px;
        padding-right: 8px;
        font-size:12px !important;
    }
    */
    /* if used in base.html */
    #mobile_logout2 {
        display:table-cell !important;
        width:10px;
        padding-left: 8px;
        padding-right: 8px;
    }
    #a_mobile_logout2{
        font-size:12px !important;
    }
    #mobile_power_off{
        float:right;
        position:relative;
        top:18px;
        font-size:14px; !important;
    }
    .unitsSelector{
        background-image:none;
    }

    .header-inner{   /* kissa*/
        padding-left:10px;
        padding-right:10px;
        padding-top:0px;
        padding-bottom:10px;
    }
    .screenSelectorSection.screenSelector{
        left:10px !important;
    }
    .toolbar.full{
        max-width:320px;
        width:100%;
    }
    #user-view-selector,
    #userViewSelectorToolbar,
    #user_view_selector_select_template,
    #user_view_selector_select_template_chosen,
    .userViewPresetSelector{
        max-width:220px !important;
        width: 220px !important;
        font-size:10px;
    }
    option{
        font-size:8px;
    }
    select{
        max-width:300px !important;
    }
    #qbs_us div{
        /*
        zoom: 0.8;
        -moz-transform: scale(0.8);
        */
    }
    .queryBuilderSection.unitsSelector{
        /*overflow: auto !important;*/
    }
    /* card basic info - data */
    .cardUnitName, .cardPerspectiveName, .cardPeriodName{
        font-size:10px !important;
    }
    /* card basic info - labels */
    .cardUnitLabel, .cardPerspectiveLabel, .cardPeriodLabel{
        font-size:10px !important;
    }
    .card-description-text{
        font-size:9px !important;
        max-width:290px !important;
        width:290px !important;
    }
    .card-description-text > div{
        font-size:9px !important;
        max-width:290px !important;
        width:290px !important;
    }
    .card-description{
        max-width:272px !important; /* 330 - 2x9 paddings/borders */
        width:272px !important;
    }
    .cardText.table.table-bordered.full{
        overflow-x: hidden;
    }
    .card-description-text.descr0iption_collapsed{
        max-width:290px !important;
    }
    .card-description-text.descr0iption_collapsed div{
        max-width:290px !important;
    }
    .edit-card{
        font-size:9px;
    }
    /* row statuses on the card */
    .edit-status{
        max-height:30px; !important;
        height:30px; !important;
    }
    .table.table-bordered.cardData.full td{
        padding-left:4px;
        padding-right:4px;
    }
    .row-status-icon img{
        width:10px;
        height:10px;
    }
    /* header/footer button texts, when header/footer is empty */
    .cardDescriptionFooterInput {
        font-size: 9px;
    }
    /* metatitles (light-blue info boxes) */
    .cardUnsaved.cardMetaTitle{
        font-size:9px !important;
        font-weight: normal; !important;
    }
    .cardLocalstore.cardMetaTitle{
        display:none; !important;
        font-size:8px !important;
        font-weight: normal; !important;
    }
    /* miscellaneous rules with global impact */
    .chosen-container{
        font-size:10px;
    }
    .btn{
        font-size:8px;
        padding-left:8px;
        padding-right:8px;
    }
    .toolbar-space{
        min-width:1px;
        width:1px;
    }
    /* miscellaneous items with restricted impact */
    .filterBuilder{
        font-size:6px;
    }
    /* perspective selector */
    .perspectiveSelector{
        font-size:9px !important;
    }
    div.perspectiveSelector label{
        padding: 1px 1px 1px 1px !important;
    }
    div.perspectiveSelector input{
        margin: 1px 1px 1px 1px;
    }
    .perspectiveSelector .item{
        padding: 1px 1px 1px 1px !important;
    }

    .report_format_icon{
        width:56px;
        height:56px;
    }

    /* report format selection*/
    .format_table{
        font-size:9px;
    }
    .format_selector{
        height:30px !important;
        width:30px !important;
    }
    #presetSelect_chosen{
        max-width:100px !important;
        min-width:100px !important;
        width:100px !important;
    }
    #templateSelect_chosen{
        width:100px;
        min-width:100px;
        max-width:100px;
    }
    /*strategy-map, organization-map*/
    div.floatingStatusList{
        max-width:120px !important;
    }
    div.floatingStatusList .others{
        width:120px;
    }
    .almostHidden{
        width:20px !important;
    }
    .almostHidden i{
        padding-left:5px !important;
    }
    div.periodArea select{
        max-width:65px !important;
        min-width:65px !important;
        width:65px !important;
        font-size: 9px;
    }
    .periodArea .chosen-container{
        max-width:65px !important;
        min-width:65px !important;
        width:65px !important;
    }
    .statusGroupArea{
        min-width:120px !important;
        max-width:120px !important;
        width:120px !important;
    }
    .statusGroupArea .chosen-container{
        max-width:100px !important;
        min-width:100px !important;
        width:100px !important;
    }
    div.statusGroupArea select{
        max-width:100px !important;
        min-width:100px !important;
        width:100px !important;
        font-size: 9px;
    }
    #unitSelector, #targetSelector{
        max-width:100px !important;
        min-width:100px !important;
        width:140px !important;
        font-size: 9px;
    }
    /*
    div.unitHolder select{
        max-width:140px !important;
        min-width:140px !important;
        width:140px !important;
        font-size: 10px;
    }*/
    #unitHolder .chosen-container{
        max-width:100px !important;
        min-width:100px !important;
        width:100px !important;
    }
    .statusListArea, #unitDiv, #addSubUnits{
        font-size:8px !important;
    }
    /* organization-map*/
    #targetHolder .chosen-container{
        max-width:100px !important;
        min-width:100px !important;
        width:100px !important;
    }
    #targetfloater, #targetDiv, #targetSeparator{
        font-size:8px !important;
        word-wrap:break-word;
    }
    #targetDiv{
        max-width:100px !important;
        margin-left:0px !important;
    }
    /* locally stored data*/
    #localStoreInfoLabel, #btoggler{
        display:none;
    }
    /* application footer*/
    .footer{
        font-size:8px;
    }
    /* user view title in the middle of screen*/
    #userViewTitle{
        font-size:16px !important;
        margin-bottom:2px;
    }
    #planning_period_tabs{
        float:right; !important;
    }
    .planningPeriodsSelector > .tabs {
        float:right; !important;
    }
    #card_sorter{
        font-size:9px;
    }
    /* card snapshot view*/
    #snapshot_table_header{
        width:100% !important;
        max-width:320px !important;
    }
    #snapshot_table{
        width:100% !important;
        max-width:320px !important;
    }
    table.snapshot_table th {
        /*background-color:#888;*/
        padding-left:2px;
    }
    table.cardData th div {
        padding-left:2px;
        padding-right:2px;
    }
    /* filter cards*/
    .filterGroup > th {
        padding: 3px 5px 2px 2px;
        vertical-align: top;
    }
    .filterGroup th > span {
        margin-right: 20px;
    }
    .filterRows .chosen-container{
        max-width:60px !important;
        width:60px !important;
    }
    .filterRows td{
        padding-left:0px;
        padding-right:0px;
    }

    #filter_target_chosen,
    #filter_target{
        max-width:140px !important;
        width:140px !important;
    }

    #filter_target_type_chosen,
    #filter_target_type{
        max-width:140px !important;
        width:140px !important;
    }

    #filter_responsible_person_chosen,
    #filter_responsible_person{
        max-width:140px !important;
        width:140px !important;
    }

    #filter_row_status_chosen,
    #filter_row_status{
        max-width:140px !important;
        width:140px !important;
    }

    #filter_searchText{
        font-size:8px;
        width:60px; !important;
    }
    div.token-list .token{
        font-size:8px;
    }
    .btn.btn-mini.add-filter{
        margin-right:0px;
    }

    div#card_header button{
        padding-left:10px;
        padding-right:10px;
        font-size:12px;
    }
    div.tabs a{
        font-size:10px;
        padding-left:8px;
        padding-right:8px;
    }
    /* cards/dashboard/progress*/
    .screen-selector-tab{
        font-size:12px !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }
    div.perspectiveSelector span{
        font-size:10px;
    }
    /* modal screens*/
    div.modal-header h3{
        font-size:10px;
        margin-top:-13px; !important;
    }
    div.columnInfoContainer .tabs{
        font-size:10px;
        height:20px !important;
    }
    div.col.col.buttonContainer{
        height:24px !important;
    }
    /*
    #column-info-tabs{
        max-height:20px !important;
        height:20px !important;
    }
    #column-info-tabs a{
        padding-bottom:3px !important;
    }*/
    #btn_close, #btn_apply{
        padding-top:2px !important;
        padding-bottom:2px !important;
    }
    #edit-cell-lock, .btn.btn-inherit{
        width:20px;
        min-width:20px;
        padding-top:2px !important;
        padding-bottom:2px !important;
    }
    /* hide empty cards checkbox*/
    .hide_empty_cards{
        font-size:10px;
        margin-left:2px;
        margin-right:2px;
    }
    /* choose target dialog */
    .show_tree, .stratTd, .stratTh, .stratMsg{
        font-size: 8px; !important;
    }
    .stratTable{
        min-width:310px; !important;
        max-width:310px; !important;
        width:310px; !important;
    }
    /* management jakoavain*/
    .adminwrench{
        font-size:8px;
        padding-left:8px;
        padding-right:8px;
    }
    .modal-scrollable{
        width:320px; !important;
        max-width: 320px; !important;
        z-index:9999999;
    }
    /* modal screens*/
    .modal-title h3{
        font-size:10px;
    }
    .modal-footer{
        padding-top:4px; !important;
        padding-bottom:4px; !important;
    }
    abbr, var{
        font-size: 10px; !important;
    }

    /* dashboard, progress*/
    #createscenarioimageBtn,
    #camera-padding,
    #open_new_window{
        display:none;
    }
    /*dashboard*/
    #chart_title{
        font-size:8px; !important; /* #0097FC */
    }

    /* dashboard screen */
    #chart_drill_down,
    #chart_drill_up,
    #toggle_percents,
    #chart_drill_none,
    #chart_roll_cube{
        padding-top:1px;
        padding-bottom:1px;
        min-width:30px !important;
        max-width:30px !important;
        height:20px;
    }

    #chartselector2,
    #perspectiveSelector_chosen{
        max-width:280px! important;
        width:280px !important;
    }

    #chart_title{
        padding-top:0px !important;
    }
    #chart_holder{
        top:95px !important;
    }
    #cube_rolling_detail_selector{
        float: none;
        font-size:8px;
    }
    #chartCubeTargetName{
        left: -120px !important;
        max-width: 290px !important;
    }
    #hide_cube_details{
        padding-left:6px;
        padding-right:6px;
    }
    /* progress screen */
    table.statisticsPluginTable{
        /*color:red;*/
    }
    table.statisticsPluginTable input{
        font-size: 8px;
        max-width:48px !important;
        width:48px !important;
        padding:2px;
    }
    table.statisticsPluginTable label{
        font-size: 8px;
        padding:2px;
    }
    #cb_toggle_percent_view{
        font-size:8px;
        margin-left:0px;
        margin-right:0px;
        width: 20px !important;
    }
    #cb_toggle_percent_view_label{
        font-size:8px;
    }
    .LinkedExcelTable, .LinkedExcelChart{
        font-size:6px; !important;
    }

    /* statistics*/
    table.statisticsTable input{
        font-size: 8px;
        max-width:48px !important;
        width:48px !important;
        padding:2px;
    }
    table.statisticsTable label{
        font-size: 8px;
        padding:2px;
    }
    .col3, .col4, .col5{
        width:0px;
    }
    .statistics_div{
        font-size:8px;
    }
    /* roadmap*/
    div.roadmap{
        width:320px;
    }
    #roadmap_table{
        width:320px !important;
    }
    .roadmap-title{
        font-size:10px;
    }
    .periodShowing{
        font-size:12px;
    }
    .swatch-list{
        font-size:10px;
    }
    .spaceTd{
        width:0px;
    }
    .roadmap_table_row{
        max-width:320px;
        width:320px !important;
    }
    #dropzone{
        max-width:320px;
        width:320px !important;
    }
    .roadmap_table_cell{
        padding-right:6px !important;
        max-width:180px;
        width:180px !important;
        /*
        border-style: solid;
        border-color: red;
            */
    }
    table.roadmap_table label{
        font-size: 8px;
        padding:2px;
    }
    .groupsArea, .periodArea, .unitArea, .typeArea{
        max-width:85px !important;
        width:85px !important;
    }
    .roadmapdiv{
        max-width:80px !important;
        width:80px !important;
        display:block !important;
        float:none !important;
    }
    /* zen-desk */
    /*
    .zEWidget-launcher{
        position: absolute;
        bottom:10px;
        right:10px;
        max-width:40px;
    }*/
    /*
    #Embed{
        position: absolute;
        bottom:10px;
        right:10px;
        max-width:40px;
    }
    */
    .table.table-bordered.full.cardHistory{
        font-size:9px;
    }

    /* in these very small screens we hide some functions not commonly used and if used, usually only used by the admins, who always work with PC's*/
    .saveView,
    .optionsMenu,
    .notificationBase,
    .usersettings,
    .adminwrench,
    .help_and_guide,
    .cardsListHeader,
    .btn-publish-card
    {
        display:none;
    }

    #chartselector{
        margin-bottom:4px;
        font-size:0.7em;
    }
    #camera-padding {
        display:none;
    }
    #temp-padding{
        display:none;
    }
    #toggle_percents{
        height:20px;
        font-size:0.7em;
    }
    #chart_drill_none{
        height:20px;
        font-size:0.7em;
        padding-top:0px;
    }
    #chart_drill_up{
        height:20px;
        font-size:0.7em;
        padding-top:0px;
        padding-rigth:4px!important;
        min-width:35px!important;
        width:35px!important;
    }
    #chart_drill_down{
        height:20px;
        font-size:0.7em;
        padding-top:0px;
        padding-right:4px!important;
        min-width:35px!important;
        width:35px!important;
    }
    #chart_roll_cube{
        height:20px;
        font-size:0.7em;
        padding-top:0px;
    }
    #hide_cube_details{
        font-size:0.7em;
    }
    #createscenarioimageBtn{
        padding-top:0px;
        height:20px;
        font-size:0.7em;
    }
    .icon-ban-circle{
        margin-top:-19px!important;
    }
    #ic_roll_cube_direction{
        margin-top:-19px!important;
    }
    #perspectiveSelector_chosen{
        font-size:0.7em;
    }
    #chart_title{
        margin-top:14px;
        font-size:0.6em;
        height:18px;
        padding-top:2px!important;
    }
    #status_explanations{
        height:20px!important;
        margin-top:0px!important;
    }
    #_tooltip{
        font-size:0.4em;
    }
    .cube_tip_item{
        font-size:0.6em;
    }

}


@media only screen and (max-width: 667px) {
    .saveView,
    .optionsMenu,
    .notificationBase,
    .usersettings,
    .adminwrench,
    .help_and_guide,
    .cardsListHeader,
    .btn-publish-card {
        display: none;
    }
}


@media only screen and (min-width: 360px) {
    #chartselector {
        margin-bottom: 20px;
        font-size: 0.7em;
    }
    #chartselector2 {
        margin-bottom: 4px;
    }
    #camera-padding {
        display: none;
    }

    #temp-padding {
        display: none;
    }

    #toggle_percents {
        height: 20px;
        font-size: 0.7em;
    }

    #chart_drill_none {
        height: 20px;
        font-size: 0.7em;
        padding-top: 0px;
    }

    #chart_drill_up {
        height: 20px;
        font-size: 0.7em;
        padding-top: 0px;
        padding-right: 4px !important;
        min-width: 35px !important;
        width: 35px !important;
    }

    #chart_drill_down {
        height: 20px;
        font-size: 0.7em;
        padding-top: 0px;
        padding-right: 4px !important;
        min-width: 35px !important;
        width: 35px !important;
    }

    #chart_roll_cube {
        height: 20px;
        font-size: 0.7em;
        padding-top: 0px;
    }

    #hide_cube_details {
        font-size: 0.7em;
    }

    #createscenarioimageBtn {
        padding-top: 0px;
        height: 20px;
        font-size: 0.7em;
    }

    .icon-ban-circle {
        margin-top: -19px !important;
    }

    #ic_roll_cube_direction {
        margin-top: -19px !important;
    }

    #perspectiveSelector_chosen {
        font-size: 0.7em;
    }

    #chart_title {
        margin-top: 0px;
        font-size: 0.7em;
        height: 18px;
        padding-top: 2px !important;
    }

    #status_explanations {
        height: 20px !important;
        margin-top: 0px !important;
    }

    #_tooltip {
        font-size: 0.4em;
    }

    .cube_tip_item {
        font-size: 0.7em;
    }

}


@media only screen and (min-width: 400px) {
    #chartselector {
        margin-bottom: 20px;
        font-size: 0.8em;
    }
    #chartselector2 {
        margin-bottom: 4px;
    }
    #camera-padding {
        display: none;
    }
    #temp-padding-percent{
        display:table!important;
        height:1px;
        width:80px;
        padding-left:20px;
        padding-right:20px;
    }
    #toggle_percents {
        height: 20px;
        font-size: 0.8em;
    }
    #chart_drill_none {
        height: 20px;
        font-size: 0.8em;
        padding-top: 0px;
    }
    #chart_drill_up {
        height: 20px;
        font-size: 0.8em;
        padding-top: 0px;
        padding-right: 4px !important;
        min-width: 35px !important;
        width: 35px !important;
    }
    #chart_drill_down {
        height: 20px;
        font-size: 0.8em;
        padding-top: 0px;
        padding-right: 4px !important;
        min-width: 35px !important;
        width: 35px !important;
    }
    #chart_roll_cube {
        height: 20px;
        font-size: 0.8em;
        padding-top: 0px;
    }
    #hide_cube_details {
        font-size: 0.8em;
    }
    #createscenarioimageBtn {
        padding-top: 0px;
        height: 20px;
        font-size: 0.8em;
    }
    .icon-ban-circle {
        margin-top: -19px !important;
    }
    #ic_roll_cube_direction {
        margin-top: -19px !important;
    }
    #perspectiveSelector_chosen {
        font-size: 0.8em;
    }
    #chart_title {
        margin-top: 0px;
        font-size: 0.8em;
        height: 18px;
        padding-top: 2px !important;
    }
    #status_explanations {
        height: 20px !important;
        margin-top: 0px !important;
    }
    #_tooltip {
        font-size: 0.5em;
    }
    .cube_tip_item {
        font-size: 0.8em;
    }

}


@media only screen and (min-width: 480px) {
    #temp-padding-percent{
        display:table!important;
        height:1px;
        width:150px;
        padding-left:70px;
        padding-right:70px;
    }
    #_tooltip {
        font-size: 0.5em;
    }
    .cube_tip_item {
        font-size: 0.8em;
    }
}


@media only screen and (min-width: 540px) {
    #temp-padding-percent{
        display:table!important;
        height:1px;
        width:210px;
        padding-left:100px;
        padding-right:100px;
    }
    #_tooltip {
        font-size: 0.6em;
    }
    .cube_tip_item {
        font-size: 0.9em;
    }
}


@media only screen and (min-width: 620px) {
    #temp-padding-percent{
        display:table!important;
        height:1px;
        width:210px;
        padding-left:100px;
        padding-right:100px;
    }
    #_tooltip {
        font-size: 0.7em;
    }
    .cube_tip_item {
        font-size: 0.8em;
    }
}


@media only screen and (min-width: 768px) {
    #temp-padding-percent{
        display:none;
    }
    #chartselector{
        margin-bottom:4px;
        font-size:1.0em;
    }
    #camera-padding {
        display:inline-block;
    }
    #temp-padding{
        display:none;
    }
    #toggle_percents{
        height:28px;
        font-size:1.0em;
    }
    #chart_drill_none{
        height:28px;
        font-size:1.0em;
        padding-top:0px;
    }
    #chart_drill_up{
        height:28px;
        font-size:1.0em;
        padding-top:0px;
        padding-right:4px!important;
        min-width:35px!important;
        width:35px!important;
    }
    #chart_drill_down{
        height:28px;
        font-size:1.0em;
        padding-top:0px;
        padding-right:4px!important;
        min-width:35px!important;
        width:35px!important;
    }
    #chart_roll_cube{
        height:28px;
        font-size:1.0em;
        padding-top:0px;
    }
    #hide_cube_details{
        font-size:1.0em;
    }
    #createscenarioimageBtn{
        padding-top:0px;
        height:28px;
        font-size:1.0em;
    }
    .icon-ban-circle{
        margin-top:-19px!important;
    }
    #ic_roll_cube_direction{
        margin-top:-19px!important;
    }
    #perspectiveSelector_chosen{
        font-size:1.0em;
    }
    #chart_title{
        margin-top:6px;
        font-size:0.9em;
        height:24px;
        padding-top:2px!important;
    }
    #status_explanations{
        height:20px!important;
        margin-top:0px!important;
    }
    #_tooltip{
        font-size:1.0em;
        background-color: silver;
        color:black;
        min-width:200px!important;
    }
    .cube_tip_item{
        font-size:1.0em;
    }

    #id_parent_target{
        width: 600px;
    }

}

/* row-divider  */
#row-divider-alignment {
    margin:4px;
    float:left;
}

#row-divider-alignment label {
    float:left;
    width:80px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
}

#row-divider-alignment label span {
    text-align:center;
    font-size: 32px;
    padding:4px 0px;
    display:block;
}

#row-divider-alignment label input {
    position:absolute;
    left:-200px;
}

#row-divider-alignment input:checked + span {
    //background-color:#404040;
    background-color:#0095c6;
    //color:#F7F7F7;
    color:#FFFFFF;
}

#row-divider-alignment .align-left {
    background-color:#e8e8e8;
    color:#333;
    width:84px;
    height:42px;
    margin:0px;
    font-weight: normal;
}

#row-divider-alignment .align-center {
    background-color:#e8e8e8;
    color:#333;
    width:84px;
    height:42px;
    margin:0px;
    font-weight: normal;
}

#row-divider-alignment .align-right {
    background-color:#e8e8e8;
    color:#333;
    width:84px;
    height:42px;
    margin:0px;
    font-weight: normal;
}


/* row-divider font selector normal/h1/h2/h3 etc */
#row-divider-font-radio {
    margin:4px;
    float:left;
}

#row-divider-font-radio label {
    float:left;
    width:32px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
}

#row-divider-font-radio label span {
    text-align:center;
    font-size: 13px;
    padding:10px  0px;
    display:block;
}

#row-divider-font-radio label input {
    position:absolute;
    left:-1200px;
}

#row-divider-font-radio input:checked + span {
    background-color:#0095c6;
    color:#FFFFFF;
}

#row-divider-font-radio .row-divider-print-mode {
    background-color:#e8e8e8;
    color:#333;
    width:100px;
    height:42px;
    margin:0px;
    font-weight: normal;
}

/*xxx  */
#row-divider-borders-radio {
    margin:4px;
    float:left;
}

#row-divider-borders-radio label {
    float:left;
    width:32px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
}

#row-divider-borders-radio label span {
    text-align:center;
    font-size: 13px;
    padding:10px  0px;
    display:block;
}

#row-divider-borders-radio label input {
    position:absolute;
    left:-1200px;
}

#row-divider-borders-radio input:checked + span {
    background-color:#0095c6;
    color:#FFFFFF;
}


#row-divider-borders-radio .row-divider-print-borders {
    background-color:#e8e8e8;
    color:#333;
    width:100px;
    height:42px;
    margin:0px;
    font-weight: normal;
}

/* yyy  */
#row-divider-font-styles-radio {
    margin:4px;
    float:left;
}

#row-divider-font-styles-radio label {
    float:left;
    width:32px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
}

#row-divider-font-styles-radio label span {
    text-align:center;
    font-size: 13px;
    padding:10px  0px;
    display:block;
}

#row-divider-font-styles-radio label input {
    position:absolute;
    left:-1200px;
}

#row-divider-font-styles-radio input:checked + span {
    background-color:#0095c6;
    color:#FFFFFF;
}


#row-divider-font-styles-radio .radio-print-inherit-styles {
    background-color:#e8e8e8;
    color:#333;
    width:100px;
    height:42px;
    margin:0px;
    font-weight: normal;
}

/* CustomFunction */

.CustomFunction{
    padding-left:1cm;
    background-image:url("/static/executor/js/libs/ckeditor/plugins/customfunction/icons/customfunction.png");
    background-repeat:no-repeat;
    border-style:none;
    padding-top:2px;
    padding-bottom:2px;
    padding-right:2px;
    text-decoration: none !important;
}

.CustomFunction.inActive{
    padding-left:1cm;
    background-image:url("/static/executor/js/libs/ckeditor/plugins/customfunction/icons/customfunctionRED.png");
    background-repeat:no-repeat;
    border-style:none;
    padding-top:2px;
    padding-bottom:2px;
    padding-right:2px;
    text-decoration: none;
    color:red !important;
}

.color-button{
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 4px 4px;
  text-align: center;
  font-size: 10px;
  cursor: pointer;
}

.color-button:hover {
  background-color: green;
}


.divider_row_container {
    width: 80%;
    background: aqua;
    margin: auto;
    padding: 10px;
}

.divider_row_text_content {
    width: 75%;
    float: left;
    /*background-color: silver;*/
}

.divider_row_extra_info_div {
  /*margin-left: 15%;*/
    display: table-cell;
    text-align: right;
    height: 100%;
    float:right;
    /*background-color: white;*/
}

.extra_info_span{
    display:inline-block;
    height: 100%;
    width:100%;
    /*background-color: silver;*/
    padding: 4px;
}

.divider_print_location, .divider_repeat_column_header{
    padding-left: 2px;
    padding-right: 2px;
}

.survey-report-menu-sub-item{
    background-color: #e1e5e8;
    //border-bottom: 1px solid black;
    //border: 1px solid black;

}

#edit_card_columns.container{
    padding: 0px;
}

.docx_property_text{
    width:360px;
    margin-left:20px !important;
}

.docx_property_label  {
    width:150px;
    display: inline-block;
    margin-left:20px !important;
}

#docx_property_holder{
    margin:10px;
}

#docx_property_title{
    margin:10px;
}

.demo_th, .demo_td{
    text-align: center;
    width:50%;
}

#demo_table{
    border:1px solid black;
    border-collapse:collapse;
    min-width:400px;width:400px;
}

#filter_probability, #filter_impact{
    width: 75px;
}

.filterBuilder{
    height:800px;
    min-height:800px;
}

#card_url{
    display:block;
    text-align:left;
    margin-top:16px;
    margin-left:30px;
    width: 300px;
}

.copy_url_to_clipboard{
    margin-left: 30px;
}
.stat_fi_option, .sotka_option{
    background-color: #e1e5e8 !important;
}