/* main color */
.text-px{
    color:#fea1a1!important /*72d7ff*/
}

.btn-px {
    color: #1f1f1f;
    background-color: #ff9c9c; /*f96a6a*/
    border-color: #ff9c9c;
}

.btn-px:hover {
    color: #fff;
    background-color: #f96a6a; /* 2e515b 307473 2c6b6a */
    border-color: #f96a6a;
}

.btn-outline-px {
    /*border-radius:13px;*/
    color: #ff9c9c;
    border-color: #ff9c9c;
}

.btn-outline-px:hover {
    color: #fff;
    background-color: #f96a6a;
    border-color: #f96a6a;
}

.badge-px {
    color: #fea1a1;
    border: 1px solid #fea1a1;
}

.badge-px-dark {
    color: #fff;
    background-color: #494949; /*49c5c3 494949 */
    font-weight: 400;
    padding: .4em .4em;
}

/* purple */
.text-px-purple {
    color: #d4a3ff!important;
}

.btn-px-purple {
    color: #fff;
    background-color: #9b37f2;
    border-color: #9b37f2;
}

.btn-px-purple:hover {
    color: #fff;
    background-color: #8425d2;
    border-color: #8425d2;
}

.btn-outline-px-purple {
    color: #be8bec;
    border-color: #be8bec;
    background-color: #2b2b2b;
}

.btn-outline-px-purple:hover {
    color: #ffffff;
    background-color: #9b37f2;
    border-color: #9b37f2;
}


.text-px-warning{
    color:#faf5b1!important
}

.text-px-success{
    color:#8cc549!important
}

.text-px-secondary{
    color:#bbbbbb!important;
}

.text-px-danger{
    color:#f65050!important;
}

/* primary */
.text-px-primary{
    color:#49c5c3!important
}



.btn-px-primary {
    color: #1f1f1f;
    background-color: #4cd4d7;
    border-color: #4cd4d7;
}

.btn-px-primary:hover {
    color: #fff;
    background-color: #40b0b3; /* 2e515b 307473 2c6b6a */
    border-color: #40b0b3;
}

.btn-outline-px-primary {
    /*border-radius:13px;*/
    color: #4cd4d7;
    border-color: #4cd4d7;
}

.btn-outline-px-primary:hover {
    color: #fff;
    background-color: #40b0b3;
    border-color: #40b0b3;
}

.btn-dark {
    color: #fff;
    background-color: #393939;
    border-color: #393939;
}

.btn-dark:hover {
    color: #fff;
    background-color: #393939;
    border-color: #393939;
}

/* background color */
.bg-px{
    background-color: #f96a6a!important;
}

.bg-black {
    background-color:#282828; /* 2d3237 */
}

.bg-deepdark {
    background-color: #1f1f1f; /* 1f1f1f 2b3035 */
}

.bg-dark{
    background-color: #272727!important;
}

.bg-lightdark{
    background-color: #353535!important;
}


.bg-px-danger{
    background-color: #f65050!important;
}


.c-point{
    cursor:pointer;
}

/* modal close button */
.close {
    float: right;
    font-size: 1.7rem;
    font-weight: 100;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    opacity: .5;
}

.close:hover {
    color: #f96a6a;
}
        
.display-none{
    display:none;
}


.form-control-sm {
    width: 200px;
    font-size:13px;
}
.form-control-timecode {
    width: 42px;
    font-size:13px;
}

.form-control-aspect-ratio {
    width: 78px;
    font-size: 13px;
}

.form-control {
    color: #ffffff !important;
    background-color: #353535 !important;
    /* 24282d 272a2d 242424 */
    border: 1px solid #353535 !important;
    /* 343a40 393c3f 242424 */
}


/* font size*/
.font-size-11{
    font-size:11px;
}
.font-size-12{
    font-size:12px;
}
.font-size-13{
    font-size:13px;
}
.font-size-14{
    font-size:14px;
}

.font-size-15 {
    font-size: 15px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-18 {
    font-size: 15px;
}


/* vertical align */
.vertical-align-top {
    vertical-align: top
}

.vertical-align-baseline {
    vertical-align: baseline
}

/* display */
.display-inline {
    display: inline-block;
}

/* nav */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #353535;
}

.nav-link:focus,
.nav-link:hover {
    text-decoration: none;
    background-color: #353535;
}


/* fade 
.fadein, .fadeout {
    visibility: hidden;
    opacity: 0;
    -moz-transition: opacity 0.4s ease-in-out;
    -o-transition: opacity 0.4s ease-in-out;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}


.fadein {
    visibility: visible;
    opacity: 1;
}

.fadein_line {
    display:inline-block;
    visibility: visible;
    opacity: 1;
}*/

.fadein {
    display: inline-block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

.fadeout {
    display: none;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
}


/* table */
.table_title {
    background-color: #353535;
    border-bottom: 2px solid #272727;
}

.table_content {
    background-color: #2b2b2b;
    border-bottom: 2px solid #272727;
}

.table-striped-color {
    background-color: #2a2a2a;
    /* #2a2a2a 2f2f2f */
}

.no-drag {
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep {
    background: #ff6565 !important;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progressline {
    background: #daa6a6 !important;
}

.swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progresscircle {
    background: #daa6a6 !important;
}

.swal2-progresssteps .swal2-progresscircle {
    background: #ff6565 !important;
}

.swal2-progresssteps .swal2-progressline {
    background: #ff6565 !important;
}