:root {
    --rs-default-widget-size: 13px;
    --rs-default-accordion-font-size: 12px;
    --rs-default-datagrid-padding: 5px;
    --rs-default-form-caption-font-size: 12px;
    --rs-default-app-grid-text-size: 13px;
    --rs-label-color: #03A9F4;
    --rs-default-button-height: 24px;
    --rs-default-button-width: 24px;
    --rs-default-button-padding-top: 4px;
    --rs-default-button-padding-left: 6px;
    --rs-default-button-padding-right: 6px;
    --rs-default-button-padding-bottom: 4px;
    --rs-default-button-icon-height: 24px;
    --rs-default-button-icon-width: 24px;
}



@media only screen and 
    (max-device-width : 1024px) 
{
    :root {
        --rs-default-widget-size: 16px;
        --rs-default-accordion-font-size: 16px;
        --rs-default-datagrid-padding: 10px;
        --rs-default-app-grid-text-size: 12px;
    }

    .dx-popup-content {
        padding: 8px !important;
    }
}


@media only screen and (max-device-width : 512px) {
    .dx-colorview-container {
        width: 300px;
        height: 250px;
    }

    .dx-colorview-palette {
        width: 100px;
    }
}


.dx-toolbar-button.dx-toolbar-text-auto-hide .dx-button .dx-button-content {
    padding: 0px !important;
}

.dx-toolbar-button.dx-toolbar-text-auto-hide .dx-button .dx-icon {
    height: var(--rs-default-button-height) !important;
    width: var(--rs-default-button-width) !important;
    padding-bottom: var(--rs-default-button-padding-bottom) !important;
    padding-top: var(--rs-default-button-padding-top) !important;
    padding-left: var(--rs-default-button-padding-left) !important;
    padding-right: var(--rs-default-button-padding-right) !important;
    background-size: var(--rs-default-button-icon-height) var(--rs-default-button-icon-width) !important;
    background-position: center !important;
    border-radius:unset!important;
}

.dx-toolbar-button.dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon.dx-button-has-text {
    border-radius: 0!important;
}

/*
.dx-toolbar-button .dx-icon {
    height: var(--rs-default-button-height) !important;
    width: var(--rs-default-button-width) !important;
    padding-bottom: var(--rs-default-button-padding) !important;
    padding-top: var(--rs-default-button-padding) !important;
    padding-left: var(--rs-default-button-padding) !important;
    padding-right: var(--rs-default-button-padding) !important;
    background-size: var(--rs-default-button-icon-height) var(--rs-default-button-icon-width) !important;
    background-position: center !important;
}

.dx-toolbar-button {
    padding-left: var(--rs-default-button-padding) !important;
    padding-right: var(--rs-default-button-padding) !important;
}


.dx-toolbar-button .dx-button .dx-button-content {
    padding: 0px !important;
}*/
.dx-widget {
    font-size: var(--rs-default-widget-size);
}

.dx-checkbox {
    margin-top: 5px !important;
}


.dx-placeholder {
    /*font-size: 16px;*/
    font-size: var(--rs-default-widget-size);
}

.dx-toolbar .dx-toolbar-menu-container {
    margin-right:20px;
    margin-left:20px;
}

.dx-button-text {
    text-transform: capitalize;
    font-size: var(--rs-default-widget-size);
}

.dx-texteditor.dx-editor-filled .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding: 4px 8px 3px;
}

.dx-layout-manager .dx-field-item:not(.dx-first-row) {
    padding-top: 0px !important;
}

.dx-field-item {
    padding-bottom: 5px;
    font-size: var(--rs-default-widget-size);
}


.dx-field-item-label-location-left {
    padding-right: 30px;
}

.dx-texteditor-input {
    /*font-size: 16px;*/
    font-size: var(--rs-default-widget-size);
}


.dx-texteditor.dx-editor-underlined .dx-placeholder:before {
    padding-top:3px;
    padding-bottom:3px;
    padding-right:3px;
}

.dx-editor-underlined .dx-texteditor-buttons-container {
    height:19px !important;
}

.dx-texteditor.dx-editor-underlined .dx-texteditor-input {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
}


.dx-editor-underlined .dx-texteditor-buttons-container > .dx-button.dx-button-mode-text {
    margin-bottom: 0px !important;
}

.dx-tag {
    margin: 2px 5px 0 0;
}

.dx-tagbox.dx-editor-filled .dx-tag-container, .dx-tagbox.dx-editor-outlined .dx-tag-container {
    padding-bottom: 1px;
}

.dx-tagbox:not(.dx-texteditor-empty):not(.dx-editor-filled):not(.dx-editor-outlined) .dx-tag-container {
    margin-top: 0px;
}

.dx-tag-content {
    padding-top: 1px;
    padding-bottom:1px;
    border-radius: 6px;
}

.dx-accordion {
    margin: 0px;
}

.dx-accordion-item {
    border-top: 0px;
    box-shadow:none;
}


.dx-accordion-item-body {
    padding-top:4px;
    padding-bottom:4px;
}



label {
    margin-bottom: 2px;
}

   

.dx-accordion-item-opened {
    padding-bottom: 5px; !important;
}

.dx-field-label {
    color: var(--rs-label-color);
}


.dx-accordion-item-title {
    font-size: var(--rs-default-accordion-font-size);
}


.dx-toolbar .dx-toolbar-items-container {
    height: 40px;
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container {
    height: 40px;
}

.dx-row.dx-row-focused {
    background-color: gainsboro !important;
    color: black;
}

.dx-tab.dx-tab-selected {
    /*background-color: var(--rs-label-color);*/
    //color:white;
}

.dx-tab {
    padding-top: 4px; /*instead of 6*/
    padding-bottom: 4px; /*instead of 6*/
}


/*Override background default button in toolbar*/
.dx-toolbar-menu-section .dx-toolbar-hidden-button .dx-button-mode-contained.dx-button-default {
    background-color: #337ab7;
    border-color: transparent;
    color: #fff;
}

.dx-toolbar-menu-section .dx-toolbar-hidden-button .dx-button-mode-contained.dx-button-default.dx-state-hover {
        background-color: #285f8f;
        border-color: transparent;
}

/*Override background danger button in toolbar*/
.dx-toolbar-menu-section .dx-toolbar-hidden-button .dx-button-mode-contained.dx-button-danger {
    background-color: #d9534f;
    border-color: transparent;
    color: #fff;
}

    .dx-toolbar-menu-section .dx-toolbar-hidden-button .dx-button-mode-contained.dx-button-danger.dx-state-hover {
        background-color: #c9302c;
        border-color: transparent;
    }

/*Override background success button in toolbar*/
.dx-toolbar-menu-section .dx-toolbar-hidden-button .dx-button-mode-contained.dx-button-success {
    background-color: #5cb85c;
    border-color: transparent;
    color: #fff;
}


 .dx-toolbar-menu-section .dx-toolbar-hidden-button .dx-button-mode-contained.dx-button-success.dx-state-hover {
        background-color: #449d44;
        border-color: transparent;
 }


.dx-texteditor.dx-editor-filled.dx-state-disabled .dx-texteditor-input, .dx-texteditor.dx-editor-filled.dx-state-readonly .dx-texteditor-input, .dx-texteditor.dx-editor-filled.dx-state-readonly.dx-state-hover .dx-texteditor-input {
    color: black;
}

.dx-datagrid-headers .dx-header-row {
    background-color: ivory;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    font-size: var(--rs-default-widget-size);
    font-weight: normal;
    color: var(--rs-label-color);
    padding-top: var(--rs-default-datagrid-padding);
    padding-bottom: var(--rs-default-datagrid-padding);
}

.dx-datagrid-rowsview .dx-datagrid-table .dx-freespace-row, .dx-datagrid-rowsview .dx-datagrid-table .dx-virtual-row {
    background-color: white;
}

.dx-datagrid .dx-row > td {
    font-size: var(--rs-default-widget-size);
    padding-top: var(--rs-default-datagrid-padding);
    padding-bottom: var(--rs-default-datagrid-padding);
}

.dx-treeview-item {
    white-space: nowrap;
}

.dx-treeview-item-content {
    font-size: var(--rs-default-widget-size);
}

.dx-context-menu .dx-menu-item .dx-menu-item-content {
    padding: 8px 8px 6px;
}

.dx-fa-button.dx-fa-button-main .dx-overlay-content {
    max-width: 24px;
    max-height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.dx-fa-button.dx-fa-button-main .dx-overlay-content .dx-fa-button-icon, .dx-fa-button.dx-fa-button-main .dx-overlay-content .dx-fa-button-icon-close {
    padding: 3px;
}

.dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item {
   color: white !important;
   background-color: #35baf6 !important;
}

.dx-treeview-item-without-checkbox.dx-state-focused > .dx-treeview-item {
   color: white !important;
   background-color: #35baf6 !important;
}

.dx-datagrid-rowsview .dx-row > .dx-master-detail-cell {
    padding-top: 2px;
    padding-bottom: 0px;
}

.dx-field-item-label-location-top {
    padding-top: 4px; /* already changed with 20.2.9 */
    padding-bottom: 0px; /* already changed with 20.2.9 */
    padding-left: 0px;
}


/* Changes after Switch from 20.2.9 to 21.2.4  */

.dx-accordion-item-title
{
    height:40px;
}

/*

.dx-texteditor.dx-editor-filled .dx-placeholder::before,
.dx-texteditor.dx-editor-outlined .dx-placeholder::before {
    padding: 0px 0px 0px;
}

.dx-field-item-label-location-top {
    display: block;
    padding-top: 4px; 
    padding-bottom: 0px; 
    padding-right: 0px;
    padding-left: 0px;
}

.dx-texteditor-container {
    background-color: white;
}

.dx-texteditor-container .dx-texteditor-buttons-container {
    height: 19px !important;
    background-color: white;
}

.dx-button-has-icon .dx-button-content {
    padding: 7px 2px 2px 2px;
}

.dx-texteditor-input {
    background-color: transparent;
    padding-top: 2px;
}


.dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) .dx-master-detail-cell {
    background-color: white !important;
}*/

.dx-tab-content, .dx-tab-text {
   text-transform: capitalize;
}

.dx-button.dx-button-has-icon:not(.dx-button-has-text):not(.dx-shape-standard) {
   background-color: transparent;
}

.dx-button.dx-button-success.dx-state-focused {
   text-decoration: underline;
}

.dx-button.dx-button-danger.dx-state-focused {
   text-decoration: underline;
}

.dx-button.dx-button-normal.dx-state-focused {
   text-decoration: underline;
}

.dx-button.dx-button-default.dx-state-focused {
   text-decoration: underline;
}

.dx-scheduler-agenda .dx-scheduler-appointment-content, .dx-scheduler-agenda .dx-scheduler-appointment-recurrence .dx-scheduler-appointment-content {
   padding: 0;
   border-style: unset;
}

.dx-scheduler-agenda .dx-scheduler-appointment {
   border-style: inset;
   border-color: black;
   border-width: thin;
}