/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */

/*
 * INDEX
 * 
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */

/* Para dar estilo al botón de adicionar en el área del paginado de los grids */
.custom-nav-btn {
    margin-left: 5px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: 4px !important;
    border-color: #ccc !important;
}

/* Para que los textos de las columnas de los grids hagan wrap si son muy largos */
.k-grid-header .k-header {
    white-space: normal !important;
    vertical-align: middle !important;
}

/* Para que no se corte el texto 'Todos' en el combo de seleccionar los elementos por página en los grids */
.k-pager-wrap .k-pager-sizes .k-dropdown {
    width: 5.100em !important; /*por defecto en kendo.common.min.css: 4.500em;*/
}

.k-pager-sizes.k-label {
    float: right; 
    padding-left: 5px;
    padding-right: 5px;
}

.k-pager-info.k-label {
    padding-left: 5px;
    padding-right: 5px;
}


/* More height for all controls in XS */
@media(max-width: 768px) {
    .k-textbox, .k-dropdown-wrap {
        height: 40px !important;
    }

    .k-numeric-wrap.k-expand-padding {
        height: 40px;
    }

    .k-numerictextbox .k-input {
        height: 35px !important;
    }

    .k-picker-wrap {
        height: 40px !important;
    }

        .k-picker-wrap .k-input {
            height: 35px !important;
        }

   .k-dropdown-wrap .k-input {
        margin-top: 5px !important;
    }

    .k-icon.k-i-calendar {
        margin-top: 12px;
    }

    .k-select .k-icon.k-i-arrow-s {
        margin-top: 10px;
    }

    .marginForColInXS {
        margin-bottom: 25px;
    }

    /* Estos son los items de los dropdowns */
    .k-list-container .k-item, .k-list-container .k-list-optionlabel {
        min-height: 30px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    input[type=radio] {
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-top: -1px;
    }

    /* Estos son los botones de acción de los grids */
    td .btn.btn-xs {
        margin-bottom: 4px;
    }

    /* Botones de los grids (incluyendo los del paginado) y los modales */
    .btn {
        padding: 12px 18px;
        font-size: 15px;
    }

    .k-pager-wrap a, .k-pager-wrap li span {
        padding: 5px 5px !important;
    }

    .k-pager-wrap .k-pager-info.k-label {
        margin-top: 5px;
    }

    ul.k-pager-numbers.k-reset {
        left: 6.3em !important;
    }

    /* Menú vertical */
    .management nav ul ul li > a {
        padding-bottom: 16px !important;
        padding-top: 16px !important;
    }

    #myModalInfos.modalForEmailTypes,
    #myModalInfos.modalForCompanyEmailTypes .modal-dialog {
        width: 100% !important;
    }
}

@media(min-width: 768px) {
    .btn-xs {
        padding: 3px 5px;
    }

    #myModalInfos.modalForEmailTypes .modal-dialog,
    #myModalInfos.modalForCompanyEmailTypes .modal-dialog {
        width: 80% !important;
    }
}

/* Para que los textos de las columnas de los grids hagan wrap si son muy largos */
.k-grid-header .k-header {
    white-space: normal !important;
    vertical-align: middle !important;
}

/* Para que no se corte el texto 'Todos' en el combo de seleccionar los elementos por página en los grids */
.k-pager-wrap .k-pager-sizes .k-dropdown {
    width: 5.100em !important; /*por defecto en kendo.common.min.css: 4.500em;*/
}

.k-pager-sizes.k-label {
    float: right; 
    padding-left: 5px;
    padding-right: 5px;
}

.k-pager-info.k-label {
    padding-left: 5px;
    padding-right: 5px;
}
/* END Para que no se corte el texto 'Todos' en el combo de seleccionar los elementos por página en los grids */

/* Seteando el ancho del modal Permisos a Opciones */
@media(min-width: 768px) {
    #myModalForAllowments .modal-dialog {
        width: 85%;
    }
}

@media(max-width: 767px) {
    #myModalForAllowments .modal-dialog {
        width: auto;
    }
}
/* END Seteando el ancho del modal Permisos a Opciones */

/* Para que no se muestre el scroll horizontal en los kendo tabstrips (Textos por Idiomas) */
div[data-role=tabstrip] .k-content {
    overflow-x: hidden;
}



.k-grid-header .k-header {
    overflow: visible !important;
    white-space: normal !important;
}

/* Styles for Manage.cshtml and ChangePassword.cshtml in CompanyPersonalProfile */
@media(max-width: 768px) {
    .manageModal .left-col,
    .parameters .left-col {
        text-align: left;
    }
}

@media(min-width: 768px) {
    .manageModal .left-col,
    .parameters .left-col {
        text-align: right;
    }
}

.manageModal .left-col {
    padding: 5px 0 5px 15px;
}


.manageModal .right-col {
    padding: 0 15px;
}


.manageModal .k-dropdown,
.manageModal .k-dropdown-wrap,
.manageModal .k-textbox{
    width: 100%;
}


@media(max-width: 768px) {
    .parameters .left-col, .parameters .right-col {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media(min-width: 768px) {
    .parameters .left-col {
        padding: 5px 0 5px 15px;
    }

    .parameters .right-col {
        padding: 0 15px;
    }
}


.manageModal [class*="col-"],
.manageModal .k-dropdown-wrap,
.parameters [class*="col-"],
.parameters .k-dropdown-wrap {
    box-sizing: border-box;
}

.marginForRow {
    margin-bottom: 20px !important;
}

.checkbox-inline.disabled, .checkbox.disabled label, .checkbox-inline,  input[type=checkbox],  input[type=checkbox].disabled, input[type=checkbox][disabled] {
    width: 30px;
    height: 20px;
    margin-top: 0;
}

.required::before {
    content: "*";
    color: red;
}

.paddingForTwoColumn {
    padding: 0px 20px 0px 10px;
}

.rowLineHeight {
    line-height: 15px; 
}

.word-wrap-class {
    white-space: normal;
    word-wrap: break-word;
}