@charset "utf-8";


:root {
  --main-color: #404040;
  --sub-color: #f7f7f7;
  --base-color: #f4f4f4;
  --base-font-color: #ffffff;
  --button-color: #ffffff;
  --m: 0px;
  --sidebar-width: 380px;
  --header-height: 40px;
}
.main {
    width: 100%;
}
.dp10,
.dp12,
.dp17,
.dp20,
.dp25,
.dp33,
.dp40,
.dp50,
.dp60,
.dp67,
.dp75,
.dp80,
.dp83,
.dp100,
.fluid {
    margin: 0px 0 0px 0px;
}


html {
	margin: 0;
	padding: 0;
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka",sans-serif;
    height: 100%;
}
body {
	font-size: 12px;
	margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    /* background-color: var(--base-color); */
    height: 100%;
}

/*-----------------------------------------------------------------------------
  フレームの定義
 ----------------------------------------------------------------------------*/
.__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    /* background-color: var(--base-color); */
    align-items: stretch;
}
.__header {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 40px;
    max-height: 40px;
    min-height: 40px;
    background-color: #404040;
    /* height: var(--header-height); */
    /* background-color: var(--main-color); */
}

.__header >:last-child {
  margin-left: auto;
}
.__inner-container {
    display: flex;
    flex-direction: row;
    background-color: #f4f4f4;
    /* background-color: var(--base-color); */
    flex-grow: 1;
    width: 100%;
}
.__menu {
    display: flex;
    flex-direction: column;
    background-color: #404040;
    /* background-color: var(--main-color); */
    overflow-y: auto;
    color: #ffffff;
    transition: all 0.3s;
    z-index: 10;
    width: 160px;
    min-width: 160px;
    border-right: medium solid #567896;
    
    min-height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
    height: calc(100vh - 40px);
}

.__sidebar {
    display: flex;
    flex-direction: column;
    background-color: #404040;
    /* background-color: var(--main-color); */
    overflow-y: auto;
    /* color: #ffffff; */
    color: #222;
    transition: all 0.3s;
    z-index: 9;
    position: relative;
    width: 380px;
    /* width: var(--sidebar-width); */
    min-height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
    height: calc(100vh - 40px);

}
.__sidebar.__inactive {
    margin-left: calc(-1 * 380px)!important;
    /* margin-left: calc(-1 * var(--sidebar-width))!important; */
}

.__sidebar-toggle {
    background: url(/assets/img/ic_slidebar_close.svg) no-repeat 0 0px;
    background-color: #404040;
    /* background-color: var(--main-color); */
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    position: absolute;
    transition: all 0.3s;
    cursor: pointer;
    z-index: 10;
    background-origin: content-box;
    padding: 1px;
}
.__sidebar-toggle.__inactive {
    background: url(/assets/img/ic_slidebar_open.svg) no-repeat 0 0px;
    background-color: #404040;
    /* background-color: var(--main-color); */
    transition: all 0.3s;
    cursor: pointer;
    background-origin: content-box;
    padding: 1px;
}


.__sidebar-pin {
    background-color: #404040;
    /* background-color: var(--main-color); */
    min-width: 24px;
    min-height: 24px;
    width: 24px;
    height: 24px;
    transition: all 0.3s;
    position: absolute;
    top: calc(40px + 24px);
    /* top: calc(var(--header-height) + 24px); */
    cursor: pointer;
    z-index: 10;
    padding: 1px;
}
.__sidebar-pin.__on {
    background: url(/assets/img/sidebar-lock.svg) no-repeat 0 0px;
    background-color: #404040;
    /* background-color: var(--main-color); */
    background-origin: content-box;
}
.__sidebar-pin.__off {
    background: url(/assets/img/sidebar-unlock.svg) no-repeat 0 0px;
    background-color: #404040;
    /* background-color: var(--main-color); */
    background-origin: content-box;
}



.__contents {
    display: flex;
    background-color: #f7f7f7;
    /* background-color: var(--sub-color); */
    width: 100%;
    overflow: auto;
    transition: all 0.3s;
    flex: 1;

}
.__accordion-menu {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.__accordion-menu .inner {display: none;}
.__accordion-menu p{
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
}
.__accordion-menu li {
    cursor: pointer;
}
.__accordion-menu p:hover {
    opacity: 0.7;
}
.__accordion-menu li{list-style: none;}
.__accordion-menu ul{
    margin: 0;
	padding: 0;
}

.__accordion-menu li a {
    background-color: #404040;
    /* background-color: var(--main-color); */
}

.__accordion-menu li a:hover {
    opacity: 0.7;
}

.__menu-header {
    /* width: 100%; */
    min-height: 24px;
    height: 24px;
    background-color: #461e64;
    display: flex;
    align-items: center;
    padding-left: 8px;
    font-style: italic;
}

.__logo-container {
    display: flex;
    padding-left: 10px;
    padding-top: 8px;
    width: 160px;
}
.__logo {
    display: flex;
    background-image: url();
    background-repeat: no-repeat;
    flex: 2
}
.__title {
    display: flex;
    flex-direction: row;
    flex: 2;
    color: #ffffff;
    font-size: 16px;
    padding: 6px;
    white-space: nowrap;

}
.__title_icon {
    height: 24px;
    width: 24px;
    margin-right: 6px;
}
.__sign-out {
    display: flex;
    flex-direction: row;
    height: 40px;
    max-height: 40px;
    min-height: 40px;
}
.__account {
    background: left top no-repeat;
    background-repeat: no-repeat;
    background-image: url(/assets/img/ic_account.svg);
    background-position: 8px 8px;
    background-size: 24px 24px;
    padding-left: 36px!important;
    min-width: 124px;
    text-align: left;
}

.__logout_anchor {
    background: left top no-repeat;
    background-repeat: no-repeat;
    background-image: url(/assets/img/ic_logout.svg);
    background-position: 8px 8px;
    background-size: 18px 18px;
    padding-left: 36px!important;
}

.__passwordchange_anchor {
    background: left top no-repeat;
    background-repeat: no-repeat;
    background-image: url(/assets/img/ic_password.svg);
    background-position: 8px 8px;
    background-size: 18px 18px;
    padding-left: 36px!important;
}

.__top-menu {
    padding-left: 34px;
	line-height: 2.5em;
	background: left top no-repeat;
	background-size: 24px auto;
    background-repeat: no-repeat;
    background-position: 4px 4px;
}
li.__menu-home {
    background-image: url(/assets/img/menu/ic_menu_home.png);
}
li.__menu-curpos {
    background-image: url(/assets/img/menu/ic_menu_carpos.png);
}
li.__menu-report {
    background-image: url(/assets/img/menu/ic_menu_report.png);
}
li.__menu-stat {
    background-image: url(/assets/img/menu/ic_menu_stat.png);
}
li.__menu-events {
    background-image: url(/assets/img/menu/ic_menu_events.png);
}
li.__menu-eventmap {
    background-image: url(/assets/img/menu/ic_menu_eventmap.png);
}
li.__menu-alcoholcheck {
    background-image: url(/assets/img/menu/ic_menu_alcoholcheck.png);
}
li.__menu-setting {
    background-image: url(/assets/img/menu/ic_menu_setting.png);
}
li.__menu-management {
    background-image: url(/assets/img/menu/ic_menu_management.png);
}
li.__menu-help {
    background-image: url(/assets/img/menu/ic_menu_help.png);
}
li.__menu-download {
    background-image: url(/assets/img/menu/ic_menu_download.png);
}
li.__menu-contact {
    background-image: url(/assets/img/menu/ic_menu_contact.png);
}
li.__menu-sitelist {
    background-image: url(/assets/img/menu/ic_menu_sitelist.png);
}

.__menu a {
    text-decoration: none;
    color: #ffffff;
}

li.__menu-selected,
li.__menu-selected>a,
li.__menu-selected>p>a,
li.__menu-selected>ul,
li.__menu-selected>ul>li,
li.__menu-selected>ul>li>a {
    background-color: #567896;
    color: #ffffff;
}
.__nopadding {
   padding: 0 !important;
   margin: 0 !important;
}


/*-----------------------------------------------------------------------------
  ドロップダウンメニュー
 ----------------------------------------------------------------------------*/
 .__dropbtn {
   background-color: #404040;
   color: #ffffff;
   /* background-color: var(--main-color); */
   /* color: var(--base-font-color); */
   padding: 8px;
   font-size: 14px;
   border: none;
   cursor: pointer;
   width: 100%;
   white-space: nowrap;
 }

 .__dropdown {
   position: relative;
   display: inline-block;
   width: 100%;
 }

 .__dropdown-content {
   display: none;
   position: absolute;
   background-color: #404040;
   color: #ffffff;
   /* background-color:  var(--main-color); */
   /* color: var(--base-font-color); */
   min-width: 120px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
   width: 100%;
   font-size: 14px;
   right: 0px;
 }

 .__dropdown-content a {
    color: #ffffff;
    /* color: var(--base-font-color); */
    padding: 8px;
    text-decoration: none;
    display: block;
 }

 .__dropdown-content a:hover {
     opacity: 0.7;
 }

 /* Show the dropdown menu on hover */
 .__dropdown:hover .__dropdown-content {
   display: block;
 }

 /* Change the background color of the dropdown button when the dropdown content is shown */
 .__dropdown:hover .__dropbtn {
   opacity: 0.7;
 }



 /*-----------------------------------------------------------------------------
   メッセージ表示
  ----------------------------------------------------------------------------*/
 div.__notify_message {
 	margin: 0px 0px 4px 0px;
 }
 ul.__notify_message {
 	color: #006AB6;
 	font-weight: 100;
 	margin: 0px 0px 0px 0px;
    font-size: 14px;
    padding-inline-start: 20px;
 }
 div.__error_message {
    margin: 0px 0px 4px 0px;
 }
 ul.__error_message {
 	color: #f00;
 	font-weight: 100;
    margin: 0px 0px 0px 0px;
 	font-size: 14px;
    padding-inline-start: 20px;
 }


 .l {text-align: left !important;}
 .c {text-align: center !important;}
 .r {text-align: right !important;}
 
 .text-align-center {
   text-align: center;
 }
 .text-align-right {
   text-align: right;
 }
 .text-align-left {
   text-align: left;
 }
 
/** 安全運転診断個人 急挙動回数の三角 */
div.arrow_accell_top{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 52.0px 30px;
    border-color: transparent transparent #ff0000 transparent;
}
div.arrow_accell{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 52.0px 30px;
    border-color: transparent transparent #ffc0cb transparent;
}
div.arrow_brake_top{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 52.0px 30px 0 30px;
    border-color: #ff0000 transparent transparent transparent;
}
div.arrow_brake{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 52.0px 30px 0 30px;
    border-color: #ffc0cb transparent transparent transparent;
}
div.arrow_right_top{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0 30px 52.0px;
    border-color: transparent transparent transparent #ff0000;
}
div.arrow_right{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0 30px 52.0px;
    border-color: transparent transparent transparent #ffc0cb;
}

div.arrow_left_top{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 52.0px 30px 0;
    border-color: transparent #ff0000 transparent transparent;
}
div.arrow_left{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 52.0px 30px 0;
    border-color: transparent #ffc0cb transparent transparent;
}
.pagebreak {
  break-after: page;
}