/* ======================================

    Common.css
    　全画面共通のスタイル

======================================== */

/*---------------------------------

  Contents

---------------------------------*/
html{
	font-size: 62.5%;
}
html,body,form {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* --- Font --- */
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','メイリオ', Meiryo,'ＭＳ Ｐゴシック','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','MS PGothic', 'sans-serif';
	/*font-family: 'Meiryo', 'MS PGothic', 'sans-serif';*/
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 1.5rem;
	color: #f8f8f8;
	background-color: #222;	
    overflow: hidden;
}

form {
    overflow: hidden;
}

iframe {
    width: 100%;
    height: 100%;
}

/* コンテンツ位置 */
#maincontent-wrap {
    overflow: auto;
}

/* 
    スクロールバー
------------------------- */
/* スクロールの幅の設定 */
::-webkit-scrollbar {
  width: 17px;
}
/* スクロールのつまみ部分の色設定 */
::-webkit-scrollbar-thumb {
  background: #68D5DB;
}
/* 
    inputタグ ×ボタン
------------------------- */
input::-ms-clear {
    visibility:hidden
}
/* 
    ラジオボタン
------------------------- */
input[type=radio] {
    display: none;
}

input[type=radio] + label {
    width: 100%;
    position: relative;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-image: url('./images/radio_off_mini.png');
    padding-left: 20px;
    margin-left: 20px;
    cursor: pointer;
}
input[type=radio]:checked + label {
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-image: url('./images/radio_on_mini.png');
    cursor: pointer;
}
/* 
    チェックボックス
------------------------- */
input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    width: 100%;
    position: relative;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-image: url('./images/checkbox_none_mini.png');
    padding-left: 20px;
    margin-left: 20px;
    cursor: pointer;
}
input[type=checkbox]:checked + label {
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-image: url('./images/checkbox_check_mini.png');
    cursor: pointer;
}


/* 
    テキストボックス
    ドロップダウンリスト
------------------------- */
.textbox,
.dropdownlist {
    width: 180px;
    height: 24px;
    padding: 3px;
	font-size: 1.2rem;
	color: #222;
	border: solid 1px #ccc;
    box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    box-sizing: border-box;
}
.dropdownlist {
    padding: 0px;
}
.textbox:read-only {
    background:rgb(235, 235, 228);
}

/* 
    テキストボックスプレースホルダー
------------------------- */
.textbox-placeholder {
    position: absolute;
    top: 6px;
    right: 4px;
    height: 24px;
    line-height: 24px;
    color: #a9a9a9;
    font-size: 1.2rem;
}

/* 
    カレンダーコントロールテキストボックス
------------------------- */
.calendarControl .dateTextBox {
    font-size: 1.2rem !important;
}

/* 
    ボタン（Menu）
------------------------- */
.btn-menu {
    width: 40px;
    height: 36px;
	border: solid 1px #68d5db;
	border-radius: 5px;
    background-color: transparent;
	background-size: 25px 25px;
	background-repeat: no-repeat;
	/*background-position: center;*/
    background-position: top;
    /*padding: 3px;*/
	/*font-size: 12px;*/
    font-size: 0.9rem;
    text-align: center;
	/*color: #222;*/
    color: #68d5db;
    line-height: 56px;
    box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    cursor: pointer;
    outline: 0;
    background-image: url('./images/menu_mini.png');
    left: 0;
    /*margin-left: calc(100% - 50px);*/
    margin-top: 5px;
}

/* 
    ボタン（Small）
------------------------- */
.btn-s {
    width: 60px;
    height: 30px;
	border: solid 1px #68d5db;
	border-radius: 5px;
    background-color: transparent;
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: center;
    /*padding: 3px;*/
	font-size: 12px;
	/*color: #222;*/
    box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    cursor: pointer;
    outline: 0;
}

/* 
    ボタン（Midium）
------------------------- */
.btn-m {
	width: 80px;
	height: 30px;
	border: solid 1px #68d5db;
	border-radius: 5px;
    background-color: transparent;
	background-size: 25px 25px;
	background-repeat: no-repeat;
	background-position: center;
    /*padding: 3px;*/
	font-size: 1.2rem;
	/*color: #222;*/
    box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    cursor: pointer;
    outline: 0;
}

/* 
    ボタン（Large）
------------------------- */
.btn-l {
    width: 200px;
    height: 50px;
    border: solid 1px #68d5db;
    border-radius: 5px;
    background-color: transparent;
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: 74px 8px;
    font-size: 1.8rem;
    /*color: #f8f8f8;*/
    box-shadow: 0px 1px rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    cursor: pointer;
    outline: 0;
}

.btn-s,
.btn-m,
.btn-l,
.btn-style,
input[type="submit"] {
    color: #f8f8f8;
    background-color: #222 !important;
    border: solid 1px #68d5db;
}

.btn-s.inverted,
.btn-m.inverted,
.btn-l.inverted,
.btn-style.inverted,
input[type="submit"].inverted {
    color: #222;
    background-color: #68d5db !important;
    border: solid 1px #68d5db;
}

.btn-menu:hover,
.btn-s:hover,
.btn-m:hover,
.btn-l:hover,
.btn-back:hover,
.btn-next:hover{
    transition-duration: 0.3s;
    background-color: rgba(104, 213, 219, 0.4) !important;
}

.btn-menu-close {
    background-image: url('./images/menuc_mini.png');
}

.btn-add {
	background-image: url('./images/add_mini.png');
}

.btn-minus {
    background-image: url('./images/minus_mini.png');
}

.btn-rotate {
    background-image: url('./images/rotate_mini.png');
}

.btn-setting {
	background-image: url('./images/setting_mini.png');
}

.btn-search-save {
	background-image: url('./images/search_save_mini.png');
}

.btn-search {
	background-image: url('./images/search_mini.png');
}

.btn-search.inverted {
	background-image: url('./images/search_inverted_mini.png');
    background-color: #68d5db;
}

.btn-close {
	background-image: url('./images/close_mini.png');
}

.btn-upload {
	background-image: url('./images/upload2_mini.png');
}

.btn-download {
	background-image: url('./images/download2_mini.png');
}

.btn-back {
	background-image: url('./images/back_mini.png');
}

.btn-detail {
	background-image: url('./images/detail_mini.png');
}

.btn-next {
	background-image: url('./images/next_mini.png');
}

.btn-prev {
	background-image: url('./images/prev_mini.png');
}

.btn-comp-blue {
    background-image: url('./images/comp_mini.png');
}

.btn-comp-gray {
	background-image: url('./images/comp4_mini.png');
}

.btn-stop {
	background-image: url('./images/stop_mini.png');
}

.btn-start {
	background-image: url('./images/start_mini.png');
}

.btn-off {
	background-image: url('./images/off_mini.png');
}

.btn-pause {
	background-image: url('./images/pause_mini.png');
}

.btn-calendar {
	background-image: url('./images/calendar.png');
}

.btn-calendar.inverted {
	background-image: url('./images/calendar_inverted.png');
    background-color: #68d5db;
}

.btn-save {
	background-image: url('./images/save_mini.png');
}

.btn-clear {
	background-image: url('./images/clear_mini.png');
}

.btn-all-clear {
    background-image: url('./images/all_clear_mini.png');
}

.btn-arrow-left {
    background-image: url('./images/arrow_left.png');
}

.btn-arrow-left-double {
    background-image: url('./images/arrow_left_double.png');
}

.btn-arrow-right {
    background-image: url('./images/arrow_right.png');
}

.btn-arrow-right-double {
    background-image: url('./images/arrow_right_double.png');
}

.btn-reset {
    background-image: url('./images/reset_mini.png');
}

.btn-redo {
    background-image: url('./images/redo_mini.png');
}

.btn-scale-big-width {
    background-image: url('./images/scale_big2_mini.png');
}

.btn-scale-small-width {
    background-image: url('./images/scale_small2_mini.png');
}

.btn-scale-big {
    background-image: url('./images/scale_big_mini.png');
}

.btn-scale-small {
    background-image: url('./images/scale_small_mini.png');
}

.btn-scale-reset {
    background-image: url('./images/scale_reset_mini.png');
}

.btn-printer {
    background-image: url('./images/printer_mini.png');
}

.btn-folder-fill {
    background-image: url('./images/folder_mini.png');
}

.btn-folder {
    background-image: url('./images/folder2_mini.png');
}

.btn-open {
    background-image: url('./images/open_mini.png');
}

.btn-edit {
    background-image: url('./images/edit_mini.png');
}

.btn-up {
    background-image: url('./images/up_mini.png');
}

.btn-up-double {
    background-image: url('./images/up_double_mini.png');
}

.btn-down {
    background-image: url('./images/down_mini.png');
}

.btn-down-double {
    background-image: url('./images/down_double_mini.png');
}

.btn-big-next {
    background-image: url('./images/next2.png');
}

.btn-big-next-black {
    background-image: url('./images/next1.png');
}

.btn-big-next-gray {
    background-image: url('./images/next3.png');
}

.btn-big-prev {
    background-image: url('./images/prev2.png');
}

.btn-big-prev-black {
    background-image: url('./images/prev1.png');
}

.btn-big-prev-gray {
    background-image: url('./images/prev3.png');
}

.btn-reader1 {
    background-image: url('./images/reader1_mini.png');
}

.btn-reader2 {
    background-image: url('./images/reader2_mini.png');
}

.btn-add-gray {
    background-image: url('./images/add_gray_mini.png');
}

.btn-edit-mode {
    background-image: url('./images/edit_mode_mini.png');
}
.btn-top {
    background-image: url('./images/top_mini.png');
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

a.btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -999px;
}


/* 
    ボーダー
------------------------- */
.border-orange {
	border-color: #FAA400 !important;
}

.border-green {
	border-color: #028760 !important;
}

.border-red {
	border-color: #c9171e !important;
}

.border-yellow {
	border-color: #ffd900 !important;
}

.border-gray {
	border-color: #949495 !important;
}

.border-gray2 {
    border-color: #808080 !important;
}

.border-gray3 {
    border-color: #2f2f2f !important;
    //border-color: #483d8b !important;
    //border-color: #6a5acb !important;
}

.border-white {
	border-color: #f8f8f8 !important;
}

/* 
    一覧表示
------------------------- */
/* 一覧項目 */
.list-content-background {
    background: transparent;
}

/* 情報表示部 */
.list-info-background {
    background: #444;
}

/* 
    タイトルリボン
------------------------- */
.title-ribbon {
	text-align: left;
	position: relative;
	/*height: 30px;*/
	width: 320px;
	box-sizing: border-box;
	margin: 0px;
}
.title-ribbon:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
    top: 0;
    right: 0;
    border-width: 15px 10px 15px 0px;
    /*border-color: transparent #444 transparent transparent;*/
    border-style: solid;
    border-color: transparent #222 transparent transparent; /* 一覧項目の情報表示部と同色 */
}
.ribbon-30 {
    height: 30px;
}
.ribbon-30:after {
    border-width: 15px 10px 15px 0px;
}
.ribbon-50 {
    height: 50px;
}
.ribbon-50:after {
    border-width: 25px 10px 25px 0px;
}
.ribbon-70 {
    height: 70px;
}
.ribbon-70:after {
    border-width: 35px 10px 35px 0px;
}
.ribbon-100 {
    height: 100px;
}
.ribbon-100:after {
    border-width: 50px 20px 50px 0px;
}

/* 
    カレンダー
------------------------- */
.calendar th {
    background: transparent;
}
.calendar td {
    border: 1px dashed #999;
    background: #555;
}

#divCalendar .prevNext {
    background-color: #222;
}

#divCalendar .prevNext:hover {
    background-color: #333;
}

#divCalendar th {
    color: #68d5db;
    font-weight: bold;
}

#divSelectList th {
    color: #fff;
}

#divCalendar td:not(.selectable) {
    background-color: transparent;
}

/* 選択可能 */
.calendar td.selectable {

}
/* 選択日 */
.calendar td.TargetDate {

}

/* 
    タイトル
------------------------- */
span.title {
    font-size: 2.4rem;
    font-weight: bold;
    vertical-align: top;
}

/*　
    検証コントロールテキスト
--------------------------------*/
.validator {
    position: absolute;
    width: 260px;
    border: solid 2px #F00;
    padding: 10px;
    background: #FFF;
    font-size: 1.2rem;
    color: #F00;
    z-index: 1;
    margin-top: 10px;
    word-wrap: break-word;
    border-radius: 5px;
    line-height: 25px;
    box-shadow: 6px 4px 4px rgba(0,0,0,0.4);
    background: rgba(255, 235, 235, 1);
}

.validator:before {
	content: "";
	position: absolute;
	top: -11px;
	left: 10%;
 	margin-left: -15px;
	border: 17px solid transparent;
    border-top: 0px solid transparent;
	border-bottom: 11px solid rgba(255, 235, 235, 1);
    z-index: 2;
}

.validator:after {
	content: "";
	position: absolute;
	top: -13px;
	left: 10%;
 	margin-left: -17px;
	border: 19px solid transparent;
    border-top: 0px solid transparent;
	border-bottom: 12px solid #F00;
    z-index: 1;
}

/* 
    カーソル
------------------------- */
/* デフォルト */
.cursor-default {
    cursor: default;
}

/* ポインター */
.cursor-pointer {
    cursor: pointer;
}

/*　
    processing
--------------------------------*/
#processing {
    display: none;
	position: absolute;
	left: calc(50% - 112px);
	top: calc(50% - 167px);
    z-index: 99999;
    text-align: center;
    color: #000;
    font-size: 1.4rem;
    opacity: 0.8;
}

#processing_string {
    position: absolute;
    color: #fff;
    top: calc(50% - 10px);
    left: calc(50% - 75px);
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 12em;
    height: 12em;
}
.loader {
    margin: 60px auto;
    font-size: 1.5rem;
    position: relative;
    /*text-indent: -9999em;*/

    /* type1 */
    /*border-top: 1.1em solid rgba(104, 213, 209, 0.01);
    border-right: 1.1em solid rgba(104, 213, 209, 0.1);
    border-bottom: 1.1em solid rgba(104, 213, 209, 0.2);
    border-left: 1.1em solid #68d5db;*/

    /* type2 */
    border-top: 1.1em solid rgba(104, 213, 209, 0);
    border-right: 1.1em solid rgba(104, 213, 209, 0);
    border-left: 0.9em solid #68d5db;

    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: loading 0.8s infinite linear;
    animation: loading 0.8s infinite linear;

    /*top: calc(100% - 668px);*/
}

.processing-overlay {
    display: none;
    z-index: 99998;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
}

/* 
    非表示
------------------------- */
.hidden {
    display: none;
}

/*　
    点滅
--------------------------------*/
.blinking {
	-webkit-animation: blink 1.5s ease-in-out infinite alternate;
    -moz-animation: blink 1.5s ease-in-out infinite alternate;
    animation: blink 1.5s ease-in-out infinite alternate;
}

/*---------------------------------

  色

---------------------------------*/
.back-orange {
	background: #FAA400;/*背景色*/
	color: #f8f8f8;/*文字色*/
}

.back-green {
	background: #028760;/*背景色*/
	color: #f8f8f8;/*文字色*/
}

.back-red {
	background: #c9171e;/*背景色*/
	color: #f8f8f8;/*文字色*/
}

.back-yellow {
	background: #ffd900;/*背景色*/
	color: #222;/*文字色*/
}

.back-gray {
	background: #949495;/*背景色*/
	color: #222;/*文字色*/
}

.back-gray2 {
    background: #808080; /*背景色*/
    color: #f8f8f8; /*文字色*/
}

.back-gray3 {
    background: #2f2f2f; /*背景色*/
    color: #f8f8f8; /*文字色*/
}

.back-white {
	background: #f8f8f8;/*背景色*/
	color: #222;/*文字色*/
}

.back-overlay {
    background-color: rgba(0,0,0,0.75);
}

/*---------------------------------

  アニメーション

---------------------------------*/
/* 
    点滅アニメーション
------------------------- */
@-webkit-keyframes blink {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink {
    0% {opacity:0;}
    100% {opacity:1;}
}

/* 
    ローダーアニメーション
------------------------- */
@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loading {
    0% {
         -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
    }
}

/*---------------------------------

  Dialog

---------------------------------*/
/* 
    Contents
------------------------- */
.dialog-content {
    position: fixed;
    display: none;
    z-index: 1002;
    width: 700px;
    height: 500px;
    margin: 0;
    border: 2px solid #f8f8f8;
    border-radius: 5px;
    background-color: #222222;
}

/* 
    Overlay
------------------------- */
.dialog-overlay {
    z-index: 1001;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
}


/*---------------------------------

  カスタムメッセージボックス（仮）

---------------------------------*/
.ui-dialog {
    min-width: 600px;
}
.ui-widget-content {
    border: 1px solid #68D4DA;
    background: #222;
    color: #f8f8f8;
}
.ui-widget-content.ui-widget {
    border: 1px solid #666666;
    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','メイリオ', Meiryo,'ＭＳ Ｐゴシック','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','MS PGothic', 'sans-serif';
}
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-state-disabled.ui-button:hover, 
html .ui-state-disabled.ui-button:active {
    border: 1px solid #68D4DA;
}
.ui-widget-header {
    border: 1px solid #68D4DA;
    background: #68D4DA;
    color: #333;
    font-weight: bold;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    border: 1px solid #333;
    background: #158c94;
    font-weight: normal;
    color: #f8f8f8;
}

/* 
    Header
------------------------- */
.ui-dialog .ui-dialog-title {
    text-align: left;
}

/* 
    Contents
------------------------- */
.ui-dialog .ui-dialog-content {
    text-align: left;
    padding: 1.5rem 1rem;
}