html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /*margin-bottom: 60px;*/
}

/* Evitar color de fondo de nav-links */

.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .nav-pills .nav-link.active[b-7882z672yd], .nav-pills .show > .nav-link[b-7882z672yd], .nav-pills .nav-link.active[b-7882z672yd], .nav-pills .show > .nav-link[b-7882z672yd] {
    background-color: transparent !important;
}

.nav-link:hover {
    color:#0dcaf0 !important;
}
/* Tablas responsivas */
@media screen and (min-width: 641px) {
    .table-small {
        max-width: 350px;
        margin-left: calc(50% - 175px);
    }

    .content-mobile {
        display: none;
    }

    .content-desktop {
        display: block;
    }
}

@media screen and (max-width: 640px) {
    .table:not(.table-mobile) caption {
        background-image: none;
    }

    .table:not(.table-mobile) thead {
        display: none;
    }

    .table:not(.table-mobile) tbody td {
        display: block;
        padding: .6rem;
    }

    .table:not(.table-mobile) tbody tr td:first-child {
        background: #0dcaf0;
        color: #6c757d;
        font-weight: bold;
    }

        .table:not(.table-mobile) tbody tr td:first-child a {
            color: #fff;
        }

        .table:not(.table-mobile) tbody tr td:first-child:before {
            color: rgb(225, 181, 71);
        }

    .table:not(.table-mobile) tbody td:before {
        content: attr(data-th);
        font-weight: bold;
        display: inline-block;
        width: 10rem;
    }

    /*.table tr th:last-child,
    .table tr td:last-child {
        max-width: 100% !important;
        min-width: 100px !important;
        width: 100% !important;
        text-align: right;
    }*/

    .content-mobile {
        display: block;
    }

    .content-desktop {
        display: none;
    }
}

/* Formularios de tipo Material Design */

form {
    padding: 1em;
    border: 1px solid #f1f1f1;
    box-shadow: 0 4px 6px 0 rgba(22, 22, 26, 0.18);
}

@media only screen and (min-width: 768px) {
    form {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        align-items: center;
    }

        form.x-small-form {
            width: 30%;
            margin-left: 35%;
        }

            form.x-small-form .form-group:not(:last-child):not(:nth-last-child(2)) {
                width: calc(100% - 10px);
                margin-right: calc((100% - (100% - 10px) * 1) / 1);
                margin-bottom: 20px;
            }

    table.small-table {
        width: 50%;
        margin-left: 25%;
    }

    form.small-form {
        width: 50%;
        margin-left: 25%;
    }

        form.small-form .form-group:not(:last-child):not(:nth-last-child(2)) {
            width: calc(50% - 10px);
            margin-right: calc((100% - (50% - 10px) * 2) / 2);
            margin-bottom: 20px;
        }

    form.medium-form {
        width: 70%;
        margin-left: 15%;
    }

        form.medium-form .form-group:not(:last-child):not(:nth-last-child(2)):not(.double-width) {
            width: calc(30% - 10px);
            margin-right: calc((100% - (30% - 10px) * 3) / 3);
            margin-bottom: 20px;
        }

        form.medium-form .form-group:not(:last-child):not(:nth-last-child(2)).double-width {
            /* Ancho doble con margen de 10px y margen derecho */
            width: calc(2 * (30% - 10px) + ((100% - (30% - 10px) * 3) / 3));
            /* Margen derecho para dos elementos de ancho doble */
            margin-right: 0;
            margin-bottom: 20px;
        }

    form.large-form {
        width: 96%;
        margin-left: 2%;
    }

        form.large-form .form-group:not(:last-child):not(:nth-last-child(2)) {
            width: calc(22% - 10px);
            margin-right: calc((100% - (22% - 10px) * 4) / 4);
            margin-bottom: 20px;
        }

    .grades-sidebar {
        width: 250px;
    }
}

@media only screen and (max-width: 767px) {

    form {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        align-items: center;
    }

    form {
        width: 96%;
        margin-left: 4%;
    }

        form .form-group:not(:last-child):not(:nth-last-child(2)) {
            width: calc(100% - 10px);
            margin-right: calc((100% - (100% - 10px) * 1) / 1);
            margin-bottom: 20px;
        }

    .grades-sidebar {
        width: 100px;
    }
}

form .form-group:nth-last-child(2) {
    width: 100%;
}

.form-select, .form-control {
    border: none;
    border-bottom: 1px solid #000000;
    border-radius: 0;
}

    .form-select:focus, .form-control:focus {
        box-shadow: none;
        border-bottom-color: #2196f3;
    }

        .form-select:focus + label, .form-control:focus + label {
            color: #2196f3;
        }

input[type="submit"] {
    color: #2196f3;
    border-color: #2196f3;
}

    input[type="submit"]:hover,
    input[type="submit"]:focus {
        color: #ffffff;
        background-color: #2196f3;
        outline: none;
        box-shadow: 0 4px 6px 0 rgba(22, 22, 26, 0.18);
    }

.select-unselected {
    color: #8488a1;
}

table.table {
    box-shadow: 0 4px 6px 0 rgba(22, 22, 26, 0.18);
}

@media (min-width: 576px) {
    .form-select-sm {
        max-width: 150px;
        font-size: small;
    }
}

.grades-header.header {
    padding: 1em;
    border: 1px solid #f1f1f1;
    box-shadow: 0 4px 6px 0 rgba(22, 22, 26, 0.18);
}

/* GRADES PAGES */
.grades-container {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

.grades-header {
    flex-direction: column;
}

.grades-content {
    flex-direction: column;
    flex: 1;
}

.row.header {
    padding: 1em;
    border: 1px solid #f1f1f1;
    box-shadow: 0 4px 6px 0 rgba(22, 22, 26, 0.18);
}

#leftColumn {
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
}

.hideLeftColumn {
    width: 0;
    padding: 0;
    overflow: hidden;
}