/**
 * KyMD.css
 * A Simple MaterialDesign Stylesheet without any framework
 * @author: CKylin
 * @Version: 1.1
 * License: MIT License
 */

#dialoger-dialog>* {
    transition: .6s;
}
#dialoger-dialog>*:focus {
    border: none;
}
.dialog-input, .dialog-button, .dialog-select, .dialog-option, .dialog-optgroup, .dialog-textarea {
    line-height: 24px;
    border: none;
    outline: none;
}
.dialog-a,.dialog-a:link,.dialog-a:active,.dialog-a:hover,.dialog-a:visited{
    transition: .3s;
    text-decoration:none;
    color: #3f51b5;
    display: inline-block;
    padding: 0 12px;
    line-height: 36px;
    border: none;
    border-radius: 2px;
}
.dialog-a:hover{
    background-color: rgba(158,158,158,.2);
}
.dialog-a:active{
    background-color: rgba(158,158,158,.42);
}
.dialog-button {
    transition: .6s;
    display: block;
    background-color: #e6e6e6;
    border-radius: 2px;
    /*padding: 5px;*/
    border: none;
    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, .3);
    padding: 0 40px;
    line-height: 40px;
    font-weight: bold;
}
.dialog-button:hover {
    transition: .6s;
    /*box-shadow: 0 2px 2px rgba(0, 0, 0, .3);*/
    box-shadow: 0 2px 6px 0px rgba(0, 0, 0, .3);
}
.dialog-button:active {
    background: #d6d5d5;
}
.dialog-button.default {
    background-color: #e6e6e6;
    color: black;
}
.dialog-button.primary {
    background: #2196F3;
    color: white;
}
.dialog-button.success {
    background: #4caf50;
    color: white;
}
.dialog-button.light {
    background: #ffc107;
    color: white;
}
.dialog-button.green {
    background: #009688;
    color: white;
}
.dialog-button.chocolate {
    background: #795548;
    color: white;
}
.dialog-button.deep {
    background: #607d8b;
    color: white;
}
.dialog-button.disable {
    /*background: #9e9e9e;*/
    color: #b3b3b3;
}
.dialog-button.disabled {
    background: #9e9e9e;
    color: #8a8a8a;
}
.dialog-button.warning{
    background: #FF5722;
    color: white;
}
.dialog-button.error{
    background: #F44336;
    color: white;
}

.dialog-button.default:active {
    background: #d5d5d5;
    color: black;
}
.dialog-button.primary:active {
    background: #1976d2;
    color: white;
}
.dialog-button.success:active {
    background: #388e3c;
    color: white;
}
.dialog-button.light:active {
    background: #ffa000;
    color: white;
}
.dialog-button.green:active {
    background: #388e3c;
    color: white;
}
.dialog-button.chocolate:active {
    background: #5d4037;
    color: white;
}
.dialog-button.deep:active {
    background: #455a64;
    color: white;
}
.dialog-button.disabled:active {
    background: #616161;
    color: white;
}
.dialog-button.warning:active {
    background: #d84315;
    color: white;
}
.dialog-button.error:active {
    background: #d32f2f;
    color: white;
}
.dialog-textarea {
    transition: .6s;
    font-size:13px;
    resize:none;
}
.dialog-select{
    transition: .6s;
    background-color: rgba(0,0,0,0);
    border: none;
    border-bottom: solid 2px;
    border-bottom-color: #673AB7;
}
.dialog-select:focus{
    transition: .6s;
    border: none;
    border-bottom: solid 2px;
    border-bottom-color: #2196f3;
}
.dialog-card:hover {
    transition: .6s;
    box-shadow: 1px 5px 8px rgba(0, 0, 0, .1);
}
.dialog-card>.dialog-header {
    padding: 6px 24px;
    padding-bottom: 3px;
    color: #3f51b5;
    font-size: x-large;
	word-wrap:break-word;
}
.dialog-card>.dialog-subtitle {
    padding: 6px 24px;
    padding-bottom: 3px;
    color: #a9a9a9;
    font-size: small;
	word-wrap:break-word;
}
.dialog-card>.dialog-body {
    padding: 6px 24px;
    padding-bottom: 3px;
    margin-left: 2%;
	word-wrap:break-word;
}
.dialog-card>.dialog-footer {
    padding: 6px 24px;
    padding-bottom: 6px;
    /*text-align: right;*/
    border-top: 1px solid rgba(0,0,0,.1);
	word-wrap:break-word;
}
.dialog-footer-right{
    border: none!important;
    float: right;
    color: rgba(0, 0, 0, 0.67);
    font-size: small;
}
.dialog-clear {
    clear:both;
}

@media screen and (min-width: 768px) {
    /*>768*/
    .dialog-card {
        max-width: 80%;
    }
}
@media screen and (min-width: 1360px) {
    /*>1360*/
    .dialog-card {
        max-width: 84%;
    }
}
@media screen and (max-width: 768px) and (min-width: 500px) {
    /*500-768*/
    .dialog-card {
        max-width: 84%;
    }
}
@media screen and (max-width: 500px) {
    /*?-500*/
    .dialog-card {
        max-width: 96%;
    }
}




#dialoger-dialog {
    border: none !important;
    background-color: rgba(0,0,0,0) !important;
    width: auto !important;
    height: auto !important;
    position: fixed;
    left: 1%;
    top: 40%;
    transform: translate(0%,-10%);
    margin: auto;
    overflow: hidden;
}
.dialog-card{
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 12px;
    background-color: #fff;
    height: auto;
    -webkit-transition: all .6s;
    -moz-transition: all .6s;
    transition: all .6s;
    box-shadow: 1px 5px 8px rgba(0, 0, 0, .1);
    padding-bottom: 6px;
    transform: scale(.8,.8);
    opacity: 0;
    filter: alpha(opacity=0);
    max-height: 90%;
    max-width: 90%;
    max-height: 90vh;
    max-width: 90vh;
}
.dialog.on{
    transition: .3s cubic-bezier(0.42, 0, 0.08, 1.04) !important;
    transform: scale(1,1);
    opacity: 100;
    filter: alpha(opacity=100);
}
.dialog.on.off{
    transition: .3s cubic-bezier(0.42, 0, 0.08, 1.04) !important;
    transform: scale(.9,.9);
    opacity: 0;
    filter: alpha(opacity=0);
}
#dialog-contents{
    word-wrap: break-word;
    word-break: normal; 
}
#dialog-header{
    width: 92%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
#dialog::backdrop {
    background: rgba(0,0,0,0);
}
#dialog.show::backdrop {
    transition: .3s;
    background: rgba(0,0,0,0.3);
}
#dialog.show.hide::backdrop {
    transition: .3s;
    background: rgba(0,0,0,0);
}