{"id":34791,"date":"2022-10-31T14:32:11","date_gmt":"2022-10-31T09:02:11","guid":{"rendered":"http:\/\/ismiletechnologies.com\/?page_id=34791"},"modified":"2023-07-07T22:16:55","modified_gmt":"2023-07-07T16:46:55","slug":"dataops-roi-calculator","status":"publish","type":"page","link":"https:\/\/ismiletechnologies.com\/en_us\/dataops-roi-calculator\/","title":{"rendered":"DataOps Roi Calculator in USA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"34791\" class=\"elementor elementor-34791\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b066c70 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b066c70\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-972e683\" data-id=\"972e683\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6c28ac0 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"6c28ac0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Improve the Communication, Integration &amp; Automation of data flow across your Organization<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7fa4c79 elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"7fa4c79\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Calculate your DataOps ROI<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-045b51e elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"045b51e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1093b3f elementor-widget elementor-widget-html\" data-id=\"1093b3f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<html>\r\n\r\n<head>\r\n    \r\n<style>\r\n*,\r\n*::after,\r\n*::before {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: inherit;\r\n}\r\n\r\nhtml {\r\n    font-size: 62.5%;\r\n}\r\n\r\n\r\n@media (max-width: 991px) {\r\n    html {\r\n        font-size: 55%;\r\n    }\r\n}\r\n\r\n@media (max-width: 575px) {\r\n    html {\r\n        font-size: 40%;\r\n    }\r\n}\r\n\r\n#hide\r\n{\r\ndisplay: none;\r\n}\r\n\r\n#note\r\n{\r\ntext-align:left;\r\nfont-size: 13px;\r\nline-height: 1.4;\r\nfont-style: italic;\r\n}\r\n\r\n#heading2{\r\nfont-weight: 600;\r\ncolor: #0e314c;\r\n}\r\n\r\np{\r\n    line-height: 1.4;\r\n    padding-top:5px;\r\n}\r\n\r\nh3{\r\n    line-height: 1.4;\r\n    padding-top:5px;\r\n    font-size: 15px;\r\n    font-weight: 400;\r\n    color: #0e314c;\r\n}\r\n\r\n.highlight{\r\n    background-color: #f9f9f9;\r\n    padding: 7px 10px 7px 15px;\r\n}\r\n\r\n.btn\r\n{\r\n    padding: 10px 30px !important;\r\n    border-radius: 3px !important;\r\n}\r\n\r\n\r\n.w70\r\n{\r\nwidth:70%;\r\n}\r\n\r\n.w30\r\n{\r\nwidth:30%;\r\n}\r\n\r\n\r\n\r\n\/* Create two equal columns that floats next to each other *\/\r\n.columns {\r\n  float: left;\r\n  width: 50%;\r\n  padding: 10px;\r\n}\r\n\r\n.column1 {\r\n  float: left;\r\n  width: 60%;\r\n  padding: 10px;\r\n}\r\n\r\n@media (max-width: 920px) {\r\n.column1 {\r\n  float: left;\r\n  width: 100%;\r\n  padding: 10px;\r\n}\r\n}\r\n\r\n.column2 {\r\n  float: left;\r\n  width: 40%;\r\n  padding: 10px;\r\n}\r\n\r\n@media (max-width: 920px) {\r\n.column2 {\r\n  float: left;\r\n  width: 100%;\r\n}\r\n\r\n.chart-box{\r\n    margin: 0px;\r\n}\r\n\r\n}\r\n\r\n@media (max-width: 390px)\r\n{\r\n    #sec{\r\n    padding-top: 0px;\r\n}\r\n}\r\n\r\n\r\n\/* Clear floats after the columns *\/\r\n.rows:after {\r\n  content: \"\";\r\n  display: table;\r\n  clear: both;\r\n  \r\n}\r\n\r\n\/* Responsive layout - makes the two columns stack on top of each other instead of next to each other *\/\r\n@media screen and (max-width: 600px) {\r\n  .columns {\r\n  \r\n    width: 100% !important;\r\n  }\r\n}\r\n\r\n\r\n\t\r\n.container {\r\n  max-width: 60em;\r\n  margin-right: auto;\r\n  margin-left: auto;\r\n}\r\n\r\n.col {\r\n  padding: 1em;\r\n  margin: 0 2px 2px 0;\r\n  background: #b3e888;\r\n}\r\n\r\n\r\nbody {\r\n    box-sizing: border-box;\r\n    font-family: 'Poppins', sans-serif;\r\n    font-weight: 400;\r\n    line-height: 1.5;\r\n    color: rgb(90, 99, 114);\r\n}\r\n\r\n.heading-primary {\r\n    color: rgb(140, 146, 157);\r\n    font-weight: 400;\r\n    margin-bottom: 1.25rem;\r\n    text-transform: uppercase;\r\n    text-align: center;\r\n    font-size: 3rem;\r\n}\r\n.heading-secondary {\r\n    font-size: 1.5rem;\r\n    font-weight: 200;\r\n    margin-bottom: 1.75rem;\r\n    text-align: center;\r\n}\r\n\r\nmain {\r\n    max-width: 66rem;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* Layout *\/\r\n\r\n.row {\r\n    margin: 0 auto;\r\n    display: flex;\r\n    flex-direction: row;\r\n}\r\n\r\n[class^=\"col-\"] {\r\n    float: left;\r\n}\r\n\r\n[class^=\"col-\"]:not(:last-child) {\r\n    margin-right: 1.5rem;\r\n}\r\n\r\n.col-1-of-2 {\r\n    width: calc(50% - 0.5 * 1.5rem);\r\n}\r\n\r\n\/*.col-1-of-3 {\r\n    width: calc((100% - 2 * 1.5rem) \/ 2);\r\n}\r\n*\/\r\n.col-2-of-3 {\r\n    width: calc((200%  -  1.5rem) \/ 3);\r\n}\r\n\r\n.col-1-of-4 {\r\n    width: calc(25% - 0.75 * 1.5rem);\r\n}\r\n\r\n.col-2-of-4 {\r\n    width: calc(50% -  0.5 * 1.5rem);\r\n}\r\n\r\n.col-3-of-4 {\r\n    width: calc(75% - 0.25 * 1.5rem);\r\n}\r\n\r\n\/* CHART *\/\r\n.chart-box {\r\n    max-width: 66rem;\r\n    margin: 0px 0px 0px 30px;\r\n    padding: 3rem 0 1rem 0;\r\n    display: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n    position: relative;\r\n    background-color: #f9f9f9;\r\n    border-radius: 5px;\r\n}\r\n.chart {\r\n    width: 50%;\r\n    height: 50%;\r\n    position: relative;\r\n    \r\n}\r\n\r\n.tooltip {\r\n    position: absolute;\r\n    display: none;\r\n    padding: .5rem;\r\n    border-radius: .3rem;\r\n    pointer-events: none;\r\n    background-color: rgba(0, 0, 0, .7);\r\n    color: #fff;\r\n    transition: .3s;\r\n    z-index: 100;\r\n    align-items: center;\r\n}\r\n.tooltip:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    width: 0;\r\n    height: 0;\r\n    border-width: .6rem;\r\n    border-style: solid;\r\n}\r\n\r\n.tooltip.north {\r\n    transform: translate(-50%, .6rem);\r\n    left: 0px;\r\n}\r\n.tooltip.north:after {\r\n    border-color: transparent transparent rgba(0, 0, 0, .7) transparent;\r\n    top: -1.2rem;\r\n    left: calc(50% - .6rem);\r\n}\r\n\r\n.tooltip.west {\r\n    transform: translate(calc(-100% - .6rem), -50%);\r\n}\r\n.tooltip.west:after {\r\n    border-color: transparent transparent transparent rgba(0, 0, 0, .7);\r\n    top: calc(50% - .6rem);\r\n    left: 100%;\r\n}\r\n\r\n.tooltip.east {\r\n    transform: translate(.6rem, -50%);\r\n}\r\n.tooltip.east:after {\r\n    border-color: transparent rgba(0, 0, 0, .7) transparent transparent;\r\n    top: calc(50% - .6rem);\r\n    left: -1.2rem\r\n}\r\n\r\n\r\n.tooltip.south {\r\n    transform: translate(-50%, calc(-100% - .6rem));\r\n}\r\n.tooltip.south:after {\r\n    border-color: rgba(0, 0, 0, .7) transparent transparent transparent;\r\n    top: 100%;\r\n    left: calc(50% - .6rem);\r\n}\r\n\r\n.tooltip .color-icon {\r\n    width: 1.5rem;\r\n    height: 1.5rem;\r\n    margin-right: .5rem;\r\n    border: 2px solid #ccc;\r\n    flex: 1 0 auto;\r\n}\r\n.tooltip .label {\r\n    flex: 2 0 auto;\r\n}\r\n.chart path{\r\n    opacity: .9;\r\n    stroke-width: 2;\r\n    stroke: #fff;\r\n}\r\n\r\n.chart path:hover{\r\n    opacity: 1;\r\n    stroke: #ccc;\r\n    z-index: 50;\r\n}\r\n\r\n.estimate {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    text-align: center;\r\n}\r\n\r\n.estimate__heading {\r\n    text-transform: uppercase;\r\n    font-size: 1.5rem;\r\n\tline-height: 1.3;\r\n    color: #14A49C;\r\n    width: 100%;\r\n    margin-bottom: 0rem;\r\n}\r\n\r\n@media (max-width: 677px) {\r\n    .estimate__heading {\r\n        margin-bottom: .5rem;\r\n    }\r\n}\r\n\r\n@media (max-width: 400px) {\r\n    .estimate__heading {\r\n        margin-bottom: 0;\r\n    }\r\n}\r\n\r\n.estimate__value {\r\n    font-size: 5.5rem;\r\n    color: #14A49C;\r\n    font-weight: 100;\r\n}\r\n\r\n@media (max-width: 677px) {\r\n    .estimate__value {\r\n       font-size: 4rem;\r\n    }\r\n}\r\n\r\n.estimate__value:after {\r\n    content: '%';\r\n    font-size: 2.5rem;\r\n    vertical-align: top;\r\n}\r\n\r\n.info {\r\n    display: inline-block;\r\n    vertical-align: top;\r\n    width: 2.5rem;\r\n    height: 2.5rem;\r\n    text-align: center;\r\n}\r\n\r\n.info__tooltip {\r\n    position: absolute;\r\n    min-width: 45rem;\r\n    width: auto;\r\n    transform: translate(calc( -100% - 1rem), 3rem);\r\n\r\n    display: none;\r\n    background: #fff;\r\n    z-index: 100;\r\n    box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.15);\r\n    border-radius: 3px;\r\n    padding: 1.5rem;\r\n    font-size: 1.5rem;\r\n    pointer-events: none;\r\n    text-align: left;\r\n}\r\n\r\n.info__tooltip.north {\r\n    transform: translate(calc( -100% - 1rem), calc(-100% - 1rem));\r\n}\r\n\r\n.info__header {\r\n    text-align: center;\r\n    font-weight: 400;\r\n}\r\n\r\n.info__icon {\r\n    background-image: url(data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTkgMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+aW5mbyBidXR0b24gY29weSAxMDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9IkFHLUNhbGN1bGF0b3ItdjItLS1Nb2JpbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MzIuMDAwMDAwLCAtMjQyLjAwMDAwMCkiPiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wMDAwMDAsIDI0MS4wMDAwMDApIj4gICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzOS4wMDAwMDAsIDAuMDAwMDAwKSI+ICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNiI+ICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImluZm8tYnV0dG9uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzEuMDAwMDAwLCAxLjAwMDAwMCkiPiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOS41LDAgQzQuMjQyOTM3NSwwIDAsNC4yNDI5Mzc1IDAsOS41IEMwLDE0Ljc0MjIxODggNC4yNDI5Mzc1LDE5IDkuNSwxOSBDMTQuNzQyODEyNSwxOSAxOSwxNC43NDM0MDYyIDE5LDkuNSBDMTksNC4yNDI5Mzc1IDE0Ljc0MjgxMjUsMCA5LjUsMCBMOS41LDAgWiIgaWQ9IkltcG9ydGVkLUxheWVycyIgZmlsbD0iIzRBOTBFMiI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2Utd2lkdGg9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDguMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IkZpbGwtMSIgcG9pbnRzPSIwIDExIDMgMTEgMyA0IDAgNCI+PC9wb2x5Z29uPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMsMS41MDEwODcyNyBDMywzLjQ5ODE4Nzg4IDAsMy40OTgxODc4OCAwLDEuNTAxMDg3MjcgQzAsLTAuNTAwMzYyNDI0IDMsLTAuNTAwMzYyNDI0IDMsMS41MDEwODcyNyIgaWQ9IkZpbGwtMiI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgICAgICAgICAgICAgPC9nPiAgICAgICAgICAgICAgICAgICAgPC9nPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);\r\n    width: 2rem;\r\n    height: 2rem;\r\n    background-size: 2rem;\r\n    display: inline-block;\r\n    cursor: pointer;\r\n}\r\n\r\n.info__icon:hover + .info__tooltip {\r\n    display: inline-block;\r\n}\r\n\r\n.chart__description {\r\n    font-size: 1.6rem;\r\n    padding-top: 2.5rem;\r\n    position: relative;\r\n    justify-content: space-between;\r\n    width: 80%;\r\n}\r\n\r\n.chart__legend {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    margin-bottom: 1rem;\r\n\tflex-direction: column;\r\n    align-items: center;\r\n\tpadding: 5px 0px 7px 0px;\r\n}\r\n\r\n.chart__description-label {\r\n    font-size: 1.6rem;\r\n    font-weight: 500;\r\n}\r\n\r\n.chart__description-value {\r\n    font-size: 3rem;\r\n    font-weight: 400;\r\n}\r\n\r\n.label__colored + .chart__description-value {\r\n    margin-left: 2.6rem;\r\n}\r\n\r\n.chart__description-value:before {\r\n    content: '$';\r\n}\r\n\r\n.label__colored:before {\r\n    content: '';\r\n    display: inline-block;\r\n    border-radius: 50%;\r\n    width: 1.6rem;\r\n    height: 1.6rem;\r\n    margin-right: .7rem;\r\n    transform: translateY(.2rem);\r\n}\r\n\r\n.label__colored-1:before {\r\n    background: #F79082;\r\n}\r\n\r\n.label__colored-2:before {\r\n    background: red;\r\n}\r\n\r\n.label__colored-3:before {\r\n    background: #5A6372;\r\n}\r\n\r\n.label__colored-4:before {\r\n    background: #4098FF;\r\n}\r\n\r\n.label__colored-5:before {\r\n    background: #c32ae9;\r\n}\r\n\r\n.label--sub {\r\n    display: block;\r\n    font-size: 1.4rem;\r\n}\r\n\r\n\/* Controllers *\/\r\n.controllers-box {\r\n    margin-bottom: 5.5rem;\r\n}\r\n\r\n\/* Range Slider *\/\r\n\r\n.calc__slider {\r\n    -webkit-appearance: none;\r\n    width: 100%;\r\n    height: 1rem;\r\n    border-radius: 5px;\r\n    outline: none;\r\n    -webkit-transition: .2s;\r\n    transition: opacity .2s;\r\n    display: block;\r\n    margin-top: 1.2rem;\r\n    box-shadow: inset 0 .1rem .3rem #555;\r\n    background-image: linear-gradient(90deg, #4098FF 0%, #4098FF 50%, white 50%);\r\n}\r\n\r\n.calc__slider::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    appearance: none;\r\n\r\n    background: #fff;\r\n    border: 1px solid #ddd;\r\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.4);\r\n    width: 3rem;\r\n    height: 3rem;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    z-index: 1;\r\n}\r\n\r\n.calc__slider::-moz-range-thumb {\r\n    width: 3rem;\r\n    height: 3rem;\r\n    border-radius: 50%;\r\n    background: #4CAF50;\r\n    cursor: pointer;\r\n}\r\n\r\n\/* input box *\/\r\n.controller-row {\r\n    flex-wrap: wrap;\r\n    justify-content: space-between;\r\n}\r\n\r\n.controller-row:not(:last-child) {\r\n    margin-bottom: 1.7rem;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .controller-row {\r\n        height: 5rem;\r\n    }\r\n    .controller-row [class^=\"col-\"]:nth-child(2) {\r\n        order: 1;\r\n        flex: 0 1 100%;\r\n    }\r\n    .controller-row [class^=\"col-\"]:nth-child(1),\r\n    .controller-row [class^=\"col-\"]:nth-child(3){\r\n        flex: 0 1 48%;\r\n    }\r\n}\r\n\r\n.calc__input-group {\r\n    width: 100%;\r\n    position: relative;\r\n    display: table;\r\n    border-collapse: separate;\r\n    color: #5A6372;\r\n    font-size: 1.8rem;\r\n    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);\r\n    padding-left: 1rem;\r\n}\r\n.calc__input-group-addon {\r\n    display: table-cell;\r\n    width: 4.5rem;\r\n    height: 4rem;\r\n    background-color: #FAFAFA;\r\n    padding: 0;\r\n    color: #5A6372;\r\n    text-align: center;\r\n    border: 1px solid #ccc;\r\n    vertical-align: middle;\r\n    border-radius: 0;\r\n    font-weight: 300;\r\n}\r\n.calc__input-group-addon:first-child {\r\n    border-right: 0;\r\n}\r\n.calc__input-group-addon:nth-child(2) {\r\n    border-left: 0;\r\n}\r\n\r\n\r\n.calc__input {\r\n    display: table-cell;\r\n    position: relative;\r\n    z-index: 2;\r\n    width: 100%;\r\n    padding: .6rem 1.2rem;\r\n    color: #5A6372;\r\n    background-color: #fff;\r\n    border: 1px solid #ccc;\r\n    border-radius: .4rem;\r\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\r\n    height: 4rem;\r\n    font-size: 2rem;\r\n    font-weight: 300;\r\n}\r\n.calc__input:focus {\r\n    outline: 0;\r\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);\r\n}\r\n.calc__input-group .calc__input:first-child {\r\n    border-top-right-radius: 0;\r\n    border-bottom-right-radius: 0;\r\n}\r\n.calc__input-group .calc__input:nth-child(2) {\r\n    border-top-left-radius: 0;\r\n    border-bottom-left-radius: 0;\r\n}\r\n\r\n.info-box {\r\n    display: table-cell;\r\n    width: 3.5rem;\r\n    text-align: right;\r\n    vertical-align: top;\r\n}\r\n\r\n.section-chart-controllers__footer {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    padding: 0 0 30px 0;\r\n\tflex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n.btn {\r\n    display: inline-block;\r\n    font-weight: 500;\r\n    border-width: 2px;\r\n    border-radius: 4rem;\r\n    cursor: pointer;\r\n    outline: none;\r\n    transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear;\r\n}\r\n\r\n.btn:hover {\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.btn:active {\r\n    transform: translateY(0);\r\n}\r\n\r\n.btn-link {\r\n    font-size: 1.7rem;\r\n    padding: 0;\r\n    text-decoration: none;\r\n    color: #4098FF;\r\n    border-color: transparent;\r\n}\r\n\r\n.btn-link:hover,\r\n.btn-link:focus {\r\n    background: transparent;\r\n}\r\n\r\n.btn-secondary {\r\n    \/\/background-color: transparent;\r\n    \/\/border-color: #fff;\r\n    color: #fff;\r\n    padding: 1rem 3.5rem;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.btn-secondary:hover,\r\n.btn-secondary:focus {\r\n    background-color: #4098FF;\r\n    color: #fff;\r\n}\r\n\r\n\/* DIALOG *\/\r\n.dialog {\r\n    display: none;\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    z-index: 10;\r\n    min-height: 100%;\r\n    overflow: auto;\r\n}\r\n.dialog.open {\r\n    display: block;\r\n}\r\n\r\n.modal-backdrop {\r\n    opacity: 0.75;\r\n    background-color: #232933;\r\n    position: fixed;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    z-index: 1040;\r\n}\r\n\r\n.modal {\r\n    position: absolute;\r\n    box-shadow: 0 5px 15px rgba(0,0,0,.5);\r\n    border-radius: .5rem;\r\n    top: 1rem;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    z-index: 1041;\r\n    background-color: #fff;\r\n    color: #5A6372;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin: 0 auto;\r\n    padding: 1.5rem 0;\r\n    width: 90%;\r\n}\r\n@media(min-width: 992px) {\r\n    .modal {\r\n        width: 900px;\r\n    }\r\n}\r\n@media(min-width: 768px) {\r\n    .modal {\r\n        width: 600px;\r\n    }\r\n}\r\n\r\n.modal__header {\r\n    padding: 1rem 2rem;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    border-bottom: 1px solid rgb(229, 229, 229);\r\n}\r\n\r\n.modal__header__close {\r\n    cursor: pointer;\r\n    font-size: 2.1rem;\r\n    font-weight: bold;\r\n    line-height: 1;\r\n    color: #000;\r\n    text-shadow: 0 1px 0 #fff;\r\n    transform: translateY(-.5rem);\r\n    opacity: 0.5;\r\n    transition: opacity .15s;\r\n}\r\n.modal__header__close:hover {\r\n    opacity: 0.7;\r\n}\r\n\r\n.modal__header__text {\r\n    font-size: 1.4rem;\r\n}\r\n\r\n.modal__content {\r\n    padding: 1rem 2rem;\r\n    text-align: center;\r\n    color: rgb(90, 99, 114);\r\n    font-size: 1.4rem;\r\n}\r\n\r\n.modal__content p:not(:last-child) {\r\n    margin-bottom: 2rem;\r\n}\r\n\r\n.modal__content-header {\r\n    text-decoration: underline;\r\n    font-size: 1.6rem;\r\n    font-weight: 400;\r\n}\r\n\r\n.modal__footer {\r\n    padding: 1rem 2rem;\r\n}\r\n\r\n<\/style>    \r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"rows\">\r\n  <div class=\"column1\" style=\"\">\r\n    \r\n\t<section class=\"section-chart-controllers\">\r\n            <div class=\"controllers-box\">\r\n                <div class=\"controller-row row\" id=\"price\">\r\n                    <div class=\"w70\">\r\n                        <h3 class=\"chart__description-label\">Monthly DataOps Subscription Rate ($)<\/h3>\r\n\t\t\t\t\t\t\r\n                    <\/div>\r\n                    <div class=\"col-1-of-3\" id=\"hide\">\r\n                        <input type=\"range\" class=\"calc__slider\">\r\n                    <\/div>\r\n\t\t\t\t\t\r\n                    <div class=\"w30\">\r\n                        <span class=\"calc__input-group\">\r\n                            <span class=\"calc__input-group-addon\">$<\/span>\r\n                            <input type=\"number\" class=\"calc__input\" placeholder=\"Subscription Rate\">\r\n                            \r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t<hr>\r\n\t\t\t<br>\r\n\t\t\t<br>\r\n\t\t<div id=\"sec\">\r\n\t\t<h2 id=\"heading2\"> REDUCED EXPENSE BENEFITS (ANNUAL) <\/h2>\r\n\t\t\r\n\t\t<br>\r\n\t\t<hr>\r\n\t\t<br>\r\n\t\t\r\n\t\t<p class=\"info__body\" style=\"font-size: 13px\">\r\n                        The burden rate, expressed as percentage, that is applied to a base salary to cover employee benefits. Typically ranges between 20% and 35%.\r\n                        <\/p>\r\n\t\t<div class=\"controller-row row\" id=\"tax_rate\">\r\n                    <div class=\"w70\">\r\n                        \r\n                        \r\n                        <h3 class=\"chart__description-label \">Burden Rate (%)<\/h3>\r\n\t\t\t\t\t\t\r\n                    <\/div>\r\n                    <div class=\"col-1-of-3\" id=\"hide\">\r\n                        <input type=\"range\" class=\"calc__slider\">\r\n                    <\/div>\r\n                    <div class=\"w30\">\r\n                        <span class=\"calc__input-group\">\r\n                            <input type=\"number\" class=\"calc__input\" placeholder=\"Burden Rate\">\r\n                            <span class=\"calc__input-group-addon\">%<\/span>\r\n                            \r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\t\t<br>\r\n\t\t<h3 class=\"highlight\"> DataOps automation yields the option of right-sizing the DevOps Engineering staff <\/h3>\r\n\t\t\r\n\t\t<br>\r\n\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"controller-row row\"  id=\"term\">\r\n                    <div class=\"w70\">\r\n                        <h3 class=\"chart__description-label\">Number of client DevOps Engineers that were rightsized\t<\/h3>\r\n                    <\/div>\r\n                    <div class=\"col-1-of-3\" id=\"hide\">\r\n                        <input type=\"range\" class=\"calc__slider\">\r\n                    <\/div>\r\n                    <div class=\"w30\">\r\n                        <span class=\"calc__input-group\">\r\n                            <input type=\"number\" class=\"calc__input\" placeholder=\"No. of DevOps Engineers\">\r\n                            \r\n                            \r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\t\t\t\t\r\n                <div class=\"controller-row row\" id=\"cash_down_payment\">\r\n\t\t\t\t\r\n                    <div class=\"w70\">\r\n                        <h3 class=\"chart__description-label label__colored label__colored-4\">Average client DevOps Engineer base salary ($)<\/h3>\r\n                    <\/div>\r\n                    <div class=\"col-1-of-3\" id=\"hide\">\r\n                        <input type=\"range\" class=\"calc__slider\">\r\n                    <\/div>\r\n                    <div class=\"w30\">\r\n                        <span class=\"calc__input-group\">\r\n                            <span class=\"calc__input-group-addon\">$<\/span>\r\n                            <input type=\"number\" class=\"calc__input\" placeholder=\"DevOps Engineer base salary\">\r\n                            \r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t<div>\r\n\t\t    <br>\r\n\t\t<hr>\r\n\t\t<br>\r\n\t\t<h3 class=\"highlight\"> Provides the Client access to a diverse set of DataOps skills that would be overly expensive to hire in-house. <\/h3>\r\n\t\t\r\n\t\t\r\n\t\t\r\n        <br>\t\t\r\n\t\t<\/div>\r\n\t\t\t\t\r\n                <div class=\"controller-row row\" id=\"principle\">\r\n                    <div class=\"w70\">\r\n                        <h3 class=\"chart__description-label label__colored label__colored-5\">DataOps Principle Architect annual base salary ($)<\/h3>\r\n                    <\/div>\r\n                    <div class=\"col-1-of-3\" id=\"hide\">\r\n                        <input type=\"range\" class=\"calc__slider\">\r\n                    <\/div>\r\n                    <div class=\"w30\">\r\n                        <span class=\"calc__input-group\">\r\n                            <span class=\"calc__input-group-addon\">$<\/span>\r\n                            <input type=\"number\" class=\"calc__input\" placeholder=\"DataOps Architect base salary\">\r\n                            \r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\t\t\t\t\r\n\t\t<div>\r\n\t\t<hr>\r\n\t\t<br>\r\n\t\t<h3 class=\"highlight\"> Reduced recruiting expense. Provides the Client access to a diverse set of DataOps skills that would be overly expensive to hire in-house <\/h3>\r\n\t\t\r\n\t\t\r\n\t\t\r\n        <br>\t\t\r\n\t\t<\/div>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"controller-row row\"  id=\"term2\">\r\n                    <div class=\"w70\">\r\n                        <h3 class=\"chart__description-label\">The number of new DataOps SME's with unique skills<\/h3>\r\n                    <\/div>\r\n                    <div class=\"col-1-of-3\" id=\"hide\">\r\n                        <input type=\"range\" class=\"calc__slider\">\r\n                    <\/div>\r\n                    <div class=\"w30\">\r\n                        <span class=\"calc__input-group\">\r\n                            <input type=\"number\" disabled class=\"calc__input\" placeholder=\"No. of Data Ops SME's\">\r\n                            \r\n                            \r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"controller-row row\" id=\"apr\">\r\n                    <div class=\"w70\">\r\n                        <h3 class=\"chart__description-label label__colored label__colored-2\">The expense avoided advertising, finding, and hiring specific DataOps expertise. ($)<\/h3>\r\n                    <\/div>\r\n                    <div class=\"col-1-of-3\" id=\"hide\">\r\n                        <input type=\"range\" class=\"calc__slider\">\r\n                    <\/div>\r\n                    <div class=\"w30\">\r\n                        <span class=\"calc__input-group\">\r\n                            <span class=\"calc__input-group-addon\">$<\/span>\r\n\t\t\t\t\t\t\t<input type=\"number\" class=\"calc__input\" placeholder=\"Expense avoided\">\r\n                            \r\n                            \r\n                        <\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <hr>   \r\n            <br>\r\n                <p id=\"note\"> Note: Pricing reflected is based off our low cost model, actual numbers may vary based of your unique requirements. <\/p>\r\n                \r\n            <\/div>\r\n            \r\n        <\/section>\r\n    \t\r\n  <\/div>\r\n  \r\n  <div class=\"column2\" style=\"\">\r\n    \r\n\t<section class=\"section-chart\">\r\n\t\r\n            <div class=\"chart-box\">\r\n\t\t\t\r\n                <div class=\"chart\"><\/div>\r\n\t\t\t\t\r\n                <div class=\"chart__description\">\r\n\t\t\t\t\r\n                    <div class=\"chart__legend\">\r\n                        <div class=\"legend__box\">\r\n\t\t\t\t\t\t\r\n                            <h3 class=\"chart__description-label\">\r\n                                1st YEAR SAVINGS\r\n                            <\/h3>\r\n                            <p style=\"text-align:center;\" class=\"chart__description-value est_total_cost\">31,550<\/p>\r\n                        <\/div>\r\n                        \r\n                    <\/div>\r\n\t\t\t\t\t\r\n\t\t\t<div class=\"section-chart-controllers__footer\">\r\n                <button class=\"btn btn-secondary btn__reset\">\r\n                    Reset\r\n                <\/button>\r\n            <\/div>\r\n\t\t\t\t\t\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>     \r\n\t\r\n  <\/div>\r\n<\/div>\r\n    \r\n\t\r\n<script src=\"https:\/\/d3js.org\/d3.v4.min.js\"><\/script>\r\n<script>\r\n\r\n\r\nvar inputValues = {\r\n    price: {\r\n\t\/\/monthly dataops subs value\r\n        _value: 10000,\r\n        set value(val) {\r\n            this._value = parseFloat(val);\r\n           \r\n           \r\n        },\r\n        get value() {\r\n            return this._value;\r\n        },\r\n        min: 10000,\r\n        max: 100000,\r\n        step: 5000,\r\n        reset: function () {\r\n            this._value = 10000;\r\n        }\r\n    },\r\n\t\r\n    cash_down_payment: {\r\n        _value: 50000,\r\n        set value(val) {\r\n            this._value = parseFloat(val);\r\n           \r\n        },\r\n        get value() {\r\n            return this._value;\r\n        },\r\n        min: 0,\r\n        get max() {\r\n            return inputValues.price.value;\r\n        },\r\n        step: 500,\r\n        reset: function () {\r\n            this._value = 50000;\r\n        }\r\n    },\r\n\t\r\n    \r\n\tprinciple: {\r\n        min: 100000,\r\n        max: 300000,\r\n        step: 500,\r\n        _value: 200000,\r\n        get value() {\r\n            return parseFloat(this._value);\r\n        },\r\n        set value(val) {\r\n            this._value = val;\r\n        },\r\n        reset: function () {\r\n            this._value = 200000;\r\n        }\r\n    },\r\n    tax_rate: {\r\n        min: 10,\r\n        max: 50,\r\n        step: 0.1,\r\n        _value: 30,\r\n        get value() {\r\n            return parseFloat(this._value);\r\n        },\r\n        set value(val) {\r\n            this._value = val;\r\n        },\r\n        reset: function () {\r\n            this._value = 30;\r\n        }\r\n    },\r\n    term: {\r\n        min: 1,\r\n        max: 10,\r\n        step: 1,\r\n        _value: 2,\r\n        get value() {\r\n            return parseFloat(this._value);\r\n        },\r\n        set value(val) {\r\n            this._value = val;\r\n        },\r\n        reset: function () {\r\n            this._value = 2;\r\n        }\r\n    },\r\n    apr: {\r\n        min: 1000,\r\n        max: 10000,\r\n        step: 500,\r\n        _value: 7000,\r\n        get value() {\r\n            return parseFloat(this._value);\r\n        },\r\n        set value(val) {\r\n            this._value = val;\r\n        },\r\n        reset: function () {\r\n            this._value = 7000;\r\n        }\r\n    },\r\n\tterm2: {\r\n        min: 1,\r\n        max: 10,\r\n        step: 1,\r\n        _value: 2,\r\n        get value() {\r\n            return parseFloat(this._value);\r\n        },\r\n        set value(val) {\r\n            this._value = val;\r\n        },\r\n        reset: function () {\r\n            this._value = 2;\r\n        }\r\n    },\r\n};\r\n\r\nvar legendData = {\r\n  get interest() {\r\n     \r\n\t   \r\n\t  \r\n      return this.est_total_cost - inputValues.price.value - this.taxes;\r\n  },\r\n  get taxes() {\r\n      return inputValues.price.value * inputValues.tax_rate.value \/ 100;\r\n  },\r\n  get est_total_cost() {\r\n  var burden_rate  = inputValues.tax_rate.value;\r\n  var devops_burden_annual_value = inputValues.principle.value;\r\n  var per_devops_burden_annual_value = devops_burden_annual_value * burden_rate\/100;\r\n  var no_dev_ops_pro_principle =  inputValues.cash_down_payment.value * inputValues.term.value ; \r\n  var per_30_no_dev_ops = (inputValues.cash_down_payment.value * inputValues.term.value) * burden_rate\/100;\r\n  var product_expense_avoid = inputValues.term2.value * inputValues.apr.value;\r\n      return no_dev_ops_pro_principle + per_30_no_dev_ops + devops_burden_annual_value + per_devops_burden_annual_value + product_expense_avoid;\r\n  \/\/  return this.est_m_payment * inputValues.term.value + inputValues.cash_down_payment.value + inputValues.trade_in_value.value;\r\n  },\r\n  get est_m_payment() {\r\n     var burden_rate  = inputValues.tax_rate.value;\r\n  var devops_burden_annual_value = inputValues.principle.value;\r\n  var per_devops_burden_annual_value = devops_burden_annual_value * burden_rate\/100;\r\n  var no_dev_ops_pro_principle =  inputValues.cash_down_payment.value * inputValues.term.value ; \r\n  var per_30_no_dev_ops = (inputValues.cash_down_payment.value * inputValues.term.value) * burden_rate\/100;\r\n  var product_expense_avoid = inputValues.term2.value * inputValues.apr.value;\r\n  var  y = no_dev_ops_pro_principle + per_30_no_dev_ops + devops_burden_annual_value + per_devops_burden_annual_value + product_expense_avoid;;\r\n   \r\n   var x_p = inputValues.price.value * 12;\r\n   var profit = y - x_p;\r\n   var roi = profit\/x_p *100;\r\n   return roi;\r\n  }\r\n\r\n};\r\n\r\nvar chartData = [\r\n  {\r\n      label: 'Burden Rate',\r\n      id: 'burden_rate',\r\n      color: '#DBEFAF',\r\n      get value() {\r\n          return inputValues.tax_rate.value;\r\n      }\r\n  },\r\n  \/*{\r\n      label: 'Monthly Dataops Subscription Rate',\r\n      id: 'price',\r\n      color: '#5A6372',\r\n      get value() {\r\n          return inputValues.price.value ;\r\n      }\r\n  },*\/\r\n  {\r\n      label: 'Dataops Principle Architect annual base salaray',\r\n      id: 'principle',\r\n      color: '#c32ae9',\r\n      get value() {\r\n          return inputValues.principle.value;\r\n      }\r\n  },\r\n  {\r\n      label: 'Average  Client DevOPs Engineer base salary',\r\n      id: 'cash_down_payment',\r\n      color: '#4098FF',\r\n      get value() {\r\n          return inputValues.cash_down_payment.value\r\n      }\r\n  },\r\n  {\r\n      label: 'Expense avoided',\r\n      id: 'apr',\r\n      color: 'red',\r\n      get value() {\r\n        return inputValues.apr.value;\r\n      }\r\n  }\r\n];\r\n\r\ndraw();\r\n\r\nfunction draw() {\r\n    var paddingTop = 30;\r\n\r\n    var tooltip = d3.select('.chart-box')\r\n        .append('div')\r\n        .attr('class', 'tooltip');\r\n\r\n    tooltip.append('div')\r\n        .attr('class', 'color-icon');\r\n\r\n    tooltip.append('div')\r\n        .attr('class', 'label');\r\n\r\n    var chart = document.querySelector('.chart');\r\n    chart.innerHTML = '';\r\n\r\n    var width = chart.offsetWidth;\r\n    var height = chart.offsetWidth + 2;\r\n\r\n    var radius = width \/ 2;\r\n\r\n    var color = d3.scaleOrdinal()\r\n        .domain(chartData.map(function (d) {\r\n            return d.label;\r\n        }))\r\n        .range(function (d) {\r\n            return d.color;\r\n        });\r\n\r\n    var svg = d3.select('.chart')\r\n        .append('svg')\r\n        .attr('width', width)\r\n        .attr('height', height)\r\n        .append('g')\r\n        .attr('transform', 'translate(' + (width \/ 2) +\r\n            ',' + (height \/ 2) + ')');\r\n\r\n    var donutWidth = width > 250 ? 30 : 20;\r\n    var innerRadius = radius - donutWidth;\r\n    var arc = d3.arc()\r\n        .innerRadius(innerRadius)\r\n        .outerRadius(radius);\r\n\r\n    var pie = d3.pie()\r\n        .padAngle(.007)\r\n        .value(function (d) {\r\n            return d.value;\r\n        })\r\n        .sort(null);\r\n\r\n    var path = svg.selectAll('path')\r\n        .data(pie(chartData))\r\n        .enter()\r\n        .append('path')\r\n        .attr('d', arc)\r\n        .attr('fill', function (d) {\r\n            return d.data.color;\r\n        });\r\n\r\n    path.on('mouseover', function (d) {\r\n        var x = arc.centroid(d)[0];\r\n        var y = arc.centroid(d)[1];\r\n\r\n        var r = innerRadius + donutWidth \/ 2;\r\n        var cos = x \/ r;\r\n        var sin = y \/ r;\r\n\r\n        var top = height \/ 2 + y + paddingTop;\r\n        var left = width \/ 2 + x;\r\n\r\n        tooltip.select('.label').text(d.data.label);\r\n        tooltip\r\n            .style('top', top + 'px')\r\n            .style('left', left + 'px')\r\n            .style('display', 'flex');\r\n\r\n        tooltip.select('.color-icon')\r\n            .style('background-color', d.data.color);\r\n\r\n        if (cos > 0.5) {\r\n            tooltip.attr('class', 'tooltip west');\r\n        } else if (cos < -0.5) {\r\n            tooltip.attr('class', 'tooltip east');\r\n        } else if (sin > 0.86) {\r\n            tooltip.attr('class', 'tooltip south');\r\n        } else {\r\n            tooltip.attr('class', 'tooltip north');\r\n        }\r\n    });\r\n\r\n    path.on('mouseout', function () {\r\n        tooltip.style('display', 'none');\r\n    });\r\n\r\n    var estimateText = d3.select('.chart')\r\n        .append('div')\r\n        .attr('class', 'estimate');\r\n\r\n    estimateText\r\n        .append('div')\r\n        .attr('class', 'estimate__heading')\r\n        .append('text')\r\n        .html('EXPECTED ROI');\r\n\r\n    estimateText\r\n        .append('div')\r\n        .attr('class', 'estimate__value')\r\n        .text(Math.ceil(legendData.est_m_payment));\r\n\r\n    \/\/ controllers\r\n    document.querySelectorAll('.controller-row')\r\n        .forEach(function (group) {\r\n            var min = inputValues[group.id].min;\r\n            var max = inputValues[group.id].max;\r\n            var value = inputValues[group.id].value;\r\n            var step = inputValues[group.id].step;\r\n\r\n            var boundary = max ? 100 * (value - min) \/ (max - min) : 0;\r\n\r\n            var range = group.querySelector('input[type=range]');\r\n\r\n            range.setAttribute('style',\r\n                'background-image: linear-gradient(90deg, #4098FF 0%, #4098FF ' + boundary + '%, white ' + boundary + '%);'\r\n            );\r\n            range.min = min;\r\n            range.max = max;\r\n            range.value = value;\r\n            range.step = step;\r\n\r\n            var textInput = group.querySelector('input[type=number]');\r\n            textInput.min = min;\r\n            textInput.max = max;\r\n            textInput.value = value;\r\n            textInput.step = step;\r\n        });\r\n\r\n    \/\/ legends\r\n    document.querySelectorAll('.chart__description-value')\r\n        .forEach(function (valueWrapper) {\r\n            var value = legendData[valueWrapper.classList[1]];\r\n            valueWrapper.textContent = Math.round(value);\r\n        })\r\n}\r\n\r\ndocument.querySelectorAll('.info')\r\n    .forEach(function (element) {\r\n       element.addEventListener('mouseover', function (e) {\r\n           if(e.screenY > window.innerHeight \/ 2 + 100) {\r\n               element.querySelector('.info__tooltip').classList.add('north');\r\n           } else {\r\n               element.querySelector('.info__tooltip').classList.remove('north');\r\n           }\r\n       });\r\n    });\r\n\r\ndocument.querySelectorAll('.controller-row')\r\n    .forEach(function (group) {\r\n        var range = group.querySelector('input[type=range]');\r\n        var textInput = group.querySelector('input[type=number]');\r\n        var id = group.id;\r\n\r\n        range.addEventListener('input', function (e) {\r\n            inputValues[id].value = e.target.value;\r\n            draw();\r\n        });\r\n        textInput.addEventListener('change', function (e) {\r\n            inputValues[id].value = e.target.value;\r\n            draw();\r\n        });\r\n    });\r\n\r\ndocument.querySelector('.btn__reset')\r\n    .addEventListener('click', function () {\r\n       Object.values(inputValues).map(function (value) {\r\n           value.reset();\r\n       });\r\n       draw();\r\n    });\r\n\r\ndocument.querySelectorAll('.btn__toggle-modal')\r\n    .forEach(function (btn) {\r\n        btn.addEventListener('click', function () {\r\n            var dialog = document.querySelector('.dialog');\r\n            dialog.classList.toggle('open');\r\n        });\r\n    });\r\n\r\nd3.select(window)\r\n    .on('resize', draw);\r\n\r\n\r\n\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-edcf51d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"edcf51d\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-0895b77\" data-id=\"0895b77\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-53551d6\" data-id=\"53551d6\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-f4068a3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"f4068a3\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-d3a8409\" data-id=\"d3a8409\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-18201a7 elementor-widget elementor-widget-heading\" data-id=\"18201a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Take advantage of a customized evaluation, being offered at no cost to you today.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c6417f elementor-widget elementor-widget-text-editor\" data-id=\"8c6417f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>An in-depth analysis of your DataOps requirements, will help provide a monthly managed services cost estimate that is better suited to your organization\u2019s unique needs.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17a8882 elementor-align-left elementor-mobile-align-left elementor-tablet-align-left new elementor-widget elementor-widget-button\" data-id=\"17a8882\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-xs\" href=\"http:\/\/ismiletechnologies.com\/roi-calculator-form\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Proceed<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-073237d elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"073237d\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9ec1989\" data-id=\"9ec1989\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-b500df4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b500df4\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-56a1eb0\" data-id=\"56a1eb0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-639f970 elementor-widget elementor-widget-heading\" data-id=\"639f970\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">For more in-depth analysis of your DataOps ROI &amp; Managed Services Cost<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23d7e82 elementor-widget elementor-widget-text-editor\" data-id=\"23d7e82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Get in touch with us!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-7e77fe7\" data-id=\"7e77fe7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d9e10f0 elementor-align-center elementor-widget elementor-widget-lottie\" data-id=\"d9e10f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;source&quot;:&quot;external_url&quot;,&quot;source_external_url&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/assets4.lottiefiles.com\\\/packages\\\/lf20_kkesf8mx.json&quot;,&quot;is_external&quot;:&quot;&quot;,&quot;nofollow&quot;:&quot;&quot;,&quot;custom_attributes&quot;:&quot;&quot;},&quot;loop&quot;:&quot;yes&quot;,&quot;play_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0.9,&quot;sizes&quot;:[]},&quot;lazyload&quot;:&quot;yes&quot;,&quot;link_to&quot;:&quot;none&quot;,&quot;trigger&quot;:&quot;arriving_to_viewport&quot;,&quot;viewport&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:{&quot;start&quot;:0,&quot;end&quot;:100}},&quot;start_point&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;end_point&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:100,&quot;sizes&quot;:[]},&quot;renderer&quot;:&quot;svg&quot;}\" data-widget_type=\"lottie.default\">\n\t\t\t\t\t<div class=\"e-lottie__container\"><div class=\"e-lottie__animation\"><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-inner-column elementor-element elementor-element-5ca3f7f\" data-id=\"5ca3f7f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b941b47 elementor-align-right elementor-mobile-align-center elementor-tablet-align-right elementor-widget elementor-widget-button\" data-id=\"b941b47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-xs\" href=\"http:\/\/ismiletechnologies.com\/roi-calculator-form\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Proceed<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-941b340 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"941b340\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-8b0debb\" data-id=\"8b0debb\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c45552c elementor-widget elementor-widget-heading\" data-id=\"c45552c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Leverage our reputation &amp; expertise to reduce Data Risk and ensure your organization achieves the highest possible Data Security Standards<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-838699b elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"838699b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9957a64 elementor-widget elementor-widget-text-editor\" data-id=\"9957a64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul><li>AI-Enabled Data Analytics<\/li><li>Dataflow Orchestration<\/li><li>High Performance<\/li><li>Consistent Data Governance Policies<\/li><li>Communicate &amp; Collaborate<\/li><li>Reduce Data Storage And Operational Cost<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-3f892d8\" data-id=\"3f892d8\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f3024db elementor-position-inline-start elementor-view-default elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box\" data-id=\"f3024db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span  class=\"elementor-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-check\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"><\/path><\/svg>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tWe ensure your organization's data operations capabilities are optimized and securely managed with our <a href=\"http:\/\/ismiletechnologies.com\/dataops-managed-services\/\" style=\"color:#1B6999\">DataOps Managed Services.<\/a> Our services are curated around your data and data warehouse needs.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73c3ac7 elementor-position-inline-start elementor-view-default elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box\" data-id=\"73c3ac7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span  class=\"elementor-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-check\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"><\/path><\/svg>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tWe ensure that your data availability is escalated while the quality remains intact throughout the end-to-end enterprise data life cycle.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f5a3e0a elementor-position-inline-start elementor-view-default elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box\" data-id=\"f5a3e0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span  class=\"elementor-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-check\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"><\/path><\/svg>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tWe handle <a href=\"https:\/\/en.wiktionary.org\/wiki\/petabyte\" style=\"color:#1B6999\">petabytes<\/a> of real-time data and help identify opportunities to eradicate manual intervention.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d167371 elementor-position-inline-start elementor-view-default elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box\" data-id=\"d167371\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span  class=\"elementor-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-check\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z\"><\/path><\/svg>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t<p class=\"elementor-icon-box-description\">\n\t\t\t\t\t\tWe ensure DataOps activities are consistently, securely, and expertly managed through our as-a-service format, keeping your data, quality, visibility &amp; availability up to speed at a fraction of a cost.\t\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Improve the Communication, Integration &#038; Automation of data flow across your Organization Calculate your DataOps ROI Monthly DataOps Subscription Rate ($) $ REDUCED EXPENSE BENEFITS (ANNUAL) The burden rate, expressed as percentage, that is applied to a base salary to cover employee benefits. Typically ranges between 20% and 35%. Burden Rate (%) % DataOps automation [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":36024,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-34791","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/pages\/34791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/comments?post=34791"}],"version-history":[{"count":102,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/pages\/34791\/revisions"}],"predecessor-version":[{"id":39269,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/pages\/34791\/revisions\/39269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/media\/36024"}],"wp:attachment":[{"href":"https:\/\/ismiletechnologies.com\/en_us\/wp-json\/wp\/v2\/media?parent=34791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}