:root {
    --bg-principal: #f1f1f1;
    --bg-menu-principal: #005A8C;
    --bg-notification: #8c0000;
    --color-yellow: #FFC312;
    --color-black: #000000;
    --color-gray: #f2f1f5;
    --color-platform: #e14b5b;
    --color-table-student: #1565C0;
    --color-table-info-security-student: #23272b;
    --color-table-info-category-resource: #B71C1C;

    --bg-email: #f7f4f4;

    --font-nav: 'Cairo', sans-serif;
    --font-title: 'Josefin Sans', sans-serif;
    --font-general: 'Montserrat', sans-serif;

}

/* Animations */

#main-auth {
    transition: margin-left .5s;
    -webkit-transition: margin-left .5s;
    -moz-transition: margin-left .5s;
    -ms-transition: margin-left .5s;
    -o-transition: margin-left .5s;
}

.fade {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.dropdown-item:focus,
.dropdown-item:hover {
    font-size: 1.05rem;
}

.dropdown-item {
    font-size: 0.9rem;
}

.prevent-multiple-submits {}

.saving-state {
    display: none;
}

html {
    /* font-size: 62.5%; */
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

a:hover {
    text-decoration: none;
}

p {
    margin-bottom: 0.1rem;
}

body {
    font-family: var(--font-texto);
    font-size: 1rem;
    line-height: 2;
    height: 100vh;
    background-color: white;
    background-size: cover;
    background-repeat: no-repeat;
}

main {
    padding: 16px;
}

#main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.logo-principal {
    width: 40%;
}

a.special-link {
    color: #FFFFFF;
    background-color: #005A8C;
    font-size: 1.2rem;
    padding: 5px;
}

a.special-link:hover {
    text-shadow: 1px 1px 10px white;
}

.mt-30 {
    margin-top: 30px;
}

.my-line-height {
    line-height: 1.3;
}

.tc-white {
    color: white;
}

.sp-m {
    margin: 0 182px;
}

.text-line-middle {
    text-decoration: line-through;
}

.w-400 {
    width: 400px !important;
}

.w-full {
    width: 100% !important;
}

.w-92 {
    width: 92%;
    display: inline;
}

.w-80 {
    width: 80% !important;
}

.w-60 {
    width: 60% !important;
}

.w-50 {
    width: 50% !important;
}

.w-40p {
    width: 40% !important;
}

.img-abort {
    width: 200px;
}

.text-nowrap {
    text-wrap: nowrap;
}

.text-line-break {
    white-space: pre-line;
}

.center-all {
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center;
}

.main-container {
    text-align: center;
}

.main-container-guest {
    text-align: center;
    width: 100%;
}

.form-group-inline {
    display: inline;
}

.no-list-symbol {
    list-style-type: none;
}

.fs-12 {
    font-size: 1.2rem!important;
}

.fs-13 {
    font-size: 1.3rem!important;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 530px;
    }
}

.ft-general {
    font-family: var(--font-general);
}

.border-radius-segmentation {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.btn-segmentation {
    background-color: #00549e;
}

.btn-segmentation {
    color: #ffffff;
    font-weight: bold;
    background-color: #00549e;
    border-color: #00549e;
}

.btn-segmentation:hover {
    background-color: #0062b8;
    border-color: #0062b8;
    color: white;
}

div.container-success-subs {
    background-color: var(--bg-email);
    width: 40%;
    padding: 30px;
}   

.input-text-general {
    font-size: 1.1rem;
    width: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.shadow-text {
    text-shadow: 3px 2px 6px rgba(0,0,0,0.50);
}

@media only screen and (max-width: 600px) {
    .input-text-general {
        font-size: 1rem;
        width: 75%;
    }
}

/* Buttons */
.bt {
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.bt-download {
    color: #ffffff;
    font-weight: bold;
    background-color: #009189;
    border-color: #00635e;
}

.bt-download:hover {
    background-color: #02c0b7;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
    border-color: #00635e;
    color: var(--bg-email);
}

.bt-share {
    color: #ffffff;
    font-weight: bold;
    background-color: #1b0091;
    border-color: #0d0047;
}

.bt-share:hover {
    background-color: #301a94f6;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
    border-color: #1b0091;
    color: var(--bg-email);
}

.bt-warning {
    color: #ffffff;
    font-weight: bold;
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000000;
}

.bt-warning:hover {
    background-color: #f5c022;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
    border-color: #bd9e38;
    color: #000000;
}

.bt-delete {
    color: #ffffff;
    font-weight: bold;
    background-color: #d60303;
    border-color: #9b0000;
}

.bt-delete:hover {
    background-color: #ce2b2b;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
    border-color: #9b0000;
    color: var(--bg-email);
}

.bt-doc {
    color: #ffffff;
    font-weight: bold;
    background-color: #d6036c;
    border-color: #8f0148;
}

.bt-doc:hover {
    background-color: #ff0080;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
    border-color: #8f0148;
    color: var(--bg-email);
}

.bt-nav {
    color: #ffffff;
    font-weight: bold;
    background-color: #0f0f0f;
    border-color: #000000;
}

.bt-nav:hover {
    background-color: #242424;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
    border-color: #0f0f0f;
    color: #FFFFFF;
}

.bt-search {
    color: #ffffff;
    font-weight: bold;
    background-color: #0050c7;
    border-color: #003688;
}

.bt-search:hover {
    background-color: #005eeb;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
    border-color: #002864;
    color: var(--bg-email);
}

.bt-platform {
    color: #ffffff;
    font-weight: bold;
    background-color: var(--color-platform);
    border-color: #e14b5b;
}

.bt-platform:hover {
    background-color: #fa4658;
    text-shadow: 1px 0px 0px rgba(0, 0, 0, 0.2);
    border-color: #fd152c;
    color: var(--bg-email);
}
/* End Buttons */

.btn {
    font-size: 1.01rem;
}

.btn-warning {
    font-weight: bold;
}

.btn-danger {
    font-weight: bold;
}

.btn-primary {
    font-weight: bold;
}

.btn-secondary {
    font-weight: bold;
}

.btn-dark {
    font-weight: bold;
}

.btn-success {
    font-weight: bold;
}

.btn-info {
    font-weight: bold;
}

.btn-light {
    font-weight: bold;
}

.btn-download {
    color: #ffffff;
    font-weight: bold;
    background-color: #8036f7;
    border-color: #8036f7;
}

.btn-download:hover {
    background-color: #b135d6;
    border-color: #9700d3;
}

.btn-share {
    color: #ffffff;
    font-weight: bold;
    background-color: #004aad;
    border-color: #003170;
}

.btn-share:hover {
    background-color: #005ed8;
    border-color: #012e68;
    color: var(--bg-email)
}

.error-message {
    background-color: rgb(254 202 202);
    border-left: 1rem solid rgb(239 68 68);
    font-size: 1rem;
    padding: 0.6rem;
    color: rgb(127 29 29);
    border-radius: 2px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    width: 50%;
}

.error-text {
    font-size: 0.8rem;
    padding: 0.4rem;
    color: rgb(127 29 29);
    margin-bottom: 0.2rem;
    display: inline-block;
    width: 50%;
}

.fixed-message {
    background-color: rgb(171, 104, 248);
    border-left: 1rem solid rgb(67, 21, 141);
    font-size: 1rem;
    padding: 0.6rem;
    color: rgb(50, 12, 85);
    border-radius: 2px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    width: 50%;
}

.security-message {
    background-color: rgb(19, 2, 2);
    border-left: 1rem solid rgb(61, 61, 61);
    font-size: 1rem;
    padding: 0.6rem;
    color: rgb(255, 255, 255);
    border-radius: 2px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    width: 50%;
}

.deprecated-message {
    background-color: rgb(235, 235, 235);
    border-left: 1rem solid rgb(112, 108, 108);
    font-size: 1rem;
    padding: 0.6rem;
    color: rgb(99, 99, 99);
    border-radius: 2px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    width: 50%;
}

.warning-message {
    background-color: rgb(253, 254, 202);
    border-left: 1rem solid rgb(239, 236, 68);
    font-size: 1rem;
    padding: 0.6rem;
    color: rgb(127, 125, 29);
    border-radius: 2px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
    width: 50%;
}

.success-message {
    background-color: rgb(134 239 172);
    border-left: 1rem solid rgb(21 128 61);
    font-size: 1rem;
    padding: 0.6rem;
    color: rgb(20 83 45);
    border-radius: 2px;
    margin-top: 1rem;
}

.info-message {
    background-color: rgb(134, 206, 239);
    border-left: 1rem solid rgb(21, 94, 128);
    font-size: 1rem;
    padding: 0.6rem;
    color: rgb(20, 63, 83);
    border-radius: 2px;
    margin-top: 1rem;
}

.information-message {
    font-size: 1rem;
    padding: 0.6rem;
    color: rgb(22 163 74);
    margin-bottom: 1.5rem;
}

.di-design {
    font-size: 1rem;
}

.undesign-button {
    border: none;
    background: none;
    padding: 0;
}

.space-between {
    justify-content: space-between;
}

div.bg-email {
    background-color: var(--bg-email);
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.5);
}

img.img-logo-workcenter {
    width: 45%;
}

/* Main */
@media only screen and (max-width: 600px) {
    #main {
        height: 100vh;
    }
}

/* Form Default Design */
.form-default-general {
    width: 30%;
    margin: 1rem auto;
    background-color: #f2f2f2;
    padding: 24px;
    border-radius: 7px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.form-planning {
    display: flex;
    flex-direction: row;
}

@media only screen and (max-width: 1500px) {
    .form-default-general {
        width: 50%;
    }
}

@media only screen and (max-width: 1200px) {
    .form-default-general {
        width: 75%;
    }
}

@media only screen and (max-width: 600px) {
    .form-default-general {
        width: 90%;
    }
}

.label-default-general {
    font-size: 1.1rem;
    font-family: var(--font-title);
    font-weight: bold;
}

.input-default-general {
    font-size: 1rem;
    font-family: var(--font-general);
    font-weight: bold;
}

.w-30 {
    width: 30% !important;
}

.table td,
.table th {
    padding: 0.4rem;
}

input[type=radio].form-control {
    height: calc(1em + .3em + 2px);
}

.logout-session:hover {
    color: #FFFFFF;
}

table.table-setting-courses thead tr th {
    background-color: #23272b;
}

table.table-setting-courses tbody tr:last-of-type {
    border-bottom: 4px solid #23272b;
}

table.table-default tbody tr:hover {
    background-color: #7fbdda;
    transition: background-color 500ms ease;
}

.table-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 14px;
}

/* Sidebar */
.sidebar-name {
    text-align: center;
    font-family: var(--font-title);
    font-weight: bold;
    font-size: 1.5rem;
    color: black;
}

.container-line {
    display: flex;
    justify-content: center;
}

.line {
    width: 75%;
    border-bottom: 2px solid #0000001a;
}

.my-sidebar-school-info {
    text-align: center;
    font-family: var(--font-general);
}

.my-sidebar-school-info>p:first-child {
    font-size: 0.8rem;
}

.my-sidebar-school-info>p:last-child {
    font-size: 0.8rem;
}

.my-sidebar-titles {
    font-weight: bold;
    font-family: var(--font-title);
    margin-bottom: 5px;
    margin-left: 5px;
    font-size: 1.2rem;
}

.subtitle-sidebar>h5 {
    margin-top: 0.3rem;
    font-weight: bold;
    font-size: 1.5rem;
}

.active-menu {
    background-color: var(--bg-notification);
    color: #FFFFFF !important;
}

a.nav-label,
label.nav-label {
    width: 100%;
    margin-bottom: 0;
    background-image: linear-gradient(var(--bg-notification), var(--bg-notification));
    background-size: 0 100%;
    background-repeat: no-repeat;
    transition: .4s;
}

a.nav-label:hover,
label.nav-label:hover {
    /* background-color: var(--bg-menu-principal); */
    color: #FFFFFF;
    /* transition: background-color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out; */
    background-size: 100% 100%;
}

/* Modals and Sweet */
.modal-title {
    font-size: 2rem;
    font-family: var(--font-title);
    font-weight: bold;
    color: #FFFFFF;
}

.modal-header {
    background-color: var(--color-table-student);
}

/* .swal2-html-container {
    font-size: 1.5rem !important;
}

.swal2-title {
    font-size: 3rem !important;
}

.swal2-confirm .swal2-styled {
    font-size: 1.3rem !important;
} */

/* Table Design */

.table-default {
    margin-top: 0.2rem;
    margin-bottom: 2rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.table-default th,
.table-default td {
    text-align: center;
    vertical-align: middle;
}

.table-default thead tr th {
    border-bottom: none;
}

.table-default td {
    border: 1px solid #000000;
}

.table-default thead tr th {
    background-color: var(--color-table-student);
}

.table-default th:first-child {
    border-radius: 7px 0 0 0;
}

.table-default th:last-child {
    border-radius: 0 7px 0 0;
}

.table-default thead tr>th {
    color: var(--bg-principal);
}

.table-default tr:nth-child(even) {
    background-color: #a0c7f0;
}

.table-default tbody tr:last-of-type {
    border-bottom: 4px solid var(--color-table-student);
}

/* NAV PRINCIPAL */

.navcolor {
    background: var(--color-gray) !important;
}

.navbar {
    font-family: var(--font-nav);
    padding: 0.1rem 0.7rem;
}

img.image-navbar-profile {
    border-radius: 50%;
    height: 30px;
    width: 30px;
}

.dropdown-menu {
    left: -200px;
    min-width: 26rem;
}

/* Register */
.input-group-icon {
    background: var(--color-platform);
    padding: 10px;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.container-general {
    background: rgba(0, 0, 0, 0.8);
    display: inline-block;
    width: 50%;
    border-radius: 20px;
}

.container-success-subs {
    background-color: #f7f4f4;
    width: 40%;
    padding: 30px;
}

@media only screen and (max-width: 600px) {
    .container-general {
        width: 90%;
        margin-top: 10%;
    }
}

.form-register {
    text-align: center;
}

.low-account {
    display: inline-block;
}

.low-account > a {
    color: var(--bg-principal);
}

.bg-image-register {
    background-image: url(../images/bg/fondo.png);
}

.bg-image-home {
    background-image: url(../images/bg/fondo.png);
}

.form-label-text {
    font-size: 1.2rem;
    font-weight: bold;
    font-family: var(--font-title);
}

.form-input-text {
    font-size: 1.1rem;
    display: block;
    width: 100%;
    font-family: var(--font-general);
}

.container-options-general {
    width: 40%;
    margin: 3rem auto;
}

/* Dashboard */

@media only screen and (max-width: 600px) {
    .hide-main {
        display: none;
    }
}

.welcome-dashboard-message {
    justify-content: center;
}

.welcome-dashboard-message img {
    width: 12%;
}

@media only screen and (max-width: 600px) {
    .welcome-dashboard-message img {
        width: 35%;
    }
}

.title-welcome h3 {
    font-weight: bold;
    font-size: 3rem;
}

.title-welcome h3,
.question-title h4 {
    font-family: var(--font-title);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.question-subtitle h5 {
    font-family: var(--font-title);
    font-weight: normal;
    font-size: 1.9rem;
    margin-top: 1rem;
}

.question-title h4 {
    font-size: 2.8rem;
}

.frame-title h3 {
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.dash-container-options {
    width: 80%;
    margin: 1rem auto;
    display: flex;
    overflow-x: scroll;
}

/* .dash-container-option {
    padding: 70px 10px;
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
    border-radius: 10px;
    box-shadow: 0px 0px 10px black;
    margin: 10px;
    min-width: 380px;
} */

a.container-option-link {
    text-align: center;
    color: black;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px black;
    margin: 10px;
    min-width: 320px;
    --c: no-repeat linear-gradient(#ffc107bd 0 0);
    background: var(--c) calc(-100% + var(--i, 0) * 100%) 100% / 50% calc(100% * var(--i, 0) + 2em), var(--c) calc(200% - var(--i, 0) * 100%) 0 / 50% calc(100% * var(--i, 0) + 2em);
    transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - var(--i, 0) * .3s);
    -webkit-transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - var(--i, 0) * .3s);
    -moz-transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - var(--i, 0) * .3s);
    -ms-transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - var(--i, 0) * .3s);
    -o-transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - var(--i, 0) * .3s);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

a#first-steps {
    --c: no-repeat linear-gradient(#5107ff82 0 0);
}

a.container-option-link:hover {
    text-decoration: none;
    color: #FFFFFF;
    text-shadow: 0px 0px 7px black;
    --i: 1;
}

div.option-content-title h4 {
    text-align: left;
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: bold;
}

div.option-content-description p {
    text-align: left;
    font-family: var(--font-general);
    font-size: 1rem;
    line-height: 1.4;
}

img.image-option {
    width: 100%;
}

img.last-image-option-dashboard {
    width: 80%;
    margin-top: 20px;
}

/* Dashboard Options */

.container-options {
    display: grid;
}

.container-option {
    width: 70%;
    margin: 3rem auto;
}

.container-option-title {
    border-bottom: 4px solid black;
}

.container-option-title h3 {
    font-size: 3rem;
    font-weight: bold;
    font-family: var(--font-title);
}

.container-option-sections-tutorials,
.container-option-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: auto;
    overflow-y: hidden;
}

.container-option-sections-tutorials {
    grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 600px) {
    .container-option-sections,
    .container-option-sections-tutorials {
        grid-template-columns: repeat(1, 1fr);
    }

    .container-option {
        width: 100%;
    }
}


.container-tool-option-sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    white-space: nowrap;
}

.first-steps {
    grid-template-columns: 1fr;
}

a.section-link {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.4);
    color: black;
    border-radius: 10px;
    box-shadow: 0px 0px 10px black;
    margin: 10px;
}

a.section-link:hover {
    background-color: var(--color-yellow);
    transition: background-color 0.3s ease;
}

.section-link:focus {
    text-decoration: none;
    color: var(--bg-menu-principal);
}

div.section-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

p.section-content-title {
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: bold;
}

div.section-tool-content {
    display: flex;
    flex-direction: row;
    align-items: left;
    margin-left: 20px;
    margin-right: 20px;
}

p.section-tool-content-title {
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: bold;
    text-align: left;
}

p.section-tool-content-description {
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 100;
    text-align: left;
    text-wrap: pretty;
    line-height: 1;
}

div.img-tool-icon {
    margin-right: 5px;
}

div.img-tool-icon>img {
    height: 80px;
    width: 80px;
}

.section-content-logo {
    width: 70px;
}

img.icon-aidash {
    width: 72px;
}

img.icon-aiside {
    width: 40px;
}

/* Workcenter */
.exp-workcenter {
    display: block;
}

/* Student */

.container-student-table {
    width: 80%;
    margin: 1.5rem auto;
}

/* Security Student */
.table-info-security-student {
    border-collapse: separate;
    margin-bottom: 1.5rem;
}

.table-info-security-student tbody tr th,
.table-info-security-student tbody tr td {
    padding: 1rem;
}

.table-info-security-student tbody tr th {
    background-color: var(--color-table-info-security-student);
    color: white;
    border-radius: 7px 0 0 7px;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.8);
}

.table-info-security-student tbody tr td {
    background-color: #fff;
    color: #000;
    border-radius: 0 7px 7px 0;
    text-align: center;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.8);
}

/* Attendance List */

/* Category Resources */

table.table-info-category-resource thead tr>th {
    background-color: var(--color-table-info-category-resource);
    color: white;
}

table.table-info-category-resource tr:nth-child(even) {
    background-color: #FFCDD2;
}

table.table-info-category-resource tbody tr:last-of-type {
    border-bottom: 4px solid var(--color-table-info-category-resource);
}

/* Table Report */
.report-student-attendance {
    justify-content: center;
    color: #000000;
    font-family: var(--font-title);
}

.attendance-student {
    background-color: #0cc663;
}

.delay-student {
    background-color: #efd100;
}

.missing-student {
    background-color: #ff0000;
}

.attendance-student:hover {
    background-color: #007a7e;
}

.delay-student:hover {
    background-color: #7e7600;
}

.missing-student:hover {
    background-color: #7e0000;
}

.attendance-student,
.delay-student,
.missing-student {
    margin-right: 1rem;
    justify-content: center;
    padding: 1rem;
    border-radius: 10px;
    cursor: pointer;
}

.attendance-student>p,
.delay-student>p,
.missing-student>p {
    margin: 0;
    font-size: 3rem;
}

.attendance-student>h4,
.delay-student>h4,
.missing-student>h4 {
    margin: 0;
    font-size: 1.8rem;
}

/* Table Report General Attendances */
.full-list-date {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.first-column-fixed {
    position: sticky;
    left: 0;
    z-index: 1;
}

.first-column-fixed-new {
    background-color: var(--color-table-student);
    color: white;
}

/* Table Evaluation */

.border-top thead tr th,
.border-top thead tr td {
    border: 1px solid #000000;
}

table.table-evaluation tbody tr:hover {
    color: #FFFFFF !important;
}

table.table-evaluation tr:nth-child(even) {
    background-color: #FFFFFF;
}

/* Error 403 */

.dash-error-abort {
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    /* margin-top: 10%; */
}

.error-403 {
    margin: 0 auto;
    border-radius: 7px;
    box-shadow: 0px 0px 7px 1px rgba(0, 0, 0, 0.2);
}

.image-error-403 {
    background-color: #ff2825c4;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    padding: 2rem;
}

.text-error-403 {
    padding: 2rem;
    background-color: #f1f1f1C4;
}

div.text-error-403 h4 {
    font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: bold;
}

div.text-error-403 p:nth-child(2) {
    font-size: 1.5rem;
    font-weight: bold;
    color: #727272;
}

div.text-error-403 p:nth-child(3) {
    font-size: 1rem;
    color: #727272;
}

.btn-error-403,
.btn-error-419 {
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-error-403:hover,
.btn-error-419:hover {
    color: #FFFFFF;
    animation: background-color 500ms ease;
    -webkit-animation: background-color 500ms ease;
}

.btn-error-403 {
    background-color: #ff2825c4;
    border-color: #ff2825c4;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.btn-error-403:hover {
    background-color: #fc110dc4;
    border-color: #fc110dc4;
}

.btn-error-419 {
    background-color: #14a4b7;
    border-color: #14a4b7c4;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.btn-error-419:hover {
    background-color: #18bed4;
    border-color: #137380;
}

/* Construction Page */
.progress {
    height: 2rem;
}

.progress-bar-animated {
    -webkit-animation: 1s linear infinite progress-bar-stripes !important;
    animation: 1s linear infinite progress-bar-stripes !important;
}

.image-building-page {
    background-color: #000000c4;
}

.btn-building-page {
    background-color: #0a0202c4;
    border-color: #000000c4;
    text-transform: uppercase;
}

.btn-building-page:hover {
    background-color: #161515c4;
    border-color: #201e1ec4;
}

/* Workcenter Neting */

.content-element-information {
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin: 0 auto;
    width: 60%;
    border-top: 1px solid rgba(19, 2, 2, 0.5);
    border-bottom: 1px solid rgba(19, 2, 2, 0.5);
    padding: 1rem;
    margin-top: 1rem;
    animation: box-shadow 0.5s ease;
    -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.52);
    box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.52);
    transition: box-shadow ease 0.5s;
}

.content-element-information:hover {
    -webkit-box-shadow: inset 0px 0px 20px 6px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: inset 0px 0px 20px 6px rgba(0, 0, 0, 0.52);
    box-shadow: inset 0px 0px 20px 6px rgba(0, 0, 0, 0.52);
}

.content-element-information img {
    width: 220px;
}

.content-information-description {}

.content-information-specific {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

.content-option-buttons {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

/* Notification */
.notification-link .notification-style {
    color: var(--bg-principal);
}

.notification-link {
    margin-left: auto;
    background-color: var(--bg-menu-principal);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

.notification-link .notification-active,
.notification-active {
    background-color: var(--bg-notification);
}

.container-notifications {
    width: 60%;
    margin: 0 auto;
}

.content-notification {
    display: flex;
    flex-direction: column;
    background-color: var(--color-gray);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    border-radius: 7px;
    margin-top: 1rem;
    padding: 1rem;
}

.content-option-notification {
    display: flex;
    align-items: center;
}

/* Privacy */

.content-write-privacy {
    max-height: 500px;
    overflow-y: scroll;
}

.content-write-privacy > p {
    margin-bottom: 1rem;
    padding: 1.5rem;
}

/* Subscriptions */
.section-pay {
    margin: 10px;
}

.container-pay {
    grid-template-columns: repeat(1, 1fr);
}

.form-pay {
    width: 50%;
}

/* Profile */

form.profile {
    width: 40%;
}

@media only screen and (max-width: 600px) {
    form.profile {
        width: 90%;
    }
}

.grip-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

@media only screen and (max-width: 1363px) {
    .grip-two {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* End Profile */

/* Payment Method */

.payment-method {
    padding: 8px 6px;
}

.payment-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

#card-holder-name {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 20px;
    box-sizing: border-box;
}

#card-button {
    margin-top: 20px;
}

/* End Payment Method */

/* Plans */

.form-plan-general {
    margin: 1rem auto;
    padding: 24px;
}

div.popular-plan {
    background-color: #a4c21f;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

div.popular-plan p {
    text-align: center;
}

.container-plan-title {
    text-align: center;
    margin-bottom: 1em;
}

h2.plan-title-splash {
    display: inline;
    font-weight: bold;
    vertical-align: middle;
}

.img-plan-title-splash {
    width: 50px;
}

.container-plans {
    display: flex;
    justify-content: center;
}

.container-plan {
    background-color: #f7f4f4;
    padding: 5px 30px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.container-planx {
    background-color: transparent;
}

.logo-plan-icon {
    width: 20px;
}

.logo-plan-text {
    font-size: 13px;
}

.plan-title {
    font-weight: bold;
    font-size: 1.4em;
}

.plan-price.plan-now {
    font-size: 2em;
}

.plan-price-prev {
    color:#ff0000;
    text-decoration: line-through;
}

.plan-price-now {
    font-weight: bold;
}

.plan-price-discount {
    color: #ff0000;
    font-size: 0.8em;
}

.plan-price-month {
    font-weight: bold;
    font-size: 2em;
} 

.plan-info-month {
    font-weight: bold;
    color: #0e4cae ;
}

.plan-info-grace {
    font-weight: bold;
    text-align: center;
}

.plan-btn-choose {
    border-radius: 25%;
    -webkit-border-radius: 25%;
    -moz-border-radius: 25%;
    -ms-border-radius: 25%;
    -o-border-radius: 25%;
    width: 150px;
}

.second-plan {
    margin-left: 2em;
}

.info-general-plan-check {
    width: 20px;
}

/* End Plans */

/* Pay Suscription */

.plan-suscription-title {
    font-size: 20px;
}

.plan-suscription-price {
    font-weight: bold;
    font-size: 2em;
    display: inline;
}

.facturation-general {
    display: flex;
    justify-content: space-between;
}

.space-vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-email-plan-info {
    display: flex;
    justify-content: space-around;
    background-color: #dfdede;
    padding: 2px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.70);
    font-size: 16px;
    font-weight: bold;
    margin: 5px 100px;    
}

.card-email-plan-info div > p {
    margin: 0;
}

.payment-method-title {
    font-size: 20px;
}

.facturation-info {
    display: inline-block;
}

.description-subscription-solutions {
    font-size: 13px;

}

.plan-suscription-frecuency {
    text-wrap: wrap;
    font-size: 12px;
}

/* End Pay Suscription */

/* Renovation */

.renovation-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.renovation-img img {
    width: 120px;
    margin-right: 20px;
}

.renovation-flex {
    display: flex;
    margin-top: 1.2em;
}

div.renovation-info-subs p:first-child{

}

div.renovation-btn {
    text-align: center;
    margin-top: 2em;
}

div.renovation-btn p button {
    font-size: 1.2em;
    padding: 10px 25px;
    background-color: #dadada;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    color: #ff0000;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

div.renovation-btn p button:hover {
    color: #ff0000;
    font-size: 1.3em;
    background-color: #b8b8b8;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

div.renovation-btn p:nth-child(2) {
    font-size: 0.9em;
    color: #858585;
    margin-left: 3em;
    margin-right: 3em;
    margin-top: 1em;
}

div.renovation-btn p button.renovation-btn-click {
    color: #0047bb;
    font-weight: bold;
}

p.info-card {
    background-color: rgba(0, 0, 0, 0.2);
}

/* End Renovation */

/* Upload Document */
div.upload-doc-guide {
    background-color: #d6d6d6;
}

div.upload-doc-category {
    background-color: transparent;
    box-shadow: none;
}

section.category-box div h5 {
    display: inline;
}

section.category-box div a.upload-doc-btn {
    background-color: #b4ff94;
    color: var(--color-black);
    padding: 7px;
    transition: background-color 200ms ease;
    -webkit-transition: background-color 200ms ease;
    -moz-transition: background-color 200ms ease;
    -ms-transition: background-color 200ms ease;
    -o-transition: background-color 200ms ease;
}

section.category-box div a.upload-doc-btn:hover {
    background-color: #90fd61;
    color: #185000;
    transition: background-color 200ms ease-in;
    -webkit-transition: background-color 200ms ease-in;
    -moz-transition: background-color 200ms ease-in;
    -ms-transition: background-color 200ms ease-in;
    -o-transition: background-color 200ms ease-in;
}

section.category-box div a.download-doc-btn {
    background-color: #a6dbfa;
    color: var(--color-black);
    padding: 7px;
    margin-left: 10px;
    transition: background-color 200ms ease;
    -webkit-transition: background-color 200ms ease;
    -moz-transition: background-color 200ms ease;
    -ms-transition: background-color 200ms ease;
    -o-transition: background-color 200ms ease;
}

section.category-box div a.download-doc-btn:hover {
    background-color: #65c0f5;
    color: #02446b;
    transition: background-color 200ms ease;
    -webkit-transition: background-color 200ms ease;
    -moz-transition: background-color 200ms ease;
    -ms-transition: background-color 200ms ease;
    -o-transition: background-color 200ms ease;
}

p.box-doc-title {
    vertical-align: middle;
}

div.box-doc {
    display: flex;
    justify-content: space-between;
    background-color: #e9e9e9;
}

a.upload-doc-btn img,
a.download-doc-btn img {
    width: 20px;
    vertical-align: sub;
}


/* End Upload Document */

/* Admin Users */

.container-total-users {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.totals-users {
    font-size: 2.5em;
    color: #0cc663;
    margin-right: 25px;
    margin-left: 25px;
}

.total-users-trial {
    color: #0c0fc6;
}

.total-users-unactive {
    color: #c60c0c;
}

/* Segmentation */
div.segmentation-gradient {
    background: linear-gradient(90deg, rgba(0, 212, 255, 1) 0%, rgba(0, 212, 255, 1) 0%, rgb(0, 61, 173) 90%);
}

div.modal-body {
    margin-left: 30px;
    margin-right: 30px;
}

div.modal-body {
    font-size: 1.3rem;
}

.modal-tit,
ul.label-modal-question-line>li {
    margin-bottom: 1.5rem;
    /* color: var(--color-black); */
}

.modal-tit {
    font-size: 1.8rem;
}

.label-modal-question {
    font-size: 1.3rem;
}

.label-modal-question-line {
    line-height: 1.2;
}

div.modal-body>p,
div.modal-body strong>p {
    margin-top: 13px;
    line-height: 1.2;
}

label.changed-label-font {
    font-family: var(--font-general);
}

.modal-middle-size {
    max-width: 900px;
}

div.interline,
p.interline {
    line-height: 1.3;
}

div.space-between-line {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Satisfaction */
.corner-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 425px;
}

.content-box {
    background-color: #eeeded;
    padding: 20px; /* Ajusta para dejar espacio dentro del content-box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    position: relative;
}

.upper-div {
    background-color: #004AAD;
    color: var(--bg-email);
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.4;
    padding: 1rem;
    border-radius: 20px;
    width: 100%;
    position: absolute;
    top: -70px; /* Desplazar hacia arriba para que sobresalga */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.content-box-pt-20 {
    padding-top: 20px;
}

.title {
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 0;
}

.description {
    color: var(--color-black);
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.button-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 60px;
    margin-left: 60px;
}

.button-group-reverse {
    flex-direction: row-reverse;
    margin-right: 0px;
    margin-left: 0px;
}

.rate-button {
    background-color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    border: 1px solid#A6A6A6;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.rate-button:hover {
    background-color: #d0d0d0;
}

.special-btn-share {
    font-size: 1rem;
}

.survey-image {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.survey-image img:first-child{
    width: 150px;
}

.end-survey {
    line-height: 1.2;
    font-size: 1.3rem;
}

/* On Boaring */

/* Fondo oscuro con opacidad */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Modal centrado */
.modal-window {
    width: 35%;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-window-content {
    padding: 1rem;
}

.modal-window-content ul li {
    line-height: 1.4;
}

.modal-window-content p:first-child
{
    font-size: 0.8rem;
}

.modal-window img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.modal-window h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: bold;
}

.modal-window p {
    margin-bottom: 10px;
    color: #333;
    line-height: 1.2;
}

.modal-window .next-button {
    cursor: pointer;
    float: right;
    margin-bottom: 10px;
}

.modal-window .prev-button, .tutorial-modal-window-content div .prev-button {
    color: #004AAD;
    font-weight: bold;
}

/* Tutorials */
.tutorial-corner-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 500px;
    z-index: 2;
}

@media only screen and (max-width: 600px) {
    .tutorial-corner-container {
        right: unset;
        width: 330px;
    }
}

.tutorial-content-box {
    background-color: #FFFFFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    position: relative;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.tutorial-modal-window-content {
    padding: 1rem;
    border: 1px solid black;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.tutorial-modal-window-content p:first-child {
    color: #616161;
    font-size: 1.3rem;
    font-weight: bold;
}

.tutorial-modal-window-content h2 {
    font-size: 1.7rem;
    font-weight: bold;
}

.tutorial-modal-window-content p:nth-child(3) {
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.tutorial-content-box img {
    max-width: 100%;
    height: auto;
}

.tutorial-content-box-pt-20 {
    padding-top: 20px;
}

.tutorial-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-top: 0;
}

.tutorial-description {
    color: var(--color-black);
    font-size: 0.9rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* Notification Icon */

.notification-icon-wrapper {
    position: relative;
    display: inline-block;
    text-decoration: none; /* Quitar subrayado de los enlaces */
}

.notification-icon {
    width: 50px; /* Ajusta el tamaño al que necesitas */
    height: 50px;
}

.notification-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.notification-count span {
    display: inline-block;
    line-height: 1;
}

/* Chat Support */
.cs-general-container {
    background-color: #FFFFFF;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 1rem;
    max-height: 400px;
    overflow-y: scroll;
}

.cs-individual-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.cs-individual-link {
    border-bottom: 2px solid #5c5c5c7a;
    margin-bottom: 0.8rem;
}

.cs-individual-link:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.cs-indcon-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-individual-container .cs-indcon-image img {
    width: 50px;
}

.cs-individual-container .cs-indcon-info p {
    line-height: 1;
    margin-bottom: 0;
}

.cs-individual-container .cs-indcon-info p:nth-of-type(1) {
    font-weight: bold;
}

.cs-individual-container .cs-indcon-info p:nth-of-type(2) {
    margin-top: 5px;
    color: #5c5c5c7a;
}

/* Message Support */
.msv-general-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #003160;
    padding: 0.5rem 1rem;
    color: var(--bg-email);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.msv-individual-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.msv-indcon-image img {
    width: 50px;
}

.msv-support {
    grid-column: 1;
    background-color: #d5ecf6;
}

.msv-client {
    grid-column: 2;
    background-color: #f2f2f2;
    text-align: end;
}

.msv-support, .msv-client {
    border-radius: 1rem;
    padding: 1rem;
    color: black;
    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.2);
}

.cs-indcon-content-chat {
    line-height: 1.3;
}

.msv-datetime {
    font-size: 0.8rem;
    font-weight: bold;
    font-style: italic;
}

.msv-image-chat {
    width: 150px;
}

.msv-chat-box {
    padding: 1rem;
}

.msv-btn-upload-image {
    right: 93px;
    top: 35px;
}

/* Estilo para el contenedor de lightbox */
.lightbox {
    display: none;
    /* Inicialmente oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* Fondo oscuro con opacidad */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Estilo para la imagen centrada */
.lightbox img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
}

/* Planning Create */

.container-planning {
    background: #ffffff;
}

.checkbox-columns {
    display: flex;
    /* justify-content: space-between; */
}

.left-column,
.right-column {
    width: 50%;
}

.line-vertical {
    border-right: 3px solid rgba(0, 1, 1, 0.1);
}

.bg-image-planning {
    background-image: url(../images/bg/bg-planning.png);
    background-repeat: repeat;
}

/* error-card */
.error-card {
    border-left: 5px solid #ffc107;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
    margin-bottom: 1.5rem;
    font-family: "Cairo", sans-serif;
}

/* Título */
.error-card .card-title- {
    background-color: #d0ecff;
    /* Azul más visible */
    color: #073bac;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #c1d9ee;
}

/* Info básica */
.error-card .card-info {
    background-color: #e8e8e8;
    /* Gris más fuerte */
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.95rem;
}

/* Descripción */
.error-card .card-description {
    background-color: #fff1c2;
    /* Amarillo claro más vivo */
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    color: #333;
    border-top: 1px solid #f4d883;
    border-bottom: 1px solid #f4d883;
}

/* Fecha */
.error-card .card-date {
    background-color: #dfe8f0;
    /* Azul grisáceo más saturado */
    padding: 0.75rem 1.5rem;
    font-size: 0.85rem;
    color: #555;
    text-align: right;
}

/* Special Width Forms */

.special-width-form {
    width: 75%;
}

.special-width-form-30 {
    width: 30%;
}

.special-width-form-50 {
    width: 50%;
}

div.checkbox-columns-mobile {
    display: none;
}

/* Inform Survey */
.graphics {
    display: flex;
    justify-content: space-around;
}

.graphics .graphic-survey-made,
.graphics .graphic-average {
    border: 1px solid var(--color-platform-dark);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 30px;
    font-weight: bold;
    font-family: var(--font-general);
    width: 100%;
    max-width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.graphics .graphic-cake {
    width: 100%;
    max-width: 400px;
}

.graphics .graphic-survey-made p:nth-child(1),
.graphics .graphic-survey-made p:nth-child(2),
.graphics .graphic-average p:nth-child(1),
.graphics .graphic-average p:nth-child(2) {
    font-size: 1.4rem;
    line-height: 1.2;
}

.graphics .graphic-survey-made p:nth-child(3),
.graphics .graphic-average p:nth-child(3) {
    font-size: 2rem;
}

.container-password {
    width: 700px;
}

@media only screen and (max-width: 600px) {
    div.special-width-form,
    .special-width-form-30,
    div.special-width-form-50,
    form.special-width-form-50,
    .container-password {
        width: 100%;
    }

    .line-vertical {
        border: none;
    }

    div.dates-planning {
        display: block;
    }
    div.checkbox-columns {
        display: none;
    }
    div.checkbox-columns-mobile {
        display: block;
    }
}

@media only screen and (max-width: 600px) {
    .container-tool-option-sections {
        grid-template-columns: repeat(1, 1fr);
        white-space: unset;
    }

    .dash-container-options {
        margin: 0;
    }

    div.option-content-title > h4 {
        font-size: 1.8rem;
    }

    .btn-warning,
    .btn-danger,
    .btn-primary,
    .btn-secondary,
    .btn-dark,
    .btn-success,
    .btn-info,
    .btn-light {
        font-size: 0.8rem;
    }

    div.question-subtitle > h5 {
        font-size: 1.5rem;
    }

    .special-form-margin-10 {
        margin-top: 10px;
    }

    .container-student-table {
        width: 100%;
    }

    .table-default {
        display: none;
    }

    .mobile-site-errors {
        display: block;
    }

    .badge-chat {
        white-space: normal;
    }

    div.section-tool-content {
        margin-left: 0;
        margin-right: 0;
    }

    a.section-link {
        padding: 10px;
    }

    .img-tool-icon {
        align-content: center;
    }

    .content-tool-info {
        margin-left: 5px;
    }

    .upload-record-button {
        display: flex;
        flex-direction: column;
    }

    section.category-box div a.download-doc-btn {
        margin-left: 0;
        margin-top: 10px;
    }

    .corner-container {
        bottom: 15px;
        right: 10px;
        width: 330px;
    }

    .upper-div {
        font-size: 1rem;
        padding: 0.5rem;
    }

    .title,
    .description {
        font-size: 1rem;
    }

    .button-group {
        margin-right: 30px;
        margin-left: 30px;
    }

    .button-group-reverse {
        margin-right: 0px;
        margin-left: 0px;
    }

    .rate-button {
        font-size: 1rem;
    }

    .container-notifications {
        width: 100%;
    }

    .modal-window h2 {
        font-size: 1.2rem;
    }

    div.modal-body > p,
    div.modal-body strong > p {
        font-size: 1rem;
    }

    .label-modal-question {
        font-size: 1rem;
    }

    .font-size-mobile {
        font-size: 1rem;
    }

    div.modal-body {
        margin-left: 0;
        margin-right: 0;
    }

    .modal-dialog-scrollable {
        max-height: 85vh;
        overflow-y: auto;
    }

    .modal-body {
        max-height: 60vh;
        overflow-y: auto;
    }

    .tutorial-modal-window-content h2 {
        font-size: 1.2rem;
    }

    .tutorial-modal-window-content p:nth-child(3) {
        font-size: 1rem;
    }

    .dash-container-options {
        flex-direction: column;
        overflow-x: unset;
    }

    .container-plans {
        flex-direction: column;
    }

    h2.plan-title-splash {
        font-size: 1rem;
    }

    .img-plan-title-splash {
        width: 21px;
    }

    .second-plan {
        margin-left: 0;
    }

    .form-plan-general {
        padding: 0px;
    }

    .question-title h4 {
        font-size: 1.5rem;
    }

    .special-plan-question-title h4 {
        font-size: 2.5rem;
        margin-bottom: 0;
    }

    .special-plan-include-title h2 {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .plan-price.plan-now,
    .plan-price-month {
        font-size: 1.8rem;
    }

    a.container-option-link {
        min-width: 250px;
    }

    .dash-container-options {
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow-x: unset;
    }

    a.container-option-link {
        min-width: unset;
        width: 90%;
        margin: 10px 0;
    }

    div.option-content-title h4,
    div.option-content-description p {
        text-align: center;
    }

    img.image-option {
        width: 80%;
        margin: 0 auto;
    }

    .form-default-general > p {
        margin-bottom: 1rem;
    }
    .without-tax {
        font-size: 0.8rem;
    }
    .content-notification {
        flex-direction: column;
        align-items: center;
    }

    .content-option-notification {
        margin-top: 1rem;
    }

    .account-options > div:nth-child(2) {
        margin-left: 0;
    }

    .mm-0 {
        margin: 0 !important;
    }

    .mobile-segmentation-ul {
        list-style-type: none;
        padding: 0;
        font-size: 1rem;
    }

    .mobile-segmentation-title {
        font-size: 1.2rem;
    }

    .modal-window {
        width: 95%; /* Ocupa casi todo el ancho en móviles */
        max-width: none; /* Elimina el máximo para que se expanda */
        margin: 15px; /* Pequeño margen para separarlo de los bordes */
    }

    .modal-window-content {
        text-align: left; /* Alinea el texto a la izquierda para mejor lectura en móvil */
    }

    .next-button,
    .prev-button {
        display: block; /* Los botones se apilan en móvil */
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-top: 10px;
    }

    /* Muestra la nueva estructura de tarjetas solo en móviles */
    .d-md-none {
        /* Esta clase de Bootstrap ya hace el trabajo de ocultar en MD+, así que se mantiene */
        display: block !important; /* Sobrescribe cualquier display:none previo si es necesario */
    }

    /* --- Estilos para la nueva estructura .mobile-card (Recomendado) --- */
    .mobile-card {
        border: 1px solid #dee2e6; /* Borde suave de Bootstrap */
        border-radius: 0.25rem; /* Bordes redondeados */
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Sombra ligera */
        margin-bottom: 1rem; /* Espacio entre tarjetas */
    }

    .mobile-card .card-body {
        padding: 1rem;
    }

    .mobile-card .card-item {
        margin-bottom: 0.5rem; /* Espacio entre cada línea de información */
        display: flex; /* Para alinear etiqueta y valor en la misma línea */
        flex-wrap: wrap; /* Permite que el contenido se envuelva si es muy largo */
        align-items: baseline; /* Alinea los ítems por su línea base de texto */
    }

    .mobile-card .card-label {
        flex: 0 0 auto; /* La etiqueta no crece ni encoge, toma su ancho natural */
        margin-right: 0.5rem; /* Espacio entre la etiqueta y el valor */
        font-weight: bold; /* Etiqueta en negrita */
        color: #343a40; /* Color oscuro para las etiquetas */
    }

    .mobile-card .card-value {
        flex: 1 1 auto; /* El valor ocupa el espacio restante disponible */
        word-wrap: break-word; /* Rompe palabras largas para que no desborden */
    }

    .mobile-card .card-actions {
        border-top: 1px solid #e9ecef; /* Separador visual para las acciones */
        padding-top: 1rem; /* Espacio superior para las acciones */
        margin-top: 1rem; /* Margen superior para las acciones */
        display: flex;
        flex-direction: column; /* Apila los botones verticalmente */
    }

    .mobile-card .button-group-mobile {
        display: flex;
        flex-wrap: wrap; /* Permite que los botones se envuelvan si hay muchos */
        justify-content: flex-start; /* Alinea los botones a la izquierda */
        gap: 0.5rem; /* Espacio entre los botones */
    }

    .mobile-card .button-group-mobile .btn {
        flex: 1 1 auto; /* Permite que los botones crezcan para ocupar el espacio */
        max-width: 100%; /* Asegura que no excedan el ancho */
        white-space: nowrap; /* Evita que el texto del botón se rompa */
        text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es muy largo */
        overflow: hidden; /* Oculta el texto que se desborda */
        padding: 0.375rem 0.75rem; /* Ajusta el padding para botones pequeños */
        font-size: 0.875rem; /* Tamaño de fuente más pequeño para botones */
        display: inline-flex; /* Para alinear ícono y texto */
        align-items: center; /* Centra verticalmente el contenido del botón */
        justify-content: center; /* Centra horizontalmente el contenido del botón */
    }

    .mobile-card .button-group-mobile .btn svg {
        margin-right: 0.25rem; /* Espacio entre el icono y el texto del botón */
    }

    /* Ajustes para la paginación */
    .pagination {
        flex-wrap: wrap; /* Permite que la paginación se envuelva en varias líneas */
        justify-content: center; /* Centra la paginación */
    }
    .page-item {
        margin: 0.25rem; /* Espacio entre elementos de paginación */
    }

    /* Ajustes para el botón "Generar" */
    .container-student-table > .btn {
        width: 100%; /* El botón "Generar" toma todo el ancho */
        text-align: center;
    }

    div > .low-account {
        margin-left: 0 !important;
    }

    .sp-m {
        margin: 0;
    }

    p.section-tool-content-title {
        line-height: 1.3;
    }

    p.section-tool-content-description {
        margin-top: 10px;
    }

    #search {
        margin-bottom: 1rem;
    }

    .logo-principal {
        width: 80%;
    }

    .frame-tyv {
        width: 305px;
        height: 205px;
    }
}

@media only screen and (min-width: 601px) {
    .mobile-site-errors {
        display: none;
    }
}

.tutorial-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #0048ab;
    color: white;
    padding: 8px 14px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.2s ease;
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -ms-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
}

.tutorial-btn:hover {
    transform: scale(1.05);
    color: #fff;
}

.play-icon {
    width: 30px;
    height: 30px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.play-icon svg {
    width: 18px;
    height: 18px;
    fill: white;
}

/* Texto solo visible en pantallas grandes */
.btn-text {
    font-size: 16px;
    white-space: nowrap;
}

.btn-session {
    margin-right: 1rem;
}

@media only screen and (max-width: 600px) {
    .btn-text {
        display: none;
    }

    .tutorial-btn {
        padding: 8px;
        gap: 0;
    }
    .btn-session {
        margin-right: 0rem;
    }
    .btn-google {
        margin-top: 1rem;
    }

    .w-80,
    .w-75,
    .w-60,
    .w-50,
    .w-40p, .w-30 {
        width: 100% !important;
    }

    .container-general {
        width: 100%;
        margin-top: 10%;
        padding: 2px;
    }

    .educational-content {
        margin-left: 0;
        margin-right: 0;
    }
}

.check-spam {
    color: #013bac;
}

.recaptcha-center {
    display: flex;
    justify-content: center;
    margin: 20px 0; /* Ajusta el margen según lo necesites */
}

/* Estilos iniciales: ocultar la vista móvil */
.mobile-workcenters {
    display: none;
}

/* Media query para pantallas pequeñas (max-width: 600px) */
@media only screen and (max-width: 600px) {
    .mobile-workcenters {
        display: block !important; /* Mostrar la vista móvil en móviles */
    }
}

.mobile-workcenters .card {
    margin-bottom: 1.5rem; /* Aumentar el espacio entre tarjetas */
    border: 1px solid #e0e0e0; /* Borde gris claro */
    border-radius: 0.5rem; /* Bordes ligeramente redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

.mobile-workcenters .card-body {
    padding: 1.25rem; /* Aumentar el padding interno */
}

.mobile-workcenters .card-title {
    font-size: 1.5rem; /* Título más grande */
    font-weight: bold; /* Título en negrita */
    color: #343a40; /* Color de texto más oscuro */
    margin-bottom: 0.75rem;
}

.mobile-workcenters .card-text {
    margin-bottom: 0.5rem;
    color: #495057; /* Color de texto secundario */
}

.mobile-workcenters .card-text strong {
    font-weight: bold; /* Etiquetas en negrita */
    color: #212529; /* Color de etiqueta más oscuro */
    margin-right: 0.25rem;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}