/*General Style*/

.card h2 {
    font-size: 20px;
    color: #535353;
}

/*containers*/
.cont-wr {
    max-width: 1200px;
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    position: relative;
    margin: 0px auto;
}
.cont-1, .cont-2, .cont-3, .cont-4, .cont-5, .cont-6, .cont-7, .cont-8, .cont-9, .cont-10, .cont-11, .cont-12 {
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}
.cont-1 {
    width: 8.333333333333%;
}
.cont-2 {
    width: 16.6666666666%;
}
.cont-3 {
    width: 25%;
}
.cont-4 {
    width: 33.333333333%;
}
.cont-5 {
    width: 41.666666666%;
}
.cont-6 {
    width: 50%;
}
.cont-7 {
    width: 58.3333333333%;
}
.cont-8 {
    width: 66.666666666%;
}
.cont-9 {
    width:75%;
}
.cont-10 {
    width: 83.3333333333%;
}
.cont-11 {
    width: 91.6666666666%;
}
.cont-12 {
    width: 100%;
}
.cont-flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
/*cards*/
.card {
    color: rgba(0,0,0,0.87);
    background-color: rgb(255,255,255);
    border-radius: 2px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    padding: 20px;
    box-sizing: border-box;
    max-width: 100%;
}


.card.center-card {
    position: relative;
    display: initial;
    margin: 0px 0px 20px;
}
    .card.center-card-xl, .card.center-card-l, .card.center-card-m, .card.center-card-s {
        width: 100%;
        margin: 0px auto;
        margin-bottom: 20px;
    }
    .card.center-card-xl {
        max-width: 1200px;
    }
    .card.center-card-l {
        max-width: 850px;
    }
    .card.center-card-m {
        max-width: 400px;
    }
    .card.center-card-s {
        max-width: 250px;
    }

    .card.card-l, .card.card-m, .card.card-s {
        display: inline-block;
        margin: 20px 1%;
        margin-top: 0px;
    }
    .card.card-l {
        width: calc(48% - 2px);
        min-width: 480px;
    }
    .card.card-m {
        width: calc(31% - 2px);
        min-width: 300px;
    }
    .card.card-s {
        width: calc(18% - 2px);
        min-width: 300px;
    }

/*tables*/
.table-items tr:first-child, .table-items > div.table-header:first-child {
    cursor: inherit !important;
    background-color: inherit !important;
    color: inherit !important;
}

.table-items tr:hover, .table-items >div:hover {
    cursor: pointer;
    background-color: #4772B2;
    color: white;
}
.table-items {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed;
}
.table-mensajes td > * {
    text-overflow: ellipsis;
    overflow: hidden;
}
.table-items tr, .table-items > * {
    color: #4772b2;
    border-bottom: solid 1px #c6ccd4;
    position: relative;
}

.table-items td, .table-items th, .table-items > *  > div {
    padding: 11px 0px;
    padding-left: 5px;
    box-sizing: border-box;
}

    .table-items tr th:first-of-type, .table-items tr td:first-of-type, .table-items > div.table-header > div:first-of-type {
        border-left: solid 0px;
    }

/*text*/
.t-center {
    text-align:center;
}
.t-left {
    text-align: left
}
.t-right {
    text-align: right;
}

/*botones*/
button, .bn, .bn_valid, .bn_delete, .bn_edit, .bn_add, .bn_blue, .bn_upload, .bn_download {
    background: none;
    padding: 7px;
    border-radius: 18px;
    cursor: pointer;
    border: solid 1px #8a8a8a;
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
    color: inherit;
    text-decoration: none;
    margin-bottom: 10px;
}

    input[type='submit']:disabled, button:disabled {
        background: grey;
        border: grey;
        color: #e8e8e8;
        cursor: not-allowed;
    }

/*icon space*/
.bn_edit, .bn_valid, .bn_delete, .bn_add, .bn_upload, .bn_download {
    padding-left: 27px;
    position: relative
}

    .bn_edit:before, .bn_valid:before, .bn_delete:before, .bn_add:before, .bn_upload:before, .bn_download:before {
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-weight: 400;
        position: absolute;
        top: 50%;
        transform: translateY(calc(-50% - 1px));
        left: 9px;
    }

/*colors*/
.bn_blue, .bn_edit {
    color: white;
    background: #4772B2;
    border-color: #4772B2;
}

.bn_valid, .bn_add, .bn_upload, .bn_download {
    color: white;
    background: #148a53;
    border-color: #148a53;
}

.bn_delete {
    background: #a50000;
    border-color: #a50000;
    color: white;
}

.bn_blue {
    transition: color 0.3s ease, border 0.3s ease;
    cursor: pointer;
}

    .bn_blue:hover {
        background: white;
        border-color: #4772B2;
        color: #4772B2;
    }

.bn_edit:before {
    content: "\f040";
}

.bn_valid:before {
    content: "\f00c";
}

.bn_delete:before {
    content: "\f00d";
}

.bn_add:before {
    content: "\f067";
}

.bn_upload:before {
    content: "\f062";
}

.bn_download:before {
    content: "\f063";
}

/*cruces*/
.bn_cross {
    width: 25px;
    height: 25px;
    background-color: #a50000;
    color: white;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    font-size: 16px;
    border: none;
}

    .bn_cross:after {
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-weight: 400;
        content: "\f00d";
        position: absolute;
        left: 50%;
        top: calc(50% - 1px);
        transform: translate(-50%, -50%);
    }

.bn_cross2 {
    width: 25px;
    height: 25px;
    font-size: 20px;
    color: #a50000;
    position: relative;
}

.bn_cross2:after {
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    content: "\f00d";
    position: absolute;
    left: 50%;
    top: calc(50% - 1px);
    transform: translate(-50%, -50%);
}

#inbox .unread { font-weight: bold; }

@media only screen and (max-width: 760px) {
    .cont-wr {
        padding: 20px 0px;
    }
    .card.card-l, .card.card-m, .card.card-s, .card.center-card {
        min-width: initial;
        width: 100%;
        margin: 0px 0px 20px;
    }
    .cont-1 {
        width: 16.6666666666%;
    }

    .cont-2 {
        width: 33.333333333%;
    }

    .cont-3 {
        width: 50%;
    }

    .cont-4 {
        width: 66.666666666%;
    }

    .cont-5 {
        width: 83.3333333333%;
    }

    .cont-6 {
        width: 100%;
    }
    .cont-7, .cont-8, .cont-9, .cont-10, .cont-11, .cont-12 {
        width: 100%;
    }
}

.auto-assign-error {
    display: block;
    color: #dc3545;
    padding: 0 0 20px 12px;
    font-weight: bold;
}