li, a {
    transition: none;
}

#filters.calculatorMainContainer {
    padding: 0;
}
.calculatorMainContainer,
.panelClearGrey .calculatorMainContainer.panel-body {
    background: #FdFdFb;
    position: relative;
    /*height : 620px;*/
}
.calculatorMainContainer > .tab-pane {
    height : 100%;
}
.calculator_tab_explanation {
    /*height : 5%;*/
    background: rgba(249, 253, 230, 0.8);
    border-bottom : 1px solid #E9E9E9;
    display : none;
}
.txt_cols_3 {
    -webkit-column-gap   : 20px;
    -moz-column-gap      : 20px;
    column-gap           : 20px;
    -webkit-column-count : 3;
    -moz-column-count    : 3;
    column-count         : 3;
}

.calLogo {
    width   : 100px;
    height  : 95px;
    float   : left;
    padding : 0 20px 0 0;
}

.chart_explanation_text {
    padding-left   : 100px;
    padding-top    : 15px;
    padding-bottom : 0;
    text-align     : left;
    font-size      : 14px;
}
/* trick to make inline elements visible when empty
   see: http://stackoverflow.com/questions/8337186/jquery-isvisible-not-working-in-chrome
   */
.chart_explanation_text strong {
    display : inline-block;
    min-width : 1px;
}

#user_report {
    position: absolute;
    opacity: 0;
}
#user_report .chart_explanation_text {
    padding-left : inherit;
}

.calculator_tab_main {
    height : 750px;
}
.calculator_tab_main > div {
    height : 100%;
}

.calculatorMainContainer .col_chart {
    text-align : center;
}
.calculatorMainContainer .col_chart,
.calculatorMainContainer .col_inputs,
.calculatorMainContainer .col_stats {
    padding-top: 5px;
    padding-bottom: 5px;
}
.calculatorMainContainer .col_chart > .tab-pane {
    height : 85%;
}
.calculatorMainContainer .col_inputs {
    background   : #FCFCFC;
    border-right : 1px solid #E9E9E9;
}
.calculatorMainContainer .col_inputs .panel-body {
    background: transparent;
}
.calculatorMainContainer .col_inputs h4 {
    margin: 10px 0 15px;
    font-weight: bold;
    color: #80A3BF;
    font-size: 16px;
}
.calculatorMainContainer .col_stats {
    padding-right : 5px;
}
.blueList>li {
    padding: 10px 20px;
    margin: 10px;
}
.blueList>li.active a {
    color: #004A83;
    border-bottom: 4px solid rgba(33, 133, 208, 0.3);
}



/* Grey statistics_card theme */
.greyStats.statsCard {
    background : rgba(247, 247, 247, 0.5);
    border     : 1px solid rgb(243, 243, 243);
}
.greyStats.statsCard .value {
    color : #49c6cf;
    font-weight : 200;
}
.greyStats.statsCard .value i {
    font-size : 0.6em;
    color     : rgb(138, 176, 210);
}
.greyStats.statsCard .label {
    color : rgba(0, 0, 0, 0.6);
}
.greyStats.statsCard .sublabel {
    font-size: 0.9em;
    margin: 5px;
}
#calculator .statsCard > .ui.statistic {
    width: 100%;
}
.statsCard.statsTall {
    height: 300px;
}

.panelClearGrey.calcPanel .panel-heading {
    background: #5a5a5a;
    border: none;
}
.panelClearGrey.calcPanel .panel-heading .panel-title a {
    color: rgb(216, 216, 199);
    letter-spacing: normal;
    padding-left: 0;
    padding-right: 0;
}

.panel-title.calcTabLinks > li {
    width          : 33.3%;
    text-align     : center;
    vertical-align : bottom;
}
.panel-title.calcTabLinks.mainTabs > li:not(last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.panelClearGrey.calcPanel .panel-heading .panel-title li:hover > a,
.panelClearGrey.calcPanel .panel-heading .panel-title li.active > a {
    background-color: rgba(230, 230, 229, 0.1);
    border-bottom: 3px solid rgb(220, 183, 134);
    color: rgb(236, 143, 143);
    color: #69B98D;
}
.panel-title.calcTabLinks > li.special > a {
    text-transform : uppercase;
    color          : #69B98D;
}
.sub_tabs .calcTabLinks > li {
    display : inline-block;
}
.tabstat {
    font-size: 1.3em;
    font-weight: 600;
    color: rgb(99, 125, 146);
    color: rgba(255, 255, 255, 0.79);
    display: inline-block;
}
.mainTabs .tabstat {
    padding: 7px;
    margin-left: 10px;
    background: rgba(226, 226, 226, 0.14);
    border-radius: 4px;
    min-width: 61px;
}
.mainTabs .tabtext {
    display: inline-block;
    text-align: left;
    line-height: normal;
    vertical-align: middle;
}
.mainTabs .tabsubtext {
    font-size: smaller;
}
.panel-title.calcTabLinks > li.sectiontab {
    background: #676767;
    width: 11.1%;
}
.panel-title.calcTabLinks > li.sectiontab a {
    padding: 3px;
    color: burlywood;
    transition: all 0.4s ease;
}
.panelClearGrey .panel-heading .panel-title li.sectiontab > a:hover,
.panelClearGrey .panel-heading .panel-title li.sectiontab.active > a {
    background-color: rgba(230, 230, 229, 0.2);
    border-bottom: 3px solid rgb(220, 183, 134);
    color: #eacfac;
}
.sectiontab .tabstat {
    font-size: 1.1em;
    color: rgb(128, 163, 191);
    color: rgb(174, 200, 220);
    display: inline-block;
}

.sliderMark {
    font-size : 10px;
    color     : #808080;
}

.c_slider_val {
    display     : inline;
    font-weight : 900;
    font-size   : 1.2em;
    color       : #2185D0;
}

.btn-group.btn-group-justified .btn {
    border-right-width : 0;
}
.btn-group.btn-group-justified > .btn:last-child:not(:first-child) {
    border-right-width : 1px;
}
.btn-group.btn-group-justified > .btn.btn-clean.active + .btn.btn-clean {
    border-left-color : #C4C4C4;
}

.sailoLogo {
    position : relative;
}
.sailoLogo:before {
    overflow            : hidden;
    background-image    : url(../../pic/logo/black_logo/sailo_logo_black.png);
    background-repeat   : no-repeat;
    background-position : 50% 50%;
    background-size     : 60px 17px;
    content             : "";
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    opacity             : 0.5;
}
.sailoLogo.chartLogo:before {
    background-position : 98% 17%;
    background-size     : 60px 17px;
    opacity             : 0.5;
}
.sailoLogo.chartLogo.legendRight:before {
    background-position : 79% 17%;
}
.sailoLogo.panelLogo:before {
    background-position : 98% 50%;
    opacity             : 0.3;
}

/* special case when annotations get cuttoff by the edge of the chart by default -> show them */
.chart_costs_v_chartering_profit svg {
    overflow: visible !important;
}


.homeLink {
    position : absolute;
    bottom   : 10px;
    z-index  : 10;
    left     : 55px;
}
.homeLink img {
    vertical-align : top;
    height         : 18px;
    opacity        : 0.4;
    margin-right   : -3px;
}
.homeLink:hover img {
    opacity        : 0.55;
}



#calculator {
    margin: 30px 0;
}
#calculator .statsCard:not(:first-child) {
    margin-top: 5px;
}

.email_me_container {
    width: 100%;
}
.email_me_container input {
    vertical-align : middle;
    width          : calc(100% - 220px);
    padding        : 4px 10px;
}


#calculator .shareList li > a {
    color: rgba(128, 163, 191, 1);
}
#calculator .shareList li > a:hover {
    color: rgba(128, 163, 191, 0.7);
    cursor: pointer;
}
#calculator .shareList li > a > i {
    font-size : 1.2em;
}

.myloader {
    position : relative;
}
.myloader:before {
    width      : 100%;
    height     : 100%;
    content    : "";
    background : rgba(247, 247, 247, 0.75);
    position   : absolute;
    z-index    : 100;
    top        : 0;
    left       : 0;
    /*display    : none;*/
}
.myloader:after {
    content           : "\e600";
    position          : absolute;
    z-index           : 200;
    left              : 50%;
    top               : 50%;
    -webkit-transform : translate(-50%, -50%);
    -ms-transform     : translate(-50%, -50%);
    transform         : translate(-50%, -50%);
    font-family       : icomoon;
    font-size         : 2.5em;
    color             : #80A3BF;
    -webkit-animation : fa-spin 1s infinite linear;
    animation         : fa-spin 1s infinite linear;
    /*display        : none;*/
}

.progressDiv {
    position   : absolute;
    width      : 100%;
    height     : 100%;
    background : rgba(117, 119, 103, 0.95);
    z-index    : -10;
    color      : white;
    opacity    : 0;
    transition : opacity 1s;
}
.progressDiv.active {
    z-index    : 1000;
    opacity    : 1;
}
.progress_spinner {
    font-size : 2em;
}
.progressDiv .progress {
    width: 70%;
    border-radius: 0;
    margin: 20px 0 10px;
    margin-left: auto;
    margin-right: auto;
}

.progress {
    background : rgba(0, 0, 0, 0.25);
    box-shadow : inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar2 {
    transition          : 0.3s linear;
    transition-property : width, background-color;
    box-shadow          : 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    line-height         : 19px;
}


/* report */
.report_header {
    background : #FD8e25;
    padding    : 20px;
    color      : white;
    position   : relative;
    overflow   : hidden;
}
.report_header .report_title {
    font-size      : 2em;
    font-weight    : 800;
    border-left    : 3px solid;
    padding-left   : 10px;
    text-transform : uppercase;
}
.report_header .report_date {
    font-size    : 1.2em;
    font-weight  : 400;
    padding-left : 10px;
    margin-top   : 30px;
}
.report_header .report_title_logo {
    font-size : 2em;
    position  : absolute;
    right     : 15px;
    bottom    : 10px;
}

ul.bar_costs {
    text-align : right;
    margin-top : 75px;
    font-size  : 11px;
}
.bar_costs li {
    padding-bottom : 11px;
}

/* moved to custom_list_adi.css */
/*.splitDotsList .liLeft,*/
/*.splitDotsList .liRight {*/
    /*overflow : hidden;*/
    /*padding  : 2px 5px;*/
    /*position : relative;*/
    /*display  : inline-block;*/
/*}*/
/*.splitDotsList .liLeft {*/
    /*width     : 50%;*/
    /*z-index   : 5;*/
    /*font-size : 0.94em;*/
/*}*/
/*.splitDotsList .liLeft:after {*/
    /*content  : "........................................................................................";*/
    /*position : absolute;*/
    /*width    : 100%;*/
    /*overflow : hidden;*/
    /*z-index  : -1;*/
/*}*/
/*.splitDotsList .liRight {*/
    /*width          : 50%;*/
    /*font-weight    : bold;*/
    /*text-transform : capitalize;*/
/*}*/
.dynamicSailoLogo {
    /*font-family: 'icomoon';*/
    /*content: "\e600";*/
    position : absolute;
    font-size : 25em;
    opacity : 0.2;
    top: -50%;
    right: 0;
}
.dynamicSailoLogo {
    -webkit-animation           : three 2s infinite;
    animation                   : three 15s infinite;
    -webkit-animation-direction : alternate;
    animation-direction         : alternate;
}
@keyframes three {
    0% {
        -webkit-transform : rotateZ(0deg);
        transform         : rotateZ(0deg) translate(0, 0) scale(1);
    }
    20% {
        -webkit-transform : rotateZ(0deg);
        transform         : rotateZ(0deg) translate(0, 0) scale(1);
    }
    100% {
        -webkit-transform : rotateZ(100deg);
        transform         : rotateZ(100deg) translate(20px, 50px) scale(3);
    }
}



@media screen and (max-width: 765px) {
    .headlineContainer .headlineText {
        font-size : 15px;
    }
    .calculator_head_explanation {
        font-size : 11px;
    }
    .panel-title.calcTabLinks > li {
        width: 29%;
    }
    .panel-title.calcTabLinks > li.mobileDetails {
        width       : 13%;
        line-height : 91px;
        font-size   : 16px;
        position    : absolute;
        right       : 0;
        color       : white;
    }
    .panel-heading ul.panel-title.calcTabLinks > li.sectiontab  {
        display : none;
    }
    .mainTabs .tabsubtext {
        display: none;
    }
    .mainTabs .tabtext {
        text-align : center;
        max-width  : 70px;
    }
    .mainTabs .tabstat {
        margin     : 0;
        background : none;
        color      : #e8eef1;
        display    : block;
    }

    /* dropdown menu related */
    .mobileDetails ul.dropdown-menu {
        right         : 0;
        left          : inherit;
        padding       : 0;
        border-radius : 0;
        background    : #5a5a5a;
        min-width     : 180px;
    }
    /* needed for iOS - http://stackoverflow.com/questions/20960405/bootstrap-3-dropdown-on-ipad-not-working */
    .mobileDetails .dropdown-toggle {
        cursor : pointer;
    }
    .mobileDetails ul.dropdown-menu .tabstat {
        font-size : 1.1em;
        padding   : 0;
        float     : right;
        min-width : inherit;
    }
    .panel-heading .panel-title .mobileDetails ul.dropdown-menu > li {
        display : block;
    }
    .panel-heading .panel-title .mobileDetails ul.dropdown-menu > li > a {
        padding        : 10px 15px;
        letter-spacing : inherit;
        background     : #5a5a5a;
    }
    .panelClearGrey.calcPanel .panel-heading .panel-title ul.dropdown-menu li > a,
    .panelClearGrey.calcPanel .panel-heading .panel-title ul.dropdown-menu li:hover > a,
    .panelClearGrey.calcPanel .panel-heading .panel-title ul.dropdown-menu li.active > a {
        border: none;
    }

    .calculator_tab_main {
        height : inherit;
    }
    .calcMobileFiltersClose {
        color     : #bbbbbb;
        font-size : 30px;
        position  : absolute;
        right     : 15px;
        cursor    : pointer;
    }
    .col_inputs fieldset {
        margin-top: 20px;
    }
    .btn-group .bt_icon {
        display: none;
    }
    #filters .btn-group .type_caption,
    .btn-group .type_caption {
        padding: 0;
    }
    .chart_explanation_text {
        padding   : 15px 0;
        font-size : 12px;
    }
    .sub_tabs .calcTabLinks > li {
        padding   : 5px;
        margin    : 0;
        font-size : 12px;
    }
    .sub_tabs .calcTabLinks > li.hide-xs {
        display : none;
    }
    
    .calculatorMainContainer .col_stats {
        font-size : 8px;
    }
    .col_stats .statsCard {
        height : 60px;
        padding: 0;
    }
    .col_stats .statsCard .value {
        font-size   : 2.7em;
        font-weight : 400;
    }
    .calculatorMainContainer .col_stats {
        padding : 0;
    }
    #calculator .statsCard:not(:first-child) {
        margin-top : 0;
    }

    .sailoLogo.chartLogo:before,
    .sailoLogo.chartLogo.legendRight:before {
        background-position : 97% 23%;
        background-size     : 40px 12px;
        opacity             : 0.5;
    }
    .homeLink {
        left   : 37%;
        bottom : -140px;
    }
    .calBtbsReport,
    .calBtbsSocial {
        padding    : 5px 0 10px !important;
        text-align : center !important;
        font-size  : larger;
    }
}