/********************
 Spacing
********************/

.zdm-ml-1 {
    margin-left: 0.25rem;
}
.zdm-ml-2 {
    margin-left: 0.5rem;
}
.zdm-ml-3 {
    margin-left: 0.1rem;
}
.zdm-ml-4 {
    margin-left: 1.5rem;
}
.zdm-mr-1 {
    margin-right: 0.25rem;
}
.zdm-mr-2 {
    margin-right: 0.5rem;
}
.zdm-mr-3 {
    margin-right: 0.1rem;
}
.zdm-mr-4 {
    margin-right: 1.5rem;
}
.zdm-mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.zdm-mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.zdm-mx-3 {
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}
.zdm-mx-4 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/********************
 Button
********************/

.zdm-btn {
    display: inline-block;
    color: #fff !important;
    background: #555 !important;
    border: 2px solid #555 !important;
    border-radius: 0px !important;
    font-size: 12px !important;
    text-decoration: none !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.4s !important; /* Safari */
    transition-duration: 0.4s !important;
}
.zdm-btn:hover {
    background: #fff !important;
    color: #555 !important;
}

/********************
 Button Icon
********************/

.zdm-btn-icon-frontend {
    font-size: 16px !important;
    vertical-align: text-bottom;
}

.material-icon-round.zdm-md-1,
.material-icon-outlined.zdm-md-1 {
    font-size: 1em;
}
.material-icon-round.zdm-md-1-5,
.material-icon-outlined.zdm-md-1-5 {
    font-size: 1.5em;
}
.material-icon-round.zdm-md-2,
.material-icon-outlined.zdm-md-21 {
    font-size: 2em;
}

.zdm-btn-icon {
    font-size: 1.2em !important;
    margin-right: 8px;
    position: relative;
    top: 3px;
}

.zdm-btn-icon-only {
    font-size: 16px !important;
    margin: 2px 4px 0 4px;
}

/********************
 Button Background
********************/

.zdm-btn-bg-grey3 {
    background: #333 !important;
}
.zdm-btn-bg-grey5 {
    background: #555 !important;
}
.zdm-btn-bg-grey7 {
    background: #777 !important;
}
.zdm-btn-bg-grey9 {
    background: #999 !important;
}

/********************
 Button Color
********************/

.zdm-btn-color-white {
    color: #fff !important;
}

/********************
 Button Border radius
********************/

.zdm-btn-radius1 {
    border-radius: 1px !important;
}

.zdm-btn-radius2 {
    border-radius: 2px !important;
}

.zdm-btn-radius3 {
    border-radius: 3px !important;
}

.zdm-btn-radius4 {
    border-radius: 4px !important;
}

.zdm-btn-radius5 {
    border-radius: 5px !important;
}

.zdm-btn-radius6 {
    border-radius: 6px !important;
}

.zdm-btn-radius7 {
    border-radius: 7px !important;
}

.zdm-btn-radius8 {
    border-radius: 8px !important;
}

.zdm-btn-radius9 {
    border-radius: 9px !important;
}

.zdm-btn-radius10 {
    border-radius: 10px !important;
}

/********************
 Button Style
********************/

/* black */
.zdm-btn-style-black {
    color: #fff !important;
    background: #000 !important;
    border: 2px solid #000 !important;
}
.zdm-btn-style-black:hover {
    color: #000 !important;
    background: #fff !important;
}

/* grey 5 */
.zdm-btn-style-grey5 {
    color: #fff !important;
    background: #555 !important;
    border: 2px solid #555 !important;
}
.zdm-btn-style-grey5:hover {
    color: #000 !important;
    background: #fff !important;
}

/* grey 7 */
.zdm-btn-style-grey7 {
    color: #fff !important;
    background: #777 !important;
    border: 2px solid #777 !important;
}
.zdm-btn-style-grey7:hover {
    color: #000 !important;
    background: #fff !important;
}

/* grey 9 */
.zdm-btn-style-grey9 {
    color: #fff !important;
    background: #999 !important;
    border: 2px solid #999 !important;
}
.zdm-btn-style-grey9:hover {
    color: #000 !important;
    background: #fff !important;
}

/* grey 11 */
.zdm-btn-style-grey11 {
    color: #000 !important;
    background: #bbb !important;
    border: 2px solid #bbb !important;
}
.zdm-btn-style-grey11:hover {
    color: #000 !important;
    background: #fff !important;
}

/* grey 13 */
.zdm-btn-style-grey13 {
    color: #000 !important;
    background: #ddd !important;
    border: 2px solid #ddd !important;
}
.zdm-btn-style-grey13:hover {
    color: #000 !important;
    background: #fff !important;
}

/* purple */
.zdm-btn-style-purple {
    color: #fff !important;
    background: #cb28cc !important;
    border: 2px solid #cb28cc !important;
}
.zdm-btn-style-purple:hover {
    color: #cb28cc !important;
    background: #fff !important;
}

/* blue */
.zdm-btn-style-blue {
    color: #fff !important;
    background: #0c80e8 !important;
    border: 2px solid #0c80e8 !important;
}
.zdm-btn-style-blue:hover {
    color: #0c80e8 !important;
    background: #fff !important;
}

/* green */
.zdm-btn-style-green {
    color: #fff !important;
    background: #59c71d !important;
    border: 2px solid #59c71d !important;
}
.zdm-btn-style-green:hover {
    color: #000 !important;
    background: #fff !important;
}

/* yellow */
.zdm-btn-style-yellow {
    color: #fff !important;
    background: #ffcd19 !important;
    border: 2px solid #ffcd19 !important;
}
.zdm-btn-style-yellow:hover {
    color: #000 !important;
    background: #fff !important;
}

/* orange */
.zdm-btn-style-orange {
    color: #fff !important;
    background: #ff7c00 !important;
    border: 2px solid #ff7c00 !important;
}
.zdm-btn-style-orange:hover {
    color: #ff7c00 !important;
    background: #fff !important;
}

/* red */
.zdm-btn-style-red {
    color: #fff !important;
    background: #fa3e3e !important;
    border: 2px solid #fa3e3e !important;
}
.zdm-btn-style-red:hover {
    color: #fa3e3e !important;
    background: #fff !important;
}

/********************
 Button Style Outline
********************/

/* black */
.zdm-btn-style-black-outline {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #000 !important;
}
.zdm-btn-style-black-outline:hover {
    color: #fff !important;
    background: #000 !important;
}

/* grey 5 */
.zdm-btn-style-grey5-outline {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #555 !important;
}
.zdm-btn-style-grey5-outline:hover {
    color: #fff !important;
    background: #555 !important;
}

/* grey 7 */
.zdm-btn-style-grey7-outline {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #777 !important;
}
.zdm-btn-style-grey7-outline:hover {
    color: #fff !important;
    background: #777 !important;
}

/* grey 9 */
.zdm-btn-style-grey9-outline {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #999 !important;
}
.zdm-btn-style-grey9-outline:hover {
    color: #fff !important;
    background: #999 !important;
}

/* grey 11 */
.zdm-btn-style-grey11-outline {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #bbb !important;
}
.zdm-btn-style-grey11-outline:hover {
    color: #000 !important;
    background: #bbb !important;
}

/* grey 13 */
.zdm-btn-style-grey13-outline {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #ddd !important;
}
.zdm-btn-style-grey13-outline:hover {
    color: #000 !important;
    background: #ddd !important;
}

/* purple */
.zdm-btn-style-purple-outline {
    color: #cb28cc !important;
    background: #fff !important;
    border: 2px solid #cb28cc !important;
}
.zdm-btn-style-purple-outline:hover {
    color: #fff !important;
    background: #cb28cc !important;
}

/* blue */
.zdm-btn-style-blue-outline {
    color: #0c80e8 !important;
    background: #fff !important;
    border: 2px solid #0c80e8 !important;
}
.zdm-btn-style-blue-outline:hover {
    color: #fff !important;
    background: #0c80e8 !important;
}

/* green */
.zdm-btn-style-green-outline {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #59c71d !important;
}
.zdm-btn-style-green-outline:hover {
    color: #fff !important;
    background: #59c71d !important;
}

/* yellow */
.zdm-btn-style-yellow-outline {
    color: #000 !important;
    background: #fff !important;
    border: 2px solid #ffcd19 !important;
}
.zdm-btn-style-yellow-outline:hover {
    color: #fff !important;
    background: #ffcd19 !important;
}

/* orange */
.zdm-btn-style-orange-outline {
    color: #ff7c00 !important;
    background: #fff !important;
    border: 2px solid #ff7c00 !important;
}
.zdm-btn-style-orange-outline:hover {
    color: #fff !important;
    background: #ff7c00 !important;
}

/* red */
.zdm-btn-style-red-outline {
    color: #fa3e3e !important;
    background: #fff !important;
    border: 2px solid #fa3e3e !important;
}
.zdm-btn-style-red-outline:hover {
    color: #fff !important;
    background: #fa3e3e !important;
}

/********************
 Align
********************/

.zdm-center {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}