input[type="button"],
input[type="submit"],
button
{
border:             1px solid var(--bt-color);
background-color:   var(--bt-text-hover);
color:              var(--bt-color);
cursor:             pointer;
padding:            5px 10px;
font-size:          14px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
button:hover
{
background-color:   var(--bt-color);
color:              var(--bt-text-hover);
}

.dt-dialog input[type="button"],
.dt-dialog input[type="submit"],
.dt-dialog button,
input[type="button"].dt-button-main,
input[type="submit"].dt-button-main,
button.dt-button-main
{
border:             1px solid var(--dialog-bt-color);
background-color:   var(--dialog-bt-color);
color:              var(--dialog-bt-text-hover);
cursor:             pointer;
padding:            5px 10px;
font-size:          14px;
}

.dt-dialog input[type="button"]:hover,
.dt-dialog input[type="submit"]:hover,
.dt-dialog button:hover,
input[type="button"].dt-button-main:hover,
input[type="submit"].dt-button-main:hover,
button.dt-button-main:hover
{
background-color:   var(--dialog-bt-color-hover);
color:              var(--dialog-bt-text-hover);
}

a
{
color:              var(--bt-color); 
text-decoration:    none;  
}

a:hover
{
text-decoration:    underline;   
}


/**/
.icon-11-button
{
height:     11px;
width:      11px;
cursor:     pointer;
}

.icon-16-button
{
height:     16px;
width:      16px;
cursor:     pointer;
}

.icon-18-button
{
height:     18px;
width:      18px;
cursor:     pointer;
}

.icon-20-button
{
height:     20px;
width:      20px;
cursor:     pointer;
}

.icon-24-button
{
height:     24px;
width:      24px;
cursor:     pointer;
}

.icon-32-button
{
height:     32px;
width:      32px;
cursor:     pointer;
}

.icon-48-button
{
height:     48px;
width:      48px;
cursor:     pointer;
}

.icon-64-button
{
height:     64px;
width:      64px;
cursor:     pointer;
}

.icon-20-round-border 
{
/*border:         solid 1px;*/
border-radius:  11px;
margin:         5px;
width:          20px;
height:         20px;
}


/**/
.dt-icon-up
{
background: transparent url("/image/button/up.svg") center/contain no-repeat;  
}

.dt-icon-down
{

background: transparent url("/image/button/down.svg") center/contain no-repeat; 
}

.dt-icon-close
{

background: transparent url("/image/button/close.svg") center/contain no-repeat; 
}

.dt-icon-delete
{

background: transparent url("/image/button/delete.svg") center/contain no-repeat; 
}

.dt-icon-desktop
{

background: transparent url("/image/button/desktop.svg") center/contain no-repeat; 
}

.dt-icon-reboot
{

background: transparent url("/image/button/reboot.svg") center/contain no-repeat; 
}

.dt-icon-restore
{

background: transparent url("/image/button/restore.svg") center/contain no-repeat; 
}

.dt-icon-view
{

background: transparent url("/image/button/view.svg") center/contain no-repeat; 
}

.dt-icon-hide
{

background: transparent url("/image/button/hide.svg") center/contain no-repeat; 
}

.dt-icon-detail
{

background: transparent url("/image/button/detail.svg") center/contain no-repeat; 
}

.dt-icon-clear
{

background: transparent url("/image/button/clear.svg") center/contain no-repeat; 
}

.dt-icon-password
{

background: transparent url("/image/button/password.svg") center/contain no-repeat; 
}

.dt-icon-logout
{

background: transparent url("/image/button/logout.svg") center/contain no-repeat; 
}

.dt-icon-account
{

background: transparent url("/image/button/account.svg") center/contain no-repeat; 
}

.dt-icon-account-add
{

background: transparent url("/image/button/accountadd.svg") center/contain no-repeat; 
}

.dt-icon-next
{

background: transparent url("/image/button/next.svg") center/contain no-repeat; 
}

.dt-icon-prev
{

background: transparent url("/image/button/prev.svg") center/contain no-repeat; 
}

.dt-icon-last
{

background: transparent url("/image/button/last.svg") center/contain no-repeat; 
}

.dt-icon-first
{

background: transparent url("/image/button/first.svg") center/contain no-repeat; 
}

.dt-icon-photo-add 
{

background: transparent url("/image/button/photo_add.svg") center/contain no-repeat; 
}

.dt-icon-society-add 
{

background: transparent url("/image/button/society.svg") center/contain no-repeat; 
}

.dt-icon-save 
{

background: transparent url("/image/button/save.svg") center/contain no-repeat; 
}

.dt-icon-valid 
{

background: transparent url("/image/button/valid.svg") center/contain no-repeat; 
}

.dt-icon-cancel 
{

background: transparent url("/image/button/cancel.svg") center/contain no-repeat; 
}

.dt-icon-add 
{

background: transparent url("/image/button/add.svg") center/contain no-repeat; 
}

.dt-icon-edit 
{

background: transparent url("/image/button/edit.svg") center/contain no-repeat; 
}

.dt-icon-upload 
{

background: transparent url("/image/button/upload.svg") center/contain no-repeat; 
}



/**/
.icon-color-red,
.icon-container-color-red-16 > div
{
filter: invert(18%) sepia(100%) saturate(7473%) hue-rotate(8deg) brightness(103%) contrast(120%);
}

.icon-color-green,
.icon-container-color-green-16 > div
{
filter: invert(73%) sepia(91%) saturate(4718%) hue-rotate(86deg) brightness(118%) contrast(127%);
}

.icon-color-button,
.icon-container-color-button-16 > div
{

/*filter: invert(61%) sepia(54%) saturate(2141%) hue-rotate(159deg) brightness(90%) contrast(87%);*/
filter: invert(20%) sepia(95%) saturate(2571%) hue-rotate(344deg) brightness(100%) contrast(90%);
}

.icon-color-button-main
{
filter: invert(78%) sepia(40%) saturate(6573%) hue-rotate(341deg) brightness(96%) contrast(91%);
}

.icon-color-title
{

filter: invert(37%) sepia(47%) saturate(0%) hue-rotate(231deg) brightness(98%) contrast(99%);
/*filter: invert(88%) sepia(15%) saturate(5308%) hue-rotate(310deg) brightness(115%) contrast(104%);*/
/*filter: invert(34%) sepia(64%) saturate(1592%) hue-rotate(4deg) brightness(98%) contrast(87%);*/
}

.icon-color-table-header
{
filter:invert(41%) sepia(0%) saturate(0%) hue-rotate(205deg) brightness(93%) contrast(82%);
}


.icon-color-input-border
{

filter: invert(93%) sepia(6%) saturate(109%) hue-rotate(169deg) brightness(102%) contrast(87%);
}

.icon-color-account-menu-border
{
/*filter: invert(91%) sepia(6%) saturate(214%) hue-rotate(165deg) brightness(89%) contrast(95%);*/
/*filter: invert(37%) sepia(97%) saturate(1332%) hue-rotate(330deg) brightness(109%) contrast(95%);*/
filter: invert(58%) sepia(16%) saturate(1555%) hue-rotate(308deg) brightness(102%) contrast(97%);
}

.icon-color-white,
.icon-container-color-button-20:hover > div,
.icon-container-color-button-18:hover > div,
.icon-container-color-button-16:hover > div,
.icon-container-color-green-16:hover > div,
.icon-container-color-red-16:hover > div,
.icon-container-color-title-20:hover > div,
button:hover > div,
.icon-container-color-table-header-16:hover > div
{
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

.icon-container-color-button-20,
.icon-container-20
{
width:              20px;
height:             20px;
}

.icon-container-color-button-16,
.icon-container-16,
.icon-container-color-table-header-16,
.icon-container-color-green-16,
.icon-container-color-red-16
{
width:              16px;
height:             16px;
}

.icon-container-color-button-18,
.icon-container-18
{
width:              18px;
height:             18px;
}

.icon-container-color-button-20:hover,
.icon-container-color-button-18:hover,
.icon-container-color-button-16:hover
{
background-color:   var(--bt-color);
}

.icon-container-color-title-20:hover,
.icon-container-color-title-18:hover,
.icon-container-color-title-16:hover
{
background-color:   var(--dialog-title-bg-color);
}

.icon-container-color-red-16:hover
{
background-color:   red;
}

.icon-container-color-green-16:hover
{
background-color:   green;
}

.icon-container-color-table-header-16:hover
{
background-color:   var(--dev-grid-header-color);
}

.icon-vertical
{
display:inline-block;
}