@import url('td-ui-ux.css');
@import url('skip.css');
@import url('portlets.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
/*
 * MAIN.CSS
 * CSS Principal de la plataforma
*/


/* ----------------------------- */
/* GENERAL */
/* ----------------------------- */
* {
  border: 0;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: none;
  outline-width: 0;
}

.portlet ol,
.portlet ul {
  padding: revert;
}


a:active {
  outline: none
}

body {
  font-family: 'Roboto', sans-serif !important;
  font-size: 1em;
  font: small/1.5em 'Roboto', sans-serif;
  color: #616161 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;
}

h1 {
  font-size: 1.2em;
  font-weight: bold;
  color: #212121;
  /*#3E3E3E; LETRAS DE LAS FECHAS DE CALENDARIOS*/
}

h2 {
  font-size: 1.1em;
  font-weight: bold;
  /*color: #545D51;*/
  color: #616161;
  margin-top: 0px;
}

h3 {
  font-size: 1.05em;
  font-weight: bold;
  color: #212121;
  /*nombres de los cursos en rojita*/
}

a:link {
  /* font-family: Helvetica, sans-serif; */
  font-size: 11pt;
  color: #2662ff;
  text-decoration: none;
}

a:visited {
  color: #2662ff;
  text-decoration: none;
}

/* a:hover{
  background-color: rgb(57, 98, 246);
  color: #FFFFFF;
  border: solid 1px rgb(57, 98, 246);
} */


/* /Propiedades generales*/

input[type="text"]:not(.mat-input-element),
input:not([type]),
input[type="password"],
input[type="search"],
textarea,
select {
  box-sizing: border-box;
  height: 32px;
  border: 1px solid #CBD0D5;
  border-radius: 4px;
  background-color: #FFFFFF;
}

.td-form input[type="text"]:not(.mat-input-element),
.td-form input:not([type]),
.td-form input[type="password"],
.td-form input[type="search"],
.td-form textarea,
.td-form select {
  width: 100%;
}

textarea {
  height: unset;
}

input:not([type]):not(.mat-mdc-input-element):focus-visible,
input[type="text"]:not(.mat-input-element):not(.MuiInputBase-input):not(.mat-mdc-input-element):focus-visible,
input[type="password"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus {
  outline: none;
  border: 1px solid #2962FF !important;
}

/* ----------------------------- */
/* END GENERAL */
/* ----------------------------- */
/* --------------------------------------------------------------------------------------- */
/* ----------------------------- */
/* HEADER */
/* ----------------------------- */
header#header-td {
  border-bottom: 1px solid #e7e8e8;
  clear: both;
  height: 55px;
  width: 100%;
  padding: 0 15px;
}

header#header-td>section {
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 100%;
}

header#header-td #right-seccion,
header#header-td #left-seccion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

header#header-td #right-seccion {
  align-items: center;
}

header#header-td section#logo {
  display: inline-block;
  /* padding: 10px 0; */
  margin: 0 25px 0 0;
}

header#header-td section#logo a div#logoTD {
  background: url("/resources/theme-td/images/global/logo_TD.png");
  /* background: url("/resources/theme-td/images/global/logo_TD_luto.png"); */
  display: block;
  margin: 0 auto;
  width: 114px;
  height: 31px;
  background-repeat: no-repeat;
  background-size: contain;
}

header#header-td section#logo a:focus>div#logoTD {
  border: 1px dotted #CCC;
  margin: -1px;
}

/* header#header-td section#header-navigation {
  float: right;
  height: 50px;
} */

header#header-td section#header-navigation ul {
  list-style: none;
  margin: 0;
  /* margin-top: 5px; */
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

/* header#header-td section#header-navigation>ul>li {
  margin-top: -3px;
  margin-left: 5px;
} */

/*header#header-td section#header-navigation ul li a {
  border-right: 2px solid #98A2A3;
  color: #98A2A3;
  display: block;
  padding-right: 5px;
  text-decoration: none;
}*/
header#header-td section#header-navigation ul li i {
  color: #3B6FFF;
  font-size: 36px;
  padding: 6px;
}

header#header-td section#header-navigation ul li#platform_user_apps>i,
header#header-td section#header-navigation ul li#platform_user_notifications>i,
header#header-td section#header-navigation ul li#help_tools>i {
  font-size: 24px;
  padding: 6px;
}

header#header-td section#header-navigation ul li#platform_user_apps>i:hover,
header#header-td section#header-navigation ul li#platform_user_notifications>i:hover,
header#header-td section#header-navigation ul li#help_tools>i:hover {
  padding: 6px;
  border: 0;
  background-color: #e9f0fd;
  border-radius: 50%;
}

/* #platform_user_apps i {
  color: #757575 !important;
} */
header#header-td section#header-navigation ul li i:hover {
  cursor: pointer;
  /* background-color: #e9f0fd; */
  /* border-radius: 50%;
  border: 0;
  padding: 0px; */
}

/* header#header-td section#header-navigation ul li:last-of-type a {
  border: none;
} */

section#main-menu-td {
  display: none;
  vertical-align: top;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

section#main-menu-td nav {
  height: 100%;
  list-style: none;
  white-space: nowrap;
}

section#main-menu-td nav li {
  display: inline-block;
  height: 54px;
  vertical-align: top;
}

section#main-menu-td nav,
section#main-menu-td section {
  display: inline-block;
}

section#main-menu-td nav li a {
  border-top: 4px solid transparent;
  color: #666;
  display: block;
  height: 100%;
  padding: 10px 25px;
  transition: 0.17s;
}

section#main-menu-td nav li a:hover {
  color: rgb(57, 98, 246);
  border-bottom: 4px solid rgb(57, 98, 246);
  /* background: #f0f1f1; */
  padding: 10px 25px;
}

section#main-menu-td nav li.main_menu_td_active a {
  color: rgb(57, 98, 246);
  border-bottom: 4px solid rgb(57, 98, 246);
  font-weight: bold;
}

section#main-menu-td nav li a:focus,
section#main-menu-td nav li a:focus-visible {
  color: rgb(57, 98, 246);
  border-bottom: 4px solid rgb(57, 98, 246);
  padding: 10px 25px;
  outline: unset;
  font-weight: bold;

}

section#server-time {
  color: #616161;
  /* display: inline-block; */
  /* float: right; */
  /* text-align: right; */
  margin-right: 15px;
  /* padding-right: 0; */
  /* vertical-align: middle; */
}

/* SUBNAV */
section#content-wrapper section#sub-navigation {
  padding-top: 0;
  position: relative;
  margin: 0 0 50px;
}

section#sub-navigation {
  /* background: #E7E8E8; */
  width: 100%;
  margin-bottom: 30px;
}

section#sub-navigation ul {
  /* background: #ffffff; */
  list-style: none;
  border-bottom: 1px solid #e7e8e8;
}

section#sub-navigation ul#selectable_subnavbar {
  margin: 0;
  overflow: auto;
  padding: 0;
  width: 100%;
}

section#sub-navigation ul#selectable_subnavbar:empty {
  display: none;
}

section#sub-navigation ul#selectable_subnavbar li.sub-navigation-active a {
  border: none;
}

section#sub-navigation ul li {
  /* border-right: 1px solid #CCC; */
  display: inline-block;
}

/* section#sub-navigation ul li:hover {
  border-right: 1px solid #0B2E49;
} */

section#sub-navigation ul li a {
  /* border: 1px solid #E7E8E8; */
  color: #616161;
  display: block;
  padding: 8px 25px;
}

section#sub-navigation ul li.sub-navigation-active {
  /* background: rgb(14, 61, 98); */
  border-bottom: 4px solid #3F67F6;
  font-weight: bold;
  color: #FFF;
  cursor: pointer;
  display: inline-block;

}

/* section#sub-navigation ul:first-of-type li.sub-navigation-active {
  padding: 7px 25px;
} */

section#sub-navigation ul li.sub-navigation-active a {
  background: #EAF0FC;
  color: #3F67F6;
  padding-bottom: 4px;
}

section#sub-navigation ul li:hover>a {
  /* border: 1px solid #0B2E49; */
  color: #3F67F6;
  border-bottom: 4px solid #3F67F6;
  padding-bottom: 4px;
}

/* section#sub-navigation ul li.sub-navigation-active a:hover {
  border: 1px solid #0B2E49;
  background: #0B2E49;
} */

.arrow_box {
  /* position: relative; */
  background: #FFFFFF;
}

.arrow_box:after,
.arrow_box:before {
  bottom: 100%;
  right: 10px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FFFFFF;
  border-width: 10px;
  margin-left: -10px;
}

.arrow_box:before {
  border-width: 11px;
  margin-left: -11px;
}

.arrow_box_fixed {
  position: relative;
  background: #FFFFFF;
}

.arrow_box_fixed:after,
.arrow_box_fixed:before {
  top: 37px;
  right: 134px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: fixed;
  pointer-events: none;
}

.arrow_box_fixed:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FFFFFF;
  border-width: 10px;
  margin-left: -10px;
}

.arrow_box_fixed:before {
  border-width: 11px;
  margin-left: -11px;
}

/*  */

.arrow_box_downR {
  position: relative;
  background: #FFFFFF;
}

.arrow_box_downR:after,
.arrow_box_downR:before {
  bottom: 8px;
  left: -10px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  transform: rotate(270deg);
}

.arrow_box_downR:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FFFFFF;
  border-width: 10px;
  margin-left: -10px;
}

.arrow_box_downR:before {
  border-width: 11px;
  margin-left: -11px;
}


.arrow_box_left {
  position: relative;
  background: #FFFFFF;
  z-index: 100;
}

.arrow_box_left:after,
.arrow_box_left:before {
  bottom: 100%;
  left: 10px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box_left:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FFFFFF;
  border-width: 10px;
  margin-left: -10px;
}

.arrow_box_left:before {
  border-width: 11px;
  margin-left: -11px;
}

/* section#sub-navigation ul li a:focus {
  text-decoration: underline;
} */

/* END OF MAIN MEMU TD */
/*
 * USER PROFILE
 */
li#platform_user_profile {
  cursor: pointer;
  /* margin: -2px 28px 0 5px !important; */
  outline: none;
  position: relative;
  width: 40px;
}

li#platform_user_profile:focus>i {
  color: #1b5fa3;
}

li#platform_user_profile>.user_profile_icon {
  display: none;
}

li#platform_user_profile>img.platform_avatar {
  border: 1px solid #eaeaea;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  height: 34px;
  width: 33px;
  object-fit: cover;

}

div.platform_panel {
  background: #FFF;
  border-radius: 3px;
  -webkit-border-radius: 7px;
  color: #212121;
  cursor: default;
  display: none;
  min-height: 130px;
  position: absolute;
  width: 340px;
  -webkit-box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.3);
  z-index: 999;
}


div#platform_user_panel {
  right: 3px;
  top: 48px;
  padding: 0 10px;
}

div#platform_help_panel {
  right: 38px;
  top: 48px;
}

div#platform_help_panel .help-container {
  padding: 0px 10px;
  margin-top: 5px;
}

div#platform_help_panel .help-container a {
  color: #616161;
  text-decoration: none;
}

div#platform_help_panel .help-container .new-request {
  margin-bottom: 10px;
}

div#platform_help_panel .help-container .new-request:hover {
  background-color: #f2f2f2;
}

div#platform_help_panel .help-container>div {
  display: flex;
  align-items: center;
  padding: 0px 5px;
}

div#platform_help_panel .help-container>div>span {
  color: #616161;
}

/* div#platform_help_panel .help-container>div>span:nth-child(1){
  margin-right: 8px;
} */

div#platform_apps_panel {
  right: 110px;
  top: 48px;
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.notifications-grid {
  margin: 56px 89px 0 0 !important;
  box-shadow: 0 0 22px 0 rgb(0 0 0 / 30%);
}

div#platform_user_panel #server_info__logout {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.3em 1em;
  align-items: baseline;
  margin: 0 0 5px 0;
}

div#platform_user_panel #menu-server-info {
  color: #616161;
  font-size: 8pt;
  display: flex;
}

/* div#platform_apps_panel>div {
  padding: 15px;
} */

div#platform_help_panel>div {
  padding: 5px;
}

div#platform_help_panel>div>h2,
#platform_apps_panel>div>h2 {
  /* border-bottom: 1px solid #f5f5f5; */
  padding: 10px 10px;
  color: #212121;
  font-size: 14px;
  font-weight: bold;
  margin: unset;
}

#platform_apps_panel>div>h2.fixed {
  position: sticky;
  background-color: #fff;
  width: 326px;
  height: 30px;
  top: 0px;
  padding-top: 12px;
}

div#platform_apps_panel>div {
  padding: 0px 5px 5px;
}

div#platform_help_panel>div a {
  display: block;
  padding: 10px;
  color: #616161;
}

div#platform_help_panel>div a:hover {
  /* background-color: #F2F2F2; */
}

li#help_tools {
  cursor: pointer;
  /*margin-right: 4px;*/
  outline: none;
}

li#help_tools:focus>i {
  color: #1b5fa3;
}

div#platform_user_panel img.platform_avatar {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  margin: 0.5em;
  width: 60px;
  height: 60px;
  object-fit: cover;
}

div#platform_user_avatar_info {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 15px;
}

div#platform_user_avatar {
  margin: 0 4px 0 0;
}

/* div#platform_user_info {
  margin: 1em 0;
  width: 212px;
} */

div#platform_user_logout {
  height: 1.5em;
  width: 100%;
}

div#platform_user_logout>a {
  color: #616161 !important;
  padding: 0.3em 0;
  width: 100%;
}

div#platform_user_logout>a:hover,
div#platform_user_logout>a:focus {
  background: #F2F2F2;
}

div#platform_user_panel>a:last-of-type {
  float: right;
  margin: 5px;
  width: 120px;
}

div#platform_user_panel>a:last-of-type:hover,
div#platform_user_panel>a:last-of-type:focus {
  color: #FFF !important;
  background: #808081;
}

div#td_menu_responsive_toggle {
  cursor: pointer;
  display: inline-block;
  /* float: left; */
  height: 44px;
  /* margin-left: -10px; */
  /* padding-top: 10px; */
  width: 34px;
  display: flex;
  align-items: center;
}

div#td_menu_responsive_toggle>i {
  font-size: 1.5em;
}

.notifications-grid header h2 {
  color: #212121;
}

.notifications-grid header {
  /* border-bottom: 2px solid #ffffff !important; */
}

/* .tds-lib-icon-notification:before,
.tds-lib-icon-help2:before,
.tds-lib-icon-profile:before {
  color: #3B6FFF !important;
}
#platform_user_notifications .material-icons-outlined {
  color: #3B6FFF !important;
  font-size: 32px;
} */

.notifications-unread-available {
  background: #ff5252 !important;
  border-radius: 50%;
  height: 12px !important;
  width: 12px !important;
  top: 7px;
  right: 19px;
  border: 2px solid #fff;
  position: absolute;
  /* z-index: 4; */
  margin-right: -12px;
  /* comment if unread notifications point is not located where it has to be */
  display: inline-block !important;
}

section#breadcrumbs {
  margin: 20px 0 10px 12px;
}

/* ----------------------------- */
/* END HEADER */
/* ----------------------------- */
/* --------------------------------------------------------------------------------------- */
/* ----------------------------- */
/* CONTENT */
/* ----------------------------- */
section#content-wrapper {
  width: 100%;
  /* min-height: calc(95vh -15px); */
}

section#content-wrapper>section {
  display: block;
}

/* breadcrumbs */
section#breadtime {
  clear: both;
  display: block;
}

section#breadtime section {
  display: inline-block;
}

section#breadcrumbs {
  font-size: 1.125em;
  margin: 20px 0 10px;
  /* padding: 6px; */
  white-space: nowrap;
  width: calc(100% - 37px);
}

section#breadcrumbs div {
  display: inline-block;
  /* height: 50px; */
  /* margin-top: 5px; */
  overflow: auto;
  /* padding: 0 5px; */
  /* vertical-align: middle; */
  width: calc(100% - 40px);
}

section#breadcrumbs li {
  color: #212121;
  display: none;
}

section#breadcrumbs li a {
  color: #2962ff;
}

section#breadcrumbs li i.separator {
  margin-left: 5px;
  margin-right: 5px;
}

section#breadcrumbs li:nth-last-child(-n+1) {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

section#breadcrumbs li#breadcrumbs_toggle {
  cursor: pointer;
  display: inline-block;
  /* margin-right: 5px; */
  margin-top: 3px;
  position: relative;
  vertical-align: middle;
  outline: none;
}

section#breadcrumbs li#breadcrumbs_toggle>i {
  font-size: 24px;
}

section#breadcrumbs li#breadcrumbs_toggle:focus>i {
  color: #212121;
}

section#breadcrumbs li#breadcrumbs_toggle>i.disabled,
section#breadcrumbs li#breadcrumbs_toggle>i.disabled:hover,
section#breadcrumbs li#breadcrumbs_toggle>i.disabled:focus,
section#breadcrumbs li#breadcrumbs_toggle>i.disabled:focus {
  color: #757575;
  cursor: default;
}

section#breadcrumbs li#breadcrumbs_toggle ul {
  background: #FFF;
  border-radius: 3px;
  display: none;
  left: 1px;
  padding: 5px 0;
  position: absolute;
  text-transform: lowercase;
  top: 41px;
  -webkit-box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.3);
  width: 85vw;
  max-width: 250px;
  white-space: normal;
}

section#breadcrumbs li#breadcrumbs_toggle:focus>ul {
  display: block;
}

section#breadcrumbs li#breadcrumbs_toggle ul a {
  display: block;
  padding: 10px;
  width: 100%;
}


section#breadcrumbs li#breadcrumbs_toggle ul a::first-letter {
  text-transform: capitalize;
}

section#breadcrumbs li#breadcrumbs_toggle ul a:hover {
  background: #e9f0fd;
}

section#breadcrumbs li#breadcrumbs_toggle ul:hover {
  display: block;
}

section#breadcrumbs li#breadcrumbs_toggle ul li {
  display: block;
  margin: 0;
}

section#breadcrumbs li#breadcrumbs_toggle ul li:nth-last-child(-n+1) {
  display: none;
}

section#breadcrumbs li#breadcrumbs_toggle ul li .separator {
  display: none;
}

ul.compact,
.action-list ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
}

ul.compact li,
.action-list ul li {
  list-style: none;
  display: inline-block;
}

/* end of breadcrumbs */

app-root>#main-content {
  width: 100%;
}

/* main content */
#main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  padding: 0 45px;
  justify-content: space-between;
  /* margin-top: 30px;  */
}

#inner-wrapper:not(.home) #main #main-content,
#inner-wrapper:not(.home) #main #sidebar-1 {
  /* float: unset; */
  max-width: 49%;
  width: 49%;
}

#inner-wrapper.home #main-content {
  width: 39%;
  flex-grow: 1;
  max-width: 39%;
}

#inner-wrapper.home #sidebar-1 {
  width: 59%;
  flex-grow: 2;
  max-width: 59%;
}


#inner-wrapper:not(.home) #main #main-content.main-one-column {
  max-width: 100%;
  width: 100%;
  margin: 0px;
}

.sidebar-1-padding,
.main-content-padding {
  padding: 0px;
}

#main-content>.main-content-padding>table:not(.portal-page-config) {
  border-radius: 5px;
  border: 4px solid #f5f5f5;
  margin-bottom: 10px;
  padding: 10px;
  width: 100%;
}

#main-content>.main-content-padding>table>form {
  margin-top: 10px;
}

ul.mktree {
  margin-left: 0px !important;
}

#main-content {
  outline: none;
}

.main-content-padding li {
  margin-left: 1.5em;
}

.main-content-padding.flex-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#sidebar-1-sim,
#main-content-sim {
  width: 49%;
}

/* end of main content */





/*  TABLES */

table.standard {
  margin: 0;
  padding: 0;
  border: 1px solid #E0D0B1;
}

table.standard th {
  padding: 12px 5px;
  background-color: #f3f1e9;
  font-size: .95em;
  border-bottom: 1px solid #F0EADA;

}

table.standard tr td {
  margin: 0 0 0 0;
  padding: 12px 5px;
  border-bottom: 1px solid #F0EADA;
}

/* table.standard tfoot tr td {} */

table.standard th.rowHeader {
  background-color: #f7efdc;
}

table.standard tr.oddRow,
table.standard tr.oddRow th {
  background-color: #fbf8eb;
}

table.standard tr.evenRow,
table.standard tr.evenRow th {
  background-color: #ffffff;
}



table.form {
  margin: 0;
  padding: 0;
}

table.form th,
table.form legend {
  text-align: right;
  font-size: .95em;

}

table.form tr td {
  margin: 0 0 0 0;
  padding: 10px 5px;
}

table.form th.rowHeader {
  background-color: #f7efdc;
}

table.form .oddRow {
  background-color: #ffffff;
}

table.form .evenRow {
  background-color: #ffffff;
}

/* END OF TABLES */


/*  BUTTONS*/

/* MOD DATE 13-DICIEMBRE-2021 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) - Sobreescribe con important el color para botón de salir (afecta a otros botones) */
input[type="submit"],
a.button,
.form-button>input,
div.list-button-bar-bottom>input.button {
  border: 1px solid #616161;
  border-radius: 0.35em;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  height: 38px;
  line-height: 2.8em;
  min-width: 4.5em;
  padding: 0px 1em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

input[type="submit"]:not([name="formbutton:cancel"]),
.form-button>input[type="submit"]:not([name="formbutton:cancel"]),
div.list-button-bar-bottom>input[type="submit"].button {
  background-color: #2962FF;
  border: solid 1px #2962cc;
  color: #fff;
  font-weight: 600;
}

.button:hover,
.form-button>input:hover {
  background-color: #F5F5F5;
  text-decoration: none;
}

input[type="submit"]:not([name="formbutton:cancel"]):hover,
.form-button>input[type="submit"]:not([name="formbutton:cancel"]):hover {
  background-color: #2962cc;
  text-decoration: none;
  border: solid 1px #2962cc;
  color: #fff;
  font-weight: 600;
}

input[type="number"] {
  border: 1px solid #CCC;
  padding: 0.2em 0.5em;
  border-radius: 5px;
}

input[type="number"]:not(.mat-mdc-input-element):focus-visible {
  border: 1px solid #2962ff;
}

input[type="submit"][name="formbutton:cancel"] {
  background-color: #FFF;
}

input[type="submit"][name="formbutton:cancel"]:hover {
  background-color: #F5F5F5;
}



/* a.button:active {
  background-color: rgb(57, 98, 246);
  color: #FFFFFF;
  border: solid 1px rgb(57, 98, 246);
} */

/*
.button {
  text-decoration: underline;
  padding-right: 5px;
  border: 1px solid #CECCCC;
} */

.admin-button-bar {
  float: right;
  display: none;
}

.admin-button-bar a.button {
  font-size: .85em;
  border: double 3px #000;
  background-color: #ffffff;
  text-align: center;
  padding: 4px 8px;
  color: #000;
  text-decoration: none;
}

/* END OF BUTTONS */


/*
 * LEFT PANEL
 */
div[data-role="left_panel"] {
  background: rgba(0, 0, 0, 0);
  height: 100%;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 20;
}

div[data-role="left_panel"]>div {
  background: #FFF;
  height: 100%;
  width: 80%;
  max-width: 280px;

}

div[data-role="left_panel"]>div>ul.drop {
  color: #CCC;
  margin: 0;
  padding: 0;
  width: 100%;
}

div[data-role="left_panel"]>div>ul.drop>li {
  border-bottom: 1px solid #eaecee;
  cursor: pointer;
  display: block;
  min-height: 35px;
  padding: 0.5em 0.5em;
  width: 100%;
}

div[data-role="left_panel"]>div>ul.drop>li:hover {
  background: #828282;
}

div[data-role="left_panel"]>div>ul.drop>li>i {
  margin-right: 0.5em;
}



.vpanel {
  transform: translate(-100%, 0) translate(+5px, 0);
  -webkit-transform: translate(-100%, 0) translate(+5px, 0);
  -o-transform: translate(-100%, 0) translate(+5px, 0);
  -ms-transform: translate(-100%, 0) translate(+5px, 0);
  -moz-transform: translate(-100%, 0) translate(+5px, 0);
}

.open_vpanel {
  background: rgba(0, 0, 0, 0.5) !important;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
}

.vpanel_transition {
  -webkit-transition-duration: 50ms;
  transition-duration: 50ms;
}

/* VV - MENU-LEFT:
 *  Es el mismo menu anterior pero con caracteristicas responsive
 * */
@media (max-width: 300px) {
  div#menu-left header {
    display: block !important;
    /* padding-left: 0px !important; */
  }
}

div#menu-left header {
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 15px;
  border-bottom: 1px solid #dbdbdb;
}

div#menu-left header img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  display: inline-block;
  padding: 0.5em;
  vertical-align: top;
  width: 60px;
  height: 60px;
  object-fit: cover;
}

div#menu-left header i {
  display: inline-block;
  vertical-align: top;
  font-size: 50px;
}

div#menu-left header div {
  margin-left: 10px;
}

div#menu-left header h1 {
  color: #212121;
  font-weight: 200;
  display: block;
  margin: 0.5em 0;
  font-size: 1.2em;
}

div#menu-left header h2 {
  color: #212121;
  font-weight: 200;
  display: inline-block;
  font-size: 1.1em;
  margin-top: 0px;
}

div#menu-left div nav {
  width: 100%;
}

div#menu-left div nav li {
  background: #ffffff;
  display: block;
  margin: 0;
  min-height: 3.2em;
  width: 100%;
}

div#menu-left div nav li a {
  color: #212121;
  display: block;
  font-weight: 200;
  font-size: 1.3em;
  height: 100%;
  padding: 0.5em 1em;
}

div#menu-left div nav li.main_menu_td_active {
  background: #e9f0fd;
}

div#menu-left div nav li.main_menu_td_active a {
  color: #2962ff;
}

div#menu-left div nav li a:hover,
div#menu-left div nav li:hover {
  background: #e9f0fd;
  color: #2962ff;
}

div#menu-left #left-menu-footer {
  display: flex;
  padding: 0 17px;
  position: absolute;
  bottom: 15px;
}

.block-marker {
  display: none;
}

/* ----------------------------- */
/* END CONTENT */
/* ----------------------------- */
/* --------------------------------------------------------------------------------------- */
/* ----------------------------- */



/* ----------------------------- */
/* ------FAQ Styles----------------------- */
/* ----------------------------- */
/* --MOD DATE 05-OCTUBRE-2021 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) - estilos para paquete FAQ, se usa para alinear el ::marker de la lista, ya sea número o símbolo de viñeta con el texto, ruta de la clase en FAQ: --------------------------- */
/* /faq/www/one-faq.adp */
.FAQ_one_faq_adp_li a {
  display: inline-block;
  vertical-align: text-top;
}

/* --MOD DATE 05-OCTUBRE-2021 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) - estilos para paquete FAQ, se usa para alinear el ::marker de la lista, ya sea número o símbolo de viñeta con el texto, ruta de la clase en FAQ: --------------------------- */
/* /faq/www/one-faq.adp */
.FAQ_one_faq_adp_li p {
  display: inline-block;
  vertical-align: text-top;
}


/* ----------------------------- */
/* ------END OF FAQ Styles----------------------- */
/* ----------------------------- */
/* ----------------------------- */

/* ----------------------------- */
/* ------Forums Styles----------------------- */
/* ----------------------------- */
/* --MOD DATE 15-OCTUBRE-2021 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) - estilos para paquete Forums, se usa para alinear la etiqueta título cuando aparece el input de autocorrección, ruta del form en Forums: --------------------------- */
/* /forums/lib/message/post.tcl  (advertencia: esto va a funcionar siempre y cuando exista un único formulario con ID: message,
:nth-child(11) se refiere al hijo con la clase  form-item-wrapper que se quiere modificar en específco, si se añade o elimina algun elemento form-item-wrapper
probablemente este número 11 va a cambiar, cambiar el background color para saber cual es) */
#message div.form-item-wrapper:nth-child(11) {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

/*ruta: /forums/lib/message/row.adp  evita que el contendor de opciones de moderación se incruste en el siguiente card del mensaje, así se pueden ver todas las
opciones sin que se escondan bajo el siguiente mensaje del foro */
.package_forums_row_adp_options_container {
  z-index: 1;
}

/*ruta: /forums/lib/message/thread-chunk.adp (hay muchos #forum-thread) separa todos los mensajes del foro, para que al abrir el menú no se pegue tanto
al botón de menú kebab del siguiente mensaje del foro, causado por el z-index arriba de este comentario */
#forum-thread>div {
  margin-bottom: 50px;
}


/* ----------------------------- */
/* ------END OF Forums Styles----------------------- */
/* ----------------------------- */
/* ----------------------------- */


/* ----------------------------- */
/* ------acs-subsite Styles----------------------- */
/* ----------------------------- */
/*ruta:/acs-subsite/www/register/display-message.adp estilos para nueva pantalla de cambio de contraseña existoso,
todo dentro de la etiqueta con id acs-subsite-successful-password-change*/
#acs-subsite-successful-password-change .flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#acs-subsite-successful-password-change .flex-container .image-container {
  display: flex;
}

#acs-subsite-successful-password-change .flex-container .text-container {
  display: flex;
}

#acs-subsite-successful-password-change .flex-container .button-container {
  margin-top: 30px;
  display: flex;
}

#acs-subsite-successful-password-change .flex-container .image-container .image {
  width: 172px;
  height: 250px;
  object-fit: contain;
  display: block;
}

/* --MOD DATE 22-OCTUBRE-2021 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) */
/*ruta:/acs-subsite/www/register/recover-password.adp estilos para centrar formulario y texto externo,
todo dentro de la etiqueta con id acs-subsite-recover-password-form*/
#acs-subsite-recover-password-form {
  min-width: 600px;
  max-width: 600px;
  margin: 0 auto;
}

/*ruta:/acs-subsite/www/register/recover-password.adp estilos para mostrar instrucciones al enviar correo para recuperar contraseña,
todo dentro de la etiqueta con id acs-subsite-check-inbox-instructions */

#acs-subsite-check-inbox-instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#acs-subsite-check-inbox-instructions .image-container {
  display: flex
}

#acs-subsite-check-inbox-instructions .check-inbox-bold-text {
  display: flex;
  font-weight: bold;
  font-size: 18px;
  color: #212121;
  text-align: center;
  margin-bottom: 20px;
}

#acs-subsite-check-inbox-instructions .check-inbox-text {
  display: flex;
  text-align: center;
  color: #212121;
  max-width: 519px;

}

#acs-subsite-check-inbox-instructions .button-container {
  display: flex;
  margin-top: 20px;
}

#acs-subsite-check-inbox-instructions .image-container .check-inbox-image {
  width: 172px;
  height: 250px;
  object-fit: contain;
  display: block;
}

/*ruta:/acs-subsite/www/register/recover-password.adp estilos para mostrar error de correo desconocido al recuperar contraseña,
todo dentro de la etiqueta con id acs-subsite-unknown-email */
#acs-subsite-unknown-email {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#acs-subsite-unknown-email .image-container {
  display: flex
}

#acs-subsite-unknown-email .text-container {
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 20px;
  color: #212121;
}

#acs-subsite-unknown-email .text-description {
  display: flex;
  text-align: center;
  color: #212121;
  max-width: 519px;
}


#acs-subsite-unknown-email .button-container {
  display: flex;
  margin-top: 20px;
}

#acs-subsite-unknown-email .unknown-email-image {
  width: 172px;
  height: 250px;
  object-fit: contain;
  display: block;
}

/* ----------------------------- */
/* ------END OF acs-subsite Styles----------------------- */
/* ----------------------------- */
/* ----------------------------- */



/* MOD DATE 15-NOVIEMBRE-2021 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) - estilos del ícono de avisos*/
#lrn-master-announcement-container {
  /* visibility: hidden; */
  cursor: pointer;
}

#lrn-master-announcement-container .announcement-icon {
  width: 36px;
  height: 36px;
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 999;
}

#lrn-master-announcement-container .material-icons {
  font-size: 36px;
  color: #FFFFFF;
  border-radius: 50%;

  z-index: 1000000;
  position: absolute;
}

/* MOD DATE 23-FEBRERO-2023 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) - removed background color, now handled by lrn-master tcl and adp (lib)*/
#lrn-master-announcement-container .background {
  width: 28px;
  height: 28px;
  position: fixed;
  bottom: 4px;
  right: 4px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.32);
}

#announcement-panel {
  background: #FFF;
  border-radius: 3px;
  -webkit-border-radius: 7px;
  color: #212121;
  cursor: default;
  display: none;
  min-height: 130px;
  position: absolute;
  -webkit-box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.3);
  z-index: 50;
  max-height: 408px;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 15px;
  right: 65px;
  padding: 15px;
}

.arrow_box_downL {
  /* comment if unread notifications point is not located where it has to be */
  /* position: relative; */
  background: #FFFFFF;
}

.arrow_box_downL:after,
.arrow_box_downL:before {
  bottom: 8px;
  right: -20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  transform: rotate(88deg);
}

.arrow_box_downL:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #FFFFFF;
  border-width: 10px;
  margin-left: -10px;
}

.arrow_box_downL:before {
  border-width: 11px;
  margin-left: -11px;
}

.announcement-flex-container {
  display: flex;
  margin-bottom: 10px;
  align-content: space-evenly;
  height: 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.announcement-flex-container div {
  display: flex;
}

.announcement-flex-container #close-announcement-panel-icon {
  cursor: pointer;
}

.check-container {
  display: flex;
  min-height: 40px;
}

.check-container #announcement-panel-checkbox {
  margin-top: 0px;
  margin-right: 3px;
  align-self: end;
  -webkit-align-self: flex-end;
  margin-bottom: 5px;
}

.check-container label {
  margin-bottom: -2px;
  align-self: end;
  -webkit-align-self: flex-end;
  padding-bottom: 3px;
}

#divBannerMessage {
  max-height: 70px;
  overflow-y: auto;
  max-width: 96%;
  word-wrap: break-word;
  mix-blend-mode: multiply;
  background-color: #ffffff !important;
  background:
    /* Shadow covers */
    linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) 0 100%,
    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background:
    /* Shadow covers */
    linear-gradient(#ffffff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0), #ffffff 70%) 0 100%,
    /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn’t support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}

.announcement-title-text {
  margin-left: 10px;
  font-weight: bold;
  color: #616161;
  font-size: 15px;
  display: flex;
  align-self: center;
}

.announcement-panel-icon {
  color: #616161;
}

.announcement-panel-text {
  color: #616161;
  font-size: 13px;
}

.red-dot {
  position: absolute;
  background-color: #FF5252;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  bottom: 22px;
  right: 3px;
  z-index: 9999999;
  border: 2px solid #FFFFFF;
  pointer-events: none;
  display: none;
}

.announcement-panel-text a {
  font-size: 13px;
}

.announcement-img {
  width: 100%;
  display: flex;
  object-fit: cover;
  overflow: hidden;
  margin: 10px 0px;
  flex: 1 0 auto;
  max-height: 175px;
}

/* MOD DATE 15-DICIEMBRE-2021 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) - estilos para titulo y botón */
.announcement-panel-footer {
  display: flex;
  justify-content: space-between;
}

.announcement-button-container {
  display: flex;
}

#announcement-panel-button {
  border-radius: 16px;
  background-color: #2962FF;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  padding: 7px 13px;
  align-self: end;
  -webkit-align-self: flex-end;
  margin-left: auto;
  margin-bottom: -5px;
}

#announcement-title {
  font-size: 15px;
  font-weight: bold;
  color: #212121;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 25px;
}

/* MOD DATE 05-MAYO-2022 / KRAISTON RAMIREZ (@kraiston1298@gmail.com / kraramirez@itcr.ac.cr) - estilos para fecha de publicación del aviso */
#announcement-date {
  color: #8C8C8C;
  margin-left: 3px;
  font-size: 12px;
}

/* END OF estilos del ícono de avisos  */


/*
 * MEDIA QUERIES
 * RESPONSIVE
*/



/* DISPOSITIVOS MENORES A 320px */
@media (max-width: 320px) {

  /* .main-content-padding {
    padding: 0.5em;
    width: calc(100% - 1em);
  } */

  #inner-wrapper:not(.home) #main #main-content,
  #inner-wrapper.home #main #main-content,
  #inner-wrapper:not(.home) #main #sidebar-1,
  #inner-wrapper.home #main #sidebar-1 {
    max-width: unset;
    flex-grow: 1;
    width: 100%;
  }

  a.button {
    width: 90%;
  }

  header#header-td {
    height: 50px;
  }

  /* #notifications-grid  {
    right: 7px;
    top: 50px;
    width: 250px;
  }

 div#platform_user_apps {
    right: 33px;
    top: 50px;
    width: 200px;
  } */
  header#header-td section#header-navigation #platform_user_notifications,
  header#header-td section#header-navigation #platform_user_profile,
  header#header-td section#header-navigation #platform_user_apps,
  header#header-td section#header-navigation #help_tools {
    display: none;
  }

  section#content-wrapper section#main-menu-td {
    display: none;
  }

  section#sub-navigation ul:first-of-type li.sub-navigation-active {
    background: #666 url("/resources/theme-td/images/global/submenu.png") no-repeat right center;
    color: #FFF;
    display: block;
    width: 100%;
  }

  section#sub-navigation ul#selectable_subnavbar {
    display: block;
    /*height: 0px;*/
    overflow: hidden;
    width: 100%;
  }

  section#sub-navigation ul#selectable_subnavbar li {
    display: block;
  }

  /* section#sub-navigation ul#selectable_subnavbar li.sub-navigation-active {
    display: none;
  } */

  .portlet {
    margin: 0;
    padding: 0;
  }

  #sidebar-1-sim,
  #main-content-sim {
    width: 100%;
  }


  #main {
    padding: 0 !important;
  }
}

/* DISPOSITIVOS ENTRE 320px y 480px */
@media (min-width: 320px) and (max-width: 480px) {
  body {
    padding-top: 50px;
  }

  #main {
    padding: 0px;
  }

  #inner-wrapper:not(.home) #main #main-content,
  #inner-wrapper.home #main #main-content,
  #inner-wrapper:not(.home) #main #sidebar-1,
  #inner-wrapper.home #main #sidebar-1 {
    max-width: unset;
    flex-grow: 1;
    width: 100%;
  }

  /* section#skiptocontent {
    display: none;
  } */

  /* .main-content-padding {
    padding: 0.5em;
    width: calc(100% - 1em);
  } */

  a.button {
    width: 90%;
  }

  header#header-td {
    background: #FFF;
    border-bottom: 1px solid #CCC;
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 800;
  }

  section#breadtime section#server-time {
    display: block;
    text-align: right;
    margin: 3px 15px;
    width: calc(100% - 36px);
  }

  #notifications-grid {
    right: -79px;
    top: -5px;
    width: 90%;
  }

  div#platform_apps_panel {
    right: 29px;
    top: 45px;
    width: 250px;
  }

  .arrow_box_fixed:after,
  .arrow_box_fixed:before {
    top: 32px;
    right: 58px;
  }

  /* header#header-td section#header-navigation #platform_user_notifications, */
  header#header-td section#header-navigation #platform_user_profile,
  /* header#header-td section#header-navigation #platform_user_apps, */
  header#header-td section#header-navigation #help_tools {
    display: none;
  }

  section#content-wrapper section#main-menu-td {
    display: none;
  }

  /*
  # VV - Se quita funcionalidad show_hide_sidebar debido a que elimina funcionalidad click.
  section#sub-navigation ul:first-of-type li:not(.sub-navigation-active) {
    display: none;
  }
  section#sub-navigation ul:first-of-type li.sub-navigation-active {
    background: #666 url("/resources/theme-td/images/global/submenu.png") no-repeat right center;
    color: #FFF;
    display: block;
    width: 100%;
  }
  */
  section#sub-navigation ul#selectable_subnavbar {
    display: block;
    /*height: 0px;*/
    overflow: hidden;
    width: 100%;
  }

  section#sub-navigation ul#selectable_subnavbar li {
    display: block;
  }

  /* section#sub-navigation ul#selectable_subnavbar li.sub-navigation-active {
    display: none;
  } */

  .portlet {
    margin: 0;
    padding: 0;
  }

  #sidebar-1-sim,
  #main-content-sim {
    width: 100%;
  }

  #menu-left {
    top: 50px;
    height: calc(100% - 50px);
  }

  /*ruta:/acs-subsite/www/register/recover-password.adp estilos para centrar formulario y texto externo,
  todo dentro de la etiqueta con id acs-subsite-recover-password-form*/
  #acs-subsite-recover-password-form {
    min-width: 260px;
    max-width: 260px;
    margin-left: 10px;
  }

  #announcement-panel {
    max-width: 280px;
    max-height: 500px;
  }

  .announcement-panel-footer {
    flex-direction: column;
  }

  #announcement-panel-button {
    border-radius: 16px;
    background-color: #2962FF;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    padding: 7px 13px;
    align-self: flex-start;
    -webkit-align-self: flex-start;
    margin-left: 0px;
    margin-bottom: -5px;
  }

  .announcement-button-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 5px;
  }

}

@media (min-width: 480px) and (max-width: 768px) {

  #inner-wrapper:not(.home) #main #main-content,
  #inner-wrapper.home #main #main-content,
  #inner-wrapper:not(.home) #main #sidebar-1,
  #inner-wrapper.home #main #sidebar-1 {
    max-width: unset;
    flex-grow: 1;
    width: 100%;
  }
}

/* DISPOSITIVOS ENTRE 480px y 768px */
@media (min-width: 480px) and (max-width: 979px) {
  section#skiptocontent {
    display: none;
  }

  #main {
    padding: 0px 15px;
  }

  #main #main-content {
    max-width: unset;
    flex-grow: 2;
  }

  #main #sidebar-1 {
    max-width: unset;
    flex-grow: 1;

  }

  #notifications-grid {
    right: -77px;
    top: 0px;
  }

  div#platform_apps_panel {
    right: 35px;
    top: 48px;
  }

  .arrow_box_fixed:after,
  .arrow_box_fixed:before {
    right: 58px;
  }

  /* header#header-td section#header-navigation #platform_user_notifications, */
  header#header-td section#header-navigation #platform_user_profile,
  /* header#header-td section#header-navigation #platform_user_apps, */
  header#header-td section#header-navigation #help_tools {
    display: none;
  }


  section#breadtime section#server-time {
    display: block;
    text-align: right;
    margin: 3px 15px;
    width: calc(100% - 36px);
  }

  section#breadcrumbs {
    margin-left: 17px;
  }

  section#content-wrapper section#main-menu-td {
    display: none;
  }

  .portlet {
    margin: 0;
    padding: 0;
  }

  #sidebar-1-sim,
  #main-content-sim {
    width: 100%;
  }

  header#header-td section#header-navigation ul {
    margin: 0;
  }

  section#sub-navigation ul#selectable_subnavbar {
    white-space: nowrap;
  }
}

@media (min-width: 980px) {
  section#content-wrapper section#main-menu-td {
    display: inline-block;
  }

  /* header#header-td section#logo {
    margin: 0 60px 0 28px;
    width: auto;
  } */

  section#main-menu-td {
    display: inline-block;
  }

  /* header#header-td section#header-navigation ul {
    margin: 0;
  } */

  div#menu-left {
    display: none;
  }

  div#td_menu_responsive_toggle {
    display: none;
  }

  section#breadcrumbs {
    margin-left: 20px;
  }

  section#sub-navigation ul#selectable_subnavbar {
    white-space: nowrap;
  }
}

@media (min-width: 980px) and (max-width: 1100px) {

  /* header#header-td section#header-navigation ul li#help_tools {
    display: none;
  } */
  .notifications-grid {
    margin: 49px 97px 0 0 !important;
  }

  @media (min-width: 1100px) {
    .notifications-grid {
      margin: 49px 97px 0 0 !important;
      box-shadow: 0 0 22px 0 rgb(0 0 0 / 30%);
    }
  }
}

.notifications-grid .notifications-container .notifications-categories[role="tablist"] .notification-category[role="tab"] {
  font-size: 8px !important;
}

.notifications-grid header .options i {
  font-size: 20px !important;
}

.blockClock {
  width: 100px;
  height: 100px;
  background: grey;
}

.skeleton {
  opacity: .7;
  animation: skeleton-loading 0.8s linear infinite alternate;
}

.skeleton-text {
  width: 70px;
  height: 2rem;
  border-radius: 1rem;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(201, 22%, 85%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.checkpointIcon {
  font-size: 1em !important;
}

/* modal de sesión a punto de expirar */

.timeout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 100%;
  border: 3px solid #2662ff;
  /* toggle display flex / none from session-timeout.js file */
  display: none;
  pointer-events: auto;
  align-content: center;
  align-items: center;
  justify-content: center;
  background-color: #ffffff4d;
  z-index: 9999999999;
}

.timeout-modal {
  width: 25%;
  max-height: 500px;
  min-width: 340px;
  display: flex;
  flex-direction: column;
  padding: 25px 24px;
  box-shadow: 0px 0px 9px 0px #00000052;
  background-color: #ffffff;
  border-radius: 16px;
  font-size: 14px;
}

.timeout-modal-header {
  display: flex;
  justify-content: space-between;
}

.timeout-header-text {
  font-size: 24px;
  font-weight: bold;
  color: #404040;
}

.timeout-close-button {
  border-radius: 50%;
  padding: 10px;
  height: 48px;
  width: 48px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -38%;
  left: 38%;

  &:hover {
    background-color: #e9f0fd;
  }
}

.timeout-modal-content {
  width: 80%;
}

.blue-square-text {
  background-color: #e9f0fd;
  margin: 0px 10px 30px;
  padding: 20px 30px;
  width: 114%;
}

.timeout-modal-buttons {
  display: flex;
  justify-content: center;
}

.timeout-modal-button {
  padding: 10px 30px;
  color: white;
  background-color: #2662ff;
  border-radius: 50px;
  font-size: 14px;
  font-weight: bold;
}

/* modal de sesión a punto de expirar RESPONSIVE */

@media (max-width: 1499px) {

  .timeout-modal {
    max-height: 550px;
  }

  .timeout-close-button {
    top: -34%;
  }
}