.obs-text-edit {
    display: block;
    width: 100%;
    padding: 2px;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    background-color: #ededed;
    background-clip: padding-box;
    border: 1px solid #e5dfe4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}


.obs-text-readonly {
    display: block;
    width: 100%;
    padding: 5px;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: #29292e;
    background-color: lightblue;
    background-clip: padding-box;
    border: 1px solid #e5dfe4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}
.obs-text-green {
    display: block;
    width: 100%;
    padding: 2px;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: #29292e;
    background-color: lightgreen;
    background-clip: padding-box;
    border: 1px solid #e5dfe4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.obs-text-red {
    display: block;
    width: 100%;
    padding: 2px;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    color: #29292e;
    background-color: #f9626c;
    background-clip: padding-box;
    border: 1px solid #e5dfe4;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 2px;
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.obs-label {
    font-size: 14px;
}


.obs-card {
    background-color: #e0fbfc !important;
    border-radius: 5px !important;
    padding-top: 10px !important;
    padding-bottom: 25px !important;
    padding-right: 50px !important;
    padding-left: 50px !important;
}

.obsGrid-Header {
    color: black;
    font-size: 5px;
}


.obsGrid-Field-Even {
    background-color: #f8f9fa;
}

.obsGrid-Field-Odd {
    background-color: #e2fdff;
}



.btn3d:focus {
    outline: medium none;
    -moz-outline-style: none;
}

.btn3d:active {
    top: 9px;
}

.btn-blue {
    box-shadow: 0 0 0 1px #0099CC inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #00B2EE, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color: #0099CC;
}

.btn-default {
    box-shadow: 0 0 0 1px #ebebeb inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #adadad, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color: #fff;
}

.btn-gray {
    box-shadow: 0 0 0 1px #B2BEB5 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #808080, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color: #B2BEB5;
}

.btn-success {
    box-shadow: 0 0 0 1px #006400 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #336633, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color: #006400;
}

.btn-danger {
    box-shadow: 0 0 0 1px #c63702 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #C24032, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color: #c63702;
}

.btn-warning {
    box-shadow: 0 0 0 1px #FEDA15 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #F7E951, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color: #FEDA15;
}


.e-toolbar-item .e-input-group {
    background-color: lightyellow;
}

.e-toolbar-item .e-tbar-btn {
    background-color: powderblue;
}


.e-dialog .e-dlg-header {
    font-size: 20px;
    font-weight: normal;
    height:30px;
}

.e-dialog .e-dlg-content {
    background-color: #d8e2dc;
}
.e-dialog .e-dlg-header-content {
    /*background-color: #d9edf7;*/
    background-color: lightblue;
} 
.e-dialog {
    background-color: #d8e2dc;
    box-shadow: none;
}

.e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-icons {
    width: 25px;
    height: 25px;
}

.e-grid .e-rowcell .e-checkbox-wrapper .e-frame.e-icons.e-check {
    background-color: transparent;
    font-size: 15px;
    padding-top: 5px;
    color: darkgreen;
}

.item {
    display: table;
    width: 100%;
    margin: auto;
}



.name, .id {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}

.nameStyle {
    left: 9px;
    padding-right: 20px;
    position: absolute;
    top: 4px;
}

.e-progress-btn {
    width: 130px;
    height: 60px;
    font-size: 22px;
}

.btn-success:focus {
    box-shadow: 0 0 0 1px #006400 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #336633, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color: #006400;
}

.e-radio-wrapper {
    position: center;
}

.label:hover::before {
    position: absolute;
    width: 300px;
    padding-left: 0px;
}

.statustxt {
    font-size: 17px;
}



.e-card .e-card-header .e-card-header-caption .e-card-header-title {
    font-size: large;
    color: steelblue;
    margin-top: 0px;
    padding-top: 0px;
}

.drop-background {
    background-color: lightblue;
}

.e-radio-wrapper {
    margin-top: 7px;
}

li {
    list-style: none;
}

.e-radio + label::before {
    height: 22px;
    width: 23px;
}

.e-radio + label::after {
    height: 15px;
    width: 15px;
}


.e-radio + label .e-label {
    height: 32px;
    line-height: 15px;
    padding-left: 35px;
}

.statustemp.e-inactivecolor {
    background-color: #fde0e0;
    color: darkred;
    width: fit-content;
    border-radius: 7px;
}

.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
    background-color: #CAE6EF;
    color: darkorange;
}

.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
    background-color: #CAE6EF;
    min-height: 29px;
}

.e-radio-wrapper.e-success .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
    background-color: #689f38;
    color: #689f38;
}

.e-radio-wrapper.e-success .e-radio:checked:focus + label::after,
.e-radio-wrapper.e-success .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
    background-color: #449d44;
}

.e-radio-wrapper.e-success .e-radio:checked + ::before {
    border-color: #689f38;
    background-color: #fff;
}

.e-radio-wrapper.e-success .e-radio:checked:focus + ::before,
.e-radio-wrapper.e-success .e-radio:checked + label:hover::before { /* csslint allow: adjoining-classes */
    border-color: #449d44;
}

.e-radio-wrapper.e-success .e-radio + label:hover::before {
    border-color: #b1afaf;
}

.e-radio-wrapper.e-info .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
    background-color: #2196f3;
    color: #2196f3;
}

.e-radio-wrapper.e-info .e-radio:checked:focus + label::after,
.e-radio-wrapper.e-info .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
    background-color: #0b7dda;
}

.e-radio-wrapper.e-info .e-radio:checked + label::before {
    border-color: #2196f3;
    background-color: #fff;
}

.e-radio-wrapper.e-info .e-radio:checked:focus + label::before,
.e-radio-wrapper.e-info .e-radio:checked + label:hover::before {
    border-color: #0b7dda;
}

.e-radio-wrapper.e-info .e-radio + label:hover::before {
    border-color: #b1afaf;
}

.e-radio-wrapper.e-warning .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
    background-color: #ef6c00;
    color: #ef6c00;
}

.e-radio-wrapper.e-warning .e-radio:checked:focus + label::after,
.e-radio-wrapper.e-warning .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
    background-color: #cc5c00;
}

.e-radio-wrapper.e-warning .e-radio:checked + label::before {
    border-color: #ef6c00;
    background-color: #fff;
}

.e-radio-wrapper.e-warning .e-radio:checked:focus + label::before,
.e-radio-wrapper.e-warning .e-radio:checked + label:hover::before {
    border-color: #cc5c00;
}

.e-radio-wrapper.e-warning .e-radio + label:hover::before {
    border-color: #b1afaf;
}

.e-radio-wrapper.e-danger .e-radio:checked + label::after { /* csslint allow: adjoining-classes */
    background-color: #d84315;
    color: #d84315;
}

.e-radio-wrapper.e-danger .e-radio:checked:focus + label::after,
.e-radio-wrapper.e-danger .e-radio:checked + label:hover::after { /* csslint allow: adjoining-classes */
    background-color: #ba330a;
}

.e-radio-wrapper.e-danger .e-radio:checked + label::before {
    border-color: #d84315;
    background-color: #fff;
}

.e-radio-wrapper.e-danger .e-radio:checked:focus + label::before,
.e-radio-wrapper.e-danger .e-radio:checked + label:hover::before {
    border-color: #ba330a;
}

.e-radio-wrapper.e-danger .e-radio + label:hover::before {
    border-color: #b1afaf
}

.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
    background-color: #CAE6EF;
}

.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
    background-color: #CAE6EF;
}

.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before, .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before, .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after, .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after {
    background-color: #CAE6EF;
}

.e-ddl.e-lib.e-input-group.e-control-wrapper.e-control-container.e-float-input.e-input-focus .e-float-text.e-label-top {
    color: #CAE6EF;
}


.radio-control {
    margin: 5% 0 5% 40%;
}

@@media only screen and (max-width: 700px) {
    .radio-control {
        margin-left: 35%;
        margin-top: 8%;
    }

    .control-section {
        min-height: 200px;
    }
}

@@media only screen and (max-width: 500px) {
    .radio-control {
        margin-top: 20%;
        margin-left: 21%;
        margin-bottom: 27%;
    }
}



.e-bigger .radio-control h4 {
    font-size: 20px;
}


/* Sample specific styles */
.slider-content-wrapper {
    width: 40%;
    margin: 0 auto;
    min-width: 185px;
}

.slider_container label {
    font-weight: 500;
    font-size: 13px;
    padding-bottom: 10px;
    margin: 0;
}

.slider_container {
    margin-top: 10px;
}

.e-bigger .slider-content-wrapper {
    width: 80%;
}
/* Specifies the background color for dynamic thumb and selection bar Slider component */
#dynamic_color_slider.e-slider-royalblue .e-range {
    background-color: royalblue;
}

#dynamic_color_slider.e-slider-green .e-range {
    background-color: green;
}

#dynamic_color_slider.e-slider-darkorange .e-range {
    background-color: darkorange;
}

#dynamic_color_slider.e-slider-red .e-range {
    background-color: red;
}

#dynamic_color_slider.e-slider-royalblue .e-handle {
    background-color: royalblue;
}

#dynamic_color_slider.e-slider-green .e-handle {
    background-color: green;
}

#dynamic_color_slider.e-slider-darkorange .e-handle {
    background-color: darkorange;
}

#dynamic_color_slider.e-slider-red .e-handle {
    background-color: red;
}
/* Specifies the styles for height customization slider */
#height_slider .e-tab-handle::after {
    background-color: #f9920b;
}

.e-slider-container #height_slider.e-slider .e-handle,
.e-slider-container #gradient_slider.e-slider .e-handle {
    height: 20px;
    width: 20px;
}

.e-slider-container.e-horizontal #height_slider .e-handle,
.e-slider-container.e-horizontal #gradient_slider .e-handle {
    margin-left: -10px;
    top: calc(50% - 10px);
}

#height_slider.e-control.e-slider .e-slider-track {
    height: 8px;
    top: calc(50% - 4px);
    border-radius: 5px;
}
/* Specifies the styles for bar customization slider */
#gradient_slider.e-control.e-slider .e-range {
    height: 6px;
    top: calc(50% - 3px);
    border-radius: 5px;
    background: -webkit-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
    background: linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
    background: -moz-linear-gradient(left, #e1451d 0, #fdff47 17%, #86f9fe 50%, #2900f8 65%, #6e00f8 74%, #e33df9 83%, #e14423 100%);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZTE0NTFkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTclIiBzdG9wLWNvbG9yPSIjZmRmZjQ3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjODZmOWZlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjMjkwMGY4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzQlIiBzdG9wLWNvbG9yPSIjNmUwMGY4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iODMlIiBzdG9wLWNvbG9yPSIjZTMzZGY5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UxNDQyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
}

#gradient_slider.e-control.e-slider .e-slider-track {
    height: 8px;
    top: calc(50% - 4px);
    border-radius: 5px;
}
/* Specifies the slider handle styles for material theme*/
.material .e-slider-container #height_slider.e-slider .e-handle,
.material.e-bigger .e-slider-container #height_slider.e-slider .e-handle,
.material .e-slider-container #gradient_slider.e-slider .e-handle,
.material.e-bigger .e-slider-container #gradient_slider.e-slider .e-handle {
    height: 16px;
    width: 16px;
}

.material .e-slider-container.e-horizontal #height_slider .e-handle,
.material.e-bigger .e-slider-container.e-horizontal #height_slider .e-handle,
.material .e-slider-container.e-horizontal #gradient_slider .e-handle,
.material.e-bigger .e-slider-container.e-horizontal #gradient_slider .e-handle {
    margin-left: -8px;
    top: calc(50% - 8px);
}
/* Specifies the slider handle styles except material themes*/
.e-bigger:not(.material) .e-slider-container.e-horizontal #height_slider.e-slider .e-handle,
.e-bigger:not(.material) .e-slider-container.e-horizontal #gradient_slider.e-slider .e-handle {
    margin-left: -11px;
    top: calc(50% - 11px);
}

.e-bigger:not(.material) .e-slider-container #height_slider.e-slider .e-handle,
.e-bigger:not(.material) .e-slider-container #gradient_slider.e-slider .e-handle {
    height: 22px;
    width: 22px;
}
/* Specifies the slider track styles for highcontrast theme*/
.highcontrast #height_slider.e-control.e-slider .e-slider-track {
    height: 10px;
    top: calc(50% - 5px);
}
/* Specifies the slider track styles for fabric theme*/
.fabric .slider_container .e-slider-hover .e-slider-track,
.fabric .slider_container .e-slider-container:active .e-slider-track,
.fabric .slider_container .e-slider-container .e-slider .e-tab-track {
    background-color: #c8c8c8;
}

.fabric .slider_container .e-slider-hover .e-slider-track,
.fabric .slider_container .e-slider-container:active .e-slider-track,
.fabric .slider_container .e-slider-container .e-slider .e-tab-track {
    background-color: #c8c8c8;
}


/* Sample specific styles */
.slider-content-wrapper {
    width: 40%;
    margin: 0 auto;
    min-width: 185px;
}

#pricing-slider #cloud-right-pane .btn-size {
    padding-top: 16px;
    padding-bottom: 30px;
    border-bottom: 1px solid lightgrey;
}

#pricing-slider .e-slider-container.e-horizontal {
    height: 56px;
}

#pricing-slider .row {
    border: 1px solid #CCCCCC;
    box-shadow: 0px 0px 4px;
    opacity: 100;
    border-radius: 4px;
}

.discount .e-label,
.discount .e-label {
    white-space: initial;
}

#pricing-slider .sub-heading {
    margin-top: -8px;
    font-size: 14px;
    color: #808080;
}

#pricing-slider .label-text.right-text {
    padding-top: 16px;
    padding-bottom: 20px;
}

#pricing-slider .label-text {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
}

span.e-label .statement {
    font-size: 14px;
}

.highcontrast #cPanel .statement {
    color: white;
    font-size: 14px;
}

.cloud-slider {
    display: block;
    position: relative;
}

#processor {
    background-color: #A06AFF;
}

#memory {
    background-color: #7ED321;
}

#storage {
    background-color: #4A90E2;
}

#memory,
#storage,
#processor {
    font-size: 14px;
    height: 24px;
    width: 220px;
    text-align: center;
    line-height: 24px;
    float: right;
    color: #FFFFFF;
    font-weight: 500;
    border-radius: 18px;
}

#cPanel,
#discount {
    height: 30px;
    margin-top: -10px;
    width: 20px;
}

#target {
    min-height: 350px;
}

#value {
    color: #000000;
    font-size: 28px;
    font-weight: bold;
}

#suffix {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
}

.text {
    font-size: 13px;
    padding-top: 26px;
    width: 190px;
}

#cloud-right-pane {
    background-color: #FFFFFF;
    border-left: 1px solid #CCCCCC;
    padding: 20px;
    height: 443px;
}

.pricing-slider {
    margin-top: 40px;
    min-height: 20px;
    margin-bottom: 20px;
}

.cloud-slider-right {
    color: #000000;
    font-size: 14px;
}

    .cloud-slider-right.discount-pay {
        padding-top: 20px;
    }

#cloud-left-pane {
    height: 443px;
    padding: 40px;
    background-color: #FAFAFA;
}

.e-dlg-header, .e-dlg-header * {
    font-size: 16px;
    font-weight: 500;
}

.discount {
    padding-top: 20px;
    padding-bottom: 35px;
}

#cloud-slider-text {
    padding-bottom: 20px;
    border-bottom: 1px solid lightgrey;
}

#dollar {
    color: #000000;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    top: -7px;
}

#btn {
    text-transform: uppercase;
    width: -webkit-fill-available;
}

.cloud-left-slider {
    margin-top: 10px;
}

.control-section {
    padding-top: 0px;
    margin-left: 75px;
    margin-right: 75px;
}

#alertDialogs {
    max-height: 425px;
    z-index: 1004;
    /*width: 360px;*/
    left: 311.385px;
    top: 400px;
}

#alertDialogs_title {
    width: 100%;
}

.e-dialog {
    max-height: 98%;
    max-width: 100%;
    min-width: 240px;
    position: absolute;
    border: none;
    border-radius: 2px;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

.cloud-right-content .e-btn.e-info {
    padding: 0px;
    width: 30px;
    height: 30px;
    line-height: inherit;
}

.e-btn.e-primary, .e-css.e-btn.e-primary {
    padding: 0px;
    width: 30px;
    height: 30px;
    line-height: inherit;
}

.e-dialog .e-footer-content .e-btn {
    margin-left: 8px;
    width: 50px;
    height: 30px;
}
/* Sampel specific styles for Material theme*/
.material #memoryPrice,
.material #storagePrice,
.material #processorPrice,
.material #cloudhead,
.material #processorPriceName,
.material #memoryPriceName,
.material #storagePriceName,
.material #cloudPriceName {
    color: black;
    opacity: 1;
}
/* Sampel specific styles for fabric theme*/
.fabric #memoryPrice,
.fabric #storagePrice,
.fabric #processorPrice,
.fabric #cloudhead,
.fabric #processorPriceName,
.fabric #memoryPriceName,
.fabric #storagePriceName,
.fabric #cloudPriceName {
    color: black;
    opacity: 1;
}
/* Sample specific styles for bootstrap theme */
.bootstrap #memoryPrice,
.bootstrap #storagePrice,
.bootstrap #processorPrice,
.bootstrap #cloudhead,
.bootstrap #processorPriceName,
.bootstrap #memoryPriceName,
.bootstrap #storagePriceName,
.bootstrap #cloudPriceName {
    color: black;
    opacity: 1;
}
/* Sampel specific styles for bootstrap4 theme*/
.bootstrap4 #memoryPrice,
.bootstrap4 #storagePrice,
.bootstrap4 #processorPrice,
.bootstrap4 #cloudhead,
.bootstrap4 #processorPriceName,
.bootstrap4 #memoryPriceName,
.bootstrap4 #storagePriceName,
.bootstrap4 #cloudPriceName {
    color: black;
    opacity: 1;
}
/* Specifies the styles for target dialog popup element*/
.fabric #target #prompt_dialog.e-dialog {
    height: 291px;
}

.material #target #prompt_dialog.e-dialog {
    height: 270px;
}

#target #prompt_dialog.e-dialog {
    height: 270px;
}

.bootstrap4 #target #prompt_dialog.e-dialog {
    height: 285px;
}
/* Sample specific styles for large desktop mode*/
@@media (max-width: 1010px) {
    #cloud-right-pane {
        border-top: 1px solid #d5d7d8 !important;
        border-left: none !important;
        border-width: 1px 0 0 !important;
        padding-top: 15px !important;
        padding-left: 0 !important;
    }

    .cloud-right-content {
        padding-left: 24px !important;
    }

    #cloud-left-pane {
        width: 100%;
    }

    #cloud-right-pane {
        width: 100%;
    }
}
/* Specifies the styles for dialog content element in fabric theme*/
.fabric .e-bigger.e-dialog .e-dlg-content, *.e-bigger .e-dialog .e-dlg-content {
    font-size: 14px;
    padding-left: 25px;
}
/* Specifies the styles for dialog content element in highcontrast theme*/
.highcontrast .e-bigger.e-dialog .e-dlg-content, *.e-bigger .e-dialog .e-dlg-content {
    font-size: 14px;
    padding-left: 25px;
}
/* Specifies the styles for price slider realted elements in tailwind theme*/
.tailwind .pricing-slider,
.tailwind #pricing-slider .label-text,
.tailwind #pricing-slider .sub-heading {
    color: black;
}
/* Specifies the styles for price slider realted elements in dark themes*/
.highcontrast .pricing-slider,
.highcontrast #pricing-slider .label-text,
.highcontrast #pricing-slider .sub-heading {
    color: white;
}

.tailwind-dark .pricing-slider,
.tailwind-dark #pricing-slider .label-text,
.tailwind-dark #pricing-slider .sub-heading,
.bootstrap5-dark .pricing-slider,
.bootstrap5-dark #pricing-slider .label-text,
.bootstrap5-dark #pricing-slider .sub-heading {
    color: white;
}

.fabric-dark .pricing-slider,
.fabric-dark #pricing-slider .label-text,
.fabric-dark #pricing-slider .sub-heading {
    color: white;
}

.bootstrap-dark .pricing-slider,
.bootstrap-dark #pricing-slider .label-text,
.bootstrap-dark #pricing-slider .sub-heading {
    color: white;
}

.material-dark .pricing-slider,
.material-dark #pricing-slider .label-text,
.material-dark #pricing-slider .sub-heading {
    color: white;
}

.fluent-dark .pricing-slider,
.fluent-dark #pricing-slider .label-text,
.fluent-dark #pricing-slider .sub-heading {
    color: white;
}

.fabric .cloud-right-content .e-btn.e-info,
.highcontrast .e-btn.e-info {
    line-height: 2px;
}

.material-dark #dollar,
.material-dark #value,
.material-dark #dialog-header,
.material-dark #StorageDialog,
.material-dark #CloudDialog,
.material-dark #processorDialog,
.bootstrap5-dark #dollar,
.bootstrap5-dark #value,
.bootstrap5-dark #dialog-header,
.bootstrap5-dark #StorageDialog,
.bootstrap5-dark #CloudDialog,
.bootstrap5-dark #processorDialog {
    color: white;
}

.highcontrast #dollar,
.highcontrast #value,
.highcontrast #dialog-header,
.highcontrast #StorageDialog,
.highcontrast #CloudDialog,
.highcontrast #processorDialog {
    color: white;
}

.highcontrast #pricing-slider .row,
.bootstrap5-dark #pricing-slider .row {
    border: 1px solid #969696;
}

.highcontrast #cloud-right-pane,
.bootstrap5-dark #cloud-right-pane {
    border-left: 1px solid #969696;
}

.highcontrast #cloud-slider-text,
.highcontrast #pricing-slider #cloud-right-pane .btn-size,
.bootstrap5-dark #cloud-slider-text,
.bootstrap5-dark #pricing-slider #cloud-right-pane .btn-size {
    border-bottom: 1px solid #969696;
}

.highcontrast #processor,
.bootstrap5-dark #processor {
    background-color: #AE80FF;
}

.highcontrast #memory,
.bootstrap5-dark #memory {
    background-color: #7ED321;
}

.highcontrast #storage,
.bootstrap5-dark #storage {
    background-color: #61A4EF;
}
/* Specifies the styles for left pane related elements in dark themes*/
.highcontrast #cloud-left-pane,
.bootstrap5-dark #cloud-left-pane {
    background-color: #1a1a1a;
}

.highcontrast #cloud-right-pane,
.bootstrap5-dark #cloud-right-pane {
    background-color: #000;
}

.highcontrast #processorPriceName,
.highcontrast #memoryPriceName,
.highcontrast #storagePriceName,
.highcontrast #cloudPriceName,
.bootstrap5-dark #processorPriceName,
.bootstrap5-dark #memoryPriceName,
.bootstrap5-dark #storagePriceName,
.bootstrap5-dark #cloudPriceName {
    color: white;
    opacity: 1;
}

.fabric-dark #cloud-left-pane {
    background-color: #1a1a1a;
}

.fabric-dark #cloud-right-pane {
    background-color: #000;
}
/* Specifies the styles for right pane related elements in light themes*/
.tailwind #dollar,
.tailwind #value,
.tailwind #dialog-header,
.tailwind #StorageDialog,
.tailwind #CloudDialog,
.tailwind #processorDialog {
    color: black;
}

.tailwind #pricing-slider .row {
    border: 1px solid #969696;
}

.tailwind #cloud-right-pane {
    border-left: 1px solid #969696;
}

.tailwind #cloud-slider-text,
.tailwind #pricing-slider #cloud-right-pane .btn-size {
    border-bottom: 1px solid #969696;
}

.tailwind #processor {
    background-color: #AE80FF;
}

.tailwind #memory {
    background-color: #7ED321;
}

.tailwind #storage {
    background-color: #61A4EF;
}

.tailwind #memoryPrice,
.tailwind #storagePrice,
.tailwind #processorPrice,
.tailwind #cloudhead,
.tailwind #processorPriceName,
.tailwind #memoryPriceName,
.tailwind #storagePriceName,
.tailwind #cloudPriceName {
    color: black;
    opacity: 1;
}
/* Specifies the styles for right pane related elements in dark themes*/
.tailwind-dark #dollar,
.tailwind-dark #value,
.tailwind-dark #dialog-header,
.tailwind-dark #StorageDialog,
.tailwind-dark #CloudDialog,
.tailwind-dark #processorDialog {
    color: white;
}

.tailwind-dark #pricing-slider .row {
    border: 1px solid #969696;
}

.tailwind-dark #cloud-right-pane {
    border-left: 1px solid #969696;
}

.tailwind-dark #cloud-slider-text,
.tailwind-dark #pricing-slider #cloud-right-pane .btn-size {
    border-bottom: 1px solid #969696;
}

.tailwind-dark #processor {
    background-color: #AE80FF;
}

.tailwind-dark #memory {
    background-color: #7ED321;
}

.tailwind-dark #storage {
    background-color: #61A4EF;
}

.tailwind-dark #cloud-left-pane {
    background-color: #1a1a1a;
}

.tailwind-dark #cloud-right-pane {
    background-color: #000;
}

.tailwind-dark #processorPriceName,
.tailwind-dark #memoryPriceName,
.tailwind-dark #storagePriceName,
.tailwind-dark #cloudPriceName {
    color: white;
    opacity: 1;
}

.bootstrap-dark #dollar,
.bootstrap-dark #value,
.bootstrap-dark #dialog-header,
.bootstrap-dark #StorageDialog,
.bootstrap-dark #CloudDialog,
.bootstrap-dark #processorDialog {
    color: white;
}

.fluent-dark #dollar,
.fluent-dark #value,
.fluent-dark #CloudDialog,
.fluent-dark #processorDialog,
.fluent-dark #StorageDialog,
.fluent-dark #processorPriceName,
.fluent-dark #memoryPriceName,
.fluent-dark #storagePriceName,
.fluent-dark #cloudPriceName {
    color: white;
}
/* Specifies the styles for right pane related elements in dark themes*/
.bootstrap-dark #pricing-slider .row {
    border: 1px solid #969696;
}

.bootstrap-dark #cloud-right-pane {
    border-left: 1px solid #969696;
}

.bootstrap-dark #cloud-slider-text,
.bootstrap-dark #pricing-slider #cloud-right-pane .btn-size {
    border-bottom: 1px solid #969696;
}

.bootstrap-dark #processor {
    background-color: #AE80FF;
}

.bootstrap-dark #memory {
    background-color: #7ED321;
}

.bootstrap-dark #storage {
    background-color: #61A4EF;
}

.bootstrap-dark #cloud-left-pane {
    background-color: #1a1a1a;
}

.bootstrap-dark #cloud-right-pane {
    background-color: #000;
}

.bootstrap-dark #processorPriceName,
.bootstrap-dark #memoryPriceName,
.bootstrap-dark #storagePriceName,
.bootstrap-dark #cloudPriceName {
    color: white;
    opacity: 1;
}

.fabric-dark #dollar,
.fabric-dark #value,
.fabric-dark #dialog-header,
.fabric-dark #StorageDialog,
.fabric-dark #CloudDialog,
.fabric-dark #processorDialog {
    color: white;
}

.fabric-dark #pricing-slider .row {
    border: 1px solid #969696;
}

.fabric-dark #cloud-right-pane {
    border-left: 1px solid #969696;
}

.fabric-dark #cloud-slider-text,
.fabric-dark #pricing-slider #cloud-right-pane .btn-size {
    border-bottom: 1px solid #969696;
}

.fabric-dark #processor {
    background-color: #AE80FF;
}

.fabric-dark #memory {
    background-color: #7ED321;
}

.fabric-dark #storage {
    background-color: #61A4EF;
}

.fabric-dark #cloud-left-pane {
    background-color: #1a1a1a;
}

.fabric-dark #cloud-right-pane {
    background-color: #000;
}

.fluent-dark #cloud-left-pane {
    background-color: #1a1a1a;
}

.fluent-dark #cloud-right-pane {
    background-color: #000;
}

.fabric-dark #processorPriceName,
.fabric-dark #memoryPriceName,
.fabric-dark #storagePriceName,
.fabric-dark #cloudPriceName {
    color: white;
    opacity: 1;
}

.material-dark #pricing-slider .row {
    border: 1px solid #969696;
}

.material-dark #cloud-right-pane {
    border-left: 1px solid #969696;
}

.material-dark #cloud-slider-text,
.material-dark #pricing-slider #cloud-right-pane .btn-size {
    border-bottom: 1px solid #969696;
}

.material-dark #processor {
    background-color: #AE80FF;
}

.material-dark #memory {
    background-color: #7ED321;
}

.material-dark #storage {
    background-color: #61A4EF;
}

.material-dark #cloud-left-pane {
    background-color: #1a1a1a;
}

.material-dark #cloud-right-pane {
    background-color: #000;
}

.material-dark #processorPriceName,
.material-dark #memoryPriceName,
.material-dark #storagePriceName,
.material-dark #cloudPriceName {
    color: white;
    opacity: 1;
}

.material-dark .e-dlg-header, .e-dlg-header * {
    font-size: 18px;
    font-weight: normal;
}

.material-dark .alertDialogs_dialog-content, .alertDialogs_dialog-content * {
    color: #fff;
}
/* Specifies the styles for dialog header elements*/
#dialog-header {
    color: #000000;
    opacity: .87;
    font-weight: 600;
    font-size: 20px;
}

#CloudDialog {
    color: #000000;
    padding-top: 14px;
    border-top: 1px solid #CCCCCC;
}

#processorPrice,
#memoryPrice,
#storagePrice {
    opacity: 0.9;
    font-weight: 600;
    font-size: 16px;
    float: right;
}

#processorPriceName,
#memoryPriceName,
#storagePriceName,
#cloudPriceName {
    opacity: 0.9;
    color: #000000;
    font-size: 16px;
}

#cloudPrice {
    opacity: 0.9;
    font-weight: 600;
    font-size: 18px;
    float: right;
}

#processorDialog {
    color: #000000;
    padding-bottom: 12px;
}

#StorageDialog {
    color: #000000;
    padding-top: 12px;
    padding-bottom: 16px;
}

.bootstrap4 #pricing-slider .row {
    box-shadow: none;
}
/* Specifies the styles for button elements in light themes*/
.bootstrap4 #xSmallBtn,
.bootstrap4 #smallBtn,
.bootstrap4 #mediumBtn,
.bootstrap4 #largeBtn,
.bootstrap4 #xLargeBtn {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.material #xSmallBtn,
.material #smallBtn,
.material #mediumBtn,
.material #largeBtn,
.material #xLargeBtn {
    background-color: #0378d5;
    border-color: transparent;
    color: #fff;
}

.bootstrap #xSmallBtn,
.bootstrap #smallBtn,
.bootstrap #mediumBtn,
.bootstrap #largeBtn,
.bootstrap #xLargeBtn {
    background-color: #1b809e;
    border-color: #145d72;
    color: #fff;
}

.tailwind #xSmallBtn,
.tailwind #smallBtn,
.tailwind #mediumBtn,
.tailwind #largeBtn,
.tailwind #xLargeBtn {
    background-color: #0e7490;
    border-color: #0e7490;
    color: #fff;
}

.highcontrast #xSmallBtn,
.highcontrast #smallBtn,
.highcontrast #mediumBtn,
.highcontrast #largeBtn,
.highcontrast #xLargeBtn {
    background-color: rgb(0, 86, 179);
    color: rgb(255, 255, 255);
    border-color: rgb(0, 86, 179);
}

.tailwind-dark #xSmallBtn,
.tailwind-dark #smallBtn,
.tailwind-dark #mediumBtn,
.tailwind-dark #largeBtn,
.tailwind-dark #xLargeBtn {
    background-color: rgb(0, 86, 179);
    color: rgb(255, 255, 255);
    border-color: rgb(0, 86, 179);
}

.bootstrap-dark #xSmallBtn,
.bootstrap-dark #smallBtn,
.bootstrap-dark #mediumBtn,
.bootstrap-dark #largeBtn,
.bootstrap-dark #xLargeBtn {
    background-color: rgb(0, 86, 179);
    color: rgb(255, 255, 255);
    border-color: rgb(0, 86, 179);
}

.fabric-dark #xSmallBtn,
.fabric-dark #smallBtn,
.fabric-dark #mediumBtn,
.fabric-dark #largeBtn,
.fabric-dark #xLargeBtn {
    background-color: rgb(0, 86, 179);
    color: rgb(255, 255, 255);
    border-color: rgb(0, 86, 179);
}
/* Specifies the styles for dilog elements*/
.e-bigger.e-dialog .e-dlg-header-content, *.e-bigger .e-dialog .e-dlg-header-content {
    line-height: 1.5;
    border-bottom: 0;
}

.fabric-dark.e-bigger.e-dialog .e-dlg-content, *.e-bigger .e-dialog .e-dlg-content {
    font-size: 14px;
}

.bootstrap4 #signbtn {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
    width: 220px;
}

.highcontrast #signbtn {
    background-color: #ffd939;
    border-color: #ffd939;
    width: 220px;
}

#signbtn {
    width: 180px;
}

.fabric #signbtn {
    width: 180px;
}

span#cloudhead {
    font-weight: 600;
    font-size: 20px;
}

.material #signbtn {
    background-color: #e3165b;
    border-color: transparent;
    color: #fff;
    width: 220px;
}

.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
    background-color: #fff;
    border-color: #adb5bd;
    color: black;
}

.fluent-dark .e-checkbox-wrapper .e-frame, .fluent-dark .e-css.e-checkbox-wrapper .e-frame,
.bootstrap-dark .e-checkbox-wrapper .e-frame, .bootstrap-dark .e-css.e-checkbox-wrapper .e-frame {
    background-color: #1a1a1a;
}

.bootstrap5-dark .e-checkbox-wrapper .e-frame, .bootstrap5-dark .e-css.e-checkbox-wrapper .e-frame {
    background-color: #212529;
}

.tailwind-dark .e-checkbox-wrapper .e-frame, .tailwind-dark .e-css.e-checkbox-wrapper .e-frame {
    background-color: #1f2937;
}

.fabric-dark .e-checkbox-wrapper .e-frame, .fabric-dark .e-css.e-checkbox-wrapper .e-frame {
    background-color: #201f1f;
}

.highcontrast .e-checkbox-wrapper .e-frame, .highcontrast .e-css.e-checkbox-wrapper .e-frame {
    background-color: #000;
}

.fluent-dark .e-checkbox-wrapper .e-frame.e-check, .fluent-dark .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #0078d4;
}

.fabric-dark .e-checkbox-wrapper .e-frame.e-check, .fabric-dark .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #0074cc;
}

.highcontrast .e-checkbox-wrapper .e-frame.e-check, .highcontrast .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #ffd939;
}

.tailwind-dark .e-checkbox-wrapper .e-frame.e-check, .tailwind-dark .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #22d3ee;
}

.bootstrap5-dark .e-checkbox-wrapper .e-frame.e-check, .bootstrap5-dark .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #0d6efd;
}

.btn-success:focus {
    box-shadow: 0 0 0 1px #006400 inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #336633, 0 8px 0 1px rgba(0,0,0,0.4), 0 8px 8px 1px rgba(0,0,0,0.5);
    background-color: #006400;
}