table.dataTable tbody tr.selected {
    background-color: #ed1c24 !important;
}

.DTE_Field .control-label {
    text-align: left;
}

.DTE_Field_Type_ckeditor {
    display: inline-block;
}

.DTE_Field_Type_title label.control-label {
    margin: 0 0 5px 0;
}

.btn-collapse:hover,
.btn-collapse[aria-expanded='true'] {
    background-color: #ed1c24;
    color: #ffffff;
    border-bottom-color: #ffffff;
}

.modal-header {
    color: #ffffff;
    background-color: #ed1c24;
}

.text-right {
    text-align: right;
}

.bootstrap-dialog.type-danger .modal-header {
    background-color: #ed1c24;
}

.btn {
    border-bottom: 1px solid;
}

#courts-page #courtsTable th {
    font-weight: bold;
    background-color: #f1f1f1;
}

#courts-page #courtsTable td:hover {
    border-bottom: 1px solid red;
}

#courts-page #courtsTable td span.blocked {
    cursor: pointer;
}

.checkbox {
    margin-left: 10px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    cursor: default !important;
}

.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    cursor: pointer !important;
}

#courts-page .dt-buttons.btn-group {
    margin-top: 0;
}

.tblheader {
    margin-top: 12px;
    font-size: medium;
    font-weight: 600;
}

.product-image {
    position: relative;
    max-width: 50px;
    float: left;
    margin-right: 15px;
    border-radius: 5px;
    background-clip: padding-box;
}

.product-name {
    display: block;
}

.product-variant {
    color: #9e9e9e;
}

img.thumbnail {
    width: 128px;
}

img.club-logo {
    width: 32px;
    margin: 8px;
}

/* apply for spectrum colorpicker */
.colorSquare {
    width: 20px;
    height: 20px;
    margin: auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
    text-align: center;
}

/* fix error length and filter not show on mobile devices */
@media (max-width: 767px) {
    .dataTables_length,
    .dataTables_filter {
        display: block;
        position: relative;
        width: 100%;
        margin: 8px;
        left: 0;
        right: 0;
        text-align: center;
    }
}

label.error {
    color: red;
}

.image-modal {
    &.modal-target {
        width: 300px;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
    }

    &.modal-target:hover {
        opacity: 0.7;
    }

    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 9999999;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.8);
        /* Black w/ opacity */
    }

    /* Modal Content (image) */
    .modal-content {
        margin: auto;
        display: block;
        width: 50%;
        opacity: 1 !important;
        max-width: 1200px;
        /*width 90% when screen mobile */
        @media (max-width: 767px) {
            width: 100%;
        }
    }

    /* Caption of Modal Image */
    .modal-caption {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 1200px;
        text-align: center;
        color: white;
        font-weight: 700;
        font-size: 1em;
        margin-top: 32px;
    }

    /* Add Animation */
    .modal-content,
    .modal-caption {
        -webkit-animation-name: zoom;
        -webkit-animation-duration: 0.6s;
        animation-name: zoom;
        animation-duration: 0.6s;
    }

    @-webkit-keyframes zoom {
        from {
            -webkit-atransform: scale(0)
        }

        to {
            -webkit-transform: scale(1)
        }
    }

    @keyframes zoom {
        from {
            transform: scale(0)
        }

        to {
            transform: scale(1)
        }
    }

    /* The Close Button */
    .modal-close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }

    .modal-close:hover,
    .modal-close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

}

td.profile-image img {
    position: relative;
    max-width: 64px;
    float: left;
    margin: auto;
    border-radius: 5px;
    background-clip: padding-box;
}
td.poster-image > img {
    position: relative;
    width: 96px;
    float: left;
    margin: auto;
    background-clip: padding-box;
}