/* Basic */

.ui-button[id$="MyBasicButton"] { 
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #333333;
    background-color: #e7e7e7;
    border-color: #ccc;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
}

.ui-widget[id$="MyBasicButton"] {    
}

.ui-state-default[id$="MyBasicButton"] { 
    color: #333333;
    background-color: #e7e7e7;
    border-color: #ccc;
    box-shadow: none;
}

.ui-state-focus[id$="MyBasicButton"] {     
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    color: #333333;
    background-color: #cecece;
    border-color: #8c8c8c;
    box-shadow: none;
}

.ui-state-hover[id$="MyBasicButton"] { 
    color: #333333;
    background-color: #cecece;
    border-color: #adadad;
    text-decoration: none;
    box-shadow: none;
}

.ui-state-active[id$="MyBasicButton"] { 
    color: #333333;
    background-color: #bcbcbc;
    border-color: #8c8c8c;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    box-shadow: none;
}

.ui-corner-all[id$="MyBasicButton"] { 
}

.ui-button-text-only[id$="MyBasicButton"] { 
    padding: .53em 0em .53em 0em;
}

.ui-button[id$="MyBasicButton"] > .ui-button-text {     
    display: inline !important;
    padding: .8em .8em  .8em .8em;
}

.ui-button[id$="MyBasicButton"] > .ui-c {
}

/* Primary */

.ui-button[id$="MyPrimaryButton"] { 
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    background-color: #008cba;
    border-color: #0079a1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
}

.ui-widget[id$="MyPrimaryButton"] {    
}

.ui-state-default[id$="MyPrimaryButton"] { 
    color: #fff;
    background-color: #008cba;
    border-color: #0079a1;
    box-shadow: none;
}

.ui-state-focus[id$="MyPrimaryButton"] {     
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    color: #fff;
    background-color: #006687;
    border-color: #004b63;
    box-shadow: none;
}

.ui-state-hover[id$="MyPrimaryButton"] { 
    color: #fff;
    background-color: #006687;
    border-color: #004b63;
    text-decoration: none;
    box-shadow: none;
}

.ui-state-active[id$="MyPrimaryButton"] { 
    color: #fff;
    background-color: #204d74;
    border-color: #122b40;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    box-shadow: none;
}

.ui-corner-all[id$="MyPrimaryButton"] { 
}

.ui-button-text-only[id$="MyPrimaryButton"] { 
    padding: .53em 0em .53em 0em;
}

.ui-button[id$="MyPrimaryButton"] > .ui-button-text {     
    display: inline !important;
    padding: .8em .8em  .8em .8em;
}

.ui-button[id$="MyPrimaryButton"] > .ui-c {
}

/* Success */

.ui-button[id$="MySuccessButton"] { 
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    background-color: #43ac6a;
    border-color: #3c9a5f;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
}

.ui-widget[id$="MySuccessButton"] {    
}

.ui-state-default[id$="MySuccessButton"] { 
    color: #fff;
    background-color: #43ac6a;
    border-color: #3c9a5f;
    box-shadow: none;
}

.ui-state-focus[id$="MySuccessButton"] {     
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    color: #fff;
    background-color: #358753;
    border-color: #2b6e44;
    box-shadow: none;
}

.ui-state-hover[id$="MySuccessButton"] { 
    color: #fff;
    background-color: #358753;
    border-color: #2b6e44;
    text-decoration: none;
    box-shadow: none;
}

.ui-state-active[id$="MySuccessButton"] { 
    color: #fff; 
    background-color: #2a6b42; 
    border-color: #255625; 
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    box-shadow: none;
}

.ui-corner-all[id$="MySuccessButton"] { 
}

.ui-button-text-only[id$="MySuccessButton"] { 
    padding: .53em 0em .53em 0em;
}

.ui-button[id$="MySuccessButton"] > .ui-button-text {     
    display: inline !important;
    padding: .8em .8em  .8em .8em;
}

.ui-button[id$="MySuccessButton"] > .ui-c {
}

/* Info */

.ui-button[id$="MyInfoButton"] { 
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
}

.ui-widget[id$="MyInfoButton"] {    
}

.ui-state-default[id$="MyInfoButton"] { 
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
    box-shadow: none;
}

.ui-state-focus[id$="MyInfoButton"] {     
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85;
    box-shadow: none;
}

.ui-state-hover[id$="MyInfoButton"] { 
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85;
    text-decoration: none;
    box-shadow: none;
}

.ui-state-active[id$="MyInfoButton"] { 
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    box-shadow: none;
}

.ui-corner-all[id$="MyInfoButton"] { 
}

.ui-button-text-only[id$="MyInfoButton"] { 
    padding: .53em 0em .53em 0em;
}

.ui-button[id$="MyInfoButton"] > .ui-button-text {     
    display: inline !important;
    padding: .8em .8em  .8em .8em;
}

.ui-button[id$="MyInfoButton"] > .ui-c {
}

/* Warning */

.ui-button[id$="MyWarningButton"] { 
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    background-color: #E99002;
    border-color: #d08002;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
}

.ui-widget[id$="MyWarningButton"] {    
}

.ui-state-default[id$="MyWarningButton"] { 
    color: #fff;
    background-color: #E99002;
    border-color: #d08002;
    box-shadow: none;
}

.ui-state-focus[id$="MyWarningButton"] {     
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    color: #fff;
    background-color: #b67102;
    border-color: #935b01;
    box-shadow: none;
}

.ui-state-hover[id$="MyWarningButton"] { 
    color: #fff;
    background-color: #b67102;
    border-color: #935b01;
    text-decoration: none;
    box-shadow: none;
}

.ui-state-active[id$="MyWarningButton"] { 
    color: #fff;
    background-color: #935b01;
    border-color: #513201;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    box-shadow: none;
}

.ui-corner-all[id$="MyWarningButton"] { 
}

.ui-button-text-only[id$="MyWarningButton"] { 
    padding: .53em 0em .53em 0em;
}

.ui-button[id$="MyWarningButton"] > .ui-button-text {     
    display: inline !important;
    padding: .8em .8em  .8em .8em;
}

.ui-button[id$="MyWarningButton"] > .ui-c {
}

/* Danger */

.ui-button[id$="MyDangerButton"] { 
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #fff;
    background-color: #F04124;
    border-color: #ea2f10;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
}

.ui-widget[id$="MyDangerButton"] {    
}

.ui-state-default[id$="MyDangerButton"] { 
    color: #fff;
    background-color: #F04124;
    border-color: #ea2f10;
    box-shadow: none;
}

.ui-state-focus[id$="MyDangerButton"] {     
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    color: #fff;
    background-color: #d32a0e;
    border-color: #b1240c;
    box-shadow: none;
}

.ui-state-hover[id$="MyDangerButton"] { 
    color: #fff;
    background-color: #d32a0e;
    border-color: #b1240c;
    text-decoration: none;
    box-shadow: none;
}

.ui-state-active[id$="MyDangerButton"] { 
    color: #fff;
    background-color: #b1240c;
    border-color: #731708;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
    box-shadow: none;
}

.ui-corner-all[id$="MyDangerButton"] { 
}

.ui-button-text-only[id$="MyDangerButton"] { 
    padding: .53em 0em .53em 0em;
}

.ui-button[id$="MyDangerButton"] > .ui-button-text {     
    display: inline !important;
    padding: .8em .8em  .8em .8em;
}

.ui-button[id$="MyDangerButton"] > .ui-c {
}