html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Helvetica', Arial, sans-serif;
  background-color: var(--tertiaryBackgroundColor);
  color: var(--primaryTextColor);
  height: 100%;
  margin: 0;
  padding: 0;
  zoom: 100% !important;
}

h4 {
  margin-block-end: 0.33em;
  color: var(--primaryTextColor);
}

.menu_icons {
  color: var(--sliderColor);
}

.leaflet-tile-container {
  pointer-events: auto;
}

.container-fluid {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.defaultTheme {
  --primaryTextColor: #000;
  --secondaryTextColor: #808394;
  --tertiaryTextColor: #fff;

  --primaryTextShadow: 0 1px #fff;

  --primaryBackgroundColor: #fdfdfd;
  --secondaryBackgroundColor: #808394;
  --tertiaryBackgroundColor: #000;
  --quaternaryBackgroundColor: #F0F0F0;

  --primaryBorderColor: #808394 #808394 #808394;
  --secondaryBorderColor: solid #d3d3d3 0.5px;
  --tertiaryBorderColor: #cbcfe2 #c8cee7 #c4c7d7;

  --primaryHRColor: #d3d3d3;

  --scrollBarTrack: #f1f1f1;
  --scrollBarThumb: #888;
  --scrollBarThumbHover: #555;

  --sliderColor: #2196F3;

  --buttonColor: #b2b2b2;
  --buttonMainColor: #676767;

  --modelSentTex: #4CAF50;
}

.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.login_screen{
  display:block;
  background-color: var(--secondaryBackgroundColor);
  opacity: 1;
  height: 100%;
  width: 100%;
  text-align: center;
  z-index: 2000;
}

.login_screen .login_box {
  position: relative;
  display: inline-block;
  margin-top:20%;
  padding-top:3px;
  padding-bottom:5px;
  padding-left: 5px;
  padding-right:5px;
  pointer-events: auto;
  overflow:hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  border: none;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  border-left:var(--secondaryBorderColor);
  border-right:var(--secondaryBorderColor);
  border-top:var(--secondaryBorderColor);
  border-bottom:var(--secondaryBorderColor);
  background-color:var(--primaryBackgroundColor);
  z-index: 2;
}

.login_screen .login_box button {
  margin:0;
  background-color: var(--primaryBackgroundColor);
  color:var(--secondaryBorderColor);
  width: 100%;
  font-size: 15px;
  padding-top:12px;
  padding-bottom: 10px;
  margin-left: -0px;
  border: groove;
  cursor: pointer;
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  border-left:var(--secondaryBorderColor);
  border-right:var(--secondaryBorderColor);
  border-top:var(--secondaryBorderColor);
  border-bottom:var(--secondaryBorderColor);
  background-color:var(--primaryBackgroundColor);
}

.login_screen .login_box input {
  width: 69%;
  min-width: 200px;
  border: none;
  font-size: 15px;
  background-color: var(--primaryBackgroundColor);
  color: var(--primaryTextColor);
  padding-top:12px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right:6px;
}

/* .notifyjs-corner {
  z-index: 2001 !important;
} */

.map-box {
  display: flex;
  flex: 1;
}

.notifyjs-bootstrap-error{
  position: fixed;
}

.map-box .map_dialog_box {
  font-size: 10px;
  width: 50%;
  height: 90%;
  border: none;
  outline: none;
  font-size: 12px;
  color: var(--secondaryTextColor);
  text-align: center;
  pointer-events: auto;
  overflow: hidden;
}

.leaflet-popup-content {
  width: 50% !important;
}

.form_class {
  margin: 5px;
  border-radius: 5px;
  width: 250px;
  padding: 0px;
  z-index: 1002;
}

.notifyjs-bootstrap-base notifyjs-bootstrap-error{
  z-index: 1003 !important;
}

.input_text {
  width: 100%;
  padding: 8px 15px;
  display: inline-block;
  border: 1px solid #ccc;
  /* border-radius: 4px; */
  box-sizing: border-box;
}

.custom_link {
  width: 240px;
  padding: 5px 10px;
  margin: 2px -5px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=button] {
  /* width: 100px; */
  background-color: var(--buttonMainColor);
  color: white;
  padding: 10px 45px;
  margin: 8px 0;
  border: none;
  border-radius: 1px;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: #45a049;
}


.form_textarea {
  margin-top: 5px;
  padding: 5px;
  width: 82%;
  resize: none;
  border: 1px solid #ccc !important;
  /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); */
  /* border: solid 1px; */
  /* border-radius: 0.5em 0.5em 0.5em 0.5em; */
  border-color: var(--secondaryBorderColor);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.checkbox_area {
  border: 1px solid #ccc !important;
  padding: 10px;
  border-radius: 16px;
}

.image_uploader {
  margin-top: 10px;
  margin-right: 0;
  margin-bottom: 20px;
  margin-left: 0;
  border: 1px solid #ccc !important;
  padding: 10px;
  /* border-radius: 16px; */
  text-align: left;
}

.image_uploader input[type="file" i]{
  margin: 0;
  background-color: var(--primaryBackgroundColor);
  color: var(--buttonColor);
  border: none;
  cursor: pointer;
  outline: none;
}

ul {
  padding: 0;
  list-style-type: none;
}


/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Search Side Panel CSS */
.sidenav {
  height: 100%;
  width: 385.5px;
  position: fixed;
  z-index: 1002;
  top: 0;
  left: 0;
  transition: 0.1s;
  padding-top: 0px;
  background: transparent;
  pointer-events: none;
}

.sidenav .logo_banner {
  margin:0;
  width:370px;
  height: 22px;
  max-width: 370px !important;
  max-height: 422px !important;
  border-radius: 0;
}

.sidenav img{
  max-width: 305px !important;
  max-height: 400px !important;
  border-radius: 5px;
}

.sidenav .btn_close {
  /* display: none; */
  width: 15.5px;
  height: 46.33px;
  position: absolute;
  top: 33px;
  right: 0px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.sidenav .btn_open {
  /* display: none; */
  width: 15.5px;
  height: 46.33px;
  position: absolute;
  top: 33px;
  right: 0px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.sidenav .btn_close img{
  border-radius: 0;
}

.sidenav .btn_open img{
  border-radius: 0;
}

.sidenav .content {
  width: 370px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  margin-top: -4px;
  background-color: var(--primaryBackgroundColor);
  /* background:transparent; */
  /* border-right:solid #d3d3d3 1px; */
  /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); */
  pointer-events: none;
}

/* Search Search Panel CSS */
.sidenav .content div.main_panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 350px;
  height: -webkit-fill-available;
  pointer-events: auto;
  margin-top: 57px;
  /* margin-left: 5px; */
  margin: 33px 10px 10px 10px;
  z-index: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); */
  border: none;
  border: var(--secondaryBorderColor);
  /* border-radius: 0.5em 0.5em 0.5em 0.5em; */
  /* border-left: var(--secondaryBorderColor); */
  /* border-right: var(--secondaryBorderColor); */
  /* border-top: var(--secondaryBorderColor); */
  /* border-bottom: var(--secondaryBorderColor); */
  background-color: var(--primaryBackgroundColor);
}

.sidenav .content .main_panel .input_text {
  width: 76%;
  padding: 8px 15px;
  display: inline-block;
  border: 1px solid #ccc;
  /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); */
  border: none;
  /* border-radius: 0.5em 0.5em 0.5em 0.5em; */
  border-left: var(--secondaryBorderColor);
  border-right: var(--secondaryBorderColor);
  border-top: var(--secondaryBorderColor);
  border-bottom: var(--secondaryBorderColor);
  background-color: var(--primaryBackgroundColor);
}

.sidenav .content .main_panel .user_details {
  position: relative;
  display: inline-block;
  width: 325px;
  background: var(--quaternaryBackgroundColor);
  /* min-width: 329px; */
  padding: 25px 25px 25px 0px;
  pointer-events: auto;
  overflow: hidden;
  border: none;
  text-align: right;
  z-index: 2;
}

#addr_button {
  cursor: pointer;
  display: visible;
}

#place_button {
  cursor: pointer;
  display: visible;
}

#road_button {
  cursor: pointer;
  display: visible;
}

#info_button {
  cursor: pointer;
  display: visible;
}

#general_button {
  cursor: pointer;
  display: visible;
}

.footer_submit {
  position: sticky;
  width: 100%;
  height: 80px;
  bottom: -10px;
  background: white;
  display: none;
  padding-left: 5px;
  padding-right: 5px;
}

.main_screen {
  padding-left: 10px;
}

.main_screen .desc{
  font-size: 14px;
}

.main_screen img{
  width:30px;
  height:30px;
  border-radius: 3px;
  margin-top: 20px;
  margin-right: 10px;
}

.child_screen {
  padding-top: 15px;
  padding-right: 10px;
  padding-left: 10px;
  text-align: right;
  display: none;
}

.info_screen {
  padding-top: 15px;
  padding-right: 10px;
  padding-left: 10px;
  display: none;
}

.info_screen_road{
  display: none;
  padding-left: 20px;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 2em;
}

.info_screen_road .info_screen_road_radio_name{
  line-height: 1.5em;
}

.info_screen_poi{
  display: none;
  text-align: right;
  line-height: 2.5em;
}

 .info_details {
  margin-top: 5px;
  margin-bottom: 10px;
  height: 100px;
  background: rgb(250, 250, 250);
  display: flex;
  align-items: center;
}

.info_screen_poi .info_remove{
  text-align: left;
  font-size: 12px;
  line-height: 0.5em;
  padding-bottom: 5px;
}

.info_screen_poi .info_remove label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}

.info_screen_poi .info_remove input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  vertical-align: text-top;
  position: relative;
  top: 1px;
}

.general_screen {
  display: none;
  padding-right: 10px;
  padding-left: 10px;
  text-align: center;
}

.search_screen {
  display: none;
  text-align: left;
  /* width: 100%; */
  margin: 10px;
  /* background: red; */
}

.general_screen .form_textarea {
  width: 82%;
}

.child_screen .input_text {
  margin-top: 5px;
}

.place_details {
  margin-top: 5px;
  margin-bottom: 10px;
  height: 100px;
  background: rgb(250, 250, 250);
  display: flex;
  align-items: center;
}

.addr_banner_container {
  margin-top: 10px;
  position: relative;
  /* text-align: center; */
}

.addr_banner_container .addr_banner {
  height: 160px;
  width: 330px;
}

.addr_text_centered {
  padding: 10px 20px 10px 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* font-size: 20px; */
  border: solid 1px;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  cursor: pointer;
}

.place_banner_container {
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  /* text-align: center; */
}

.place_banner_container .addr_banner {
  height: 60px;
  width: 340px;
}

.road_banner_container {
  margin-bottom: 5px;
  position: relative;
  text-align: center;
}

.road_banner_container .road_banner {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.info_banner_container {
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
  text-align: center;
}

.info_banner_container .addr_banner {
  height: 60px;
  width: 340px;
}

.disclaimer {
  width: 95%;
  font-size: 10px;
  text-align: left;
}

.submit {
  position: absolute;
  bottom: 0;
  width: 95%;
}

.sidenav .content .search_box {
  /* position: relative; */
  /* display: inline-block; */
  /* width: 100%; */
  height: 38px;
  min-width: 329px;
  /* margin-top: 5px; */
  /* margin-left: 5px; */
  padding-top: 3px;
  padding-bottom: 5px;
  pointer-events: auto;
  overflow: hidden;
  /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); */
  border: none;
  /* border-radius: 0.5em 0.5em 0.5em 0.5em; */
  /* border-left: var(--secondaryBorderColor); */
  /* border-right: var(--secondaryBorderColor); */
  /* border-top: var(--secondaryBorderColor); */
  border-bottom: var(--secondaryBorderColor);
  /* background-color: var(--primaryBackgroundColor); */
  z-index: 2;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
  -webkit-transition-delay: 9999s;
}

.sidenav .content .search_box input[type=text] {
  width: 71%;
  min-width: 200px;
  border: none;
  font-size: 15px;
  background-color: var(--primaryBackgroundColor);
  color: var(--primaryTextColor);
  padding-top: 12px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 6px;
}

.sidenav .content .search_box button {
  position: relative;
  float: right;
  width: 40px;
  height: 39px;
  margin: 0;
  background-color: var(--primaryBackgroundColor);
  color: var(--buttonColor);
  font-size: 15px;
  padding-top: 12px;
  padding-bottom: 10px;
  margin-left: -0px;
  border: none;
  cursor: pointer;
  outline: none;
}

.sidenav .content .search_box #btn_route {
  padding-top: 5px;
  padding-bottom: 0px;
  display: block;
}

.sidenav .content .search_box .btn_search {
  border-right: solid rgb(240, 240, 240) 1px;
  visibility: visible;
}

.sidenav .content .search_box input:focus {
  outline: none;
}

.sidenav .content .search_results {
  display: none;
  width: 100%;
  height: 72vh;
  font-size: 12px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0px;
  padding-right: 0;
  border-width: 0.5px;
  border-style: solid;
  border-color: var(--tertiaryBorderColor);
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  background-color: var(--primaryBackgroundColor);
  list-style-type: none;
  pointer-events: auto;
  z-index: 3;
}

.sidenav .content .search_results a {
  text-decoration: none;
  display: block;
  position: relative;
  padding: 6px 10px 6px 10px;
  color: var(--secondaryTextColor);
  text-shadow: var(--primaryTextShadow);
  border: 1px solid transparent;
  border-radius: 3px;
}

.sidenav .content .search_results a:hover {
  text-decoration: none;
  color: var(--tertiaryTextColor);
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border-color: var(--primaryBorderColor);
  background-color: var(--secondaryBackgroundColor);
}

.sidenav .content .search_results hr {
  margin-block-start: 0;
  margin-block-end: -1px;
  width: 90%;
  border-width: 0.5px;
}

.sidenav .content .info_results {
  display: none;
  width: 100%;
  height: 52vh;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 12px;
  padding: 0;
  margin: 0px;
  padding-right: 0;
  border-width: 0.5px;
  border-style: solid;
  border-color: var(--tertiaryBorderColor);
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  background-color: var(--primaryBackgroundColor);
  list-style-type: none;
  pointer-events: auto;
  z-index: 3;
}

.sidenav .content ul a {
  text-decoration: none;
  display: block;
  position: relative;
  padding: 6px 10px 6px 10px;
  color: var(--secondaryTextColor);
  text-shadow: var(--primaryTextShadow);
  border: 1px solid transparent;
  border-radius: 3px;
}

.sidenav .content ul a:hover {
  text-decoration: none;
  color: var(--tertiaryTextColor);
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border-color: var(--primaryBorderColor);
  background-color: var(--secondaryBackgroundColor);
}

.sidenav .content .info_results hr {
  margin-block-start: 0;
  margin-block-end: -1px;
  width: 90%;
  border-width: 0.5px;
}

.sidenav .content .main_panel button {
  /* vertical-align: top; */
  display: inline-block;
  /* width: 59px; */
  height: -webkit-fill-available;
  /* padding-left: 2px; */
  margin: 0;
  background-color: var(--primaryBackgroundColor);
  color: var(--buttonColor);
  /* font-size: 12px; */
  /* padding-bottom: 10px; */
  /* margin-left: -0px; */
  border: none;
  cursor: pointer;
  outline: none;
}

.link {
  text-decoration: none;
  display: block;
  position: relative;
  margin: 0 -1px;
  padding: 6px 0px 6px 10px;
  color: var(--secondaryTextColor);
  text-shadow: var(--primaryTextShadow);
  border: 1px solid transparent;
  border-radius: 3px;
}

.hover a {
  text-decoration: none !important;
  color: var(--tertiaryTextColor) !important;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3) !important;
  border-color: var(--primaryBorderColor) !important;
  background-color: var(--secondaryBackgroundColor) !important;
}

.sidenav .content .search_results_category hr {
  border: none;
  height: 1px;
  color: #cbcfe2;
  /* old IE */
  background-color: #cbcfe2;
  margin: 0px 10px 0px 10px;

}

.search_details {
  display: none;
  height: 100%;
  background-color: var(--primaryBackgroundColor);
  pointer-events: auto;
}

.search_details .search_details_header {
  position: absolute;
  top: 0;
  left: 0;
  width: 94%;
  height: 255px;
  pointer-events: auto;
  background-color: var(--primaryBackgroundColor);
  z-index: 0;
}

.search_details .search_details_title {
  position: absolute;
  top: 235px;
  width: 90.3%;
  height: 120px;
  background-color: var(--primaryBackgroundColor);
  padding: 15px 0 15px 15px;
  z-index: 1;
  pointer-events: auto;
  border-bottom: var(--secondaryBorderColor);
}

.search_details .search_details_title a {
  text-decoration: none;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  margin: auto;
  position: relative;
  text-align: start;
  text-anchor: start;
  overflow: hidden;
  padding: 0;
  color: var(--secondaryTextColor);
  text-shadow: var(--primaryTextShadow);
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 330px;
}

.search_details .search_details_controls {
  position: absolute;
  top: 385px;
  height: 80px;
  width: 94%;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primaryBackgroundColor);
  border-bottom: var(--secondaryBorderColor);
}

.search_details .search_details_description {
  position: absolute;
  top: 486px;
  width: 94%;
  height: 100%;
  padding-left: 2px;
  padding-top: 10px;
  overflow: scroll;
  background-color: var(--primaryBackgroundColor);
  pointer-events: auto;
}

.search_details .search_details_description a {
  text-decoration: none;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  margin: auto;
  position: relative;
  text-align: start;
  text-anchor: start;
  overflow: hidden;
  padding: 6px 0px 6px 10px;
  color: var(--secondaryTextColor);
  text-shadow: var(--primaryTextShadow);
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 330px;
}

.search_details .search_details_description img {
  float: left;
  width: 24px;
  height: 24px;
  margin-right: 5px;
}

.details_call_button {
  text-decoration: none;
  color: var(--buttonColor);
}

table {
  width: 100%;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 2px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollBarTrack);
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollBarThumb);
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollBarThumbHover);
}

/* Loading Animation */
.lds-roller {
  display: none;
  position: absolute;
  width: 35px;
  height: 35px;
  top: 2px;
  left: 77%;
  z-index: 1000;
  transform: scale(0.3);
}

#icon_route_start_loading {
  top: 65px;
  left: 270px;
}

#icon_route_end_loading {
  top: 105px;
  left: 270px;
}

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* background: #fed; */
  background-color: var(--secondaryBackgroundColor);
  margin: -3px 0 0 -3px;
}

.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}

.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}

.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}

.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}

.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}

.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}

.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}

.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}

@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* The Modal (background) */
.modal {
  z-index: 1003;
  display: none;
  padding-top: 30vh;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.animate-top {
  position: relative;
  animation: animatetop 0.4s;
}

/* Modal Content/Box */
.modal .content {
  margin: auto;
  background-color: #fff;
  position: relative;
  padding: 0px;
  outline: 0;
  width: 600px;
  text-align: center;
}

.modal .content .header {
  padding: 0.01em 16px;
  background-color: var(--quaternaryBackgroundColor);;
}
.modal .content .modal_submit {
  /* position: absolute; */
  bottom: 0;
  width: 100%;
}

.content .header h2 {
  font-family: "Segoe UI",Arial,sans-serif;
  font-weight: bold;
  margin: 10px 0;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  color: var(--tertiaryTextColor)!important; 
}

.modal .content .confirm{
  display: none;
  width: 400px;
  padding: 0 0 30px 0;
  text-align: right;
  color: black;
}

.modal .content .confirm .radio_button{
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 2em;
}
.modal .content .confirm h2{
  text-align: center;
}

.modal .content .confirm .img_container{
  padding-top:10px;
  text-align: center;
}

.modal .content .confirm .img_container img{
  max-width: 300px !important;
  max-height: 230px !important;
  border-radius: 10px;
}

.modal .content .input_text{
  width: 82%;
}

.modal .content .sent{
  display: none;
  padding: 20px;
  text-align:center;
  color: var(--modelSentTex)!important;
}

.model-footer{
  height:20px;
  background-color: var(--quaternaryBackgroundColor);
}

/* The Close Button */
.header .close {
  color: var(--tertiaryTextColor)!important;;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.header .close:hover,
.header .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}