.currency {
    font-family: $base-font;
    .content { padding: 0 15px; } 
    /* update common component to our regular style */
    input[type="text"] {
        padding: 2px 10px;
        height: 26px;
        background: color('cumulus');
        color: color('black2');
        border: 1px solid color('manatee');
        @include placeholder();
        @include border-radius(0);
        &:disabled { background: color('white-smoke') !important; }
        &:-moz-read-only,
        &:read-only { background: color('white') !important; }
        &:focus {
            outline: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
    }
    input[readonly] { background: color('white') !important; }
    .mars-select .multiselect-container { min-width: unset;max-height: 100px !important; overflow: auto; }
    .mars-select .multiselect-container li.disabled { /* please check "input.scss", "disabled" class  "display: block !important;"  */
		display: none !important;
    }
    .form-group {
        display: flex;
        margin-bottom: 0;
        > label {
            padding: 3px 0 3px 10px;
            display: block;
            margin-bottom: 0;
            font-family: $base-font;
            font-weight: normal;
            font-size: $medium;
        }
    }
    .nonConfigCurrencies{
        background-color: #FFFFFF !important;
        border: 0;
        height: 28px;
        position: absolute;
        width: 175px;
        color:black;
    }
    select {
        margin-top: -5px;
    }
    .form-control{
        padding : 0 12px 0 0 !important;
    }

    small {
        float : right;
        background-color: #c2d7fd;
    }
    .btn-currency-template { height: $icon-large; }
    .btn-export { height: $icon-large; margin-left: 10px; background-color: color("white-smoke-2") !important; } 
    .top-action-area {
        margin-top: 15px;
        .btn-edit,
        .btn-save,
        .btn-close {
            height: $icon-large;
            width: $icon-large;
            display: none;
            margin-left: 0;
            @media (min-width: 901px) { margin-left: 10px; }
            &.active { display: inline-flex; background: transparent !important; }
        }
        @media (max-width: 900px) {
            display: flex;
            gap: 10px;
            .btn-export { margin-left: 0; }
            .fillgap { display: none; }
        }
    }
    .currency-setup {
        &.currency-setup--save { 
            .is-edit { display: none; }
            .is-save { display: block; }
        }
        &.currency-setup--edit {
            .is-edit { display: block; }
            .is-save { display: none; }
            .radio-wrap.is-edit { display: flex; flex-wrap: wrap; }
        }
        .data { padding: 3px 10px; height: 26px; }
        .mars-select { width: 210px; margin-left: 10px;}
        .mars-radio {
            &:hover,
            &.active { background: transparent !important; }
            label { padding: 3px 5px 3px 5px; margin-bottom: 0; cursor: pointer; }
        }
        .currency-setup__row {
            margin-top: 5px;
            min-height: $icon-large;
            display: grid;
            grid-template-columns: 175px 276px;
            grid-column-gap: 10px;
            &:first-child { margin-top: 0; }
        }
        .currency-setup__title {
            background-color: $c-lturquoise;
            padding: 5px 10px;
        }
        .currency-setup__content {
            padding: 2px 0;
            background: color("white-smoke");
        }
        .currency-setup__row .form-group {
            display: grid;
            grid-template-columns: 1fr 220px;
        }
    }
    .btn-browse { height: $icon-large; margin-left: 10px;
        padding-top: 3px;
    }
    .tab-container { overflow: hidden;}
    .vertical-tabs-container {
        display: -ms-grid !important;
        display: grid !important;
        grid-template-columns: auto;
        grid-column-gap: 10px;
        @media (min-width: 901px) { grid-template-columns: 175px auto; }
    }
    .vertical-nav-tabs {
        border: none;
        li {
            float: none;
            margin: 0 0 10px 0;
            a {
                padding: 3px 10px;
                background: color("solitude-3") !important;
                border: none !important;
                color: color('black2') !important;
                display: block;
                text-align: left;
                text-decoration: none;
                cursor: pointer;
                @include border-radius(0);
                @include transition(.4s);
                &:hover { background: color('tropical-blue') !important; }
            }
            &.active a { background: color('tropical-blue') !important; }
        }
    }
    .tab-content {
        display: block;
        overflow: hidden;
    }
    .tab-pane {
        display: none;
        &.active { display: inline-block; max-width: 100%; }
        @media (max-width: 900px) { &.active { display: block; }}
        .title {
            height: $icon-large;
            padding: 0 15px;
            @include linear-gradient(#dde0ec, #9da8ce);
            position: relative;
            h2 {
                font-family: $base-font-semibold;
                font-size: $medium;
                color: color('sapphire');
                line-height: $icon-large;
                margin: 0;
                padding-right: 60px;
                @include text-with-ellipsis();
            }
            .btn-save,
            .btn-edit,
            .btn-close {
                width: $icon-large;
                height: $icon-large;
                position: absolute;
                top: 0;
                right: 10px;
                cursor: pointer;
            }
            .btn-edit,
            .btn-save { 
                right: 40px; 
                display: none;
                &.active {
                    display: inline-flex;
                    background: transparent!important;
                }
            }
            .btn-close { right: 10px; display: inline-flex; }
        }
        .section-content {
            padding: 0;
            overflow: visible;
            &:after { content: ''; display: table; clear: both; }
        }
    }


    .currency-form {
        margin: 0 0 10px 0;
        position: relative;
        display: flex;
        gap: 0 10px;
        .form-column {
            display: inline-flex;
            gap: 0 10px;
            &:first-child .head-label { min-width: 120px; }
            .head-label { 
                background-color: color("pattens-blue-2");  
                color: color("black2"); 
                @include border-radius(0);
            }
        }
        @media (max-width: 900px) { .head-label { min-width: 120px; } }
        @media (max-width: 768px) {
            display: block;
            .form-column--file { margin-top: 5px; }
            .btn-add-currency { float: right; }
        }
        .form-group { 
            float: left;
            min-height: $icon-large;
            padding: 2px 0;
            background: $c-white;
            .form-control[disabled] { background: $c-gray3 !important; }
        }
        .file-upload .form-control { background: $c-white !important; width: 200px; }
    }
    .form-group-select {
        padding: 2px 1px !important;
        .mars-select { width: 94px; }
    }
    .currency-annual--save,
    .currency-month--save {
        .form-column--file { display: flex; }
        .btn-enter { display: inline-flex !important; }
    }

    .currency-month--edit {
        .form-column--file,
        .btn-enter { display: none !important; }
    }
    /* table */
    .ember-table { /* .table-responsive */
        overflow: auto !important; 
        max-height: inherit;
        height: 382px;
        border: none !important;
        @media (min-width: 1201px) { height: calc(100vh - 272px); }
    }
    .commonTable {
        .editableCell {
            input {
                width: 94px;
                text-align: center;
                border: 1px solid #8f91a2 !important;
            }

            .showError {
                border: 2px solid #f05352 !important;
            }
        }
        border-spacing: 1px;
        margin: -1px 0 0 -1px !important;
        tr td div {overflow: visible}
        td { background-color: color('white'); } 
        tr {
            th, td {
                min-width: 76px;
                &:first-child { min-width: 230px; width: 230px; }
            }
            th { border: 1px solid color("polo-blue") !important; font-family: $base-font-semibold !important; } 
            td { border: 1px solid color("manatee") !important; }
            td.celledit {
                padding: 0 !important;
                input {
                    border: none;
                    font-size: 13px !important;
                    width: 74px;
                    text-align: center;
                }
                .form-control:-moz-read-only { -webkit-box-shadow: none; box-shadow: none; }
                .form-control:read-only { -webkit-box-shadow: none; box-shadow: none; }
            }
            .selectcell {
                padding: 0 !important;
                overflow: visible;
                &.active { position: sticky; z-index: 1000 !important; }
            }
            .input-select {
                display: flex;
                overflow: visible;
                div { overflow: visible; } 
                .mars-select { 
                    flex-grow: 1; 
                    .multiselect-native-select .btn-group .multiselect {
                        border: none;
                        height: $icon-medium !important;
                    }
                    .multiselect-container { top: 24px; }
                }
                .btn-deletecell {
                    border: none;
                    width: $icon-large;
                    height: $icon-medium;
                    position: relative;
                    right: unset;
                    top: unset;
                }
            }
        }
    }
}