.block-infographic-request {
  width: 100%;
  text-align: center;
}

.block-infographic-request img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.bar-menu-app {
  width: 100%;
  background-color: var(--bar-menu-app-bg-color);
}

.menu-app {
  width: var(--width-container-sh);
  margin-left: auto;
  margin-right: auto;
  display: table;
  position: relative;
  padding: 0 1px;
  text-align: left;
}

div.btn-radio-menu-app,
input[type="radio"] + label.btn-radio-menu-app {
  cursor: pointer;
  display: inline-block;
  float: left;
  position: relative;
  background-color: var(--bar-menu-app-bg-color);
  user-select: none;
  width: 84px;
  text-align: center;
}

input[type="radio"] + label.btn-radio-menu-app > div {
  height: auto;
  background: none;
  margin: 0;
}

.btn-radio-menu-app > .icon-menu-app,
input[type="radio"] + label.btn-radio-menu-app > .icon-menu-app {
  font-size: 24px;
  color: var(--btn-radio-menu-app-icon-color);
  height: 57px;
  line-height: 57px;
}

input[type="radio"] + label.btn-radio-menu-app > .icon-menu-app {
  margin-top: 3px;
}

.btn-radio-menu-app > .text-menu-app,
input[type="radio"] + label.btn-radio-menu-app > .text-menu-app {
  color: var(--btn-radio-menu-app-text-color);
  font-size: 12px;
  padding-bottom: 10px;
  height: auto;
  background: none;
}

.icon-menu-app > span {
  position: relative;
  display: inline-block;
}

input[type="radio"]:checked + .btn-radio-menu-app > .icon-menu-app {
  color: var(--color-maroon-400);
}

input[type="radio"]:checked + .btn-radio-menu-app,
div.btn-radio-menu-app:hover,
input[type="radio"] + label.btn-radio-menu-app:hover {
  background-color: var(--btn-radio-menu-app-sel-bg-color);
}

.bar-menu-app .block-link {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.bar-menu-app .block-link a,
.bar-menu-app .block-link .a {
  color: var(--a-menu-app-color);
}

.bar-menu-app .block-link a:hover,
.bar-menu-app .block-link .a:hover {
  color: var(--a-menu-app-hov-color);
}

.bar-menu-app .block-link .profile {
  text-align: right;
  padding-top: 10px;
}

.bar-menu-app .logo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 70px;
  padding-bottom: 4px;
}

.bar-menu-app .logo img {
  height: 40px;
}

/* .bar-menu-app .logo a {
  transition: border-radius 0.3s ease;
  overflow: hidden;
}

.bar-menu-app .logo a:hover {
  border-radius: 22px;
} */

.menu-orientation {
  padding: 6px;
  position: absolute;
  z-index: 2;
  background-color: var(--menu-datalist-bg-color);
  box-shadow: 0 2px 7px var(--menu-datalist-shadow-color);
}

#menu-orientation-rm,
#menu-orientation-adj-rm {
  left: calc(332px - 57px);
}

#menu-orientation-area-rm,
#menu-orientation-area-adj-rm {
  margin-top: 10px;
}

.menu-orientation td {
  height: 25px;
  border: 1px solid var(--menu-datalist-bg-color);
}

.menu-orientation td[id^="orientation-"] {
  cursor: pointer;
}

.menu-orientation td div {
  width: 100%;
  height: 100%;
  user-select: none;
  background-color: var(--menu-orientation-bg-color);
  color: var(--menu-orientation-bg-color);
  font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
}

.menu-orientation td[id^="orientation-top-"] div,
.menu-orientation td[id^="orientation-bottom-"] div {
  background-color: var(--menu-datalist-bg-color);
  height: 65%;
}

.menu-orientation td[id^="orientation-90-"] div,
.menu-orientation td[id^="orientation-270-"] div {
  color: var(--service-text-color);
}

[id^="orientation-45-"] div {
  clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 50%, 50% 0%);
}

[id^="orientation-135-"] div {
  clip-path: polygon(50% 0%, 0% 50%, 0% 100%, 100% 100%, 100% 0%);
}

[id^="orientation-225-"] div {
  clip-path: polygon(0% 0%, 0% 50%, 50% 100%, 100% 100%, 100% 0%);
}

[id^="orientation-315-"] div {
  clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 100% 50%, 100% 0%);
}

.menu-orientation td:hover div {
  background-color: var(--menu-orientation-hov-bg-color);
}

.menu-orientation td[id^="orientation-top-"]:hover div,
.menu-orientation td[id^="orientation-bottom-"]:hover div {
  background-color: var(--menu-orientation-hor-hov-bg-color);
}

.menu-orientation td[id^="orientation-90-"]:hover div,
.menu-orientation td[id^="orientation-270-"]:hover div {
  color: var(--menu-orientation-hov-text-color);
}

.menu-orientation td div.menu-orientation-selected {
  background-color: var(--menu-orientation-sel-bg-color);
}

.menu-orientation td[id^="orientation-90-"] div.menu-orientation-selected,
.menu-orientation td[id^="orientation-270-"] div.menu-orientation-selected {
  color: var(--menu-orientation-sel-text-color);
}

.bar-orientation-plan,
.orientation-plan {
  display: inline-block;
  background-color: var(--radio-tile-bg-color);
  cursor: pointer;
}

.orientation-plan {
  cursor: default;
}

.bar-orientation-plan:hover {
  background-color: var(--radio-tile-hov-bg-color);
}

.bar-orientation-plan td, 
.orientation-plan td {
  width: 27px;
  height: 27px;
  user-select: none;
  position: relative;
}

.bar-orientation-plan td > img,
.orientation-plan td > img {
  width: 100%;
  height: 100%;
  position: relative;
}

.bar-orientation-plan td > .icon-sh-compass {
  position: absolute;
  color: var(--color-maroon-400);
  font-size: 27px;
  top: 0px;
}

div.mark-envelope-room {
  margin: 0px 10px 2px 0px;
}

.menu-datalist li:hover.menu-datalist-selected div.mark-envelope-room {
  border-color: var(--color-white);
} 

.menu-datalist li:hover div.mark-envelope-room {
  border-color: var(--color-gray-300);
}