/* main layout
----------------------------------------------------------*/
/** {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}*/

html {
    -ms-touch-action: manipulation;
}
body {
    position: relative;
    font-size: .85em;

    opacity: 0; /* 初期表示は透明 */

}
div{
    margin: 0; padding: 0;
}

.content-wrapper {
    /*opacity: 0.85;*/
    margin: 6px;
	/*-ms-box-shadow: 3px 3px 5px #000;
	-webkit-box-shadow: 3px 3px 5px #000;
    -moz-box-shadow: 3px 3px 5px #000;
    -o-box-shadow: 3px 3px 5px #000;
	box-shadow: 3px 3px 5px #000;*/
}

.txt-wrapper {
	white-space: normal;
	text-wrap: normal;
	word-wrap: break-word;
}

.txt-nowrapper {
	white-space:pre;
	text-wrap:none;
	word-wrap:initial;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    font-size: 0;
    clear: both; 
    visibility: hidden;
}

.scrolllist {
    width:100%;
	height: auto;
    max-height: 300px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
    padding-bottom:10px;
    padding-right:10px;
}

.topbar {
    position : absolute;
    
	width: auto;
	height: auto;
}

.flex-centering {
    position:relative;
    top: 50%;
    width:100%;

    /*border: 1px solid #FF0000;*/  
    margin: -200px auto 0 auto;
    max-width:1230px;
}

.flex-container {

    width:100%;
    max-height:100%;

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;

    display:-webkit-box;
    display:-moz-box;
    display:-o-box;
    
    /*-webkit-box-pack: center;*/
    -moz-box-pack: center;
}

.flex-container.centering {
    position:absolute;
    top: 50%;
    width:100%;
    margin-top:-190px;
}

.flex-container .centerBox   {
    -webkit-box-ordinal-group: 2;  
    -moz-box-ordinal-group: 2;  

    -webkit-box-flex: 1;
    -moz-box-flex: 1; 
}  
.flex-container .leftBox    {
    -webkit-box-ordinal-group: 1;  
    -moz-box-ordinal-group: 1;
}  
.flex-container .rightBox   {
    -webkit-box-ordinal-group: 3;  
    -moz-box-ordinal-group: 3;
}

.topbar.inline {
    position : relative;
}

.trimming {
    width: 60px;
    height: 60px;

    overflow:hidden;

    float:left;
    margin: 0.1em 0.3em 0.3em 0.3em;

    display:block;
    text-align: center;
	/*vertical-align: middle;*/
    

    border: 3px solid #fff !important; 

    -ms-box-shadow: 2px 2px 5px #000;
    -webkit-box-shadow: 2px 2px 5px #000;
    -moz-box-shadow: 2px 2px 5px #000;
    -o-box-shadow: 2px 2px 5px #000;
    box-shadow: 2px 2px 5px #000;

    background-color:#000;

}

.thumb {
    height: 60px;
}

.crop {
    width: 24px;
    height: 24px;
    overflow: hidden;
    float: left;
    margin-top: 0.5em;
    margin-left: 0.5em;
}

    .crop .edit {
        margin: -5px 0px 0px -1654px;
    }

    .crop .delete {
        margin: -5px 0px 0px -150px;
    }

/*
 * Effect
 */

.anim-effect {
    /*-webkit-animation-name: anim-insert-predict;*/
    -ms-transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
    transition: 0.5s;
    /*-webkit-transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;*/
}


/*
 * Layout
 */

.tile {
    position: relative;
    overflow: hidden;

	float: left;
    /*opacity: 0.8;*/
    /*border: 1px solid #044062;*/
    background-color: #fff;
    /*background-image: -webkit-linear-gradient( #5f9cc5,#396b9e );
    background-image: -moz-linear-gradient( #5f9cc5,#396b9e );
    background-image: -ms-linear-gradient( #5f9cc5,#396b9e );
    background-image: -o-linear-gradient( #5f9cc5,#396b9e );
    background-image: linear-gradient( #5f9cc5,#396b9e );*/

    /*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#5f9cc5',  endColorstr='#396b9e');*/

}

.tile .tile-content {
    width: 100%;
    height: 100%;
}

.tile .tile-bubble {

    background-color: #c1c1c1;
    background-image: -webkit-linear-gradient( #fff, #c1c1c1 );
    background-image: -moz-linear-gradient( #fff, #c1c1c1 );
    background-image: -ms-linear-gradient( #fff, #c1c1c1 );
    background-image: -o-linear-gradient( #fff, #c1c1c1 );
    background-image: linear-gradient( #fff, #c1c1c1 );


    border: 1px solid 		#ccc;

    color: rgb(34, 34, 34);

    -webkit-border-radius:1em;
	border-radius:1em;

    position: absolute;
    font-size: 11px;
 
    font-weight: bold;
    padding: .2em .5em;
    top: 50%;
    margin-top: -.9em;
    right: 6px;

    text-shadow: rgb(255, 255, 255) 0px 1px 0px;

}
.tile .aside {
    float: right;
    width: 40%;
    text-align: right;
    /*margin: .3em;*/
}

.tile .desc {
    font-size: 0.7em;
    font-weight: normal;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

    .tile.auto-w {
	    width: auto;
    }

    .tile.auto-h {
	    width: auto;
    }

    .tile.auto {
	    width: 100%;
        height: auto;
    }

    .tile.fit-w {
	    width: 100%;
        height: auto;
    }

    .inbox {
        width: 100%;
        height: auto;
        float: none;
        margin: 0;
    }

    .tile.inbox-contents {
         width: auto;
         height:100%;
         float: none;
        
         text-align: center;
         color:#000;
         text-shadow:#fff;

        -ms-box-shadow: 2px 2px 5px #000 inset;
        -webkit-box-shadow: 2px 2px 5px #000 inset;
        -moz-box-shadow: 2px 2px 5px #000 inset;
        -o-box-shadow: 2px 2px 5px #000 inset;
        box-shadow: 2px 2px 5px #000 inset;

        background-color: #fff;
        background-image: -webkit-linear-gradient( #c1c1c1, #fff );
        background-image: -moz-linear-gradient( #c1c1c1, #fff );
        background-image: -ms-linear-gradient( #c1c1c1, #fff );
        background-image: -o-linear-gradient( #c1c1c1, #fff );
        background-image: linear-gradient( #c1c1c1, #fff );
	    
    }

    .inbox-contents .thumb {
        width: auto;
        height:160px;

        border: 3px solid #fff;
        margin: 0.45em 0.3em 0.3em 0.3em;
    }
    

.tile h1, .tile h2, 
.tile h3, .tile h4, 
.tile h5, .tile h6,
.tile p {
    /*color: #fff;*/
}

.tile h1, .tile h2 {
    text-shadow: 2px 2px 4px #000;
}


.tile h3, .tile h4, 
.tile h5, .tile h6,
.tile p {
    /*text-shadow: 1px 1px 2px #000;*/
}

.tile h1, .tile h2, 
.tile h3, .tile h4, 
.tile h5, .tile h6,
.tile p, .tile img {
    /*margin: 0.25em 0.5em 0.25em 0.5em;*/  
}

.tile-field {
}
.tile .tile-field .tf-icon{
    float:left;
    height:1.75em;
}
.tile .tile-field .tf-subbody{
    /*float:right;*/
    margin-left: 0.25em;
    width:360px;
}
.tile .tile-field .tf-body{

}





/* 車両情報吹き出し */
.carinfo-tooltip {
    list-style:none;
}
    .carinfo-tooltip li{
        display:block;
        height:10px;
    }

        .carinfo-tooltip li label {
            width:40%;
            float:left;
        }

/*
 * 端末により異なる要素
 */
.stbar-offset {
    top: 0px;
}

    .topbar {   
        /*padding: 6px;*/
width: 190px;
    }
	
	.tile {
		width: 75px;
		height: 75px;
		/*margin: 6px;*/
        		
        /*-ms-border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -o-border-radius: 6px; 
        border-radius: 6px;*/

        /*-ms-box-shadow: 5px 5px 10px #000;
        -webkit-box-shadow: 5px 5px 10px #000;
        -moz-box-shadow: 5px 5px 10px #000;
        -o-box-shadow: 5px 5px 10px #000;
        box-shadow: 5px 5px 10px #000;*/
        -ms-box-shadow: 4px 4px 13px -6px #4a4a4a;
        -webkit-box-shadow: 4px 4px 13px -6px #4a4a4a;
        -moz-box-shadow: 4px 4px 13px -6px #4a4a4a;
        -o-box-shadow: 4px 4px 13px -6px #4a4a4a;
        box-shadow: 4px 4px 13px -6px #4a4a4a;

	}

    .tile.litop {
		-webkit-border-top-right-radius: 6px;
	    border-top-right-radius: 6px;
	    -webkit-border-top-left-radius: 6px;
	    border-top-left-radius: 6px;

        -webkit-border-bottom-right-radius: 0px;
	    border-bottom-right-radius: 0px;
	    -webkit-border-bottom-left-radius: 0px;
	    border-bottom-left-radius: 0px;
	}
    .tile.libottom {
		-webkit-border-top-right-radius: 0px;
	    border-top-right-radius: 0px;
	    -webkit-border-top-left-radius: 0px;
	    border-top-left-radius: 0px;

        -webkit-border-bottom-right-radius: 6px;
	    border-bottom-right-radius: 6px;
	    -webkit-border-bottom-left-radius: 6px;
	    border-bottom-left-radius: 6px;
	}

    .tile.auto {
	    min-width: 75px;
    }
	
    .tile h2 {
		font-size: 1.75em;
        line-height: 1.25em;
	}

/*
 * BinMap
 */
.MicrosoftMap .infobox-title,
 .MicrosoftMap .infobox-info {
    width: 230px;
    text-shadow: none;
    color: #000000;
    display:block !important;
}

.MicrosoftMap .infobox-body .item {
    float: initial;
    opacity: 1.0;
    margin: 0;
    display: block; 
}

 .MicrosoftMap .Infobox2 .infobox-body {
    width: 240px;
    opacity: 0.95;
    padding:0px !important;
    /*-webkit-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;*/
}
 .MicrosoftMap .Infobox2 .infobox-title {
    margin: 0 !important;
    font-size: 1.2em !important;
    color: #000000 !important;
    border-bottom:1px solid #000000 !important;
    padding:10px 0px 0px 10px !important;
    background-color:#e0e0e0 !important;
}

 .MicrosoftMap .Infobox2 .infobox-info {
    background-color:#ffffff !important;
    padding:6px 0px 6px 10px;
    margin:0px !important;
}
 .MicrosoftMap .MiniInfobox2 {
    max-width:400px;
    min-width:260px;
    display:none;
}
 .MicrosoftMap .MiniInfobox2 .infobox-body {
    white-space: normal !important;
}

 .MicrosoftMap .MapPushpinBase img{
     -ms-transform-origin:50% 100%  !important;
     -webkit-transform-origin:50% 100%  !important;
     -moz-transform-origin:50% 100%  !important;
     -o-transform-origin:50% 100%  !important;
     transform-origin:50% 100%  !important;

    position: absolute;
    bottom: 0px;

    /*-ms-transition: 0.1s ease-in;
	-webkit-transition: 0.1s ease-in;
	-moz-transition: 0.1s ease-in;
	-o-transition: 0.1s ease-in;
    transition: 0.1s ease-in;*/
}

/*
 * jQueryMobileの上書き。背景透過 モバイル用？
 */
.ui-page.ui-body-c.ui-page-active {
	background-color: transparent;
	background-image: none;
}

.ui-listview > .ui-li.ui-first-child, .ui-listview .ui-btn.ui-first-child > .ui-li > .ui-btn-text > .ui-link-inherit {
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
}

.ui-listview > .ui-li.ui-last-child, .ui-listview .ui-btn.ui-last-child > .ui-li > .ui-btn-text > .ui-link-inherit, .ui-collapsible-content > .ui-listview:not(.ui-listview-inset), .ui-collapsible-content > .ui-listview:not(.ui-listview-inset) .ui-li.ui-last-child {
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.ui-li-heading {
	font-size:0.8em;
    font-weight:bold;
    color:#52b7ff;
    margin: .3em 0;
}

.pl_body .ui-btn-icon-right .ui-btn-inner {
    padding-right: 0px;
}

/*
 * Color
 */

.bg-blue {
    background-color: #396b9e;
    background-image: -webkit-linear-gradient( #5f9cc5,#396b9e );
    background-image: -moz-linear-gradient( #5f9cc5,#396b9e );
    background-image: -ms-linear-gradient( #5f9cc5,#396b9e );
    background-image: -o-linear-gradient( #5f9cc5,#396b9e );
    background-image: linear-gradient( #5f9cc5,#396b9e );
}

.bg-blue-h {
    background-color: #5f9cc5;
    background-image: -webkit-linear-gradient( #6facc5,#5f9cc5 );
    background-image: -moz-linear-gradient( #6facc5,#5f9cc5 );
    background-image: -ms-linear-gradient( #6facc5,#5f9cc5 );
    background-image: -o-linear-gradient( #6facc5,#5f9cc5 );
    background-image: linear-gradient( #6facc5,#5f9cc5 );
}

.bg-blue-l {
    background-color: #6facd5;
    background-image: -webkit-linear-gradient( #5393c5,#6facd5 );
    background-image: -moz-linear-gradient( #5393c5,#6facd5 );
    background-image: -ms-linear-gradient( #5393c5,#6facd5 );
    background-image: -o-linear-gradient( #5393c5,#6facd5 );
    background-image: linear-gradient( #5393c5,#6facd5 );
}

.bg-blue-r {
    background-color: #396b9e;
    background-image: -webkit-linear-gradient( #396b9e,#5f9cc5 );
    background-image: -moz-linear-gradient( #396b9e,#5f9cc5 );
    background-image: -ms-linear-gradient( #396b9e,#5f9cc5 );
    background-image: -o-linear-gradient( #396b9e,#5f9cc5 );
    background-image: linear-gradient( #396b9e,#5f9cc5 );
}

.bg-orange {
    background-color: #9e6b39;
    background-image: -webkit-linear-gradient( #c59c5f,#9e6b39 );
    background-image: -moz-linear-gradient( #c59c5f,#9e6b39 );
    background-image: -ms-linear-gradient( #c59c5f,#9e6b39 );
    background-image: -o-linear-gradient( #c59c5f,#9e6b39 );
    background-image: linear-gradient( #c59c5f,#9e6b39 );
}

.bg-white {
    background-color: #fff;
    background-image: -webkit-linear-gradient( #fff, #c1c1c1 );
    background-image: -moz-linear-gradient( #fff, #c1c1c1 );
    background-image: -ms-linear-gradient( #fff, #c1c1c1 );
    background-image: -o-linear-gradient( #fff, #c1c1c1 );
    background-image: linear-gradient( #fff, #c1c1c1 );
}

.bg-white-r {
    background-color: #c1c1c1;
    background-image: -webkit-linear-gradient( #c1c1c1, #fff );
    background-image: -moz-linear-gradient( #c1c1c1, #fff );
    background-image: -ms-linear-gradient( #c1c1c1, #fff );
    background-image: -o-linear-gradient( #c1c1c1, #fff );
    background-image: linear-gradient( #c1c1c1, #fff );
}


/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

/* TOYOTA市向け追加*/
#pullmap{
    display:none;

}
#titlebox{
        display:block;
        /*width:250px;*/

}
#titleBoxMsg{
    margin: 20px;
}
.titlebox-title{
    /*margin-top: 10px;*/
    font-size: 14px;
    border-bottom: solid 1px #e5e5e5;
}
.titlebox-time{
    font-size: 10px;
    margin-bottom: 10px;
    margin-top: 5px;
    /*color: #999999;*/
    font-weight: normal;
}

#passprobe-chart{
    display:none;
}

#update{
    display:none;

}

.no-disp{
    display:none!important;
}