/****************************************/
/*        Offer Instances               */
/****************************************/

.tata-datatable .link {
    color: #3d86c6;
    cursor: pointer;
}

h1.r6page-header {
    display: inline-block;
    font-size: 16px !important;
    color: #424242 !important;
    background: none;
    margin-top: 0;
}

.tata-datatable .dataTables_wrapper {
    overflow: auto;
    border-radius: 20px !important;
}

/* width */
.tata-datatable .dataTables_wrapper::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

/* Track */
.tata-datatable .dataTables_wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
.tata-datatable .dataTables_wrapper::-webkit-scrollbar-thumb {
    background: #9e9797;
    border-radius: 10px;
}

.tata-datatable table.dataTable {
    width: 98% !important;
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0 5px;
    padding-left: 7px;
    padding-right: 7px;
}

.tata-datatable table.dataTable.no-footer {
    border-bottom: none !important;
}

.tata-datatable table.dataTable thead .sorting {
    background-position-x: left !important;
}

.tata-datatable table.dataTable thead .sorting_asc,
.tata-datatable table.dataTable thead .sorting_desc {
    font-weight: bolder;
    color: #000 !important;
    background-position-x: left !important;
}

.tata-datatable div.dt-buttons {
    z-index: auto;
    left: 5px !important;
    padding: 10px 5px 10px 0px;
    margin-left: 20px !important;
}

.tata-datatable button.dt-button {
    background-color: transparent !important;
    border: 0px solid transparent;
    border-radius: 28px;
    padding: 0;
}

.tata-datatable button.dt-button:hover {
    background-color: transparent !important;
    border: 0;
}

.tata-datatable button.dt-button:active {
    background-color: transparent !important;
    border: 0;
}

body.r6theme-01 .tata-datatable div.dt-button-collection button.dt-button > span,
body.r6theme-01 .tata-datatable div.dt-button-collection div.dt-button,
body.r6theme-01 .tata-datatable div.dt-button-collection a.dt-button {
    background-image: linear-gradient(to bottom, #3d86c6 0, #3d86c6 100%) !important;
    border: 1px solid #3d86c6 !important;
    color: #fff !important;
}

body.r6theme-01 .tata-datatable div.dt-button-collection {
    position: absolute;
    top: 45px !important;
    left: 0 !important;
    min-width: 150px;
    width: auto;
    height: 300px;
    overflow: auto !important;
    margin-top: 3px;
    padding: 4px 8px 4px 8px;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.4);
    background-color: white;
    overflow: hidden;
    z-index: 2002;
    border-radius: 6px !important;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    -ms-column-gap: 8px;
    -o-column-gap: 8px;
    column-gap: 8px;
}

/* width */
.tata-datatable div.dt-button-collection::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

/* Track */
.tata-datatable div.dt-button-collection::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
.tata-datatable div.dt-button-collection::-webkit-scrollbar-thumb {
    background: #9e9797;
    border-radius: 10px;
}

body.r6theme-01 .tata-datatable button.dt-button > span,
body.r6theme-01 r6-datatable.tata-datatable div.dt-button,
body.r6theme-01 r6-datatable.tata-datatable a.dt-button {
    background-color: #fff !important;
    border: 1px solid #796c5f !important;
    color: #796c5f !important;
    font-size: 12px;
    box-shadow: none;
    text-transform: uppercase;
    border-radius: 28px;
    width: 100%;
    box-sizing: border-box;
    font-weight: normal;
    padding: 4px 20px;
    display: inline-block;
    cursor: pointer;
    line-height: 25px;
    overflow: visible;
    outline: none;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

body.r6theme-01 .tata-datatable button.dt-button > span:hover {
    background-image: linear-gradient(to bottom, #3d86c6 0, #3d86c6 100%) !important;
    border: 1px solid #3d86c6 !important;
    color: #fff !important;
    box-shadow: none;
}

body.r6theme-01 .tata-datatable div.dt-button-collection button.dt-button > span:hover,
body.r6theme-01 .tata-datatable .dt-button-collection div.dt-button:hover,
body.r6theme-01 r6-datatable.tata-datatable div.dt-button-collection a.dt-button:hover {
    color: #796c5f !important;
    background: #fff !important;
    border: 1px solid #796c5f !important;
    box-shadow: none;
}

body.r6theme-01 .tata-datatable div.dt-button-collection button.dt-button:not(.active) > span,
body.r6theme-01 .tata-datatable .dt-button-collection div.dt-button:not(.active),
body.r6theme-01 r6-datatable.tata-datatable div.dt-button-collection a.dt-button:not(.active) {
    color: #796c5f !important;
    background: #fff !important;
    border: 1px solid #796c5f !important;
    box-shadow: none;
}

.tata-datatable .dt-button-collection button.dt-button > span,
.tata-datatable .dt-button-collection div.dt-button,
.tata-datatable .dt-button-collection a.dt-button:hover {
    text-transform: none !important;
}

.tata-datatable .dt-button-collection button.dt-button > span:empty,
.tata-datatable .dt-button-collection div.dt-button > span:empty {
    display: none;
}

.tata-datatable .dt-button-collection > div.dt-button-collection-title:empty {
    display: none;
}

body.r6theme-01 .tata-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.next,
body.r6theme-01 .tata-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    background-color: #ea7926;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 6px;
    border: 1px solid #ea7926;
    color: #fff !important;
    width: 80px !important;
    text-align: center;
    padding: 10px;
    cursor: pointer
}

body.r6theme-01 .tata-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover,
body.r6theme-01 .tata-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover {
    background-color: #d46825 !important;
    border: 1px solid #d46825 !important;
}

body.r6theme-01 .tata-datatable .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #f3f3f3;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 6px;
    border: 1px solid #f3f3f3;
    color: #777 !important;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    width: 27px;
}

.tata-datatable div.dataTables_wrapper div.dataTables_paginate {
    padding-top: 20px;
}

.tata-datatable.offer-details div.dataTables_wrapper div.dataTables_paginate {
    display: none;
}

.tata-datatable.offer-details div.dataTables_wrapper .dataTables_info {
    display: none;
}

body.r6theme-01 .tata-datatable .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #4693b0 !important;
    border: 1px solid #4693b0 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.tata-datatable .dataTables_wrapper .dataTables_filter {
    margin-right: 12px !important;
    margin-top: 5px;
    z-index: auto;
    right: 5px !important;
    padding: 10px 5px 10px 0px;
}

.tata-datatable div.dataTables_wrapper div.dataTables_length select {
    width: 75px;
    display: inline-block;
    border: 1px solid #796c5f;
    border-radius: 28px;
    cursor: pointer;
    font-size: 12px;
    height: 34px;
    padding-left: 8px;
}

.tata-datatable .dataTables_wrapper .dataTables_filter input {
    display: inline-block;
    border: 1px solid #796c5f;
    border-radius: 28px;
    font-size: 12px;
    height: 34px;
    padding-left: 8px;
}

.tata-datatable .dataTables_wrapper .dataTables_filter label {
    color: #000;
}

.tata-datatable .paginate_button.current {
    display: inherit !important;
}

.tata-datatable .paginate_button.current,
.tata-datatable .paginate_button:hover {
    background-color: #4693b0 !important;
    background: none !important;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 6px;
    border: 1px solid #4693b0 !important;
    color: #fff;
    width: 80px;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

.tata-datatable .dataTable {
    border: none;
}

.tata-datatable table.dataTable > thead:first-child > tr:first-child > th {
    vertical-align: top;
    white-space: nowrap;
    padding-left: 30px;
}

.tata-datatable table.dataTable > thead > tr > th:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-style: solid;
    border-left-width: 1px;
    border-color: #f3f3f3;
}


.tata-datatable table.dataTable tbody tr {
    margin-bottom: 20px;
    border-radius: 20px;
    background-color: #fff;
    -webkit-box-shadow: 2.5px 4.33px 5px 0 rgba(0, 0, 0, .1);
    box-shadow: 2.5px 4.33px 5px 0 rgba(0, 0, 0, .1);
    overflow: hidden;
    border: 1px solid #f3f3f3;
}

.tata-datatable table.dataTable thead tr th {
    background-color: #f6f6f6;
    font-size: 12px;
    color: #786c5f;
    font-weight: bold;
    padding: 18px 10px;
    border: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.tata-datatable table.dataTable tbody tr td {
    font-size: 14px;
    color: #786c5f;
    padding: 18px 0 18px 30px;
    vertical-align: middle;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
}

.tata-datatable.offer-details table.dataTable tbody tr td {
    font-size: 14px;
    color: #786c5f;
    padding: 18px 18px 18px 30px;
    vertical-align: middle;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
    white-space: nowrap !important;
}

.tata-datatable table.dataTable tbody > tr > td:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-style: solid;
    border-left-width: 1px;
    border-color: #f3f3f3;
}

.tata-datatable table.dataTable tbody tr td:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-style: solid;
    border-right-width: 1px;
    border-color: #f3f3f3;
}

.tata-datatable table.dataTable thead tr th:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-style: solid;
    border-right-width: 1px;
    border-color: #f3f3f3;
}

.td-cell-text-align > div span {
    padding-left: 4px !important;
}

tata-offer-instances-offer-status-container {
    width: 160px;
    height: 38px;
    display: inline-block;
}

.tata-offer-instances-offer-status-selector {
    margin-bottom: 8px;
    border-radius: 28px;
    width: 160px;
}

.tata-offer-instances-offer-usage-selector {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-bottom: 8px;
    border-radius: 28px;
    width: 160px;
}

select.usage-select::-ms-expand {
    display: none;
}

.plain-select {
    vertical-align: middle;
}

.plain-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 8px;
    top: 50%;
    margin-top: -6px;
    height: 0;
    width: 0;
    border-top: 6px solid #000000;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    pointer-events: none;
}

.usagePMChart > div {
    left: 0px;
    top: 0px;
}

.usagePMChart {
    height: 350px;
    width: 1300px;
}

.text-positioning {
    left: 82px;
    top: 98px;
    font-size: 13px;
    position: absolute;
}

.tata-usage-widget-error {
    padding-top: 54px;
    padding-bottom: 133px;
    position: relative;
    text-align: center;
}

.tata-usage-widget-no-data {
    padding-top: 54px;
    padding-bottom: 165px;
    position: relative;
    text-align: center;
}

.change-offer-btn {
    text-transform: uppercase;
    border-radius: 7px;
    font-size: 13px;
    min-width: 137px;
    box-sizing: border-box;
    font-weight: bold;
    padding: 4px 20px;
    background-color: #ea7926;
    border: 1px solid #ea7926;
    color: #fff;
    box-shadow: none;
}

.legends {
    width: 49%;
    display: inline-block;
    color: #000;
    font-weight: bold;
}

.legends-average {
    border-top: 3px solid #ea7926;
    width:20px;
}

.legends-span {
    display: inline-block;
    width: 100%
}

.offer-btn-div {
    width: 50%;
    display: inline-block;
    position: relative;
    bottom: 5px;
}

.usage-trend-widget-bottom {
    margin: -26px 0px;
}

.bold-lines {
    font-weight: bolder;
    font-size: 22px
}

.widgetSize {
    width: 90%;
    height: 387px;
}

.creditOverageChart {
    height: 157px;
}

.creditUsageChart {
    height: 230px;
}

.usageChartContainer {
    overflow: hidden;
    min-height: 352px;
}

.usageChart {
    width: 450px;
    height: 352px;
    overflow: hidden;
}

.usageGrapghHeight {
    height: 387px;
}

.tata-consumption-widget-error {
    height: 370px;
}

.tata-datatable table.dataTable tbody tr td.break-words > div {
    width: 68px;
    word-break: break-all;
    white-space: normal;
}

.first-column-header {
    color: #786c5f !important;
}

.modal-change-overage-limit-width {
    width: 400px;
}

.disabled-usage-dropdwn {
    border: 1px solid #999;
    opacity: 0.5;
}

.legendsFlex{
    display: flex;
    justify-content: center;
    margin: 15px 0 -15px;
}

.legends-span-usageTrend{
    margin:0 10px;
    display:flex;
}

.legends-text{
    margin-top: -8px;
}

.legends-allowance{
    border-top: 3px dashed #000;
    width:20px;
}

.r6widget-height{
    height: 445px;
}

.offer-new-btnCredit{
    width:100%;
}

scrollable-table .tata-datatable table.dataTable{
    overflow-x: auto;
    display: block;
    width:99% !important;
}

/*.scrollable-table .tata-datatable table.dataTable thead, .scrollable-table .tata-datatable table.dataTable tbody{
    min-width: 2400px !important;
}*/

.scrollable-table .tata-datatable table.dataTable thead{
    display: block;
    width: 100%;
}

.scrollable-table .tata-datatable table.dataTable>thead:first-child>tr:first-child>th{
    width: 150px !important;
}

.scrollable-table .tata-datatable table.dataTable>thead>tr>th div {
    width: 150px;
}

.scrollable-table .tata-datatable table.dataTable>thead:first-child>tr:first-child>th:first-child {
    width: 60px !important;
}

.scrollable-table .tata-datatable table.dataTable>thead:first-child>tr:first-child>th:first-child div {
    width: 60px;
}

.scrollable-table .tata-datatable table.dataTable tbody{
    height: 50vh;
    display: inline-block;
    width: auto;
}

.dataTables_empty {
    width: 100vw!important;
}

.scrollable-table .tata-datatable table.dataTable tbody tr td{*/
/*    width: 160px;*/
/*}*/

/*.scrollable-table .tata-datatable table.dataTable tbody tr td div {*/
/*    width: 160px !important;*/
/*}*/

/*.scrollable-table .tata-datatable table.dataTable tbody>tr>td:first-child{*/
/*    width: 70px;*/
/*}*/

/*.scrollable-table .tata-datatable table.dataTable tbody>tr>td:first-child div {*/
/*    width: 70px !important;*/
/*}*/

/*@media screen and (max-height: 1035px) {*/
/*    .scrollable-table .tata-datatable table.dataTable tbody{*/
/*        height: 45vh;*/
/*    }*/
/*}*/

/*@media screen and (max-height: 935px) {*/
/*    .scrollable-table .tata-datatable table.dataTable tbody{*/
/*        height: 40vh;*/
/*    }*/
/*}*/

/*@media screen and (max-height: 860px) {*/
/*    .scrollable-table .tata-datatable table.dataTable tbody{*/
/*        height: 35vh;*/
/*    }*/
/*}*/

/*@media screen and (max-height: 795px) {*/
/*    .scrollable-table .tata-datatable table.dataTable tbody{*/
/*        height: 30vh;*/
/*    }*/
/*    .scrollable-table .tata-datatable table.dataTable{*/
/*        width:98% !important;*/
/*    }*/
/*}*/

/*@media screen and (min-height: 1145px) {*/
/*    .scrollable-table .tata-datatable table.dataTable tbody{*/
/*        height: 55vh;*/
/*    }*/
/*}*/

/*@media screen and (min-height: 1290px) {*/
/*    .scrollable-table .tata-datatable table.dataTable tbody{*/
/*        height: 60vh;*/
/*    }*/
/*}*/

.offerinstanceDetailsWrap{
    background:white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding:6px 0 10px;
    margin-left: 5px;
    margin-right: 5px;
}

.offerinstanceDetailsWrap .tata-datatable table.dataTable{
    padding:0px;
}

.offerinstanceDetailsWrap table.dataTable thead .sorting_asc{
    background-image:none;
}

.offerinstanceDetailsWrap .tata-datatable table.dataTable thead tr th{
    vertical-align: middle !important;
    padding:10px;
}

.offerinstanceDetailsWrap .addOns-table-new{
    margin: 10px auto !important;
    width: 98%;
}

.offerinstanceDetailsWrap .addOns-table-new th{
    background-color:#f6f6f6 !important;
    border-radius: 20px;
    cursor:pointer !important;
    padding:20px 10px 20px 30px !important;
}

.offerinstanceDetailsWrap .addOns-flex-with-border{
    display: flex;
    border: 1px solid #eee;
    padding: 10px;
    margin: 10px 0;
    border-radius: 20px;
}
.offerinstanceDetailsWrap .addOns-flex-with-border div {
    width: 50%;
    padding-left:30px;
}

.offerinstanceDetailsWrap .addOns-table-new .r6icon-allowance{
    height:14px !important;
}

.offerinstanceDetailsWrap .addOns-flex-with-border .r6table-datetime{
    padding-left:0px;
}

.pt-5p{
    padding-top:5px;
}

body.r6theme-01 .r6offerpanel-title {
    margin-top: 3px;
}

body.r6theme-01 .r6offerpanel-title .r6icon-infocircle {
    margin-top: -7px;
    position: absolute;
}

body.r6theme-01 .r6productcatalog-recordtiles2{
    padding-left:150px !important;
    position: absolute;
    width: 43% !important;
}

.disabled-date-input .ui-datepicker-trigger, .disabled-date-input .r6datepicker.r6btn--inputdelete{
    pointer-events: none;
    background-color: rgb(235, 235, 228);
}

body.r6theme-01 .r6productcatalog-content .r6popup--alignright{
    right:12% !important;
}