// http://ionicframework.com/docs/v2/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

.skinned-menu .menu-inner ion-header ion-toolbar div, .skinned-menu .menu-inner ion-content, .skinned-menu .menu-inner button
{
    background-color: #535353;
    color: white;
}

.skinned-menu .menu-inner ion-header
{
    border-bottom: solid black 1px;
    border-top: solid #686868 1px;
}

.skinned-menu .menu-inner button .item-inner
{
    border-top: solid #686868 1px;
    border-bottom: solid black 1px;
}

.skinned-menu .menu-inner .item-block:first-child
{
    border: none;
}

.skinned-menu .menu-inner .item-block:last-child
{
    border-bottom: solid black 1px;
}

.menu-logo-container
{
    height: 50px;
    text-align: center;
}

.menu-logo-container .menu-logo
{
    max-height: 100%;
}

.slide-container
{
    .slide-zoom {
        background-color: #535353;
        width: 800px;
        height: 450px;
        max-width: 100%;
        overflow: auto;
        max-height: 100%;
        border: solid black 1px;
    }
}

ion-checkbox .checkbox-icon.checkbox-checked
{
    border-color: #4487BA;
    background-color: #4487BA;
}

::-webkit-input-placeholder { /* Chrome */
    color: inherit;
    opacity: 0.2;

}
:-ms-input-placeholder { /* IE 10+ */
    color: inherit;
    opacity: 0.2;
}
::-moz-placeholder { /* Firefox 19+ */
    color: inherit;
    opacity: 0.2;
}
:-moz-placeholder { /* Firefox 4 - 18 */
    color: inherit;
    opacity: 0.2;
}

.advanced-button
{
    text-transform: none;
    padding-left: 16px;
    padding-right: 6px;
}

.custom-input
{
    color: #CCCCCC;
    text-align: left;
    width: 100%;
    height: 25px;
    background-color: #3A3A3A;
    border: solid black 1px;
    padding: 2px 0px 2px 4px;
    margin: 0px;
    border-radius: 0px;
}

.header-side-col
{
    padding: 0;
    height: 30px;
    max-width: 33px;
    align-items: center;
    display: flex;
}

.dropdown-image-button
{
    height: 25px;
    font-size: 0;
    margin: 0;
    padding: 0;
    img {
        max-width: 26px;
    }
}

.header-button
{
    background-color: #535353;
    color: #CCCCCC;
    border-radius: 0px;
    padding: 0;
    margin: 0px;
    border: solid #535353 1px;
    width: 28px;
    height: 25px;
    font-size: 12px;
    position: relative;
    .button-inner img {
        max-width: 16px;
    }
}

.header-button:hover
{
    border: solid white 1px;
}

.scroll-content 
{
    overflow: auto;
    padding: 0 !important;
}

@media only screen and (min-height: 768px) and (min-width: 768px) {
    .modal-wrapper {
        position: absolute;
        top: calc(50% - (600px/2));
        left: calc(50% - (800px/2));
        width: 800px;
        height: 600px;
    }
}

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px;
}

.tooltip.left {
    padding: 0 5px;
    margin-left: -3px;
}

.tooltip.top {
    padding: 5px 0;
    margin-top: -3px;
}

.tooltip.right {
    padding: 0 5px;
    margin-left: 3px;
}

.tooltip.in {
    filter: alpha(opacity=90);
    opacity: .9;
}

.fade.in {
    opacity: 1;
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    filter: alpha(opacity=0);
    opacity: 0;
    line-break: auto;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 4px;
}

dropdown-popover[ng-reflect-force-popover="true"] {
    button.popover-button.disable-hover[ion-button] {
        margin: 0;
        height: 25px;
        font-size: 14px;
        font-weight: 400;
        .button-inner span {
            padding-top: 1px;
        }
    }
}

.alert-wrapper {
    border-radius: 2px !important;
    background-color: #535353 !important;
    color: white;
    .alert-sub-title {
        color: #CCCCCC;
    }
    .alert-checkbox-group {
        border: none;
        button {
            color: #CCCCCC;
        }
    }
    .alert-message {
        color: #CCCCCC;
        overflow: auto;
    }
    .alert-button-group button {
        margin-top: 0.1rem;
        margin-right: 0.1rem;
        margin-bottom: 0.1rem;
        margin-left: 0.1rem;
        font-size: 10px;
        height: 25px;
        font-weight: 400;
        min-width: 87px;
        background-color: #535353;
        border: solid black 1px;
        border-radius: 0px;
        box-shadow: none;
        text-align: center;
        color: #CCCCCC;
        .button-inner {
            justify-content: space-around;
        }
    }

    .alert-button-group button:hover {
        border: solid white 1px;
    }
}

.move-feature-to-front
{
    z-index: 1001 !important;
    position: relative;
}

.tutorial-ok-button .tooltip.bottom .tooltip-arrow
{
    border-bottom-color: #535353 !important;
}
.tutorial-ok-button .tooltip.left .tooltip-arrow
{
    border-left-color: #535353 !important;
}
.tutorial-ok-button .tooltip.top .tooltip-arrow
{
    border-top-color: #535353 !important;
}
.tutorial-ok-button .tooltip.right .tooltip-arrow
{
    border-right-color: #535353 !important;
}

.tutorial-ok-button .tooltip-inner
{
    background-color: #535353;
}

.end-tutorial 
{
    background-color: red !important;
}

.help-button
{
    background-color: #4487BA !important;
}

.only-button-item
{
    padding-bottom: 8px;
}

.custom-backdrop
{
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
}

.rotate-image-container
{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.toggle-md .toggle-checked .toggle-inner
{
    background-color: #4487BA;
}

html input[disabled] {
    opacity: 0.4;
}

@media screen and (max-width: 768px) {
    .slide-container .slide-zoom {
        background-color: #535353;
        width: 100%;
        height: 100%;
        max-width: 100%;
        overflow: auto;
        max-height: 100%;
    }

}

.chart-button-container
{
    position: absolute;
    top: 11px;
    right: 0;
    width: 25px;
    height: 200px;
    max-height: calc(100% - 11px);
    z-index: 5;
    overflow: visible;
}

.chart-button-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.chart-button-container::-webkit-scrollbar-thumb {
    background: #4487BA;
}

.chart-button-container .chart-button
{
    margin: 0;
    font-size: 8px;
    height: 25px;
    width: 25px;
    background-color: #535353;
    border: solid black 1px;
    border-radius: 0px;
    box-shadow: none;
    padding: 4px;
}

.chart-button-container .chart-button:hover
{
    border: solid white 1px;
}