.system .navbar,
.system .navbar.navbar-transparent {
    /*background-color: #554181 !important;
    background-color: #682b94 !important;
    background-color: #8363C7 !important;
    background-color: #815AC7 !important;*/
    background-color: #504194 !important;
}
  .system .page-header {
	height:240px;
	background-position:center 20px;
	background-size:cover;
  }
  .system .page-header .container h1 { position:absolute; left:auto; top:50%; margin-top:30px; font-size:2rem; color:#998a7c;}

.system .dropdown-menu .dropdown-item:hover,
.system .dropdown-menu .dropdown-item:focus,
.system .dropdown-menu a:hover,
.system .dropdown-menu a:focus,
.system .dropdown-menu a:active {
    box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(171, 135, 67, 0.4);
    background-color: #777;
}
 .dropdown-menu .dropdown-menu.show { position: relative; background:#f8fbef; box-shadow:none; }
 .dropdown-menu .dropdown-menu.show .dropdown-item { padding-left:1rem; }
 .dropdown-menu .dropdown-menu.show .dropdown-item:hover { background: transparent; box-shadow:none; color: #5AB02E;}
 .dropdown-menu .dropdown-menu.show .dropdown-item .material-icons{ font-size: 1rem; opacity:.5;}

 .system .dropdown-menu .dropdown-menu.show { position: relative; background:#fbf7ef; box-shadow:none; }
 .system .dropdown-menu .dropdown-menu.show .dropdown-item { padding-left:1rem; }
    .system .dropdown-menu .dropdown-menu.show .dropdown-item:hover {
        background: transparent;
        box-shadow: none;
        background-color: #d1b682;
        color:#ffffff;
    }
 .system .dropdown-menu .dropdown-menu.show .dropdown-item .material-icons{ font-size: 1rem; opacity:.5;}

  .dropdown2 .dropdown-menu.dropdown-menu-third{ box-shadow:none; background:#e8f6e1;}
  .dropdown2 .dropdown-menu.dropdown-menu-third .dropdown-item{ font-size:0.875rem; padding-left:1.5rem; padding-right:.75rem; }
  .dropdown2 .dropdown-menu.dropdown-menu-third .dropdown-item .material-icons{ font-size:.25rem; opacity:.2;}
  .dropdown2 .dropdown-menu.dropdown-menu-third .dropdown-item:hover { background: transparent; box-shadow:none; color: #5AB02E; }
  .dropdown2:hover .dropdown-menu.dropdown-menu-third { position:relative; opacity: 1; transform: scale(1);}
  .dropdown2:hover > .dropdown-item { background: #5AB02E; color: #fff; }
  .system .dropdown2:hover > .dropdown-item { background: #B2945B; }
  .system .dropdown2 .dropdown-menu.dropdown-menu-third{ background:#fbf7ef; }
  .system .dropdown2 .dropdown-menu.dropdown-menu-third .dropdown-item:hover { color: #B2945B; }
  
  /* 地圖 map */
  .map .navbar-expand-lg>.container,
  .map .navbar-expand-lg>.container-fluid{ position:relative;}
  .map .main{ height:100vh; min-height:100%; padding:0}
  .map .navbar-text{ text-align:right; margin-left: 1rem; font-size:1.125rem;  position:absolute; right:15px; top:auto;}
  .google-map{ position:absolute; left:0; top:0; width:100%; height:100%; min-height: 700px;}
 
 .sidebar-wrap{ position: fixed;
  max-width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: none;
  background: #f6f6f6;
  padding:60px 0px 0 15px;
  box-sizing: border-box;
  box-shadow:0 0 6px 5px rgba(0,0,0,0.09);
  transition: -webkit-transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out;
  transition: transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  will-change: transform;
  z-index: 1020;
}
.sidebar-wrap .controls .btn{ position:absolute;right:-43px;top:92px; box-shadow:none; padding:8px 12px; border-bottom-left-radius:0;border-top-left-radius:0;}
#menu-right { z-index: 1090; }
#menu-right .controls { margin:15px auto 0;}
#menu-right .controls .btn{ position:relative;right:inherit;top:inherit; border-radius:0.2rem; }
.slide-menu {
  overflow: hidden;
  overflow-y: scroll;
  height: 91vh;
  padding-right:5px;
  font-size:.9rem;
  line-height:1;
}
.slide-menu.no-transition, .slide-menu.no-transition * {
  transition: none !important;
}
.slide-menu .subtitle {margin: 0; padding: 1.5rem 0 0; }
.slide-menu > .table { margin:20px 0;}
.slide-menu > .table tr:hover td { color:#5AB02E; }
.slide-menu > .table thead tr th { border-bottom:1px solid #ccc; border-top:none; padding-top:0; font-size:.8rem; }
.slide-menu > .table tfoot tr td { border-top:1px solid #aaa; border-bottom:none; font-weight:bold;}
.slide-menu > .table tfoot tr:hover td{ color:inherit; }
.slide-menu table.bt tbody td:before{ width:5rem;}
.slide-menu > .table.table-center tr td { text-align: center; }
.slide-menu > .table.table-center .form-check.form-check-inline { padding: 0; margin: 0; }
.slide-menu > .table.table-center .form-check .form-check-label { min-height: 17px; }
.slide-menu > .row > div .form-group { padding-left: 5px; }
.slide-menu > .row > div .form-group.last { padding-top: .65rem; margin-top: .65rem; border-top: 1px solid #ccc;}
.slide-menu > .row > div .form-group .form-check .form-check-label { padding-left: 25px; }

.search-bar-list{ background:#fff; width:100%; top:0; padding-top:75px; padding-bottom:15px;}
.search-bar-list .container{ position:relative; }
.search-bar-list .btn-toggle{ position:absolute; bottom:-40px; right:25px; background:#fff; border:none; border-radius:3px; padding:5px 10px; color:#aaa;}
.search-bar-list .btn-toggle:active{ color:#666;}
.search-bar-list .map-setup{ padding-bottom:20px; }
.search-bar-list .row { margin-left:30px; margin-right:0;}
.search-bar-list .icon-group{ font-size:.9rem; line-height:1.5; color:#777; padding-bottom:10px; border-bottom:1px solid #e5e5e5; margin-bottom:5px;}
.search-bar-list .icon{ display:inline-block; vertical-align:middle; width:16px; height:16px; border-radius:50%; margin:-4px 4px 0 10px; border:1px solid #e5e5e5; box-shadow:1px 1px 2px #eee;}
.search-bar-list .icon:first-child{ margin-left:0; }
.search-bar-list .icon-green { background:#009318;}
.search-bar-list .icon-red { background:#cf0000;}
.search-bar-list .icon-purple { background:#4400cf;}
.search-bar-list .icon-orange { background:#f5a700;}
.search-bar-list .icon-pink { background:#ffaac8;}
.search-bar-list .icon-yellow { background:#ffea00;}
.search-bar-list .form-group{ font-size:.9rem; padding-top:0; }
.search-bar-list .form-group.last{ padding-top: .65rem; margin-top: .65rem; border-top: 1px solid #ccc;}
.search-bar-list .text-label { vertical-align:middle; margin:2px 3px 0 0}
.search-bar-list .form-check .form-check-sign .check{ width:15px; height:15px; border-color:#444; top:1px;}
.search-bar-list .form-check .form-check-sign .check:before{ margin-top:-5px; margin-left:5px;}
.search-bar-list .mark{ display:inline-block; vertical-align:middle; margin:-3px 2px 0 2px; width:12px; height:12px;}
.search-bar-list .mark-green{ background:#85d900; border:1px solid #78c300; }
.search-bar-list .mark-orange{ background:#ff8f3d; border:1px solid #da742b; }
.search-bar-list .mark-blue{ background:#2acdfc; border:1px solid #13b1df; }
.search-bar-list .map-title{ font-size:.9rem; }
.search-bar-list .map-title h1{ text-align:center; font-size:1.375rem; margin:0 auto 10px; font-weight:bold; padding-top: 20px; }
.search-bar-list .map-title .icon{ margin:0 3px 0 0; }
.search-bar-list .map-title .text-label { margin-right:1.25rem;}

@media (min-width: 575px) {
  .system .page-header {
    height: 240px;
	background-position:center 20px;
  }
  .search-bar-list { font-size:1rem;}
  .search-bar-list .icon-group{ font-size:1rem;}
  .search-bar-list .icon{width:18px; height:18px;}
  .search-bar-list .form-group{ font-size:1rem;}
  .search-bar-list .map-title h1{ font-size:1.5rem; padding-top: 40px; }
  .search-bar-list .map-title .icon{ display:inline-block; }
}
@media (min-width: 996px) {
  .system .page-header {
    height: 300px;
  }
  .system .page-header .container h1 { font-size:2.5rem;}
  .sidebar-wrap{ padding-top:80px; }
}

@media (min-width: 1200px) {
	.map .navbar-text{ font-size:1.5rem; }
	.search-bar-list{ padding-top:95px; }
	.search-bar-list .row{ margin-left:60px;}
}

.modal-dialog.loginbox{ max-width:460px; }
.modal-dialog.loginbox .modal-header{ padding-bottom:0; margin-bottom:-30px; z-index:2; }
.modal-dialog.loginbox .modal-header:before{ display:none;}
.modal-dialog.loginbox .modal-footer{ padding-bottom:50px; }
.loginbox-header{text-align:center; }
.loginbox-header h3{ display:inline-block; margin:0; font-weight:bold; /*color:#4caf50;*/ position:relative; }
.loginbox-body .form-group{ max-width:300px; margin:0 auto;}
.loginbox-body .input-group{ padding-bottom:7px; margin:15px 0 0;}
.loginbox-body .input-group .form-control{ margin:-4px 0 0 -15px; font-size:100%;}
.loginbox-body .input-group .material-icons{ color:#4caf50;}
.loginbox-body .g-recaptcha{ margin-top:20px;}

.text-center{ text-align:center;}
.material-icons{ vertical-align:middle;}
.form-check .form-check-input:checked~.circle{ border-color:#4caf50;}
.form-check .form-check-label .circle .check{ background-color:#4caf50;}
.form-control, .is-focused .form-control{ background-image:linear-gradient(to top, #4caf50 2px, rgba(76, 175, 80, 0) 2px), linear-gradient(to top, #a9a9a9 1px, rgba(169, 169, 169, 0) 1px);}
.form-control:disabled, .form-control[readonly]{ background-color:inherit;}

.modal-dialog .modal-header{ padding-bottom:14px; color:#aaa; position:relative;}
.modal-dialog .modal-header:before{ display:block; content:''; width: calc( 100% - 48px); height:1px; background:#ccc; position:absolute; bottom:0; left:24px;}
.modal-dialog .modal-body .material-icons{ margin-top:-6px; padding-right:10px;}


.major-title { text-align:center; margin-bottom:1em; }
.major-title h2 { display:inline-block; padding:0 .9rem; vertical-align:middle; margin:0; color:#514840;}
.major-title p{ padding:.5rem 0 1rem; color:#999;}
.major-title img { display:inline-block; vertical-align:middle; }

.wrapper{padding:0 0 80px 0;}
.btn-wrap{ text-align:center; padding:1rem 0 0;}
.announcement { }
.accordion-wrap .form-group > label{ font-size:1rem; }
.accordion-wrap .form-group .form-check{ padding-top:0; margin:0 5px;}

.petsmap .one-img-text{ display: table; table-layout: fixed;  width: 100%; max-width:700px; margin:0 auto; position: relative;}
.petsmap .one-comment{ padding-left:2rem; }
.one-img-text{display:table;table-layout:fixed;width:100%;position:relative;}
.one-img-text .one-half{width:50%;}
.one-img-text .column-block{display:table-cell;vertical-align:middle;}
.one-img-text .background{background:url(../img/pets-map-img.jpg) center no-repeat;background-size:cover; border-top-left-radius:10px; border-bottom-left-radius:10px;}
.one-img-text .content{background:#eee; padding:5% 5% 5% 2%; border-top-right-radius:10px; border-bottom-right-radius:10px;}
.one-img-text .content h3{ color:#5AB02E; font-weight:bold; margin:0 0 10px 0; }
.one-img-text .content p{ margin-bottom:10px; }

.pet-group{ text-align:center; }
.pet-group .col-sm-3{ margin-bottom:30px;}
.pet-group h3{ font-size:1.125rem;margin:15px auto 0; color:#5AB02E; font-weight:bold;}
.pet-group .img{ position:relative; border-radius:6px; background:#eee; text-align:center; padding:10px; max-width:300px; margin:0 auto; }
.pet-group .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #8dbb00;
  border-radius:6px;
}
.pet-group .img:hover  .overlay {
  opacity: 1;
}
.pet-group .text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
  white-space:nowrap;
}

.pet-group-list {}
.pet-group-list .column{position:relative; background:#fff; color:#fff;transition: all 0.5s ease; margin-bottom:15px;}
.pet-group-list .container{border-radius:6px; padding:40px 30px; position:relative; }
.pet-group-list .column:before{ display:block; width:calc(100% - 30px); height:100%; position: absolute;background:url(../img/bg-wave.png) no-repeat #8dbb00; content: ''; border-radius:6px;}
.pet-group-list .column:after{position: absolute; top:10px; right:25px; bottom:10px; left:25px; border: 1px solid #fff; content: '';border-radius:6px;  }
.pet-group-list .column:before:hover{ background:#a0c200;}
.pet-group-list .container>p{ display:block; font-size:1rem;}
.pet-group-list .container>h3{ margin-top:0;}

/*
.petsmap{ text-align:center; }
.petsmap .wrap{ display:inline-block; background:#ededed; border-radius:6px;}
.petsmap .textbar {text-align:left;position:relative;}
.petsmap img{ float:left;  border-top-left-radius:20px;border-bottom-left-radius:6px;}
.petsmap .textbar h3{ margin:0 0 5px 0}
*/

.text-line-list {}
.text-line-list .column{ border-right:1px solid #ccc; text-align:center; padding-top:30px; padding-bottom:30px; }
.text-line-list .column:last-child{ border:none;}
.text-line-list .column i{ color:#5cdaa0; font-size:2rem;}
.text-line-list .column h3 { color:#5AB02E; font-weight:bold; border-radius:6px; padding:0 15px; margin:0 auto 1rem; font-size:1.25rem; }
.text-line-list .column p{padding:0 15px;}

.table-g13 thead th .form-check{ padding:0;}
.table-g13 thead th .form-check .form-check-label{ font-size:.875rem; color:#d2f2bd; padding-left:20px;}
.table-g13 thead th .form-check .form-check-label .form-check-sign{ left:-1px; top:-1px;}
.table-g13 thead th .form-check .form-check-sign:before{ width:16px; height:16px;}
.table-g13 thead th .form-check .form-check-sign .check{ width:16px; height:16px; border-color:#d2f2bd; top:0;}
.table-g13 thead th .form-check .form-check-sign .check:before{ margin-top:-5px; margin-left:5px;}
.table-g13 thead th {
    color: #000000;
    background-color: #dff6d1;
    border-color: #000000;
    border-bottom-color: #b7e29a;
    border-bottom-width: 1px;
    text-align: center;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    vertical-align: middle;
    line-height: 1.25;
    font-size: 1.175rem;
    font-weight: normal;
}
.table-g13 tr td {	text-align:center; line-height:1;}
.table-g13 tr td .form-check, .table-g13 tr td .form-check .form-check-label{ min-height:22px; padding:0; }
.table-g13 tr td .form-check .form-check-sign{ padding:0; top:2px; }
.table-g13 tbody tr:nth-of-type(odd){	background:rgba(160, 170, 140, 0.08);	}
.table-g13 tbody tr:hover td{background:rgba(245, 250, 235, 1);	}
.table-g13 tbody tr td{height:30px;	}
.table-g13 i{ vertical-align:middle; margin-top:-4px; margin-right:5px; font-size:1.325rem; color:#fcc400;}
.table-g13.table-detail tbody th { vertical-align:middle; background:#ffffe7; width:23%; min-width:150px; text-align:right; font-weight:normal; color:#79735c;}
.table-g13.table-detail tr td {vertical-align:middle; text-align:left;}
.table-g13.table-detail tbody tr:hover td{background:none;	}

.round-red{ display:inline-block; width:22px; height:22px; vertical-align:middle; margin:0 2px 5px 2px; border-radius:25px; color:#fff; background:#ff6c00; font-size:.85rem; line-height:22px; box-shadow:2px 2px 2px rgba(123, 20, 0, 0.3);}

.accordion>.card { margin:15px auto; overflow: hidden;}
.accordion>.card .card-header{ padding:0; margin:0; border-bottom-left-radius:0; border-bottom-right-radius:0;  background:linear-gradient(270deg, #efd8bc, #fbecda)}
.accordion>.card .card-header .btn.btn-link{ display:block; width:100%; text-align:left;color:#675a4a; font-weight:bold; font-size:1.125rem;}
.mb-0, .my-0 { margin-bottom: 0 !important;margin:0;}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {  cursor: pointer;}
.accordion>.card:first-of-type {  border-bottom: 0;  border-top-right-radius: 0;  border-top-left-radius: 0;}
.accordion>.card .card-header:not([class*="header-"]){ box-shadow:none;}
.accordion>.card .card-header:first-child{}
.accordion>.card .card-header {  margin-bottom: -1px;}

.accordion-wrap .form-select{ text-align:center;}
.accordion-wrap .form-select label{ padding-right:10px; color:#ff9800; font-size:.925rem;}
.accordion-wrap .form-select select.form-control{ width:auto; display:inline-block;}

.card-text-list .card .card-header h3{ font-size:1.125rem; text-align:center; margin:10px 0;}
.card-text-list .card .card-body{ text-align:center; padding:1.5rem; color:#aaa;}
.card-text-list .card .card-body strong{ display:block;font-size:2.25rem; color:#675a4a; padding-bottom:15px;}

.formbar-wrap { padding:20px; background:#f7f7f7; border-radius:6px; margin-bottom:20px; }
.formbar-wrap > .row > div:first-child{ padding-top:2px;}
/*
.formbar-wrap .form-group{padding-top:10px; margin-bottom:0;}
.formbar-wrap .form-check{float:left;}
.formbar-wrap .form-check .form-check-label .circle{ top:-10px;}
*/
.form-check-label{ display:block;}
.form-control{font-size:1rem;width:calc( 100% - 25px ); margin-top:-10px; margin-left:25px;}
.checkbox label, .radio label, .text-label, .form-check-label{ font-size:1rem; color:#333;}
input.form-control:placeholder{ font-size:1.125rem;}
.form-group{ padding:7px 0 5px; margin:0;}
.form-check{ padding:5px 0 0 0; vertical-align:middle;}
.form-select{ padding:8px .6em 6px; background-color:#fff; border-radius:3px; vertical-align:middle; line-height:1; text-align: center; text-align-last: center;}
.form-select:focus, .form-control-input:focus{ border-color:#4caf50; color:#4caf50;}
.form-select option{ display:block; text-align: center;     text-align-last: center; }
.form-control-input{padding:6px .6em 4px; background-color:#fff; border:1px solid #a9a9a9; width:100%; border-radius:3px; vertical-align:middle; line-height:1; }
.form-input-inline{ width:auto;}
.form-check .form-check-label .form-check-sign{ left:0; }

.card-textarea{ width:80%; margin:40px auto; padding:20px 0;}
.card-textarea .card-header{ margin-bottom:1rem;}
.card-textarea .card-body .row{ margin-bottom:1.5rem;}
.card-textarea .card-body .row:last-child{ margin-bottom:0;}
.card-textarea .card-body .row > div:nth-child(odd) .form-label{ padding-left:24px; position:relative; color:#94796d; font-weight:bold;}
.card-textarea .card-body .row > div:nth-child(odd) .form-label:before{ display:block; content:''; background:#ffdd64; position:absolute; left:0; top:7px; width:12px; height:18px;}
.card-textarea .card-footer .btn{ margin:0 auto;}
.width-block{ display:block; width:100%;}
.card-textarea .description{ font-size:.875rem; color:#297800;}
.card-textarea .input-group .input-group-text{padding-left:0}
.card-textarea .input-group-margin{max-width:400px; margin:0 auto;}
.card-textarea .material-icons.text-danger{ margin-top:-8px; font-size:.925rem;}
.card-textarea .input-group .form-control{ margin-left:0; margin-top:auto;}
.card-textarea .form-input-inline{ width:150px;}
.col-check-btn .btn{ height:34px; line-height:20px; margin:0}
.form-label{padding-top:4px;}
.form-input-address{ width:calc(100% - 245px);}
.form-input-phone{ width:42%; max-width:calc(100% - 70px);}
.form-input-date{width:140px; text-align:center;}
.form-input-time {
    width: 85px;
    text-align: center;
}
.btn.form-group-addon{ width:40px; height:34px; line-height:34px; margin:0 2px; padding:0; text-align:center; background-color:#d9d9d9; color:#777; }
.date-text{ font-size:.925rem;}
.ui-datepicker-trigger{ width:40px; height:34px; line-height:34px; margin:0 2px; padding:0; text-align:center; background-color:#d9d9d9; color:#777;}

.badge-wrap{ padding:10px 0;}
.badge-wrap .badge{ line-height:1; font-size:.925rem; padding:.5rem .825rem .45rem; background:none; border:1px solid #7da600; color:#7da600; font-weight:bold;}
.badge-wrap .badge i{ font-size:1rem; margin:-4px 3px 0 -2px;}

.page-item-number{ line-height:30px; font-size:.875rem; padding-left:15px;}



@media (max-width:768px){
.petsmap .one-img-text{ max-width:540px;}
.one-img-text, .one-img-text .column-block{display:block;width:auto}
.one-img-text .background{ height:220px; border-radius:0; border-top-left-radius:10px; border-top-right-radius:10px;}
.one-img-text .content{padding:2em; border-radius:0; border-bottom-left-radius:10px; border-bottom-right-radius:10px;text-align:center;}
.formbar-wrap > .row > div:last-child{ text-align:center;}
.formbar-wrap > .row > div:last-child .btn{  font-size:1rem;padding-top:.625rem;padding-bottom:.625rem; min-width:25%; margin-top:15px;}
.card-textarea { width:98%; }
.carousel-control-prev{ margin-left:-50%;}
.carousel-control-next{ margin-right:-50%;}
}
@media (max-width:575px){
.major-title h2{ font-size:2rem;}
.major-title img { max-width:100px; }
.text-line-list .column{ border:none; }
.table-g13.table-detail tbody th{ font-size:1rem;}
.formbar-wrap > .row > div:last-child .btn{ display:block; }
.card-textarea .input-group-margin{ max-width:inherit;}
.form-input-address{ width:100%; margin-top:5px;}
.form-input-phone{ width:100%; max-width:inherit;}
}
@media (max-width:414px){
.major-title { display:block; text-align:center;}
.major-title h2 { display:block; }
.major-title img{ max-width:inherit; margin-top:-5px; }
}

.line-style {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin: 20px 10px 20px 10px;
}

.navbar-logo {
    display: inline-block;
    float: left;
    padding:20px 0px 20px 0px;
    font-size:22px;
}

.banner-img {
    background-image: url('/img/banner-c.jpg');
}

/* tooltip */

[data-tooltip] {
    position: relative;
    cursor: pointer; }
    [data-tooltip]::before, [data-tooltip]::after {
        position: absolute;
        z-index: 50;
        display: none;
        opacity: 0;
        pointer-events: none;
        font-size: 0.9em; }
    [data-tooltip]::before {
        content: "";
        border: 5px solid transparent; }
    [data-tooltip]::after {
        content: attr(data-tooltip);
        padding-right: .5rem;
        padding-left: .5rem;
        padding: .25rem .5rem;
        width: 15rem;
        background-color: #737373;
        border-radius: 6px;
        text-align: center;
        white-space: normal;
        font-size: 0.875rem;
        color: white; }
    [data-tooltip]:hover::before, [data-tooltip]:hover::after {
        display: block;
        opacity: 1; }
    [data-tooltip]:not([data-flow])::before, [data-tooltip]:not([data-flow])::after, [data-tooltip][data-tooltip][data-flow="top"]::before, [data-tooltip][data-tooltip][data-flow="top"]::after {
        left: 50%;
        transform: translate(-50%, -4px); }
    [data-tooltip]:not([data-flow])::before, [data-tooltip][data-tooltip][data-flow="top"]::before {
        bottom: 100%;
        border-bottom-width: 0;
        border-top-color: #737373; }
    [data-tooltip]:not([data-flow])::after, [data-tooltip][data-tooltip][data-flow="top"]::after {
        bottom: calc(100% + 5px); }
    [data-tooltip][data-flow="bottom"]::before, [data-tooltip][data-flow="bottom"]::after {
        left: 50%;
        transform: translate(-50%, 8px); }
    [data-tooltip][data-flow="bottom"]::before {
        top: 100%;
        border-top-width: 0;
        border-bottom-color: #737373; }
    [data-tooltip][data-flow="bottom"]::after {
        top: calc(100% + 5px); }
    [data-tooltip][data-flow="left"]::before {
        top: 50%;
        border-right-width: 0;
        border-left-color: #737373;
        left: calc(0em - 5px);
        transform: translate(-8px, -50%); }
    [data-tooltip][data-flow="left"]::after {
        top: 50%;
        right: calc(100% + 5px);
        transform: translate(-8px, -50%); }
    [data-tooltip][data-flow="right"]::before {
        top: 50%;
        border-left-width: 0;
        border-right-color: #737373;
        right: calc(0em - 5px);
        transform: translate(8px, -50%); }
    [data-tooltip][data-flow="right"]::after {
        top: 50%;
        left: calc(100% + 5px);
        transform: translate(8px, -50%); }

@media screen and (min-width: 641px) {
    [data-tooltip]::after {
        width: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; } }