/*
==========================================================================
    Chimps Button
==========================================================================
*/
.btn,
.btn-summary,
.btn-consolidated,
.btn-compareto,
.btn-datadisplay,
.btn-export,
.btn-enter,
.btn-close,
.btn-plus,
.btn-hand,
.btn-deletecell,
.btn-applay,
.btn-popupclose,
.btn-reportenter,
.btn-criteria,
.btn-trash,
.btn-restore {
    font-family: $base-font;
    font-weight: normal;
    font-size: $medium;
    display: inline-block;
    margin: 0;
    border: none;
    border-style: none;
    text-decoration: none;
    text-align: center;
    outline: 0;
    @include transition(all 0.4s ease-in-out);
}
.btn {
    color: $c-black;
    padding: 0 10px;
    background-color: $c-white;
    @include border-radius(5px);
    &:hover,
    &.active {
        background-color: $c-purple;
        color: $c-white;
    }
}
.btn-autoadjust {
    padding: 0 7px;
    color: $c-white;
    background: $c-purple;
    cursor: pointer;
}
.btn-compareto,
.btn-datadisplay {
    padding: 0 10px;
    color: $c-white !important;
    background: $c-grayblue;
    cursor: pointer;
    @include border-radius(5px);
    &:hover{
        color: $c-white !important;
        background: $c-grayblue;
    }
}
.btn-export {
    color: $c-black2;
    padding: 0 10px;
    position: relative;
    text-align: left;
    cursor: pointer;
    background-image: none !important;
    i {
        position: absolute;
        right: 0;
        top: 0;
    }
}
.btn-prop-export{
    width: 80px;
    background: #F2F2F2;
    height: 30px;
    padding-top: 4px;
    text-align: right;
    i {
        right: 50px;
    }
}
.btn-chi-icon{
    cursor: pointer;
    i {
        width:auto;
    }
}
.btn-pickup,
.btn-otb {
    background: $c-white;
    color: $c-purple;
    padding: 0 30px 0 5px;
    position: relative;
    &:hover {
        background: $c-purple;
        color: $c-white;
    }
    i {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
    }
}
.btn-edit,
.btn-save {
    i { height: 100%; }
}
.btn-close {
    position: relative;
    height: 100%;
    cursor: pointer;
    i { height: 100%; width: 100%; }
}
.btn-plus {
    background-color: #b3c6e8;
    border: 1px solid #8f91a2;
    cursor: pointer;
    &:hover {
        background-color: #c2d7fd;
    }
    i { height: 100%; width: 100%; }
}
.btn-hand {
    background-image: none;
    background-color: none;
    z-index: 100;
    cursor: pointer;
    &:hover { background-color: #e2f0d9; }
    i { height: 100%; }
}
.btn-deletecell {
    position: absolute;
    right: 1px;
    top: 1px;
    cursor: pointer;
    background-color: #b3c6e8;
    background-image: none;
    @include flex-center(center, center);
    &:hover {
        background-color: #c2d7fd;
    }
    i {
        width: 100%;
        height: 100%;
    }
}
.btn-applay {
    padding: 0 7px;
    color: $c-white;
    background: $c-purple;
    @include border-radius(5px);
}
.btn-popupclose {
    cursor: pointer;
    i {
        width: 100%;
        height: 100%;
    }
}
.btn-reportclose {
    cursor: pointer;
    i {
        width: 100%;
        height: 100%;
    }
}
.btn-criteria {
    background: #fff;
    height: 30px;
    padding-left: 0;
    i {
        background-color: #e0e0e0;
        @include border-radius(100%);
    }
}

//forecast icons fix
.btn-save2 {
    width: 30px;
    height: 23px;
    display: block;
    float: left;
    background: $c-white;
    padding: 0 5px;
    min-width: inherit;
    @include border-radius(5px);
    @include flex-center(center, center);
    .icon-small {
        width: 23px;
        height: 23px;
    }
}
.btn-close2 {
    width: 23px;
    height: 23px;
    display: block;
    float: left;
    margin: 0;
    position: relative;
    @include flex-center(center, center);
    svg {
        width: 18px;
        height: 18px;
    }
}
.icon-loader{
    background: url(../images/loader.gif) no-repeat center center;
    -webkit-background-size: 32px auto;
    background-size: 32px auto;
    height: 30px;
    display:block;
}

.btn-consolidated{
    background: url(../images/chi-consolidated.svg) no-repeat center center;
    -webkit-background-size: 32px auto;
    background-size: 32px auto;
    border-radius: 2px;
    width: 30px;
    height: 30px;
}
.btn-summary{
    background: url(../images/chi-summary.svg) no-repeat center center;
    -webkit-background-size: 32px auto;
    background-size: 32px auto;
    border-radius: 2px;
    width: 35px;
    height: 30px;
    margin-left: 5px;
}
.btn-arrow,.btn-arrow-summary{
    background: url(../images/chi-arrowright.svg) no-repeat 0 -1px;
    -webkit-background-size: 20px auto;
    background-size: 20px auto;
    width: 20px;
    height: 20px;
    position: absolute;
    top : 2px;
    left : 6px;
    cursor: pointer;
    transition-duration:0.8s;
}
.btn-arrow-summary{
    float: left;
    margin-right: 5px;
    position: unset;
}
// new
.btn-save-default {
    @include border-radius(0px);
    padding-left: 35px;
    background: none;
    color: $c-black2;
    &:hover { background: none; color: $c-black2; }
    i {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
    }
}

/* FB */
.btn-add {
    z-index: 100;
    cursor: pointer;
}
.btn-delete {
    cursor: pointer;
    display: block;
    @include flex-center(center, center);
    i {
        width: 100%;
        height: 100%;
    }
}


/* fb forcasting */
/* switch */
.switch-area {
    height: 30px;
    display: inline-flex;
    .switch-text { display: block; padding: 4px 5px; }
    &.activeShow { @include flexbox(); }
}
.switch {
    position: relative;
    display: block;
    width: 45px;
    height: 24px;
    @include border-radius(12px);
    border: 1px solid #8C6C9F;
    background-color: #bdbdbd;
    margin: 0 10px;
    top: 3px;
    input { opacity: 0; width: 0; height: 0; }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 30px;
        width: 30px;
        left: -2px;
        bottom: -4px;
        -webkit-transition: .4s;
        transition: .4s;
        background: #d6dff2 url(../images/switch.svg) no-repeat center center !important;
        background: no-clip;
        background-size: 30px auto !important;
    }
    input:checked+.slider { background-color: #72caaf; }
    input:checked+.slider:before {
        -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
        transform: translateX(16px);
    }
    .slider.round { border-radius: 34px; }
    .slider.round:before { border-radius: 50%; }
}

/* fb-forecast */
/*
Note:
---------------------------------------------------------------------------------------
updated .btn-group reduce code resident-guest-forecast.scss or other scss
---------------------------------------------------------------------------------------
*/
.btn-group {
    padding: 0;
    .btn-save,
    .btn-edit{
        width: auto !important;
        padding:3px 30px 0 5px !important;
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        position: relative;
        cursor: pointer;
        &:first-child { padding: 3px 30px 0 5px; }
        i {
            position: absolute !important;
            top: 0;
            right: 5px;
        }
        &.active,
        &:hover {
            background: $c-purple;
            color: $c-white;
        }
    }
    .btn-save:first-child,
    .btn-edit:first-child {
        border-top-left-radius: 5px !important;
        border-bottom-left-radius: 5px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    a {
        color: $c-black2;
        text-decoration: none;
        &:hover { color: $c-white; }
    }
    &.disable {
        display: block;
        cursor: not-allowed;
        pointer-events: none;
        span,
        a {
            cursor: not-allowed;
            pointer-events: none;
            background: $c-gray5 !important;
            &:hover { color: $c-black2; }
        }
    }
}

/* Common Button | Updated */
.btn {
    &.btn-simple {
        padding: 5px 10px;
        @include border-radius(0);
        color: color("black2");
        background-color: color("white-smoke-2");
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        &.active { background-color: color("very-light-grey") !important; }
    }
    &.btn-small {
        display: inline-flex;
        align-items: center;
        padding: 0 5px !important;
        width: auto !important;
        height: 22px;
        background-color: color('white') !important;
        color: color("black2");
        i.chi-close3 { width: $icon-small !important; height: 100% !important; } /* Exception | chi-close3  */
        &.no-bg { background-color: transparent !important; &:hover { background-color: transparent !important; } }
        &.icon-small-button {
            i { margin-left: 5px; }
            &.active,
            &:hover { background-color: color('strikemaster') !important; color: color('white') !important; }
        }
    }
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    position: relative;
    color: color("black2") !important;
    background: color("white-smoke-2") !important;
    cursor: pointer;
    @include border-radius(0);
    border: none;
    vertical-align: middle;
    &.icon-left,
    &.icon-right { i { position: absolute; top: 0; height: $icon-large; width: $icon-large; } }
    &.icon-left { padding: 5px 10px 5px 35px !important; i { left: 0; top:auto } &.custom-pd { padding : 0px 9px 0px 35px !important;} &.custom-property-pd {padding : 0px 1px 0px 35px !important;}}
    &.icon-right { padding: 5px 35px 5px 10px !important; i { right: 0; } }
    &.no-bg { background-color: transparent !important; }
    &.active { background-color: color("whitesmoke") !important; }
}

/* Popup | ui-dialog buttons */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button,
.ui-dialog .block-bottom .btn-dialog-popup {
    font-family: $base-font !important;
    padding: 6px 14px !important;
    color: color("black2") !important;
    background-color: color("hawkes-blue") !important; /* Please check updated updated variables.scss */
    border: none !important;
    border-radius: 5px !important;
    line-height: inherit !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    &:hover { background-color: color("bermuda") !important; }
    &.active { background-color: color("bermuda") !important; }
}